Git gud at (Web) Design

Our years of web design have taught us many things, but mostly that a great-looking website comes down to getting the good ol’ basic design principles right. You know – the stuff they taught us in design school that seemed irrelevant then but that really matter now? In the interests of all padawans out there looking to get better at web design, the sages here at Seventh Season have put together these nifty tips to help you git gud.

1. Have a Strong Colour Palette

A great colour palette is at least 50% of the design work done. Okay maybe not 50%, but a great deal of a design’s success depends on whether or not its colours work well together. Take the time to curate a solid colour palette before starting on a design – it’s like laying a solid foundation for a house. Craft your own or get some inspiration from many palette sites available, such as Coolers or Color Hunt.

Examples of great colour palettes
Amazing colours from the 2016 Bloomberg Philanthropies Mayors Challenge, Fillet and The Ice Co.

Take the time to curate a solid colour palette before starting on a design – it’s like laying a solid foundation before building a house.

2. Good Typography

Good typography:

  • Is complimentary. If you are using more than one typeface make sure that they work well together.
  • Suits the brand you are designing for. Typefaces dramatically influence the tone and style of a site.
  • Can be (and often is) used as a visual element all on its own – like this neat example below from Design Embraced.
Typography as the main visual element
Typography as the main visual element
Good examples of typographic combinations
Excellent typographic combinations
3. Negative Space is your friend

Enough space around elements is SO important for guiding user flow, as well as separating different types of information. It also looks amazing. Be sure to allow enough negative space around:

  • Form fields and elements
  • Button text (make it rain padding)
  • Headlines and paragraphs
  • Anything else that needs it

Too much space will probably cause users to get lost or confused, so use your designerly powers of discretion.

Google US store website
Google Store not afraid of negative space
4. Size Contrast

Vary the size of your elements to create visual interest and to indicate information hierarchy. The Authentic F&F site is a great example of using text size to differentiate information types while still being visually impressive.

Authentic F&F website showing information hierarchy
Information hierarchy via element size on the Authentic F&F site
Size contrast adds visual interest
Contrast in size adds visual interest (from Voila)
5. Use high quality photographs and/or illustrations.

Seriously, there are so many amazing free stock photography sites out there. Use them. Low-quality photography WILL make a website look unprofessional.

6. Design for the Platform

We love what famous Italian designer Massimo Vignelli said: “If you can design one thing, you can design everything”. Most of our points so far are about succeeding with basic design principles in order for your web design to be a success too. That said, every platform has it’s own extra considerations, web not being an exception. Remember that websites are something that people use, and you need to design with user experience in mind. This isn’t a UX post though so we’re gonna leave it at that.

7. Practice

Being a great designer is about having a bit of talent, and putting a lot of practice into it. The more you design, the better your understanding and creative thinking will get!

Design sages out.