header-process.png

Process

 
 

01

Don't forget the big picture

 

It's easy to get caught up in small details and pixels. As designers, we want to deliver the most polished mock ups. It's understandable, but we have to remember that we're designing systems and not stand-alone components. Always remember to ask "What are we trying to communicate? What problem are we solving? How do we want the user to feel? When or how will the user interact with my design? How can the wireframes be refined to increase usability? How can interactions and animations enhance the user experience?"

 

02

Investigate

 

Learn as much as you can about requirements and expected user behavior before you get started. Use that knowledge to inform your design decisions to validate your assumptions. Most importantly, clearly understand the flow and pain points of the UX deliverable before starting the UI process.

 

03

Big to Small

 

Interactive work is always evolving and never "finished". That's what makes it such a fun challenge. Long gone are the days spend slaving over pixel-perfect mockups. Iterate fast and often. Shipping deliverables on a consistent basis means that it's reaching the user faster, providing you with data-driven feedback.

 

04

Don't get attached

 

Don't limit your designs to what you see in the wireframe. Take a step back and focus on how you're trying to solve the problem. The most creative solutions happen when you free your mind up to all of the possibilities.

 

05

Master typography

 

A great user interface design isn't possible without nice type. Communication breaks down when proper hierarchy isn't established through typography. It's always important to understand the differences between printed vs. screen typography. I recommend that designers always evaluate their type sizes on a device using a mirroring tool.

 

06

Work Clean

 

Consistency is key. Delivering a consistent experience to the user allows them to have a better understanding of how things will work. Practically speaking, this means utilizing palettes in Illustrator to reuse elements and styles. If working on a bigger project, starting a pattern library is always a win-win for designers and developers.

 

07

Apply fine art principles

 

Use color to establish hierarchy, keeping in mind foreground vs. background. Reference the tips your painting teacher taught you, like using the squint test to identify what the eye is drawn to the most on a page, or never using 100% black for shadows. 

 

08

Learn code

 

Understanding code allows you to make better design decisions, communicate with developers more effectively, and accurately deliver specifications of your designs. Always take into account how developers will actually turn your design into a working prototype and how that will effect it.

 

09

Be wary of trends

 

Utilizing trends like blurry backgrounds or flat design doesn't make you a good designer. Focus on solving problems over adding a trendy design elements. Moreover, always keep in mind the technical execution of everything you're designing. For instance, while blurry transparent overlays look great in native apps, they're not feasible for the web.

 

10

Design with intent

 

Always have a functional reason for an aesthetic decision. Think things through. Don't just use a color palette because it's pretty. Similarly, always design towards a goal as if you're going to A/B test it. Make sure your intentions are always clear to the user to avoid confusion.

 

11

Pay attention

 

Companies like Google and Apple use patterns backed by data gathered from user research. Study these patterns for reference so that you can embrace established mental models. While innovation is important, acknowledge when reinventing the wheel isn't the best decision.