We Work with Awesome People
A wireframe acts as a visual and navigational guide to a website. Some people compare it to a blue print for a house. It provides everyone involved in the project with information as to how their website is going function and behave, as well as an opportunity to go over the information and assure that all the targets of the project have been achieved. A wireframe typically includes where critical information is going to be displayed such as headers and CTA’s (Calls to Actions), and how the user will be guided through to retain consumer interest. It’s purpose is to arrange these elements to assist with the best practice and flow of a site, and expected behaviours. It will lack typographic style, colours, and graphics since it’s primary focus in on functionality, and to not distract from its purpose.
It’s used to assist developers in creating rapid prototyping of pages and knowledge of special areas which may require special programming or database development, assists web designers and developers in creation of the design and specialized functionality, assists clients with organizing and prioritizing content and to ensure the websites priorities and achievements have been met, and eases the use for later update-ability and re-builds. Wireframing is important to the web designer because it allows them the ability to create organically without being distracted by colours, typefaces, or written copy of a website.
Wireframing can be produced by Business Analysts, User Experience/User Interface designers, visual designers and other roles with expertise in interaction design, information architecture, and/or a background in user research. Wireframes allows for analysis and rules for displaying certain kinds of information to the end user and the effect on different scenarios which is why having a qualified specialist in wireframing is critical to its success. It is an architectural blueprint (a two-dimensional diagram) so you can understand how to build the actual house. You cannot and should not start building a house without first knowing where the wires are going to go, the plumbing, how the user will walk-thru the house and so forth. To do so will be disastrous and will affect the well being of the home buyer and their family. A website is no different. You cant start building layers or writing blocks of code without first knowing where the information is supposed to go and how the website will behave and navigate.
Content Writers: will utilize wireframes when collecting content for the website, prioritizing and organizing its placement within the page. It allows them to know of any restraints to the documents such as how much space is available on the page, or if there is flexibility which its structure that will allow content to overflow.
Web Designers: assists in knowing the priorities of content, goals of the site, and intended functionality of the design.
Web Developers & Programmers: assists in knowing regions that require special code or scripts, and assists with collaboration between the departments to ensure they choose a platform and delivery method that is compatible if it so requires one.
Project Managers: assists them in knowing the process and flow of the project where they can evaluate the length and time required to complete it. It also assists in project scheduling and will alert the PM if conflicts will arise early on and/or if there will be gaps in the development lifecycle. Knowing this information ahead of time will ensure the flow of information is streaming though at a rate which doesn’t exhaust their team, or leave their team idle.
The Client: it provides something tangible for them to hold on to and bring back to their company to assess the needs, budget, and aids in ensuring the criteria, initiatives, and goals of the website have been met.
A good wireframe must include several elements in order for it to be purposeful and have meaning. Every wireframe must include presentation, placement and prioritization of information in a way that facilitates understanding and should be arranged in a manner that reflects the goals and tasks outlined within the project scope and project summary.
The navigation system provides a set of on screen instructions. It contains the relationship between the pages so that the end user will understand the options they have for navigating within the website (similar to that of a road map). These navigation systems are known as Global Navigation Systems – but are also known under other names such as Top Level Navigation Systems, Persistent or Primary Navigation Blocks.
There are several types of navigation systems each with its own purpose that mostly everyone has had some exposure to browsing the web. Local Navigation and/or Supplementary Navigation are links which will guide users outside the flow of content. Contextual Navigation will cross reference blocks of information used within content for sourcing such as inline links in a paragraph of text to another section within your website (this can be seen on Wikipedia a lot or medical websites which will often cross reference symptoms with medical conditions with similarities). Secondary and tertiary navigation are children links under a primary menu system or sub navigation of links commonly found on the left or the right side of pages next to blocks of content where similarities are present or the correlation of content presented is expanded through the use of links in order to keep the length of a page at a minimum.
Interface Design: Is the selection and arranging of interface elements to enable users to interact with the functionality of the site. These elements can include buttons, text fields, check boxes, radio buttons, drop down menus in order to facilitate usability and efficiency instructions and how they will react (expected behaviour) when someone clicks it.
Designing wireframes is an organic process which is why you will often see so many variations of them online or in client presentations. Regardless of the differences in aesthetics, the underlying principals are all the same. A wireframe is only effective if it can be understood by everyone including the client. Several business will have established rules surrounding the uniformity of structure so that each of their clients receive the same quality to detail. This is especially prevalent in larger corporations where they may have a large team of UI/UX people creating these structures so each one needs to look like the other and have the same attention to detail. It ensures critical information isn’t lost in the process.
Every wireframe no matter how detailed or not, must include the following in order for its purpose to be considered effective:
1. Information Design Principals (order of priority of information)
2. Navigational Design System & Instructions (where all the links will direct to)
3. Interface Design UI/UX (end user interactions, behavious, and expected results/user scenarios)
As you can see, wireframing is a process that should never be overlooked in the web development life-cycle. It is a valuable and essential too to aid in the speedy development of the workflow as a whole. It allows for easier content manageability if future content structures occur, and allows new people who jump in on a project either on the client side or web side part way through, an instant summary of information and where it is in the development life-cycle.
Made in Canada - © 2024 Fresh Brand Marketing - All Rights Reserved.