Spring '12 Design Workshop Series

Web Design Basics

March 10, 2012 — Alice Zheng

Today

  • Design Principles
  • The Lay of the Land
    • HTML
    • CSS
  • Process

Design Principles

Design Principles

Web Design vs. Print Design: similar purpose, different tools. Usually, your goal is to communicate something. In print design, you generally have a limited space to fill with a fixed composition. In web design, you have a canvas that can spread infinitely in both directions and responds to user actions.

Interaction

  • Unique to web as a medium, and has the capacity to communicate through captivation and engagement.
  • People like to be surprised and delighted. But if you can't surprise them in a good way, at least try to give them what they want.
  • Put yourself in the user's shoes. What does your user want? How does your user think? What does your user's subconscious want?
  • Good examples [1] [2] [3] [4]

Simplicity

  • Design for clarity and ease of use. The user has better things to do than figure out what you're trying to make them look at.
  • Choose what NOT to do. Only include what you can justify including.
  • Good examples [1] [2] [3]

Scale

  • DO use large shifts in scale.
    • Don't use small ones.
  • DO use shifts in scale to help the user find what they're looking for
  • DO let yourself be bold.
  • Good examples [1] [2]

Tactility

  • People love well-crafted things that feel hand-made.
  • Make your website come to life with subtle textures, box-shadow, text-shadow to give your text an "engraved" feel, and transparent images.
  • Google box-shadow, text-shadow, png8 transparency, and background image tiling to learn more
  • Good examples [1] [2]

References

The Lay of the Land

The Lay of the Land

  • "Front-end"
    • HTML: The Bones
    • CSS: The Meat
    • Javascript: The Animus
  • "Back-end"
    • In the body metaphor, everything in the back-end is The Brain. Programs that do the thinking, databases that remember.
    • Programs in any language, running on server. Common languages are PHP, Python, Java, C++, more...
    • Databases that store the information served, like MongoDB, MySQL, etc...
    • Content Management Systems like Drupal, Joomla, Wordpress, etc...
    • Hosting like on your H: drive server space, on Amazon Web Services, GoDaddy, etc...

HTML: Hypertext Markup Language

  • Defines what's on your page. "The Bones"
  • Consists of opening tags and closing tags, as well as a couple of stand alone tags (e.g. the img tag) that have no closing tag.
  • Format: <element attribute="value">stuff</element>
  • Example:The basic skeleton of a web page:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body>
    </html>
  • Anything to be displayed on the page goes between the body tags. The head is used for things that aren't supposed to be displayed, like CSS, Javascript, or metadata.

HTML: Hello World

<html>
<head>
<title>Hello World</title>
</head>
<body>
<!-- This is a comment on my first webpage! -->
<h1>Hello World!</h1>
<img src="images/earth.gif" />
</body>
</html>

HTML: References

HTML: Good Things to Know

  • HTML is white-space independent, so you can use line breaks, and indent however you want to make the code easier for you to read. This also means that it strips extra spaces, so if you need extra spaces, use the special character for spaces.
  • Color codes in HTML and CSS are in hexadecimal. Use a color picker to help you find color codes
  • HTML will render on the page if you miss a closing tag, but you can't be certain that it will render correctly, and you may notice right away that something's weird. Always close your tags!

CSS: Cascading Stylesheets

  • Defines how the elements tagged in HTML should be displayed. "The Meat"
  • Format: selector { property: value; property: value; }
  • "Cascading": properties set for parents are inherited by children. If a property is set multiple times, the last setting is used.
  • Example:
    body { background-color: #000; color: #fff; }
    p { color: #ffff00; }
    • Sets body background to black and text to white. In paragraphs, however, the color is set to yellow.
  • Can be included in your webpage either by
    • Between the "head" tags:
      <style type="text/css">
      body { background-color: #000; color: #fff; }
      p { color: #ffff00; }
      </style>
    • Between the "head" tags:
      <link rel="stylesheet" href="css/style.css" type="text/css" />
      [replace css/style.css with the path and filename for your stylesheet]

CSS Selectors

  • An important tangent: "Document Object Model" (DOM).
    • Web pages represented as "trees" of "elements" that have "attributes" or "properties" that can be assigned "values".
    • Elements include body div p ul ol li h1 h2 h3 h4 img table a form input ...
    • An element is the "child" of another element if it is declared between the tags defining the "parent" element. e.g.
      <p>This is a paragraph. <img src="image.jpg" /> The paragraph is about to end!</p>
  • CSS selectors (and Javascript selectors) use DOM. Select all paragraphs and make the font 12pt Times New Roman:
    p { font: 12pt 'Times New Roman', serif; }
    Select all images and make them float right:
    img { float: right; }
    Select all images in paragraphs and make them float left instead:
    p img { float: left; }
  • Other important concepts of selectors:
    • Classes: defined in HTML as an attribute class="name-of-class"
      Selected in CSS as .name-of-class
    • ID: defined in HTML as an attribute id="name-of-unique-thing"
      Selected in CSS as #name-of-unique-thing
      Should only have one item of an id, whereas many items can share a class.
    • Pseudo-classes: part of the CSS language. Looks like :pseudo-class
      Most commonly used: :hover which allows you to change appearance of an item on hover.
      These are really useful and a lot of experienced web designers don't take full advantage of them.

CSS: Some Good Practices

  • Link your stylesheets instead of writing styles in the head. <link href="style.css" type="text/css" />
  • Use the Box Model of webpages. Describe your page in boxes (div tags) instead of tables, and use CSS to manipulate the boxes.
  • Use line-height and letter-spacing properties to control leading and tracking.
  • CSS probably has a property to do what you want, you just haven't found it yet. Absolutely do not do something manually (in HTML) unless you can't find a solution in CSS. (It will be a pain in the butt to change later).
  • Use Eric Meyer's Reset CSS to help with browser inconsistencies
  • Use Google Web Fonts to choose from a variety of beautiful fonts optimized for web instead of from a few fonts that you can safely count on finding on every viewer's computer.

CSS: Demos and References

The Process

Typical Workflow

  • Concept/Vision
  • Mockup (Photoshop or Illustrator) and storyboards
  • Save images from mockup that will be used in design (e.g. background pattern, banner) [note: always save as PNG or JPG]
  • Local development (HTML/CSS/Javascript)
  • Check browser compatibility
  • Upload to server (H: Drive, AWS, GoDaddy, Dreamhost...)
  • Continue tweaking and make sure anything server side works OR integrate with CMS
« »