Wireframes are the basics of web design. With it we lay out our content and modules for the design we create and use it as a way to keep our designs organized. You can create a wireframe with just about any program you have available or draw it out on paper. For this article we’ll use Illustrator’s grid guidelines to create a simple wireframe.
To start we will create an 800 x 800 pixel art board and use that as our basis for the whole layout. We’ll call it the background to make it simple.
Step 1: Create an 800 X 200 pixel rectangle and position it toward the top of the background. We call this the header and use it to hold the site’s title and navigation.
Step 2: Next is the content. This is where all the fun information of the site goes along with images. We set it with a 600 x 400 pixel box and placed it below the header on the left side of the background.
Step 3: We will now add the sidebar to the wireframe. This is where all the extra content goes like update notes, a bio snippet if this is going to become a blog layout, or you can add what we call widget here that do extra fun things like a game or popular news articles. We set it up as a 200 X 400 pixel rectangle and this sits to the right of the content box below the header.
Step 4: This is the last step in our easy wireframe set up. The footer is where the copyright information is placed along with some extras like social media buttons or a miniature site map.
The setup should fit an 800 X 200 pixel rectangle below the content and sidebar boxes.
This is just a simple wireframe layout. There are actually many more items that can be added to create a more dynamic wireframe. Some extras include actual picture boxes, content boxes, and video boxes, and many more. Let your imagination go wild and set up a wireframe to your liking.
- Krista Nelson
http://webdesign.tutsplus.com/
0 comments:
Post a Comment