1 / 52

Visual Vocabulary

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.

ariana-dyer
Download Presentation

Visual Vocabulary

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Visual Vocabulary UI Trends and JQuery

  2. 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

  3. 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

  4. 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

  5. Basic Ideas for UI • Simple Clean UI – Easily Customized • The user selected the background • White • 90% Black • Or a textured background

  6. 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

  7. 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

  8. Basic Ideas for UI - Log In Examples

  9. Basic Ideas for UI – Log In Examples

  10. Sample Client Log in

  11. Basic Ideas for UI • Simple Clean UI – Easily Customized • Using jQuery we could use IBM’s attractive, non-web standard Helvetica Neue font

  12. 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 usingpng 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!

  13. Simplified UI • Simple Clean UI – Easily Customized • Now drag this png image over the other colors.

  14. Simplified UI • Simple Clean UI – Easily Customized • Even the back glow effect can be easily created with just a shift of the background color.

  15. Simplified UI • Simple Clean UI – Easily Customized • The results is a simple, clean, consistent and easy to modify UI.

  16. 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.

  17. 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

  18. 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.

  19. 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.

  20. 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!

  21. 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.

  22. Basic Ideas for UI You can scale the size of the window to see all the comments in one view.

  23. Basic Ideas for UI If you click on a list item a slider is used to reveal the details of that particular list item.

  24. Basic Ideas for UI Clean simplified sliders let you select and narrow in on a search criteria.

  25. Basic Ideas for UI Vertical sliders reveal the various types of kpis.

  26. Basic Ideas for UI A multimedia video walks users through the ease of customizing the UI and we present a library of different looks.

  27. Simplified Customization A modal window and a slider based wizard walks users through the 5 step customization process.

  28. Simplified Customization

  29. Simplified Customization

  30. Simplified Customization

  31. Simplified Customization

  32. Simplified Customization

  33. Simplified Customization

  34. Simplified Customization

  35. Simplified Customization

  36. Simplified Customization

  37. Simplified Customization

  38. Simplified Customization

  39. Simplified Customization

  40. Simplified Customization

  41. Simplified Customization

  42. Simplified Customization

  43. Simplified Customization

  44. Simplified Customization

  45. Basic Ideas for UI

  46. Basic Ideas for UI

  47. Basic Ideas for UI

  48. Simplified Customization

  49. Simplified Customization

  50. Simplified Customization

More Related