User Experience Architechture & Design
User Interface Design
01
PROJECT SAMPLES
02
WIREFRAMES
Wireframes start
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 start 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
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.
Another
Wireframe
Work Sample
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
03
BUTTONS
It all starts with research. Every element on the page should tell a story and/or be consistent with the image goal of your company.
Which can be designed in any color, can reflect any image to subliminally sell your product and can reflect a light source from any direction consistently throughout all screens.
It all starts with research. Every element on the page should tell a story and/or be consistent with the image goal of your company.
04
Process
Charts
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
