0

I'm trying to define a (map? / protocol?) for the mobile apps colors between the mobile developer (I represent) and the UI designer, to easily use it in our apps and to achieve consistency among all apps that if ever needed to make a clone of one app, all we have to do is changing the colors codes, the same applies when we need to provide multiple themes.

I made this with the UI developer help (I don't know if similar concept exist in the UI/UX models): enter image description here

Is this common in the UI/UX models, Am I re-inventing the wheel? is this doable, and can we really reach this consistency? I need to hear your thoughts.

Thanks in advance

2

It looks like you're trying to build a style guide. If so, then you really need to work closely with your UI designer to define/refine the colour palette and its usage.

Style guides protect you from team, supplier or product changes. If you get a new requirement from the product owner, the style guide should tell you how it will look. If you have to scale up your production and have to on-board a whole new team of designers or developers, the style guide will tell them how to design or build everything. They are the rulebook for designing and building anything to do with your product.

Your designer should be able to help you construct a guide that ensures reusability as well as extensibility - Ideally, as a part of that guide, you will end up with a palette of colours and a list of uses for those colours which your developer can turn into a set of colour definitions and a set of styles referencing those definitions.

Look around the web for examples of product or brand style guides but remember that, although they may occasionally share some similarities, every style guide for every product will have different requirements and so will have different levels of proscription and different levels content.

What you have so far is fine as a stop-gap, and it will help to streamline the connection between the designer and the developer, but you really should be working on this as a part of the overall product design rather than just as a solution for your developers. This should be one of your key project deliverables, almost as valuable as the product itself.

  • Thanks for the info, and for spotting the term "style guide". But may I ask, if the style guide applicable through all apps or just per app, and if "per-app", can we have common style guide to be shared among any app? – mshwf May 2 at 9:44
  • 1
    You could easily have both - A brand style guide and a number of co-related product style guides that refer back to the brand guide when needed. But you could just as easily have a single guide that contains the basic information required to build an app with the family of apps. The choice is really just down to how complex/different each app is from the "norm" – Andrew Martin May 2 at 9:48
  • Do you recommend any reference for basics of the style guide to learn from? – mshwf May 2 at 9:51
  • 1
    Just pick a product and search for it along with the terms "brand guidlines" or "style guide". to get you started, here's the one for Twitter: about.twitter.com/en_gb/company/brand-resources.html and the one for Apple: developer.apple.com/design/human-interface-guidelines/ios/… – Andrew Martin May 2 at 9:54
  • This is priceless, thanks for the help! – mshwf May 2 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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