Imagining Your Ideal Website - Part 3 - Design basics

This is a very standard layout of a page - but it's effective.

This is a very standard layout of a page - but it's effective.

Welcome back! Apologies for the hiatus - lots has happened.

Firstly, the first website workshop is to be at General Assembly at 1776 in DC on January 17th, check it out!

This week, we’re going to talk about the basic design principles.

Long story short, good design is basic and easy to understand.

Don’t look to add every bell+whistle. Or ever feature. Or every image that is somewhat related to what you do that you can find across the depths of the internet.

Here are some general design tips:

  • Use strong visuals (ideally high-res photos with resolutions of 1000 x 1000 or greater).
  • Websites should be responsive. You know when you visit a website on your phone, and you have to pinch/scroll/zoom all around to see what you need to? Those aren’t responsive. Responsive websites look great on all devices, including mobile and tablets, as their content adapts to the size of the viewing screen. One website that looks great everywhere - sounds wonderful, huh?! Your users will appreciate it.
  • Less is more. Keep the amount of text to a minimum.
  • Don’t have too many items on the navigation bar - no more than 6. The one on the far right should be the call to action, such as a “contact” or a “buy now” page.
  • Use predominately sans serif fonts (at least for non-heading text). Sans serif fonts are the simplest ones around and are the easiest to view. They are the fonts without the little frills on the ends of letters. For example, Calibri is a Sans Serif font (now the default in MS Word), where as Times New Roman is a Sans Serif font.
  • Use strong fonts for headers.
  • “Chunk” content - don’t have “walls of text.” Break things up into easily-digestible bits.
  • Don’t have auto-playing video or audio: it usually turns out catastrophically.
  • Have your contact info and other site links in the footer of your site (don’t leave it blank).
  • Not always, but usually, it is best to have a strong banner image on your home page with header text over it. It is also good to ideally have a “call to action” button in that same banner so that people don’t have to scroll down.
  • Use colors that work well together - they are opposites on the color wheel. Adobe Kuler is a great tool for creating color palettes.
  • Have lots of “white space.” Now this space doesn’t have to actually be the color white, but what I mean is to have different content and website elements spaced out effectively so that things don’t look crowded.
  • Body fonts should almost always be black / dark gray. Links should be some other color to show that it’s something that can be clicked on.

Design inspiration

One website that does an excellent job of design is that of Hubspot. Hubspot is web-based sales/marketing software. In fact, software companies often have some of the best websites around.

hubspot-landing.JPG
Hubspot's site is fully-responsive, too.

Hubspot's site is fully-responsive, too.

It has a lot of the principles mentioned above: strong headers that are very clear, a ton of information in the banner (including an attractive image and clear “call to action” buttons, strong visuals, isn’t too crowded, and is fully-responsive.

Here are some great links to get design ideas:

  • http://land-book.com/
  • https://www.thebestdesigns.com/
  • http://www.awwwards.com/websites/clean/
  • http://bestwebgallery.com/
  • http://www.siteinspire.com/
  • http://www.admiretheweb.com/
  • http://unmatchedstyle.com/gallery
  • http://www.siiimple.com/
  • http://www.webcreme.com/

Good luck and we’ll see you for part four next week - the actual creation process.

*Jared Gold is the founder of Brevity. His company makes web development and digital marketing for local businesses, nonprofits, and associations less painful and easier to manage. He is developing a workshop for new entrepreneurs that are not pleased with the DIY website solutions, but don’t have the resources to hire a standard web firm.