Homepage Design: How to make an impact

FireShot-capture-#001---'Mark-Goddard,-Zero-One-Hundred-Web-Design---Artfully-Illuminating-Design'---0100_tv

Yesterday I launched the brand new homepage of my portfolio. It was a long time in the making trying to get everything looking good and now I’m going to explain the reasons behind the design, how I came to it and how you can apply the same techniques.

Keep it simple

It’s a portfolio right? When people visit your site what do you want them to see? If you’ve not said “my portfolio” then your wrong. If someone is looking for a web designer they need to see your work. How can anyone gauge your quality if they don’t see it!?

According to the analytics on this site just under 9% of people visiting the site in September went to the Portfolio page after visiting the homepage. That’s pretty poor in anybody’s book. It means they saw the homepage, scanned it and decided it wasn’t for them. Keep it lite, simple and clear to distinguish what you want people to actually see. I decided that instead of hoping people would visit the portfolio I’d make it the first thing they see.

Think of it as a CV (Resume)

Bio + Twitter

You don’t need to put your qualifications on there or anything detailed but imagine it’s a CV dropped on someones desk. Are they going to see the information they need to see? Critical things to put on a homepage at minimum include;

  • Examples of recent work completed.
  • A short bio on yourself (including a personal photo to “connect” with the visitor)
  • Contact information

They need to see who you are, what you do, and an example of what you’ve done. They also need to get in touch with you if they like what they see.

Personalise it

This is where my original homepage initially went wrong. It looked too professional and didn’t feature any personal touches. It now features my Twitter posts, which is great if your twitter posts are acceptable for the public, and a short description on who I am, what I do and what I like to do. Visitors can then “connect” by reading your tweets or even following you.

You could also include your LinkedIn profile, flickr photos (I include TwitPic photos), blog posts, journal entries, Google Maps (when I tweet I can select to locate, which updates the Google Maps in the top blue bar) practically anything personal. It can give your work that extra edge in helping people remember you.

Kean RichmondTry something different

If someone sees a neat little feature of your website that they like they’re probably more inclined to remember you. I’ve really wanted to tinker with the Last.FM API for a while now but have never needed to. I decided to implement it onto the homepage so people can see what I like to listen to. It’s always nice to know if someone listens to a lot of Slipknot or a bit of Robbie Williams. It could be that extra connection your looking for. Kean Richmonds site explores this perfectly on his about page and was recently showcased on CSS Mania.

Subtlety is the key

Subtle

It’s the latest web trend. Not everything has to be black on white or yellow on black. Take it down to a pixel level as it definately makes a difference.Try using gentle shadows, 1 pixel width highlights, 1 shade different hovers on hyperlinks, subtle backgrounds, light colours and small gradients to take your design to the next level.

Adii Rockstar

Take Adii Rockstars website for example. If you look closely at the edge of elements you’ll see the 1px wide shadows and highlights and very simple gradients which make this a very nice design.

Shade

Check out my homepage for another example. I tried to stick to as little amount of colours as possible to keep consitency. By using very light shadows I was able to re-use the same colour to create a border around the images without including an extra colour such as white. It really simplifies the design and keeps it clean.

Don’t pretend

Like to think of yourself as a company, rather than a freelancer? Think again. If your a freelancer exploit it! You’ve done all this work yourself, don’t let people think for a second that it’s a company behind the brand, it’s you, and your visitors should know that from the get-go.

To sum up…

Don’t be afraid to…

  • try something different. If your stuck, look deep into some of the greater designs you like.
  • be personal, most people are more willing to employ you if they already know who you are
  • think outside the box, how do you display your CV? Can you take some pointers from that?
  • show off! It’s your work, your visitors should be able to see it straight away!
  • open up a bit. Having a blog or a Twitter feed can enforce that connection

I hope you like the design as much as I enjoyed building and researching it. If you have any questions or opinions please feel free to air them!