Creating Awesome Content for Your First Website

Grabbing your readers' attention from the first line is merely the tip of the iceberg

By Andrea Borja-Hoffmann

Building a top-notch website involves blending different elements to share your brand’s story effectively. This guide hones in on four core components: words, images, fonts, and colors.

1. Words (Text/Copy)

The words you use on your site form your primary conversation with your visitors. It should sound like your brand’s voice. Importantly, consider Search Engine Optimization (SEO). Include relevant keywords in your content to help your website show up in search results.

Free Resources:

  • Hemingway App – This tool makes your writing easy to understand.
  • Grammarly – Checks your writing for mistakes and suggests improvements.
  • ChatGPT – This AI can help draft content or come up with creative writing ideas

2. Images – Photos and Graphic Pieces

Good-looking visuals can make your website stand out. High-quality photos and interesting graphic pieces can greatly boost your visual storytelling.

Free Resources:

  • Unsplash – Offers free high-quality photos.
  • Pexels – Another great place for free, top-quality stock photos.
  • Canva – Helps you make custom graphics for your site.

3. Fonts (Typography)

Typography involves choosing typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. One of the main goals of typography is to make text easy to read, so that people can understand the information that is being presented to them. Read also Canva’s ultimate guide to font combinations.

The right mix of fonts can have a big impact on how your website looks and how easy it is to read. Use Google Fonts whenever you can, as they are stored on Google’s global servers, which means your webpages load faster as these fonts are likely already saved in users’ browsers from other sites.

What to consider:
  • Legibility — Choose fonts that are easy to read, particularly for longer text. Serif fonts can improve legibility by helping distinguish similar characters.
  • Readability — Both serif and sans serif fonts are now equally readable on screens due to improved resolutions. Focus on font sizing and spacing to enhance readability and legibility.
  • Comfort — Prioritize the comfort of your website visitors. Don’t hesitate to use commonly used fonts if they suit your content.
  • Style — Select font types and styles that align with your brand and convey the desired tone. Serif fonts appear more traditional and serious, while cursive fonts can add a sense of playfulness.
  • Font pairing — Limit your font selection to a maximum of three. Pair complementary fonts, such as serif with sans serif, or balance a standout header font with neutral body text. Consider exploring font pairs within the same family to achieve a cohesive yet distinct look.

Resources

  • 1

    Google Fonts is a big selection of free, web-friendly fonts

  • 2

    FontPair helps you match Google Fonts effectively

  • 3

    FontJoy makes font pairs using smart technology, with the option to use Google Fonts

  • 4

    Monotype lets you experiment with font pairings

4. Colors (Color Palette)

Seeing different colors can elicit different emotional reactions in people. Certain colors might elicit feelings of joy or urgency, for example. Use color schemes strategically to help you set the mood for your website and create stronger brand messaging.

Main colors to choose:
  • Primary color — Start by picking a dominant color that will be the main focus of your color palette, making up around 60% of the website’s color. Consider the emotions you want to evoke and the context of your website.
  • Secondary colors — Once you have the primary color, choose one or more secondary colors that complement it, making up about 30% of the color scheme. Decide on a color scheme that works well together, such as using shades of the same color or contrasting colors.
  • Accent color — Include a contrasting accent color that stands out from the primary color. This color should be used sparingly, making up approximately 10% of the website’s color. It helps draw attention to important elements like buttons or links. Consider vibrant colors or even black and white as accent options.

htmlcolorcodes.com

Resources

  • 1

    Coolors – An easy-to-use color scheme maker.

  • 2

    Adobe Color – Offers tools for making color palettes and gives color inspiration.

  • 3

    Color Hunt – Has a wide range of ready-to-use color palettes.

Look for Ideas (Research and Inspiration)

A good starting point is looking at other websites in your industry. Seeing how they present their content and design their sites can give you lots of ideas.

Free Resources:

  • Awwwards – Shows great website designs for inspiration.
  • Behance – A place where designers share their work.
  • Pinterest – Gives visual inspiration from a wide range of industries and design styles.

Read more:

  • The Psychology of Color in Website Design

    Colors can strengthen your brand, encourage sales, and even guide visitors toward specific pages or actions on your website

  • What Should Go on Your “About” Page?

    It's not just about your business — it's about the people behind it

  • DIY vs. Hiring a Web Designer: Which Option is Right for Your Small Business?

    DIY vs. Hiring a Web Designer