I started watching the Learn UI/UX playlist from DesignCourse on YouTube to try and improve my knowledge in between my 100 Days of UI challenge as I feel I'll learn more if I'm actively picking up new knowledge while doing the challenge.
After watching Gary's 2023 crash course video where I made the fake landing page for a clothing company, I knew a lot of the information from the first 4 videos already but I wanted to watch them to cement the knowledge in my brain and in case there were any new tid-bits since his 2023 version.
Navigation Bar Challenge
Gary showed in his video what everything was and how to use it all and lay everything out before giving us the template below and challenging us to create a navigation bar with a search Icon including all assets from a frame to the left which included a logo, page headings and the search icon.
This is what I ended up creating:
I like it but I'm worried that the sizing and spacing may be off. The search Icon should maybe been grouped closer to the navigation headers rather than off to the right. I should maybe have made the logo a bit bigger and then I could make the headings slightly bigger too to make it easier to read for older people or people with impaired vision. I'm going to watch Gary's reviews on some people's designs before I have another look at mine and see if I should change anything.
Reviews
The first review didn't get any tweaks from Gary and is fairly similar to mine other than the fact that it used the inter font rather than the cute font. It also used a different way of highlighting what page the user is on by only having the active page in white while the rest are blue with better contrast that the blues used elsewhere on the page to make sure it's still readable. I prefer this way to the way I used.
This second one again didn't need any changes and is perhaps even closer to mine as it uses the same bolding and underline as mine does but with the inter font. It does look better in this font though and the logo is a little bit bigger like I mentioned mine could have been.
The third one is not so similar to mine. It is much harder to see which page is active and the logo is off centre with the rest of the design slightly. Although, I think it does highlight some issues with mine as I now think the spacing is a little too small between my titles as well as the sizing of them.
Gary also made the search icon in the bar a little bit smaller and further away from the edge.
The fourth one, I think there is too little space between the headings and the search Icon is a bit too dark.
Gary changed the search bar slightly and increased the white space between the headings.
This one introduces a CTA button which I personally don't really feel is necessary and I feel like the search bar is a bit too harsh with the brightness of it and pulls my eye more than the hero content.
Gary himself didn't have any problem with the search bar but he did mention the CTA button as well as the italicised Home page which he made standard.
This one has tried to get fancy with adding another colour. I like the squiggly underline of home and I do like the colour but it feels a bit in your face to be honest. The titles are also too close together and the font size is quite small. The bar is also very close to the top.
Gary liked the colour as it was analogous but he also mentioned sizing, spacing and how close the bar was to the top.
The next one, I quite like but I do feel like it's bordering on too much white space between the headings and the logo is too small for how big the headings are.
Gary just mentioned that the difference between the default and active states isn't very easy to see as they're just bold and semi-bold so he suggested changing the semi-bold default states to regular.
Personally, I really don't like this one. I find it weird that the active state isn't capitalised like the default states and the contact US sounds like it's telling you to contact the USA. Again I also feel like it's not really necessary to have a CTA for the contact like I mentioned above. The logo is also pretty small compared to everything else.
Gary capitalised the H on home and changed the contact US button to a smaller outlined button rather than a solid one so that it isn't competing with the primary call to action button in the hero . He also lowercased the US part.
This is the last one. I like that there's a line separating it but wouldn't choose that myself. It also feels too far away from the titles to show the active line on it. I also find the positioning of the search bar odd for some reason- possibly because I haven't seen it in that position before. The headings also seem a bit small and the lettering a little close together.
Gary moved the search bar further left towards the logo and changed the colours of it to blue, light blue and white as well as changing the copy and boldness in the bar and making the search icon smaller, which made it feel much more a part of the site. He also moved the line up and made it blue to fit the theme as well as making the active line the full width of the heading text and made it not curved.
Changes
Based on what I saw in the review video, I made some changes to my design. I didn't want to change any of my main decisions such as the font I used because I feel like that's more like copying the good examples rather than amending my own.
I added more white space between the headings and made the logo, search icon and headings slightly bigger.
For comparison:
Conclusion
I enjoyed making this and I'm hoping that now I've learnt to spot small mistakes in other people's work and recognise where that is reflected in my own work, that I'll be able to avoid such mistakes in my own work!
Comments