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.
So how are their roles different and what helps these two design pros work together? Let’s find out. Here’s what I’ll cover:
- UX vs. UI designers: How they work together
- Key to UX and UI collaboration: The style guide
- What now?
Let’s get started.
1. UX vs. UI designers: How they work together
To quickly sum up the difference between UX and UI, let’s focus on what their tasks comprise of. Depending on the company, 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.
To better understand the difference between these two fields, check out professional designer Dee describes them in this video:
Because UI designers own the final presentation of the product, and because that final presentation has an impact on the user experience (UX), UX and UI designers (should) work in very close collaboration.
This is to ensure that their efforts are moving in the same direction: towards meeting users’ need and goals, and addressing key pain points in the user journey. Thankfully, there is one powerful tool that can help with this collaboration: the style guide.
Learn more: The 5 big difference between UX and UI design.
2. Key to UX and UI collaboration: The style guide
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.
Style guides serve as a foundation for UX and UI designers (and others on the team!) as they work together to create products and experiences that are effective, efficient, inclusive, and even delightful.
What is a style guide?
A style guide is a collection of agreed-upon design guidelines that help establish consistency across products and brands. Often, this will include content guidelines as well.
Style guides provide a single document where visual and functional information are 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.
How to build and define a 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.
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.
Voice and tone
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 do this.
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 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:
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.
To learn more about UX and UI design, check out these articles:
- Inclusive design vs. universal design: What’s the difference?
- 7 Universal design principles to make your UX more inclusive
- What is skeuomorphism in UX design?
- What is a full-stack designer (and how to become one)?
- Why simplicity is essential for good design
And finally, it’s important to note that good collaboration bewteen UX and UI designers is absolutely essential if you want to create inclusive products and experiences. Learn more about inclusive design here: