Скачать презентацию WEB DESIGN Define Web Design Good web Скачать презентацию WEB DESIGN Define Web Design Good web

ba6392bb1efb3808cfb910012fcc2cc7.ppt

  • Количество слайдов: 77

WEB DESIGN WEB DESIGN

Define Web Design Good web design is more than creating pretty pages. Involves concepts 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.

Definition Web Design is a multidisciplinary field, influenced by: library science graphic design programming 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.

Definition Web Design influenced by recent fields… Interaction design (Ix. D), User Experience design Definition Web Design influenced by recent fields… Interaction design (Ix. D), User Experience design (UXD), and User Interface design (UID)

Definition …multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but 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.

Web Design | Components Web design & development has many components: Visual (graphic) design Web Design | Components Web design & development has many components: Visual (graphic) design User interface and experience design, usability Web document and style sheet production (HTML & CSS) Scripting and programming (JS, j. Query, PHP, JAVA, etc. ) Content strategy Multimedia

Define Web Design At it’s core, design is all about visual communication. To be 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)

DON’T MAKE ME THING Eliminate questions DON’T MAKE ME THING Eliminate questions

Krug’s Thoughts Truth about the right way to design Web sites… there It’s is Krug’s Thoughts Truth about the right way to design Web sites… there It’s is no RIGHT way to design sites. a complicated process and the right answer to most of the questions people ask is “it depends” Steve Krug, 2006

Krug’s Thoughts 1. Don’t make me think. If its hard to use, we just Krug’s Thoughts 1. Don’t make me think. If its hard to use, we just don’t use it as much. 2. 3. 4. 5. A page should be self-evident People don’t read - they scan pages We satisfice Use Conventions

Krug’s Thoughts Page should be immediately self-evident, purpose must be obvious. Pages have to 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.

Directions say, follow Hillrise until you get to… Directions say, follow Hillrise until you get to…

Buy boots? This is women’s boots Buy boots? This is women’s boots

Eliminate as many questions as possible. Web ID? How are these items different? Eliminate as many questions as possible. Web ID? How are these items different?

Krug’s Thoughts People don’t read they scan pages Krug’s Thoughts People don’t read they scan pages

We design for this. . . We design for this. . .

We think people read like this. . . so we design for it. We think people read like this. . . so we design for it.

But they probably read like this… But they probably read like this…

F-Shaped Pattern For Reading Web Content Eyetracking visualizations show that users often read Web F-Shaped Pattern For Reading Web Content Eyetracking visualizations show that users often read Web pages in an Fshaped pattern: two horizontal stripes followed by a vertical stripe. (Nielsen) Source: http: //www. useit. com/alertbox/reading_pattern. html

Krug’s Thoughts We satisfice – people often don’t make the best, most logical choices 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!

Krug’s Thoughts Navigation isn’t just a feature of a web site, it is the Krug’s Thoughts Navigation isn’t just a feature of a web site, it is the web site. Without it, there’s no there. —Steve Krug

Use Conventions: All web navigation must answer these questions: Where am I? What’s here? 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?

Krug’s Thoughts Proximity to Pull-down suggests search functions in a similar manner http: //www. Krug’s Thoughts Proximity to Pull-down suggests search functions in a similar manner http: //www. iit. edu/arch/ Use expected conventions – deviating from them can be problematic.

Where users expect to find standard page components Shaikh & Lenz, 2006 Source: http: Where users expect to find standard page components Shaikh & Lenz, 2006 Source: http: //webstyleguide. com/wsg 3/3 -information-architecture/4 -presenting-information. html

Lynch & Horton, Web Style Guide, http: //webstyleguide. com/wsg 3/6 -page-structure/3 -site-design. html Lynch & Horton, Web Style Guide, http: //webstyleguide. com/wsg 3/6 -page-structure/3 -site-design. html

IT’S ALSO ABOUT AESTHETICS IT’S ALSO ABOUT AESTHETICS

Beautiful web design Aesthetically pleasing objects appear more effective to the user because of 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/

Aesthetically pleasing objects appear more effective to the user because of their appeal. Aesthetically pleasing objects appear more effective to the user because of their appeal.

Fifty Ugliest Cars of the Past 50 Years http: //images. businessweek. com/ss/09/10/1028_50_ugliest_cars_of_past_50_years/7. htm Aesthetically Fifty Ugliest Cars of the Past 50 Years http: //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. 100 Most Beautiful Cars of All Time http: //www. edmunds. com/car-reviews/features/100 -most-beautiful-cars-ever-made. html

Aesthetics play powerful role in shaping how we come to know, feel, respond. In 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

Aesthetics play powerful role in shaping how we come to know, feel, respond. In 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

Aesthetics play powerful role in shaping how we come to know and respond. This Aesthetics play powerful role in shaping how we come to know and respond. 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 In Defense of Eye Candy by Stephen P. Anderson April 21, 2009 http: //alistapart. com/article/indefenseofeyecandy

Aesthetics play powerful role in shaping how we come to know and respond. The Aesthetics play powerful role in shaping how we come to know and respond. The aesthetic of this door tells a lot about how to use it.

The door affords the act of pushing. We know to push outward by looking The door affords the act of pushing. We know to push outward by looking at it. It signals where it should be pushed. Clues about functionality Affordance! The design of the control tells us how to use it

Aesthetics play powerful role in shaping how we come to know and respond. The Aesthetics play powerful role in shaping how we come to know and respond. The aesthetic of these controls tells a lot about how to use them.

