What University May Not Have Taught You About Web Design

0
pro tips for web design



Since we started in 1998 we have had a lot of people straight out of university come and work for us either as interns, or full placement. Here is the list of practical things that they were not taught at university that will help you land your next web design job and keep it. 

 

  1.   Personality is key. So design for it. 

With template websites being used more frequently, and people using services like Wix (sigh), when people come to professional to buy a website, they are here so that they can have something unique and better than a standard template. To do that you need to inject personality. Whether it is through a clever use of animation, great font pairings, or just great imagery and copy, get the personality of the business across. (PS. Tons of animation that makes you question where to go and what to do…not bold, just annoying).

 

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 so we can then work with them to tweak. 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 can hear the hate mail already. The design community is in a frenzy about mobile first, but here’s why I suggest that you don’t. Over the years, I have found that clients approve a homepage based on it’s 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. Proper web design takes the tone into consideration. 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 to fit for mobile). 

I would say pro trick, but this is just silly easy. 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

I cannot believe that a few of my interns and hires 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 brands image. Here Adidas is using funky retro fonts to promote their reboot clamshell toed classic shoes. This works to create a 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). 

 

  1. Design with SEO in mind

When you are designing a website, you are making the most essential piece of marketing in your clients 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 quick 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 front page, on top of the hero image, or maybe in a bar. Get creative. In the Antycip example below, we put the keywords on the left side bar, and also made it a 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.

7.  Use as limited colour palette as possible. 

I say this as I once had an intern that made me a rainbow website…it was not well suited for the client. What is important to know is that 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. 

lobster anywhere 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. 

 

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

Whee, you’re done with your design. Your developers will just make as they are told to. Here is my five point reference list of things that I note for developers: 

  1. Colours. Give them all the Hex colours up front 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. If your menu is going to dock at the top, let them 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. 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. 
  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? 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.