The stage in which a designer takes a project concept from a client and puts it into a visual form can be a tricky one.
Before the construction of the website or application begins, a designer should put together workflow diagrams, wireframes, mockups or any other visual materials that serve as a guide for the development of the project and clarify expectations between both parties. Efficiency is the key here. One of the main reasons to set aside time for wireframes or mockups is so the designer doesn’t end up building something the client doesn’t like or need.
What’s a Wireframe?
Wireframes can be thought of as a website skeleton. It’s what we scribble on whiteboards, notepads or sometimes napkins. These are the most basic visual representations of the potential layout of a site. Usually done in black and white, wireframes position elements such as the header, navigation and content areas. The objective of a wireframe is to show what information and functionality is to go on a page, not exactly what it will ultimately look like.
What’s a Mockup?
If wireframes are the skeleton, mockups are the skin. They bring style, color and graphics into the design process to show the end result, without actually building it. Mockups are often done for an overall website page or screen, but they can be used for multiple levels of the site. Logos and branding materials may go through more mockup versions than any other element on the website.
Other Visuals
If a wireframe or mockup isn’t in the cards, at a minimum, a sitemap should be put together. A basic sitemap creates the information architecture and demonstrates how the navigation of information will “flow” for users. For websites or applications that have more complex functionality, additional visuals may be necessary. Similar to a sitemap, workflow diagrams or flowcharts can demonstrate the possible paths a user might take. These processes may outline the steps a user must take to create an account or something beyond basic site navigation.
Web-Based Wireframe and Flowchart Tools
There are plenty of free, web-based options for putting together simple wireframes:
- Mockingbird: Very user-friendly wireframe tool that supports multiple page structure, collaboration and exporting to a PDF document.
- MockFlow: Similar to Mockingbird, but has the option to download the application in order to develop wireframes offline.
- Gliffy: Excellent web-based application for creating flowcharts, diagrams, wireframes and more.
Free Image Editors
When you’re ready to polish up the wireframes and add some color, you’ll need some image editing software. If you don’t have Photoshop or Illustrator, don’t sweat it. Here are a few options for free editors:
- GIMP: One of the most popular free image editors out there. Available for Windows and OSX.
- Paint.NET: Another popular image editor for Windows.
- Pixlr: Flash-powered image editor that looks strikingly similar to Adobe Photoshop. Since it’s web-based, it can be used on just about any OS. There’s even an iPhone and Android app.
Choosing the Method That’s Right For You
If you’re already proficient with Adobe Photoshop or Illustrator, stick with it. There’s certainly a learning curve to image editing software, so you should use what you are comfortable and efficient with. Some of the web-based wireframe tools have been designed to be very user friendly, but are obviously limited in the amount of color, graphics and customization that can be applied. Choose the method that works for the project and works for you.