Should a style guide be defined before wireframes are started

Question

We have a number of upcoming projects that will share a common theme and look/feel, and are about to start working towards the first of those.

There are two competing points of view in the business:

• The first is that we should work out what features our apps need, build wireframes, and then define what components are needed and how those should look, iteratively.
• The second is that we should define who we are (as a brand, visually and in tone), then start working on the style guide and a base component library, and then work on wireframes - adding additional (more complex) components as wireframes evolve.

We're very time-limited and have fixed-deadlines, so there won't be a lot of R&D time. I'm hoping some expert opinions can help solve this.

Answer 1

I've always been of opinion that the right content, flow and interaction design is more important than how something looks.
This does not diminish the fact that a solid brand experience is very important and that a good design can influence your visitor, but it has to come second. After all content has been determined you'll be better able to design it. You wouldn't also make a coat or any other piece of clothing before knowing the size of the person that is going to be wearing it.

Other than that, you specifically say styleguide before wireframes. If you would do that you might as well make high fidelity designs instead of wireframes.
But it doesn't necessarily need to be after... While making wireframes, you and your team could also be playing around with a design. And I think in your case this might be the best choice. Since there are multiple projects depending on it, you'll have more time creating and iterating the design.

You might want to look into creating a living style guide (Google this, too many recourses to pick just one for you to look at). You define the different parts of the website (like Brad Frost suggests with Atomic Design) for them to be repurposed in other parts of the application and even other applications. When done right this can significantly speed up design and development of the following applications.

Answer 2

Since you have mentioned clearly that:

We're very time-limited and have fixed-deadlines, so there won't be a lot of R&D time.

I would suggest start with wire frames and complete your first project. which should lay a foundation by the time you actually start developing your own style guide or UI library whatever you want to call it as.

While building the first project try to follow best practices like:

1. Have your brand identity ready which might include brand assets like logos, colors etc.
2. Have all your atomic components designed which you are going to use in your project. ex. buttons, form elements, overlay etc.
3. Always think design in terms of reusable components(may not be applicable to all designs but surely for most of the designs). doing so will save you a lot of designing time now and also while developing the style guide.

So don't waste your time now building a style guide. rather get your first project up and running, by the end of which you will have quite a clear picture of how your company style guide should look like. hope this helps.

Answer 3

If your wireframes depend on your style guides or vice versa you are doing something wrong. Wireframes and style guides should be operating on vastly different scales of the design and can therefore be developed in parallel.

At least in the beginning. This might change when your style guide matures but in your current situation I would say the best and fastest way forward would be to work iteratively with both of them and use the wireframes as a context and growing ground for the style guide development.