1 / 66

Interface design

This resource provides a comprehensive overview of user-centered design principles and CSS techniques essential for creating effective multimedia and web interfaces. Emphasizing the iterative design process, user research, and usability testing, it aims to improve user experience by understanding user goals and behaviors. Key learnings include the importance of prototyping, feedback loops, and effective use of CSS selectors and styles. Enhance your design skills with practical examples and insights into accessibility and responsive design.

kaveri
Télécharger la présentation

Interface design

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. Interface design Multimedia and Web

  2. Today’s Objectives • User Research • Read: Chapters 1 & 2, Designing interfaces in Tidwell (2011). Blackboard. • Chapter 4, About Face, Cooper (2007). Blackboard. • CSS • CSS Introduction-type-color (2012) Blackboard • User-Center Design - review • Project portfolio page • Design Activity

  3. Today’s Objectives • September 20 Step 1 IDD • October 9 Step 1 IDD • September 20 Team design activity • September 27 Jim Homme - Accessibility • AE responsive design project - Create a Tablet optimized site Experience for AE.COM • Blackboard banner graphics -students providing artwork for the Blackboard Header

  4. User Research

  5. User Research – Trying to find out: • Users’ goals in using the site • Tasks they undertake to achieve goals • Language and words they use • Skill using software similar to what you’re designing • Attitudes toward the kind of thing you’re designing

  6. What is User-Centered Design? • Places the person (as opposed to the 'thing') at the center. • Focuses on cognitive factors (such as perception, memory, learning, problem-solving, etc.) as they impact interactions. • Looks at user actions/activity. Source: http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

  7. Iterative design process Design • Involve users throughout the process • Process is highly iterative User Testing Prototyping

  8. What is involved in the process • Identifying needs, establishing requirements for the user experience (understand the problem and your users) • Developing alternative designsto meet needs • Building interactive prototypesthat can be communicated and assessed • Evaluatingwhat is being built throughout the process and the user experience it offers

  9. User-Centered Design • Major Steps of UCD • Requirements-definition - client gives developers information about functionality and requirements. • Establish design for the project. • Develop prototypes that reflect the emerging design, using the programming language or development environment.

  10. User-Centered Design • Major Steps of UCD • Submit prototypes to client for feedback and modifications. • Revise prototypes to reflect the client’s changes. • Repeat steps 3 and 5 for additional part of the system.

  11. HTML | CSSWays to Include styles in documents CSS

  12. Embedded Style Sheets <head> <style type="text/css"> h1 { color : #C0C0C0; } font-family: Arial; font-size: 1.5em; } p { font-size: small; font-family: sans-serif; } </style> </head>

  13. External Style Sheets | Linked with HTML | 1 or more sheets <head> <link rel="stylesheet" type="text/css" href=“myStylesA.css“ /> <link rel="stylesheet" type="text/css" href=“myStylesB.css“ /> </head> • rel="stylesheet" | identifies the type of link, link to a style sheet. • type="text/css" tells browser what type of data, a text file with CSS.

  14. Rules CSS

  15. The Rule h1 { color : #C0C0C0; } Rule

  16. The Rule Rule h1 {color : #c0c0c0;} Selector Declaration (What to format)

  17. The Declaration Declaration has two parts separated by a colon: Property - part before the colon Value - part after the colon h1 { color : #C0C0C0; } Property Value

  18. The Rule Rule h1 { color : #c0c0c0; font-family : Arial; font-size : 2em; } Selector Declaration block

  19. Types of selectors • Tag or HTML Selectors: Page-Wide Styling • Class Selectors: Pinpoint Control • ID Selectors: Specific Page Elements • Group Selectors

  20. Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}

  21. Types of selectors | Classes • Classes (apply to more than one type of element) .mytext {font-family: Verdana; font-size: 14px;} <p class=“mytext”>Hello World</p> <span class=“mytext”>Learning CSS</span>

  22. Types of selectors | ID • ID selectors identify: • Major sections • Unique content | a rule to ONE element on a page. • Configured with #idname #banner { background-color : #FF00FF;} <div id=“banner”> </div>

  23. Types of selectors | ID • Creates a rule for an id titled “banner”. • Applies to ID “banner” <style type="text/css"> #banner { color : #000000; font-size:2em; font-style: italic; } </style> • <div id=“banner”> • Hello world! • </div>

  24. Combining Rules | Group Selectors h1 { color : #F1CD33; } h2 { color : #F1CD33; } h3 { color : #F1CD33; } h4 { color : #F1CD33; } h5 { color : #F1CD33; } h6 { color : #F1CD33; } OR • Styling Groups of Tags h1, h2, h3, h4, h5, h6 { color : #F1CD33; }

  25. HTML Tree: relationship of one element to another.

  26. HTML Tree <html> <head> <title>My Web Page</title> </head> <body> <h1>Main Topic</h1> <p> A web page about the days of the week, specifically<strong>Tuesday.</strong> </p> </body> </html>

  27. HTML Tree <html> Ancestor to all tags Ancestor to h1, p, span <head> <body> Descendent of <html> <title> <h1> <p> Descendent of <html> and <head> Siblings <span> Child of <p>

  28. HTML Tree • Ancestor: tag that wraps around another tag. <html> ancestor of all other tags • Descendent: A tag inside one or more tags. • Parent: tag’s closest ancestor <p><a>HOME</a></p> • Child: tag directly enclosed by another tag. <p><cite><a>HOME…</a></cite></p>

  29. Inheritance • Typically, properties related to the styling of text font size, color, style, etc. are inherited. • Properties related to box area of elements (borders, margins, backgrounds, etc.) are not passed down. p {font-family:verdana;} <p> Hello <span>world!</span> </p> Passed to SPAN element

  30. Styling in context

  31. Styling in context • Style in context based on HTML, classes, or ID of parent elements. • Nested elements inside one another

  32. Styling in context • Citation text is blue • cite { color : blue; } • h1 cite {color : blue; } • If a citation is in a level 1 header, its text is blue • <h1><cite>Hello world</cite></h1>

  33. Styling in context -1 • #brand p.intro cite {color : blue; } • If a citation is in a <p> with intro class that is within brand ID, the text is blue <div id="brand"> <p class="intro">. ..above allows <cite>Firefox, Chrome, and Safari</cite> to resize ...</p> </div>

  34. Child selectors -2 • p > cite {color : blue; } • If the cite tag is in a paragraph and does not have any other parent tags, it color is red • <p><cite>…Firefox, Chrome…</cite></p>

  35. Siblings -3 • p + cite {color : blue; } • If a citation is next to a <p> tag, its color is blue. • <p>hello world…</p><cite>Joe Doe</cite>

  36. Selectors | Context | Descendent Descendent selector context • p strong { color: red; } -4 Any <strong> tag inside a paragraph (p) is red, but other instances of the <strong> tag on the page are not affected. • li a{ font-family: Arial; background-color: blue; } • Any <a> tag inside a line item is Arial font, but other instances of the <a> tag on the page aren’t affected. -5

  37. Specificity | Descendent selectors • Specific descendent selectors override less specific selectors li a {color : green;} All anchors in line items are green ol li a {color : green;} Only anchors in line item in ordered lists are green

  38. Selectors | Descendent selectors p.introduction { color : red;} <p class=“introduction”>Hello World</p> Any paragraph with .introduction class will be Red. p . introduction{color : red;} <p>Hello <span class=“introduction "> World</span</p> Any tag with .introduction class that is in a <p> tag will be Red.

  39. Child selectors • div > h1 {color : blue; } • All heading 1 that are children of div will be blue. <div> <h1>Hello world</h1> <h1>Hello everyone</h1> </div>

  40. Adjacent Siblings • A tag that appears immediately after another tag in HTML h1+p {color : green;} Paragraphs that are adjacent to heading 1 will be green.

  41. Pseudo-classes| pseudo elements

  42. Pseudo-classes Browser keeps track: • of Link states – e.g., clicked, visited, hover, active • whether an element is first of its type, • whether an element first or last child of its parent, • whether form elements checkedor disabled • Etc.

  43. Pseudo-classes • Elements in a certain state belong to the same class. • Not in HTML markup— browsers track these states. • Can apply styles to elements in these states using a pseudo-class selector.

  44. Pseudo-classes • Pseudo-class selectors indicated by the colon (:) • Generally, go immediately after an element name, for example, li:first-child

  45. Pseudo-Classes • a:link | a:link { color : #EFEFEF; } • a:visited | a:visited { color : #CCCCCC; } • a:hover | a:hover { color : # F33333; } • a:active | a:active {color : #B2F511;} • Hover: (these will also work) • h1:hover { color : #FFFFFF; } • .hiLite:hover { color : #FFFFFF; }

  46. Pseudo-Classes • Proper way to order four link pseudo-classes: • a:link { color: #F60; } • a:visited { color: #900; } • a:hover { color: #F33; } • a:active {color: #B2F511; } • If order is changed, the hover and active don’t work.

  47. Pseudo-Classes • :focus Applies when the element is selected and ready for input • input:focus { background-color: yellow; }

  48. Structural pseudo-classes • Allow selection based on where element is in the structure of the document (the document tree). :first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()

  49. Structural pseudo-classes • :first-child • the first of all children an OL may have. ol li:first-child { font-size:1.2em; } <ol> <li>Item 1</li> <li>Item 2 </li> <li>Item 3 </li> </ol>

  50. Structural pseudo-classes • div h1:first-child {color : blue;} <div> <h1>hello world 1</h1> <h1>hello world 2</h1> <h1>hello world 3</h1> </div>

More Related