Understanding Resolution & Images in UI Design | Christine Vallaure | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Understanding Resolution & Images in UI Design

teacher avatar Christine Vallaure, UI/UX DESIGN + CODE

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (18m)
    • 1. Intro

    • 2. Resolution: Points, Pixel and Screen Resolution

    • 3. Resolution: Why We Design at 1x

    • 4. Resolution: Getting Best Results on All Resolutions

    • 5. Resolution Summary

    • 6. Images online: SVG JPG and PNG When and Why

    • 7. Images online: Where to Find Images

    • 8. Images online: Placing Images and Aspect Ratio

    • 9. Images online: Text on Background Images

    • 10. Images online: Dealing With Small Images

    • 11. Images Summary

    • 12. Thank You

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, we will demystify resolution and the use of images online. I will cover all the basics on how what size you set up your design, where to find images, and how to handle them.

If you are switching over from graphic design or already designing online but never quite understood how to handle images online, then this the course for you. 

We will cover Part 1: Screen Resolution

  • What's the difference between points and pixels
  • Why we design at 1x and what that means
  • Why we only export images

Part 2: Images

  • Difference between SVG, JPG, and PNG
  • How to place images
  • Aspect ratios
  • Hero Images with Text
  • Tricky images with text

Meet Your Teacher

Teacher Profile Image

Christine Vallaure



UX/UI Designer with a passion for code and founder of moonlearning.

I’ve worked internationally, in-house, and remotely on projects for leading brands, agencies, and startups. I care deeply about creating well thought through and aesthetic products. My work ranges from initial ideas to sketches, wireframes, prototyping, and front-end tuning.

Besides client projects (visit christinevallaure.com for references), I am building moonlearning.io, an online learning platform for UX/UI Designer. I also write about Design & Code on Medium and my own blog.

For more information about me please visit my LinkedIn page.





See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


12. Thank You: Well done for finishing this course. Feel free to reach out to us at moon learning dot io, we're always interested in hearing your feedback. You would also do as a great favor if you could just take a minute and leave a review right here. If you enjoyed this course and also make sure that you have a look at our additional courses. At Moody Learning dot. We cover all subjects from the very foundations of UX UI design through to Figma and even some code basics. Make sure you visit our website at Moody Learning dot IO, where you can also sign up to our newsletter.