Booklet

author

Hack University

Development

4 Ways To Visually Enhance Your User Interface

4 Ways To Visually Enhance Your User Interface

1. Overlap elements

Overlapping elements on a page is a great way to create depth and encourage people to scroll.

2. Have contrast & hierarchy

The UI doesn't need to map one-to-one with what's in the database.

Use font-size, color, weight, and graphics to make it more readable and easier to comprehend.

3. Optimize for the type of device & operating system

When making a design responsive, don't simply just make things fit on a smaller screen.

Look for ways to incorporate usability patterns from native mobile apps.

Example on next page

This position is inherited from desktop. However, it's not optimized for mobile.

Anchoring modals to the bottom makes them easier to reach on mobile.

This is smartly optimized for mobile consumption.

4. Mimic the real world

When things get closer, they cover more of what's behind them. This means they shouldn't be perfectly aligned with items in the background.

So, offset elevated elements to ensure they extend beyond the edges of the elements they conceal.

Example on next page

Perfectly aligning edges looks unnatural and is not as focused.

Offsetting the dropdown horizontally makes it feel like it's closer to you than the background.

In summary...

1. Overlap elements

2. Have contrast & hierarchy

3. Optimize for the type of device & operating system

4. Mimic the real world

Now go design and build something amazing!

Join our tech and design community! @hackuniversity

More booklets by Hack University

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets