Week 4 – UI/Visual Design
UX/UI designer, TV series geek, wannabe drummer. www.carinalazaro.com
Hi everyone! Welcome back to my journey rising as an Ironhacker! 🙂
This week I’ll tell you how was my fourth week in the bootcamp, when we finally began to get our projects visual, choosing color palettes and all the beautiful part of the user interface.
Day 1 – Moodboard
It’s always nice to remember the differences between UX and UI. Both are fundamental to a nice product design, each one has its own roles in a project:
A moodboard is an arrangement of images, materials, pieces of text, etc., intended to evoke or project a particular style or concept, getting the whole team on the same page for the visual design direction.
Day 2 – Choosing colors and fonts
It’s time to pick the colors of your palette and the fonts that will be used. Then, you can also define the elements as buttons and icons and put them in a style guide.
(I’m presenting my style guide here, but it can also be done as it’s presented in the end of the project, as long as you have the fonts and the palette well defined.)
My UI style guide
Day 3 – Alignment, grids and spacing
This is probably one of the hard parts of all the process, because a lot of small decisions have to be made, as spacing, positioning elements and pixel-perfect details. But the nice part is that when those decisions are made wisely and following some rules, the results are very pretty and profesional.
My UI for El Refugio, considering grids and spacing
Day 4 – Microinteractions
To present a really realistic prototype, there are great tools that help animating interactions. I used Flinto to create my animation and I can say that I absolutely loved it!
Day 5 – Testing
Day 5 was dedicated to testing and checking if all the call to actions were clear and well located.
It is important to figure out the most important goals for the product to tie them to a realistic hypothesis and see what works and what doesn’t work.
If necessary, iteration comes again and the required adjusts are done.
The next steps for the project are creating new flows and applying all this method again to check it and be sure that the product has a great usability and accomplishes its goals as a business.
Hope you liked the results and thanks for following me on this journey! 🙂
Show your support
Clapping shows how much you appreciated Carina Lázaro’s story.
Be the first to write a response…