Students explore the concept of composition and using the grid to organize space.
- [Narrator] The next concept we'll examine regarding the designer's role in the web design work flow, is composition and the grid. When organizing content in two-dimensional space, one of the best ways to keep the viewer from being overwhelmed by information is to organize the space using a grid-based layout system. In fact, with the grid as your armature, you can easily arrange objects within your web layout in such a way that the space looks organized and uncluttered while still being aesthetically pleasing.
After all, your main goal is to compose your design in a meaningful way that promotes the site to the desired target audience. Of course, using the 960 grid or some other sized grid-based layout system alone will not guarantee a lovely site. The fact is that there are plenty of websites out there that follow the rules, yet are still uninteresting or unattractive. What you will find on the internet however, is that the most visually pleasing websites often do use a grid-based layout system of some kind, so let's examine some of the main features of working with a grid-layout system for the web.
First, you'll need to pick out a grid-layout system. Most include a max width, a set number of columns and even gutters, and if you are lucky the documentation that comes with the source files, will be easy enough for you to figure out. For instance, let's take a look at the Responsive Grid System. This site itself uses its own grid system and provides plenty of examples of ways to compose your space. As you can see, and I'll just scroll down as I talk, as you could see the layout here is divided up into several horizontal sections and within each you have a set number of columns and rows.
There's even an area further down here that shows you how the grid is broken down into a set number of columns and this can help you envision different ways for you to organize your sites content. If you haven't worked with any grid-based layout systems yet, there are several open source options available to you online. Here is a nice list of a few of the more popular options including the 960 grid system, the responsive grid system and Twitter's Bootstrap which is probably the most widely used system right now.
The second feature to understand when working with a grid-based layout system, is that you need to work with ratios. With ratios you can size objects and text, in such a way that they'll scale up and down proportionately. This means you may want to stack the sizes of your fonts for heading one, heading two, heading three, paragraph and so forth, so that each format is a set number of increments from the next. Using points for example, that could be 14 points for paragraphs, then 16 points for heading three, 18 points for heading two and 20 points for heading one.
You can easily adapt this concept to working with ems, percentages or you preferred unit of measure. There is also a jQuery plugin called FitText, that re-sizes you text based on percents. You can learn more about the plugin on this website. Likewise, you may want to work with ratios when sizing your images, such as 100%, 80%, 60% and so forth. The third concept is to align everything.
Align your text, align your columns, align your nav buttons and align your images. Make sure you gutters are even, both horizontally and vertically. Good alignment is the hallmark of good organization. The fourth concept, is use white space. Don't be afraid of open spaces. Just because the web grid layout system uses a set number of columns doesn't mean that you're required to fill them in. Go ahead and leave an area blank if it makes sense to your overall design.
The fifth and last concept to understand when working with a grid-based layout system is, think in terms of responsive or adaptive design. Your layout, that is your text, your images and all your other design elements must all continue to look good when scaled up and down for different devices. When choosing how many divs to have in any one row. Think about how the content will flow when it's linearized for tablets and smart phones. For instance, five or seven divs across, might not scale down as smoothly or evenly, as four, six or eight.
Studies show that organized information is much easier to grasp than disorganized. Using a grid layout system, when you're consciously aware of ratios, alignment, white space and responsive scaling, can help you keep your web layouts organized and meaningful.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices