Week 4 - UI/Visual Design
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.
Let's go!
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:
I already have all the strategic part and wireframes done, so at this point I start creating a moodboard for El Refugio new website. (You can see the previous steps of this project here and here).
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.)
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.
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! :)
