< Back to blog

A way to make laying out interfaces easier

You might worry about the same thing that I do: When laying out interfaces, I want to make sure I've considered everything. You might have come up with three or four alternatives, but what if there's a fifth alternative that's better?

Here's my attempt at a process that you can use to make sure you're considering everything. This applies more to laying out the elements inside individual components, such as a card, than laying out the whole application or website.

  1. List all of the elements you definitely need

  2. What form can each of these elements take?

    For an action, you might use a button, a label that is styled like a link, an icon. The options here are likely influenced by your style guide, if you have one. Being aware of the possible forms of each element give you some options to play with when trying to make things fit.

  3. What's the minimum size for each element?

    Generally this will be the minimum acceptable size for tap targets on touch screens, but deciding what height and width you're not willing to go below before you start, can help avoid any "Well, just this once" layout decisions.

  4. What's the order of importance?

    Decide which element you listed in step 1 is most important, then which is the next most important, and so on. Right now you're not deciding which element will go first in the layout - at the top - just the order of importance.

  5. How can you make more important elements seem more important?

    Decide on the styles you will or can use to make an element stand out more. Maybe you give an element more whitespace surrounding it. Maybe you make an element bigger, or give it a different colour. Thinking about which of these are acceptable, like the minimum size, helps you later.

  6. Do all of the elements always need to be visible?

    You might be able to hide some elements until they are needed, depending on what form they can take, and the importance. If this is the case you'll have two layouts: One with elements collapsed or hidden, and one with them showing.

  7. Which of the elements relate to each other?

    You should put things close together if they're related, or at least make them appear similar to each other. For example, make them the same colour or the same shape. You'll know to keep these elements close when trying different layouts.

  8. What's the minimum spacing between elements allowed to be?

    This is probably already defined, if you have a style guide, but if you don't, you'll want to set a minimum spacing amount, for margins and padding. This will mean you don't consider any options where things appear too close together and look unprofessional.

  9. Get all the elements onto a canvas of some kind

    This is the last step. You don't have to use a digital canvas, such as Sketch, but it will make it easier to set spacing and get a good idea of the practicality of layout ideas. Once you've got all of the puzzle pieces on a canvas and you've decided on the rules and restrictions above, start trying to put the puzzle together!

< Back to blog