Image for post
Image for post
Westworld, HBO

Design like a Developer

Chris Basha
Jan 19, 2017 · 7 min read

Image for post
Image for post
Xcode, Sketch, and Android Studio (and some lightning bolts)

Think in “Views”

You know Symbols in Sketch, right? We were really excited to use this feature when we switched to Sketch because it comes so close to how developers build UIs. Most of the time when you see things such as list items or action bars, they have one single source view that gets reused again and again.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Top Level of View Hierarchy
Image for post
Image for post
ActionBar View
Image for post
Image for post
Action Items with View Bounds at 100% opacity

Design in 1x

Why is this even up here…

Consistent Color Palette

Create once, always reuse. Try to have as few colors as possible.

Image for post
Image for post
Image for post
Image for post
These are the colors we use on the Nimber apps

Design for all cases

Keep in mind that developers don’t build the ideal UI, but rather something that adapts into the ideal UI. They have to take care of cases where there’s no connectivity, or there’s a server error, or when there’s no content to display and much more.

Screen sizes

We live in an era of multiple screen sizes, so we have to design accordingly. This is a big deal when designing for Android because of its plethora of devices which come in multiple screen sizes.

Image for post
Image for post
Oh, you wanna know what this is? Well you’re in luck!

Things to keep in mind

  1. Not all of your users will use the app in English. Keep in mind that text might get longer (or shorter) in other languages, and you have to take this into account when designing your layouts.
  2. You can’t cherry pick — you don’t have control over every pixel. Some parts of the app will inevitably end up looking less than ideal because of unpredictable data.
  3. Try to use interactions, gestures, transitions, and animations built into the platform. Your developers will thank you.

Last but not least

Communicate with your developers! Let them educate you. While tools such as Zeplin and Flinto are a great way to share your design with developers, they don’t have the ability to explain the behavior of every part of the app. Share knowledge and strive to achieve the result that is best for the product!



Image for post
Image for post

Going your way, anyway

Insightful stories, thoughts and experiences from the…

Thanks to Andrew Kordampalos

Chris Basha

Written by

A philosophy enthusiast with a new-found enjoyment in debates and critical thinking. Product Designer at Monzo by day.

Going your way, anyway

Insightful stories, thoughts and experiences from the Nimber team and community.

Chris Basha

Written by

A philosophy enthusiast with a new-found enjoyment in debates and critical thinking. Product Designer at Monzo by day.

Going your way, anyway

Insightful stories, thoughts and experiences from the Nimber team and community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store