How I redesigned my web page

How I redesigned my web page

Are you like me? Have yourself a WordPress web site, seen some fancy theme, got it and still your site looks a lot less beautiful and functional than the theme promo says it should. Why? Why? Why?

Well, we all know the answer: some whiz designer has weaved their magic making the theme do just what they want. But we are not fancy designers ourselves and so… yeah… average.

Or is this the case? Can we work magic too?

I’ve been using WordPress since 2013. My site has (and remains) fairly average no matter what theme I use. Damn! So I decided that I really needed to get the site looking nice. Now this is not my first attempt. Every year or two I say the same thing, play around a bit and get a very slight improvement. I’ve gone from a pretty list of blog posts, to categorised clumps (still just a list of lists really) and so on.

No more! I needed to get something better. 

OK – let’s get one thing straight. I’m not pretending that my current web page design is brilliant, but it is a lot better than the old vanilla flavoured thing I had before. The goal of this post is to show you how I did this. If you are already a web design guru, then you may as well head off because this is not for you. This article is for non-web design people who simply want to spruce up their web pages. If that is you then read on.

Also, some prerequisites. I am using the Envince theme. Some of what I do may apply to other themes, but I cannot promise anything. Secondly, I have categories already set up on my WordPress site, so I won’t cover how to do that or how to apply them. If you don’t have any categories set up, then you had better do that first.

Anyway I reviewed where I was now with my site and how I had got there. First, I realised that I was approaching web design from the wrong perspective. I was simply dumping a new theme in and then saying to myself “Why the @#% doesn’t it look like it does on the designer’s screen shot?”.

No, what I needed to do was sit down and say to myself “what do I want it to look like?”.

So I Googled a whole lot of terms like “web site awards” ,”best looking web sites” and “online magazines” and so on to get an idea of what I liked and what I did not like. Turned out that there are a lot of really beautiful web sites, but none of them would really achieve what I wanted to achieve.

Oh!

Which begs the question: what do I want my web site to achieve?

Well, I am interested in a lot of things (art, writing, film and television, genealogy, travel, etc) and I want a site that reflects each of my interests. I want these posts categorised, maybe sitting in their own different areas on the site. I want my readers to be able to browse the most posts in one place but also browse the various categories for other things that interest them.

So I drew a picture of what this would look like. Here it is (I drew it in MS Word, but you can use pencil and paper or whatever, as long as you have the end design in front of you).

Now maybe it was a bit of an ambitious design but I figured that if I can write stories, paint in oils, use Blender, program in C#, then surely I can figure out how to make something like WordPress do what I want. Surely! Not because I am particularly smart, but because I have learnt over time that most things can be achieved by simply combining a whole lot of tiny simple bits. One of my University lecturers used to say “How do you eat an elephant? One bite at a time.” And so all I had to do was divide this into bite-sized chunks.

My starting point for breaking it down into chunks was to understand what bits of this Envince could actually do for me. So I checked out the theme website. My eyes immediately alighted upon one feature:

Ah ha!!! So I can drag that widget in and blammo! I would have the little category parts.

Suddenly I am feeling confident. But I also want to get a picture that links to every post in that category to site next to it. I wonder…

  • First, create a row and split it into two columns
  • Change the size of the two columns so that one is only a third of the width and the other is two thirds
  • Then insert 2-column widget in the two-thirds column
  • Insert picture and link in the one third column

The end product would look like three columns of equal size. I investigated if this was possible and yes, I could (Here is a video of me doing this so you can see how).

Then I looked back at the Envince website and saw another widget:

OK – so that is the carousel that I wanted at the top of the page. This is all starting to look a lot easier than I thought it would be. Why hadn’t I done this earlier??? Amazing what a tiny bit of thought, research and planning can do.

This just left the pictures with links to all post in that category. Once again that turned out to be easy. I got some of my old photos and art works, resized/cropped them into a 2:3 aspect and placed some white text over them saying “Click here to see all articles on <category name>”. I then inserted these in the blank column and attached a link.

The current site as you see it is more or less that with some colour choices etc. I feel quite happy with the design,  and while I acknowledge that it is not particularly professional, it is so much better than what I had before. And, I shall keep on tweaking it.

0

2 Comments


  1. So now you have content management system design skills and possibly php skills too. Congratulations. Also this has made me realize there’s a lot of skills I can add to my CV.

    0

    1. Thanks :) You should add those skills to your CV. You are a talented individual. It is too easy to not feel good enough when the opposite is true.

      1+

Comments are closed.