Ariana Palmer
UX/UI Designer & Illustrator

Butter Bakery

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

Design Discussion
Butter Bakery

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

Butter Bakery

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

Self-Analysis

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!