2.1-v2.jpg
 

Identifying the goal

You and I will be discussing what we want out of the project. Introduce your company or product to me and tell me more about your users. You give me every information you think I need to help me accomplish the job - I’ll be in note taking mode. I’ll be asking questions or give out suggestions along the way. Let’s learn from each other.

 
 
 
2.2.1.jpeg

Wire framing and prototyping

This is my visual representation of what I took from our discussions. Disregarding all our preferences in aesthetics and focusing more on how it works is the key. By covering of as much scenarios (from on-boarding a user to logging-in to error states, layout responsiveness, etc.) as we can save time when devs start cracking at the code. You may not like to see plain boxes on the screens - don’t worry you’re not the only one - but bear with me here and lets not shortcut this process.

 
 
mockup.jpg
typography.jpg
elements.jpg

Applying the skin

This is where I greatly consider your preferences in aesthetics. You’ll be presented with flattened mockups of the general screens sizes - for phones, tablets, and desktop versions. Along with the mockups are the style guides and other assets used to create the mockups (eg. icons, fonts, and images) for your front-end devs.