Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
As UI designers, it’s easy to jump into sketching UIs through wire frames. Afterall, UIs are commonly visual. But taking a careful step of planning before sketching is a rewarding way of ensuring that the information embedded into the UI is well-thought of.
Just like it making speeches or writing articles, the writer may create an outline. For UI designers, the Outline may be accomplished by these simple steps:
Step 1: What do you want to show the users
Or what do the users want to see? Based on personas, list down the things that will help them achieve their goals or accomplish tasks.
Step 2: Content / component inventory
Using the list in Step 1, break down each piece of content that will be put into the UI. You may also start with bigger groups thru components.
Step 3: Information architecture
Now, rank the content and components based on the user’s task flows and based on importance
Step 4: Interaction
Plot down connections between content and components. Ask yourself “what will happen if the user interacts with a component?”
Each step, in general, is a task of prioritization – which is appears first? Which comes first? Which is not important enough to be the last?
After having a list bearing the interaction of content and components, it will now be easier to sketch its corresponding user interface or the Wire Frame.