Challenge: July 2024 (Taken from UX Tools)
Tools Used: Figma
Scenario: You work at an agency that was hired by a recipes company (competitors are Allrecipes and Yummly) to redesign their website. One of the main tasks is to build out a new design system and you've been put in charge of starting that process.
Task: Design specific elements (below) of a style guide for this fictional recipes website using your favorite design tool (using your tool's design system features) or HTML/CSS. Make sure all elements are responsive. Document and organize the design system and include a summary at the beginning with the overall goals.
Elements: Colours/ typography/ forms/ Icons/ grid/ recipe card
Extra Credit: Design more elements for the style guide, or add variants of the elements you've already created. Make a few mockups using the design system in practice to show how it all works together.
Design Challenge
Design Challenge
Design Challenge #1 Design System
Goals
Developing my skills and sharpening my knowledge
through design challenges
Developing my skills and sharpening my knowledge
through design challenges
Developing my skills and
sharpening my knowledge
through design challenges
Design Challenge #1 Design System
Overview
Overview
Challenge: July 2024 (Taken from UX Tools)
Tools Used: Figma
Scenario: You work at an agency that was hired by a recipes company (competitors are Allrecipes and Yummly) to redesign their website. One of the main tasks is to build out a new design system and you've been put in charge of starting that process.
Task: Design specific elements (below) of a style guide for this fictional recipes website using your favorite design tool (using your tool's design system features) or HTML/CSS. Make sure all elements are responsive. Document and organize the design system and include a summary at the beginning with the overall goals.
Elements: Colours/ typography/ forms/ Icons/ grid/ recipe card
Extra Credit: Design more elements for the style guide, or add variants of the elements you've already created. Make a few mockups using the design system in practice to show how it all works together.
Challenge: July 2024 (Taken from UX Tools)
Tools Used: Figma
Scenario: You work at an agency that was hired by a recipes company (competitors are Allrecipes and Yummly) to redesign their website. One of the main tasks is to build out a new design system and you've been put in charge of starting that process.
Task: Design specific elements (below) of a style guide for this fictional recipes website using your favorite design tool (using your tool's design system features) or HTML/CSS. Make sure all elements are responsive. Document and organize the design system and include a summary at the beginning with the overall goals.
Elements: Colours/ typography/ forms/ Icons/ grid/ recipe card
Extra Credit: Design more elements for the style guide, or add variants of the elements you've already created. Make a few mockups using the design system in practice to show how it all works together.
Challenge: July 2024 (Taken from UX Tools)
Tools Used: Figma
Scenario: You work at an agency that was hired by a recipes company (competitors are Allrecipes and Yummly) to redesign their website. One of the main tasks is to build out a new design system and you've been put in charge of starting that process.
Task: Design specific elements (below) of a style guide for this fictional recipes website using your favorite design tool (using your tool's design system features) or HTML/CSS. Make sure all elements are responsive. Document and organize the design system and include a summary at the beginning with the overall goals.
Elements: Colours/ typography/ forms/ Icons/ grid/ recipe card
Extra Credit: Design more elements for the style guide, or add variants of the elements you've already created. Make a few mockups using the design system in practice to show how it all works together.
Design Challenge #1 Design System
Goals
Design Challenge #1 Design System
Goals
Design Challenge #1 Design System
Goals
Accessible Colour scheme
Choose a colour scheme which is accessible
Responsiveness
Aim for my design systems to be responsive
Team In Mind
Organise and label my design system for ease of navigation and use
User focused
Research designs and think about tone and feel
End Results
With my team we put together a design strategy for brand positioning
Design Challenge #1 Design System
Competitor Analysis
Competitor
Analysis
Competitor 1: Yummly
Simple colour scheme using white, green and orange
Side Navigation as opposed to top navigation
Sections are clearly headed and easy to navigate
Failed some colour contrast checks and accessibility practices
Competitor 1: Yummly
Simple colour scheme using white, green and orange
Side Navigation as opposed to top navigation
Sections are clearly headed and easy to navigate
Failed some colour contrast checks and accessibility practices
Competitor 2: All Recipes
Simple colour scheme using blue, orange and light green
Opts for top navigation as opposed to side navigation
Easy to navigate though a reductions in steps could be done
Some accessibility issues such as semantic links
Competitor 2: All Recipes
Simple colour scheme using blue, orange and light green
Opts for top navigation as opposed to side navigation
Easy to navigate though reductions in steps could be done
Some accessibility issues
Competitor 2: All Recipes
Simple colour scheme using blue, orange and light green
Opts for top navigation as opposed to side navigation
Easy to navigate though reductions in steps could be done
Some accessibility issues
Competitor 2: All Recipes
Simple colour scheme using blue, orange and light green
Opts for top navigation as opposed to side navigation
Easy to navigate though reductions in steps could be done
Some accessibility issues
Design Challenge #1 Design System
Colour Scheme
Design Challenge #1 Design System
Colour Scheme
Design Challenge #1 Design System
Colour Scheme
Design Challenge #1 Design System
Colour Scheme
Choosing a colour scheme
Choosing a colour scheme
Chosen core colour scheme
Chosen core colour scheme
I reviewed the competitors mentioned in the scenario and explored other recipe sites. A common trend was the use of food related colours, notably greens and oranges, with some sites also incorporating blue and red. These insights gave me a great starting point when it came to testing out colour schemes.
I aimed to meet a minimum of WCAG AA compliance for both normal and large sized text when building my colour palette.
I reviewed the competitors mentioned in the scenario and explored other recipe sites. A common trend was the use of food related colours, notably greens and oranges, with some sites also incorporating blue and red. These insights gave me a great starting point when it came to testing out colour schemes.
I aimed to meet a minimum of WCAG AA compliance for both normal and large sized text when building my colour palette.