MYP Design Interface Layout and Visual Hierarchy Notes

A Grid Stops Every Screen Being a Fresh Argument

1. A grid is a set of invisible columns that everything on the screen lines up to, with a gap called a gutter between each one.
2. Phone layouts commonly use 4 columns, tablets 8 and desktops 12, which is why the same design can stretch between them.
3. An element can span several columns, so a photo might fill all 4 on a phone and 6 of 12 on a laptop.
4. Alignment is what people actually see: the left edges of headings, text and buttons all landing on the same invisible line.
5. A 3 pixel misalignment reads as sloppy even to someone who cannot say what is wrong.
6. A grid also makes you faster, because the question "where does this go" has already been answered once for the whole product.

Visual Hierarchy Decides What Gets Seen First

1. Every screen already has an order in which things get noticed, and the design job is choosing that order instead of letting it happen by accident.
2. Size is the bluntest tool, since a 32 px heading beats a 16 px paragraph before anybody has read a single word.
3. Weight adds force without taking space, so bold text at the same size still steps forward.
4. Contrast against the background does more than hue, because a pale grey button on white vanishes whatever colour you tint it.
5. Position counts too, since the top left corner of a left to right screen is read first and the bottom right is read last.
6. Give each screen one clear first thing, and when two elements are fighting for it, shrink one rather than growing both.

Proximity and Whitespace Group Things Without Drawing Lines

1. Proximity means items placed close together are read as belonging together, and items pushed apart are read as separate.
2. A label 4 px above its input box clearly belongs to it, but the same label 4 px below the previous field belongs to the wrong one.
3. Whitespace is space left deliberately empty, and it is the cheapest way to group things without adding boxes, lines or colour.
4. Aim for roughly double the space between groups that you leave inside a group, such as 8 px inside and 24 px between.
5. Filling every gap is the common beginner move, and it forces the user to work out the grouping that the spacing should have told them.

Eyes Scan in F and Z Shapes

1. People skim a screen before they read it, and the path their eyes take usually falls into one of two shapes.
2. The F pattern turns up on text heavy screens: a long sweep across the top, a shorter sweep lower down, then a run straight down the left edge.
3. The Z pattern turns up on sparse screens such as a landing page: across the top, diagonally down, then across the bottom to the action.
4. Both patterns give the same practical instruction, which is that the first two or three words of any line carry most of the weight.
5. "Download the timetable" scans better than "Click here to download the timetable", because the useful word is no longer fourth.

Consistency Means Learning the Screen Once

1. Consistency means the same kind of thing looks the same and behaves the same everywhere in your product.
2. Choose one button style, one set of heading sizes, one icon family and one spacing step such as multiples of 8 px, then hold to them.
3. Internal consistency is within your own screens, while external consistency is matching what users already learned from other apps.
4. Breaking an external convention costs real time, and a back arrow that moves forward will cause errors however clever the idea was.
5. Break consistency only to signal a genuine difference, such as a red Delete that deliberately looks nothing like Save.

Affordance and Signifiers: Make the Button Look Pressable

1. A physical door handle tells your hand what to do before you think about it, and a screen has to do that same job with nothing but pixels.
2. Affordance is what a thing lets you do, and signifiers are the visible clues telling you the action is possible.
3. The standard button signifiers are a rectangle, a solid fill or a border, a verb as the label, and a colour change on hover or press.
4. Very flat design strips those clues away, which is why plain coloured text with no box around it gets missed so often.
5. Feedback belongs here too, because a button that does not visibly change when tapped gets tapped four more times.
6. Test it by covering the label with your thumb, and if a stranger still cannot tell that region is tappable, it needs another signifier.