Web Design for Developers

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.