design concepts and web design
DESCRIPTION
Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.TRANSCRIPT
![Page 1: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/1.jpg)
Fonts, color, Web design
Some design concepts related to the use of HTML and CSS
![Page 2: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/2.jpg)
COLOR{CSS} background-color, color, a:link, a:hover, etc.
![Page 3: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/3.jpg)
![Page 4: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/4.jpg)
![Page 5: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/5.jpg)
![Page 6: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/6.jpg)
![Page 7: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/7.jpg)
![Page 8: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/8.jpg)
![Page 9: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/9.jpg)
Color
• Choose 2 to 5 key colors for your palette• Specify colors for page background, wrapper
background, and main text • Specify all pseudo classes (a:link, a:visited,
a:hover, a:active, a:focus)– Look up a:focus if you don’t know about it
• Test all colors for text legibility with a Photoshop graphic (is your text easy to read?)
![Page 10: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/10.jpg)
This example shows very minimal specifications for color in a CSS style sheet.
![Page 12: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/12.jpg)
http://kuler.adobe.com/
Always find and USE the hexadecimal codes for colors!
![Page 13: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/13.jpg)
Photoshop’s Color Picker
Always find and USE the hexadecimal codes for colors!
![Page 14: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/14.jpg)
TYPOGRAPHY{CSS} font-family, font-size, line-height
![Page 15: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/15.jpg)
sans-serif
All shown at 48px
![Page 16: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/16.jpg)
serif
All shown at 48px
![Page 17: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/17.jpg)
monospace
All shown at 48px
![Page 18: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/18.jpg)
Match the generic
• The generic comes at the end of the declaration• There are three acceptable generics:– serif– sans-serif– monospace
• The fonts specified must be the same classification as the generic; e.g., Verdana and Arial are sans-serif fonts, and Georgia and Times are serif fonts
![Page 19: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/19.jpg)
Consider the context
• When creating a CSS “font stack”—is it a declaration for body or caption text (small) or heading text (large)?
• The order of the fonts in the stack should reflect this difference
• Certain fonts work well for paragraphs (small text size), while others work better at larger sizes.
• Example: Verdana and Arial read slightly better than Helvetica at smaller sizes on the screen.
Source: Nathan Ford, “Better CSS Font Stacks”
![Page 20: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/20.jpg)
There are not many fonts that you can expect
most online users to have installed on their devices.
![Page 21: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/21.jpg)
http://www.jtoolkit.com/wp/2012/11/typography-for-the-web/
![Page 22: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/22.jpg)
Make sure you have seen it
• Many typography Web sites that seem to be showing you typefaces are only showing you the faces that are already on your computer.
• To be certain you have really seen a typeface (before specifying a font family)—Google it!
• The major type foundries (Adobe, Bitstream, Linotype, etc.) show online samples in PDF format so you can get an accurate view of the typefaces. Go to their sites.
![Page 23: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/23.jpg)
Use of quotation marks
• Use quotation marks around any font-family name that includes a space.
• Make certain the quotation marks in CSS are “straight,” not “curly” (this is necessary for ALL code).
Baskerville, "Times New Roman", Times, serif;
"Book Antigua" (yes) “Book Antigua” (no)
• Make sure the comma comes after the closing quote:
![Page 24: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/24.jpg)
Limit use of different fonts
• A good rule of thumb is to never use more than three typefaces on any page, and preferably to stick to only one or two.
• For CSS, this would mean only two different font-family “stacks.” (You can have more than two declarations in the style sheet.)
Source: Susan G. Miller, “Selecting and Combining Typefaces”
![Page 25: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/25.jpg)
Limit use of different fonts
• In selecting two fonts to use, it’s a good practice to select one serif and the other from the sans-serif group. – Allows for a nice contrast– Ensures that the page is attractive and easy to
read
Source: Susan G. Miller, “Selecting and Combining Typefaces”
![Page 26: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/26.jpg)
DESIGN THINKINGOnline design is more than code
![Page 27: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/27.jpg)
“Design in its most effective form is a process, an action,
a verb not a noun. A protocol for solving problems and
discovering new opportunities. Techniques and tools differ and their effectiveness [is] arguable,
but the core of the process stays the same.”
—“Design Thinking ... What Is That?” Fast Company, March 2006
![Page 28: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/28.jpg)
Design thinking
1: Define the problem2: Create and consider many options3: Refine selected directions3.5: Repeat (optional)4: Pick the winner, execute
—quoted from “Design Thinking ... What Is That?” Fast Company, March 2006
![Page 29: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/29.jpg)
A five-page student websitehas little in common
with a news organization’s10,000-page site.
![Page 30: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/30.jpg)
MORE CSS{CSS} div and other selectors
![Page 31: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/31.jpg)
Linked on our syllabus:Checklist for your HTML5
and CSS knowledge http://bit.ly/html_css_checklist
![Page 32: Design Concepts and Web Design](https://reader035.vdocuments.mx/reader035/viewer/2022062312/5549b87eb4c905fc7f8b4b4a/html5/thumbnails/32.jpg)
Fonts, color, Web design
Presentation by Mindy McAdamsUniversity of Florida
[2014]