How to go by Creating a Style Guide
Style guides are essential deliverables. They spark a discussion around preference and goals to achieve the direction. Creating a style guide can at times be tasking for problem-solvers. This blog doesn’t go into detail about Style Guides but more about how to build achieve a good Style Guide. My first experience of building a style guide wasn’t exactly smooth. While taking my program the first project I worked on was a solo project. This project was supposed to help myself and coursemates find ourselves as designers. Taking the initiative of UX strategies has always been my forte. So I struggled with getting the look and feel I was trying to communicate on the guide. Luckily for me, I had my instructor who gave me actionable feedbacks to help me achieve this. Here I’m going to talk about how to easily create one for without having great UI skills.
For starters, what is a Style Guide? Style guides are visual/UI deliverables that help communicate the identity, culture, and attributes of a brand. A typical style guide contains elements like fonts, colors, pictures. A good style guide should contain elements that resonate with your brand message to help tell your story better. So, where can you find these elements? And how do you go about combining them to achieve a killer style guide? The easiest place to start is Pinterest. Pinterest houses pictures, colors, and some fonts. But Pinterest is also diverse which can make finding the right elements difficult. I recommend using Pinterest for pictures. But you can also look beyond Pinterest in case. Google fonts is definitely a great start, for fonts. Paying attention to other websites’ fonts will also come in handy. Having a plugin like Fount on Chrome will make it easy for you to identify these fonts. Designer ran Instagram accounts like @ui.sergio and @ismail_elazizi are also very resourceful. Adobe color, coolors.co, and having a color picker plugin come in handy for colors. Now that you have acquired all your elements, how do you go by making it a style guide?
Firstly, its always a good idea to sketch. I’ve never been the type of designer to freestyle visual designs and create something great. So I tend to start most things with a sketch. If you are someone like myself that loves structure and problem solving then you want to establish a model before creating your guide. This will lessen the effort of having to achieve structure later on. It will also help you to achieve a cohesive style guide. It doesn’t have to be anything jaw-dropping, it just has to provide a structure.
After achieving this structure you can start plugging in your elements. Use findings from user research to achieve what users want to feel while using the platform. It’s always a good idea to use colors that align with your brand message. But keep in mind that colors have different representations in different cultures. So make sure colors are tailored to the users.
After plugging your elements in, polish your guide with finishing touches1. Another helpful step would be to get feedback from colleagues and others. They don’t have to be primary users as long as they give unbiased feedback that is actionable. Above all, keep in mind that while the guide isn’t an interactive deliverable it is more than just looks and feels. Therefore, fancy elements are not exactly necessary. Rather focus on achieving cohesion and balance, it will help to communicate your message better.
