Basic UI Skills

Overview

Today, designers in the UX industry do far more than just make websites look pixel-perfect. They’re also focused on making usable, useful, and intuitive solutions to problems.

But don’t be mistaken - visual design is still a core tool in the designer’s toolset. Beginner designers often make the mistake of neglecting their UI skills. This leads to designers applying with an amateur-looking portfolio or submitting bad UI during the interview process - a mistake that eliminates them from consideration entirely.

No amount of design thinking will compensate for a total lack of visual design skills. That’s why it’s crucial for you to make sure your UI skills are at a minimum level of proficiency.

Let’s go over what you need to meet this minimum level of proficiency.

Principles of Design

You don’t need to know them by name or by heart. But you should have an intuitive grasp of these principles, and they should influence your design decisions.

• Gestalt principle of similarity
• Gestalt principle of proximity
• The golden ratio
• Rule of thirds ‍

Skeuomorphism, Flat, and Flat 2.0

Much like how art has gone through many styles and movements throughout history, design has gone through iterations or periods of time where one style reigned supreme. You should understand what these styles are and how to apply them, with a focus on Flat 2.0.

• Skeuomorphic design
• Flat design
• Flat 2.0 (most important)

In the past, skeuomorphic design was the norm. Interfaces closely mimicked the shape, shadows, light, and interactivity of real objects.

It was soon replaced by flat design. In this style, interface objects stopped mimicking real life and began to take a logic of their own, removing the realistic-looking shadows, highlights, and gradients once thought necessary for users to understand the interface.

Flat 2.0 is the most recent up-to-date design style, and the one you should be focusing on the most. Flat 2.0 uses flat design as a base, but adds some subtle elements of skeuomorphism to help users understand the interface better.

Logical Spacing

Most beginner designers often understand that something is “off” or just not quite right about their design. But they can’t quite pinpoint what it is.

Spacing and sizing are the foundation of good design. However, most beginner designers will “eyeball” these. Their sizing and spacing are randomly picked, without rhyme or reason. This creates compositions which feel unbalanced - things are too far apart or too close, too small or too big; sizes of objects feel randomly inconsistent.

You should learn how to apply a logical and consistent system of spacing and sizing to your interfaces, and your designs will improve twofold.

• 8-pt grid
• Twelve column grid ‍

Typography

Typography skills are far more than just picking sans-serif and serif fonts for your design. Good typography uses consistency, hierarchy, and spacing to make text readable and pleasant for users. A entire design can be created with just good typography, so it’s crucial you understand basic typography concepts.

• Typographic hierarchy
• Kerning, leading, and tracking ‍

Color and Accessibility

Besides spacing, the most common problem beginner designers have is choosing colors for their design. The most common mistakes beginners make is 1) picking a detailed color palette before any object, spacing, or text has even been roughed out and 2) not having enough contrast between the colors used for backgrounds, text, and objects.

Accessibility is a major part of good design that most beginner designers aren’t aware of. The first step towards accessibility for you should be making sure your color choices meet a minimum level of contrast.

• Accessibility on the web
• Accessible contrast
• AA color checker
• Color in UI Design: A (Practical) Framework

Tools

Adobe’s reign on design tools came to an end with the release of UX-specific tools in the 2000s, such as Balsamiq, Axure, Sketch, Figma, Framer, and more. These software products are lighter and faster than Adobe Photoshop and Illustrator, and they were specifically geared for UX and UI designers - optimized for wireframes, mockups, and prototypes.

For UI design, there’s a lot of software to choose from, but the industry standards are Sketch and Figma. We recommend you start with either of these. These two are very similar in UI capabilities and how they are structured. Sketch is software which runs on your computer and Framer is web-based. There's value to learning both, but it's not overly important which one you pick. Simply start by picking one and going deep to get familiar with its capabilities.

Checklist