interface design multimedia and web. today’s objectives introduce user-center design guidelines...
TRANSCRIPT
![Page 1: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/1.jpg)
Interface design
Multimedia and Web
![Page 2: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/2.jpg)
Today’s Objectives
Introduce User-Center Design Guidelines CSS
Project portfolio page
![Page 3: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/3.jpg)
Defining ID
Terms
![Page 4: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/4.jpg)
Defining ID User interface (UI): computer-mediated means to
facilitate communication between human and an artifact.
User Interface (UI) - means by which humans interact with a computer to fulfill a purpose.
Communication Channel – something that mediates between the user and the computer.
Controls input and output - translator
![Page 5: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/5.jpg)
Defining ID
One approach to present a problem:
Identify as many sets of any 3 numbers from 1 to 9 that sum to 15.
e.g., 1, 9, 5 is one set because 1+9+5 = 15
![Page 6: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/6.jpg)
Defining ID
1
2
34
5
67
8
9
Here is another way to present the problem
Identify as many sets of any 3 numbers from 1 to 9 that sum to 15.
![Page 7: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/7.jpg)
Defining ID
What makes an What makes an interface good?interface good?
![Page 8: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/8.jpg)
Defining ID
What is a good interface?A good ID encourages an easy, natural, and
engaging interaction between users and system… BUT
Must be concerned with whether an interface is good, bad, or poor, etc. in relation to usability.
![Page 9: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/9.jpg)
User Centered Design
Model & approaches
![Page 10: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/10.jpg)
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.
http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html
![Page 11: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/11.jpg)
RequirementDefinition
System &Software Design
ImplementationUnit Testing
Integration &System Testing
Operation & Maintenance
Waterfall Life Cycle Model
![Page 12: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/12.jpg)
RequirementDefinition
System &Software Design
ImplementationUnit Testing
Integration &System Testing
Operation & Maintenance
Waterfall Life Cycle Model
User involvement
• Sequential phases• Each phase complete before the next
![Page 13: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/13.jpg)
Iterative design process
User Testing
Design
Prototyping
e.g., Agile model
![Page 14: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/14.jpg)
Iterative design process
User Testing
Design
Prototyping
• Involve users throughout the process• Process is highly iterative
![Page 15: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/15.jpg)
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html
The Site Development Process Model
Lynch & Horton
![Page 16: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/16.jpg)
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html
The Site Development Process
Lynch & Horton
• Broad input & participation in beginning.
• Narrow focused team at the end.
• Necessary, to finish your site on time and on budget.
![Page 17: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/17.jpg)
User centered design
Common approaches
![Page 18: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/18.jpg)
User-Centered Design
Major activities:1. Understand/specify the context of use
2. Specify user and organization requirements
3. Create prototypes
4. Evaluate designs with users against requirements.
(British Standards Institution 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)
![Page 19: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/19.jpg)
SOURCE: http://www.usability.gov/methods/process.html
www.usability.gov
![Page 20: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/20.jpg)
SOURCE: http://www.usability.gov/methods/process.html
www.usability.gov
![Page 21: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/21.jpg)
User-Centered Design Major Steps
1. Requirements-definition - client gives developers information about functionality and requirements.
2. Establish design for the project.
3. Develop prototypes that reflect the emerging design, using the programming language or development environment.
![Page 22: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/22.jpg)
User-Centered Design
Major Steps
4.Submit prototypes to client for feedback and modifications.
5.Revise prototypes to reflect the client’s changes.
6.Repeat steps 3 and 5 for additional part of the system.
![Page 23: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/23.jpg)
User-Centered DesignSeeks to answer questions about users and their tasks
and goals such as: Who are the users of this 'thing'?
What are the users’ tasks and goals?
What are the users’ experience levels with this thing, and things like it?
How can the design of this ‘thing’ facilitate users' cognitive processes?
![Page 24: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/24.jpg)
User-Centered Design What hardware, software, and browsers do the users
have? What relevant knowledge and skills do the users already
possess? What functions do the users need from this interface? How do they currently perform these tasks? Why do the users currently perform these tasks the way they
do? What information might the users need and in what form? What do users expect from this Web site? How do users expect this interface will work?
![Page 25: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/25.jpg)
Site Development Process(Lynch & Horton)
Site definition and planning Information architecture Site design Site construction Site marketing Tracking, evaluation, and maintenance
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html
![Page 26: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/26.jpg)
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html
The Site Development Process
Lynch & Horton
![Page 27: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/27.jpg)
The first step to design web site is to define your goals.
Careful planning and a clear purpose are the keys to success in building web sites, particularly when working with a development team.
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html
Site Development Process(Lynch & Horton)
![Page 28: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/28.jpg)
Step 1:
Gather development team, analyze needs/goals, and work through development process to refine plans.
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html
Site Development Process(Lynch & Horton)
![Page 29: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/29.jpg)
Step 2: Create charter document:
what you intend to do and why, what technology and content you’ll need, how long will process take, how much you will spend, and how you will assess the results of your efforts.
Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html
Site Development Process(Lynch & Horton)
![Page 30: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/30.jpg)
Charter document is crucial to creating a successful site:
Charter document is blueprint and will help keep project focused on the agreed-on goals and deliverables.
Site Development Process(Lynch & Horton)
![Page 31: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/31.jpg)
![Page 32: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/32.jpg)
Design guidelines
Home: Communicating the purpose
![Page 33: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/33.jpg)
Design guides• Try to accommodate a majority (95%) of all users.
• As of Jan. 2008, 48% of users had screen resolution set at 1024x768; and 38% had it higher.
• As of Jan. 2009, 36% of users had screen resolution set at 1024x768; and 57% had it higher.
• 1024 x 768 is still one of the most popular screen resolutions in 2009 (others 1280 x 800, 1280 x 1024, 1680 x 1050 & 1440 x 900)
• Ensure all testing of sites is done using the most common screen resolutions.
Source Research-Based Web Design & Usability Guidelines US Government Usability Guidelines;http://www.w3schools.com/
![Page 34: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/34.jpg)
Display Resolution (Jan 2008)
Source: W3Schools:, Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp
![Page 35: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/35.jpg)
Display Resolution Jan. 2009
Source: W3Schools: Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp
![Page 36: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/36.jpg)
Browsers (July 2008)
Source: W3Schools:, Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp
![Page 37: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/37.jpg)
Browser Use July 2009
Source: W3Schools: Web Statistics and Trends: http://www.w3schools.com/browsers/browsers_display.asp
![Page 38: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/38.jpg)
Design guidelines: Home
Many people have screen resolutions of 1024X768. In time, 1024X768 will be the smallest.
Width: design pages at roughly 984 pixels for 1024X768 resolution.
Width: design pages at roughly 760 pixels for 800X600 resolution.
![Page 39: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/39.jpg)
Design guidelines: Home
Show company name or logo in a reasonable size and location on the home page.
Include a tag line. Indicate what your site does that is valuable
from users’ perspectives. Give prominence to the highest priority tasks
(e.g., purchase books, check stock quotes, etc). Make the home page distinct from other pages.
![Page 40: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/40.jpg)
Design guidelines
Liquid design rather than frozen. Page length: roughly two full screens.
Don’t cram everything on one page. Make sure important features are “above
the fold”
![Page 41: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/41.jpg)
Design guidelines
Logo – upper left Logo is a link to the home page on all
pages except the home page. Logo size roughly 74px X 74px
![Page 42: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/42.jpg)
Design guidelines
Search – upper portion of screen – upper right
Search on every page Search box 35 characters wide
![Page 43: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/43.jpg)
![Page 44: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/44.jpg)
Cascading Style Sheets
CSS
![Page 45: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/45.jpg)
Cascading Style Sheets
HTML was not meant to specify an exact appearance for your Web pages.
CSS (Cascading Style Sheets) allows you to specify more information about the appearance of elements on a Web page.
Zen Garden
![Page 46: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/46.jpg)
Structure and style
Structure document with html<ul><ol><dl><h1..6><p><div><span>
Focus on content and organization first. All documents should be readable without
CSS.
![Page 47: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/47.jpg)
Structure and style
Use styles to attached to block in document (<h1>, <p>, <div>, <span>…)
Use classes for repeated styles
Use IDs to style a specific section
![Page 48: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/48.jpg)
Cascading Style Sheets
A style sheet is a set of one or more rules that apply to an HTML document.
h1 { color : red; }
![Page 49: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/49.jpg)
Cascading Style Sheets
Why use styles?
![Page 50: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/50.jpg)
Cascading Style Sheets
Update the look of a Web site by changing a single document.
Keep content separate from styling.
Greater typography and page layout control
Easier site maintenance
![Page 51: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/51.jpg)
External Styles
page4.htm
page6.htmpage7.htm
page2.htmpage3.htmpage1.htm
index.htm Style.cssStyle.css
page5.htm
• Make changes from a single document• Changes multiple documents
• Make changes from a single document• Changes multiple documents
<link rel="styleSheet" type"text/css" href="styles.css“ />
![Page 52: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/52.jpg)
Rules, Selectors, Declarations
CSS
![Page 53: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/53.jpg)
The Rule
h1 {color : #c0c0c0;}
Rule
![Page 54: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/54.jpg)
The Rule
h1 {color : #c0c0c0;}
Selector Declaration
Rule
![Page 55: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/55.jpg)
The Declaration
Has two parts separated by a colon:
Property - that part before the colon
Value - that part after the colon
h1 {color : #c0c0c0; }
![Page 56: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/56.jpg)
The Declaration
Curly brackets { } help distinguish between selector, property, and value
Colon separates property and values
Semicolon separates declarations
h1 {color : #c0c0c0;}
![Page 57: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/57.jpg)
The Declaration
The level 2 header’s text is blue.
Subject
Object
Verb
Adjective
![Page 58: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/58.jpg)
The Declaration
Subject
Object
Verb = “to be”
Adjective
h2 { color : blue;}
![Page 59: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/59.jpg)
Combining Rules
h1 { color : red; } h2 { color : red; }
h3 { color : red; }
h1, h2, h3 { color : red; }
![Page 60: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/60.jpg)
Types of Style Sheets Inline Styles <h1 style="color:#ff0000">Heading text is red</h1>
Embedded Styles<style type ="text/css">
body { background-color: #000000; color: #FFFFFF;} </style>
External Styles (browser waits for styles before page)<link rel=“stylesheet” type=“text/css” href=“mystyle.css />
Imported Styles (styles applied after page renders)@import url(Layout_A.css);
![Page 61: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/61.jpg)
Types of selectors
1. HTML selector h1 {color : red ;}
2. Class selector .highlight Dependent classes h1.highlight
3. ID selector #site_info
![Page 62: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/62.jpg)
Classes
Classes (applies to more than one type of element – several different styles for the same element.)
.mytext {font-family : Verdana; font-size : 1.5em;}
<p class=“mytext”>Hello World</p>
![Page 63: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/63.jpg)
Dependent Classes
.highlight {background-color : green;}
h1.highlight {text-transform : uppercase;}
/*if highlight class is used with h1, it has green background color and uppercase*/
![Page 64: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/64.jpg)
64
ID Selector id Selector
Use to apply a CSSrule to ONE element on a Web page.
Configure with #idname
The sample creates an id called “new” with red, large, italic text.
To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>
<style type="text/css">#new { color: #FF0000;
font-size:2em; font-style: italic;
}</style>
![Page 65: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/65.jpg)
Five properties control font characteristics
font-familyfont-stylefont-weightfont-size
CSS Typography
![Page 66: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/66.jpg)
Value is a list of font names in decreasing order of preference
p { font-family: "The Sans", Verdana, Helvetica, sans-serif; }
Names separated by a space should be in “ “
font-family
![Page 67: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/67.jpg)
The font-size Property
Use em or percentage font sizes – these can be easily enlarged in all browsers by users Ex: http://webstyleguide.com/wsg3/1-process/6-types-of-sites.html
![Page 68: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/68.jpg)
line-height property specifies leading
Use percentage (150%), ratio (1.5) or ems (1.5em) to specify leading relative to font size
Leading
![Page 69: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/69.jpg)
text-align property can take values left, right, center or justify
body { text-align: left; } p.display { text-align: center; }
Alignment
![Page 70: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/70.jpg)
CSS Guidelines
Review the design of the pageConfigure global font and color properties
for the body selector Identify typical elements (such as <h1>,
<h3>, and so on) and declare style rules for these if needed.
Identify page areas such as logo, navigation, footer, and so on – configure an appropriate class or id for each.
![Page 71: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/71.jpg)
CSS Guidelines
Create a prototype page that contains most of the elements you plan to use and test.Once your design is set – move styles to an
external .css file
Planning and testing are important activities when designing a Web site
![Page 72: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/72.jpg)
<div id=“wrapper”>
<div id=“header”> </div
<div id=“sideBarLeft”> </div>
<div id=”mainContent”> </div>
<div id=“footer”> </div>
</div>
Box Model
![Page 73: Interface design Multimedia and Web. Today’s Objectives Introduce User-Center Design Guidelines CSS Project portfolio page](https://reader036.vdocuments.mx/reader036/viewer/2022070403/56649f2b5503460f94c45692/html5/thumbnails/73.jpg)
Header
Side Bar Left Main Content
Footer
Wrapper