0

At my company we are a small team (not startup), our flagship product is desktop and hardware-based but we also have our own online platforms (store, user portal, and other new things to come) plus a marketing website. In terms of website our design tends to be similar to apple, when it comes to web apps we are using lots of ideas from material design but not completely following them.

We need to develop a design system / UI library with reusable components because inconsistency is getting out of control. Initially, we thought about using bootstrap and develop a custom theme on top of it. However, after talking with some front-end dev friends they recommended developing a design system / UI library from scratch.

Is there a middle ground between bootstrap and a design system from scratch?

We are also concerned about consistency between a website and these other systems. I know that websites (information software) are different than the application (information software), but we will try to make at least typography, forms and icons consistent. But since our design team has only 2 people we can't "scale" design and because engineers have no UI kit, unified design system or guidelines to work with things get out of control.

It looks like the downside of bootstrap is that it's too opinionated, heavy and customization might cause problems with overrides and updating to new versions of the framework might also cause it to break.

On the other side, developing from scratch is an ideal situation if we had lots of time and resources, which we don't have. As I said most programmers here are back-end C++ and we only have 2 web devs to develop lots of systems. Some of them like the store we will be using some open source shopping carts for example.

closed as off-topic by dennislees, locationunknown, Wanda, Shreyas Tripathy, JonW Feb 16 '18 at 9:44

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    This seems to be off topic because of its broadness as well as the opinion-based answers it will generate. Answers here will either be too broad to be of any real help, or specific only to your situation, with goes against the guidelines for this site. – dennislees Feb 8 '18 at 19:09
  • 1
    @dennislees I think this question is on-topic, if rephrased a little: "Is there an intermediary between developing a custom UI-library and committing to someone else's library?" – Alan Feb 8 '18 at 20:01
  • I guess we’ll see what the group thinks. If you think a question needs to be rephrased to be on topic, you should edit it. – dennislees Feb 9 '18 at 0:40
  • @dennislees Agreed, but typically I leave large edits to the original asker. I don't want to add or remove information just from speculation of what they meant. – Alan Feb 12 '18 at 17:10
  • 1
    I made the edit on the topic question – Daniel Vianna Feb 12 '18 at 17:12
3

It sounds to me like your team needs to develop a Style Guide.

In the article "Great UI Design Requires Smart Style Guides", they define a style guide as:

...a comprehensive “living document” that keeps track of all the repeating elements for a project, from branding rules down to the amount of beveling for call-to-action buttons.

UI libraries are useful for many reasons, but they also have their drawbacks:

  • Time and resource intensive to create, maintain
  • May be platform specific (you wouldn't use certain desktop UI elements on the web)
  • May be language or framework specific

A style guide abstracts your UI consistency a level above the actual products. What does this do for you?

  • Platform agnostic (except for some fringe cases within a platform)
  • Usable by non-developers (think PowerPoints, marketing materials, etc.)
  • Ties company marketing (brand consistency) and UI together

Consider Google, how do you think they maintain consistency across dozens of products deployed on the web, Android, and even iOS? They wrote down the rules somewhere.

1

A styleguide is a great way to extend your reach in the organization and make design more consistent. Any guideline you produce has to be:

  1. Easily updated
  2. Publically accessible.

This guy built his own -- https://maxquattromani.com/creating-the-style-guide. It looks like it might have been built on Wordpress (maybe there's a theme for Styleguides ?).

Here are a couple of links to add inspiration: - BBC's Gel: http://www.bbc.co.uk/gel/ - http://styleguides.io/examples.html

Good luck.

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