Process
Before trying to apply the agency’s templates to the rest of our pages, I first decided to create an official UI style guide that would help direct all future designs as well as help the developer. At the time, no official style guide had been used, leaving many pages with inconsistent fonts, font sizes, and even font colors.
A style guide would ensure every page had a consistent look and feel, which would help strengthen the company’s brand and identity.
Style Guide
The mockups provided a good foundation for a style guide. There were buttons, banners, and highlight boxes. However, they were static mockups and a few elements required more elaboration, such as hover states of buttons and links as well as the placement of components.
I selected two new typefaces that were more modern than the company’s existing mix of Arial, Helvetica, and Verdana.
I chose Fira Sans for the display font because it was friendly, easy to read, and fast to load. I chose Open Sans for the body text because it was slightly more structured and wider than Fira Sans, making it easier to read on mobile devices.
The style guide came to include:
- Illustration of how content should be laid out
- Use and layout of headers
- Brand colors and their uses
- HTML attributes for links and images
- Font icons