beautiful web design
Post on 07-Aug-2015
73 Views
Preview:
TRANSCRIPT
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.
top related