What Designers Need To Know To Design For The Web

Over the past 22 years, we have had a lot of people straight out of college work for us either as interns, or full placement. Here is the list of practical things (that I was surprised they were not taught at university) that will help you design better for the web.

1.  Personality is key…make sure you design for it. 

With template websites being more widely used, and people using services like Wix (I threw up a little there), when people come to professionals to buy a website, they are here so that they can have something unique and better than a bog-standard template. To do that you need to inject personality. Whether it is through clever use of animation, great font pairings, or just great imagery and copy, get the personality of the business across. 

Web Design Example: Allan Janes, a firm of solicitors in High Wycombe, wanted their new website to be something bold and approachable, but still showed that they are established. We found a great image of a guy on a skateboard with a woman handing him a briefcase and paired that with the phrase ‘helping you and your business on the journey’. Using a classic italic font paired with a bold font in all caps helped bring this to life. (Pro tip: Too much going on (like overuse of animation)  is not ‘bold’, it puts someone off and they don’t know where to go and what to click. Be clear with your intentions, and what you want your visitors to do).

2. Design in Illustrator not Photoshop. 

One of the biggest problems we have with interns is that they expect to have a month to do the designs for a website. We like to see a mocked up home page in a day or two. To save yourself time, use Illustrator it will cut your design time in half (if not more). Designing a website in Illustrator allows you to do ANYTHING you can think of…you just need developers who are good enough to make your creations. Note that there are a lot of new fun things that designers can use, but none gives you the freedom of Illustrator for pure creative license.  

3. Design for desktop first. 

I know, I know, the design community is all about mobile-first, but here’s why I suggest that you design for desktop first. Over the years, I have found that clients approve a homepage based on its desktop design 90%+ faster than if they are shown a mobile version first. 

If you design mobile-first, or home and mobile-first, the clients may say they like some elements of one, but hate others. If you just have one design to show them, you can get the style honed to a fine point and approved much faster.

The homepage elements are essential for establishing the tone and feel of the site. Note that mobile is very important, so keep that in mind when you’re designing the site, which brings us to…

4. Design every homepage section for a standard viewport.

If you create a homepage design that is 1920px wide and each section is 1080px high, it will scale beautifully to mobile (Just do the same trick with the viewports but in mobile size, and resize and rearrange to fit for mobile). 

Fun trick that makes this simple. When you open the illustrator document, create a simple rectangle, in an obvious colour, that is exactly 1080px in height. Keep that on the side. When you have a new section, just use the rectangle, make the artboard longer, and drag the ruler so you know where it ends. Keep the content in each 1080 section. You can have elements hang over for aesthetic purposes, but keep the main content in the section. Note this trick works with any size viewport (I say this as someone once asked me..sigh).

5. Never use the Logo font anywhere else on the website. Never.

I cannot believe that a few of my interns were not taught this, but using the same font for the website weakens the brand. Imagine if iconic brands like Coca Cola or Adidas used their font on their website…shiver. Brands should have a strong logo with supporting fonts that work with the brand’s image. Here Adidas is using funky retro fonts to promote their reboot clamshell toed classic shoes. This works to create the desired tone, without distorting the image of the brand as a whole. But what if I am not an iconic brand you ask?  If you ever hope to be, don’t use the same font as your logo anywhere else (that means in print too). 

6. Design with SEO in mind.

When you are designing a website, you are making the most essential piece of marketing in your client’s toolkit. To ensure that it will actually be found on the internet, you need to know how to design and get SEO integrated into the design (a full article on this will be coming soon).  To design with SEO, here are some basic tips:

1. Find out the top five keyword strings they want to rank

2. Take the first keyword string and find a natural place you can put that text. It can be on the hero image, on top of stacked text… the key is to get creative. In the Antycip example below, we put the keywords on the left sidebar, and also made it navigation. We also made sure the words ‘Virtual Reality solutions’ were in the main paragraph text. 

3. Take the existing keywords and work them into the design, but naturally. This might be through a list of service links, titles for sections, both, etc.

Another example, we are currently making a website for a solicitor. They want to rank for London Drink Driving solicitors. You can see in the image below where we worked it into the website (launching soon). 

7.   Use as limited a colour palette as possible. 

It is very easy to create a website with every colour imaginable, as it’s fun. But colour increases brand recognition by 80% (study done by Stanford). And customers that remember you are customers that come back or refer you to others. All of the major brands do this, so the local store that wants to expand…do them a favour and encourage them to pick one colour as their ‘brand colour’. From there you can have subtle tonal accent colours, like neutral greys, black/white, or beiges, but nothing that takes away from their core colour. 

Now that you have their colour, make sure you use it strategically around the website. Don’t make the entire website white with blue accents…mix it up. Make a section blue, another grey, another white, and so on. Just because it’s just one colour doesn’t mean that you can’t have fun with it.

Web Design Example: We created the new design for Lobster Anywhere, the largest (and most awesome) online Lobster retailer in the US. When we started the design we wanted to make sure we worked the iconic red of the lobster into the design. We used it in mouseovers in the navigation, and in buttons throughout the website. It’s a small, but strategic use of the brand colour that helps customers with brand retention.

8.   Done with the design? Export that PDF and mark it up with directions. 

Whee, you’re done with your design! Note that this list varies with each client, but here is my five-point reference list of things that I note for developers to make their life easier to ensure I get the website I designed: 

1. Colours. Give them all the Hex colours upfront as it will save them time. Be specific, ie. hex colours for mouseover states if they are different (say if you’re going from brand red to a darker red, give them that hex). 

2. Menus. If your menu is going to dock at the top, let the client know that, and how it will dock. Is it supposed to fade to dock, just a plain hard dock, or shrink?  (Pro tip: If it’s shrinking, make a second artboard with how it should look so there is zero confusion, do this for the mobile version as well).  

3. Animations. If anything is to be animated, note it. Like the gun that zaps on our web design page, give them directions on how it should work, and if you can give an example of it live on the web, note the link.

4.  SEO. Remember that SEO you put in earlier? Any SEO text that you put in there highlight and make note of it. If you know which ones you would like to be H tags make note of that. (if you don’t, we’re writing an article on that now, we got you).  

5. Site building (fade-ins, slide-ins etc.) When you mouse down, how will the site ‘build itself’? Is the header text fading in first, and then the paragraph? Is it sliding in the in boxes you designed? The key here is to be specific. I usually like to pick one type of build technique and stick to it. Too many fancy slide-ins and fade-ins make a site too busy and can increase load time if not implemented properly. 

This is a series we dip into from time to time on tips for designers. You can read another we did about designing for print and how to make a great CV for designers. Next in this series will expand on designing for SEO and give practical examples. Have a happy fun day, and design your hearts out.