Lesson 1: Introduction to Web Design

Tim Berners-Lee, 1990

The first ever website was created by a scientist named Sir ______ in ____

1992

A copy of the original page from ____ still exists online. It simply existed to serve and tell people what the World Wide Web (WWW) was

1994, WWW Consortium (W3C)

In ___, the ________ was formed to set and establish the standard of the web (https:/ / www. w3. org/)

(1991 - 2000) - The Static Web

Web 1.0 Era:

table markups

Web design became more interesting with the introduction of _____ in HTML

Creating Killer Sites, 1996

The usage of spacer GIFs, introduced in David's Siegel's book ______ in ____, allowed web designers to play with white space (basically, small transparent GIFs were placed in between the content), and by incorporating a sliced image background, users would have an illusion of a simple structure, whereas in reality there was a table layout behind it.

Early 2000s

Flash and Decorative Design Era:

Macromedia Flash, Adobe Flash, 1996

Flash, previously _____ and currently _____, was created in ____

Flash

Designers were able to add animation, custom fonts and shapes, 3Dbuttons, splash pages, and all in one Tool

Search Engine Optimization (SEO)

However, Flash was not ______-friendly and was very heavy in terms of resources for your computer

2010

Flash started to decline when Apple decided to stop supporting Flash in their iOS software back in ____

2000s

Cascading Style Sheets (CSS) became more popular in the ____ with their increasing support in web browsers

CSS

____ defines how the HTML is displayed, and this has allowed designers to separate the content and the design, making websites easier to maintain and quicker to load

The Rise of JavaScript

Web 2.0:

JavaScript

_____ was the first means of adding intelligence to the web

MySpace

_____ website, developers started to create applications for people to interact with

(2004 - 2012) - The Social Web

Web 2.0 Era:

iPhone

The ____ ultimately started the boom of mobile browsing. Nobody in the web industry saw this coming

2016, Responsive web design

Until ____, for the first time in the world, mobile and tablet internet usage exceeded desktop usage: _______

Ethan Marcotte in 2011

He described a new way of designing for the desktop but also for the mobile interface, basically proposing to use the same content, but a different layout for the design on each screen

12, 16, 12

The most popular versions being used were either ___ or ___columns. It became a standard for designers to design their websites using ___ columns for desktop and downgrading progressively for mobile viewing

media queries

With the introduction of _____ with CSS3, it became easier for designers to design websites for mobile screens

Media queries

_____ is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (for example, a smartphone screen compared to a computer screen)

2013 - 2017

Flat Design & Responsive Era:

Flat design

_____ is the term given to the style of design in which elements do not have stylistic shapes and characters, such as gradient, drop shadows, textures, and any type of design that makes it look real and three dimensional.

rich design

It's usually described as the opposite of _____, which in contrast is used to make elements feel more tactile, real, and usable for users when they're navigating

Swiss Style, International Typographic Style, Switzerland

People often say that flat design originated from the _____ (also known as _______) was the dominant design style back in the 1940-50s and started in ______

Swiss Style

It became a solid foundation for graphic design in the mid-20th century around the world

Swiss Style

The main characteristics of this design style are the use of asymmetric layouts, grids, sans-serif typefaces such as Akzidenz Grotesk, and a clean hierarchy of content

Swiss Style

The famous typeface Helvetica was created during this period and was used in every type of design.

(2018 - Present) -Interactive, Immersive, AI-Powered Web

Modern Era:

grid system

A _____ is a system that helps designers structure their design, content, and imagery, and make it more readable and manageable

grid system

They may feel the _____ can be a little restrictive and repetitive creatively

Call to Action (CTA)

A ______ is a marketing term to define a designed element that solicits and encourages an action from the user and which the end goal is to attempt a sale

call to action

A _____ is an invitation for a user to take some desired action

Breadcrumb, breadcrumb trail

________ (or _______) is a secondary navigation system that indicates where the user is on a site or web app

Hansel and Gretel

The term Breadcrumbs came from the ______ fairy-tale in which the main characters create a trail of breadcrumbs in order to track back to their house.

search bar

The _____ has become more crucial for heavy-content websites, such as YouTube, Facebook, and eBay.

Icons

_____ help us to better understand and interpret information

Icons

It serves as an important visual aid in any graphical communication

Modal boxes

_____ are generally pop-up windows that appear on the screen rather than opening a new tab/window.

Modal boxes

_____ are used to show information to the user on the same page without reloading the page and by that, improving the usability

• Error

• Warning

• Collect information

• Confirm or Prompt

• Helper

Five common usages of modal box:

Typography

_____ is very important in design; it can alter the perception of your visitors

serif, sans-serif, script

The typography you choose will give the user an idea of who and what your brand is about. There are essentially three different categories of typefaces: ____, _____, and ____

serif

A ____ typeface is easily recognizable by the little lines or strokes that extend from letters

serif

The mood associated with ___ typefaces is often classic, romantic, elegant, formal, and established

modern

Sans serif typefaces are often considered more ____ than serif typefaces

Sans serif

The mood associated with ____ typefaces are more clean, friendly, minimal, or modern

Gotham

____ Typeface was very popular in the late 2000s

Casual scripts

These typefaces are designed to suggest informality as if they were written quickly

Casual scripts

They can represent emotion, speed, and familiarity. They are not great for body content but can act as a very good headline to sell an emotion

hypothalamus

According to Kissmetrics, when you view a color, your eyes communicate with a region of the brain known as the _____, then, in turn, it will send a signal to the pituitary gland and finally to the thyroid gland

Usability

____ is simply the attribute that defines how easy the user interface is to use

• Learnability

• Efficiency

• Memorability

• Error-tolerant

• Satisfaction

Five Components of Usability:

yellow

In-your-face ___ should be used with caution

Orange

The new red, warm without danger

Orange

Associated with energy (drinks, sports, fitness)

Red

Prompts action, increases breathing, and pulse

Red

Symbolizes passion and is ideal for fashion/makeup brand, dating, and food

Purple

Spans a large female demographic and has no negative associations

Black

Excellence and formality

Green

Ideal for health products, ethical campaigns

Popular blue, Darker blues, Lighter blues

_____ suggests intelligence and serenity; _____ are associated with luxury products; ______ are for refreshing products and ideas

Blue

Suppresses appetite, so not good for food

Pink

Often over-used to attract the attention of female users

Pink

It's also known to stimulate the sweet tooth

White

Pure, cool, calm, and modern

Brown

Most people avoid this color

Brown

Evokes nature and denotes dependability