Cinnamon & Saffron Bakery (Conceptual Project)
01 | Project Type: Personal Project
After completing a few introductory and intermediate courses on html and css, I was eager to design and build a complete responsive website from scratch. The project began with developing a conceptual company along with its mission. I spent some time designing a brand identity for the company — which included a logo, color palette, typography styles, and custom icon sets. Because I’m passionate about cooking and baking, I immediately knew the first personal website project that I designed and built would involve food.
02 | Objective:
The objective of this project was to 1.) create a conceptual company and design a brand identity for the company, 2.) apply skills learned from various web development courses to practice building a simple responsive website using HTML5 and CSS3, and 3.) have fun!
03 | Description of Process:
Research
Once I decided on building a bakery website, I spent some time learning about the baking industry and pondered what type of bakery I wanted to create. Would it be a small country mom and pop bakery? A local family-owned Amish style bakery?
A commercial bakery with numerous locations across the country? Ultimately, I decided it would be a modern European inspired bakery and café that offered a variety of traditional from scratch baked products from France and Italy.
Company/ Business
Cinnamon & Saffron Bakery (a conceptual company) is located in San Francisco, California. It’s comprised of a retail bakery, cafe and also offers catering services. The bakery is known for its artisanal breads and traditional European style desserts. They offer handmade breads, viennoiserie, confections, tarts and cookies, as well as sandwiches and salads made in-house daily. Showcasing this variety would be important to highlight on the website.
Strategy, Design, and Development
Once the bakery’s mission, brand identity and style guide were established, I outlined all the important information the company would want their target audience/ customers to have access to on the company’s website. This list would become the outline of the sitemap for the website. Next, I created a simple low-fidelity mockup wireframe that outlined the structure of each of the
following pages: home/ landing page, who we are, bakery and menu, café, and contact page.
The wireframes were used as a reference to create high fidelity mockups/ prototypes of each page on the site. The mockups included images, buttons, and text to fill in the visual presentation and interface of each page.
The wireframes were used as a reference to create prototypes of each page on the site. To create the prototypes, I used Photoshop to add images, buttons, and text to fill in the visual presentation and interface of each page.
I started with an HTML5 boilerplate template to save time. Each individual page was built writing HTML followed by CSS from scratch. I considered the best way to navigate and filter content for differing devices. The spacing and size of typography were optimized for each device so visitors were given an enjoyable experience no matter what device they were using while on the site. To achieve this, I applied media queries when necessary to adjust the content and frequently tested each page in different browsers for compatibility.