Day 1 - Adobe Xd Daily Creative Challenge
by Ivan J Badia
This challenge is around building a full design for a pet product, split into 9 challenges over the course of 2 weeks. Each day a new challenge is presented to us and lets us solve unique problems starting with a base template.
#01 - Efficient Navigation
User research shows that when visitors come to the site, they prefer to filter by pet rather than product. How would this impact the information architecture of the site, particularly the page navigation at the top?
Research, mocking layouts on paper and word mapping brand name and mark 3 hours of work. First day two iterations on logo and five designs for the Navigation.
These are my first mockups:
Supplied Base Navigation
- Original logo
- Iconography and Labels
- Color, Font size and Spacing
- Added a search field
- removed the Live Help ** placing on the DOM as a fixed item
I was happy with the spacing but the logo started to feel out of place.
List items as typography felt small and lost. The logo was overpowering the design.
Combining both icons and typography filled the height by maintaining the negative space and all elements can easy be identified.
Shorten the container for the search icon. The logo has to change now.
I was happy with the result but after discussing with group a great discussion was started how the log can be used and how can visitors recognize the brand. The first problem Name Badge to small and difficult to read on Desktop once added to navigation.
I shaved the shadow on the chin to match the line thickness on the ears and cheeks. Again asked team on Slack for their critiques and one clear mistake kept happing. Everyone kept calling the brand Fid, placing the dog's head as the letter 'o' was not the solution for the brand.
While working on a solution for Fido's logo I started exploring other parts and how it all was going to fit together.
Using a 5MM spacing on the vertical grid helped me redesign typeface Circular Std with shorter stems and even bowls. A second Icon was created too. Letter 'i' represents the pet owner making the experience at Fido Online Pet Store about the pets and their owners.
Software used Adobe Illustrator
Navigation with all the elements