What are Website Wireframes

Originally, the term "wireframe" meant a visual representation of three-dimensional objects, like those used in product design and development. Now it is also used to describe 3D modeling in computer animation and in the design and development of 2D web pages and mobile apps.

In web design, a wireframe or wireframe diagram is a grey-scale visual representation of the structure and functionality of a single web page or a mobile app screen. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added, and can be created using paper, straight into HTML/CSS or using software apps.  

Wireframes replace the abstract nature of the sitemap, which is usually the first step in site development, with something more tangible and understandable.  There are several interrelated purposes for wireframes:

• Ensuring the site or app is built according to goals.

  Seeing features clearly with minimal creative influence allows stakeholders to focus on other aspects of the project.  Wireframing sets expectations about how features will be implemented by showing how features will work, where they will be located and how much benefit they'll provide. A feature may be pulled out because it doesn’t fit into your site's goals.

• Focusing on usability.

  Wireframing provides an objective look at link names, paths to conversion, ease of use, navigation, and the placement of features. Wireframes help you identify flaws in site architecture or features and show you how well it flows from a user perspective.

• Content growth capacity.

  If you know your site will grow in the near future, your website needs to be able to accommodate that growth with minimal impact to the site architecture, usability, and design. Wireframing can reveal these important opportunities for content growth and how to fit them in.

• Feedback and painless iteration.

  Instead of merging the full functionality, layout and creative elements into a single step, wireframes guarantee that these considerations are taken on separately. This allows stakeholders to provide feedback much sooner in the process. Creating wireframes using software makes the iterative process inherent in web design much less of a chore.

The value of wireframes for website and app development

Wireframes put every participant in website development on the same page. What does this same paging look like? There are many aspects: Designs are more carefully calibrated. The development team has a deeper understanding of what they’re making. Creating content becomes more straightforward. You avoid needing to hack, correct, or totally rebuild further along into the process—otherwise known as ‘scope creep.’ What’s the ultimate value in that? Saving time and money.

User experience design is a method of increasing customer loyalty and satisfaction by improving usability and enjoyment in the interaction between the customer and the site, app, and product. User interface design is closer to graphic design, though the responsibilities are somewhat more complex. In general, user experience design comes before user interface design. UX and UI tend to, and should, overlap in the wireframe design process. The areas of focus include:

Information architecture and wireframes 

Part of the overall process in website development and wireframing, Information Architecture (IA) is about placing and prioritizing information in a way that leads to understanding by future users of a site or mobile app. There are four fundamental elements, according to Information Architecture for the World Wide Web:

• Organization schemes and structures: categorizing and structuring information
• Labeling systems: representing information
• Navigation systems: moving through information
• Search systems: looking for and finding information

Good IA begins with a comprehensive business analysis to develop a content strategy for a big picture of structure, content and design style based on company goals.  To confirm that the analysis and strategy is correct, wireframes and paper prototypes are an important first step. Testing prototypes and wireframes is the best way to get feedback from users early in the design process, which helps to prevent costly redesigns once the site has gone live. Prototype and wireframe testing also helps you assess various designs in terms of performance and user preference to create the best overall product.

Navigation design and wireframes

The navigation system includes an array of on-screen elements that permit the user to move from page to page. The navigation design should make clear the relationship between links so that users naturally understand their navigation options. Typically, websites offer multiple navigation systems, such as a global, local, supplementary, contextual, and courtesy navigation.

User interface design and wireframes

UI design involves picking and arranging interface elements that help users interact with system features in a way that maximizes efficiency and ease of use. Common UI elements include buttons, text entry fields, checkboxes, menus and radio buttons.

Learn more about UI wireframe tools

There are four different types of wireframes ranging from the simplest type (black-and-white or blueprint) to the most complex (nearly simulating the real thing):

• Basic wireframes. Also known as low-fidelity renderings, these are very simple page schematics, usually in black-and-white.

• Annotated wireframes. These add a broad range of details to a basic wireframe.  Annotations are brief notes, typically on the side or bottom of a wireframe, that describe each item on the wireframe, usually separated by areas of content and functionality, and show (briefly) the reason and purpose for each item.

• User flow wireframes. When annotation is not sufficient to show how a site or app user will logically move through content from page to page, more information may be required. These user flow wireframes can be static views of a fully interactive wireframe, but they could include a slideshow or a collection of wireframes in series to show a primary user flow or set of user flows.

• Interactive high definition wireframes.

   You can experience interactions (e.g., taps, clicks, and swipes) within or between individual wireframes. Adding interactions before going to full mockups or live prototyping saves designer and developer hours. This variation of wireframes can only be done in presentation and graphic design, or wireframing and prototyping software.

