I was tasked with creating and designing a set of guidelines for the use and development of my brand, it’s meaning, it’s elements and it’s aspects. I first began drawing up a couple of different pages mostly to get a look at what each page and layout will look like, mostly how my pages should look in a uniform style.
I also decided to take a look at some existing company brand guidelines, as well as even taking a look at custom ones on Figma community, as well as Pinterest.
Luckily for me once I got past these first two stages it was easy enough from here on out, as I already had every detail and element I had since I began this project. When developing my guidelines I mainly wanted to keep as little as information as possible and make it mostly photographic based, as I felt like it kept it more engaging to the viewer and easier to understand if someone needed to know something about a design or element.
I attempted to create my guidelines in a way that provided as much information and detail about how my brand should be used as well as its elements. When creating this design I wanted to include some pages you wouldn't normally find on brand guidelines.
For example, I had a section that explained the padding and spacing of my icons as well as their sizes if they were to be used for digital work such as an app or other devices. I also expanded upon this, explaining how buttons should be made with their padding, sizes and even curving based on pixel use.
Below is the preview for my completed Brand Guidelines document I created with using exclusively through Figma. There are two ways to view it, The image is interactive which can be easily clicked through using the arrows. The other is a link directly to the Figma prototype which is more so for a back up if the previous doesn't work.
https://embed.figma.com/proto/zyvzWdJn5mlnOsFA7nkQxr/UXD-103---104?page-id=1506%3A1693&node-id=1506-1941&viewport=430%2C324%2C0.1&t=8BPPESG4HEPReagz-1&scaling=contain&content-scaling=fixed&embed-host=notion&footer=false&theme=system
https://www.figma.com/proto/zyvzWdJn5mlnOsFA7nkQxr/UXD-103---104?page-id=1506%3A1693&node-id=1506-1941&viewport=430%2C324%2C0.1&t=8BPPESG4HEPReagz-1&scaling=contain&content-scaling=fixed
https://www.figma.com/design/zyvzWdJn5mlnOsFA7nkQxr/UXD-103---104?node-id=1506-1941&t=owJ3DAIy4C4TUYrv-1