- View Offline
- 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
Skill Level Beginner
The second concept we'll examine in this section on foundational topics in web design, is composition and the grid. When organizing content in 2 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 size 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 the grid layout system for the web. First, you'll need to pick a grid-layout system. Most include a max width, a set number of columns, and even gutters. And if you're 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 site's 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 the 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 1, Heading 2, Heading 3, 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 3, 18 points for Heading 2 and 20 points for Heading 1.
You can easily adapt this concept to working with m's, percentages or your preferred unit of measure. There's also a jQuery plugin called FitText that resizes your 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 a 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 your gutters are even both horizontally and vertically. Good alignment is the hallmark of good organization. The fourth concept is use whitespace. 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 require 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 linearilized 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, whitespace, and responsive scaling, can help you keep your web layouts organized and meaningful.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.