While some people may have been more exposed to other areas of art, allowing them to have an 'eye for design', other times it is just a matter of studying the craft.
As a web design company, we want to point out a few of the basics to keep your website looking good.
Selecting a Font
Selecting a proper font may be the trickiest when it comes to a solid design. This is especially true considering how many fonts are available which makes it overwhelming to decide where to even begin.
A solid beginning rule would be to only select web based fonts. Some fonts are meant for beautiful graphics while others are meant for beautiful websites.
Another basic rule would be do not use script fonts for paragraph text to keep everything readable. This means any font that is hard to read should never be used for paragraph text. Oh, and no comic sans. Ever.
Mirroring The Message
We need to determine a few fonts that reflect the website mood and message. This is crucial. You do not want a fun site about mountain biking to display an elegant font that would be better suited to discuss a gala.
Let's start with Serif vs San Serif.
Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols. An example would be the Times New Roman font. Sans serif does not have these details or flourishes. An example would be the Arial font.
Serif
Humanist
- Classic and traditional
- Best used for history or journalism
Transitional
- Strong, stylish, and dynamic
- Best used for traditional academics and legal
Modern
- Structured, clear, and elegant
- Best used for culture & arts
Slab/Egypt
- Authoritative, yet friendly
- Best used for marketing and promotions
Sans-Serif (without serif)
Humanist
- Tension between perfect and imperfect
- Best for government and education
Transitional
- Unassuming and modern
- Best used for tech and transportation
Geometric
- Strict, objective, and universal
- Best used for science and architecture
Matching Headings and Paragraphs
The next task at hand will be pairing headings with paragraph text after determining the fonts that best reflect your website mesage.
- Don't select two fonts from the same style
- Example: Two Humanist Serif fonts
- Don't pick two fonts from the same class
- Example: Two Serif fonts
A rule of thumb would be two select two contrasting fonts that have something in common. This may be a Humanist Serif with a Humist Sans Serif.
Implementing A Font
You may be wondering how you actually add the font to your website now that you have it narrowed down.
The above image shows the font being added to the HTML.
The above image shows the font being added to the CSS.
Color Schemes
After you decide on the perfect font for your website, you will need to then focus on the best color schedule.
Color Psychology
Color plays a serious role in mood whether you are painting your house, designing a flyer, or making a website.
Brown: Warmth, coziness
Black: Power, sophistication
Grey: Somberness, stability
Blue: Trust, confidence
Red: Excitement, passion
Pink: Youthfulness, romance
Purple: Luxury, wisdom
Orange: Energetic, vibrant
Green: Natural, growth
White: Purity, simplicity
Yellow: Happiness, joy
Color Schemes
Typically, websites display more than one color which means we need to determine a color scheme. We will focus on 3 common types.
Monochromatic: Same base color but different saturations and brightnesses, typically 5 total.
Analogous: Has colors that vary in saturation and lightness, hue increases and decreases.
Complementary: Varies in saturation and lightness with hues of the same color and opposite.
Start Designing
Now that some of the basics are in place, you can start designing or at least be able to clearly voice what you want to your project manager.
Have any other basic tips or favorite font pairings? Let us know.