Home ∣ Design Process ∣ Fundamentals ∣ Guidelines ∣ Accessibility ∣ Methods ∣ Research Design Systems ∣ AI ∣ Software Dev ∣ Low-Code Dev ∣ Soft Skills ∣ Career ∣ Tools ∣ Links

• Horizontal grids (Grids made of columns)
• Vertical grids (You can use baseline and block vertical grids to get better vertical rhythm)
• Modular grids (You can split the design into rectangles that you fill with content)
• Hierarchical grids (Split the space into sub-sections hierarchically)
• Other layout systems (There are less common layout systems like circular and diagonal)
• Explicit structure (When you make layout structure more obvious by using visible dividers, containers, and other lines)
• Containers (Show the box that content sits inside)
• Ignoring the layout system (Elements don’t have to follow the strict rules of the layout. e.g. they can overlap other elements, or be rotated)
• Vertical rhythm (It’s good if elements feel like they’re spaced apart in an orderly way)
• Soft vs. hard grids (Soft grids use fixed spacing values between elements, but don’t pay attention to element size. Hard grids fit elements into modules of the grid)
• Noticeable edges (Noticeable edges help you recognise elements, and provide good contrast)
• Visible containers for alignment (Layout is easier and looks better if an element’s container is made visible)
• Responsive design (Use different layouts depending on the size of the design)