User Interface S01B – Wireframing

I will take some time to explain some more elements in User Interface design in the most fundamental sense. One of the terms that you will most likely be hearing in UI or UX design is mostly on wireframing. What is wireframing? Looking at the definition in Google quotes as follows:

“an image or set of images which displays the functional elements of a website or page, typically used for planning a site’s structure and functionality.”

The idea of wireframing is similar to that of a draft or a sketch or a concept art to an illustrator. It layouts all the elements into one particular field and allows you to layout what elements are in the User Interface in order to allow one to create a good solid foundation for actual User Interface design. Call it a mock-up of sorts.

ui1

Templates to wireframing varies from different mediums. Most commonly, wireframing is used for web based purposes. Though it can be just as applicable to any sort of mobile application or layouting for specific purposes. It is an application that can be used almost everywhere. Though what’s crucial is about positioning, hierarchy order and how it was presented overall that would allow us to design something that fits within the target we intended, and thus, find interest.

The idea of designing layouts is important to ensure that the final product is designed the way it is. The little details that no one touched upon that actually helps to interact the game the way it is comes from basic conceptual mockup designs. Using software UI friendly design such as myBalsamiq, Adobe Photoshop or InDesign, you have opportunities to create design to fit either your client’s wishes or to ensure that it is designed to fulfill that purpose that fits the medium you are trying to create.

What’s very important is to understand the design and what entitles that design in order to ensure that the designer follows the core principles of user interface development and stick to what they think is the most optimal layout for their intended purpose.

This covers up basics of wireframing, though there are many examples you can use to actually cover layout and systems in User Interface. Hopefully you’ll learn something from this short blog and encourage you to research the many different templates or structures so you can get a head start on wireframing specific elements in what you intend to make, commercial or otherwise.

Leave a comment