After hiring our 3rd designer at Northstar, I’ve been shifting a lot of my growth to learning about being a leader and mentor for my team. It’s a huge challenge for me personally, who has been mainly an IC designer in every role I’ve had in some capacity.
Now that things are starting to shift and my day-to-day is more around decision making and process iterations, people look to me for answers and guidance each day. I don’t know about you, but it’s scary to have that pressure every day you show up to work.
I know it comes with the territory and I asked for this in a way, but some days get harder to work through.“If I just put in a few more hours, our goals will be achieved more quickly.”
“My team is counting on me, this has to be done tonight.”
“Eh, I can skip lunch for this call. I’ll eat after!”
“I can’t sleep in, what if an emergency happens even though it’s 7:00am on a Thursday?”
But after one-too-many weeks of this, I’d be setting myself and my team up for a worse situation.
When I don’t take care of myself mentally or physically, I slowly expend my energy exponentially. I’m not as alert in meetings, I’m distracted by stress, I’m overly irritable, I’m not myself.
I want to be the best version of myself for those around me. That way, I’ll be better able to do what I do best. I listen better, I’m able to focus easier, I’m more open to receiving feedback, and I give better feedback myself.
What You Can Do
You need to put yourself first. Not in a malicious way, but in a way that sets healthy boundaries between work and life. Boundaries that put your health and comfort first, in a way that lets you do your best work. It’s one thing to be self-disciplined and motivated, but another to drive your life into the ground for it.
Remember to spend time with yourself and with your family/friends. Do things that bring you joy and pursue your hobbies. Remember to exercise, eat right, and take care of your body. Go to therapy and work on yourself. Maybe try meditation or yoga before work. Remember to do nothing sometimes too, just exist and listen to the world around you.
Put yourself before anything, the people around you will be happy you did.
I'd like to recommend one of my favorite books I've ever read, Powerful by Patty McCord. Patty was a Co-Founder at Netflix and worked there for 14 years, developing the culture of the company.
Let’s admit it. Creating color palettes in Product Design is a tough feat to do well, and there doesn’t seem to be much of a process besides trial and error usually for figuring out what will work best in context.
While this is true, there is an approach you can take that will put you on the right path with opacities, similarly to my post last week on Text Colors in Product Design. Let me explain!
Primary Brand Color
If you work at a company, chances are that your primary brand color is settled upon at this moment. The basis of this process relies on your brand primary color as that will be what users will most likely see throughout the application. Using your brand color as a starting point will keep this process and color palette harmonious and consistent. For simplicity’s sake, I’m going to start with this purple as the primary brand color in my example.
#5C51E0 will be our example hex code
Brand Black
Now, using my primary brand color, I’m going to create a black that is on brand with my primary color. I recommend not using a pure black color in the product you are working on (unless you’re brand color is pure black, then that works ¯\_(ツ)_/¯) as it can feel stark and inconsistent with other colors you are using.
It’s simple to do this, just start with your brand color (our purple in this case) and bring your slider straight down (or even down and a little to the right for saturation) until you reach a comfortable “black” that contains hue from your primary brand color without getting to the bottom. See below!
Now we have a “black” that is dark enough to use how we would normally use a black (text, background, etc.) but it won’t feel stark or contrasted when paired with our primary brand color. The cool hue provides familiarity to our “black” and serves as a basis for building out the rest of our color palette. Speaking of, let’s move on to opacities!
Opacity Galore
With our Brand Black created, we can now easily generate a color system to be used on elements and backgrounds throughout our product using opacities. I took our Brand Black and made 5 other copies, lowering the opacities by 20% until the last one where I go to 5% for light backgrounds keeping the background as a solid #FFFFFF white. Then, I do the same with a dark background using a pure #FFFFFF as the basis and lower the opacities the same way I did for the Brand Black. See below!
Blacks usedWhites used
As you can see, each of these colors have the same base hue and keeps them looking and feeling consistent as a palette throughout your application. No more having to guess what colors and hues will match with endless trial and error testing!
With matching hues, these neutral tones will serve as a basis for colors of different neutral elements. I tend to make a key for what each one of these will represent, and using them together makes for interesting combinations of elements that you can use to your advantage in different scenarios.
In Product Design Practice
Here’s a quick concept example I made using the brand color and opacities I mentioned above:
Quick example I made, can't wait for GOW!
As you can see, each of the colors have a mixed hue of our primary brand purple color while keeping the overall feel and accessibility consistent for users. None of the colors feel stark or out of place and we have the ability to use our brand color as actions with neutral elements not feeling out of place or distracting.
What About Passing to Developers?
Okay so now you may be asking yourself how you can communicate this system with a developer and how it would work in code. It’s actually quite simple! Luckily for you, both mobile (yes, native too) and web technologies support an RGBA function as a way to specify color values. How does this work? Here’s a little key and example:
rgba(230,18,75,0.5);
// the first 3 numbers are your R, G, and B values (0 - 256).
// the last digit is the alpha, or opacity in our case
// pass in a decimal number equal to the opacity you want
// EXAMPLES
// For a black at 5% opacity
color: rgba(0,0,0,0.05);
// For a white at 80% opacity
color: rgba(256,256,256,0.8);
And voilà! You can create a key very simply for developers like you normally would with a style sheet of some sort, just exchange hex codes for RGBA function values for your neutral colors. I’d also recommend creating a guide around when and where to use certain opacities as a guide for your design team and development team to keep this usage consistent for user patterns.
Design, code, and the pursuit of being better at each was all I lived and breathed in college. It’s all I ever thought about, to the point of me daydreaming in class about what I was working on the night before and how I would continue it later that day. I sacrificed time with friends, with my significant other, and even time for my health because of how much I wanted the goals I had in life.
This is incredibly important still, and should be for you as well, but it’s in a completely different way and balance than before.
Back then I would wish I had made time to work on music, or to go to the gym and focus on well-being, or to pick up a new hobby, but I wouldn’t act on those feelings. I’d brush them off and put my head back down and continue to grind away at design and code. They’d remain afterthoughts, pushed to the back of my mind while still being a subconscious yearning to pursue.
Almost a year has gone by since I felt the way I did above.
I’ve had some career changes that shifted my free time from wanting to work on design to needing decompression from a full-time design job. I started to get worried (and still do sometimes to be honest) that I wasn’t a “productive” person anymore. I didn’t come home anxious to work on my next side project and ship something on my own, living on the constant high of being that person that never sleeps.
I slowly but surely transferred my free time to finding other pursuits in life that didn’t revolve around the same topic as my full-time work. I was able to explore other mediums of creativity, expression, and decompression that weren’t design or code.
An appropriate quote I came across in the book Rest:
If your work is your self, when you cease to work, you cease to exist.
Rest by Alex Soojung-Kim Pang
This quote made me take a step back and think about how much my life was reliant on the outcome of my work. I felt that if I didn’t have my work or what I do full-time, I didn’t really have much to offer and wanted to re-evaluate why and where this came from.
It turns out that I got my confidence from my work. I was confident in my ability to design, code, and illustrate for clients at a high level, was proud of the amount of income I had gotten to, what that income was able to buy me, and how proud I was of myself. While these are all very much valid and present feelings, I’ve been able to shift that mentality and confidence to a more widespread set of skills and personality traits.
With four albums under my belt I have a creative outlet I didn’t have before. I recognize I’m compassionate, understanding, and a great support system to others and have invested more time for my friends and coworkers to take that into account. I’ve been working out and eating better for 6 months straight and am much more comfortable with how I dress and how I feel about my body. I’m starting to learn about finances and on my way to being able to buy my first place within a year or two. I play video games almost every day and love the time I have to forget about everything else in the world. I just moved and have invested in making my apartment what I want to call home and express myself.
I’ve always thought I had a balance in life in the past, but am recently realizing the divide and bringing the ratio back to 50:50 between life and work. I’ve been able to find a deeper purpose and meaning for what I want out of life and better visualize and encompass the approach to my goals and strengths.
Think about the quote above and think about how you balance priorities in personal and professional life. They can even be working towards similar goals, but it’s worth thinking about how you currently spend and block off your free time vs your work time.
Apple’s iPad is advertised as a stand alone device that can replace a laptop, but for many this definitely isn’t the case yet. For example, as a Product Designer, I can’t open Sketch or Abstract and go to town on my design files. Or as a developer I can’t reliably code and run a local server to work on a project.
As someone who bought a 12.9" iPad Pro a couple years back, I was hoping this would change. While I can’t do exactly what I mentioned above in the way I would like to, I’ve been able to find ways to bring the iPad more and more into my workflow for design work.
Research and Notes
A spot where the iPad can really shine is in the research phase of work. Research typically only requires a web browser and a way to document your findings which makes the iPad’s split screen perfect for the job.
Image courtesy of Apple.com
My setup consists of a Chrome browser open on the left of my screen and default Apple Notes on the right. You can of course switch these out for whichever replacements you’d like (Google Docs, Dropbox Paper, etc). The side-by-side apps lets me enlarge and shrink windows as I need and even lets me drag and drop both text and media from my browser on to my Notes. This lets me seamlessly mix documentation with my own thoughts and findings. Throw my Apple Pencil into the mix for drawing extras on notes and I’m set for getting my notes complete and organized.
I’ve used this method on countless projects as I really enjoy the mobile aspect of an iPad versus a laptop. Working on the couch or outside or at a coffee shop with a smaller form factor is great. Not to mention mixing touch with writing and drawing (Apple Pencil) is a delight that I think is tough to find in products.
Wireframing
By far my favorite part of design work on an iPad. While there are definitely different ways you can do this depending on your style, I’ll give some recommendations based on my preference.
Photo courtesy of Pattern
Pattern is a favorite app of mine for wireframing. Despite some limitations (no zooming, some tedious editing aspects), Pattern is great for basic wireframing of design screens. The app provides a minimal but useful interface with some delightful interactions for creating interfaces. I personally enjoy the Apple Pencil capabilities as well for making notes directly on your wireframes.
Procreate, while considered more of an app for art, is great for wireframing as well. It’s definitely more difficult to create refined shapes and lines like you can in Pattern, but the layering and editing capabilities can make up for this depending on what you’re looking for.
Inspiration
While producing work is important, consuming of inspiration and other subjects is an paramount in your creative process as well. Luckily, there are a plethora of ways to do this with an iPad. Using a browser the same way you would on a computer to browse you bookmarks and favorite websites is a sure way to do this.
In terms of apps to use, Pinterest is an obvious one for most folks and happens to be a favorite of mine as well. While following people on Pinterest has become pretty obsolete nowadays due to their home feed changes, Pinterest does a great job of feeding relevant posts related to pins you have saved before.
While there are other apps to use such as the Adobe suite, the apps and methods I listed above are the way I personally use my iPad within my product design workflow on an almost daily basis outside of hifi work. Hopefully we’ll see this change in the future and be able to do full-fledged design work but for now this is the method I use.
If you’re someone who is lucky enough to work in the creative field, you probably know how difficult it is to work in the same vein of creative work outside of your full-time job.
I’ve struggled with this since I can remember and still struggle with this to this day. As a digital designer, I’ve always wanted to constantly get better at design and pursue things outside of my full-time gig. To not wear myself thin, I spent time learning other skills that I could blend design with such as design, code, and entrepreneurship. This has proved very useful time and time again and has since helped me accomplish career goals in my life that I am able to enjoy today.
However, now that I’m in a working environment that I love and constantly learn from, I’ve since shifted my focus to other creative outlets outside of work. The main example for me being my music. It’s been about 6 months of me working on music and I’ve noticed it actually have positive influence on my work and personal life so I wanted to share and hopefully encourage you to pursue the same.
I’m happier
When I used to do design all day only to come home to try and design all night, some nights I was miserable. I didn’t feel like hitting my head against the creative wall and getting something mediocre to do the job.
Not that working on other creative outlets doesn’t have its frustrating days, but they are far less often. I typically feel excited to exercise different creative muscles and mature my perspective on different aspects of the creative world. Now I look forward to learning and trying out new things with music and other outlets that impact my happiness and satisfaction creatively.
I’m more productive and motivated
Because I have goals to work towards within my music work, every time I come back to work on those goals I’m more and more excited to get work done. I feel excited to keep working on that track that was coming along well and feel motivated to get better because it’s something relatively new to me. I constantly feel that rush of something new and exciting and look forward to working on music at the end of each work day.
I get creatively refreshed
The work I do in product design can be draining somedays on top of meetings and tasks I have to work on. Decision fatigue becomes a very real thing when you’re working on a difficult project I have found personally.
Luckily I’ve found that creative outlets can really make an impact on this feeling. In contrast to watching TV or playing videos games, creative outlets allow you to flex other creative muscles that influence subconscious thoughts you may have on full-time work.
I can genuinely say that I feel better refreshed and ready to tackle the day after a music session the night before. I feel in a better spot to pick back up on projects at work and can even have a better perspective than I did the day before.
It differentiates me as a person
I personally am someone that doesn’t like to put all their eggs in one basket. Not only do I feel bored and unchallenged, but I feel a plateau constantly creeping up on me as a person overall. For better or for worse, this puts me in a position where trying different things constantly makes me happier overall. On top of this it expands my understanding of other people and industries while finding different ways to inspire others.
Through music for example, I’ve met quite a few new friends and have had others find me online through my musical ventures. Even folks that I know through my design and development work have expressed interest in the work that I do and even shared wanting to try music themselves. Meeting new people and having conversations around creative outlets with others keeps me at ease with the worry I mentioned before.
