This article will give you a look at the advantages of using wireframes as part of designing a website. It’s serves as a guide to which software and methods could be used. Read on to learn more about wireframing.

 

So what is a wireframe?

You can find hundreds of definitions of the word ‘wireframe’ on the Web.  Here’s one that represents what’s typically used today [courtesy of webopedia]:

A wireframe is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site.

Unfortunately the most common interpretation of this definition practiced in workplaces leaves much to be desired:

A wireframe is a line drawing that dictates exactly what functionality and content is located where on a Web page or Web site.

This interpretation drastically limits the potential of a web design. It sets a glass ceiling for the visuals and copywriting, two supremely important aspects of great web design. 

This may have been true in 1999 when we were all getting used to the new UX metaphors of the Internet, but it certainly isn’t the case today, in a time where mediums and wireframe 2disciplines are converging and metaphors like the “back button” or “scrolling” have become muscle memory.  Wireframes often promote the notion that visual designers and copywriters needn’t bother themselves with size, location and functionality of the elements of a design and that their individual focus— the UI and the copy —don’t play much of a role in shaping the flow and interaction on a web site.

Bottom line - We need to update our interpretation of the word “wireframe”.

Why should you use wireframes?

If you’ve never used wireframing as part of a project it might feel annoying to follow at first. It may feel like your creative mind is put in a box and the key was thrown away. You might have difficulties figuring out how much or how little you should think about design while wireframing, or decide the level of details going into it. If you’re inexperienced it may take some time getting used to. It’s worth the struggle, however, as soon you will love having a wireframe to base your design on. 

As for your client - most clients will understand the need of mapping out the website and content on the different pages before designing it.

You need to know the difference between wireframes, mockups, and prototypes, which are sometimes used interchangeably, but are three different things (though there is sometimes some overlap between them). Each one has a slightly different purpose 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 design elements of the site. These are often very close or identical to the actual final site design and include all the graphics, typography, and other page elements. Mockups are generally just image files.

Prototypes are semi-functional webpage layouts of a mockup/comp that serves to give a higher-fidelity preview of the actual site being built. Prototypes will have the user interface and is usually constructed using HTML/CSS (and even JavaScript for showcasing how the front-end interface might work). This stage precedes programming the business logic of the site. While they might not have full functionality they generally give clients the ability to click around and simulate the way the site will eventually work. Prototypes may or may not also include finalized design elements.

Benefits of Wireframing

1. It’s easier to match the clients expectations for the coming website or redesign. It’s easier for the client to visualize what they get and make the necessary changes early wireframe 3in the project.

2. You're probably a ninja in Photoshop but… Its time consuming to make changes in Photoshop rather than simple drawings or illustrations.

3. With wireframes you can try out many different ideas with relatively little effort.

4. Wireframes makes it easier to determine what's important from page to page.

5. It’s easier to prepare where the CTA’s should be placed, which gives the designer more time to concentrate on making a good CTA, visual hierarchy and much more.

7. Avoid the 1000-page specification requirement as features and functionality can often be implemented in wireframes, and thereby help create a better product specification.

How to create a wireframe

There are several different tools and methods to create a wireframe. Below you'll find listed some different approaches to wireframing with the good and the bad aspects to each.

Sketching

Lots of possibilities: pens, pencils, markers, crayons - even chalk or whiteboard markers. Start sketching!

The good:

  • Speed
    Really quick, and you will be able to draw the idea as it comes to your mind
  • Flexibility
    You can easily switch from high to low fidelity or even mix it on the same page
  • Limited distractions
    You can really focus on the product structure, content, information hierarchy, functionality and behavior - instead of visual design

The Bad:

  • Duplicate work
    No master template or re-useable elements. You can’t edit/redo which quickly becomes tedious
  • Low fidelity
    You can’t include media or fonts and it’s far more difficult to show interactions and animations than the digital tools
  • Non interactive
    You can’t link sketches together
  • No version control
    Same issue with all analog tools: no timestamp, no idea who made the changes, you can’t make copies.
  • Limited collaboration
    Usually a single person working on them. Collaboration mainly happens when that person decides to share them in a meeting. Before or after that point, few people if anyone has access to them
  • No standardization
    Elements can be inconsistent if you’re not careful, and proportions could be off
  • Ugly
    For the majority of you who haven’t gone to art or design school you’re sketches could be so bad that they’re rendered useless.

Black & whiteboarding

Similar to sketching with a few minor but important differences

The good:

  • Real time collaboration
    Different team members can work on the same wireframes together, no matter how simple or complex.
  • Scale
    This medium allows you to start at a higher level in the product design process and visually tie different aspects together.
  • Availability
    Most offices have them

The bad:

  • Fixed orientation
    Being mounted on the wall can make it more difficult and may be a dealbreaker for some. Whiteboarding well is actually a skill.
  • Limited details
    The level of detail is often limited.

Paper Cutouts

Standard paper wireframing kits.

The good:
  • Fidelity
    You can use digital wireframing tools to create the initial elements allowing you to choose what level of fidelity you want.
  • Standardization
    You are creating a bunch of the same cutouts or rearranging the same cutouts - therefore your wireframe elements are inherently standardized.
  • Interactivity
    You can pin content on the wall, wrap them around your mobile phone, tape them on your computer screen, move and rearrange.
