Layout
When you begin the process of creating a web page, you normally don't start by figuring out what colors or fonts you want to use. Instead you would start by thinking about what your website does and how you would structure the page according to these needs. Once you have the idea, you need a way to to set it up. This is where grids come in. The layout of a page is often created through grids. Grids are outlines that help determine where content on a website goes.
About Grid-Based Layouts
"Grids are a lot of work. But they are totally worth it. You need a grid. Don't let anyone convince you otherwise."
- Carrie Cousins
Grid-based layouts make website design simpler and bring more users to sites. The use of grids allows web designers to make visually-appealing, user-friendly web pages based on simple designs. You want to communicate information clearly and quickly to users, since most website visitors only stay for a few seconds. Eye-catching visuals are often the key to grabbing users attention, but they can also be distracting if poorly designed. Grids can allow for creativity, but they also ensure proportionality.
Structuring your website
"The grid is a regulatory system which preempts the basic formal decisions in the design process. Its preconditions help in the structuring, division and ordering or content."
- Mark Boulton.
Grids provide structure for design. They place information and visual content into logical, measured columns and rows. This provides visual balance and is pleasing to the eye, improving the user experience. Almost all websites use grids, even if you cannot tell. Sometimes it's obvious, sometimes it's not. The grid isn't new, it's based off of print design -- think newspaper columns. It's used to help stay consistent; organized, uniform elements and content ensures that users won't be visually distracted or confused.
TIPS/GUIDES
Four Tips to Create The Perfect Layout
1. Set an overlay of your gird onto your design
2. Create some guides to help you
3. Try to work within constraints and restrictions
4. Pay attention to your spacing
|
Seven Pro Tips to Creating Balanced Page Layouts
1. Use a grid
2. Choose a single focal point
3. Use the Rule of Thirds
4. Use white space
5. Repeat design elements
6. Use hierarchy
7. Use scale, contrast, and harmony
|