: UI specifications to developers 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?

@Murray976

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.

Vote Up Vote Down

@Marchetta832

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:

Vote Up Vote Down

@Shelley591

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.

Vote Up Vote Down

@Correia448

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 :


Nuline Graphics

Vote Up Vote Down