1 / 55

Lecture 2 - Overview

Lecture 2 - Overview. Meaning Planning Web Design Navigation Evaluation Mechanics Web Basics XHTML, CSS, URLs, Color & Image Formats Dreamweaver Introduction Explore Dreamweaver Basics (view also suggested Tutorials & Videos) Demo : Setting Stage & Intro Demo : Tables and Simple CSS

purcellc
Download Presentation

Lecture 2 - Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 2 - Overview • Meaning • Planning • Web Design • Navigation • Evaluation • Mechanics • Web Basics • XHTML, CSS, URLs, Color & Image Formats • Dreamweaver • Introduction • Explore Dreamweaver Basics (view also suggested Tutorials & Videos) • Demo: Setting Stage & Intro • Demo: Tables and Simple CSS • Demo: Set up Local / Remote Site and Setting Permissions Demo slides are not narrated  see Video Demos

  2. Narrative Structures

  3. Planning 1 • Define Web Audience • Who is your target audience? • What do you want the site to accomplish? • Break Site into Categories • Create Outline - Goal, Organization • Create Simple Web Site Plan • Hierarchy & hyperlinks • Use sticky notes or Flowchart

  4. Planning 2 • Collect & Organize Material • Organizing files by folders • Asset folder for images, sounds, videos, animations etc. • Save source files • File Name - lowercase, short, no spaces or special characters • “myinterests” vs. “my_interests” vs. “my interests” • Title web pages • Local Structure = Remote Structure • Same folder and file structure on local & remote machines • Home page = "index.html“ • “index.html” stored in folder “main” • “http::/www.site.com/main/” will display “index” • If home page has different name, then it needs to be named

  5. Web Design Overview • Sources • Steve Krug’s “Don't make me think!” • Alison Head’s “Design Wise” • Yale Web Style Guidelines • Guiding Principles • User Behavior • Basics • Home Page • Lack of Control • Search & Testing

  6. Web Guiding Principles • Diversity of Users & Rapid Change • Diverse users, diverse computers, diverse skills, diverse … • Rapid evolution of technology and expectations • Short attention span • Common Sense • No right way to design • Make it short • More likely to be used and remembered • Don't make me think • Get rid of question marks - each item has clear purpose • Make it work at a glance • People have little time • Support intented task - manage expectations

  7. Web User Behavior

  8. Web User Behavior(cont.)

  9. Web User Behavior(cont.)

  10. Web User Behavior(cont.)

  11. Web User Behavior(cont.)

  12. Web User Behavior(cont.) • Scan pages - don't read them • Look for anything = Search Interest • Decide quickly • Eye-tracking studies • Choose first “reasonable item” • Muddle through • Don't figure out how things work • Resist forming models • Stick to what works

  13. Web Design - Basics  Stay above the fold800 X 600 good

  14. Web Design – Basics (cont.)

  15. Web Design – Basics (cont.)

  16. Web Design – Basics (cont.)

  17. Web Design – Basics (cont.)

  18. Web Design – Basics (cont.) • Design for scanning, not reading • Visual Hierarchy • Visual contrast - size, bold, color • Important things = Visually prominent • Related things = Spatially close, Nested • Avoid “noise" • Leverage Conventions • Clear what's clickable • Use underline and/or color coding • Less is more • Cut ½ of words, then cut ½.

  19. Home Page Design • Home Page • Identity & Mission, Hierarchy, Search, Timely Content, Short-cuts, Registration. • Everybody wants a piece • Answers Easily • What can I do here? • Why should be here? • Where do I start? • Tagline is Important • Clear, informative, concise • Differentiated, clear benefits • Personable, lively, sometimes clever • Problems with Pull-downs • Hard to scan, Twitchy • Have to seek them out

  20. Web Design – Lack of Control • Experience not the same • Limited Control over Web Display • Visual Appearance depends on • Type of computer - Windows vs. Mac • Monitor color resolution • Speed of Internet connection • Browser: Microsoft vs. Firefox vs. Safari - don't support same features • Default font may be different • Styles may differ

  21. Web Design – Search & Testing • Search Options • Confuse and increase chances for failure • Seldom worth the additional cognitive cost • Amazon has no options at first - first experience is successful. • Typical Problems • Users are unclear on the concept • Words users are looking for aren't there • There is too much going on • Great Site requires Testing

  22. Web Site Navigation 1 • "Back" clicked 30-40% • Easy to figure out “You are here” Things at current level Return to higher-levels and home page • Easy search and indexes • Easy feedback • Persistent navigation creates comfort • “Home” and “forms” pages can be exemption

  23. Web Site Navigation 2 • Top-level Navigation • Top Row or Left Column • Icons, image-maps, textual, pull-down • Highlight or colorcurrently selected • To frame or not to frame? • Second-level Navigation • Below Top Line or Left Column • Breadcrumbs • SCILS > Information Library Studies > Courses > Graduate • Novel Navigation Metaphors • TheBrain • Star Tree for FlashKit by Inxight Software

  24. User Behavior – Summary Scan pages - don't read them Look for anything = Search Interest Decide quickly Choose first “reasonable item” Muddle through Don't figure out how things work Resist forming models Stick to what works

  25. Design Implications Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” • Make obvious what you can do on a page • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, Graphics, • Color Coding, Typography

  26. Evaluation Overview • Sources • Krug, S. - "Don't Make Me Think!" • Head, A. - "Design Wise." • Williams, R. & Tollett, J. - "The Non-Designer's Web Book." • Questions • Audience • Task • Navigation • Functionality

  27. Evaluation – Task • Support tasks users need to accomplish? • Support both experienced and inexperienced users? • User expectations meet?

  28. Evaluation – Audience • Who is the site for? Whoare the intended users? • What do users want to accomplish? • What are the needed skills?Good fit with skills of intended users? • What tasks are users trying to accomplish?

  29. Evaluation – Navigation • What site is this? (Site ID) • What page am I on? (Page name) • What are the major sections of this site? • Sections - tabs • What are my options at this level? • Local navigation • Where I am? • "You are here" indicators or breadcrumbs • Easily find your way? back home? other sections? • How can I search?

  30. Evaluation – Navigation (cont.)

  31. Evaluation – Functionality 1 • Instantly understand what site is about? • Understand what you can do? • "Look & feel" enticing? Want to explore? • Main functions easily accessible?Easy to use? • Links clear where they will take you?

  32. Evaluation – Functionality 2 • Instant Visual Hierarchy? • Or visually too busy? • Text easy to read? • Graphics easy to understand? • Large site - site map, index or search? • Help available and useful? • Download times reasonable?

  33. Evaluation – Example & Exercise 1 • Amazon –Evaluation(of earlier version of site, but analysis still applies) • Exercise 1 • Evaluate website of your choice.Choose a site that could serve as a model and/or contain relevant information for your final project. • Be concise and insightful in your evaluations

  34. Mechanics – Web Basics: XHTML • XML = Language for creating other languages • Custom markup language that contains tags for describe the data that they contain. • If a tag identifies the data, then the data becomes available for other tasks. • Not as lenient as HTML. • XHTML = HTML rewritten in XML • XHTML:Keep code Consistent & Well Structured • Use “Transitional” XHTML in Dreamweaver • Allows for the use of deprecated tags • Notation: Dreamweaver = DW

  35. Mechanics – Web Basics: XHTML (cont.) • Body of (X)HTML document encloses Content of Web page. • Required in XHTML: • The head and body tags and Closing </p>tag. •  Dreamweaver includes required tags & declarations. • Naming Elements • id=“name” or class=“name” • Useful with div (content blocks) and span (inline text) elements • Breaking up a Page into Divisions (DIV) • Creating a Line Break: <br /> • Hierarchical Structure of Web pages • Elements contained inside another element (latter = parent, former = child)

  36. Mechanics – Web Basics: XHTML (cont.) • Two methods for creating Web Page Layout • Tables: easy to create, modify and format in DW. • CSS:create, modify and maintain in DW. • Structure Your Pages • Divide logical sections of document into div elements •  Produces “linear / natural flow” of divs • Use header elements (h1, h2 …) • Use comments/* hello world */ • Ordered & Unordered Lists easy to create in DW.

  37. Mechanics – Web Basics: CSS • CSS = Cascading Style Sheets • Collection of Formatting Rules • Control Appearance of web page: blocks and text • Ensure a more Consistent Treatment of Page Layout and Appearance in Browsers • Separation of Content from Presentation • Easier to Maintain Appearance since Make Change in Single Location • Simpler and Cleaner HTML code  shorter loading times

  38. Mechanics – Web Basics: CSS (cont.) • CSS Style Sheet stored • External CSS style sheet (.css file linked to page and using a link or an @import rule in the head section of a document). • Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document). • Inline styles (defined within specific tag instance in HTML document) Using Inline styles is not recommended. • CSS Rule = Selector and Block of Declarations • Enclosed by {...} brackets and separated by ; • Declaration = Property: Value;

  39. Mechanics – Web Basics: CSS (cont.) • CSS • Control Text properties • Specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; etc. • Control Format & Position of Block-level Elements • Set margins and borders for block-level elements; position them in a specific location; add background color; float text around them; etc. • Liquid layouts: expand/contract based on Browser width. • Easy to apply Same Layout to Whole Site and only need to modify external CSS file. • Minus: Not all browsers support CSS the same way. •  DW helps to identify Compatibility Issues

  40. Mechanics – Web Basics: URL • URL - uniform resource locator • "http://www.abc.com/aaa/bbb/ccc.html" • "http://" - hypertext transfer protocol - scheme • "www.abc.com/" - server name - domain name, owner, host • "/aaa/bbb/ccc.html" - path through folder hierarchy • URL Basics • Absolute URL • "http://www.abc.com/aaa/bbb/ccc.html" • "Complete street address" • Info located on external server • Relative URL • "../../../xxx/yyy.htm" • "../" = up 1 level => up 3 levels, then subdir "xxx" to get to "yyy.htm" • "Direction to neighbor's house" • Anchor (same page), Internal (local) • Default “Home” Page = index.html • Keeps out prying eyes out of directories (also instructor :).

  41. Mechanics – Color • Large Areas = Low Saturation= Subtle color • Background / minor elements = Subtle pastel colors • Small Areas = High Saturation= Bold color • Maximum emphasis = Bold, saturated primary colors

  42. Mechanics – Color(cont.) • RGB Color used by Monitor • Direct Light, Not Reflected • Indexed Color • Limited Selection of Colors: up to 256 colors • To Reduce File Size • Color not in the Palette is Approximated and “Dithered” • Creating Web-Safe Colors • All combinations of 0%, 20%, 40%, 60%, 80%, 100% for Red, Green and Blue • 6to3 = 216 colors • Affects Illustrations, Drawings more than Photographs • Fireworks has Web-safe Palette

  43. Mechanics – Web Graphics • Bitmapped or Raster Graphics • Paint and Photo Programs • Object or Vector-based Graphics • Draw and Illustration Programs • Use Mathematical Representation for Shapes • Used to Create Original Artwork • Artwork Converted into Bitmap using Fireworks • Anti-aliasing (smoothing) • Increases file size

  44. Mechanics – Image File Formats • GIF • Cross Platform & Lossless Compression • Indexed Colors: few GIFs need all colors, reduce it manually • Transparency (so no white box around graphic) • Interlacing & Progressive Download • Create Animations • Best for • Images with Large Areas of Solid Color, Simple Illustrations • Small Photos or thumbnails • JPEG • Cross Platform & LOSSY Compression • Progressive JPEG • No transparency • No Animation • Best for • Photos: Millions of Colors and Subtle Changes

  45. Mechanics – Save Image for Web • RGB Mode • 72 ppi • Indexed Color Mode • Reduced Color Palette • Adaptive Palette • Interlaced

  46. Dreamweaver - Introduction • Three Views Design View | Code View | Design & Code View • Create Page Content & Layout • Enter and Insert Content • Text, Images, Flash etc. • Specify CSS (external and internal) • Page Properties • Standard Mode (and Expanded Mode) • Edit & Modify Tables • AP Elements • Interaction & Behaviors • Rollovers, Imagemaps, Navigation Bars • Linking images and behaviors • Site Management • "Local site" mirrors "Remote site"

  47. Dreamweaver – Create Visual Hierarchy • You can use in Standard Mode • 1 Standard Table[today] • Standard Mode • Regular Columns and Rows • 2 AP Elements • “Irregular” Columns and Rows to create Layout and Visual Hierarchy

  48. Formatting Precedence – “Table Rules” • Cell Format overwrites • Column / Row Format overwrites • Table Format • BUT • Table Width / Height constrains • Column or Row or Cell Width / Height • If Table “Width” unspecified, then column widths unconstrained!

  49. Demo – Specify Default Text Format & Visual Guides • Specify Default Text Format • Modify > Page Properties • Use Sans Serif Typeface • Creates Internal CSS style sheet • Visual Guides • Ruler • View > Ruler • Visual Grid • View > Grid > select “Show Grid” and “Snap-to-grid” • View > Grid > Edit Grid (to edit grid)

  50. Demo: Create and Edit Standard Table • Select “Standard Mode” • View > Table Mode > select “Standard Mode” or Select “Layout” in Insert bar and click “Standard” icon • Insert Table • Insert > Table: in dialog box specify number of columns and rows • Format Columns / Rows / Cells • Select columns / rows / cells using dragging • Edit entries in Property Inspector for selected items Table: CellPad, CellSpace, Align, Border (which will apply for all cells) • Merge Cells • Select cells to be merged • Modify > Table > Merge Cells • Insert Row / Column • Modify > Table > “Insert Row” or “Insert Column” or “Insert Row or Column” (latter gives you most control)

More Related