Origamid #1: UI Improvement
Two years after graduating from the UX/UI Design bootcamp at Ironhack São Paulo, I decided to add Origamid’s content to my skills. Origamid is a platform with various web design video lessons taught by André Rafael.
I chose to take these courses to further develop as a UX/UI designer and to ‘refresh’ my skills since it’s been two years since I graduated. In this field, it’s crucial to continuously absorb new content and different perspectives on the subject, and Origamid was the perfect place for that.
After completing the lessons of the first UI course, I worked on Bikcraft, a fictitious high-performance bicycle store. The lessons covered basic User Interface concepts, such as typography, colors, grids, spacing, heuristics, prototyping, among others. The course had a total of 17 hours of video lessons, extending to around 24 hours due to additional assignments and the creation of the project itself. We created everything from low-fidelity prototypes to the final product, applying all the concepts taught.
Below is the first exercise I did, where I practiced grid, spacing, colors, and typography, and it also included the project briefing.
Project #1: Bikcraft — UI Design
Bikcraft was the first project I completed; it’s a high-performance bicycle store. I used the Figma platform, and every element was thought out in detail during the course lessons, from color to spacing.
Grid
To explain the other concepts, we started by creating the website’s grid.
I created these rectangles with the dimensions of the height written in the left corner, all based on multiples of 4. This facilitated the spacing of interface elements, font size, and the creation of the grid itself. I used a grid with 12 columns and 4 rows.
Tipografia
I chose the Roboto and Poppins fonts, selected from Google Fonts. I filtered them for sans-serif fonts with a wide range of styles to allow for variations in font weight, with options such as “medium,” “bold,” “semi-bold,” among others. Additionally, these fonts are available on most operating systems, making it easier for future developers and enhancing user accessibility.
After choosing the fonts, I selected a minimum number of font weights to maintain consistency in the UI and reduce file size and potential errors when developers write the code. Line spacing was also essential for aligning interface elements. The spacing between lines is calculated based on the font size, for example: a font with a size of 32 pixels would have a 40-pixel line spacing. It’s generally 1.3x to 1.5x the base font size.
Once the font decisions were made, I organized them in a Figma frame and used the Text Styles feature to save and apply them quickly during the project.
Colors
I created a grayscale palette and a color palette containing the site’s colors. To create them, I used HSB manipulation, allowing me to adjust the color’s brightness and saturation. By using HSB, I could control the color’s luminosity, ensuring more consistency and contrast between elements of the same base hue. This focused on improving accessibility. I also used the Color Styles feature, similar to typography, making it easier to apply colors to different parts of the project. All these colors had a minimum 7:1 contrast ratio, achieving AAA contrast on all project elements.
Consistency and Interface Elements
All interface elements were designed with a focus on consistency. The site uses simple elements created within Figma to provide an extra highlight and unique identity to Bikcraft. Below are images of different parts of the interface with examples.
Buttons, colors, decorative elements, and images have rounded corners and other details. I used the Poppins font for titles and buttons and the Roboto font for body text and forms.
In the image below, two elements were added to the interface items: a small yellow rectangle and spheres forming an arrow. These elements were spread throughout the interface, focusing on consistency.
Project #1: Bikcraft — UX Design and Flow
The course also covered UX Design concepts using heuristics. The website offers a flow presenting the product, project scope, partners, a bicycle insurance system, physical store locations for making purchases, and a complete area for placing orders or making purchases on the site.
This emphasized the high quality of the products and encouraged customers to continue engaging with the company by purchasing product insurance.
Figma Prototype
The project also includes a complete Figma flow, allowing navigation between all screens, from the homepage to the checkout page. All screens feature interactive animations and transitions.
Link to view the prototype in Figma:
Bikcraft
Next Steps and Conclusion
After completing this first Origamid course, I reviewed many of the concepts I learned at Ironhack São Paulo and learned many new User Interface concepts.
Bikcraft is a complex project that greatly assisted me in the field of interface design. In the future, I will complete the other Origamid courses: UX Heuristics, Advanced Typography, and Advanced UI.
