How should designers make the final graphics of a website or mobile application?
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:
- 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.
Hi, I'm Reinder.
I help developers play with code.
Most Popular Content
- How To Launch Your App
- How To: Pass Data Between View Controllers In Swift (Extended)
- How To: Displaying Alerts With UIAlertController In Swift
- How To: Random Numbers in Swift 4
- How To: Build A Real-Time Chat App With Firebase And Swift
- Creating A Simple iOS Game With Swift In Xcode
Comments & Questions
Got a comment or question? Let me know! I read and respond to every one. Thanks!