Feeling Comfortable with Wireframing

Wireframes can be shaped in different types of fidelity and there are not always specific guidelines on what to do and follow in order to achieve the purpose of your wireframe. In this article we will talk about how intermediate wireframing can help you shape a good beta and planned version of your product without sacrificing time and user experience.

Feeling Comfortable with Wireframing

The first step that we need to follow is to evaluate the way we are going to approach our design and wireframing can help us. By choosing an intermediate level of wireframing we can get rid of the abstraction process that a client needs to go through when looking at a low fidelity wireframe and still gain feedback by presenting UI elements without compromising time and vital aspects that can prove to be an obstacle when using high fidelity wireframes.

Wireframing, The Next Level

When someone looks at a wireframe and is able to view UI elements, it is easier for them to understand how the product will work. By adding aspects and notes of functionality, movement, buttons, links and behavior we can remove the client’s need to use their imagination to complete the wireframing process and keep them focused on understanding what we want to bring home in the mock up. It is important that you make sure everything is as simple as possible but still try to avoid primitive elements like sketches and focus on layout, navigation and interface elements.

Plan Your Elements

Establish the elements that need to be represented on your wireframe before doing anything at all, once brainstorming and the concept process has been completed make sure elements such as images, text, links, backgrounds and other fundamental elements of importance and space have been discussed so that you can start categorizing them and plan their layout.

Entries

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

Information Architecture

Once the planning of elements is out of the way, start visualizing about layout and information architecture. Think about content structure and organization, file and site anatomy. Once this has been defined you can then plan a site navigation and menu arrangement. Use site diagrams for this and think about logical function, ease of navigation and structure relationship.

Information Architecture

The Starting Layout

Presenting a proper layout structure can aid you into structuring your information in a more organized way and help you save time and effort explaining where elements are going to be found. A proper layout design will be able to show all elements wanted and will help you plan proper element placement as well as space arrangement. Start sketching layouts and wireframe structure once elements that you want to be displayed have been settled.

The Starting Layout

Correlation and Relationship

If all the main layout necessities have been taken into account already, think about proper content and if area arrangement is useful and logical for the purpose of your site. Your wireframe will be a rough version of what will be used by designers or yourself to create preliminary versions of your work so keep this in mind when wireframing. The relationship between space, design and user interface has to be fluent and logical.

Correlation and Relationship

What to Avoid

A medium fidelity wireframe needs to communicate only the absolutely necessary. Using colors on a wireframe will make your design get into a sort of mock up state. Avoid this so you can focus on structure, layout, and user interface and information architecture. Color carries emotional, cultural and mindset overtones that should only be worked out once basic elements have been chosen and established. Avoid specific typography usage and use gray tones or color saturation variants to differentiate functional areas.  Stay away from images for now.

What To Avoid

User Interface

One of the final steps when thinking about wireframing is explaining how the user will interact with the product. Links, buttons, videos, images and information specifics have to be planned out before going into further stages of design. UI designers can pave the road and give you an idea and/or guidelines on what to do, still, keep it simple since wireframing is (tough important) just a concept and may not be a final decision on what your site will look and work like.

User Interface

Annotation

Space arrangement, information structure and user interface have been defined already so if there is anything that is still missing and cannot be properly visually represented without compromising fidelity or time we can use annotations. Skip using giant text block, avoid placing them inside your layout and use numerical markers to order and categorize them. Annotations will come handy when you want clients to completely understand you’re designed before it gets judged on. Focus on client’s benefits.

Annotation

The Payout

Proper wireframing decisions will allow you to optimize time by being creative, keeping optimal flow and development process. It will also leave you less vulnerable to common mistakes such as poor UI design, multiple design stages and time consuming occurrences. Taking time to wireframe can save time later on.

Follow a logical process and start with a conceptual stage of design by defining objectives and needs, think about graphic and user interface design, start sketching and lay a wireframe. Once this is done create a presentation and take a second look at your design, re visit it, test it and then present it. Once client needs are met and green light is on start prototyping, this will allow you to get into a more in depth stage of the design process.

Chaz

Chaz is a Graphic Designer at Breeziwebsite builder, which allows designers to easily create and manage websites with pixel-level control. He is also a part-time self-proclaimed geek who enjoys web and print design, freelancing, cinema and continuous learning.

Newsletter

1 Comment
  1. Tarek Anandan Nov 1, 4:23 pm

    I’ve been a long-time proponent of very deliberate and careful information architecture processes for the reasons you cite near the end of the article (e.g., optimize time, optimal flow and development process, less vulnerable to common mistakes etc). Wireframes have been among my most employed tools. However, I’ve found myself moving away from them more and more recently and going right into online prototypes. A good coder can make a online prototype in the same time that one can make a wireframe by using tools like Twitter Bootstrap et al. In the end, I find that my clients find the prototypes a lot easier to understand than even very well done wireframes, especially when it comes to things with modest interactivity (e.g., tabs, carousels, modals etc). And by doing a prototype, I get the added bonus of having a code foundation that I can use (at least partly) as I move into the development phase.

    Reply
    +3

Leave a Reply

*
* Minimum length: 20 characters