Skip to Content

Design Image

Book: Refactoring UI
  • Beautiful photos are really important

  • When overlaying text on top of images, add an overlay to improve the contrast to make it easier to read the text

  • Similarly, adding a shadow to the text can help elevate it over the image

  • When adding screenshots of your app, don’t scale down a large screenshot

    • Heuristic: Screenshot for the target device Ex: Tablet screenshot vs scaled down PC
    • Heuristic: Else, magnify a section of the UI to show clearly what it looks like
    • Heuristic: Else, remove text from the screenshot. Text is hard to read for small screenshots
  • When dealing with user-submitted images, frame them as well as you can

    • Heuristic: Center user images and put them in fixed-size containers,
    • Heuristic: Prevent images bleeding into the background by adding a light border or shadow