There are strong parallels between designing a room’s decor and designing a good website This presentation is for anyone have passion to learn how to design awesome and great looking websites I tried to put examples from my readings and my personal experience in that field since 2004

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

2. Introduction
Principles
Layout
Color
Typography
Imagery
2

3. 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

4. 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

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

6. 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

7. 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

8. 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

9. Information Architecture
9

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

11. Implementation
Users can move about easily via intuitive navigation
11

12. Implementation
Users recognize each page as belonging to the site
12

13. Principles - Unity
13

14. Principles - Balance
14

15. Principles - Proximity
15

16. Principles - Contrast
16

17. Web Page Anatomy
17

18. Grid Theory – The Golden Ratio
18

19. Grid Theory – The Rule of Thirds
19

20. 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

21. Resizing – Fixed vs. Fluid Layout
21

22. Resizing – Fixed vs. Fluid Layout
22

23. Resizing Alternative – Responsive Layout
23

24. 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

25. 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

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

27. 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

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

29. 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

30. 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. 31

32. 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

33. 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

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

35. Color Temperature
35

36. 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.

37. 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.

38. 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

39. RGB vs. CMYK

40. Traditional vs. CMYK Color Wheel

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

42. Color Schemes
42
Monochromatic

43. Color Schemes
43
Analogous
Single Pizza slice

44. Color Schemes
44
Complementary
Opposite colors

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

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

47. Reading your customer’s mind
47
What our customer chose

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

49. 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.

50. 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.

51. 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)

52. 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.

53. 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

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

55. 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

56. 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

57. 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

58. 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

59. 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.