Layout

In your first module, you’ll gain an understanding of the fundamentals of UI elements and design systems. You’ll learn why good UI matters and understand the role of UI design in the UX process. You’ll also recognise the effects of poor UI and begin learning how to avoid it in your designs.

Lesson overview

Layout

• Balance and order

• Margins, gutter and padding

• Alignment in UI

• Redesign case study: Alignment

• The 8pt and 12 column grids

• Setting up the 8pt and 12 column grids

Responsive design in Webflow, part 1-4

Recommended reading

The Modern Web Design Process, Webflow

A deep dive into the processes required to create successful websites, from initial idea to final solution.

Additional resources

1. 10 Usability Heuristics for User Interface Design - NNGroup

2. Design Systems Are About Relationships - Smashing Magazine

3. Why White Space is Crucial to UX Design - Fast Company

4. Simple Design is Relative - NNGroup

5. 7 unbreakable laws of user interface design - 99designs

6. Productdesign.tips

7. Webdesignernews.com

8. Webflow 101 crash course

Module notes

Balance and order 

A good UI lays out information in an orderly way

Using an underlying grid and effective spacing = one of the easiest ways to give order to designs

• This structure also helps maintain consistency and remove margin for error

  • Both for designers and developers

Grids

Not essential to use a grid when designing, but it can be a great assistant . Its like a spell checker for writing - there to help you avoid simple mistakes

On desktop, 12 column grid is the industry standard

• This is because of how easily it can be divided up

• Also allows for more varied combinations for more interesting layouts

Grids also help you to think more systematically about your designs

Margins, gutters and padding

Well considered spacing is integral to good UI

Margins

The areas to the left and right of the grid. They act as a frame for the content on the screen

Gutters

Vertical strips between columns. Its the space to stop elements bumping into each other. Used:

• to create consistent space between columns

• when dividing up tables of data with left and right aligned text

Padding

Spacing inside columns. Its like an invisible cushions around the inner edge which stops the content from touching the edges

The thickness of the padding can have a big effect on how the content feels

• Generous padding can make the content feel like it has more breathing space, which can make it easier to digest

  • Can also give the brand a more premium feel

• Tighter padding can accommodate more content

  • So if you’re working with dense information, generous padding might not be as possible 

The difference generous padding can make in UX. Padding is doubled in UI two (right hand side) making it much easier to scan

Takeaways

• Most design tools have inbuilt grid and layout functionality

• Whether you choose to use an underlying grid or not, consistent spacing for margins and padding will make your life a lot easier

• Remember that consistency is your friend

Alignment in UI 

Objects that’re aligned feel like they have more of a sense of order

Spacing should be consistent

Helps to use master components so it doesn’t become fiddly

When using divider lines to separate text, ensure the divider is aligned with either the text or the edge of the page

Also helps to create delineation between text thats close together - so you can see the difference immediately between titles, subtitles and body text.

• Examples - typeface, weight, size, colour

Try to make any element you create a full pixel

• As they appear fuzzy when rendered on screens

CCCCC and DDDDD - common light gray HEX values

33333 - decent dark gray HEX value

The 8pt grid design systems

Many design systems use consistent approaches to sizing a spacing - removes room for error

Google - good example

Huge company with lots of offerings, so they created a material design language

• Uses the 8pt grid across all of their products

Works horizontally and vertically

Makes communication between designers and developers easier

You can use the thinking behind this system to create your own UI

Setting up the 8pt and 12 column grids

Create a new frame - make sure its the screen size of the device you’re designing for

Tip: hit F key in Figma to display common templates for device types

8pt grid - can use this to make boxes and layouts that are multiples of 8

Tip: you can change the nudge amount to 8 (means that whenever you move an element, it moves in increments of 8) - helps you to move things around more quickly and accurately

Can add grids on top of each other

12 column grids - conventional for desktop layouts

• Column width, margins and gutters (all spacing devices we’ve discussed)

To stop the column flooding to the edge of the frame, increase margins

If you adjust the margin, the columns will also shrink or grow in size (when the width is set to auto)

Can get the 8pt grid to align with your column edges

Responsive design

Sites that adjust to suit the device

• In terms of content hierarchy, layout, font and images sizes

Before responsive websites, sites were built with fixed pixel dimensions according to popular laptop and monitor resolutions

Same design elements, behaving in a more fluid way

• As much of the content needs to behave in a flexible or fluid way as possible

Because we can’t control the browser size on a users device, we need to set up behavioral rules for content

Breakpoints - the point at which the layout for desktop stops working effectively or breaks as a screen is shrunk. At the breakpoint, content needs to be reorganised so it works more effectively for the user

Focus on consistent margins and padding instead of specific columns at smaller screen sizes.

Much of the content that would occupy a number of columns on a desktop screen for example, could shrink down to a single full width mobile panel

On smaller screen sizes, can create rules e.g. the margins and padding of content are fixed a certain distance from the edges but the area in between can flex

Things to think about:

• How will this chunk of content behave on a smaller screen?

• Will these nav items that show on desktop need to be hidden fully or partially behind a menu drawer on smaller screens?

• What about the 12 column grid I have for desktop - does that scale down too?

The grid

• 12 columns desktop size

• 8 for tablet size

• 4 for mobile sizes

Designing with Webflow

Helps to understand how to put designs together in code without having to write any

Its a visual editor that creates code as you go along

Using this tool to explain responsive design and not Figma. Figma creates static designs - visual illustrations of how you want that design to behave. But Webflow does

Cool that they have mobile portrait and  landscape views

Not a replacement tool for Figma - which is useful for ideas and building user journey flows etc.

• But if you want to see how a select few important pages look and behave responsively, this is a good tool

Desktop view

• Content is set to 100%

  • So block one is taking up 100% of the width of the screen

• Other three are preset from the column settings

  • Can customise this

• This all reminds me of squarespace

• 24 pixels of padding all the way round is good (for desktop)

Tablet