1. Limiting Variables

If we consider all the potential variables to produce a high fidelity concept, and there can be many, it becomes clear that we need to limit and define them early on. Reducing the amount of choices available will make it easier to be decisive.

With experience, it becomes easier to predict how limiting certain groups of variables have a multiplying effect throughout a composition.

Reducing choices doesn’t correlate to reducing originality. Our assumption is that creating concepts around predefined rules is a limitation, but as designers we can establish our own rules, and be in complete control of formulating them.

Scale & Spacing

Every facet of UI design should revolve around a system that promotes rhythm and helps maintain consistency in scale and space as a project grows. One such system I love to use is modular scale, which can facilitate a scale from any given ratio to measure or set the size of an element or negative space in a composition.

Once we pick a ratio, modular scale can make it easier to define scale and spacing

While it can reduce variables on grids, typography, vertical spacing and the overall dimensions of a layout down to a manageable level, it also provides pleasing aesthetics and rhythm. Designing UI is far easier.

Grids

Grid systems are great for restricting how content is organized within the horizontal plane and a no-brainer when it comes to UI. However, a grid is often picked without too much thought, to be a one-size-fits-all. What most designers don’t realize is that it’s better to create a grid system that is built around the content.

A grid system will reduce variables in layout

This means ideally having a clear understanding of content scenarios in advance so that it paints a picture of how to better serve the content from a particular grid. Think of the business constraints with preexisting assets and brand guides, such as a logo that has specific spacing rules and requirements, or perhaps ads with specific fixed units.

The type of content is also a factor. There’s a big difference between devising a layout for a shop, news publication or blog, or a simple splash page. A layout that is image-heavy vs. word-heavy. It could be helpful to understand eye-scanning patterns and how they have an impact on visual hierarchy.

The more understanding of the business and content restraints upfront, the easier it will be to pick a grid system and make layout decisions.

Typography

I would argue that typography is the most important aspect of UI design, as it can make up to 95% of the web and be the driving force of communication.

While systems like modular scale can be applied to size and leading, font families and styles can also be limited. A UI should never need to exceed two families and a couple of weights. Rules can also be extended to how justification and title case is handled.

Color

It’s easy to get over-zealous with palettes. A small range of tones can go a long way to producing sufficient and consistent visuals. Usually all we need for a starting point is five swatches.

Tools such as Adobe Color CC make it easy to predefine a palette

Most brands should incorporate a primary or accent color, and a few neutral or contrasting tones to compliment it. We don’t need 15 shades of one tone, especially at the beginning. It’s better to start small and augment a shade or two later on.

Images

How we incorporate images into UI is largely determined by the context of the content. If we have a rough notion of what that is, we can create a starting point for our images with variables for ratio, size, shape, and treatment. We may find that we don’t need that many.

Limiting our image variables will enforce better consistency and make it easier to manage image assets in the long run. The same goes for iconography.