Please enable JavaScript.
Coggle requires JavaScript to display documents.
Shift Nudge - Pro - Coggle Diagram
Shift Nudge - Pro
Style
Design direction
Feeling or emotion that's conveyed by a piece of design
Should be consistent throughout the project
Expressed through visual elements
Typography
Colour
Gradients
Imagery
Corners
Language
May incorporate visual cues from the brand
Should be subtle to start with but could be scaled up if needed
Form should always follow function
Minimalism
Restraint in design allows for primary actions to be highlighted
A design should be the sum of some subtle details
Subtle details should be relied upon to add visual interest
Rounded corners
Shadows
Transitions
Animations
Rounded corners
Layout
Rounding affects layouts by changing the area of elements
Rounded elements should be afforded more negative space around them
Style
Sharper corners evoke a serious and an elegant feel
More rounded corners evoke a casual and a friendly feel
Alignment
Nested elements should have a rounding of
parent-rounding - inner-padding
as a starting point
Adjoining elements should be aligned taking the rounded corners into account
Implementation
iOS interface elements can make use of corner smoothing
System
Element size
Amount of rounding should be proportional to the element's size
Element type
Different classes of elements may have slightly different amounts of rounding
Input controls, button etc.
Lines and dividers
Perceptually groups elements by defining boundaries
Weight
Colour and thickness work together to define the overall weight
Thinner borders allow for darker colours and vice versa
Divider length
Can be used to define two (or sometimes more) levels of grouping
Denser content allows for longer and heavier dividers and vice versa
Denseness
Dividers can be avoided if content is naturally segmented
Negative background space can be sometimes used as dividers
Implementation
Can be implemented with borders or drop shadows
Rollover states with highlighted backgrounds should take borders into account
Depth
Can be modeled using the principle that light comes from above
Elevating
Gradients that go from a lighter to a darker shade of the colour
Drop shadow at the bottom with or without an inner shadow
Highlight at the top on darker backgrounds
Text shadows
Depressing
Gradients that go from a darker to a lighter shade of the colour
Inner shadow at the top
Highlight at the bottom on darker backgrounds
Text shadows
System
Elevated buttons
Recessed input fields etc.
Implementation
Gradients should go from 0 to 10% - 20% lightness or brightness depending on the hue
Inset elements should be slightly darker than the background
Shadows and highlights can be either blurred or not to define smooth or crisp edges
Opacity and blur
Uses
Borders
Avatars
Overlays
Text
Modals
Controls
Hover effects
Images
Muted text
Coloured backgrounds
Implementation
Opacity or blur can be used on their own or in combination
Buttons
Size
3 - 5 sizes
Horizontal padding should be twice the vertical padding
States
Default
Rollover
Darkening animation
Rollout
Reverse of rollover animation but slower
Press
Recessed effect
Darkened colour
Long press
Outlined
Dragged
Elevated effect
Styles
Disabled
Destructive
Primary
Secondary
Non-primary action is not always a secondary action
Tertiary
Overall style
Copy that alternates from the left and to the right
Elements
Navigations
Consistency
Use of language
Placement of menu and dismiss buttons
Navigation items
Actively limit the number of navigation items to 4 - 5
Break down larger navigations with an expandable menu or tiered navigations
Should be optimised for either exploring options or finding a particular option
Inputs
States
Hover
Focused
Error
Indicators
Borders
Background colour
Icons
Colour
Success
Sizes
Textareas should be double the height of an input to start with
Smaller inputs when values are fixed-sized
Checkboxes and radio buttons
Half the size of input fields
Hit area should be the same size as an input field
Radio buttons can be styled as pills or modules
Accessibility
Default text
AAA or higher
Placeholders
AA+ or higher
Helper text and errors
AA or higher
Non-colour visual indicators for errors
Forms
Patterns
Break down larger forms into multiple screens or steps
Use shared form controls across screens or steps
Use a fullscreen or an oversized control for an important or only input
Usability
Offer preset options to allow skipping a set of steps
Offer contextual help or suggestions
Labels should inform users on why the data is required and how it's used
Have known values prefilled
Allow screen space for mobile keyboards
Allow saving progress in optional flows
Profiles and settings
One may contain the other view depending on the nature of the application
Settings
Should be initialised to sensible defaults
User should be informed on the use and requirement of information
Important settings should be easily accessible
Profiles
Should contain only public-facing information
Only required if the application has social features
Tables
Headings
Deemphasized
Dividers
Deemphasized
Vertical dividers can be avoided with extra spacing
Columns
Resize column width to its data
Data that's repeated in all rows may not be relevant
Simplify
Favour paring tables down to simple lists or cards
Deemphasize secondary information
Typography
Use fonts with tabular numbers for numerical lists
Cards and lists
Cards
Emphasized interactivity
Group related information together
Lists
Emphasizes order
More scannable and compact
Dividers
List and cards exist on a continuum depending on how well-defined the item dividers are
Law of common region
Visible dividers
Law of proximity
Only negative space
May lead to a details view
Sorting and filtering
Mostly a secondary or tertiary action
Sorting can be moved under filters
Important filters can be promoted to higher-level sections
Design systems
Should be flexible
Only useful if it's widely used
Should be extended as new requirements emerge
Naming conventions
Hierarchical
Often size / colour
Composability
Building upon components
Imagery
Photos
Static images
Mostly used in websites and rarely in applications
Choosing photos
Avoid stock photographs that look staged
Look for landscape photos that work on desktop designs
Look for images that can be composed with text
Implementation
Composing images
Cropping
Flipping
Blending with content
Gradients
Blur
Masks
Blend modes
Manipulating photos
Rasterising images
Rasterise at least at 2x density
Use HTML + CSS if interactivity is required
Blend modes
Luminosity
Preserve hue and saturation of the base layer and adopt the luminosity of the blend layer
Base layer could be a solid colour or a gradient
Multiply
Reduces whites
Screen
Reduces blacks
Overlay
50% strength each for black and whites
Editing
Use Photoshop or a raster editor to select out and export image components
User-generated images
Testing
Multiple photos
Photos with a lot of white or black
Implementation
Try multiple layouts of images
Use gradients and blur for overlayid content
Restrict or enforce positioning
Use placeholder icons
Illustrations
3D models
Collages
Vector graphics
Glyphs and icons
Choosing icons
Should match the personality of the design
All icons used in a design should be consistent
Implementation
Should be meaningfully used
Not all icons can be used on their own without a label
Sizing
Primary icons are usually 24 x 24 pixels
Secondary icons are usually 16 x 16 pixels