The digital design space requires collaboration amongst multiple team members. Depending on the project at hand, the team members and their roles can be very diverse. Teams can consist of user experience (UX) designers, user interface (UI) designers, programmers, visual designers, information architects, business analysts and product managers, as well as a few other positions depending on the work needed to be done.

When we are talking about the actual digital product being produced, the visual and functional design is critical to understand and agree upon. Finding this balance requires strong communication between the creatives. In this case, the creatives would consist of the visual designers; and in the digital world, this means the UX and UI designers.

[Don’t forget to check out the video of me explaining this collaboration further down in the post!]

UX vs UI Designers

To quickly sum up the difference between UX and UI, let’s focus on what their tasks comprise of. UX designers handle a variety of tasks focused around the optimization of a product for effective and pleasurable use. UI designers focus on the look and feel as well as the presentation and interactivity of a product.

Depending on a professional’s experience level and the team size, this could be one person handling the same tasks. However, when there are two or more team members within these roles, communication between them is key to a successful product.

text-cta

What Is A Style Guide?

Often, a style guide will be implemented in order to provide a single document where visual and functional information will be stored. The style guide is used as a reference point between the team members in order to have a tangible or electronic asset to work off of. It typically provides reasoning as to why certain decisions were made during the design process. The design is controlled in case another team member wants to make a functional change that is not consistent with the rest of the project. The style guide provides the project to maintain a high level of consistency allowing for branding to be strongly conveyed.

Defining The Style Guide

As a tangible or electronic asset that will be handed over within the team and to the client, the first page of the style guide should contain what the overall purpose of the document is. This page lets the user know what the document should be used or not used for. In addition, it establishes a version control to let users know if certain aspects of the document have been changed. Highlighting these changes within the version control tracking helps keep everyone in the know about changes that have been made as well as when they were done.

[In the video below you’ll see me explaining the main points of this post in person!]

 
 
 
 
4:10
 
 
 
 
 
4:10
 
 
 
 
 
Wistia video thumbnail - Chava - How UX and UI Designers Use Functional Guidelines to Collaborate
 
 

Thanks for reporting a problem. We'll attach technical data about this session to help us figure out the issue. Which of these best describes the problem?

Any other details or context?

Cancel
message
 
 
 
 
 
 
 

 

Branding Guidelines

From a business strategy perspective, this is one of the most important areas to solidify. The first section should contain a few key sentences as to the vision of the design and a few keywords people should keep in mind while designing.

The next section should contain the logo. This should include all variations as well as whether or not to use a favicon (also known as a favorite icon). Variations could include when to use the tagline as well as whether or not there is an icon and whether the icon can be used on its own. This section should also include what designers can and cannot do with a design.

Tones

Understanding how your brand should be communicated to your users is very important to establish within the style guide. Interpretation is unique to everyone who reads this information, so exact and precise wording is needed. The style guide needs to give people clear examples of how to write in the preferred tone and, if possible, clear examples of how not to. Additionally, it is wrong to assume that everyone who writes content for the product knows how to write for the web. Setting down guidelines on structure, as well as best practice for SEO and metadata, will help maintain consistency throughout. Additionally, when writing for social media platforms, the user needs to understand that there is a difference between writing for Facebook and writing for Twitter, as well as writing for a dot com or content marketing hub.

Colors

Always include color palettes as well as how to utilize them. The color section should contain formats for both print and web: CYMK, RGB as well as the hexadecimal code for CSS purposes. Additionally, if there are variations between primary colors, secondary colors and icons, this is a great place to address those differences.

Adding a screenshot within the document as to how the colors are used is very helpful for understanding the direction of the design. Pulling a few template page examples out and annotating how the colors are used will establish a clear level of understanding the overall color intentions.

Fonts

Typefaces must be defined within the style guide. Sizes, line height, spacing before and after, colors, headline versus body font, etc. are defined within this section. Make sure to include Web alternatives for non-Web fonts. Although with google fonts (https://www.google.com/fonts) more fonts can be used, it is still important to offer web backup non-Web fonts.

Layout And Grids

By setting up templates and guidelines for grids, consistency is established throughout the application. Layout involves both a strategic approach as well as a back-end programming approach. Additionally, when it comes to working within the confines of responsive design, it is important to consider a fluid layout with proportion based grids.

Buttons

Within the style guide, create a page that displays what all links do. Define the hover, disabled and visited states for all buttons. If there are dominant buttons within the application, define number of times that the button could be used on the screen.

Additionally, if there are icons being used with the buttons, this should be defined here. For the UI designers, it is also important to define the width and height as well as any other CSS code needs.

Icons

Defining the size and spacing as well as where to use icons is another great way to promote consistency. On this page, all icons should be displayed as well as their name, intention, color and size.

Basic Coding Guidelines

No two programmers work alike so it is important to define basic principles to improve overall collaboration. These could include the following:

  • CSS class naming conventions
  • Javascript integration
  • Form styling
  • Doc types and validation requirements
  • Directory structure
  • Accessibility standards
  • Testing methods
  • Version control

Global Behavior

Within the global behavior section, items such as resolution should be addressed. Whether or not the application is intended to be responsive, how and when items such as tool tips are used, and what could be customized by the user will appear in this section.

Additionally, for larger sites and applications, defining pagination is important. For example, how many items the user can view at a time should be listed. Also as there are a multitude of different pagination designs, the functionality of the pagination structure and visual design should be listed here.

Form Behavior

How fields are laid out and what field types are available should live in this section. Whether or not checkboxes or radio buttons will be used and where should be clearly defined. Additionally, functionality such as date selection should also be displayed in this section.

Functionality of the form should also be mentioned. For example, if the user can tab through the form for form selection, this should be defined. Form validation and error reporting should be addressed as well.

Additional Functionality Considerations

Depending on the project, there are a slew of possible functionality pieces that will need to be defined and agreed upon. These could include the following:

  • grid behavior when working with complex information
  • sorting and organizing functionality
  • special values such as null and language and/or monetary denomination considerations
  • importing and exporting considerations
  • carousel and photo gallery considerations
  • notification behaviors
  • log out behaviors …and any other application unique functionality items that need to be agreed upon.

Additional Inspiration

Now that you know what a style guide is, start building your own!

Here is a listing of style guides done well:

 

Further Development

I discovered the importance of collaboration between UX and UI designers when I worked on an agile based project at Fannie Mae. The style guide that I developed alongside a UI designer paved the way to improving the overall consistency, look and feel and functionality of the Fannie Mae Loan Delivery Next Generation project. Our final deliverable was a tangible handout.

The improvements that I would have made to this deliverable would be to expand it into an online document that would house all coding information and provide a much more interactive experience. This online ‘site’ would hold information in order for more junior level programmers and UI designers to copy and paste code snippets to expedite the build procedure.

What Now?

It is important to understand that having a style guide is not a one time exercise, nor does it need to be updated on a monthly basis. Most organizations update their style guide once a year. Make sure to continually reach out to your users and know what their needs are. Look at upcoming industry trends and try to stay on the cutting edge. Not only is your style guide important for the look and feel of the site as well as the functionality, it is also important to the overall business strategy plan.

Want to learn more about UX Design or UI Design? Then check out the CareerFoundry courses, links below!

UX Design Course

UI Design Course