Most designers wireframe their designs in one way or another, even ifit just involves them making quick sketches on the back of some scratchpaper. Wireframing is an important part of the design process,especially for more complex projects.
Wireframes can come in handy when you’re communicating with clients,as it allows them to visualize your ideas more easily than when you justdescribe them verbally.
This guide covers what you need to know about website wireframes to get started.
Wireframing is really the first step in the design process. Unless the site you’re designing is incredibly minimal and simple, wireframing helps clarify exactly what needs to be on the different page types of your website.
By taking the time to create at least a simple wireframe, you canmake sure that your designs will take into account all the differentpage elements that need to go into the design, and that they’repositioned in the best possible way.
Wireframes are also cost-effective by saving you potential time lostdue to revising a high-fidelity comp. Wireframes can easily be revisedor discarded.
Wireframes give your page layouts a great starting point and a solid foundation.
Wireframes, mockups, and prototypes are sometimes usedinterchangeably, but they are three different things (though there issometimes some overlap between them). Each one has a slightly differentpurpose that it gives to the design process.
Wireframes are basic illustrations of the structure and components of a web page. This is generally the first step in the design process.
Mockups generally focus on the visual designelements of the site. These are often very close or identical to theactual final site design and include all the graphics, typography, andother page elements. Mockups are generally just image files.
Prototypes are semi-functional webpage layouts of amockup/comp that serves to give a higher-fidelity preview of the actualsite being built. Prototypes will have the user interface and is usuallyconstructed using HTML/CSS (and even JavaScript for showcasing how thefront-end interface works). This stage precedes programming the businesslogic of the site. While they might not have full functionality, theygenerally give clients the ability to click around and simulate the waythe site will eventually work. Prototypes may or may not also includefinalized design elements.
Wireframes come first. What follows — either prototypes or mock upmodels — is largely going to be dependent on the type of site you arebuilding. If it’s a web app rather than a simple static website, it’slikely going to benefit from prototyping.
Creating a wireframe can be as simple or as complicated as you want.In its most basic form, your wireframe might be nothing more than asketch on some graph paper. Other "wireframes" are created digitally andare really more like prototypes, with clickable objects and limitedfunctionality.
The type of wireframe you create will depend on what the individualproject requires, as well as what your own workflow is like. Morecomplicated projects will likely have more complicated wireframes, whilesimple sites might have simpler wireframes.
Your wireframes should include enough information to reflect whatneeds to appear on each page of your website. Think about the generalelements of most web pages: headers, footers, sidebars, and content areas.
Then think of additional elements your specific project will have:dynamic widgets, basic site features such as search bars and navigation,graphics, and so forth.
Once you have an idea of what your site will include, start creating your wireframes based on those elements.
How detailed you want to get will again depend on the project and thepurpose of the wireframe. If your wireframe is just going to serve as aguiding document for your own reference, then you don’t want to get tooinvolved in the wireframing process. On the other hand, if it’s goingto be used by more than one designer or developer, or presented to yourclient, then it needs to be more formal.
You have a couple of options when it comes to the style of yourwireframes. Some designers opt for low-fidelity (low-fi) wireframes thatare basically just lines on a plain background with some labels. Theseinclude both hand-drawn and digital wireframes, and they’re usually verysimple.
High-fidelity (hi-fi) wireframes go one step further, using certaindesign elements within the wireframe. This might include the logo orsome other basic graphics, as well as the color scheme and other visualdesign elements.
Wireframes like this start approaching the level of mockups, but theycan be invaluable in conveying a sense of what the website will looklike, especially to clients who might have a hard time visualizing what awebsite will look like based on a low-fi wireframe.
There are dozens of different ways to create wireframes, ranging fromsimple, pen-and-paper sketches to more complex diagrams that lookalmost as polished as production websites.
There are also different approaches to the purpose and reasoningbehind creating wireframes, depending on the needs of individualdesigners and projects. Here are some resources about differentprocedures for creating website wireframes.
Wireframing with InDesign and Illustrator
UXmatters has a great article on how to wireframe using AdobeInDesign and Illustrator. They talk about what led the to the decisionto use InDesign and Illustrator over other products, as well as how theygo about using these two applications to create their wireframes.
Jason Santa Maria has a fantastic post about the "Grey Box Method" ofcreating wireframes. He outlines his entire process for creatingwireframes, from sketching on paper to creating a grayscale wireframe inIllustrator. He includes examples from a couple of different sites toillustrate his points.
While this post isn’t dedicated entirely to the process or method ofcreating wireframes, it does include some valuable information on both,especially in terms of how to make the wireframing process better fordesigners, developers, and site owners.
20 Steps to Better Wireframing
This post from Think Vitamin lays out in 20 steps exactly what youshould be doing to create awesome wireframes. It’s a fantastic post tocheck out whether you’re completely new to wireframing or just unhappywith your current process.
While it varies for everyone, there are a handful of fundamental steps to creating a wireframe.
You’ll likely start out with a list of things the site needs toinclude or a formal design specification document. Some designers mightdive right in from there, ticking things off their list as they add themto the wireframe, either in an app or on paper.
Others like to start out with a "big picture" look at the overalldesign, adding details in once they’ve got the basic layout foundationspinned down.
Whether you decide to sketch things out on paper or work withsoftware initially, don’t rule out either method. Some designers makerough sketches on paper and then move over to software to create morepolished wireframes. Others go straight for the software. Still othersstick purely to paper wireframes.
Just remember that if you get stuck, changing formats can work wonders for your creativity.
You’ll probably want to try a few different ideas in your wireframesbefore you settle on one design. Wireframing is the best stage to dothis, as you have the least amount of time and energy invested and canmore easily make changes and try new/experimental things.
Once a basic wireframe is created, you may send it around to otherteam members for feedback or put it away for a day or two to reviewagain.
Once you’re happy with it, it’s time to either share it with theclient for feedback or to start working on mockups based on thewireframe.
There are many great tools for wireframing available at yourdisposal. Some are specifically made for wireframing, while others aremore general-purposed but work particularly well for the task.
The tools you decide to use will depend on personal preference andproject requirements. There is no "best" tool for wireframing; it’swhatever you’re comfortable using and whatever works for you.
Pen (or pencil) and paper are the most basic tools you can use tocreate a wireframe. Graph paper works particularly well, as it allowsyou to create relatively clean wireframes without having to break out aruler. It’s also useful to have grid lines to create elements inproportion.
You might want to use a pencil for your initial sketches, so you canerase things without having to start over. Then, as you finalizedifferent parts, you can trace over them with a pen to prevent erasingthe wrong elements.
You may even consider using colored pens and pencils to differentiatebetween elements or to add more meaning to your wireframes bycolor-coding things; for example, one color for a group of elements canbe helpful, as it helps instantly identify items within your wireframeas they’re moved around on different page layouts.
Using Post-it notes/sticky notesin your paper wireframing process makes it easy to rearrange differentdesign elements without having to re-sketch the whole thing.
Web-based wireframing tools almost always include the ability toshare wireframes with other team members or clients. They also have theadded advantages of being accessible from anywhere and beingcross-platform compatible. Following are a few examples of browser-basedwireframing tools.
Mockingbird works in Safari, Firefox and Chrome and has a number ofunique features. One of the better time-saving features is that it hasautomatic text resizing: If you change the size of a button or similarelement, Mockingbird changes the text size to match. It also lets youcreate multi-page wireframes with links.
Lovely Charts can be used for wireframes or a variety of othercharts. It has an intuitive, drag-and-drop drawing interface, whichmakes it incredibly easy to use. It also makes assumptions based on thetype of chart you’re creating, to help you create charts faster.
Cacoo is another free online wireframing tool that uses drag-and-dropelements to speed up the wireframing process. It includes publishingoptions for your wireframes that lets you share them publicly withanyone who knows the URL, though editing and managing of wireframes isall handled through an SSL connection for privacy.
Lumzy can go beyond just wireframing and into a fully-featuredprototyping tool that lets you add events to controls, put controlsinside other containers and emulate the finished project with triggerscaused by user actions. It also includes live chat, real-timecollaboration and an image editor.
Jumpchart works for both wireframing and prototyping, with plenty oftools for showing page hierarchy and relationships between pages.There’s a free plan that allows for up to two projects and twocollaborators. Jumpchart also lets you export your finished prototype toWordPress (with the paid version).
Balsamiq Mockups aims to reproduce the experience of sketchingwireframes, and because the end results look more like sketches thanformal designs, it maintains the metaphor of sketching out a wireframeon paper. Balsamiq Mockups has plenty of collaboration and sharing toolsas well.
Google Drawings is just starting to gain some traction as a viable wireframing app. It’s part of the Google Docssuite of software, and is completely free to use. It works similarly toother online drawing apps, with predefined shapes and the ability toadd text. What really makes it useful, though, is that there’s a set of templates (from Danish UX designer, Morten Just)specifically for Google Drawings that you can use to create websitewireframes. Drawings also lets you work collaboratively with multiplepeople, and even allows sharing your drawings publicly online.
JustProto is designed for prototyping of web and desktop apps, thoughit can also be used for wireframing websites. It includes over 200icons and banners you can use in your wireframes and you can createmaster pages to use as a framework to avoid repetitious work. There’s afree plan available that lets you manage one project, while paid plansstart at $19/month.
Creately is a diagramming app that includes a library of objects andshapes and a drag-and-drop drawing interface. It includes a variety ofcollaboration tools, including versioning and short URL publishing.
Most desktop wireframing apps have some way of sharing wireframesbetween team members, although it sometimes requires others to downloadspecial software, or wireframes are just shared as flat images, whichmakes team editing much more difficult.
Hybrid apps, on the other hand, generally have both online and offline modes, offering the best of both worlds.
MockFlow is an online/offline hybrid app that lets you create andcollaborate on wireframes. It includes a large library of mockupcomponents ready for you to use, as well as a variety of publishingoptions (including PDF and PowerPoint export). The free plan allows forone mockup with up to four pages and two collaborators.
iPlotz is another online/offline hybrid that has a downloadabledesktop client. It has both collaboration and project managementfeatures, making it a great choice for teams. The online versionincludes a free plan as well as paid plans; the desktop app is $75.
Pencil is a Firefox plugin for creating wireframes and prototypes. Itincludes an on-screen text editor (with rich text format support),export to HTML, PNG and other file formats, built-in stencils, and more.Because it’s a Firefox plugin, it’s operating-system-independent. There are also standalone builds of Pencil for Linux and Windows.
Prototype Composer is a web app prototyping program. It lets youbuild usable applications that closely mimic the experience yourend-users will have, all with a graphical UI that doesn’t require codingknowledge. There are Professional and Community (free) editionsavailable.
The big advantage to using HTML and CSS for your wireframes is thatyou’re giving yourself a head-start on coding your actual pages. Thedownside is that it’s easy to get sucked into actually designing andcoding the site, rather than just creating a quick wireframe. Yourwireframe can very quickly become a mockup or full-fledged prototypemuch earlier than it should.
But again, wireframing with HTML does give you a head start on thedesign and coding process. If you can resist the urge to do too much,it’s a fantastic option. To learn more about HTML-based wireframing,check out the following article:
HTML Wireframes and Prototypes: All Gain and No Pain
This article on Boxes and Arrows, a leading site on the subject ofdesign, discusses the benefits of wireframing and prototyping usingHTML.
Using templates and stencils for your wireframes can greatly speed upthe process, especially if you opt to use pen and paper forwireframing, or programs that weren’t specifically created forwireframing (like Adobe Illustrator). Below are more than a dozentemplates and stencil kits, all free to use.
OmniGraffle Wireframe Stencils
This OmniGraffle stencil set from Konigi includes pretty much any UIelement you might need, including browser chrome (borders around a webbrowser window), controls, basic shapes, tabs, video players, and more.
Fuel Your Interface offers this free wireframe kit that includes avariety of UI elements, including buttons, breadcrumbs, dialog boxes,and more.
Yahoo! Developer Network Design Stencils
Yahoo! offers these free UI stencils for a variety of applications,including OmniGraffle, Visio, Adobe Illustrator and Adobe Photoshop. Thestencils include everything from grids to ad units to menus andbuttons.
This wireframe kit from Johnny Nines includes a variety of shapes andelements, like buttons, headings, lists, and tables, for creatingwireframes in Adobe Illustrator.
Here’s a printable stencil for hand-drawing wireframes that includes six browser windows, plus space for notes.
Free Sketching & Wireframing Kit
Janko at Warp Speed offers up this set of sketched wireframingstencils, available in a number of file formats: Adobe Illustrator, SVG,PDF and EPS.
Ben Martineau has released this set of grids for sketchingwireframes. Included are 16-column, 12-column, 10-column, 5-column,4-column and 3-column grid structures.
This sketching paper template includes a basic grid with browser chrome and an area on the side for your notes.
Sqetch is an Adobe Illustrator toolkit that includes a number oftemplates and elements, including iPad and browser chrome, GUI elements,and form elements.
Here’s a very basic wireframe template, with space for sketching, and title, and notes.
Konigi offers a few different printable graph paper templates,including a storyboard (with and without notes), portrait and landscapewireframes, and a wireframe with notes.
Dragnet Website Wireframes Kit for Adobe Fireworks
Dragnet offers this free wireframe stencil kit for Adobe Fireworksthat includes a variety of UI elements like buttons, drop-downs, andtabs.
Free Wireframe Stencils for Keynote
Here’s a great set of wireframe stencils for Apple’s Keynote program.It includes all the basic UI elements you’d expect to find: buttons,modal windows, tabs, headings, dialog boxes, and more.
Sketching out wireframes can be a great way to think through thedesign of your website without spending hours working on mock-ups inPhotoshop or coding preliminary designs. Wireframing can let you workthrough a number of design and layout ideas quickly and at little costbut your time.
Take a look at the design specification documents you have that tellyou exactly what elements you need on the site. Then just dive in andstart arranging them on the wireframe. Don’t be afraid to trynon-traditional things at this stage. Remember, it’s just a wireframe. Amistake or a failed attempt at this point isn’t going to set you backdrastically. Crumple up the piece of paper, chuck it in the recyclingbin, and then start over. Release your creative inhibitions at thisstage.
Presenting wireframes to your clients can be a valuable way to makesure everyone is on the same page prior to creating the actual designmockups. It’s much easier to change around the position of elements onthe page when you’re working with wireframes than it is with Photoshopdesigns or coded pages.
Wireframes as a deliverable also displays the craftsmanshipyou put in your work. Be sure to, however, bill appropriately for theadditional time that wireframes tack onto your design process.
Of course, if you’re going to be using your wireframes asdeliverables, you’ll want to make sure they’re professionally devisedand not just scribbled on some plain paper or the back of an invoice(unless your client expects it to be that way).
The tools we already mentioned above can all work to create more professional-looking wireframes for showing your clients.
One of the biggest considerations when creating deliverablewireframes is how polished they should look. There are generally twoschools of thought on this.
One viewpoint of the "polished vs. sketchy" debate asserts thatanything going to a client should be as polished and formalized aspossible.
The other viewpoint argues that offering the client a polishedwireframe makes them less likely to request changes because things feelmore "finalized." In other words, sketch-style wireframes feel lessformal and are more likely to get honest feedback.
There are pros and cons to either approach. Polished wireframes canoften help a client better visualize what the site’s layout willeventually look like. Adding in things like color or minimal graphicscan go even further toward this end. However, you run the risk that yourclient won’t offer honest feedback because they feel the project is toofinalized already.
On the other hand, sketchy wireframescome across as more like "rough ideas" and seem more inviting to clientfeedback. The downside here is that clients who aren’t particularlyvisually oriented or creative, or who lack familiarity with what websitewireframes are, may have a hard time imagining what their site is goingto look like or might be confused as to why their site looks like itwas hand-sketched.
Combining both polished and sketchy wireframing styles may work bestfor some. You could also use sketchy wireframes combined with a mood board that gives an idea of how the color scheme, textures, typography, and other visual elements will look.
To conclude this guide, here are a handful of web resources dedicated to design wireframing for you to peruse.
I ♥ Wireframes is a Flickr group that showcases a wide variety ofwireframes from designers around the world. They currently include morethan 780 wireframes and have over 1,800 members.
This Tumblr blog showcases outstanding wireframes from all over, andis also associated with the I ♥ Wireframes Flickr group above.
Wireframe Showcase is a gallery site that features wireframes alongside the completed designs they represent.
Wireframes Magazine covers all things wireframe-related, includingtons of stencils and wireframing templates, as well as examples andinspiration.
Web.without.words takes a sort of antipodal approach to wireframing,showing a different popular site each week and reverse-engineering awireframe for it by blocking out the actual content.
联系客服
