Beautiful Web Design
The principles of
Abdel Moneim Emad
16 August 2014

Introduction
Principles
Layout
Color
Typography
Imagery
2

Removing wallpaper is a tough job, but it’s even more difficult
when there are multiple layers of the stuff
There are strong parallels between designing a room’s decor and
designing a good website
Good design is about the relationships between the elements
involved, and creating a balance between them
3

Fads come and go, but good design is timeless
Internet Wayback Machine
http://archive.org/web/
No flashy Photoshop filters
No trendy image treatments
Good Design transcends Technology
Fine tuning the details made a world of differences
4

Design Process Steps
Discovery (Requirement Gathering)
Exploration (Analysis)
Implementation
5

Discovery – First time Website Design
1. What does your company do?
2. Does your company have an existing logo or brand?
3. What is your goal in developing a website?
4. What information do you wish to provide online?
5. Who is your target audience? Do its members share any
common demographics, like age, gender, or a physical location?
6. Who are your competitors and do they have websites?
7. Do you have examples of websites you like or dislike?
8. Timeline vs. Budget
6

Discovery – Existing Website Re-Design
1. What are your visitors usually looking for when they come to
your site? (Service Usage Report)
2. What are the problems with your current website? (Content)
3. What do you hope to achieve with a redesign?
4. Are there any elements of the current site that you want to
keep?
5. How do you think your visitors will react to a new site design?
(Online Survey)
7

Exploration
1. Put yourself in the shoes of the website visitors
2. What is the clearest title possible for page X?
3. How many steps does it take to reach page Y?
4. Information Architecture (Whiteboard + Sticky Notes)
5. Avoid overwhelming the visitors with too many options
6. Avoid too deeply nesting, too many clicks away from the home
page
8

Information Architecture
9

Implementation
Users are pleased by the design but drawn to the content
10

Implementation
Users can move about easily via intuitive navigation
11

Implementation
Users recognize each page as belonging to the site
12

Principles - Unity
13

Principles - Balance
14

Principles - Proximity
15

Principles - Contrast
16

Web Page Anatomy
17

Grid Theory – The Golden Ratio
18

Grid Theory – The Rule of Thirds
19

