Please enable JavaScript.
Coggle requires JavaScript to display documents.
Dig - Coggle Diagram
Dig
Design Element
Space
Used to support meaning or zone groups of data (i.e. space between elements). Used consistently to develop predictability
Point
Smallest element of visual communication, can be a dot but not necessarily circular
Colour
Choice of colour matters. Be consistent throughout application, and make sure colours chosen are compatible with each other (perhaps use a colour wheel)
-
Line
A line can be a starting place, a marker or trigger to change
Shape
Shapes can use lines (straight or curved) to develop two-dimensional zoning and the implied boundary of an object. Shapes are good for conveying structure around data. The simplest form of shapes with data is a table. Shapes could also be a circular icon to centre a user to a record button on a phone
-
-
Proportion and scale
Ratio and size. Look for the "Golden Ratio". In mathematics, two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities
Design Principle
Balance
Arrangement of components of a visual communication in relation to a real or implied central axis / equilibrium / symmetry
Contrast
Contrast refers to opposing aesthetic qualities (i.e., what you see when you compare things that are different) and can be used for to create emphasis or focal point
Proximity
Where elements are positioned or grouped in relation to each other, perhaps 'clumping' elements near each other that have a perceived relationship (or avoiding those that don't)
Harmony
Interpreting the proximity to make sure components as a whole provide valuable meaning and are complementary across the interface. For example, sometimes it is better to split datasets across screens for example to avoid confusion
Alignment
Elements should 'line up', commonly used in HTML sign up forms
Repetition
Repeated elements (such as page constructs, sections or product layouts) which helps predictability
Hierarchy refers to the 'reading order' of a design
-
-
-
-
-
-
-