INNERBLOOM
FREECODECAMP // 2021
SKILLS: Logo Creation // HTML & CSS // Design System // Website Design // Brand Identity
TOOLS: Figma // Illustrator // Codepen
BRIEF
As part of FreeCodeCamp's Responsive Web Design Certification, I undertook a project to code a product landing page incorporating 15 mandatory user stories, such as the use of CSS flexbox. In addition to completing these requirements, I took the initiative to elevate the project by crafting a full brand identity for the landing page.
PROCESS
1: Product/Service Selection
2: Inspiration Gathering
3: Conducting competitive analyses
4: Naming the Brand
5: Logo Design
6: Defining the Color Palette
7: Wire-Framing
8: Image Sourcing
9: High-Fidelity Prototyping
10: Website Development
2: Inspiration Gathering
3: Conducting competitive analyses
4: Naming the Brand
5: Logo Design
6: Defining the Color Palette
7: Wire-Framing
8: Image Sourcing
9: High-Fidelity Prototyping
10: Website Development
SOLUTION
Opting for a flower subscription service, my design concept was born from my love for florals and a belief in the need for straightforward websites with subscription options spanning weekly, fortnightly, and monthly. I named the service "InnerBloom" reflecting its focus on blossoms. The design featured a mix of feminine and soothing colour palettes, along with playful yet elegant typefaces. To ensure consistency and clear hierarchy, I created text styles. My design aimed to maintain simplicity while infusing a touch of playfulness, allowing me to explore new coding techniques and push my own boundaries.
LOGO
LOGO ITERATIONS
FINAL LOGO
TEXT STYLES
COLOURS
WEBSITE DESIGN
WIRE-FRAME
FINAL DESIGN (WEB & MOBILE)
KEY LEARNINGS
While this project was the most complex I had done in FreeCodeCamp, it became a valuable learning experience & furthered my understanding of designing and creating a website. The project significantly deepened my grasp of HTML and CSS, encouraging me to explore new design styles through experimentation and learn from the process of trial and error. In future iterations, I plan to enhance accessibility by adjusting colour choices to align with WCAG guidelines, ensuring greater text contrast and tailoring text weight and size for improved usability.
