Origamid #2: Advanced UI Design Classes
As another step in honing my UI Design skills, I completed another course offered by Origamid. With 55 lessons and 15 hours of duration, I developed "Surfbot" from scratch — a company offering surf lessons in Rio de Janeiro, Brazil. The curriculum covered various aspects of UI Design, from colors to the part of exporting files in a developer-friendly manner. After completing my previous project, "Bikcraft," also done at Origamid, and the Ironhack São Paulo bootcamp, I feel more than prepared to enter the job market as a UX/UI Designer.
Project #2: Surfbot — UI Design
This project is a homepage for a surf school, including the enrollment section and a presentation of the available courses. It features fillable fields, a comparison between available courses, among other functions. Everything was done using Figma, from Wireframes to the final prototype.
Wireframes
A interface was developed from low-fidelity wireframes. I created the homepage, elements that would be applied to the website, and also the enrollment page.
Grid
The "Grid Styles" function in Figma was used in this part, facilitating the use of the grid in all future frames through saved configurations. I employed 12 columns, with a width of 70px and a gutter of 30px.
Typography
I chose the Alice and Nunito 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.
I also used the "Text Styles" function to save all the styles I would use throughout the site, separated by category, such as title, body text, etc.
Colors
Like the parts I explained, the similar "Color Styles" function was also used to streamline the interface creation process. For the dark color palette, I decided to use shades of blue to match the surfing theme. The selected contrast was shades of red. I used the HSB matrix to manipulate color saturation and luminosity, thus creating lighter and darker tones for each color.
Site Elements and Consistency
All elements and colors were designed for consistency with each other and a focus on accessibility. I searched for icons to represent course advantages and created simple elements in Figma, using ellipses and rectangles that leave important details throughout the interface. Examples are below:
Buttons, colors, decorative elements, and images have rounded corners and other details. I used the Alice font for titles and buttons and the Nunito font for body text and forms.
Project #2: Surfbot — UX Design and Flow
Even though the classes focus on UI Design, elements of UX Design and Heuristics were also implemented. The project flow includes: information on how to get there, details about the lessons, course advantages, types of lessons, contact, and the enrollment page.
Figma Prototype
The Surfbot was created with simple access flows, making it interactive and with a prototype available for viewing in Figma.
Link to view the prototype in Figma:
Next Steps and Conclusion
In the future, I will complete the creation of my personal portfolio and will also publish a Case Study about my e-commerce, based on all the concepts learned in my courses. I am actively seeking a position as a Junior UX/UI Designer in São Paulo.
