The whole point of having a strong visual hierarchy is to first attract the reader visiting your website, then lock them in your tractor beam and draw them into your website/world/magazine, etc. And, if it’s online you must do this within 10 seconds – otherwise, you’ve lost them.
Before I go to town on deciding what to change, cut, or cull from the rather weak visual hierarchy on my COETAIL blog I will consider my audience first; fellow COETAIL bloggers for now. After all, if my audience doesn’t want to read my website then I am doomed to failure. Furthermore, I will also design it with the mind that the visitor will be reading my blog on a desktop/laptop. Why? I posed the question: If you are reading a blog, what device do you use?
- Table
- Smartphone
- Laptop/Desktop
I need to know this the viewing device alters the website layout somewhat. And, as I mentioned above, almost all said either laptop or desktop.
What Changes Will I Make?
In short, I would like to make the following changes to my website:
- Z Pattern – Home Page
- Add more navigation buttons, one for each course
- Add Social media icons
- Delete the main banner showing the latest posts
- Add the three latest posts, and arrange them in circles with text below each one
- F pattern – Posts
- Use active language
- Adhere to the non-linear reading style
- Check for a readability score
- Be succinct
Home Page Changes – Z Pattern
First off, I do not see a need to change the location, font properties, or color of the title text. It is in the top left-hand corner, which should be read first according to the Z pattern. The font is a sans serif style, which is neither too masculine nor feminine. It is also large enough to be read clearly, contrasting well against the white background. The color is green, with hints of yellow. I chose green because, according to color psychology, it signifies growth and suggests stability and endurance. Naturally, my blog posts show these traits…Moreover, I chose green because I’m Irish 😉
- Home Button: I would ditch my home button as the COETAIL 11 will serve as the home button.
- Social Media Icons: I would add four more social media icons, on the top right beside the website search icon. To push visitors to like and subscribe to my Twitter, Facebook, Email, and YouTube channels, which in turn would help drive more traffic back to the blog. This also means there are 5 icons in the top right-hand corner of the page – staying with the rules of odds. Moreover, there is nothing in between the blog title and the social media icons, adhering to the rule of thirds.
- Course Buttons: I would like to add five-course buttons (rule of thirds) to make my website easier to navigate to posts under each course. These buttons will have the same color as the main title, with a darker background. The size, font style, the spacing would remain the same (repetition) to maintain a sense of order. However, I would add a thin green border around the current course, so that the user’s attention is brought to it. I would also like to ever so slightly dim the other course buttons to reinforce this (color and contrast).
- Main Banner: Next up I would drop the main banner more quickly than a vote of no confidence in Boris Johnson. Sticking with the Z pattern I want to replace the banner with three images of my three latest posts. I will weave a little bit of semiotic dark magic here as well – see the image below for what I would like to improve.
Blog Changes – F Pattern
The F pattern, at least for me, is more challenging to adopt – not least because every time I add a post, I will need to follow its recommendations of it. And here they are:
- Titles: I plan to make my titles more succinct. Before they were a little bit out there, and although I found them funny, I am not sure my readers did. Furthermore, they are not succinct in explaining what the paragraph may be about.
- Bullet Points: I will increase my use of bullet points, as online readers adopt a non-linear reading style. They want to get the information quickly and easily.
- Active Voice: Next up, I need to improve my use of active voice. This will take time, as I revert to passive voice a lot. Yoast is a delightful little plugin, that can help with this.
- Who & What: Finally I will get my main information across succinctly. Getting into the who and what in the first paragraph. Second Paragraph: I will put a little less effort into the second paragraph, as the F pattern suggests that users skim over this.
What Did I Implement?
I went for part of the Z pattern change on the home page. I made this change, as it was long overdue and I think the home page is the most important part of my website. It is likely that it will be the first page of my website that users will visit. I hope that given the changes, visitors will find it easier to navigate my website and to visit my social media accounts. I did want to make more changes to the menu, which are more in line with my initial design, but I could not change the CSS in the template I have. So currently there is way too much white space after Course 5.
