Create a GUI wireframe from scratch.

WHAT IS A GUI WIREFRAME?

"In computing, graphical user interface (GUI) is a type of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLI), which require commands to be typed on the keyboard." (Source: Wikipedia)

Wireframes are basic illustrations of the structure and components of a web page and generally wireframing is the first step in the design process.

Put simple: a wireframe is the blueprint of a website. You can look at wireframes like you are looking at different floor plans. A floorplan maps out where your bathroom is located or how big the kitchen is, tells you if the flat has 2 or 3 bedrooms, where doors and windows are located.

Wirefames do vary in their level of detail, from low to high-fidelity, but generally reflect what the creator has in mind regarding the placement of elements on a page, site navigation, the labeling of elements, site content and how users will interact with the website.

high fidelity wireframing website gui wireframe

HOW TO BUILD A GUI WIREFRAME?

First and foremost there is no right or wrong. Everybody wireframes differently. Yet there are some considerations you might want to take into account when starting off with your first wireframe:

Think about the most important aspects you want to illustrate and make sure to include enough information. Ask yourself: What needs to appear on each page of my wireframe? Think about the most important user interface elements: header, footer, sidebar, content.

Once you have that think about additional elements your specific projects will feature: search bars, navigation, images, tabs, interactive elements.

The level of detail is dependent on the project and the purpose of the wireframe. Do you need your wireframe as a guiding document for your own reference then you probably don’t need to dive into details. If you have a whole team working on a project and you need the wireframe as a reference and for communicating with your team (e.g. set up further specifications for designers or developers) you might want to wireframe in a higher-fidelity and more formal. Also bare in mind that you might be presenting to your client.

WHY SHOULD I BUILD A GUI WIREFRAME?

Unless you are looking at a very minimal and simple project wireframes can help you clarify what exactly needs to be on the different pages of your website.

1

Clarify

Use wireframes to get a clear picture of what information will be needed on each page before design.

2

Focus

Spend time and really focus on the very layout/content of a website.

3

Understand

Have a clear look at how the site will react to various visitors without the clutter of color or design elements.

4

Adjust

Easily adjust and easy to produce allowing the planning process to move along smoothly and efficiently.

5

Specify

Give designers and developers a clear set of visual specifications.

6

Connect

Get a client deeply involved in the planning process

7

Safeguard

Set fallback points to avoid scope creeps and rework.

8

Iterate

Set up feedback loops with your team and client.

9

Benefit

Save time, money and hassles by clarifying important development steps upfront.

WHEN SHOULD I BUILD A GUI WIREFRAME?

It’s never too late to start to wireframe but usually wireframes should be used at the beginning of every website design or redesign process.

Wireframes help to focus on the most important questions upfront:

  • What is the site supposed to accomplish?
  • What is the site structure going to look like?
  • What navigation elements do we need?
  • What elements should be on which page?
  • What should be on the landing page or a sub page?

Source: UX diagram by Hello Group

Wireframing Showcases

A lot of really great web projects have been accomplished with the help of HotGloo. See some showcases and experience what you can achieve wireframing with HotGloo.