principles of graphic design with some background on web 2.0 styles
Post on 19-Dec-2015
216 views
TRANSCRIPT
![Page 1: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/1.jpg)
Principles of Graphic Design
with some background on Web 2.0 styles
![Page 2: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/2.jpg)
The Principles of Graphic Design
• Balance (layout: spacing, alignment, proximity grouping, etc.)
• Unity/Rhythm (repetition)
• Color (complementary and contrast; general rules)
• Emphasis (what gets noticed first)
• Texture (the look and feel of the design)
• Other issues: type (font, size, color, weight, kerning, etc.) and shape (size, use, color, weight, etc.)
![Page 3: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/3.jpg)
Web 2.0 Style Guide• Simplicity = web2.0 means focused, clean, and simple
(deliver more with less)
• (remove unnecessary, don’t decorate, create moods, alternate solutions)
• Central layout = very few are full-screen or left-aligned. There is a need to sit the site straight, front, and center (makes it more bold and honest)
• Fewer columns = 3 is the mainstream max (2 is better). Makes it more bold, simple, and forces you to communicate less info. // Note: each column should have a specific purpose (especially if using 3 columns).
• Separate top sections = the top area is the branding area and main nav area—it needs to be distinct from the main content area. (Increases user knowledge and confidence; it’s bold, clear, informative statement.)
![Page 4: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/4.jpg)
Web 2.0 Style Guide (p2)• Solid areas of screen real-estate: navigation,
background/canvas, main content, other stuff, callouts/cross-links (white space)
• Simple nav: web2.0 makes global nav large, bold, clean, and obvious (differentiate from other links, content, no ambiguity, action-oriented.) Inline links = not underlined (use other ambient identifier).
• Bold logos: clear, bold, strong brand = says “this is who we are.” Make it usable for other contexts (ie. shirts), distinctive, and representative (personality and content)
• Bigger text: now that you have less content, and more white space, use large text (it stands out more, easier to navigate, and scan.
• Bold text introductions: elevator pitch/main message should stand out. (Can leave this one out.)
![Page 5: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/5.jpg)
Web 2.0 Style Guide (p3)• Strong colors: bright, strong colors draw the eye; useful for
dividing the page. Also, helps communicate brand values. *Don’t have too many things attracting the eye or it gets confusing.
• Rich surfaces: 3D, but yes to reflections, drop-shadows, and gradients = things that make visual feel more real, solid, and finished. *Use with care and don’t overdo. Consider consistent light source.
• Gradients: softened areas that would otherwise be flat (re: color and tone). They are a part of drop shadows.
• Reflections: application of gradients (shiny table effect, light reflected on shiny surfaces)
• Cute icons: simple, clean, quirky, richly detailed, more vector based.
• Star flashes: star shaped labels. (Careful = they can cheapen a site).
![Page 6: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/6.jpg)
BalanceSimplicity
Central layout
Fewer columns
Separate top sections
Simple nav
Bold logos
Bigger text
Strong colors
Rich surfaces
Gradients
Reflections
Cute icons
Star flashes
![Page 7: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/7.jpg)
Unity/Rhythm (repetition)
Simplicity
Central layout
Fewer columns
Separate top sections
Simple nav
Bold logos
Bigger text
Strong colors
Rich surfaces
Gradients
Reflections
Cute icons
Star flashes
![Page 8: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/8.jpg)
ColorSimplicity
Central layout
Fewer columns
Separate top sections
Simple nav
Bold logos
Bigger text
Strong colors
Rich surfaces
Gradients
Reflections
Cute icons
Star flashes
![Page 9: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/9.jpg)
EmphasisSimplicity
Central layout
Fewer columns
Separate top sections
Simple nav
Bold logos
Bigger text
Strong colors
Rich surfaces
Gradients
Reflections
Cute icons
Star flashes
![Page 10: Principles of Graphic Design with some background on Web 2.0 styles](https://reader030.vdocuments.mx/reader030/viewer/2022032800/56649d3e5503460f94a1765a/html5/thumbnails/10.jpg)
TextureSimplicity
Central layout
Fewer columns
Separate top sections
Simple nav
Bold logos
Bigger text
Strong colors
Rich surfaces
Gradients
Reflections
Cute icons
Star flashes