Contents

Last modified December 21, 2009

The Basics of Design

  • The basics of the site (re)design – Redesigning Foodbox

    We walk through the redesign process at a high level, digesting some user requirements and forming a plan to tackle them.

  • Choosing Colors

    We talk about color theory, and you learn to build color schemes using color wheels (the Technical method) and from photographs (the Natural method).

  • Fonts and Typography

    You learn about fonts and what makes type readable on web pages. You’re also introduced to the Baseline Grid.

Graphics

  • Designing the Foodbox Logo

    We discuss logo design and you learn how to use Illustrator to create a vector logo for Foodbox.

  • Design Mockup – The Structure

    You learn to mock up a design using layers.

  • Design Mockup – The Content

    You learn how to manage multiple elements in a mockup by grouping items and adding fake text

  • Putting the finishing touches on the Mockup

    You prepare the mockup for display by adding in some final images and modifying type.

Building the Site

  • Building the Home Page with HTML

    You learn about HTML vs XHTML, and about how to use semantic markup to describe your content.

  • Creating Assets From Our Mockup

    You learn about image optimization and we take elements from our mockup and export them to images we will link to from the stylesheets.

  • Defining Your Layout with CSS

    You learn how CSS works so that you can use it to shape your skeleton page into somethign that resembles your mockup.

  • Replacing the Section Headings using the Coverup Method

    You learn how to use CSS and your slices from your mockup to replace the headings.

  • Adding Styles

    You learn how to add colors and fonts to the layout, finishing up the design.

Preparing For Launch

  • Working with Internet Explorer and Other Browsers

    You learn techniques to make your site work across multiple browsers, and we discuss what’s important and what isn’t when doing so.

  • Accessibility and Usability

    You learn in more detail things to be aware of when designing web sites for large diverse audiences.

  • Building a Favicon

    Learn how to build a favicon from the vector logo you created.

  • Search Engine Optimization

    We discuss what helps (and hurts) your sites.

  • Designing for Mobile Devices

    You learn how mobile devices see your site and how to adjust for your users.

  • Testing and Improving Performance

    We talk about techniques to speed up your site, including compression, caching, and minification.

  • Where to Go Next

    We talk about CSS frameworks, jQuery, static site management tools, CSS generation, and making a second-level template.

  • Recommended Reading

    Additional resources you will find useful on your journey towards becoming a designer.