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
- 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!
Comments & Thoughts
On The Blog
What are mistakes that native app developers make?
Read up on Superhero Syndrome and Not-Invented-Here Syndrome, a major flaw that app developers are particularly prone to pick up. How can you overcome it?
Using In-App Deeplinking To Promote Native App Content
In a sense, the app industry is still in its nineties. The Apple App Store is a rich-media example of that first web directory from Yahoo!’s Jerry and David: it’s a huge list of apps. Apart from text, images and catalog-style links there’s not much contextual information available. Each day about 300 apps get published in the iOS App Store alone, but most of them never even get close to the Top 100 list. Many perfectly good apps go by largely unnoticed, due to the nature of the app stores.
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?
Onboarding: Effective Strategies To Get Users On Board
An effective onboarding strategy makes sure your users get the maximum benefit from your product: it ensures no one trips and falls, and keeps arms and legs inside the vehicle at all times. How does that apply to your app?