How to Make Your Website More Appealing

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, cull from the rather weak visual hierarchy on my COETAIL blog I will consider my audience first; fellow COETAIL bloggers for now. Afterall, 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
    1. Add more navigation buttons, one for each course
    2. Add Social media icons
    3. Delete the main banner showing latest posts
    4. Add the three latest posts, arrange them in circles with text below each one
  • F pattern – Posts
    1. Use active language
    2. Adhere to the non-linear reading style
    3. Check for a readability score
    4. 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 or femine. It is also large enough to be read clearing, 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 the 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.
Screenshot of existing website
Screenshot of COETAIL homepage
Sketch up of planned changes to a website.
Image showing planned improvements of COETAIL homepage

Blog Changes – F Pattern

The F pattern, at least for me, is more challenging to adopt – not least because everytime I add a post, I will need to follow the 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 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.

Picture of COETAIL website
Image showing before, after and planned changes to my homepage.

Please note – that I am trying to link the blog posts to display under the different pages.

2 comments to “How to Make Your Website More Appealing”
2 comments to “How to Make Your Website More Appealing”
  1. David, thanks for sharing your thought process as you went through a significant re-design of your blog. I really like the addition of the course tabs along the top to help your readers filter through what they might be interested in. I also like how you considered both the F and the Z patterns. I myself, stuck with the F pattern, but you have done a nice job incorporating the Z pattern.

    I too considered the social media icons along the top, but opted to stick with the Twitter feed embedded on the side. I might still consider changing at some point, but it is a nice clean look to your blog. Thanks for sharing!

    • Hey Ryan – thanks for the feedback. I wanted to change a lot more, but I cannot alter the CSS on my theme, so those changes will have to do for now(to spread out the course buttons). By the way, did you notice that my twitter icon, is the old twitter logo? Speaking of twitter, I do like you twitter feed and I will add that my personal website; which I am also in the process of redesiging after this weeks’ task.

Comments are closed.