Fundamentals - Layout

Layout is a fundamental aspect of design that influences the user experience by arranging elements in a way that aligns with the intended user journey. A well-designed layout ensures that the interface is intuitive, emphasising important elements and guiding the user's attention to where it's needed most.

Space Defines Proximity

Proximity in layout design is used to create a visual connection between related elements. It helps users understand which items are grouped together and can significantly impact the ease of use.

Emphasis Creates Hierarchy

Use size, colour, and placement to create visual hierarchy. Larger, bolder, and more colourful elements will capture attention first, thus establishing their importance in the layout.

Do's: 
Utilise whitespace to let significant elements stand out.

Don'ts: 
Avoid cluttering the space around primary elements, which can dilute their impact.

Software, Not Website

Recognize that the principles of web design do not always apply to software layout. Software interfaces often have to accommodate more complex tasks and interactions, requiring a thoughtful approach to layout design.

Do's: 
Design for scalability and ease of navigation within the software environment.

Don'ts: 
Don't limit the design to the conventions of web layouts if it compromises functionality.

Dividing Surfaces

Dividing surfaces in a UI helps users understand content grouping and the structure of tasks.

Do's: 
Use borders and shades to differentiate areas of content.

Don'ts: 
Avoid excessive divisions that can lead to a fragmented experience.

Nesting

Nesting elements within a UI can organise information hierarchically, making complex interfaces more navigable.

Do's: 
Nest related items to simplify complex interfaces.

Don'ts: 
Don't over-nest, which can lead to confusion and a loss of context.

Nesting Tables

Nesting tables allows for the organisation of detailed data within a structured hierarchy.

Do's: 
Use nesting to break down complex data sets into understandable segments.

Don'ts: 
Avoid deep nesting that can make tables difficult to read and understand.

Shaped Elements

The shape of UI elements can convey function and importance.

Do's: 
Use distinct shapes for interactive elements like buttons and toggles.

Don'ts: 
Don't use unconventional shapes that may mislead users about an element's function.

Buttons

Buttons are the call to action in your UI and should be easily identifiable.

Do's: 
Make buttons prominent and clearly labelled.

Don'ts: 
Don't place buttons where they disrupt the flow of information or user tasks.

Breaking Alignment

Occasionally breaking alignment can draw attention to specific elements, creating a focal point in your UI.

Do's: 
Break alignment to highlight interactive or important elements.

Don'ts: 
Avoid breaking alignment without a clear purpose, as it can lead to a chaotic interface.

High Density

High-density layouts are effective for displaying a large amount of data and controls in a limited space, which is common in business and financial applications.

Do's: 
Utilise high-density layouts for complex data-driven interfaces where information needs to be scanned quickly.

Don'ts: 
Avoid using high-density layouts for simpler tasks where it can overwhelm the user.

Grid and Vertical Divisions

Grids provide structure and guide the eye, while vertical divisions can help separate related information cleanly.

Do's: 
Implement a grid system to maintain alignment and harmony across the layout.

Don'ts: 
Refrain from using grids and divisions arbitrarily, which can create unnecessary complexity.

Action Components Use High Density

Action components, like buttons and input fields, should be designed with a high-density approach to make efficient use of space.

Do's: 
Design action components with clear, concise labels and adequate spacing to ensure usability.

Don'ts: 
Don't clutter action areas with too much information or too many controls.

Grouping

Logical grouping of elements aids users in associating related items, enhancing comprehension and decision-making.

Do's: 
Group related items together to form a clear relationship between them.

Don'ts: 
Avoid inconsistent grouping that may confuse or mislead the user.

Margins

Margins define the space around elements and can affect the overall readability and aesthetics of a layout.

Do's: 
Use margins to create breathing space around content, aiding in focus and readability.

Don'ts: 
Don't ignore margins, as cramped content can be hard to read and navigate.

Spacers

Spacers help maintain consistent spacing within and between elements, contributing to a tidy and organised layout.

Do's: 
Use spacers to maintain consistent vertical rhythm and spacing across different screen sizes.

Don'ts: 
Avoid using spacers inconsistently, which can disrupt the flow of content.

Padding

Padding inside elements affects how content is perceived within its own space.

Do's: 
Use padding to ensure content within elements is not touching the edges, making it more legible.

Don'ts: 
Don't use too little or too much padding, which can either cramp the content or make it float unnecessarily.

Information Density

Information density should be adjusted based on the user's task, screen size, and context.

Do's:
Adjust the density to present the information in a digestible manner without overwhelming the user.

Don'ts: 
Avoid an overload of information in a high-density layout, which can be counterproductive.

Navigation Region

The navigation region should be intuitive and consistent, guiding users through their tasks efficiently.

Do's: 
Design a clear and persistent navigation region that does not change unexpectedly.

Don'ts: 
Don't make navigation complex or inconsistent, which can frustrate users and impede task completion.

Body Region

The body region is where the main content lives, and it should be the focus of the user's attention.

Do's: 
Prioritise content in the body region, making sure it's the most prominent part of the layout.

Don'ts: 
Avoid placing distracting elements in the body region that can pull focus from the main content.

Panes (Layouts, App Bars, Columns)

Panes help organise information at different hierarchical levels and can significantly affect the user's ability to process information.

Do's: 
Use panes to segment content logically, allowing for a cleaner separation of tasks.

Don'ts: 
Avoid over-segmenting content which can lead to a disjointed user experience.

Display Cutout

Accommodate for display cutouts in devices to ensure content is not obscured or interaction is not impeded.

Do's: 
Consider the presence of display cutouts in your layout design to ensure usability across all devices.

Don'ts: 
Don't place interactive elements or key information where it may be obscured by hardware features.

Foldable Devices

Foldable devices introduce a new dimension in layout design, with different orientations and screen ratios.

Do's:
Design flexible layouts that adapt to various screen shapes and folds of foldable devices.

Don'ts:
Don't design rigid layouts that may break or look disproportionate on foldable devices.