j105 web design
DESCRIPTION
Intro to web design for J105 at Drake University, Fall 2010.TRANSCRIPT
![Page 1: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/1.jpg)
Web DesignJMC105 | Fall 2010
![Page 2: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/2.jpg)
Think about your favorite web sites.
How do you use the sites?
What stands out about their design?
![Page 3: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/3.jpg)
![Page 4: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/4.jpg)
![Page 5: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/5.jpg)
![Page 6: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/6.jpg)
![Page 7: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/7.jpg)
Principles of web design
• Keep it simple
• Communicate, don’t decorate
• First priority is the user experience
![Page 8: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/8.jpg)
Keep it simple
• Occam’s Razor
• Given any two solutions to the same problem, all other things being equal, the simplest solution is the best.
![Page 9: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/9.jpg)
![Page 10: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/10.jpg)
![Page 11: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/11.jpg)
Communicate, don’t decorate
• Design is not about decoration.
• Design is about discipline – creating communication with a purpose.
• Design the content, not the box its in.
![Page 12: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/12.jpg)
![Page 13: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/13.jpg)
![Page 14: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/14.jpg)
How people read web sites
• They move quickly, because people don’t like looking at a screen
• They are impatient, often clicking on the first promising link
• They scan, don’t read
![Page 15: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/15.jpg)
What that means?
• You must design for the way people use the web, not the way we think they should
• Think about your new visitors and your regular visitors
• Keep as much content as possible above the scroll
![Page 16: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/16.jpg)
Readability
• We must go out of our way to make text readable online.
• Use shorter line lengths where possible - and never let type run the entire width of the page.
• Choose type faces based on readability.
![Page 17: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/17.jpg)
Findability
• Make sure your site is indexed properly in search engines
• Use keywords on your site - in title, in H1 tags and in body of your site
• We will discuss Search Engine Optimization (SEO) more later this semester
![Page 18: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/18.jpg)
Usability
• Usability: How easy it is to use a web site’s interface
• Make sure readers can find what they are looking for - news, airline tickets, friends on facebook
• Make sure readers understand how your site is supposed to function
• Do usability testing
![Page 19: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/19.jpg)
![Page 20: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/20.jpg)
CRAP• Contrast, Repetition, Alignment, Proximity
• Repetition is most important
• Repeat certain visual elements on every page of your web site.
• This helps readers know that they are still on your site, and it provides unity and continuity.
![Page 21: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/21.jpg)
Grids
• Standard web site is 960 pixels with either 12 or 16 columns.
• Each column has 10 pixels of margin on the left and right, making 20-pixel wide gutters between columns.
• 960 grid is not required, but using a grid will help your overall design.
![Page 22: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/22.jpg)
![Page 23: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/23.jpg)
![Page 24: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/24.jpg)
Standard ad sizes
• 4 sizes publishers have agreed to support.
• 300 x 250 (medium rectangle)
• 180 x 150 (rectangle)
• 160 x 600 (skyscraper)
• 728 x 90 (leaderboard)
![Page 25: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/25.jpg)
![Page 26: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/26.jpg)
Site architectureBasic web site structures
![Page 27: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/27.jpg)
Flat
All of the pages are arranged as peers – and all accessible from each other. Common for sites with few topics (home, about us, contact us, products).
![Page 28: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/28.jpg)
Index
Like the flat structure, with an additional list of contents. An example would be
the A-Z directory at drake.edu.
![Page 29: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/29.jpg)
Site hierarchy
A structure where you can only access a lower-level page via its parent.
Example: News sites sports and entertainment areas.
![Page 30: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/30.jpg)
Multi-dimensional hierarchy
There are many ways of browsing to the same content. The structure of the content can be different
depending on the mode you’re looking in.Example: Amazon.com, which has multiple ways you
might reach the book you are looking for.
![Page 31: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/31.jpg)
Current web trends• Simple layout
• Centered content
• Design the content, not the page
• 3D effects, but used sparingly
• Soft, neutral background colors
• Strong color, used sparingly
• Plenty of white space
![Page 32: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/32.jpg)
Centered orientation
![Page 33: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/33.jpg)
3-D effects, but used sparingly
![Page 34: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/34.jpg)
Strong color, used sparingly
![Page 35: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/35.jpg)
Plenty of white space
![Page 36: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/36.jpg)
Before and after - what improvements do you see?
![Page 37: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/37.jpg)
Web site architecture: Terms to know
![Page 38: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/38.jpg)
Horizontal navigation
![Page 39: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/39.jpg)
Vertical navigation
![Page 40: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/40.jpg)
Tab
![Page 41: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/41.jpg)
Navigation bar with reveal dropdown
![Page 42: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/42.jpg)
Breadcrumb trail
![Page 43: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/43.jpg)
Paging
![Page 44: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/44.jpg)
Design process
Sketch/Wireframes
Photoshop Mockup
Before you start coding
To share with client
![Page 45: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/45.jpg)
How to analyze a web site
![Page 46: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/46.jpg)
Overall questions
• Who is the audience?
• What is the purpose of the site? The message?
• Does the site achieve its purpose?
![Page 47: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/47.jpg)
Usability
• Links make sense, are helpful and work.
• Well-organized. Logical structure.
• Easy to navigate to pages, return home.
• Reasonably short download time.
![Page 48: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/48.jpg)
Design
• Immediately recognizable brand.
• Simple is best.
• Consistency of design across site.
• Readability: caps/lowercase used appropriately, color isn’t intrusive, typeface easy to read, white space used attractively.
• Looks professional.
![Page 49: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/49.jpg)
Content• Error-free and interesting.
• Ads aren’t intrusive/annoying.
• Appropriate use of moving images, video, sound, photos, graphics.
• Elements compliment each other (visuals, type).
• Appropriate voice/style of writing for the audience.
![Page 50: J105 Web Design](https://reader034.vdocument.in/reader034/viewer/2022051608/545403c5b1af9f84228b48cc/html5/thumbnails/50.jpg)
ENDSources: webdesignfromscratch.com, wikipedia