Best Wireframing Practices for Website Construction

When you (or your team) have embarked upon the “design phase” of a project, it’s important to wireframe your site’s layout before jumping into a mock-up or “skinned” prototype.

The wireframe (or wire) functions in the same way that a blueprint or box model does for a construction company: It gives you basic shapes for reviewing the relationship between foreground and background, form and negative space. Boxes can be moved. Grids can be changed. And it’s rough for a reason: immediate rendering for immediate review. Wires are also handy for information architecture, and eventually use testing, and once approved, the wires become the frame upon which you apply the details.

Wireframing Phase 1: Thumbnail Drawings + Sketches

wireframing

Wiring (or wireframing) is an important step before the mock-up phase, meaning it happens before you begin experimenting with type choices, color, imagery and other complex visuals.

When redesigning my personal site, I began by drawing small thumbnail wires on anything from a sticky-note to a memo pad. These drawings can be rough and imprecise, but they’re immediate and necessary. (I have a habit of using whatever paper is near me at any given time, no matter how small or large I have to draw.) These drawings became the basis for laying out, coloring and then coding my personal site redesign in 2013.

Whether you’re an interactive or print designer, pencil sketches at “thumbnail” sizes will allow you to see things quickly, make changes instantaneously and get feedback among your team (and from yourself) in an equally instantaneous way.

Sketching can happen just as quickly with digital software, be it an Adobe product such as Illustrator, InDesign or Photoshop (and even Flash)—as well as a spreadsheet such as Microsoft Excel or Google Docs. And there’s also the ability to wire using HTML/CSS box models.

wireframing; wire construction

Wireframe Tools: Adobe (Likely Your Comfort Zone)

Whether you’re working in Adobe Illustrator, Photoshop or InDesign, there are definite advantages to using Adobe software, especially through Creative Cloud. You have ability to share files among your team and clients. Adobe Dreamweaver offers a wealth of benefits for the front-end and back-end designer. But if you choose to develop wires with Dreamweaver, you’ll have to either use one of the standard Dreamweaver templates, or type the HTML/CSS yourself.

The advantage to the Dreamweaver templates is speed, but the disadvantage is fitting your content into the given template’s box. Writing the HTML/CSS yourself is easy if you know how, but if not you’ll need to get up to speed on backend development with placement and positioning of divs in CSS.

wireframing, adobe dreamweaver, creative cloud

For preliminary research and development, including wireframing, content and asset management, as well as project management and final design and release, Dreamweaver offers the best end-to-end system for those with little to no HTML/CSS knowledge.

wireframing, adobe

Illustrator offers many of the digital drawing comforts designers have come to expect, such as typography control, layering objects, and creating multiple pages through art boards.

wireframing; Adobe

Most front-end designers, who have less knowledge of HTML/CSS, will find comfort with Photoshop, Illustrator, or InDesign, and will usually force one of those to do what they need, but surveying the three of them makes InDesign the best choice.

Illustrator: Vector tools, such as rectangles, easily lend themselves to drawing out shapes that will become divs. You have the ability to create multiple art boards, and once the wire is approved, you can begin applying color, typography, and other details through Illustrator’s abundance of drawing features. Although Illustrator offers Character and Paragraph Styles to tag and edit your typography in bulk, it has no ability to manage styles for objects such as rectangles.

Photoshop: Many of the same advantages of Illustrator, however, once the wire is approved, if you see a need to create more photo-rich effects or color stylization (hello, gradients!), keeping the wire in Photoshop allows you to scaffold on top of your rectangles and other polygons. But little to no style tagging or bulk editing options will force you to change one thing at a time.

InDesign: One of the biggest advantages to using InDesign lies in its Character, Paragraph, and Object Styles. When you have an approved wire, and you’re ready to move into the prototyping phase to design the details, you can create typography styles that get applied once, and if you need to change them, click a couple of buttons instead selecting each and every text box. And with Object Styles, you define box attributes such as fill and stroke color, opacity, text placement, and more, and can change them with one click as well.

indesign-step-repeat

InDesign’s Step and Repeat function lets you multiply one object using precise measurements, and the baseline grid helps you make sure you snap to a grid.

wireframing, inDesign, Adobe

Setting up an InDesign Character Style lets you easily modify the typography during the wiring or subsequent mock-up/layout phase.

wireframing, indesign

When it comes to styling divs/boxes, the Object Styling comes in handy, whether you’re building with grey boxes, or colored divs.

Website Wire Construction

indesign; wireframes; wireframing

With InDesign’s Export to HTML option, a front-end designer can prepare the layout for becoming a functional wireframe for use-testing in a browser, ensuring that you get user feedback from a clickable, albeit preliminary site, with functional links, menus and even rollovers.

wireframing, grid, placeholder; indesign

By laying out a columnar grid, and using InDesign’s Fill with Placeholder Text feature, you can begin to see how content fills up the format, all while using a columnar and baseline grid to maintain structure.

Lesser Known (But Just As Valuable) Adobe Tools

Adobe InCopy: One of the other huge advantages to InDesign, which few designers may be aware of but project managers will do cartwheels for, is the ability to have one document open by many participants with multiple edits happening all at once. For many, it’s a dream come true. Say, “Hello,” to InCopy.

wireframing

Adobe InCopy integrates with InDesign, and lets multiple users work simultaneously on a single document. (Source: Adobe.com)

By allowing more than one person to work on a file at once, with changes happening simultaneously, and then approved (saved and committed to the document) or disapproved (denied and not saved to the document) by a project manager, InCopy is worth the investment.

