Waterfront Bakery's Website
The Non-Existent Bakery
Gets a Website
During Fall 2024, one of my assignments was to take this fake bakery, and create a website for it. Create a desktop and mobile breakpoint of a start-to-finish checkout flow, and create a design system.
The Design System
Creating the design system was a lot of fun, as I love to noodle with colors and fonts to see what truly fits the theme of whatever I am working with. I ended up creating a typography system featuring headings, body text, and button text, a color library with primaries and tints/shades, and a button asset library for components, alongside a logo.
The Desktop Flow
This was my first time truly working with breakpoints and trying to make scaling assets that transformed, and honestly…it was rough at first. Teaching myself auto-layout in Figma was definitely a test. But I persevered and came out with a product I was happy with.
The Mobile Flow
Translating the Desktop Flow into mobile breakpoints and devices was definitely a challenge. Creating new assets, components, and overlays was all part of the assignment, and I took it head on, and created my first true Desktop/Mobile fake e-commerce website.
The Non-Existent Bakery Gets a Website
During Fall 2024, one of my assignments was to take this fake bakery, and create a website for it. Create a desktop and mobile breakpoint of a start-to-finish checkout flow, and create a design system.
The Desktop Flow
My solution was a mockup of different in-game and real-life rewards for being a T-Mobile Tuesday customer, such as a free $5 pack of gems in Brawl Stars on the first Tuesday of the month, or an additional month of the Fortnite Crew subscription service. Perks that might bring in a younger generation, or at least tell their parents about, with relevant gaming rewards that they would actually care about, something that would save them money.
The Design System
Creating the design system was a lot of fun, as I love to noodle with colors and fonts to see what truly fits the theme of whatever I am working with. I ended up creating a typography system featuring headings, body text, and button text, a color library with primaries and tints/shades, and a button asset library for components, alongside a logo.
The Mobile Flow
Translating the Desktop Flow into mobile breakpoints and devices was definitely a challenge. Creating new assets, components, and overlays was all part of the assignment, and I took it head on, and created my first true Desktop/Mobile fake e-commerce website.