SITE EXAMPLES | THEN AND NOW SITE EXAMPLES | THEN AND NOW

Web Design Of The Year 2000 www. topdesignmag. com/web-design-of-the-year-2000/ Web Design Of The Year 2000 www. topdesignmag. com/web-design-of-the-year-2000/

Web Design Of The Year 2000 www. topdesignmag. com/web-design-of-the-year-2000/ Web Design Of The Year 2000 www. topdesignmag. com/web-design-of-the-year-2000/

Web Design Of The Year 2000 www. topdesignmag. com/web-design-of-the-year-2000/ Web Design Of The Year 2000 www. topdesignmag. com/web-design-of-the-year-2000/

Best of Web Design in 2012 webdesignledger. com/inspiration/best-of-web-design-in-2012 Best of Web Design in 2012 webdesignledger. com/inspiration/best-of-web-design-in-2012

Best of Web Design in 2012 webdesignledger. com/inspiration/best-of-web-design-in-2012 Best of Web Design in 2012 webdesignledger. com/inspiration/best-of-web-design-in-2012

Best of Web Design in 2012 webdesignledger. com/inspiration/best-of-web-design-in-2012 Best of Web Design in 2012 webdesignledger. com/inspiration/best-of-web-design-in-2012

Differences: • Images • Imagery/realism • Typography • Dimension, scale • Color • Texture Differences: • Images • Imagery/realism • Typography • Dimension, scale • Color • Texture • Central dominance • Text density

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Useful sites http: //mattkersley. com/responsive/ http: //ipadpeek. com/ Useful sites http: //mattkersley. com/responsive/ http: //ipadpeek. com/

TRENDS TRENDS

Trends Content is king. Interface plays a supporting role. Increased use of Mobile devices Trends Content is king. Interface plays a supporting role. Increased use of Mobile devices i. OS 7 UI never competes with content – supports it.

Trends Content is king. Interface plays a supporting role. Increased use of Mobile devices Trends Content is king. Interface plays a supporting role. Increased use of Mobile devices Single page navigation (EX 1) (EX 2) (EX 3)(EX 4) Responsive Web Design RWD becoming norm (EX 1) (EX 2)(EX 3) Large type | typography | simplicity, legibility and objectivity – Swiss design style influence Creative navigation (Ex 1) (EX 2) (50 Creative Nav Sites)

Examine a variety of designs Useful sites on CSS and Design: . net best Examine a variety of designs Useful sites on CSS and Design: . net best uses of CSS http: //www. netmagazine. com/features/top-20 -css-sites-2012 Zen Garden: http: //www. csszengarden. com/

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Web Design: Responsive Web Design: Responsive

Examine a variety of designs | CSS • CSS 3 features: http: //tapbots. com/ Examine a variety of designs | CSS • CSS 3 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/

A FEW DESIGN CONCEPTS A FEW DESIGN CONCEPTS

Size and hierarchy – bigger is important and gets attention Size and hierarchy – bigger is important and gets attention

Color- schemes (e. g. , Greyscale With Bright Accents). Few colors to attract attention, Color- schemes (e. g. , Greyscale With Bright Accents). Few colors to attract attention, to differentiate important information and elements.

Contrast shows relative important. Dramatic shifts in text-size or color will impart a message Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different. Contrast - Color Contrast - Size

Alignment - creates order between elements. Alignment - creates order between elements.

Alignment - creates order between elements. Information in columns is distinct. Alignment - creates order between elements. Information in columns is distinct.

Alignment – use a grid (e. g. , 960. gs) Alignment – use a grid (e. g. , 960. gs)

Proximity – objects near to one another are related. Separates elements from each other Proximity – objects near to one another are related. Separates elements from each other and creates sub-hierarchies.

DEVELOPMENT STRATEGY DEVELOPMENT STRATEGY

Progressive Enhancement Start with a baseline experience that makes the content or functionality available 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…

Progressive Enhancement 1. Authoring strategy HTML document written in logical order. Elements marked up Progressive Enhancement 1. Authoring strategy HTML document written in logical order. Elements marked up in a meaningfully – semantic markup. Document is usable on the widest range of devices Clean HTML document with elements accurately and thoroughly described.

Progressive Enhancement 2. CSS Styling strategy Create layers of experience by taking advantage of Progressive Enhancement 2. CSS Styling strategy Create layers of experience by taking advantage of the way browsers use style sheet rules. E. g. , Write style rules for enhanced and unenhanced browsers.

Progressive Enhancement 3. Scripting strategy Java. Script scripting language that makes web pages interactive Progressive Enhancement 3. Scripting strategy Java. Script scripting language that makes web pages interactive and dynamic. Make sure basic functionality is intact even when Java. Script is off.

Site Performance Users expect a site to load in under two seconds, will leave 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).

Site Performance Akamai (2009) 47% expect a page to load in 2 seconds or 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

Site Performance: What you can do. 1. 2. 3. 4. 5. Optimize images - Site Performance: What you can do. 1. 2. 3. 4. 5. Optimize images - small file size without sacrificing quality. Minimize HTML/CSS documents - remove extra characters and line returns. Keep Java. Script to minimum. Don’t load unnecessary assets (i. e. , images, JS libraries). Reduce HTTP requests - number of times the browser makes requests of the server.

Assets: http: //www. jma. duq. edu/users/gibbsw/pub/a_jma 501/ Assets: http: //www. jma. duq. edu/users/gibbsw/pub/a_jma 501/