Refactoring UI

1. Start with a feature, not a layout

The easiest way to find yourself frustrated and stuck when working on a new design is to start by trying to "design the app."

Focus on functionality first. Begin by designing a specific feature or piece of functionality rather than the overall layout or "shell" of the app. This approach allows you to make informed decisions about navigation and structure based on actual content and user needs. For example, when designing a flight booking service, start with the essential elements like departure and destination fields, date selectors, and a search button.

Avoid premature decisions. By focusing on features first, you prevent yourself from making uninformed choices about navigation, layout, and other structural elements. This method helps you build a more user-centric design that evolves naturally from the core functionality of your application.

2. Design in grayscale before adding color

By designing in grayscale, you're forced to use spacing, contrast, and size to do all of the heavy lifting.

Emphasize structure and hierarchy. Designing in grayscale initially forces you to focus on the fundamental aspects of your design: layout, spacing, and contrast. This approach ensures that your design's core structure is solid before introducing the complexity of color.

Refine without distraction. Working in grayscale allows you to make critical decisions about hierarchy and emphasis without the potential distraction of color. Once you've established a strong foundation, you can then introduce color strategically to enhance the design rather than relying on it to create structure or meaning.

• Start with basic wireframes or sketches
• Refine layout and spacing in grayscale
• Establish clear visual hierarchy using contrast and size
• Introduce color only after the core design is solid

3. Establish visual hierarchy through size, weight, and contrast

Visual hierarchy refers to how important the elements in an interface appear in relation to one another, and it's the most effective tool you have for making something feel "designed".

Use multiple techniques. Create hierarchy by varying font sizes, weights, and colors. Don't rely solely on font size; combining different techniques often yields better results. For example, use a bolder font weight or darker color to emphasize important elements while keeping font sizes reasonable.

Consider context. Adapt your hierarchy based on the specific needs of each interface element. For instance:

• Headlines: Larger size, bolder weight
• Body text: Medium size, regular weight
• Supporting text: Smaller size, lighter color
• Call-to-action buttons: Contrasting color, bold text

Remember that hierarchy isn't just about making things stand out—it's also about de-emphasizing less important elements to create a clear visual path for the user.

4. Create depth with shadows and layering

Shadows can be more than just a flashy effect — used thoughtfully, they let you position elements on a virtual z-axis to create a meaningful sense of depth.

Use shadows purposefully. Shadows can convey elevation and importance in your interface. Establish a system of shadow sizes and intensities to represent different levels of elevation consistently throughout your design.

• Small shadows: Slightly raised elements (e.g., buttons)
• Medium shadows: Floating elements (e.g., dropdown menus)
• Large shadows: Modal dialogs or prominent elements

Layer elements for depth. Overlap different components to create a sense of layering in your design. This technique can add visual interest and help organize information hierarchically. For example:

• Offset cards to overlap backgrounds
• Allow elements to extend beyond their containers
• Use "invisible borders" to separate overlapping images

5. Use a consistent spacing and sizing system

A simple approach is to start with a sensible base value, then build a scale using factors and multiples of that value.

Establish a scale. Create a spacing and sizing system based on a consistent scale. This approach ensures visual harmony and speeds up the design process by limiting choices. Start with a base value (e.g., 16px) and create a scale using multiples or factors of that value.

Apply consistently. Use your established scale for various aspects of your design:

• Margins and padding
• Element sizes (buttons, input fields, etc.)
• Grid gaps
• Typography (line height, paragraph spacing)

By adhering to a consistent system, you create a more cohesive design and reduce decision fatigue during the design process. Remember that your scale should provide enough options to be flexible but not so many that it becomes overwhelming.

6. Choose typefaces wisely and establish a type scale

For UI design, your safest bet is a fairly neutral sans-serif — think something like Helvetica.

Select appropriate typefaces. Choose typefaces that are legible at various sizes and suitable for your design's purpose. For user interfaces, neutral sans-serif fonts are often the best choice. Consider factors such as:

• Readability at small sizes
• Available weights and styles
• Character set completeness
• License and usage rights

Create a type scale. Establish a consistent set of font sizes to use throughout your design. This helps maintain visual harmony and speeds up the design process.

• Start with a base size (e.g., 16px for body text)
• Create a scale of 5-8 sizes for different purposes (headings, captions, etc.)
• Use a non-linear scale for more flexibility (e.g., 12, 14, 16, 20, 24, 32, 48px)

7. Develop a comprehensive color palette

You can break a good color palette down into three categories.

Build a versatile palette. Create a comprehensive color system that includes:

1. Greys: 8-10 shades for text, backgrounds, and UI elements
2. Primary colors: 5-10 shades each for main brand colors and actions
3. Accent colors: Additional colors for highlights, warnings, and data visualization

Consider color psychology. Choose colors that align with your brand personality and evoke the right emotions. For example:

• Blue: Trust, professionalism
• Green: Growth, positivity
• Red: Urgency, importance

Remember to test your palette for accessibility and ensure sufficient contrast between text and background colors.

8. Optimize images for legibility and impact

To solve this problem, you need to reduce the dynamics in the image to make the contrast between the text and the background more consistent.

Enhance image-text contrast. When placing text over images, ensure legibility by adjusting the image or adding overlays:

• Reduce image contrast
• Add semi-transparent overlays
• Use color filters to unify the image with your design
• Apply subtle text shadows or glows

Control user-generated content. When dealing with user-uploaded images:

• Enforce consistent aspect ratios and sizes
• Use subtle borders or shadows to separate images from backgrounds
• Implement fallback styles for missing or problematic images

These techniques help maintain design integrity while accommodating variable content.

9. Pay attention to small details for a polished look

You don't always have to add new elements to a design to add flare — there are a lot of ways to liven up a page by "supercharging" what's already there.

Elevate standard elements. Enhance common UI components to add visual interest:

• Replace default bullets with custom icons
• Style quotation marks in testimonials
• Create custom checkbox and radio button styles
• Add accent borders to cards or sections

Use subtle background decorations. Break up monotony in your designs by:

• Applying subtle gradients or patterns to backgrounds
• Using different background colors to distinguish sections
• Adding light textures or subtle illustrations

These small touches can significantly improve the overall polish and professionalism of your design without requiring major layout changes.

Last updated: September 24, 2024