What is the best way to give IOS/Android developers UI specifications like font sizes, icon size, images, positions, etc.? Is there a best practice for this?


These, in Software Engineering terms, are called User Interface Style Guides. They form part of the External Interface Requirements for the Software Requirements Specifications (Wikipedia link)

But this isn't hugely helpful for the person left in charge of actually defining the style of the software.

There is a useful page on the topic at Konigi. This includes several articles and useful links to related pages.

A good example of a style guide (from the Konigi site) is :

  • Those are some pretty dated resources... – Zach Saucier Jul 13 '15 at 4:58
  • i like them.... – JMP Jul 13 '15 at 5:06

In addition to Jons answer, I found that Googles Material Design Guide is so far the most comprehensive as well as beautifully designed Software Design Guide I have come across. They have simply thought of everything. Concept, Structure, Measurements, Relations, Colors. Whatever your UI-heart desires. Still, I should not call it "best" as i your question, as in design use cases are always different.

Here is an example screen showing off some detail:

enter image description here

  • Some explanation instead of just an image drop would make this answer a lot more full – Zach Saucier Jul 13 '15 at 4:57
  • 1
    Hardly an image drop if my answer is longer than others without the picture imho. – KMSTR Jul 13 '15 at 4:59
  • Comparing to other answers isn't a particularly good way of judging the value of an answer :P – Zach Saucier Jul 13 '15 at 5:00
  • I wasn't. You were stating I didn't write anything. I was pointing out that you would have to accuse everyone of the same crime. – KMSTR Jul 13 '15 at 5:01
  • Is there any tool/plugin that will take a Photoshop file, and create the styleguide automatically, including all the specs (font sizes, colors, spaces,... ) ? – android developer Jul 11 '16 at 20:38

The best way is to hand over working HTML, CSS and JS. That takes a UX team that has those skills at hand, so that's not always viable.

Short of that, the next best way is to ask your developers exactly what they need and want.

  • Definitely the right direction. I'd specify more about how to provide working HTML/CSS in the form of guidelines to make this a full answer though – Zach Saucier Jul 13 '15 at 1:16

While many iOS and Android apps are not created directly with HTML/CSS and a lot of these resources deal with HTML/CSS, the general principles can and should be implemented in whatever systems the application is being developed in.

A resource you should look at if you're interested in learning a lot about style guidelines is StyleGuides.io which has all sorts of posts, podcasts, books, tools, and other resources all about style guides. You can read different viewpoints, see different techniques, and get caught up on all the modern practices through just that site.

The approach that I see the most value in is called atomic design, a technique put forth by Brad Frost who is writing a book about it, which divides components into atoms, molecules, organisms, templates, and pages. He recently gave a talk about how it relates to style guides more specifically at An Event Apart and you can find his slides and references here.

For UI specifications, the current best practice is using a live (living) style guide, which is a style guide using examples that also has the code to reproduce it near (usually beneath) the example. This allows the UI designers to defined explicitly what they want and for developers to easily check the documentation for help with implementation. Examples include GitHub's, Ubuntu's, and Yelp's but there are many others if you look for them.

An example pulled from GitHub's CSS specifications.

There are a whole lot of style guide generators out there to choose from. I encourage you to spend some time looking into which one would work best for you and your company. This article divides some of the better ones currently into different types and give more information. There really isn't much of an excuse not to have one as these generators make maintaining one pretty easy. Investing some time now to create one will save both designers and developers time in the future because of the useful resource you'll have created.

For general brand guidelines, formatting guidelines, or something else that is not showing off UI components obviously doesn't need a live example with code because often times it's not related. In this case I recommend reading up using StyleGuides.io above and taking a look at more of their examples dealing with whatever the type of guidelines it is you're making.

  • This seems to be only about web style guides. I think the question was mainly about iOS and Android. – KMSTR Jul 14 '15 at 15:58
  • @KMSTR The question is about style guides, the platform is irrelevant to creating them. – Zach Saucier Jul 14 '15 at 16:01
  • It is in faxt about Apps. And Web Guides Re useless in apps. – KMSTR Jul 14 '15 at 16:11
  • @KMSTR I'm sorry, I have no idea what you're trying to say – Zach Saucier Jul 14 '15 at 19:36
  • I am saying that your resources do not cover iOS / Android – KMSTR Jul 14 '15 at 21:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.