From the course: CSS: Float-Based Page Layouts (2012)

Page design workflow - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Page design workflow

In this chapter I want to focus on the process of designing page layouts and creating the initial structure of your page. Now unlike the rest of this course, many of the movies in this chapter will not be hands-on; rather, they're going to focus on the overall concepts of page-design workflow. One of the biggest misconceptions about a web design is that web designers spend most of their time working in code. Now the reality is that on most sites designers spend the majority of their time in the planning and design process. Now not all processes are the same, and designer workflows are going to very widely based on the personal preferences of the designer, the size of the team, client type, or specific site requirements. But with these variables in mind, I want to take a moment to discuss my own personal workflow and the tools that I use. Your own overflow is likely to differ from mine, but if you're new to designing web sites, this should give you a few things to consider when creating your own workflow. First I take on what I refer to as the discovery phase. In this phase I'm interacting with the client to identify what the goals of the site are, what users should expect from the site, what type of functionality the site will require, and what the site's content is going to be. Now I then use this information to begin to create wireframes and prototypes. Depending up on the site, this might range from simple sketches all the way to fully realized prototypes. The idea in this phase is to make sure the site architecture is sound, that content is organized within the site properly, and the site functionality has been thought through to make it is as usable as possible for the target audience. Around this time I'll also start working on color and type treatments for the site. Now color and typography are critically important to communicating brand and establishing the proper emotional response from users, so I'll usually play around with establishing typographic rules for the site, such as which fonts are going to be used and when and how headings and body copy should relate to each other. With color I'll establish primary colors and secondary colors and begin to set rules for how the colors are used within the site. If I'm working with a client, once I'm sure that the decisions on functionality, site structure, and color, and type are finalized, I'll begin to generate page mockups. In some cases I'll simply generate quick sketches that give me an idea of how page design will look, but most of the time I like to generate very detailed page mockups in programs like Fireworks, Illustrator, or Photoshop. Now these mockups give me several advantages. They allow me to refine the design with the client without having to generate code, and they give me the ability to create site assets directly from the mockup with pixel-level precision. I can export out things like images and icons while having a precise design that allows me to plan page structure and styles. In fact, most of the time I know what my HTML and CSS will be before I ever start working in a code editor. Now obviously this is a very high-level overview of the page-design process, and it's certainly not going to be the same for everyone. What you need to do is develop a process that works for you, supports your design aesthetic, and ultimately meets the needs of your clients and the site's users.

Contents