Awwwards Vote For Us
User Interface Design
Registration Page Design





What the is a wireframe?

A digital wireframes is an outline based layout that is used to show very rough estimations of all the elements that a final design will have. It is also known as a schematic or screen blueprint, is a visual guide that represents the skeletal framework of an application of website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. It is not just used in web and user interface but spans across an entire industry.

Construction:

In the world of construction, digital wireframes are used to sketch out the rough concepts of buildings before they move on to filling out the finer details, textures and colours.


Automotive design:

Used to fix the curves in place and resolve design issues before all the colour is filled in to build the designs of the vehicles. I wanted this job in another lifetime but this is where I'm needed and this is where I'll stay.


Animation:

3D model experts use digital wireframes inside their popular softwares to shape out their work before filling it out.


And finally, in Web & Apps

We use it to "think out" all the individual components that will be required to build a successful application's interface and all the individual places before filling it using specific size and placement of page elements, site features, and deterring the conversion areas and navigation zones.



How I Work

The job was simple to the client. He wanted me to design a new user interface in 6 hours and deliver it. I refused - we stood our ground. It couldn't be done. In my 3 years of working with user interfaces, one thing had become crystal clear:A digital wireframe is like a road that you build so that your car can travel without getting torn to pieces by rocks. I was not about to walk that road again.

The wireframes provide a clear path of what I intend to create. It creates constraint that bind my creative process into focussing on easily manageable tasks and minimises distractions. In the same way highly skilled painters will carefully sketch out the outlines of their intended work and then fill it out with paint in a later stage, I need to design my wireframes before proceeding. Thinking too much can distract you and freeze all activity.


Brazil, Rio de Janeiro

A new awesome and ver friendly soul I met on Skype for the first time on Friday las week. Goes by the first name of Peter (last name censored out). He hailed from the beautiful contintent of Brazil in a the buzzing city of Rio de Jenairo. The idea of our first time to get hired by a South American fellow for me to carry out a UI design id seem quite awesome. It still does. It is too easy to rush to dribble or behance and plagiarize another digital artist's user interface. There is just one problem. It is wrong.

Sometimes, a little inspiration is all you need to get started and get cracking.




Why Are Wireframes So Important?

If you skip this part then you might as well have not clicked the link that got you here. This is the reason why we wrote this article. Stick around, but you do not have to thank me though, my clients pay me enough.

1
Build Focus and Clarity

For me they help to make clear and sharpen my focus on what what sort of information will be needed and most importantly what information will NOT be needed on each and every web or app design

2
Increase Understanding

To wholly understand the purpose of an app and to be able to adjust components before doing high fidelity renders is extremely valuable not only for myself but for collaborative designers, developers and the owners of the eject very early on in the project. Wireframes are an excellent way to do that.

3
Enhance Security & Save Time. This is the most important aspect of them all: With wireframes for user interface design, you can set fixed fall-backs in order to bypass imminent scope creep. In short, I avoid building large cases for iteration later on in the project and essentially save copious amount of time.



One more thing:



"I Will Never Change. Never Ever"

I know that there are times I have been tempted to just agree to insane deadlines in order to make a quick buck here and there, but I have learnt that discipline will come back to benefit you as well as the client. You just gotta stick to it. After I discussed the quote with Ray and we reached our agreements, we started.


Wire-frame



After wrapping up the wireframes and submitting them to my new friend from Rio de Janeiro, he approved of the layout and I immediately started on the high fidelity renders with Babalwa, my partner in design. She is awesome. 36 hours after starting on the designs we were officially done!

IOS UI Design Home Screen Design IOS Wireframe Design Wireframing User  Flows

And Ray, he is our newest and happiest client, Brazil, nós te amamos, nossos amigos!!
Coming Soon To App Sote

Next: Blog

Hire the best web
& user interface designer

hello@goldtree.co.za031 827 6386 (RSA)
20 Diakonia Rd, Durban Central,
Durban 4001, South Africa



Share Us :-)

Durban Web Design