Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
UX / UI Design
170
UI / UX Design
Alberuni Tech
12/22/2018
UI DESIGN
UI DESIGN
Stands for User Interface Design
- The look and feel
- The presentation
- Interactivity of a product
Balance
Consistency
PRINCIPLES
Color
PRINCIPLES
Contrast
Typography
COLOR
Color vocabulary, fundamentals and the psychology of color
- Warm and Cool
COLOR
- Monochromatic Color Schemes
- Analogous Color Schemes
- Complimentary Color Scheme
- Split Complementary Scheme
- Triadic Color Schemes
Something’s not quite right here.
"choose color wisely"
Example
Correction
Coolest
Warmest
Color Wheel
Monochromatic Color Schemes
Variations of Blue Color
Variations of Red Color
Adjacent Colors
Analogous Color Schemes
Opposite to each other
Complimentary Color Scheme
Example
Variation of Standard Complementary color scheme
Split Complementary Scheme
light green base
Example
Three colors equally spaced around the color wheel
Triadic Color Schemes
Triadic scheme with a blue base
Example
By The Pond site uses a lovely dark-blue grey with complimentary mustard
Example
BALANCE
- Symmetry
- Asymmetry
BALANCE
- Off-Balance
Symmetrical balance is mirror image balance.
Symmetry
Mobile Web Book
Example 2
Florida Flourish
Example 3
Asymmetrically balanced layouts have elements that don’t mirror each other across a center line.
Asymmetry
lack of balance can convey action and motion.
Off-Balance
Contrast
1. Contrast is attractive to the eye
CONTRAST
2. Contrast aids organization of information
3. Contrast creates a focus
The Carsonified site uses contrast to make an impact
Example
Studio8 have used Contrast, Balance and Proximity laws to produce an unusual, eye-catching page
Example
The famous adverts for the iPod expertly used contrast to focus the viewers attention on the music player
Example
Typography
- Contrast
TYPOGRAPHY
- Line Height
- Letter Spacing
- Line Length (words in a line)
Example
The Keys to Readable
Typography
Keys to Readable Typography
1. User-Friendly Headers
2. Scannable Text
3. White Space
4. Consistency (size, color, shape)
5. Density of Text (amount of text)
6. Emphasis of Important Elements
7. Organization of Information
8. Clean Graphical Implementation
9. Use of Separators
10. Good Margins
Example of "white spacing"
Example "emphasis of important elements"
Easy way to divide text into sections
Example of "use of separators"
Example of "good margins"
Consistency
Consistent design is intuitive design. (Usability and learnability)
Consistency
Four types of Consistency
Types of Consistency
- Visual Consistency: Similar elements that are perceived the same way make up the visual consistency. Fonts, Size, Buttons
- Functional Consistency: Similar controls that are functioning the same way make up the functional consistency.
- Internal Consistency: This is the combination of both visual and functional consistency in your product design.
- External Consistency: This type of consistency is achieved when there is design consistency across multiple systems/products.
Main Point
Bend consistency, don’t break it
A picture is worth a thousand
words
OVERVIEW
ABOUT
PRINCIPLES
UX DESIGN
UX DESIGN
- UX stands for user experience design.
- Also called UX, UXD, UED or XD
- The process of enhancing user satisfaction with a product
- Improving the usability, accessibility, and pleasure provided in the interaction with the product.
DOUBLE DIAMONDS
Divided into four distinct phases — Discover, Define, Develop and Deliver — the Double Diamond is a simple visual map of the design process.
- Discover: Start of the project. Designers start researching, getting inspired, and gathering ideas.
- Define: Definition stage, where designers define an idea extracted from the Discover phase. From this, a clear creative brief is created.
- Develop: This is where solutions or concepts are created, prototyped, tested and iterated. This process of trial and error helps designers to improve and refine their ideas.
- Delivery: The final phase is the delivery stage, where the final project is finalized, produced and launched.
EXAMPLE
Comparison
UX
UI
COMPARISONS
BETWEEN
UI & UX
- Any interaction a user has with a product or a service.
- Blue Print of Product.
- Functional interface of a Product.
- For example human body organs, bones, Structure.
- Visual, Interactive experiences.
- Mockups of Product.
- presentation, look & feel of the product.
- For example colors, presentation.