Assignment 01 - Extract UI Items

https://www.sketch.com/

User Interface Discussion

This menu is really awesome. So many links are packed into this small drop down box and it looks so great while doing it. Very interactive navigation bar that gives off the impression that this website has a lot of content therefore this website is professionally made therefore I think I will be able to trust the content right off the bat.

This navigation bar was built with a plugin called Mega Menu and with CSS. The plugin is a paid plugin offered for wordpress framework websites. It has many options to make all sorts of different styles of navigation bar without having to know a whole lot about CSS.

Every single drop down has a different color vertical image on the left of it making this a very interactive menu bar that I would think most users would subconsciously appreciate. The rounded corners and Nunito font make this very easy to look at and navigate. I really think this menu is well done.

https://www.grantmakers.io/

User Interface Discussion

I really like this navigation bar. The transparent background allows the icon and text to be an interactive link right that blends well with the image. The color of the links really needed to be what they are in order to go right over the top of the background image and stand out the way they do.

The navigation bar was built with CSS. It has a transparent background which allows the header image to lay in the back while the transparent nav bar sits on top. I like the use of the brighter colors on the dark image and I especially like the icons next to the navigation bar links that draws the user to at least hover over them.

What I do not like is the "more" section at the top right. Even if this website is in desktop mode that still shows up with an arrow to click for more. I can understand that too many links might take away from the style I was drawn to in the first place, however I think they could have squeezed a few more links in the navigation bar rather than have a drop down that just says "more".

https://rehanbutt.com/

User Interface Discussion

This navigation bar is built with CSS code and a couple different rows of solid color backgrounds with hover effects over the navigation links. I like th contrasting colors and I like the hover effect over the links.

What I do not like is that the hover color is so close to the background color it is tough for me to actually see the color change. I would like to see a more drastic change in hover effect but that is just me.

https://developers.italia.it/

User Interface Discussion

This navigation bar has a few different layers to it. It has the top nav bar which has site map navigation. It has a block after that with icons and social media navigation to it. Finally, it has a accordian tab type layout on the bottom row of navigation to be able to shuffle through different layouts and information all on the same page.

This is made mostly with a solid color background and CSS coding. Nothing too flashy, but I wanted to point out the multiple row layout because this layout does work on certain types of websites.

The font is a tiny bit thin in my opinion. I would like it to either be a little bigger or bolded. The overall same color for the layers actually works. Normally you see multiple complimenting colors to distinguish each row.