Web Design Tips + Resources

Because I come from a graphic design background, I thought I’d share some basic things to think about when designing a site.

1. Use 1-2 Font Families

– 1 with personality for headings and 1 generic for the body or all the same

Importance:

If you introduce too many fonts, the page will become busy, the hierarchy of the page will be lost, and the user will be unsure of where to focus. Best to keep the site clean and straightforward.

Example:

http://www.fiftythree.com/pencil

– Displays 1 font-family, but uses size, weight and case to create a clean and crisp hierarchy.

Good Font Resource:

Font Squirrel – http://www.fontsquirrel.com/

2. Use Colour Sparingly

– A couple neutral colours plus 1-2 accent colours tends to work nicely.

Importance:

Too many colours on your site can easily start looking like a rainbow, unless that’s what you are going for and it’s appropriate for your content, keep it simple.

Example:

http://kinhr.com/

– Has a muted colour palette across text and body imagery but green and purple accent colours to place emphasis on specific content.

Good Colour Palette Resource:

Pictaculous – http://www.pictaculous.com/

3. Use Texture

– Nice to add when a section of your site feels empty or flat. Be sure to think about the type of content that will be going over top of it.

Importance:

Using a texture that conflicts with the content on the site will be distracting and fight with your text, making the content illegible.

Example:

http://www.thegreatfifty.com/

– Instead of keeping the background solid, texture was added to create more visual interest and depth.

Good Pattern Resources:

Subtle Patterns – http://subtlepatterns.com/ (Works well behind body text)

Lea Verou: CSS3 Patterns – http://lea.verou.me/css3patterns/ (Works well in headers with bolder titles)

4. Use High Quality Photography

– It elevates your design.

Importance:

No matter how nicely you’ve designed your site, if the photography isn’t great, the design suffers.

Example:

http://grovemade.com/collections/

– Shows beautiful product shots with dynamic shots and crops.

Good Free Photography Resources:

http://wefunction.com/8-unique-places-to-find-quality-free-photos/

I hope you have found this introduction to web design helpful!

Posted on: April 30, 2014 4:50 pm