Project type
Design challenge
Time
June 2024
Design challenge
Time
June 2024
Tools
Figma
Figma
Design field
UI-design
UI-design
The challenge
Create a design system tailored for a lifestyle blog. It should include a font hierarchy, size hierarchy, color palette, icons, and reusable blog cards. This challenge spans over five days.
The design challenge was found on ProApp: Learn UX/UI Design - which can be downloaded from both Google Play Store and App Store
Day 1 - Color palette and font hierachy
Color palette
I selected warm colors for the color palette, incorporating three shades of pink and a golden hue to create an energetic, feminine, and uplifting feel. The addition of gray tones provides balance, ensuring a visually harmonious design.
I selected warm colors for the color palette, incorporating three shades of pink and a golden hue to create an energetic, feminine, and uplifting feel. The addition of gray tones provides balance, ensuring a visually harmonious design.
Font hierarchy
For typography, I chose Faustina for headings (H1-H6) and Epilogue for paragraphs and captions. Faustina has a refined, feminine elegance, making it an excellent choice for a lifestyle blog's headings. Meanwhile, Epilogue offers strong readability for longer texts and complements Faustina with its modern and minimalist aesthetic.
For typography, I chose Faustina for headings (H1-H6) and Epilogue for paragraphs and captions. Faustina has a refined, feminine elegance, making it an excellent choice for a lifestyle blog's headings. Meanwhile, Epilogue offers strong readability for longer texts and complements Faustina with its modern and minimalist aesthetic.
Day 2 - size hierarchy
On day two, I developed a sizing system following a 2-point grid. Spacing between elements follows increments of 2, 4, 8, 16, 32, 64, or 128 points, depending on the design component.
This grid system is applied to both horizontal (stack) and vertical (inline) spacing, as well as the inset spacing within elements.
Day 3 - Buttons
Using the color palette, fonts, and sizing system, I designed a comprehensive button system featuring six button types: Primary, Secondary, Tertiary, Danger, Icon, and Ghost.
Each button type includes multiple states: Enabled, Hovered, Disabled, and Focused, ensuring a consistent and accessible user experience.
Day 4 - Icons
Before moving on to creating the blog cards, I designed the icons that would be used throughout the system. Using Figma, I crafted the icons by combining shapes and refining them with the pen tool. To ensure flexibility and easy swapping during the design process, I converted them into components.
Day 5 - Reusable Blog Cards
The final step was creating reusable blog cards using the design elements developed throughout the challenge.
I designed versatile cards for blog posts, available in both horizontal and vertical layouts, as well as category cards for easy navigation.
The stock images are borrowed from www.pexels.com