User Experience Architechture & Design
User Interface Design
out as sketches
on a whiteboard
or on a drawing pad
We add our requirements and figure out how to fit them into the available real-estate on the screen. We discover the elements that are needed to meet those requirements, continuing to rearrange and re-draw the I images as if we're fitting together an elaborate User Experience and User Interface puzzle.
WIREFRAMES ARE DEVELOPED USING CAD PROGRAMS
CAD programs such as Sketch, InVision,
Axure, iRise, Adobe XD and much more.
I have a preference towards Axure.
1. Axure allows users to create wireframes, mock-ups and interactive prototypes as apposed to those programs that only allow wireframes, or just the development of images.
2. I found that a majority of prototyping programs only allow the user to accomplish what the engineers and developers of the CAD programs think you will want to produce. But, how can they know what I'm going to want to create when I don't even know. Trends and technology is too mercurial to predict.
3. With basic coding skills I can get Axure to do anything I want.
The three pictures in the following slides demonstrate wireframing and the iterative process. The task was to use the original template (the first picture) and combine it with a three-picture slideshow on the top of a new website. I was also called to create a means by which users can prioritize elements in their clients’ accounts and to design the option of a heart icon to emphasize favorite elements. This was accomplished by providing clickable colored boxes that would change the color of the text to provide users immediate feedback to the priority level of the information listed.
The second picture is the wireframe of what I designed, and the third picture was the first iteration, a
rough-draft of the final design. There were several iterations to follow, but due to the proprietary
nature of this intranet site I am unable to display the final design.
Through each iteration
of wireframes we
add more and more detail and interactions
You have a great idea for a new application….
You know how to make that thing that solves that huge problem everyone is having with that device….
You have it all figured out in your head and you’ll make a fortune on it as soon as you get a few engineers and programmers working on it….
If only you had some way of getting your entire staff to see your vision.
That’s where I come in.
Putting your ideas into a Function Flow Chart or a Process Chart translates your vision into detailed instructions everyone on your staff can understand and work from; especially your engineers and computer programmers.
The following is a very basic Function Flow Chart for a grocery store App in India