Now that we’ve looked at the fundamental components of wireframes, let’s take a look at how to put it all together to design and create a simple wireframe.  

1. Think about the ultimate goal of the website, and design with that goal in mind. Think about how the user will interact with the interface.

2. Start with a simple, low-fidelity representation of the webpage segmented into three parts: the header (the first thing users will see at the top of the page), the body of the webpage, and the footer, which usually holds less important information.

3. Next, think about navigation. Add buttons and links for users to visit the main sections of your site, including content areas, search, and user login.

4. Annotate your wireframe for clarity. 

Once you’ve gotten to this stage you can share the wireframe with stakeholders before moving on to the next step. You can draw out the initial wireframe by hand on paper or a whiteboard, but once you’ve gotten to stage 4, you will likely use software to develop the wireframe further.

Want to know more about how to create your own wireframe? Check out this Lucidchart tutorial.

You can try to imagine the end result of a website or app in your head, but it’s much easier when you prepare a wireframe beforehand and get to know what you need to do before even starting. Wireframe software and tools allow you to create example designs with flexibility and time-saving features. You can expand on ideas, see the bigger picture and avoid mistakes along the way. Templates can make it even easier to quickly visualize your ideas, make adjustments, and work through and resolve any issues.

Learn more about using software and tools to design website wireframes.

Learn more about using software and tools to design app wireframes.

Wireframe templates are a critical necessity when you start to design a new web page or application. There are free wireframe templates you can find online. Most software for site and app design also provide a wide variety of templates. Here are some working template examples from Lucidchart to help you understand how the wireframing design process can work:

Wireframes are design placeholders, but a mockup fills in the visual details, like colors, typography, and brand element.  While the mockup shares the wireframe’s purposes of documenting and coordinating the team’s vision, it has the extra benefit of its superior visuals, which make mockups more useful to decision makers. In essence, the mockup adds visual flair to the sketch laid out in the wireframe.

 

Wireframing software should make it easy to develop any of the four types of wireframes—basic, annotated, user flow, and interactive—quickly and simply. Here are some things to think about before you make a decision:

• How ‘real’ does it need to be?

  The design capability of some software is very simple, and looks hand drawn, while others are closer to that of a minimal prototype with a more finalized user experience and interface. What you choose depends on how finished your end product needs to look.

• Is sharing a priority?

  Some products have the ability to export wireframes in a variety of formats, while others require anyone viewing the design to have the product installed on their computer. Users looking to share their design with a large number of people need a program that makes sharing for review, collaboration, and approval easier, like those that are online or cloud-based.

• What platform do you prefer?

  Users looking for sharing and team design capabilities on a variety of computers will likely demand a product with online or cloud-based access. There are some users who work on a single device, and there are companies that want designs on local storage who want software that’s installable.

• Do you need offline access?

  Browser-based products are strictly available via web browsers. Users with browser-based products may not be able to save designs locally or work without internet access. Browser-based products tend to be more lightweight and updated more frequently, but may lose offline access as a result.

Are you looking for templates and libraries?  These make creating wireframes much easier. Software that offers templates for mobile applications, web-browser designs, and other formats are big time savers, and are especially helpful when designing a large number and variety of wireframes. In addition, many wireframing products provide libraries of icons, widgets, and themes.

Why Lucidchart is the right online application choice for wireframing

Lucidchart can be used in minutes by anyone, from an engineer to a novice. Create an interactive demo of a website within minutes! No download required. Now you can create robust diagrams in the cloud, through your browser. One license can be used across any computer or tablet device.

• Simplicity:

   Drop-down menus, buttons, and general elements will help you sketch out a new concept or improve an old one. Hotspots allow you to mimic website navigation by moving from page to page, linking to an external page, playing a video, and more.

• Secure and reliable:

  Amazon Web Services' enterprise-level security protocol keeps your information safe. When you create diagrams in Lucidchart, your changes are continually saved and stored in multiple locations. We'll even notify you if connectivity issues stop us from saving your latest draft.

• Interactive elements:

  Don't just rely on a static wireframe. Instead, build an interactive mockup that offers the ability to click buttons, watch videos, browse menus, and try other links.

• Smooth collaboration:

  Reduce development time by having everyone participate in the process. Your customers, content producers, and programmers can easily chat and offer feedback.

• Rich features:

  Clients will appreciate an interactive wireframe that demonstrates the user experience. Turn on demo mode to give your designers and clients a functional prototype of an app or website.

• Publish and share:

  When you’re finished with your wireframe, sharing it is simple. Save to a variety of image file formats, print it out, or send it in email. You can even try publishing it on social media or sharing it privately for feedback purposes.