Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Wireframes are the background grid for websites

Friday, June 27th, 2014 by Servage

Wireframe designing

Websites are our live shops on the Internet, akin to brick-and-mortar shop in real life. When you are building a physical shop, you consult an architect and desire a blueprint of your establishment. This allows you to see the layout of the rooms, partitions, and other items proposed for construction. A rough plan, drawn on paper, is called a wireframe of the actual house.

Similarly, when web designers create your online shop or identity, they never jump directly to the development stage using graphic design software or code editors. Instead, they take pen and paper as a first step, drawing outlines of a web page layout. As professionals, they too utilize a blueprint for their work. You get to see where header, body, footers, images, and other UI components will reside and what the resulting UIs will look like when intended actions take place from visitors.

This rough drawing of a web page or even for an entire website layout is called wireframes. The web designer is engaged in a standard practice, called wire-framing. Let’s take a look at the role of a wireframe and how they are useful in our web development process.

Making Effective Wireframes

As noted above, wireframes are capable of conveying your thought process to your clients and establishing a communication channel that will likely lead to further iterations during site designing. To think of wireframe illustrations as similar to a school kids’ drawing is a big mistake. Wireframe development is purely a technical job and must be taken seriously as a standard of professionalism. We need to engage in initial research before drawing up the blueprint and to ensure a proper matching with the wishes of a client. There are many sources online, which can provide ideas for a wireframe via contemporary designs. For instance, there is a “I love wireframe” group on Yahoo’s flikr, and a Wirify browser bookmarklet tool to visualize the wireframes of live sites to suit your needs.

As wireframes are a low-fidelity representation of a site design, we only need to include primary groups of information. We can focus on basic layout or structure, and only mention core visualization as well as depict the main UI interactions. In this way, you create a backbone of the product (website/mobile app) with your wireframe. In turn, this will further serve you toward the goal of whole product creation.

Interactive Wireframe Designing

At present, websites or mobile apps are rarely simple in terms of features, functionality, and interactions. Therefore, simplistic hand drawing or rough sketches are usually not effective enough to convey your technical message to your clients. Thank goodness for technology! Today, we have interactive and clickable wireframe design software available, such as balsamiq, UXPom, Axure, Omnigraffle, Flairbuilder, and more.

These high definition wireframe software tools give us a quick idea of the interactions we are looking to design. Plus, they leave enough room for other team members as well as clients to add valuable input to the initial designing process. Modern technologies create shortcuts in our web and mobile app designing, by giving us opportunities to include key features and functionality. These include, but are not limited to, box type layouts, along with information hierarchy defined by typography and hotspots in UI elements.

These composite tools give us a great sense of the user experiences and usability, before jumping into prototype designing.

References & More Reading

 

Wireframes are the background grid for websites, 4.3 out of 5 based on 6 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.