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. 
content-sketch.png
whiteboarding.png
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.
WLA.jpg
0_8g6J5qwhnDGSD3nl.png
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. 

RuffWire
RuffWire

press to zoom
AATest
AATest

press to zoom
WireframeWeb
WireframeWeb

press to zoom
RuffWire
RuffWire

press to zoom
1/3

 

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.

WPA.jpg
 
Through each iteration
of wireframes we
add more and more detail and interactions
i5-22.png
i5-22.png

03

 
BUTTONS
A requirement for good button design
A requirement for good button design

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.

press to zoom
Reflective Buttons
Reflective Buttons

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.

press to zoom
Using buttons to Market your story
Using buttons to Market your story

press to zoom
A requirement for good button design
A requirement for good button design

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.

press to zoom

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

GroceryStore03.jpg
mm01
mm01

press to zoom
mm02
mm02

press to zoom
mm0.7pptx
mm0.7pptx

press to zoom
mm01
mm01

press to zoom
1/27