---
title: "layout"
aliases: 
tags: 
- info203
- visual-design
---

Techniques such as, [similarity](notes/law-of-similarity.md), [grouping](notes/grouping.md) and (to a lesser extent) [closure](notes/law-of-closure.md), can be used to organise and groupu our interfaces. Often the grouping and layout is done before the rest of the design.

Examples:
![find dialogue](https://i.imgur.com/RfkC6Fq.png)
![otago uni homepage](https://i.imgur.com/FjF8c98.png)
![tobias poster](https://i.imgur.com/P1m9XH8.png)

This is relatively easy. However, when done badly it can quickly confuse the user.

**Summary**
- alignment guides the eye and reduces clutter
- avoid slight misalignments that undermine your ability to beacon organisation
- we automatically notice patterns and deviations
- when you deviate do so strategically
- use visual proximity and scale to convey semantic information

# Examples
![scott klemmer example](https://i.imgur.com/hGc8dZm.png)
![youtube and ny times](https://i.imgur.com/5bztsrO.png)
![apple finder and tobias poster](https://i.imgur.com/wgsiKb6.png)
![google, ny times, craiglist, webby awards, before and after blurring](https://i.imgur.com/wnKoBEk.png)
![scott klemmer examples 2](https://i.imgur.com/sGmAjLv.png)
![scott klemmer examples 3](https://i.imgur.com/wD65fJu.png)
![amazon](https://i.imgur.com/1L6IGAi.png)

# Jan Tschichold and Bauhaus
There was a sudden change from the right images to the left. This was partly due to advances in technology. This change was made by the Bauhaus group/school which became a way of thinking. Their ideas were inspired by architecture. The style was simple, functional, well grouped. These elements are also present in their visual design. 

![typography old v new](https://i.imgur.com/nbEzVeP.png)
![bauhaus bulding](https://i.imgur.com/MlP9Lra.png)
![penguin books](https://i.imgur.com/jOCvCkw.png)
![magazine](https://i.imgur.com/LXsRpCb.png)