Some guidance that covers the basic visual building blocks used to create our experiences. Paired with the Gestalt Principle of Perception the Law of Similarity and the Law of Proximity, we use these elements to develop design patterns and unique signature experiences that help define the Security brand.
Team
Blake H., Cameron C., Hyun S., Amanda M., Allison H., Peter C., Liz H., Lara H., Simon F., Leigh M.
Grid
Open. Informative. Logical.
When dealing with complex information the Grid lays the foundation for which we can create balance and symmetry and in doing so help users find a sense of order within disorder. This can help combat the feeling of complexity.
- Grids are the invisible structural foundation
- Define a structure for your page including margins
- Use the grid for alignment, continuity and consistency
- Build harmonious arrangements by organizing things visually
- Align elements on the grid lines both vertically and horizontally
- Use the grid for balanced but not 100% symmetrical layouts
- Place elements in the right location to achieve balance
- Ensure elements appear in the same place on each page
Grid framework
Basic page framework is based on a 20×20 pixel grid. The basic unit of measurement is the unit where one block equals 20 × 20 pixels. Each unit is further divided into sub-units of 5 × 5 pixels. There are 16 sub-units per square unit.
After several years of using this grid system, my current team uses an 8px grid to allow greater flexibility in horizontal spacing and vertical pacing of the page as the viewer scrolls.
Columns
Layouts can be based on 60px columns used to define uniform spaces and provide reflow “marks” for adaptive ui. The space between each column and on either side of the total content area is called margins. Column grids are important for determining page types and maintaining consistency between pages with similar content.
When grids are properly used, columns become superfluous. Columnar display is a throwback to traditional printing focused on fixed sizes and displays, while a grid system allows flexibility for not only horizontal spacing, but more importantly, vertical pacing.
Display Chart
The physical size of the area where content is displayed. The size of a screen is usually described by the length of its diagonal, which is the distance between opposite corners. The screen’s display resolution is measured in pixels. Common dimensions are listed in the table above.
Layout
Open. Informative. Logical.
Structure and legibility play a key role in UI architecture because the organization of the content directly affects our ability to comprehend a message. If it is jumbled or overwhelming many viewers will disengage before completing tasks.
- Guide users through to their destination
- Consider how the user might access the content
- Contextualize experiences so people can be more focused and engaged
- Develop clearly framed content to enhance skimming and scanning
- Structure of information to allow users to attain multiple levels of understanding
- Use structure to create meaning
- Tell a story with the content to create an emotional connection they will remember
- Use grids to convey a sense of relationships between information sets
Golden Ratio
The golden ratio has also been used to analyze the proportions of natural objects as well as man-made systems such as financial markets. It is commonly used in everyday design, like postcards, posters, wide-screen televisions, photographs, light switch plates and cars. Some psychologists believe that the golden ratio plays a role in human perception of beauty.
These high-level thoughts are merely a framework on which to build your systems and as such are fluid and accepting of change. These are strongly-held opinions, loosely held; meaning they have worked for my team and I will continue to advocate for them until information informs me otherwise.
The ability to adapt design behaviors to data is paramount in success for design ing at scale, on an enterprise-level.