Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
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.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.