Awwwesome Websites!!!

This week I continued to work on my client blog. I analyzed three websites from awwwards.com to get some ideas on how to improve upon the design I’ve made in class so far. I reviewed the quality of each website in terms of Style, Visual Content and User Experience.

For measuring Style, I looked for consistency, use of color, graphics and design to determine if the images get the message across. Examining the Content, I evaluated readability of font (type, size, weight, etc.), ease of navigation and contrast between backgrounds. Finally, for User Experience, I clicked through the website to check usability, ease of finding information, speed, and user friendliness.

The first site I analyzed is toi.io.

Immediately, I was drawn to this website for the style. My favorite colors are black, red, white and gray. They are used throughout. The layout is clean and transitions from one page to the next nicely. The background images contrast well with the the font. It is bold with colors that are clear to read.

Since the company is a Brand Strategy focused UX design agency, it comes as no surprise that the user experience is unparalleled. It’s easy to navigate through the pages and makes me want to explore the site. In doing so, image animation is used to subtly ease geometric design graphics in red. The hamburger icon goes to one page of links to menu, social media and contact. I love the colors and simplicity.

Their home page design ties in their clients with the tag lines “We listen,” “We Learn,” “We Create” and “Drop Us a Line.”  On each of these pages, they use an example of their client website design. I like the images and the spacing of the content. Everything flows.

In the “About Us” section, when the mouse hovers over the individual, the contrast of the photo changes. As you navigate down the page, I like the animation used to make the graphics and content slide up. In the “Our Work” section, the page symmetry is appealing. The font size, type and weight is on point. Overall, the purpose of the website is spelled out clearly to the audience.

The next site I reviewed is andreribeiro.co.

The home page opens to a clean, white background. I love the design symmetry and how the images slide from right to left, while the copy slides up in “Cover.” The placement of the fixed link in the upper left corner to the home screen is appealing. Navigation throughout the site is simple and user friendly.

When you click on “Grid,” I like how the content layout is on the same page and easy to get to. When the mouse hovers over one of the five images, the others fade out. This is a clean design. The hamburger icon takes you to the menu and social media page links as a black background slides down. When you click on the “X” in the upper right corner, you are navigated back to the home page with a contrasting white background.

The design gets the message across. The design is consistent with simplicity and the images follow suit. Minimalism comes to mind. Again, I liked the use of black, red and white colors. The text size works well in the design. The information is easy to find, the pages load quickly and the point comes across clearly. The only issue I discovered is the Instagram link did not work on this site.

The last website is grannyssecret.com.

Since my client blog is about pasta, I was looking for a website about food to get some ideas. The design on this site is unique. The logo design in the top left corner defaults to the home screen. This is a convenient feature.

The background image is an artistic layout inviting you to learn more about Granny’s secret. I like the placement of the Hamburger icon and when you click on it, a green opaque background appears with menu links to Shop Finder, News, Contacts and more. After you click one of those links and go back to the menu, the opaque green background slides left.

Three main links are centered on the home page. When you hover over each link, there is transition and the text slides up. As you click through the site, there is a running theme and story behind their food products. The background images of food and nature are fresh and inviting.

I like the media addition that tells the story in video format. There are links strategically placed throughout the site. The font types go well together and stand out in the foreground. The use of images are artistic and compliment the message that the food is top quality.

Overall, there are several concepts I would like to incorporate into my web design including the following:

  • I will use more contrast with the background and font color and size as seen in toi.io and give my site more of a geometric symmetrical appearance.
  • I like the side placement of the navigation bar in andreribeiro.co and plan on adding the social media links. I also like the use of font size.
  • I am going to add more link options to the menu and a fixed logo on the upper left hand side like the one in grannyssecret.com. The images really add to the design, and I am going to find some additional images.

It is extremely useful to check out other websites. I now have greater appreciation for the style, content and user experience design. Time and effort combined with a creative eye make a website polished and will attract a larger audience and increase the quality of the user experience.

Leave a Reply

Your email address will not be published. Required fields are marked *