Tag Archives: design

Peer Review #3 – A Blog for Life Livers

I love this blog!

A Blog for Life Livers is written by Hope Stewart, an adventurer and life liver, sharing her stories of childhood joy and new experiences. Hope writes beautifully about enjoying the life around you and being present in every moment. She uses pictures and poems to portray her feelings and emotions from each adventure, with occasional videos showing small moments that she wants to remember.

This is blog that leaves you feeling refreshed, optimistic, and in wonder. Check out a Blog for Life Livers here.

Organization

Hope’s homepage is set with pictures and bold fonts that capture the viewer on first glance. As you scroll through, you’ll see some images that capture the vibe of this website and set the tone for all of her blog posts. There is also a welcome message at the bottom of the page that invites you to consider your own life and how you might create new adventures.

So come in and stay awhile, as each page has been placed here for you: to draw inspiration for your next adventure, to help you conquer fear, to help you seize each day, and to learn to fully immerse yourself in moments both wild and calm.

The top menu is well organized and gives the viewer easy access to the media they are looking for. The media gallery highlights Hope’s videos and photos and immerse the viewer into an adventure of their own. Browsing through Hope’s media makes me feel as though I get to experience a little bit of her adventure as well!

Marketability

This blog presents many beautiful original images that capture the vision of Hope’s website. Creating prints or postcards of these images could be a great way to allow your audience to participate in the stories while supporting your writing! Post cards would be an especially unique product you could sell that represent the slow-ness of handwriting a letter and enjoying every moment.

Check out Hope’s media gallery here.

Another way to market your website could be to partner with tourism companies in encouraging more travelers to come visit their area. Your video of Hornby island captures moments that feel whimsical and magical and could definitely inspire more people to visit those places! One suggestion would be contacting small island communities like Bowen Island, Gibsons, or Lund and offering to make them a video showcasing the best part of their city! This could be a great way to travel, gain more content for your website and generate revenue.

This website is beautifully simple and refreshingly organized, so I would hesitate to incorporate ads that may hinder the viewer experience given that this blog is very experience driven. One possibility for ad revenue could be to partner with related companies to promote products that relate to your blog postings.

An example of this could be with the Mushroom Hunting Blog post. You could reach out to companies that offer classes or books on how to identify mushrooms and then collect revenue based on how may clicks from your blog lead to theirs.

A similar example could be with your Mindfulness and Yoga post. This post links to Yoga Youtubers and workout routines, which could potentially be business partners and generate revenue for your website!

Overall, this is a beautiful website that creates freshness and relief in a busy and confused world. Check out a Blog for Life Livers to enjoy nature, mindfulness, and stealing moments as presented by Hope Stewart.

Stealing moments helps you realize that you are the master of your own time and that you have more control over your own happiness than it may feel. It helps you look for little silver linings in the smallest of things and encourages gratitude and mindfulness.”

redesigning my about page

Repurposed

The About page is where people go to gain a better understanding of a website or blog. Basically, my about page is the first impression newcomers will get of my blog and me. Keeping this in mind, it’s important for this page to be captivating, professional, and beautiful. Looking at my current About page, I knew I wanted to make some changes – not only in the style, but also content. My current bio explained the basics, but was too short in length and was unengaging for my likes.

I tried editing my About page through Elementor, as it offered a whole lot more versatility and customization to the elements, especially in comparison to the blocks theme that I’ve been using. Because I didn’t have an exact idea of what I wanted the layout of my About page to look like, it took a lot of time and trial and error.

What I liked about my previous page was the definition of “klick”. I wanted to keep this, but redesign it to make it more appealing and cohesive with the style of the logo that I had created weeks prior.

Original design of the definition on my first About page:
First updated draft:
Changing examples:

I wanted this definition to be the first graphic on the page, as it would set the tone for the rest of the blog. Yes, I do know that click is typically spelled with a “C”, and yes, the “K” was on purpose. In one image, I hoped to capture the explanation and theme. Just like in dictionary definitions, I wanted to use “klick” in a sentence, so I used this first sentence – which was originally used in Joffre Lakes; however, I ended up changing it to something much more relevant to my blog:

I had the plan of creating three distinct clickable categories in columns below with brief descriptions of these different categories. I wanted this graphic to blend seamlessly with the categories below. Originally, I wanted to extend the grey a little further down, and add a white mountain in the middle to blend the grey from this graphic and the white from the following section. While I was doing this, I realized I was creating an arrow in the wrong direction. Instead of having a white arrow pointing up, which would have been the case had I kept the white mountain on the grey backdrop – I created a negative valley (as in lack of colour, not unhappy) to draw attention to the following section.

Third and final draft:
Finally, with the added category columns, this is what the top part of my About page looked like:

Each of these columns are responsive, meaning that it react to your curser. When the mouse hovers over the column, it becomes a darker shade, inciting you to click on it. These columns, images, and titles are linked to their respectful pages. For example, if I were to click the “local” column, it would send me to the landing page for the local category.

Already, this so much better than my previous About page, which is below for reference:

Editing my bio:

Next up was rewriting and redesigning my bio section. I chose colours that would match the image, along with a readable and professional font. My original About page lacked warmth and friendliness, so I tried to keep this in mind when redesigning and rewriting this next section:

Staying Connected:

All that was missing was connecting my social media account and contact information. I opted for simple responsive icons. The icon would increase slightly in size when hovering over it with your mouse, and for consistency, I chose to have the colours change to the blue and yellow of my logo:

Mouse over the Mail icon
Mouse over the Facebook icon

When clicking the facebook icon, it would open my facebook page in a new tab with to make sure I’m not kicking them off my blog. Similarly, when clicking the mail icon, the user’s email would open up in a new tab, ready to send me an email.

The trouble in troubleshooting

So while I’m really happy with the design and content of my new About page, you might be left wondering why you still see my old About page, as opposed to this new and improved one. To my big disappointment, when I was troubleshooting this page for different screen sizes, I realized how illegible it is for mobile devices. Somehow, the graphics, icons, columns and images didn’t transfer well onto a smaller screen: not only was the layout lost, but some images disappeared and the content was just not easily readable.

Final note:

This was especially frustrating, as I had spend days working on it this. While the layout did still work on tablets and desktop computers, over half of my audience accesses my blog on their mobile device, so keeping this up was out of the question. I rather have an elementary version of my about page rather than make this illegible gibberish live on my website. Unfortunately I don’t have the time to try and fix this before the end of the semester, but I plan to sort this out as soon as possible. If nothing else, I learned the importance of troubleshooting regularly throughout my progress to make sure its compatible with all devices.

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.