Learning Modern Web Design Principles

Brad Matthews tech and digital category

My sister returned from a 6 month intercontinental expedition last week. Given her background in design I wanted to pick her brains for feedback on my new landing page. I had some issues with it (mostly the colour being kind of hideous) but otherwise felt it could be improved upon yet wasn’t sure what needed to change.

This is what I had painstakingly cooked up by editing the code I bought from here (which was another lesson, stick to themes rather than messy code where possible). I added an extra featured work column, removed the footer and personalised it with my own links and copy. I also tweaked the responsive CSS file to make those changes play nice on mobile and tablet devices. Due to the amount of code and files this site uses it took quite a few hours, but I found monkeying around in code again quite enjoyable.

Brad Matthews Gross Old Landing Page

 

At this point I was happy that the design was relatively clean, I could link to projects and other things I’ve produced (which I have yet to do at the time of this screenshot), and communicate myself to any new visitors. While it isn’t terrible, I wanted my sister’s feedback and ideas before putting it online.

What’s wrong with the design?

My sister’s first response was that it looked straight out of the early 2000s. I started creating websites and webpages in 2000 (not professionally — I was 9), so I remember the hideousness of frames pages all to well and have to dissent from that assessment. We can both agree that it definitely looks dated though.

The core problems of this design are:

  • There’s a lot of text. Too much text.
  • There is not enough contrast in font face between my name and the dot points underneath.
  • The background colour screams “this website hasn’t been updated for several years”.
  • “Hi, I’m Brad Matthews”, that’s an incredibly dorky introduction. While I am incredibly dorky, I’d rather have a chance to send a few more positive signals first.

The photo is also a bit too zoomed in but that constraint is based on a lack of usable photos rather than poor design choice.

How did we fix it?

The first thing we changed was the highly unsuitable red. My sister tells me white is infinitely more modern, crisp and clean. No disagreement there.

Now that white text was out, we turned the red up to a dark burgundy (or ‘Bulgarian Rose’ if colour palette names are your thing). It works well on white, nice and dark but with more life and flavour than black. I like how the social media icons turned out.

The amount of copy was another issue, but when contrasting mine with Evan Le’s rather stunning landing page, we realised that the margins exacerbated the problem. I padded the sides and brought all the content in to the centre. I reduced this padding on mobile and tablet devices so it would display more than 3 words per line.

These two simple actions shaved several years off the appearance of my page.

But the little things have a large combined impact too.

Other changes include:

  • Getting rid of the horizontal line and the ‘fluff balls’ dividing my primary interests under the name. Pipes are in right now and these changes help the page look much more crisp and professional (compared to fluff balls anyway).
  • Deleting the “Hi” — so much less dorky. I also changed the font to increase contrast with the rest of the page.
  • Cutting my brief down by ~80 words, I could stand to lose another 50 or improve on what I have but that can come later.
  • Cutting the “Read My Blog” button. The navigation bar up the top has that handled and I couldn’t think of any way to reword it without it looking weird. Blog is a stupid word. I get the principle of directing people to your content but I think my nav bar and recent works (when I get those in) will do that job just fine.

The New Design

 

New Screenshot-min

 

My next step is to get a few medium distance photos of myself for the left pane. Hopefully the lighting and colour balance complement the Bulgarian Rose rather than work against it. I like the colour but if I had to change it to a Navy blue I could live with that.

Overall, it isn’t perfect. If you go to full-screen mode in the browser the zigzag down the middle ends abruptly. If a website visitor has a square monitor the ‘recent works’ images are minuscule.

Unless I figure out that those are easy to fix I might not worry about addressing them. I’m infinitely happier with this version and hopefully when I go live with it nothing else crops up.

Thanks for the lesson, Beck!

Leave a Comment

Your email address will not be published. Required fields are marked *