Designers should think about how their designs behave as the user’s screen size changes. Unfortunately, neither Photoshop nor Sketch - the most mainstream UI design tools - allow for this. Since there is a new generation of UI design tools cropping up, I thought I could lay out how a new tool would accomplish this.
In this post I refer to different parts of a UI in ways that other designers might not, so I made this little glossary:
- View - All UI within the device's screen at any given point - relative to a specific "page" in an app.
- Group - A section of the screen, such as a pane or a modal. Sometimes called components. I call them groups in this post since I'm speaking about layer groups.
- Layer - An element of a UI's design - not synonymous with component in all cases.
View grids, group grids, and grid-based dimensions
View grids are pretty straight forward. With something like GuideGuide for Photoshop, they're easy to make too. The GuideGuide feature set should be standard in any interface design tool.
To take it a step further, the GuideGuide type of grid creation should also associate with a group. You might have a group with some repeating layers: a profile picture, a name, and background area. If you put all those layers into a group called “person list” you should have the ability to set up an internal grid. That grid would define how much space you’re giving each layer in the UI. Certain columns can be flexible and certain columns can be fixed. For instance, you might always want the profile image to be fixed but you want the name area to be resizable.
Now the groups within a view and the layers within a group are associated with guides. So if the designer ever goes in and moves the grid guides around, the layers and groups would adjust.
Percentage based dimensions, based on a group, layer, or view
Sometimes you don’t need the sophistication of a grid to arrange content. You just need to say “this input box will always be ’50% - 9px’ of the form width.” So there’s a few details there:
- Layer dimensions should be able to be set as a percentage of a group's dimensions
- Group dimensions should be able to be set as a percentage of a view's dimensions
- Layer and group dimensions should be able to handle math
Relative positioning
What if you want to set distances between groups and layers using the same math that they use for dimensions? So the designer could say “keep this layer 18px to the right of this layer”. They could also say “keep this group 30px below this group”. If a text flow makes a group or layer taller, it doesn’t just overlap with another group or layer. It should be as easy as selecting two layers or groups and updating the relative position.
The designer could try to set impossible relative positions. The tool could provide errors or remove the oldest rule that makes the design impossible.
Min and max dimension constraints
If the designer wants to give something a lot of space the designer might want to give the group a way to scale up as the view gets larger. But at some point they would want it to stop scaling as it becomes no longer helpful - a max width. And as the screen gets smaller - a min width. Min and max widths could also be set with math or based on a grid for a group or view.
Breakpoints
So let’s zoom out a bit and think about the canvas as a whole. You could have a design that works from 300px to 700px. But once it gets to 750px things start to get weird, so you need to set a new size range and adjust sizes and positioning.
Breakpoints adjust a view's positioning and size attributes, down to the individual layer. In each breakpoint, there could be content changes in the view. But there should be far more similarities than differences since it’s the same view in an app. You may want to update existing content in one breakpoint - the copy, or a layer style. If you did, that update would propagate across all breakpoints.