Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Screens Essentials for UI Designers
Rating: 4.4 out of 5(760 ratings)
19,846 students

Screens Essentials for UI Designers

Get to know formats, resolutions, DPI and more
Created byGreg Rog
Last updated 11/2017
English
English [Auto],

What you'll learn

  • Working with bitmaps & vectors
  • Assets for HiDPI and Retina screens
  • DPI, resolution, aspect ratio
  • Efficient workflow across the tools
  • Optimal formats for your assets

Course content

1 section5 lectures44m total length
  • Screen Basics5:15

    Learn how screen size, resolution, and density impact user interface design and graphic assets, and how pixels per inch and dots per inch influence image sharpness across devices.

  • Scaling on Devices6:28

    Resolution and screen size alone do not reveal sharpness; density drives perceived clarity. Use vector assets and multiple scale-factor assets to keep visuals consistent across devices.

  • Graphic files formats15:08

    Learn how display density and OS scaling affect asset sizes, start at one scale, and export to 2x and 3x for cross-platform design using vector assets to keep edges sharp.

  • Platform Specifics7:40

    Explore platform specifics shaping UI assets, including icon fonts, sprites, and vector design, and apply cross-platform naming for 1x, 2x, and 3x assets.

  • Things worth remembering10:18

    Explore device resolutions, density, and asset scaling for iOS, Android, and web; cover 1x/2x assets, nine-slice scaling, aspect ratios, breakpoints, touch targets, and color considerations.

Requirements

  • Willing to start designing UI

Description

Learn some of the most important terms and factors for successful UI design. We'll start from the tiniest element you design for - pixel. Then we move on to different screens, resolutions, we'll explore retina, DPI and so much more. You will get to know optimal formats for UI design as well as workflows that will let you create highest quality assets!

You will find plenty of tutorials and articles on how screen design essentials work with explanation of terms and key techniques. The thing is the more you read the more complicated this topic appears. Let's focus on theory and keep it short and to the point so it is most useful in your workflow.

We'll explain the difference, but also get deeper into the best ways for exporting design assets from software such as Sketch, Illustrator or Photoshop. You will see multiple benefits of working in vector-only environment but also there are some hints for Photoshop design flow.

You will also get to know some approaches to designing for hi-density screens such as Retina and therefore explore differences between Pixels, Points or Density Independent Pixels. It will all sum up to a modern way to start in 1x scale and then export the assets accordingly for different screens, if needed.

Who this course is for:

  • User Interface Designers
  • Graphic Designers
  • Web Designers