To make great websites with the least amount of wasted time and effort, we need to do two things:

  1. Design First: Figure out audience and purpose. Structure, headings, images, content…etc, will all come naturally after
  2. Implementing: once the design’s made, the implementation becomes trivial and busy work.

Design

Repeatable patterns

First determine the repeatable components, then design them first, this will introduce DesignConsistency.

Break into sections

Build with everything broken down.

Hero section

The Hero is the component that draws the user’s attention and calls them to do something! It’s often considered the most important. Elements:

  • HeroHeading: powerful attention grabber that answers “What problem am I solving?”
  • Then add a small paragraph with 2-3 sentences under it that expands on what the heading means.
  • Then some media element, image or vid, to complement it…

Recommend a Two Column design over a single, better responsiveness and easier on the eyes.

More info

Be as transparent and accurate as possible in describing what the website does. Answer potential questions your users may have. Be bold and direct when needed.

Colours

You only need 3-4 colours, including black and white, the other two are accents used for borders, buttons, and gradients. For more on this check out HSLColor

Fonts and Typography

Much has already been said, just check out Typography