Breaking down the anatomy of aspiring.it’s style guide
As product designers on a team project, we quickly know that a style guide is essential before we jump into high-fidelity design. Style guides help future works be consistent and have a point plus in branding our project. After all, inconsistency can be confusing and frustrating for users, leading to a negative impression of the product.
To address this, we created a set of design guidelines that included assets and styles such as colors, typography, logos and icons, shadows and blurs, grids, and spacing. Here’s a breakdown of our process 🔎
🎨 Colors
To maintain a consistent visual identity, we agreed on a primary color palette consisting of eleven colors that complemented each other. We chose blue colors that not only looked good together but also conveyed the mood and tone of our project and we decided the color number 600 in the picture to be our branding and default color. We also included guidelines for secondary colors, gray, error, warning, and success.
Why we chose blue as aspiring.it color? Blue represents the sky and the sea and is associated with open spaces, freedom, intuition, imagination, inspiration, and sensitivity (supercolor.com). We want our users to feel free to express their opinions because our target users are students & fresh graduates who wish to kickstart their internship journey but don’t have many portfolios to show off.
✒️ Typography
We selected a set of typefaces for headings and body text that were easy to read and visually appealing. We also determined the appropriate font sizes and line heights for different screen sizes to ensure optimal readability.
Why did we choose Inter? Inter is a type of typography that is simple enough and perfect for many things. After all, our brand voice is fun, engaging, and inclusive. This approach will help us create a solid and recognizable brand identity that resonates with our target audience of students and fresh graduates.
🔔 Logos & Icons
We created a logo that represented our project and its values, but we ensure that we will revise this logo and improve it in the future. We also adopted a set of icons from Untitled UI that were simple and easily recognizable.
❐ Shadows & Blurs
To create depth and hierarchy in our UI, we used shadows and blurs. We agreed on a set of values for each type of shadow and blur and made sure to apply them consistently across the project.
🔭 Grids & Spacing
To ensure that our UI elements were aligned and consistent, we created a grid system that defined the spacing between elements. We agreed on using multiples of 4 for our spacing, such as 4px, 8px, 12px, and 16px. This allowed us to maintain a consistent look and feel across all of our designs.
We also standardized our padding and margin values to ensure that they were consistent throughout the application. By using a consistent grid system and spacing values, we were able to create a cohesive and polished UI that was easy to use and visually appealing.
We implemented these guidelines across our project, resulting in a more consistent and cohesive user interface. Our users were able to navigate through the application more easily and were more engaged with our product as a result.
We didn’t create these guidelines in a vacuum. We looked to established design systems and style guides such as Material Design and Apple Human Interface Guidelines for inspiration and best practices. We also adopted the Untitled UI Style Guide. These resources helped us make informed decisions and ensured that our guidelines were industry-standard and up-to-date.
Overall, creating a set of design guidelines was crucial for our project’s success. Not only did it ensure consistency, but it also made our design process more efficient by providing a shared understanding among our team members. We highly recommend creating design guidelines for any project, big or small. ❤️
Conclusion
We created design guidelines for our project, including colors, typography, logos and icons, shadows and blurs, grids, and spacing. By standardizing these elements, we ensured a consistent and cohesive UI that was visually appealing and easy to use. We drew inspiration from established design systems and style guides and highly recommend creating guidelines for any project, big or small.
And that’s a wrap, Thank you! 💖
I will appreciate your feedback 💬 & clap 👏.
If you want to collaborate, don’t hesitate to contact me at deyunarusmiland@gmail.com or through Linkedin ☕
