Butter Bakery - Overview
This was an assignment for school that challenged me to create and think layouts out on multiple devices whilst still considering and creating UI and UX elements. I needed to design everything from scratch through the use of wire-framing and style guide planning.
Primary concern was to translate webpage information into other device layouts
The primary target audience are individuals wanting freshly made baked goods
This was a solo project
I was required to pre-plan the designs with wire-frames, create a style guide to follow, and then finally create the final overall look of each device layout. Mockups were something additional I decided to add to it afterwards for it to look nicer.
Overall I'm very proud of the layouts I created as it was my first time translating one device format into another device format.
Webflow Link - Butter Webflow
Webpage Design
Once all wire-frames were set in place, I went ahead and created all the digital layouts for the web design
Worth Noting:
*Please scroll up/down on device mockup to view the full UI design :)
For this design, I wanted to go for a more professional, clean and stylistic look to represent the bakery vibes
I was inspired to use this based off of local bakeries and what they have on their websites (ie, Nova Era, Spicers, Caldense)
I'm really proud of the layout and general colour scheme I chose
This design helps the user navigate clearly and cleanly with everything having a nice flow
This design would help with any business goals through the flawless experience users would have with the interface
Tablet Design
After deciding the general web layout, I then went ahead and designed the layout for the tablet version
Worthy Mentions:
*Please scroll up/down on device mockup to view the full UI design :)
Features same design as web but suited more towards the sizing format for tablet devices
All typography and information were compressed to be slightly smaller
Very proud of bakery image translation from web to tablet version
Mobile Design
After creating the tablet layout, I was then challenged to compress everything into a mobile format
Guiding Questions:
*Please scroll up/down on device mockup to view the full UI design :)
Features same design as web but suited more towards the sizing format for mobile devices (specifically iPhone models)
Typography and imagery had to be compressed into a very specific layout style for it to fit + fit-to-frame text boxes so the content didn't go awry
Very proud that I was able to compress everything accordingly to fit a small screen
Overall Conclusion of the Webpages
I'm very happy with how this assignment turned out; I learned a lot from it - from designing each layout as a wire-frame to translating information from device-to-device, It was definitely challenging having to figure out how they would need to be laid out, but I feel like i managed it well despite it being a first-timer with making 3 layouts at once.
I really love new challenges so this assignment was really fun to do! I especially loved having to do multiple layouts and really figure out how to match a smaller screen (ie, mobile) to something much larger like web.
There's quite a bit I would adjust, however, such as the design colours I chose. I originally thoguht green was good to represent their bakery being fresh, but I'm now thinking of doing a minor re-design with a new or slightly altered palette choice; I also want to adjust the layout just a tad so the UI is much better. A proper logo is something I'll be adding in the future, too.
Overall I'm quite happy with how they all turned out!