Wireframing are tales for the future
Wireframing – The bareboned blueprint of an idea still in its infancy. If you were asked to build a brick house without a plan on paper in place, you would likely be caught stuck. You may find yourself perplexed how to proceed with the task at hand. How could you not?
Architectures have diagrams that represent what a physical building will look like specifically for this reason. They describe all the different rooms and how much space they will take up. They describe where the doors are placed and what connects go where. This blueprinting stage is indispensable to an Architect. On such a large project, how would you know what you are building or what your end goal was if such a phase did not exist?
Admittedly, these blueprints don’t show you the finished house. You don’t see the furniture in the living room, or color of the walls. This is intentional, and part of their function. Blueprints allow the architects to determine layout without superficial distractions that can easily be modified later on. In web design, wireframes work much the same way. They are a visual representation of the web interface using lines and shapes. Wireframes often vary in the detail that they provide, though they all are designed to strip away the content. Placeholders are placed for colors, backgrounds, images, and paragraphs, allowing greater focus on the development phase and the skeleton for how the web page will be constructed.
This wireframing structure generally displays what will go where on the pages, how large different areas are and the overall layout of the website. What pages are displayed on the site, and where are they located? Wireframes draft the structure and flow for the user.
Its purpose lends especially in teams of multiple people. Everyone obtains a clear idea of what the product will look like in the end. However, it is also useful for a sole developer who knows what they are working towards.
Wireframes are also invaluable in doing business with clients and stakeholders. Would you be able to convey the idea of a web page to another person by only talking to them? Not likely, and you may have to sketch the idea out and then explain your layout. This sketch, or wireframe, is now easily communicated. Additionally, any feedback or constructive criticism others might have can easily be implemented into the next iteration. Ultimately, that is the purpose of a wireframe. They display the picture of what everyone is working toward, making the money that is being invested into the project worth it. During the web development process web developers are able to work with the client and other stakeholders to create something satisfactory in line with what is required. The process will involve numerous updates and permutations whilst website questions and requirements are ironed out by the design team. The process will be of benefit in a productive process as well as the correct end product being delivered in the time set.
Types of Wireframes
The level of detail in a wireframe is referred to as the fidelity of the wireframe. Wireframe fidelity often falls under two main umbrellas: low fidelity and high fidelity. Both fidelity options offer different advantages, and knowing which to employ in a situation can be crucial.
Have you ever spent an overwhelming amount of time on an idea, utilizing countless resources creating something that you thought was great, only for another person to tear down or discard in a matter of moments? It’s easy to jump into something and execute to perfection, without ever stopping to think about if others feel the same way. Designing a product like a website without continuous validation can be risky. It can become a large waste of time and resources if it’s ultimately not to your client’s preferences. This unpredictability is what lends many people to use low fidelity wireframes.
Low fidelity, or low-fi wireframes, are the most bareboned of the two wireframes. They are easily served as a ‘brain dump’ for organizational ideas that allow you to detect and fix major problems early on. Short of scribbles on napkins, low-fi wireframes are great for validating ideas and brainstorming options. They are super simple shapes and outlines that do not contain a whole lot of information. The picture is displayed simple, the spacing is rough, and the main emphasis is layout and hierarchy. Since they are relatively quick to create and modify, it makes it a very easy method to collaborate ideas and refinements from others on your team and with your clients. The low fidelity structure allows more focus on the core usability of the product displayed, instead of how much padding there is between modules or what kind of font is used in the page’s title.
Low fidelity wireframes are often seen as being subject to better feedback from clients. The template looks rough and a person will often feel less pressured to criticize the work being presented, as opposed to one that clearly took a lot of time, money, and effort to create. However, they are also much more limited in function, interaction, and communication of specifics. Making the immediate jump from this stage to the implementation of coding, prototyping, and graphic design might be difficult.
On the other hand, high fidelity wireframing brings much more realistic detail to the table than your basic frame. They offer a true representation of the final design. Hi-Fi wireframes have a very polished quality; displaying border styles, font attributes, pixel precise spacing, and greyscale shading instead of the black and white colors of low fidelity. They account for all elements on the page, and may even display actual content that the website will be using.
However, no matter how good looking such a wireframe looks, it is still just a prototype. Due to the level of detail, hi-fi wireframes tend to be costlier to create and modify, as well as more time consuming. Adding so many complexities to a design can also make them more difficult to use when working with certain clients who struggle to look past details specified like font attributes. In such instances, there lies a risk of losing track of the core usability of the product.
On the other hand, because they are closer to the final product, clients are quickly able to understand the feel of a website without extensive explanations. The level of detail and crisp implementation of sizing and layout reduces the amount of abstract imagining that would be asked of less-technical stakeholders and clients.
As seen from the details drawn above, both fidelities have their own advantages, as well as disadvantages. So, which is the best approach? Well, neither. The situation a developer will find themselves in is not as black and white as the wireframes they are working on. It is often not a decision of “either or”, and certainly not a conclusive “best choice” for all situations and projects. What resources do you have in terms of time and money, and is the wireframe for you, your team, or your client? These are questions that will need to be asked and evaluated at the time of the wireframe creation phase. It is also not uncommon to latch onto one approach only for a project. It is also possible to begin with low fidelity wireframes and gradually move into more detailed high fidelity wireframes, if the time and money available allows for it.
So now we know that a wireframe can be as simple or as complicated as we wish. Due to this vast array, there are countless tools at one’s disposal. Everything from a pen and paper, to editors that assist in generating CSS and HTML coding can be used to create wireframes. Some are specifically made for wireframing, and others are more general purposed but still work particularly well. Through a bit of research, I was able to find quite a few useful tools that are frequently celebrated among developers.
Paper and Pen
Starting with the simplest of all options, a piece of paper and a pen, or a whiteboard and dry erase marker, is the most basic utility one might use for a wireframe. A paper and pen is almost free and the most easily accessible of all other options. They provide an almost costless method of designing wireframe drafts. One method I found was to use graph paper so that straight lines can easily be drawn, and a pencil to draft the initial sketches. Then, as different parts are finalized, they are traced over with a pen.
Axure comes at a hefty price of nearly $300 for the standard version, and $600 for the pro license. The price is not necessarily unjustified, however. First released for Windows 8 in April of 2015, Axure RP Pro has quickly become one of the few applications that has dominated the market for wireframing design.
The powerful application supports features such as dynamic and responsive content, animations, and the ability to easily change windows and modules attributes without editing a single line of code. Users can create sitemaps and build both websites and mobile application wireframes, with the additional capability of viewing app designs on your phone with the program’s share function.
Released in June of 2008, Balsamiq was created by former Adobe Software Engineer, Peldi Guillizzoni, with a team of 21 employees. Balsamiq is a widely applauded mockup tool for wireframes that allows users to sketch and share their interface wireframes for web, desktop, and mobile apps. Their tag line states “Work Faster & Smarter”. This is made possible with features such as drag and drop, and sketching on a computer as if you would experience on a physical whiteboard. Balsamiq has a unique handwritten design look, along with a very large library of website elements. Users can drag, drop, and modify content to their will. Balsamiq is available for $90 dollars per year.
Mockplus is a newly developed wireframe and prototyping design tool that was released in June of 2017 for Windows PC, Apple Mac, as well as on iOS and Android devices. Mockplus is credited for being incredibly interactive and visualizing in its interface. Users are able to create features such as scroll boxes, sliding drawers, image carousels, and pop-up panels. The application prides itself in its speed, and intuitiveness to not need to use code or have much technical expertise. Mockplus grants users the ability to view real time design the way it would look through any device by scanning a QR code. The application comes at a standard rate of $199 per year, with a free version also available.
An easy to use and free online tool for simple low fidelity wireframing. Users are able to create web elements such as navigation bars, image placeholders, and containers through drag and drop methods. Users may also share their creation with others through a URL that’s generated when completed.
There is no best one, and each will fall ultimately to the user’s preference, style, and budget. When it comes to bringing ideas to life, there are an infinite number of wireframing tools all over the web. Ultimately one should choose what works best for them, and remember that the best and the most significant aspect of the wireframe is that it is helpful in prioritizing the content.
It is the wireframing step in which the designer decides how much space is to be given to each item and what is the place that is best suitable as per the visual hierarchy. Even though details such as colors, backgrounds, and images are not visible, wireframes allow clients to view their brand in the wireframe and allow them to readily see where the project is moving toward. In the end, and whatever the style, it is the user experience that matters above all, and wireframing is one more important step to ensure the best solution is provided for the end user.
- “Understand Wireframe – Features, Elements and Types.” Edraw, edrawsoft.com.
- “The Awards of Design, Creativity and Innovation on the Internet.” Wireframe Basics for Beginners: An Agency Perspective, awwwards.com.
- “Moqups · Online Mockups Made Simple.” Online Mockup, Wireframe & UI Prototyping Tool · Moqups, mockups.com.
- “Wireframes: A Great Way to Start Development Projects.” InfoQ, infoq.com
- “Prototypes, Specifications, and Diagrams in One Tool | Axure Software.” Prototypes, Specifications, and Diagrams in One Tool | Axure Software, axure.com
- “Balsamiq.” Balsamiq. Rapid, Effective and Fun Wireframing Software. | Balsamiq, balsamiq.com.
- “Prototype Faster. Smarter. Easier.” Prototype Faster, Smarter and Easier with Mockplus!, mockplus.com.
- “The #1 Online Wireframing and Prototyping Tool.” Fluid UI, Fluid UI, fluidui.com.
More details on Web Design
Whether you’re looking for a new website, or looking to revamp an existing small business website, at Visualwebz we totally understand business owners and the website benefits your looking for from being a website owner, be it national, international or local business listings, small Business Websites has been our specialty since 2008!
Our website developers specializes in delivering the best websites. Our qualifications and experience in wire framing, UI design, web designing, front end development and back end development will guarantee you that the final product we deliver will be to your satisfaction. We will also keep you in the loop during the whole web development process and help you with maintaining your online presence with our SEO specialists as well as web security once your responsive website has been launched.
- King County
Auburn Washington Web Design | Burien, WA | Eastside / Bellevue | Kent WA | Lacey WA Website Design | Lynnwood WA | Marysville website design | Olympia WA | Redmond, WA | Renton WA
- Seattle WordPress Website Design | Ballard Seattle | West Seattle | Downtown Seattle | Magnolia Seattle Web Design | Capitol Hill Web Design | Queen Anne Website Design |
- Tacoma Website Design | Tacoma, WA | Tukwila Website Design |
- Clark County