Introduction to Web Design - WordPress Meetup Southwest Florida

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/

Your Thoughts? Please Share!

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