UX/UI Design Notes
UX/UI Design
Source
Mood boards
Colors
Gradient
- Sites for gradient
Font
Sites
Font sizes
| Element | Weight | Size | Multiple of 8 | |
|---|---|---|---|---|
| 1 | <p style="font-size:40px;">Heading-1</p> | Regular | 40 | 8x5 |
| 2 | <p style="font-size:32px;">Heading-2</p> | Regular | 32 | 8x4 |
| 3 | <p style="font-size:24px;">Heading-3</p> | Regular | 24 | 8x3 |
| 4 | <p style="font-size:16px;">Body</p> | Regular | 16 | 8x2 |
| 5 | <p style="font-size:16px;font-weight: 700;">Body</p> | Bold | 16 | 8x2 |
| 6 | <p style="font-size:16px;font-style: italic">Body</p> | Italic | 16 | 8x2 |
| 7 | <p style="font-size:16px;font-weight: 700; font-style: italic">Body</p> | Bold | 16 | 8x2 |
| 8 | <p style="font-size:8px;">Body</p> | Regular | 8 | 8x1 |
Buttons
- Sites
Images
- Sites
UI Design Priciples
Source
Context of Use
- Design should be not only be good looking but also appropriate for a given situation.
Should Form Follow Function?
Implementation model are close to the technics used to solved the problem, not the user mental model.
The implementation closer to the user mental model have better user experience. User don’t care how the things work underneath the form or a button, they are more geared towards the user experience.
5 Rules for designing on small screens
- Focus on the context of use
- When the user will use the app?
- When they stress?
- When they are driving?
- When listening to music?
- Simplify
- Each screen should only have one primary action
- Design for thumbs
- The menus and buttons should be reachable to thumbs
- Design for fat fingers
- The size of the button should be at least 48 px
- Minimize the need to type
Organizing Visual Information
- Balance: Creating Visual Order
- Arrange positive elements and negative spaces so that no one area of design empowers the others
- Group the related items by removing the negative space between them
- Increase the negative between unrelated items by adding more padding
- The lines/rules could be replaced by the negative. Removing rules/lines decreases the visual noise
Rhythm
- Rhythm is the repeating
Harmony
- Harmony is the visual echo
- Harmony provides the visual clues
Dominance
- Dominance is the anomaly
- Having different color or size from the rest
- Dominance is achieved by emphasizing one or more visual elements
- Dominance is also hierarchial with primary, secondary and tertiary dominance.
- Dominance helps in identifying start and end.
Dominance Elements
- Greater size is greater dominance
- More contrast is more dominance. Contrast dominates on size.
- More negative space also helps in dominance
Alignment
- This one of the most important UI element.
- Don’t put group boxes but instead add padding or remove negative space to group the elements
Proximity
- This is the distance between the visual elements
- Group and organize related items with proximity
Color
- Color triggers emotion
- Color also could be used to continuity
- Color also could be used to identify the similar interaction cues like navigation
- Start with one dominant color and add an accent color
Color Theory
- Use colors sparingly
- Reinforce hierarchy and content
- Use color scheme consistently
- Use colors for functional
Choosing right colors
| Color | Purpose | Examples | |
|---|---|---|---|
| Black | Authority and Power | Art, Music, Designers | |
| White | Innocence, Purity, Peace, Cleanliness | ||
| Red | Alarm, Urgency, Attention, Warning, Danger, love | Black, White and Red have highest contrast and used for strong emotions | |
| Pink | Romance, Feminine, Compassion, grace | ||
| Blue | Peace, Business, Technology, Innovation, Male | ||
| Green | Nature, Organic, Calming, Relaxing | Hospital, Environment | |
| Yellow | Happiness, Warmth, Joy, Positiveness | Sunlight | |
| Purple | Wealth, Luxury, Sophistication, Feminine, Romantic | ||
| Brown | Nature, Earth, Home, Friendship, Richness, Genuineness |
Variations of colors
| Color Variation | ||
|---|---|---|
| Shadows | Dark Shades | Black |
| Mid-tones | Medium Shade | Dark Blue |
| Highlights | light Shade | light Blue |
| Accents | Anomaly | Red |
- Don’t use high saturated colors. They strain the eyes.
Power of contrast
- Contrast helps in readability
- Primary content or actions should have most contrast
- Contrast directs focus
- Contrast always wins.
- To check if contrast is working, change the elements to gray scale
Typography
- Pattern recognition
- The simpler fonts help in easy recongnition
- Alignment
- Fonts left aligned are easy to read
- Don’t do center align
- Kerning (Space between letters)
- If the water is filled then the volume of the water should be even between the letters
- Leading (line height)
- More leading is better for readability
- There should also be sufficient space between the paragraphs
7 Rules of typography
- Two Typographies at max
- The character width and kerning should be same for both fonts
- There should be some visual difference between these fonts
- Limit the line length (60 char for desktop, 30 chars to mobile)
- Keep the line length short. Longer line lengths are tough to read and keep track
- Choose Readability
- Choose Legibility
- Beware of capital I’s and small l’s
- There should be sufficient kerning otherwise r and n together may look like m
- Use space between paragraphs and lines (leading)
- The leading should be half the character size
-
Align text elements in layout using baselines
-
Use style (bold, italic, bold+italic) to diferentiate between types of contents
5 Rules for choosing imagery
- Make sure you the image serves the purpose
- Focus on people not things
- People looking away from camera makes more impact and real.
- Cropping changes the meaning of the image
- Never go for cheap shot
- Do not forget the power of illustration
Imagery do’s and don’t’s
Icons
- User labels on icons
- Make icon at least 48 px size
- Icon saves space
- Use the icons which are familar
Types of icons
- Similar icons: Simple, easy to understand actions and concepts
- Symbolic icons: Hamburger menu, Lock icon, printer icon
- Example icons: Like Aeroplane
- Arbitrary icons: Bluetooth icon
5 Rules for creating icons
- Keep visual/perceived size consistent
- Keep the level of details consistent
- Eliminate the unnecessary details
- Don’t mix and match styles
- Don’t reinvent the wheel
Dealing with data
Relationship between data-designer-viewer
- Data-Designer : Visual Art
- Date-Viewer : Informative
- Designer-Viewer : Persuasive
Five Rules fo Data Design
- Data is only useful if it can be understood
- Data without design is noise
- You’re designing for other people
- You’re designing for their context of use
- The usefulness of data decreases when the volume increases
- The more brain power required to decode the visualization the less that’s available for understanding it