In the new and exciting world of UI (user interface) design, wireframing is a crucial part of creating a great website. When coming up with your initial design, wireframes can help define what information is most important, and how you expect visitors to process that information. Below, we've outlined why wireframing is the foundation for today's web design, and why it helps to improve the user experience.
What is a Wireframe?
Essentially, a wireframe is a sketch or blueprint for how your finished webpage will look. The entire page is ordered into a hierarchy, starting from the top (i.e. the header) and working your way down to the bottom (the footer). As you sketch out a wireframe, try to put yourself in the average visitor's shoes, and arrange the content so that it's effortless to understand. Your header will be the first thing that visitors see, so make it count!
Once you've created a basic wireframe, it will be much easier to make design decisions about colors, images, and other details. Remember, without a quality user interface, it doesn't matter how shiny and colorful your website is. Here are a few techniques for creating a wireframe from scratch:
- Choose Your Tools: There are a variety of software programs to help with the wireframing process, and they all have their benefits and drawbacks. If you're just starting out, we recommend using Adobe Illustrator for your wireframe. It's an industry standard for graphic design, and it's easy to export files to Photoshop when you're ready to add more visual detail. If you can't afford the Adobe suite, you can also build quality wireframes online with tools like Mockingbird and MockFlow.
- Create a Wireframe Grid: When designing your wireframe, it helps to have a defined grid, so that you know how the page will look on a range of devices. Within your chosen design program, create a "New Document" and set the dimensions to 1280 x 900 pixels. This will provide more flexibility between different mobile resolutions. Next, download the CSS Grid (or a similar template) online and paste it into your design document. This will allow you to create a responsive wireframe layout, with clean dimensions.
- Design the Layout: With a grid in place, you can start drawing boxes that represent the various sections of your webpage. When making each design decision, consider how users will process the information. Typically, visitors will begin at the top of a page, scanning from left to right like a book. In most cases, you'll want to place the company logo and navigation buttons at the top, followed by a main banner image, and then links to the site's other features. Once you've established a basic layout, you can fill in each box with more text and visual detail.