How should designers make the final graphics of a website or mobile application?

Written by: Reinder de Vries, March 28 2015, in Design, Programming, Q&A

In general, any design that’s ultimately used in a digital product should be delivered in PSD-f0rmat (Photoshop) with pixel-based (not vector) layers. Each interface, UI element or section should have it’s own hierarchical layer. That way, a developer can navigate the PSD with more ease.

I’ve been involved in a great number of website and app projects, ranging from corporate mostly-text websites to innovative apps. Below, I’ve outlined some “rules” to follow.

In any case: ask the developer ánd designers in your project. Each developer has their own way of working, and intricate understanding of the tools he’s working with. There’s no point in listening to me, when your developer works with a SDK I have no knowledge about. Also, people always have their own habits and expectations. Working in a multi-disciplinary team is just as much about using the right guidelines, as it is managing expectations.

Guidelines: Website Development

  • The process of turning a design into a functioning website is often called “basing” or “slicing”. In such a process, a developer measures elements in a website design and turns that into CSS rules and HTML elements.
  • It’s impossible to measure a vector or Illustrator file. Because it’s vector and not pixel-based, the dimensions are essentially fluid. A website is always pixel-based, thus creating an incompatibility.
  • Don’t flatten layers, and don’t flatten blending effects either. A web developer often needs to export individual layers and elements to a separate image file, for a certain background for instance. When such a layer is flattened and contains transparency, it’s really hard to “unstick” it from the rest of the file. (It’s harder than separating two LEGOs!)
  • As for the dimensions of the file: anything goes. You can work with 800×600, 1024×768 or 1600×1200. Keep in mind that most websites need to be responsive. In other words: elements on the page are fluid. Make sure your developer knows how each element behaves when the screen dimensions change. For instance: you have a 3×3 grid of shopping items (in a store website). What happens when there’s no room to show 3 items in a row? Do they return to a 2-row wide grid, and center on the screen?
  • Consider working with Khoi Vihn’s grid system: Ordering Disorder: Grid Principles for Web Design (Voices That Matter): Khoi Vinh
  • Make sure your colors are web-safe. (And I probably don’t have to tell a designer to calibrate his or her monitor and/or Photoshop!)

Guidelines: Mobile Apps

  • For iOS: look up how to work with 1x, 2x and 3x image assets. Technically, the bigger the iPhone the bigger the image you need to work with. Each iPhone version’s pixel-density is different, and in order to make sharp images you need to use a higher resolution on higher resolution iPhones. Thankfully, Apple made a logical system for this.
  • For Android: unfortunately, there’s a plethora of different screen resolutions and pixel-densities for devices on the market. Do a little research on what devices your customer use. For instance, there’s no point in supporting a 640×480 device if your customers are all on high-end devices, and vice versa. Android has a logical density-independent-pixel system, which means that regardless of pixel-density a certain surface will always have roughly the same physical dimensions on any screen.
  • Start with a screen that’s big enough, i.e. 1920×1080 for iPhone 6 Plus. A developer can downsample the screen resolution from there, and then extract individual image assets.
  • If possible, use standard UI dimensions. Tab bars, navigation bars etc. all have a fixed dimension for both Android and iOS. Changing the height of the navigationbar programmatically is in fact easy, but it’s sure to cause layout problems later on in the development process.
  • Just as with a website, make sure your designs are responsive and communicate the rules for resizing with the developer.


Join 11.000+ app developers and marketers
  • Every Monday: get curated app marketing news, resources, tools and goodies in your inbox
  • Grow your app's userbase with the latest App Store Optimization and app marketing strategies
  • FREE: Get the free step-by-step Get Started With Your App Idea guide to set yourself up for App Store success!
Yes, Sign Me Up!

Popular Posts

Written By: Reinder de Vries

Reinder de Vries is an indie app maker who teaches aspiring app developers and marketers how to build their own apps at He has developed 50+ apps and his code is used by millions of users all over the globe. When he’s not coding, he enjoys strong espresso and traveling.

Get instant access to The Step-by-Step Guide: Get Started With Your App Idea

(PLUS: see the tool we use to save a ton on back-end coding)


Comments & Thoughts

On The Blog