Web Design Chapter 3 Typography and Web Site Design May 2007PvT EBUS325 CTU1.
WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves...
-
Upload
loraine-johns -
Category
Documents
-
view
215 -
download
0
Transcript of WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves...
![Page 1: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/1.jpg)
WEBWEBDESIGN DESIGN
![Page 2: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/2.jpg)
Define Web Design
Good web design is more than creating pretty pages.
Involves concepts of color theory typography layout , and usability - all part of a good design.
![Page 3: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/3.jpg)
Definition Web Design is a multidisciplinary field,
influenced by: library science graphic design programming networking user interface design usability human computer interaction User experience design psychology
and a host of other fields.
![Page 4: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/4.jpg)
Definition
Web Design influenced by recent fields… Interaction design (IxD), User Experience design (UXD), and User Interface design (UID)
![Page 5: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/5.jpg)
Definition
…multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but not limited to,
technical development information structure, visual design, and networked delivery.
Powerll, T.
![Page 6: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/6.jpg)
Web Design | Components
Web design & development has many components:Visual (graphic) designUser interface and experience design, usabilityWeb document and style sheet production (HTML & CSS)Scripting and programming (JS, jQuery, PHP, JAVA, etc.)Content strategyMultimedia
![Page 7: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/7.jpg)
Define Web Design
At it’s core, design is all about visual communication.
To be an effective designer, you have to be able to clearly communicate your ideas to users or else lose their attention. (Jones, 2011)
![Page 8: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/8.jpg)
DON’T MAKE ME THING
Eliminate questions
![Page 9: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/9.jpg)
Krug’s Thoughts
Truth about the right way to design Web sites…
there is no RIGHT way to design sites.
It’s a complicated process and the right answer to most of the questions people ask is “it depends”
Steve Krug, 2006
![Page 10: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/10.jpg)
Krug’s Thoughts
1. Don’t make me think. If its hard to use, we just don’t use it as
much.
2. A page should be self-evident3. People don’t read - they scan pages4. We satisfice5. Use Conventions
![Page 11: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/11.jpg)
Krug’s Thoughts
Page should be immediately self-evident, purpose must be obvious.
Pages have to work at a glance. Eliminate as many questions as
possible.
![Page 12: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/12.jpg)
Directions say, follow Hillrise
until you get to…
![Page 13: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/13.jpg)
Buy boots?
This is women’s boots
![Page 14: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/14.jpg)
Eliminate as many questions as possible.
Web ID?
How are these items different?
![Page 15: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/15.jpg)
Krug’s Thoughts
People don’t read they scan pages
![Page 16: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/16.jpg)
We design for this...
![Page 17: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/17.jpg)
We think people read like this...so we design for it.
![Page 18: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/18.jpg)
But they probably read like this…
![Page 19: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/19.jpg)
F-Shaped Pattern For Reading Web ContentEyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
(Nielsen)
Source: http://www.useit.com/alertbox/reading_pattern.html
![Page 20: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/20.jpg)
Krug’s Thoughts
We satisfice – people often don’t make the best, most logical choices – they do what works for them.
How much effort will users put into learning your interface? Not much? They don’t care about your design!
![Page 21: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/21.jpg)
Krug’s Thoughts
Navigation isn’t just a feature of a web site, it is the web site. Without it, there’s no there there.
—Steve Krug
![Page 22: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/22.jpg)
Use Conventions: All web navigation must answer these questions: Where am I? What’s here? Where have I been? Where can I go next? Where's the Home Page? What’s most important?
![Page 23: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/23.jpg)
Proximity to Pull-down suggests search functions in a similar manner
http://www.iit.edu/arch/
Krug’s Thoughts
Use expected conventions – deviating from them can be problematic.
![Page 24: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/24.jpg)
Source: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Where users expect to find standard page components
Shaikh & Lenz, 2006
![Page 25: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/25.jpg)
Lynch & Horton, Web Style Guide, http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
![Page 26: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/26.jpg)
IT’S ALSO ABOUT AESTHETICS
![Page 27: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/27.jpg)
Beautiful web design
Aesthetically pleasing objects appear more effective to the user because of their appeal.
Don Norman, Emotional Design
Source: http://thevisualcommunicationguy.com/2013/06/20/design-principle-aesthetic-usability-effect/
![Page 28: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/28.jpg)
Aesthetically pleasing objects appear more effective to the user because of their appeal.
![Page 29: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/29.jpg)
100 Most Beautiful Cars of All Timehttp://www.edmunds.com/car-reviews/features/100-most-beautiful-cars-ever-made.html
Fifty Ugliest Cars of the Past 50 Yearshttp://images.businessweek.com/ss/09/10/1028_50_ugliest_cars_of_past_50_years/7.htm
Aesthetically pleasing objects appear more effective to the user because of their appeal.
![Page 30: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/30.jpg)
Aesthetics play powerful role in shaping how we come to know, feel, respond.
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
![Page 31: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/31.jpg)
Aesthetics play powerful role in shaping how we come to know, feel, respond.
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
![Page 32: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/32.jpg)
Aesthetics play powerful role in shaping how we come to know and respond.
In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http://alistapart.com/article/indefenseofeyecandy
This suggest, I’m a box on a
page
This suggest I’m a button –
click me
This suggest, a house
This suggest click to go
home
![Page 33: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/33.jpg)
The aesthetic of this door tells a lot about how to use it.
Aesthetics play powerful role in shaping how we come to know and respond.
![Page 34: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/34.jpg)
The design of the control tells us how to use it
The door affords the act of pushing. We know to push outward by looking at it.
Affordance!
Clues about functionality
It signals where it should be pushed.
![Page 35: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/35.jpg)
The aesthetic of these controls tells a lot about how to use them.
Aesthetics play powerful role in shaping how we come to know and respond.
![Page 36: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/36.jpg)
SITE EXAMPLES | THEN AND NOW
![Page 37: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/37.jpg)
Web Design Of The Year 2000www.topdesignmag.com/web-design-of-the-year-2000/
![Page 38: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/38.jpg)
Web Design Of The Year 2000www.topdesignmag.com/web-design-of-the-year-2000/
![Page 39: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/39.jpg)
Web Design Of The Year 2000www.topdesignmag.com/web-design-of-the-year-2000/
![Page 40: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/40.jpg)
Best of Web Design in 2012webdesignledger.com/inspiration/best-of-web-design-in-2012
![Page 41: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/41.jpg)
Best of Web Design in 2012webdesignledger.com/inspiration/best-of-web-design-in-2012
![Page 42: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/42.jpg)
Best of Web Design in 2012webdesignledger.com/inspiration/best-of-web-design-in-2012
![Page 43: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/43.jpg)
![Page 44: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/44.jpg)
Differences:•Images•Imagery/realism•Typography•Dimension, scale •Color•Texture•Central dominance •Text density
![Page 51: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/51.jpg)
Useful sites
http://mattkersley.com/responsive/
http://ipadpeek.com/
![Page 52: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/52.jpg)
TRENDS
![Page 53: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/53.jpg)
Trends
Content is king. Interface plays a supporting role. Increased use of Mobile devices
iOS 7 UI never competes with content – supports it.
![Page 54: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/54.jpg)
Trends
Content is king. Interface plays a supporting role.
Increased use of Mobile devices Single page navigation (EX1) (EX2) (EX3)
(EX4) Responsive Web Design RWD becoming
norm (EX1) (EX2)(EX3) Large type | typography | simplicity, legibility
and objectivity – Swiss design style influence Creative navigation (Ex1) (EX2) (50 Creative
Nav Sites)
![Page 55: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/55.jpg)
Examine a variety of designs
http://www.netmagazine.com/features/top-20-css-sites-2012
Zen Garden: http://www.csszengarden.com/
Useful sites on CSS and Design: .net best uses of CSS
![Page 56: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/56.jpg)
Web Design: Responsive
![Page 57: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/57.jpg)
Web Design: Responsive
![Page 58: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/58.jpg)
Web Design: Responsive
![Page 59: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/59.jpg)
Web Design: Responsive
![Page 60: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/60.jpg)
Examine a variety of designs | CSS
CSS
•CSS3 features: http://tapbots.com/ (Fixed)
•Veerle Pieters: http://veerle.duoh.com/design (Fixed)
Responsive:
•http://www.stuffandnonsense.co.uk/design
•http://www.netmagazine.com/features/top-25-responsive-design-tools
•http://www.awwwards.com/websites/responsive-design/
![Page 61: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/61.jpg)
A FEW DESIGN CONCEPTS
![Page 62: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/62.jpg)
Size and hierarchy – bigger is important and gets attention
![Page 63: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/63.jpg)
Color- schemes (e.g., Greyscale With Bright Accents). Few colors to attract attention, to differentiate important information and elements.
![Page 64: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/64.jpg)
Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different.
Contrast - Color Contrast - Size
![Page 65: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/65.jpg)
Alignment - creates order between elements.
![Page 66: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/66.jpg)
Alignment - creates order between elements.
Information in columns is distinct.
![Page 67: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/67.jpg)
Alignment – use a grid (e.g., 960.gs)
![Page 68: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/68.jpg)
Proximity – objects near to one another are related. Separates elements from each other and creates sub-hierarchies.
![Page 69: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/69.jpg)
DEVELOPMENT STRATEGY
![Page 70: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/70.jpg)
Progressive Enhancement
Start with a baseline experience that makes the content or functionality available to most rudimentary browsers or assistive devices.
From there, you layer on more advanced features for the browsers that can handle them.
Working from content out…
![Page 71: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/71.jpg)
Progressive Enhancement
1. Authoring strategyHTML document written in logical order.Elements marked up in a meaningfully – semantic markup.Document is usable on the widest range of devicesClean HTML document with elements accurately and thoroughly described.
![Page 72: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/72.jpg)
Progressive Enhancement
2. CSS Styling strategyCreate layers of experience by taking advantage of the way browsers use style sheet rules.
E.g., Write style rules for enhanced and unenhanced browsers.
![Page 73: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/73.jpg)
Progressive Enhancement
3. Scripting strategyJavaScript scripting language that makes web pages interactive and dynamic.
Make sure basic functionality is intact even when JavaScript is off.
![Page 74: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/74.jpg)
Site Performance
Users expect a site to load in under two seconds, will leave your site for another if it doesn’t (Robbins, 2012).
Tolerable wait times have decreased to just 2 seconds (Fiona Fui-Hoon Nah).
![Page 75: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/75.jpg)
Site Performance
Akamai (2009)47% expect a page to load in 2 seconds or less.40% abandon page if takes more than 3 seconds to load.52% of online shoppers claim quick page loads are important for their loyalty.
http://munchweb.com/effect-of-website-speed
![Page 76: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/76.jpg)
Site Performance: What you can do.
1. Optimize images - small file size without sacrificing quality.
2. Minimize HTML/CSS documents - remove extra characters and line returns.
3. Keep JavaScript to minimum.4. Don’t load unnecessary assets (i.e., images,
JS libraries).5. Reduce HTTP requests - number of times
the browser makes requests of the server.
![Page 77: WEB DESIGN. Define Web Design Good web design is more than creating pretty pages. Involves concepts of color theory typography layout, and](https://reader038.fdocuments.us/reader038/viewer/2022110209/56649e355503460f94b246f9/html5/thumbnails/77.jpg)
Assets: http://www.jma.duq.edu/users/gibbsw/pub/a_jma501/