#6 Information overload

A summary of the five problems stated could be summarized to one single problem: when you’re on a mobile device you only have so much space, so you can’t fit too much either, while on desktop you have so much area to play with.

Adding too much content with too much hierarchy (with font boldness, colors, heavy imagery, etc) will make it a mess on a desktop. Hence, one needs to reduce the components a notch everywhere: the shadows will become smaller, the tabs won’t have a heavy background but rather a colored underline to indicate which is active instead, and so on.

Two quick practical tips to get started

#1 Setup a few basic components

Start off by bringing components from your current design system or create a few that you feel will be often used, and have them with you whenever you create a new page (wether you’re going to use them or not) to have them by the side to check that you’re using the same look and feel.

#2 Create the most important variables

When the project reaches the front-end developers, it’s practical to have a few variables defined, such as the shadows.

(A variable is something the front-enders will use over and over again, like a symbol in your design software, that they call by a unique name, like $shadow-large or $shadow-small)

I created shadows, rounded corners and padding/margins, since that’s something that is often re-used. The benefit of creating them as variables in your design system and front-end specs is that you’ll be able to easily change it in one place and it’ll change everywhere.