Updates

What it Takes to Make a Great Graphic Design Website

January 16, 2017 • By

As a graphic designer, you’re expected to have a great website, which kind of sucks if you’re more artistically than technically inclined, and you don’t have the kind of money it takes to hire a really good professional web developer to help you.

No matter how inept you may feel when it comes to coding a web page, the one thing you absolutely must not do is use a generic website template to showcase your graphic design abilities.  What a template literally screams at your audience is a series of uncomplimentary adjectives such as:

  • Lazy!
  • Unimaginative!
  • Non-creative!
  • Unoriginal!

These are not words that any graphic designers should want to have associated with themselves.  So whatever you do, don’t ever have a website that looks too similar to anybody else’s, and especially don’t use commonly available templates, or even a similar layout, because there’s a really good chance that people will have seen them before and that will make a difference to how many customers you get through your site.

Should you have a site at all?  Yes, indeed you should.  A website can get you work you never expected, and helps when you’re pitching to anyone because you can refer them to your site.  Also if you don’t refer them to your site, they’ll wonder why not, because every other designer they talked to did have a website.

In this article, we’ll be taking a look at some of the things you can do to make sure your website stands out from the rest.  And don’t worry if you’re “not good with computers” because I’ll explain how to do any really tricky stuff as simply as possible.

1. Make sure your design is relevant in some way to who you are and what you are

This is going to be true whether you’re a lone operator or a member of a team of professionals who work together as a studio.  Your website has to be about you and your identity or image, and it has to be created for your audience.  The reason for the emphasis on those particular words is that people often forget what the website is meant to be about and who it’s meant to be for.  The “for and about” is a really important part of the design decision, maybe even the most important part.

Here’s an example of a site that gets it right:

So why is that the right approach?  Well, for a start it tells me who he is (Rodrigo Breckenfeld), what he does (graphic design & front end development), and why I should be interested in him (he develops simple and communicative visuals + friendly users (sic) interfaces and stuff).

We know he’s Brazilian, so we can overlook the accidental grammatical error.  He didn’t say he was a writer, he said he was a designer.  The important thing is he tells me most of what I need to know, and he tells me that visually, but not without words.

I can’t stress how important that is.  Never make a website that is based entirely on pictures (at least not if you’re making it for yourself, or if you intend for it to be part of your portfolio).  Lazy, air-headed designers are pushing carousel based websites onto corporate descision makers who don’t know any better, but you, as an actual designer, ought to know better.

Here’s an example of a site that does exactly the opposite of what I’m advising:

Why  do I believe this is the wrong approach?  Because I can’t tell at a glance who they are, what they do, or why I should be interested in them.  To get the first clue, I need to look at the bottom of the page, always the worst place to put anything that needs to be noticed.  Right away I am given a wrong impression about this company.  Yes they are creative and a bit different, but they’re making things difficult for me by causing me to have to look around the design to find information.

Their design is also busy.  Too many images makes the mind work harder, and that’s especially the case when all the images are not related to each other in any obvious way.  People simply like things to connect, and when they don’t it feels uncomfortable and jarring.  When something we look at makes sense, it makes us more comfortable.

The main problem though is that there are no words where words are needed.  This means the site has no message and nothing to truly hook me unless I either already know who they are, or I find one of the images so absolutely captivating that I just have to find out more about it.  And it’s a shame, because the photos are actually excellent.  ELI are clearly great at what they do (digitally improving photos). But in my opinion, that needs to be communicated more effectively than simply by showing me the results of their work.

Finally, let’s take a look at a site that fell somewhere in the middle:

When you first enter this site, you’re confronted with the slightly unsettling image of this guy staring silently at you and then very slowly blinking.  That’s actually pretty good because a lot of people will be curious about what’s going on, and they’ll want to found out more.  Although we don’t know anything much about Michael at this point other than what he looks like, that’s OK.  You can suspend the “at a glance” rule if you have a strong hook, and this site does.

Scrolling down the page a little, we can see that he’s holding up a message for us:

Great.  We now know who he is, what he does, and why we should be interested in him.  But here what we can see is the importance of not only using words, but using the right words in the right way.

I would certainly consider hiring Michael as a developer, but the one flaw in his message is that it’s not very effective communication.  It tells me the wrong things in the wrong way, without really inspiring me to find out more.

Sorry, Mike.  It’s a great site, really I love the creative idea behind it, but it would have helped to have assistance from a professional writer or communications specialist to help hit the right note going forward. Don’t take this the wrong way.  This guy rocks, he’s awesome… just maybe not necessarily as a writer.  Truth be told, writing about yourself is one of the hardest tasks to tackle, which is why sometimes it might be better to hand the job over to somebody else.

Case in point: it’s not a bad idea to mention what school you went to, but Simon Fraser University isn’t well known enough that you can abbreviate it to “SFU” except when talking with other people who went there.

2. Stand out for the right reasons

Your design needs to be different and unique enough to arrest my interest, but it shouldn’t be so off-the-wall that I want to claw at my retinas just to get the image out of my head as quickly as possible.

The website you present is part of your brand identity, either as a company or as an individual, so you want to make sure the story you’re telling is a good one.  When it is done well, the website arouses curiosity without creating confusion.  You need to balance “unique” so it stops a little short of “crazy”.

Here’s an example of a guy who seems to get it:

