Visual Vocabulary
UI Trends and JQuery
Basic Ideas for UI
Simple Clean UI – Easily Customized
With the use of white space, a color picker, and the ability for upload and crop
photos we can create a UI that can easily be modified and yet maintain a
consistent high quality look and feel.
Add movement and agility to UI
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
Present users with two simple login UI –horizontal or vertical layout to accommodate the various images being utilized by our clients
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
And selects if they want the login to be a floating screen or a standing & reflecting screen
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
The user selected the background
•
White
•
90% Black
•
Or a textured background
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
•
Utilizing a color picker the basic elements of the design and be defined, the font color, the super hero back glow, the color of the windows
Or we could limit the color pallet to a selected color wheel
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
•
Utilizing an image selection tool and a cropping tool we can allow users to select custom images and crop them to the correct size
We can calculate the color range of the selected color to apply one of IBM’s new colorful logos
Basic Ideas for UI - Log In Examples
Basic Ideas for UI – Log In Examples
Sample Client Log in
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
Using jQuery we could use IBM’s attractive, non-web standard Helvetica Neue font
Simplified UI
Simple Clean UI – Easily Customized
•
•
•
The color of basic elements can be easily modified by simply modifying the background color – no images need to be changed.
By using png image with transparent and partially opaque feature you can layer these image over a background to create the illusion of a
colored graphic.
Drag this button over the boxes to see the effect!
Simplified UI
Simple Clean UI – Easily Customized
•
Now drag this png image over the other colors.
Simplified UI
Simple Clean UI – Easily Customized
•
Even the back glow effect can be easily created with just a shift of the background color.
Simplified UI
Simple Clean UI – Easily Customized
•
The results is a simple, clean, consistent and easy to modify UI.
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
Clean black, grey-ed white elements, orange highlights and the selected color make up the basics of the UI.
Basic Ideas for UI
Simple Clean UI – Easily Customized
•
Please note… I have not yet incorporated icons into the design.
The top bar contains:
•The logo
•Icons
•Mouse over field to describe each section
•An in the right corner – the date, user, “Sign
Out and Help” links
Basic Ideas for UI
The base IBM bar servers to create a blind or wipe transition – sliding up and down to reveal the selected content.
Basic Ideas for UI
When you mouse over a truncated description a coda bubble appears
As you hover over the description to reveal to full and complete description.
Basic Ideas for UI
You can see the number of comments made on any given list item. If you mouse over any of the numbers you see the full comment.
If the comment is NEW it is highlighted as such!
Basic Ideas for UI
Click on any of the comments and get a comment window – with all comments made, and the details of the comments.
Basic Ideas for UI
You can scale the size of the window to see all the comments in one view.
Basic Ideas for UI
If you click on a list item a slider is used to reveal the details of that particular list item.
Basic Ideas for UI
Clean simplified sliders let you select and narrow in on a search criteria.
Basic Ideas for UI
Vertical sliders reveal the various types of kpis.
Basic Ideas for UI
A multimedia video walks users through the ease of customizing the UI and we present a library of different looks.
Simplified Customization
A modal window and a slider based wizard walks users through the 5 step
customization process.
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Basic Ideas for UI
Basic Ideas for UI
Basic Ideas for UI
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization
Simplified Customization