Tag Archives: UX UI

Live Like Joao

Live Like Joao
Food, Places and Everything About My Life

*Above image taken from Live Like Joao’s Blog

A PEER-REVIEW ON WEBSITE DESIGN

Live like Joao offers a personable and candid approach to food blogging. When it comes to creating his new blog, Joao’s honesty is refreshing; while this may be a daunting new task, Joao invites his audience into his inner thoughts as he navigates the unfamiliar waters of WordPress. According to the screenshots from Amanda‘s first peer review, Joao has implemented a lot of her recommendations and suggestions. Already, Live Like Joao is starting to have synchronicity between the website’s appearance and the content. To properly unpack the different design elements in this blog, I will be focusing on two important design umbrellas: user experience (UX) and User Interface (UI).

User Experience

Travis Gertz’s 2015 Design Machines: How to survive in the digital Apocalypse explains the UX design as how the website works, as opposed to how it looks. A hyper-simplified breakdown of the UX design category would include layout, interaction, information architecture, wireframing, prototyping, research, and testing. At first glance, Live Like Joao seems to work pretty cohesively and sensibly. There are subtle cues throughout the blog that indicate where I should look or click. For example, both the BLOG and POSIEL tab on the top righthand menu have a little downwards arrow to indicate a drop-down menu. These exemplify what Victor Kaptelinin describes as affordances in his article The Encyclopedia of Human-Computer Interaction.

The search function right above the categories list is a really helpful tool, especially when looking for a certain page or post that I particularly enjoyed, but was unable to retrace my steps. Since this blog is fairly new, I wasn’t lost in the content and it was easy to find my way back; however, once there are more entries and if Joao chooses to continue this blog post-PUB101, I suspect that this search function will become a really handy tool.

While there are affordances that create direction throughout the blog, I still seemed to have encountered some problems with Joao’s BLOG section. Firstly, I noticed that there is a category for “Blog” and “Blog Post”. This seems counter-intuitive, as these categories seem synonymous. Kaptelinin underlines that “Good designs are intuitive“; hence, I would always recommend going through the website fully – as a sort of informal audit – and paying extra attention to what is intuitive to you. What comes up when you click certain links? Does it take you where you would expect it to? This brings me to my second suggestions: make sure that  the information is stored in the right place. For example, when I click the BLOG POST on the drop down menu, the only post that is available is the “Short Essay 1”.

User Interface

In contrast to the former, UI Design encompasses how the website looks as opposed to how it works. Gertz explains that typography, colour, forms, illustration, photography, and detail can all be found within this realm.

Caution: Do not read when hungry!

This blog does a wonderful job at capturing mouth-watering cuisine. From a UI design perspective, there is a great use of white space and visual contrast with images. Blog Post 1 does a good job of separating chunks of text and using different fonts, especially by bolding the Ingredients title. The other blog posts could benefit by following the great example from that first blog. For example, my eyes are yearning for more contrast in the text in the Blog Post 3. There is a beautiful photo of gorgeous cuts of meats – perhaps I should have waited until after dinner to write this review – followed by the restaurant’s information and a short review. To better accompany the bold image, I would make the text larger and create a small text box containing the restaurant’s pertinent information. Currently, the review is the smallest group of text on the image: all these small modifications would allow for the sections of the page to be more proportionate to each other, and allow the important information to stand out.

The beautiful rustic table of food that act as the blog’s cover page sets the tone for a visually-enticing food blog. Keeping this in mind, I would recommend continuing with this theme by adding more images throughout the blog: as we are unable to taste this food with our taste buds, we do so with our eyes. Therefore, it is important to describe or visually show these through images and videos, as is done in the first blog post. If at all possible, ensure that photos and videos are the same size or are complimentary to the overall page layout to allow for synchronicity and fluidity.

Overall, I enjoyed joining Joao on his adventures through WordPress and discovering exciting new restaurants around the Lower Mainland through his reviews. I look forward to seeing the progress and reading more content from Joao. The recipes, reviews, and personable tone leaves me  hungry for more!

Check out Live Like Joao here.