Web Design Theory

by Sheldon Ball

Site design by

by Jason Hale

Who am i?

I am currently the owner of LeadOn Consulting. A web development and consulting company. I've spent the last two years, (since graduating from this very course) building my company and crafting web solutions primarily for small businesses like:

Leverage Point Learning

Leverage Point Learning

Schnell Hardy Jones LLP.

Schnell Hardy Jones LLP.

Maxwell Land Services

maxwell land services

Cause and Effect Foundation

Cause and Effect Foundation

And Many More

List of Logos

Prior to that I spent 25 years working for both of the major daily newspapers in Calgary.

The Calgary Herald
The Calgary Sun

Calgary Herald Calgary Sun

Course Overview

Over the next 4 days we'll cover:

  • a brief intro to the web
  • many website reviews
  • what makes a great web site
  • the steps involved in making great websites
  • site mapping and basic wire frames
  • steps in the preparing and completing a website proposal

Course Grading

  • 25% Attendance & Participation
  • 25% Website Review Assignment
  • 50% Sitemap/Wireframes Assignment

Class Intro

  • who are you?
  • what's your background?
  • what do you hope to get out of this program?
  • what is a website you like or use often? why?

Classroom Norms

  • arrive on time
  • be ready to participate
  • cell phone use?
  • participation protocol

How does the internet work?

Web Browsers

What is A Web Browser?

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting and traversing information resources on the World Wide Web.

A Brief History

The First Browser War

Before IE was released with Windows 95, Netscape Navigator had a market share of over 90%. By 2002, IE had a 95% market share and had a near monopoly on the market with IE6.

Enter the Fox

Released in late 2004, by the Mozilla foundation, Firefox quickly started innovating with features such as tabbed browsing and providing a faster more secure internet experience for users.

The Second Browser War

With the emergence of Firefox it took Microsoft 2 years to come out with IE7 in 2006 and another 3 years to come out with IE8 in 2009. This slow rate of iteration, legal battles in Europe and the emergence of Apple's Safari and Google Chrome resulted in IE's continual erosion of market share.

The Landscape Today

Today's browser landscape is constantly evolving. With the addition of mobile devices and browsers the market is more fragmented than ever. IE market share has dropped to 20% globally while Chrome has jumped ahead to 46%.

The Problem With Android

Android is a really fragmented market due to it's open source nature which results in many Android users using an out of date version of the OS with some really bad browsers. This results in many Android users not using their devices to browse online as often as IOS users.

What is Web Design?

  • Web design is the skill of creating presentations of content that is delivered to an end-user through the World Wide Web, by way of a web browser or other web-enabled software like phone apps and RSS readers.

Web design helps content get stuff done — on the web

What makes great web design?

Great User Experience

Great Content

Great Look & Feel

Works Everywhere

Top 10 Principles of Effective Web Design

Web Design Methods

Static Design

A static web design is a fixed size. This has been the most used design method for more than a decade. The majority of sites you find on the web today will be static. When creating a static website your final html page should look identical to the visuals created by the designers. This is the quickest method for creating website but may not work for your entire audience.

Adaptive Design (AWD)

Adaptive web sites will work on a variety of devices and are created using set break points that essentially return a different site at that size. These sites were generally created after the main site was already created in order to add mobile support. When creating visuals for an adaptive design the end product will align with the visuals at each break point.

Many adaptive sites use device sniffing so you may not see the mobile site unless you're on a mobile device.

Responsive Design (RWD)

The responsive design approach is aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation across a wide range of devices (from mobile phones to desktop computer monitors). When starting new projects today this should be your goto method of design. When creating visuals for a responsive design these are used more as a guide and the final product may never exactly match the creative.

Let's Review Some Sites

Sports Sites

E-Comm Sites

Mmm, Coffee

Local Roofers

Find a good Plumber

Small in class exercise. Break into groups of 3 and find the best and worst plumber websites on the internet. After 45 minutes we'll bring up the site and quickly explain why it's the best or worst that you found.

Website Creation Process

  • RFP - Request For Proposal
  • Planning & Discovery (client meeting-conduct in person)
  • Proposal (conduct in person) - Signature - Deposit
  • Information Architecture Design (IA) - Site Map - Signature
  • Concepting/Interface Design - Wire Frames - Signature
  • Mock Up - Signature
  • Development - Signature
  • Quality Assurance - Signature
  • Deployment - Signature

Web Technologies

There are many different technolgies and programming languages in use in the web today. Most can be divided into one of 2 groups, front end and back end.

Front End

Anything that executes on the clients computer is consisdered a front end technology. These include:

  • HTML
  • CSS
  • Javascript
  • Flash

Back End

Anything that executes on a server seperate from the client machine is consisdered a back end technology. These include:

  • PHP
  • ASP
  • Java
  • Ruby
  • Python
  • Apache
  • MySQL
  • Oracle
  • IIS
  • NodeJS

First Assignment

Review any two websites you choose and write a review evaluating the site's UX based on Information Architecture, design, navigation and content.

Some things to think about:

  • What is your overall impression of the site design?
  • What is the goal of the website?
  • Are they achieving their goal? If so how? If not what's missing?
  • Is navigation intuitive?
  • What's good?
  • What's bad?
  • What could be improved?

Marking will be based on depth of analysis and how well your thoughts are communicated.

Email your review to me by 8:00am Friday, September 18, 2015 sheldon.ball@sait.ca


Read chapters 1 and 2 of
"Information Architecture - Blueprints for the Web"

Looking for something else to read?

Check out A List Apart's Summer Reading Issue from last year. A List Apart is the best single place for great design, content and ux articles. Make sure you read, A Dao of Web Design by John Allsopp and Responsive Web Design by Ethan Marcotte.

ALA Summer Reading

Or, Medium

See You Tomorrow