Now, Ed’s site is a little old-school, but that’s OK because Ed seems to be a little old-school himself, and there’s nothing wrong with that when it fits.  Ideally it would be better if the page would stretch a little more to make better use of the available screen space, and it doesn’t seem to be a responsive design.  That would just benefit him, it doesn’t take anything away from his message because he’s not claiming to be a web designer.  In fact, he makes it very clear that he’s not one, because that hand written menu at the top has links to many different kinds of design work, but not web design.

Which also raises another point, which is that the use of all that hand written and hand drawn stuff, the scrapbook style on old paper, is actually a really clever way of visually showing that he’s into that old-school style of design.  He’ll create a font for you.  He’ll design a poster for you. He may even be able to make some really groovy Christmas cards, man.  But he’s not about trying to impress you with that fancy-schmancy high tech stuff.  Not to say that he couldn’t do it, just that he doesn’t need to.

Here’s another site that I really took a shine to for it’s bold leap away from the mundane:

Unfortunately they’ve decided for some reason to update the entire design of the site, when I think the old design was quite good, and an excellent approach for a married couple that are working together in a business.  Admittedly they may have been a bit too self-deprecating in their descriptions of themselves, but that’s the Australian way.  For them, in their country, it’s an approach that is likely to work.

The interface of the site is really simple.  When you first land on the page, you’re presented with a replica of a business card:

This works because it satisfies 2 out of the 3 “at a glance” critreria (who they are and what they do).  It’s fairly obvious that we’ll need to scroll down the page to find out the third thing, which is why we should care.  As I said before, you can relax the rules a bit if you have a good hook.

Scrolling down, you see the Mr & Mrs section, which gives us their photos, their individual roles in the business, and a short blurb about each of them, which is just wordy enough without being boring, and I like that it’s narrated in the first person.  Such a rare thing these days, when everybody’s being told not to do that (which is stupid advice, by the way).  At either side of the page are arrows indicating where you can find more information, and that was a good touch too, because it reinforces that message of there being two separate halves to the whole.

Starting with her side, we get taken to a lovely clean page with a nice visual style and appealing typography:

From there you have access to her portfolio, more detailed autobiographical information, her blog, a guide to her services, and information about how to contact her.  Each of these pages is as much of a visual treat as you’d probably expect.

The page about Mr Mealing, of course, is supposed to contrast, so the color scheme is reversed on his side.  Let’s take a look at what Samuel’s page looks like:

Personally, I was a bit less satisfied with this one because it had a more generic template look to it, but it’s still very nicely presented and the colors are effective.  It isn’t entirely intuitive that the user should hover over the badges to reveal that they stand for HTML, CSS and JavaScript.  Maybe I just have a deviant mind, but I think the JavaScript one isn’t obvious at all, and actually looks like some kind of orifice.  The page does a good job of packing a lot of complicated information into a small space, and it’s an effective piece of communication.  Maybe saying that you’re “pretty good” is not quite strong enough when you’re trying to convince someone to give you a gig, though.

Now that we’ve covered that, it’s time to address the fact that you can also stand out for the wrong reasons.  You can cut things a little too close to the crazy line.  Here’s an example of what it looks like when you maybe push things a little too far:

Granted, some people are probably going to like that, but I think it’s just too different.  Here, the only way to know who they are is to see that badge at the bottom of the page, and as for what they do or why you should hire them, there’s really only an impression that they like to scribble things.

In case it’s not obvious (and it’s not!), you’re supposed to click on the red dot.  Then it will zoom in and play an animation for you, providing more dots to click.  Each time you click a dot and watch the short animation that results, a link will become available next to the brand badge, which lets you inspect the Facebook profile of one of their contributors.

Somehow, though, as you can see, the site won an award.  Clearly the judges don’t take into account the actual usefulness of the information and whether or not it would be highly effective in attracting customers as part of their assessment criteria.

3. Keep your messages simple

Simple, communication is what works best.  Make good use of the visual space and communicate well visually.  You should also use words effectively, to tell people what they need to know in the most appropriate way.  You don’t necessarily need to be brief, and sometimes it’s counter-productive to be brief.  But you do need to be clear.

Above all, impress people because you’re impressive, not because you’re trying to impress.  What should happen is the viewer should be sitting at the computer and feel their jaw drop in amazement as they stare at the screen and utter the immortal line: “Wow, that’s really impressive! Where’s my phone? I have to hire this person!”

If you get it wrong, they’ll say: “Ha! Look at this idiot, trying to impress me with all that hi-tech nonsense!”

And if you get it really wrong they’re going to say: “Arrrgh! This crazy website with all the stupid big graphics, tacky unnecessary JavaScript and God-awful Flash animations has completely overwhelmed my CPU.  Now I’m gonna have to reboot!”

Don’t be that guy.  Also avoid using jargon unless it’s something you’d expect the audience to be familiar with.  For example, it’s perfectly fine to use the abbreviation “PHP” and it would actually be weird if you spelled out the individual words that it stands for.  On the other hand, if you go throwing around the buzzword abbreviation of the month like “CTR” and “KPI”, don’t be surprised if you lose half your audience.

A lot of websites, especially those in web design and SEO, try to use high level business jargon that is just bamboozling to small business owners and they’ll tune out.  Or when they don’t tune out, they’ll be that annoying customer who actually knows what you’re talking about even though you didn’t when you wrote that crap.  So don’t do that either, because nothing good ever comes from it.

Always respect you audience and treat them how you’d want to be treated yourself.  Don’t talk down to them, but avoid being confusing.  And if you possibly can, try to reach them on an emotional level or stimulate their intellect, without having them think you’re a fool.  Communicating, after all, is as much an art as it is a science.