Design Concepts and Web Design
Upcoming SlideShare
Loading in...5

Design Concepts and Web Design



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.

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.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1. Fonts, color, Web design Some design concepts related to the use of HTML and CSS
  • 2. {CSS} background-color, color, a:link, a:hover, etc. COLOR
  • 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. This example shows very minimal specifications for color in a CSS style sheet.
  • 5.
  • 6. Always find and USE the hexadecimal codes for colors!
  • 7. Photoshop’s Color Picker Always find and USE the hexadecimal codes for colors!
  • 8. {CSS} font-family, font-size, line-height TYPOGRAPHY
  • 9. sans-serif All shown at 48px
  • 10. serif All shown at 48px
  • 11. monospace All shown at 48px
  • 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. 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. There are not many fonts that you can expect most online users to have installed on their devices.
  • 15.
  • 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. 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. 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. 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. Online design is more than code DESIGN THINKING
  • 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. 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. A five-page student website has little in common with a news organization’s 10,000-page site.
  • 24. {CSS} div and other selectors MORE CSS
  • 25. Linked on our syllabus: Checklist for your HTML5 and CSS knowledge
  • 26. Fonts, color, Web design Presentation by Mindy McAdams University of Florida [2014]