{"id":2581,"date":"2017-01-24T19:08:16","date_gmt":"2017-01-24T16:08:16","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2581"},"modified":"2023-08-15T08:23:07","modified_gmt":"2023-08-15T08:23:07","slug":"ux-wireframing-bedrock-of-interface-usability","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/ux-wireframing-bedrock-of-interface-usability\/","title":{"rendered":"UX Wireframing: Bedrock of Interface Usability"},"content":{"rendered":"

In 4th BC Plato said: \u201cThe beginning is the most important part of the work\u201d. Almost 24 centuries since then his words are still up-to-date in our realias. Buildings require a stable foundation to stand and give shelter for long as well as any project needs to be well-planned from the very beginning to avoid problems at the further stages. Wireframing is the early step of the UI\/UX design process when the structure of the project is being formed. The usability and efficiency of the final product often depend on how well the wireframe is created at the very first steps of the design process. However, today designers still haven’t agreed upon the common opinion about wireframing: some of them consider it to be a key part of the design process while others regard wireframing as a waste of time. But where does the truth lie?<\/span><\/p>\n

We\u2019ve already touched upon the topic of wireframing in our article about creating mobile applications<\/a>, and since the topic remains actual and debatable, this time we want to devote the full article to the roots, nature, benefits and diverse issues of the wireframing process as well as the reasons why it’s advisable for designers to apply it.<\/span><\/p>\n

\"tubikstudio<\/p>\n

What\u2019s a wireframe?<\/span><\/h2>\n

A wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.<\/span><\/p>\n

Wireframing is effective at the beginning of the design process when the main objective is to create a product\u2019s structure. Designers use wireframes to outline visual and typographic hierarchy<\/a> on user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general interface clearly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes<\/a>, with boxes and lines representing copy, pictures and all the interactive elements<\/a> on the page.<\/span><\/p>\n

\"Tubik<\/p>\n

Earlier we presented the typical creative flow for digital product<\/a> we have here in Tubik by example of creating mobile apps and mentioned the set of stages in this process:<\/span><\/p>\n