Beautiful Web Design

The principles of

Abdel Moneim Emad

16 August 2014

IntroductionPrinciplesLayoutColorTypographyImagery

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 Machinehttp://archive.org/web/No flashy Photoshop filtersNo trendy image treatmentsGood Design transcends TechnologyFine tuning the details made a world of differences

4

Design Process Steps

Discovery (Requirement Gathering)

Exploration (Analysis)

Implementation

5

Discovery – First time Website Design1. 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-Design1. 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

Exploration1. Put yourself in the shoes of the website visitors2. 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 options6. Avoid too deeply nesting, too many clicks away from the home

page

8

Information Architecture

9

ImplementationUsers are pleased by the design but drawn to the content

10

ImplementationUsers can move about easily via intuitive navigation

11

ImplementationUsers 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 lower99% are 1024 x 768 or higher

Visitors

800 x 600 or lower 1024 x 768 1366 x 768 1280 x 8001280 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 pressureStimulate MetabolismPromote PassionExciting, DramaticColor of LoveUsed for Error signs

26

Color Association - ORANGE

Very Active & EnergeticPromote HappinessRepresent Sunshine & CreativityMore informal and less corporate-feeling color than redDoesn’t show up often in nature, so it jumps outUsed for Life Jackets, Road Cones and WARNING signsStimulate Metabolism & AppetiteIdeal for promoting Food & Cooking products

27

Color Association - YELLOW

Active & Highly VisibleUsed for Taxi Cabs & CAUTION signsThe signature color of SmileysEnergetic

28

Color Association - GREEN

Associated with nature and environmental protectionMuch easier on eyes, and far less dynamic than yellow and redUsed with black background for monochromic console displaysCan represent wealth, stability and educationPromote Growth, freshness and hope

29

Color Association - BLUEHas universal appeal because of its association with the sky and the seaAssociated with intelligence and opennessHas calming effectPromote cold and silenceReduce appetite, due to rarity of blue in real foodNot ideal for promoting food productsIdeal for Airlines, Air Conditioning and marinesThe primary color in the logos of IBM, HP, Microsoft and DELL

30

31

Color Association - PURPLEAssociated with Royalty & PowerPrestige & WealthHas universal appeal because of its association with flowersBalances the stimulation of RED and the calming effect of BLUEOne 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 - WHITEPromotes the idea of Clean Power (Wind Turbines)Color of perfection, light, cleanness, and purityUsed in detergent commercialsIn Chinese culture, white is a color traditionally

associated with deathYou can put white background block on an off-white canvas

33

Color Association - BLACKAssociated with Elegance, Strength & PowerAssociated with Death, Fear and EvilJames 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 webColors are displayed in percentage of RED, GREEN and BLUE100% (RED + GREEN + BLUE) = 100% WHITEFound in all electronic devices’ displays

CMYK is an subtractive color model designed for print100% ( CYAN + MAGENTA+ YELLOW) = GRAYISH BLACKThis is why they are always supplemented with BLACKFound in Ink-jet, Laser jet and industrial four-colors printers

RGB vs. CMYK

Traditional vs. CMYK Color Wheel

Color Schemes

41

MonochromaticAnalogousComplementarysplit complementaryTriadicTetradic (also called double complementary)

Color Schemes

42

Monochromatic

Color Schemes

43

AnalogousSingle Pizza slice

Color Schemes

44

ComplementaryOpposite colors

Common Complementary Pitfalls

45

Can be horribly painfulForeground / BackgroundNot 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 thesame way again.

The study of typography is one that draws many people in ... and never lets them go.

Anatomy of a Letterform

50

1. Baseline2. Cap height3. Crossbar4. Serif5. Mean line6. Bowl7. 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 Fonts2. Sans-serif Fonts3. Handwritten Fonts4.Fixed-width Fonts (Console, ASCII arts)5. Novelty Fonts6. 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 systemsis very small.

This list of nine font families is commonly known as the safe list.

Typography in the web

53

Web fonts with @font-faceProblems:- 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.