Grid Theory – 960 Grid Systems
1. Derived from 960px (which
found to be the typical web page
width for a screen resolution of
1024px wide
2. Can be divided into:
2, 3, 4, 5, 6, 8, 10, 12, 15 and 16
20

Resizing – Fixed vs. Fluid Layout
21

Resizing – Fixed vs. Fluid Layout
22

Resizing Alternative – Responsive Layout
23

Screen Resolutions
1% of visitors are 800 x 600 or lower
99% are 1024 x 768 or higher
Visitors
800 x 600 or lower 1024 x 768 1366 x 768 1280 x 800 1280 x 1024 1920 x 1080 Higher
24

The Psychology of Color
Most modern displays can render more than 16 million colors
E-commerce website owners want to know which color will
make their website visitors spend more money
Fast-food restaurant owners are dying to know which color
combinations will make you want to super-size your meal
25

Color Association - RED
Stimulate adrenaline and blood pressure
Stimulate Metabolism
Promote Passion
Exciting, Dramatic
Color of Love
Used for Error signs
26

Color Association - ORANGE
Very Active & Energetic
Promote Happiness
Represent Sunshine & Creativity
More informal and less corporate-feeling color than red
Doesn’t show up often in nature, so it jumps out
Used for Life Jackets, Road Cones and WARNING signs
Stimulate Metabolism & Appetite
Ideal for promoting Food & Cooking products
27

Color Association -
Active & Highly Visible
Used for Taxi Cabs & CAUTION signs
The signature color of Smileys
Energetic
28

Color Association - GREEN
Associated with nature and environmental protection
Much easier on eyes, and far less dynamic than yellow and red
Used with black background for monochromic console displays
Can represent wealth, stability and education
Promote Growth, freshness and hope
29

Color Association - BLUE
Has universal appeal because of its association with the sky and
the sea
Associated with intelligence and openness
Has calming effect
Promote cold and silence
Reduce appetite, due to rarity of blue in real food
Not ideal for promoting food products
Ideal for Airlines, Air Conditioning and marines
The primary color in the logos of IBM, HP, Microsoft and DELL
30

31

Color Association - PURPLE
Associated with Royalty & Power
Prestige & Wealth
Has universal appeal because of its association with flowers
Balances the stimulation of RED and the calming effect of BLUE
One of the least used color in web design
If you’re trying to create a website design that stands out from
the crowd, think about using a rich shade of purple
32

Color Association -
Promotes the idea of Clean Power (Wind Turbines)
Color of perfection, light, cleanness, and purity
Used in detergent commercials
In Chinese culture, white is a color traditionally
associated with death
You can put white background block on an off-white canvas
33

Color Association - BLACK
Associated with Elegance, Strength & Power
Associated with Death, Fear and Evil
James Bond, Batman, Tuxedos and Mobile Phones
34

Color Temperature
35

Chromatic Value
36
The measure of the lightness or darkness of a color is
known as its chromatic value.
Adding white to a color creates a tint of that color.
Adding black to a color creates a shade of that color.

Saturation
37
The strength or purity of the color.
Even though cool colors tend to recede, a vivid blue
will draw more attention to itself than a dull orange.

RGB vs. CMYK
38
RGB is an additive color model designed for web
Colors are displayed in percentage of RED, GREEN and BLUE
100% (RED + GREEN + BLUE) = 100% WHITE
Found in all electronic devices’ displays
CMYK is an subtractive color model designed for print
100% ( CYAN + MAGENTA+ YELLOW) = GRAYISH BLACK
This is why they are always supplemented with BLACK
Found in Ink-jet, Laser jet and industrial four-colors printers

RGB vs. CMYK

Traditional vs. CMYK Color Wheel

Color Schemes
41
Monochromatic
Analogous
Complementary
split complementary
Triadic
Tetradic (also called double complementary)

Color Schemes
42
Monochromatic

Color Schemes
43
Analogous
Single Pizza slice

Color Schemes
44
Complementary
Opposite colors

Common Complementary Pitfalls
45
Can be horribly painful
Foreground / Background
Not directly opposite

Reading your customer’s mind
46
What we offered our customer

Reading your customer’s mind
47
What our customer chose

Reading your customer’s mind
48
What our customer chose
And the resulted color schema is:

Typography
49
After studying typography for some time, you’ll never look at a
billboard, brochure, book, or even a restaurant menu the
same way again.
The study of typography is one that draws many people in ... and
never lets them go.

Anatomy of a Letterform
50
1. Baseline
2. Cap height
3. Crossbar
4. Serif
5. Mean line
6. Bowl
7. Descender
The Old-style numerals in the Georgia font on the left, and standard
numerals in Helvetica on the right.

Font Typefaces
51
1. Serif Fonts
2. Sans-serif Fonts
3. Handwritten Fonts
4. Fixed-width Fonts (Console, ASCII arts)
5. Novelty Fonts
6. Dingbat Fonts (Dingbat Fonts)

Typography in the web
52
If you have five, or 5,000 fonts installed; you have to think in terms
of the lowest common denominator.
The number of font families that are supported,
by default, across both major operating systems
is very small.
This list of nine font families is commonly
known as the safe list.

Typography in the web
53
Web fonts with @font-face
Problems:
- Residence from font foundries
- Inconsistencies in supported font formats across browsers
(TTF, OTF, SVG, EOT and WOFF)
Solution:
- Commercial web fonts services: like Typekit, Fontdeck, WebINK
- Free web fonts services: like Google Font Directory
(Creative Commons Licensed Fonts) So, its completely free

Imagery
54
How to impress:
- Take It! (Use your camera)
- Make It! (Use your Photoshop)
- Stock Images (Commercial)
- Royalty-Free Images
- Free Images

Imagery
55
How not to impress:
- Google Ganking (Google Images Search engine)
- Hot Linking
<img src="http://www.somesite.com/images/image.jpg" alt="Image Description " />
- Clipart
- Bad Cropping

File Formats & Resolution
56
JPEG / JPG:
- Unlike GIF and PNG images, JPEGs can provide fairly small file
sizes at 24-bit color
- It’s a lossy format that can create visual artifacts depending on
how much you compress the file

File Formats & Resolution
57
GIF:
- An 8-bit format that compresses files on the basis of the number
of colors in the image
- It supports a maximum of only 256 colors
- Transparency
- Animation
- Although the GIF format is still widely used on the Web, using
PNG instead is strongly encouraged

File Formats & Resolution
58
PNG:
- Can be saved in either 8-bit or 24-bit format
- The lossless compression style of the PNG algorithm works
similarly to that of GIF
- Transparency (with 256 alpha levels of opacity)
- Each pixel in a PNG image can have up to 256 different
levels of opacity

Before saying Goodbye, remember that:
59
- The most important attributes you can bring to the design table
are your own personality, experiences, and interests. These
three resources should form the foundations of your design
work.
- Spend less time trying to emulate the latest design trends and
more time defining your own style.
- I hope you’ve found this session to be both helpful and
encouraging as you kick off a career - or hobby - in web design.