Design Concepts and Web Design


Published on

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.

Published in: Education, Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • MMC 4341 - February 2014 – many of the linked resources are no longer available, but some are.
  • You will ALWAYS need to specify background-color, (text) color, and 4 pseudo classes for the links.
  • If you analyze award-winning design websites, you will discover that the palettes are usually simple. The number of colors used is limited.
  • If you identify more than 2 or 3 colors, it is likely that most of those colors are shades or hues of 1 or 2 base colors.
  • if you do find a “rainbow” palette, you will notice that the “rainbow” is usually used in a limited and restrained way – like this example.
  • More about the pseudo classes: … One mistake that inexperienced CSS coders make – they fail to test link colors against different backgrounds.
  • This example shows minimal specifications for color in a CSS style sheet.
  • This is a great tool (free, online) for experimenting with color.
  • Always find and USE the hexadecimal codes for colors!
  • Always find and USE the hexadecimal codes for colors! DO NOT use words, e.g. “red,” “black.”
  • Web designers have published hundreds of articles about the best ways to use fonts with HTML and CSS. Don’t take this for granted.
  • All shown at 48px – NOTE that the sizes of two different font-families can be EXTREMELY different. This could really mess up your page design.
  • All shown at 48px – go back one slide and compare. Make sure you KNOW the difference between serif and sans-serif.
  • Compare this slide with the previous 2 slides. MONOSPACE is very different. These can also be called fixed-width fonts.
  • Standard best practice is to ALWAYS include one generic at the end of the font-family declaration.
  • THIS IS A BIG DEAL. Your Web pages can look HORRIBLE if you do not construct your font stacks (in CSS) carefully. You have very LIMITED options.
  • Google Web Fonts to the rescue! ALTHOUGH – you do not need to DEPEND on these – you can still use “safe” fonts – and you still need to spec a generic!
  • Different people have different fonts installed (or not installed) – what you see on your computer might be VERY DIFFERENT from what I see, or what others see, when you view YOUR Web page.
  • If you type these incorrectly, the fonts will not work on the Web page.
  • Design is a process that addresses a problem, or a set of problems. This is not “problem” in a negative sense – more like a puzzle that has more than one way to solve it. Which way is the best way? That is the problem to be solved.
  • We’ll talk more next week about agile development and how that contributes to the design process.
  • What is the problem you are trying to solve? Think it over.
  • Like Web typography, CSS is a topic about which skilled designers have written many, many articles. Don’t just stick things in. PLAY. Experiment. And Google about what is considered correct, incorrect, and optimal.
  • MMC 4341 - February 2014
  • Design Concepts and Web Design

    1. 1. Fonts, color, Web design Some design concepts related to the use of HTML and CSS
    2. 2. {CSS} background-color, color, a:link, a:hover, etc. COLOR
    3. 3. 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?)
    4. 4. This example shows very minimal specifications for color in a CSS style sheet.
    5. 5.
    6. 6. Always find and USE the hexadecimal codes for colors!
    7. 7. Photoshop’s Color Picker Always find and USE the hexadecimal codes for colors!
    8. 8. {CSS} font-family, font-size, line-height TYPOGRAPHY
    9. 9. sans-serif All shown at 48px
    10. 10. serif All shown at 48px
    11. 11. monospace All shown at 48px
    12. 12. 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
    13. 13. 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”
    14. 14. There are not many fonts that you can expect most online users to have installed on their devices.
    15. 15.
    16. 16. 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.
    17. 17. 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). "Book Antigua" (yes) “Book Antigua” (no) • Make sure the comma comes after the closing quote: Baskerville, "Times New Roman", Times, serif;
    18. 18. 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 fontfamily “stacks.” (You can have more than two declarations in the style sheet.) Source: Susan G. Miller, “Selecting and Combining Typefaces”
    19. 19. 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”
    20. 20. Online design is more than code DESIGN THINKING
    21. 21. “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
    22. 22. Design thinking 1: Define the problem 2: Create and consider many options 3: Refine selected directions 3.5: Repeat (optional) 4: Pick the winner, execute —quoted from “Design Thinking ... What Is That?” Fast Company, March 2006
    23. 23. A five-page student website has little in common with a news organization’s 10,000-page site.
    24. 24. {CSS} div and other selectors MORE CSS
    25. 25. Linked on our syllabus: Checklist for your HTML5 and CSS knowledge
    26. 26. Fonts, color, Web design Presentation by Mindy McAdams University of Florida [2014]