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.
Join 11.000+ app developers and marketers
- Get a weekly curated list of app development tools, articles and resources in your inbox
- 10x your app installs with relevant App Store Optimization and app marketing strategies
- BONUS: Grab a free copy of the App Toolbox 2017 to supercharge your next app project
Comments & Thoughts
On The Blog
Mobile App Freelancing With Reinder de Vries - ABP108
In App Business Podcast episode #108, by Chris Chidgey and David Pfahler, Chris and I talk about the opportunities for freelance app developers and the future of mobile app making.
Best Of Quora: Android vs. iOS, Finding A Job, Prototyping And Gazing Into Space (Week 35)
This week's edition, topics include the Android vs. iOS debate, finding a job as a programmer, prototyping, coding clubs and gazing into the void of space.
Question: "Why create native mobile apps for iPhone and Android when the option for creating mobile apps that run in a web browser exists?"
There are a lot of different options, when you're trying to pick a good platform to develop apps for. What if your audience is on Android and iOS? Then you suddenly need to create two apps! Working with middleware can be a good solution, in that case. But, why and how?