From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Establishing the layout grid - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Establishing the layout grid
Because the planning stage of the design process is so critical to a site's success, I want to take a few movies to walk through my typical workflow. I want to start by illustrating the use of grids for planning layouts. Although I use a grid as the basis of all my layouts, fixed layouts lend themselves particularly well to grid-based designs. If you're already a graphic designer, I'm betting that you're pretty familiar designing around a grid; and if you are not, I think you'll soon see the advantages that grids give you when creating layouts. So I am going to be working with this file fixed_planning.ai, and here I am again, of course, in Illustrator. Now, I have saved the finished version of this file in the Assets folder, which is a located directly in the exercise files folder, and if you want, you can open it up. And of course you are going to open up the finished version of what we are going to be doing here. Actually, what I would most encourage you to do is to just grab a…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
Design considerations for fixed layouts3m 28s
-
(Locked)
Establishing the layout grid7m 57s
-
(Locked)
Defining column spacing9m 30s
-
(Locked)
Applying the grid through CSS8m 56s
-
(Locked)
Creating grid-based assets8m 26s
-
(Locked)
Grid design resources6m 22s
-
(Locked)
Building fixed layouts: Lab4m 7s
-
(Locked)
-
-
-
-