Introduction to Web Design

Key Design Principles and How to Implement Them!

At November’s MeetUp, I shared some of my design knowledge. Below are my slides and the key topics from the evening’s presentation. The ensuing discussion was fun and enlightening!

Overview

Web design is the visual styling and layout of a website.

  • It requires a good understanding of color, type, alignment, and harmony. With pleasing aesthetics, organized navigation, and sensible UX, visitors are more likely to stay on the site, view multiple pages, and follow-through on Calls to Action.
  • Once you’ve got the design figured out, you use HTML and CSS to build the site.

The Design Brief

Design is more than colors and fonts: it begins with establishing client goals, formulating a strategy to achieve those goals, and creating a strong design concept to support the strategy.

GOALS > STRATEGY > CONCEPT

Design Concept

Brainstorming and sketching out ideas are fun parts of the concept-development process. Ultimately, you implement the ideas digitally (using a software program like InDesign, Photoshop, Invision, etc.), so you can show the client what the design will look like.

BRAINSTORMING

  • Brainstorming Tools
    • Library
    • Surf the Internet
    • Pinterest
    • Music
    • Pen and paper
    • Software programs
    • Friends / Groups
    • Exercise (walk, run, bike, etc.)
  • Brainstorming Techniques
    • Single or Teams
    • Lists
    • Crazy Ideas
    • Forced Connections
    • Flapdoodles (mind-maps)

VISUALIZING

  • Thumbnails
  • Design “Comps” (Comprehensives: digital representations of the design options)

4 Basic Design Principles

Design is all about the CRAP: Contrast, Repetition, Alignment, Proximity.

SOURCE: The Non-Designer’s Design Book by Robin Williams

C-R-A-P

CONTRAST

One of the most effective ways to add visual interest to your site.

  • Size
  • Shape
  • Structure
  • Form
  • Serif vs. Sans Serif Fonts
  • Color / Tone
  • Opacity
  • Direction

SOURCE: Design With Type by Carl Dair

REPETITION

Repeat elements of the design to achieve unity.

  • Colors
  • Fonts
  • Patterns
  • Shapes
  • Layout
  • Images
ALIGNMENT

Place everything with intention. Each item should be visually connected with something else on the page.

  • Grids
  • Left, Right, Centered
  • Structure
  • Layout
  • Organization
  • Relationships
  • Hierarchy
PROXIMITY

Group related items together.

  • Position
  • Grouping / Relationships
  • Tension Points
  • White Space
  • Readability
  • Layers

Other Key Design Principles

HIERARCHY
  • Prioritizing
  • Emphasizing
  • Directing the viewer
WHITE SPACE
  • Helps organize
  • Helps proximity
  • Improves legibility
  • Provides breathing room
HARMONY
  • Unity
  • Balance
  • Consistency

Build the Website

Live vs Local

LIVE = Hosting your website on a web server in the cloud.
LOCAL = Hosting your website on your computer

If you don’t have a WordPress account, you can install WordPress locally with *Desktop Server OR Local by Flywheel
*Requires Safari

HTML for structure

  • Themes
  • Child Themes
  • Frameworks
  • Basic tags: <html>, <body>, <h1>, <p>, <quote>, <ul>, <li>, <a>, <br>
  • Basic elements construction:
    <start tagname>Content goes here… </end tagname>
    <h1>Headline One Usually Reserved for Page Titles</h1>
    <h2>Headline Two Usually Reserved for Blog Titles</h2>
    <p>Paragraph content goes here… </p>

CSS for aesthetics

  • Cascading Style Sheets
  • CSS defines how the HTML elements should appear
    h1 {color: #000; font-size: 32px; text-align: center;}
    p {font-family: ‘Crimson’, serif; font-size: 16px;}

Tools

  • Theme Customizer
  • Style Sheets
    • Inline
      <h1 style=”color: #232323;”>This is an H1 head with a color style. </h1>
      <span style=”color: #232323;”>This is a sentence with color applied through “span.” </span>
    • Internal
      <! DOCTYPE html>
      <html>
      <head>
      <style>
      body {background-color: #000;}
      h1 {color: #658833;}
      p {color: #232323;}
      </style>
      </head>
      <body>
    • External – style.css
      <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

Child Themes

  • It is highly recommended that you create a Child Theme if your styling modifications are extensive.
  • A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
    • the child theme directory
    • style.css
    • functions.php

Resource Links

The Non-Designer’s Design Book by Robin Williams
Conceptual Blockbusting by James L. Adams
The Universal Traveler by Don Kobert and Jim Bagnall
Design With Type by Carl Dair
https://www.w3schools.com
https://www.htmldog.com/

Related Posts (on Anne’s blog)

Top 9 Graphic Design Books
Top 10 Typography Books
8 Awesome Responsive Web Design Emulators
Working on a Winning Book Design
Design Inspiration: A.M. Cassandre

Your Thoughts? Please Share!

If you would like to share some thoughts and/or resources regarding web design, please use the comments sections below.

Anne Katzeff

Designer | Artist | Teacher - Specializing in custom website design for artists, small businesses, and nonprofits. WordPress Meetup SWFL organizer. Principal of ASK Design. Anne also writes about WordPress, design, art, and teaching in her blog.

Leave a Reply

%d bloggers like this: