Please enable JavaScript.

Coggle requires JavaScript to display documents.

Shift Nudge - Core - Coggle Diagram

- - - - Useful for websites on larger screens
      - Rarely useful for smaller screens
      - Number of columns should reduce with the screen size
  - - - Useful for laying out
        
        Type
        
        Icons
        
        Primitives
      - Elements may need to be visually aligned to compensate for differences in surface area
  - - - Size
      - Colour
      - Motion
  - - - Coloured action items
      - Cursor changes on hover
      - Outlines on hover
      - Interactive action items
      - Cropped images that prompt scrolling
  - - - Position
      - Opacity
      - Scale
  - - - Ascenders, descenders, and letter width should be taken into consideration for text
      - Every element needs its own negative space
      - Most designs should be low- to medium-density
- - - - Subtitles
      - Action items
      - Metadata
      - Copy
      - Titles
    - - Font size
        
        Limit to 4 font sizes or less
      - Font weight
        
        Avoid hairline weights
        
        Use only the weights that the font supports
      - Font colour
      - Background colour
        
        Darker backgrounds add more emphasis
      - Negative space
        
        More negative space adds more emphasis
      - Position
      - Text decoration
        
        All Caps add more emphasis
      - Line spacing
    - - What the user may plan to do with the interface
      - What the designer hopes that the user would do with the interface
      - Ease a specific course of action vs general browsing
  - - - Titles
        
        Much larger on websites compared to apps
      - Copy
        
        Generally 16px
        
        Depends on typeface
    - - Titles
        
        Generally bolder
        
        Larger type allows for lighter weights
      - Copy
        
        Generally regular
        
        Should contrast enough with title's weight and emphasised text
    - - Can be compared using descenders and ascenders
      - Titles
        
        Generally 1
        
        1 - 1.2
        
        Should be always tighter than copy
        
        Casing
        
        All Caps could be tighter
        
        Title case should be looser
      - Copy
        
        Generally 1.5 at 16px
        
        1.25 - 2
        
        Serif typefaces should be a bit looser
    - - Titles
        
        Doesn't need to match copy width
        
        Space can be utilised better by tweaking line width and type size
      - Copy
        
        45 - 75 characters wide
    - - Titles
        
        Generally left-aligned
        
        Shorter centre-aligned copy may have centre-aligned titles
        
        Can be balanced using borders and right-aligned supporting text
        
        Titles with backgrounds may be centre-aligned
      - Copy
        
        Generally left-aligned
        
        Shorter copy may be centre-aligned
  - - - Indicating affordances for actions
      - Adding visual interest
      - Influencing perceived hierarchy
      - Increasing readability of content
    - - Systematise typography usage by role
      - Similar styles can be used by text with different roles
  - - - Useful for managing user-generated content
      - Large blocks of texts and long lists
        
        Display only a part and reveal the rest on demand
      - Titles and descriptions
        
        Balance titles and descriptions to a consistent size using text truncation
      - Secondary content
        
        Show help text
        
        ...and two more
        
        Icons
        
        Reveal details on demand
    - - Pull quotes
      - Emphasised text
      - Aspects
        
        More negative space
        
        Type
        
        Standout colours
        
        Decorations
        
        Heavier weights
        
        Italics
        
        Larger font size
        
        Casing
        
        All Caps
        
        Sentence case
        
        Symbols and images
        
        Borders
        
        Alignment
      - Important components
    - - Common interactive elements may not need to be styled as such
        
        Navigation
        
        Sidebars
      - Attributes
        
        Colour
        
        Generally primary colour
        
        Type
        
        Background
        
        Borders
      - Larger the impact of the action, more drastic the visual change should be
    - - Negative space
        
        Generous
        
        Consistent
        
        More the elements are related, closer they should be
      - Variety of type styles
        
        A few different styles together
      - Alignment
        
        Align vertically by baseline
  - - - Benefits
        
        User familiarity
        
        Better performance
        
        No cost
      - Preferable on mobile platforms
    - - Benefits
        
        Branding
      - Scope
        
        Headings
        
        Copy
        
        Code or metadata
      - Flavours
        
        Serif
        
        Monospace
        
        Sans-serif
- - - - Some triplets can be written in shorthand
    - - Low lightness results in black
      - Low saturation results in grey
      - High lightness results in white
    - - Saturation is inversely proportional to whiteness
      - Brightness or value is inversely proportional to blackness
    - - Should be tested on designs meant to be printed
      - Used in 4-colour Process printing
  - - - 1 (lowest) to 21 (highest)
      - 3.0 (AA+)
        
        Works only for people with perfect vision
        
        Bare minimum
        
        Font size requirements are applicable
        
        14pt or 18.5px bold
        
        18pt or 24px regular
      - 4.5 (AA)
        
        Works for most people
        
        Useful for metadata, help text, etc.
      - 7.0 (AAA)
        
        Best for titles and copy
    - - Maintaining enough contrast between inactive and active states
      - Highly saturated branding colours may not contrast well with either black or white
  - - - Used for backgrounds and borders
      - Often neutral colours
        
        May be required for interfaces with a lot of user-generated content
        
        De-saturated shades of the primary colour
    - - Often highly saturated shades of the branding colour
      - Used for action items
      - May be used on certain backgrounds as well
        
        Onboarding screens
        
        Graphs
      - Primary action colour
        
        Should pass the "squint test"
        
        Primary action may differ between devices based on capabilities
        
        A screen may have up to only one primary action on almost all cases
        
        Landing pages may have a different primary action colour so as not to clash with screenshots
      - Secondary colour
        
        May be a complementary colour of the primary colour
        
        May be the primary colour at 10% opacity
    - - Colours are perceived differently based on neighbouring colours
      - Monochromatic, analogous, and complementary colours go well together
      - All colours should have enough variations to pass accessibility standards
  - - - Analogous colours (rich) or monochromatic colours (subtle) work best
      - Avoid complementary colours
      - Radial gradients can be used to create a spotlight effect
    - - Indicate truncated content that could be revealed
      - Can be used behind text on images to increase contrast
      - Blending images with backgrounds
        
        Linear or radial
    - - Lighter colour should be on top for the raised effect