Designing something for the web is very different from designing on any other medium. It leaves a door open for changes and/or updates at any time, and most clients use this to their benefit. It gives a reassurance that nothing is permanent and that if a design/user flow isn’t working it can be modified at a later point. One of the downsides is that changes can take place 3 hours to 6 months after launch. From personal experience, the further the changes are made from the launch date, the further the changes are from the original design. The design can get further off track when you introduce other designers/developers or even another design firm.
Once a design goes too far off the original path it can quickly become a project you no longer feel is worthy to showcase in your portfolio or to other potential clients…no matter how good it once was.
What’s the solution?
Create a living style guide. I add living because a style guide should not be a document that is created once and never updated. Brands are prone to evolve and change over time due to marketing research and A/B testing. If you feel that you’ve covered all of your bases when the style guide was created, then you only provide “one and done” designs or you may be missing something in your process. If you do provide continued service past the launch of a website you should be billing for user testing, conversion reporting and A/B testing. These statistics will help assure your client that their marketing efforts are heading in the right direction. There is nothing to be ashamed of if your original user flow is a little off, making changes and updates are essential to creating a solid user experience. No pride required.
What are the Benefits of a Style Guide?
- Helps with brand consistency
- Forces you to settle on a style before diving into code
- Focuses efforts on usability by making you think through every possible state of the website/app
- Provides a quick guide for all team members working on the project
What Should a Style Guide Include?
The style guide should include anything that you feel is vital to maintaining the style of the website/app. Here are some examples that fit that description:
- Overview / Branding Goals
- Color Palette
- Button and Link Styles (active / hover / visited states)
- UI / Form Elements (active / hover states)
- Navigation Elements(active / hover states)
- Typography Examples (Headings, paragraph, blockquotes)
Overall we’ve found that by providing our clients with guidelines for their online brands we are able to offer them solutions with greater value and that by keeping them continuously updated the designs stay true to their original goals and remain solid portfolio pieces.