Adobe Flash or Flash Catalyst

Adobe Flash offers many of the same features that Illustrator does, and if you intend on developing your product into a Flash site, instead of a purely HTML/CSS site, Flash may be the best choice for wireframing.

 

Because my site had a very limited amount of content, I was able to use these sketches, and then leap to the design, coloring, and coding quickly and efficiently. Drawings and photography by the author

catalyst; adobe; wireframing

Flash Catalyst serves as a good second-step between wireframing and use-testing, but for many hardcore programmers and developers, HTML/CSS can do the same thing, and bring it closer to the final product. But for front-end designers afraid of HTML/CSS, this may be just the right tool.

Flash Catalyst, which ended at version 5.5, had the ability to import, edit, and add interactivity to Illustrator and Photoshop artwork. This gives it the ability to not only edit and expand on a wire design, but also to add interactivity when moving to a functional wireframe, or even fully developing the site itself. This had been a front-end developer’s bread and butter up to version 5.5, especially if they wanted to avoid backend HTML/CSS development, but Adobe depreciated Flash Catalyst and is no longer supporting nor updating it. If you’re a front-end developer, or a designer who prefers to do as little HTML/CSS as possible, grab this before it disappears completely. (Or, take my advice and learn HTML/CSS to really be dangerous.)

Adobe Muse

Adobe has been touting Muse for some time now, and it does have some strong wireframing abilities, but may seem too basic for those with HTML/CSS knowledge. Having used the program, I find it to be like InDesign for web layout, and it reminds me a lot of the now extinct GoLive, which was heavier on drag and drop components than on backend editing. If you’re a fan of parallax scrolling websites, the Muse Creative Cloud site has an entertaining one (as well as a lot more information about the product).

Adobe Reflow

adobe-reflow

Adobe Reflow delivers ease of use, and the ability to create a responsive site that scales from large to small screens. (Source: Adobe.com)

A new addition to the Adobe web design arsenal is Reflow, which promises to let designers create responsive sites that transform their layout depending on the viewport (screen size). For many, especially the novice frontend designer, this application opens up a whole new world of development tools, that had been hidden beneath earlier versions of Dreamweaver.

Adobe Proto

An excellent choice for the designer who loves her/his tablet, Proto lets you drag, drop, move, size, and align your layout using a multi-touch interface.

proto; wireframing

Touchscreen gestures employed in Adobe Proto let you render content without using a keyboard or drag-and-drop palette.

proto; wireframing; interface

Proto’s layouts look as rich as something created on a laptop or desktop. If you move from a tablet to desktop/laptop often, Proto’s files integrate seamlessly with Dreamweaver. (Source: Adobe.com)

Many purists believe that a tablet isn’t a fully-armed design tool, but as screens get bigger, multi-touch will become the way of the future as evidenced by Adobe’s Project Context, and many of us will be leaving our mice behind.

Spreadsheets, the Wire Less Walked

Few designers think “spreadsheets” when it comes to design, unless their working on invoices or estimates. But a spreadsheet provides the perfect system for drawing exactly what you need with wireframes—little boxes—all of which you can align, create, and edit with ease.

When it comes to content management, even at the wire phase, you can put all of your text in a couple of cells, and link them across the document, even into other sheets. All you need to do is make the changes in one place, and they propagate throughout the document. You can do the same thing with “find and replace” in other layout programs as well as Dreamweaver and HTML text editors, but making these batch changes in a spreadsheet may be easier for team members with less experience in those programs.

excel-link

Housing text content in a series of cells such as those in Column U, and then linking them across your document, enables you to make updates to one area with the changes happening simultaneously across the document.

excel-columns

Start by setting up your document with a uniform grid in mind. In this case, all column widths have been set to 0.5-inches, or approximately 36 points.

excel-merge

With one column defined as a grey-div menu, you can then create much larger div shapes by merging cells in the spreadsheet, making sure to wrap the text in that cell and set it to “align to top” for better presentation.

excel; wireframing

One sheet titled “Home” keeps its content in one zone, and a new sheet within the same document, “About,” creates a new board for its content. Notice how the About menu links its content back to the Home sheet in the formula bar with “=Home!U5.” One sheet can be used to house all of the content, giving you an “everything and the kitchen sink” view at all times.

When a spreadsheet is used through a collaborative tool such as Google Docs, multiple team members can work simultaneously on one document, even chatting in real time through the document chat feature to enable remote personnel to collaborate easily. And by publishing it for use-testing, you have a ready-made heuristics tool: Simply sit back and watch the user’s mouse crawl the wires.

Good Designs Have Good Layouts: Keeping It On the Grid

As with all design projects, including wireframes, it’s important to follow good layout practice, especially when it comes to using a grid. You need a method to structure your content, to create unity and variety in your layout, and creating a grid has to be that first step. Patrick McNeil’s excellent article covers the dos and don’ts of using grids in websites. And while using a baseline grid may be complex for some designers, it can help with overall unity of typographic layout, but at the very least, a columnar or modular grid is an absolute must.

Most readers will see these wireframes as created digitally and tested digitally, but if push comes to shove, you can print the prototypes and have a user touch-to-click their way through the paper prototype.

agile; wireframingIn the next installment, Jason goes beyond Adobe software and spreadsheets to explore online wireframing tools such as Mockingbird, Hotgloo and Moqups …

Want more of Jason’s interactive expertise? Check out his HOW webinar on Agile Methodologies

 

 

10606-728x90-V_HIDC June EB

 

 

COMMENT