The bad:
  • Speed
    They are more time consuimg than sketches at first but can save time if you expect to have tor earrange a lot of wireframe elements

Graphic Design Software

Illustrator, Photoshop and InDesign. Simple to use, if you already know your way around.
You can use the “Grey Box Method” which will allow you to use the full grayscale spectrum to emphasize the layout and particular elements without taking the time to choose a color palette or cluttering your design with lorem ipsum text, both which may end up distracting you in the initial design steps. This may help you later on with the graphical design as well. It’s especially great for testing user floes and organizing graphical content, but can also be a personal preference over block diagrams or blocks with text.

The good:
  • Familiarity
  • Wireframing Element Libraries
    Tons of templates and toolkits which will turn this app into a pseudo-wireframing tool.
    If you are very structured you will build up master templates and smart elements as you work - it takes a lot of discipline, though, and our experience tells us that people mess this up rather than doing it well.
  • Fidelity
    You can add any level of fidelity
The bad:
  • Feature bloat
    Some of these tools are so flexible that there’s also a steep learning curve and a lot of ongoing distraction from that. Therefore it will seem not as quick or effective as wireframing and prototyping applications with analog methods.
  • Non-stock element libraries
    Time consuming to find the right libraries to use or spending time making your own from scratch
  • No collaboration
    Most graphic editing applications don’t offer any collaboration within the application
  • No presentation
    You can export to PDF, email a file or share your screen. That’s about it.
  • No flowcharting or user flows
    It simply doesn’t exist
  • Non interactive
    It simply doesn’t exist
  • Fidelity creep
    Whether or not you import and use third party wireframing element libraries you run the risk of not providing the right level of detail or fidelity desired by the team. There’s so many adjustments you could make – even if you’re not supposed to.


Wireframing software

There are many digital wireframing software solutions that you can use. Just to name a few: Axure, UxPin, Balsamiq and Proto io should all be great.wireframe 4

The good:

  • Built for wireframing
    More advanced tools also provide prototyping functionality
  • Speed
    Because they are designed specifically for wireframing, they should be the fastest tool for creation
You can swithch between 
  • Only strokes and titles
  • Grey Box Method
  • Hight Fidelity Text
  • High Fidelity Color
  • High Fidelity Media
  • High Fidelity Interactions

A good approach with a customer

If you’re new to wireframing you could take advantage of the Tactile Design Kit   The design kit is created by Megan Miller, web and user experience designer at Stanford University.  It includes physical experiences to guide the clients experience during a web design project.

In a traditional design process there a lot of artefacts you create to better communicate with your clients. Style tiles, moodboards, and wireframes articulate your understanding of the client and reflect that back at them. There’s a little bit of a problem with these artifacts and oftentimes you find that clients don't understand them.

Wireframes do a great job helping a webdesigner to understand layout hierarchy and talk with their team and their developers about technology choices but it doesn’t really help them get what they are really after, and that’s from them understanding their goals, their priorities and their aesthetic preferences. This is something you need to get their editorial direction on as you are creating their website.

Ultimately they trust you to make good decisions, they trust your expertise, but sometimes it’s hard to communicate about the technical limitations or design considerations that youwireframe 5 may have when working behind the scenes to build their website. So what if you can create a structure to help guide that conversation. Something that can propose a limited conversation for them to give you the information needed in a way that helps them understand the process better.

Taking that a bit further, what if you can create a physical experience for them that can inspire ownership, engagement, creativity and bring them deeper in to the process. Megan Miller proposes that we make it physical. We are physical beings and there's something powerful in that physical object, that when we have a physical object presented to us we bring focused attention on the activity at hand.

Megan created a set of worksheets and examples.

___________________________________________________________________

However if more people are involved in the process, an actual workshop might be better. You can then base your workshops on these elements but in a hidden way.
If it’s a smaller project you might wireframe with the client on a whiteboard. If it’s a large project you might have to bring all the info back home and work with the wireframe on your own, present it later, and then discuss and make smaller corrections if necessary.
This way you will get the clients go on the direction you’re taking before you actaully design the website.

InDesign
We have found the InDesign is a very easy tool to use to make wireframes with. You have the advantage of 'masters' to place the header and menus in.
The level of detail may vary from client to client. For some clients a box might just say “slider” for example, where for another client it specifies what will be in the first three slides that we will design for them.

Axure
If a project is very complex or involves development we will use Axure instead of Indesign. Axure allows for functional / technical wireframes.

There is no right way to wireframe. You must understand the context and the requirements for the project and move ahead accordingly. Know that regardless of the fidelity of the wireframe it is still simply a tool in the design process that you can utilize to quickly get feedback, prove out your design decisions, and help you make a better product.

If you need help creating a wireframe feel free to contact redWEB at info@redweb.us

What should your corporate identity be?


Call 888 400 0163
info@redweb.us

Contact

Enter your contact information below and we will contact you.

Required
Required
Required
Phone
Email
Required