BOK JOY FOOD BLOG

Visit Bok Joy Website

Project Overview



I created this project as my final for my advanced CSS programming class at Weber State University. This project took me three weeks to complete. The purpose of this assignment was to build a large project using the Bulma framework as well as to gain some experience with SASS. The final website needed to have multiple pages and include Bulma elements such as navbars, hero sections, cards, tiles, columns, and footers.


I love to try out new food and frequently look up recipes online so I thought it would be a fun challenge to design my own food blog. Because this project was about working with design rather than sharing actual recipes, it is not a full website. The thumbnails are used as design elements but only a few images link to actual recipe pages. I would love to expand this project in the future and turn it into my own food blog.


I created this project by myself. I used images from Pexels and Pixabay and linked to recipes from Lazy Cat Kitchen, Beaming Baker, and Cookie and Kate. The rest of the content was original.

Tools I used


Design and Build Process


To start off this project, I created a rough wireframe sketch on paper. I marked out the pages that I wanted to include and where to put elements. I decided I wanted to have most of the information on one page but still have a few sections that linked to separate pages. I decided in the hero section I wanted to showcase three featured recipes. I wanted to then include a brief about us section. The majority of the page would have links to recipes / blog posts.



Bok Joy Wireframe and Mockup


I used Canva to create a mood board for the website. I selected branding keywords, fonts, colors, and images that I felt like represented the feeling I wanted the webpage to give off. Once I had a style in mind, I created a high fidelity prototype of the website in Adobe XD. I removed all filler content, added images, fonts, and color to the prototype. I used the Bulma framework and added some custom CSS to create the website. I decided to try out Sass.


mood board

Mood Board

Problems I Encountered


Although I had gone through and created mockups, once I started building I realized I did not like some of the design elements I had chosen. For example, I decoded that the bright blue boxes I had around my images on the recipe page were too distracting. I redesigned the page and simplified the design so the focus would be on the images and not the colored shapes on the page.


I also realized I had an accessibility problem. I had planned on using bright colors on my website but the contrast between the white text and the bright colors was too low for acceptable visibility. I looked at darkening the colors that I had. While some looked nice in darker shades, some of the colors did not. I decided to remove orange and green from my project and change the color scheme to just blue and pink. Although it changed the look of the site, I am happy with the way it turned out.

What I Learned


The biggest takeaway for me from working on this project is the importance of designing for accessibility early in the project. If I had been designing with accessibility in mind, I would have started with a different color scheme and would not have needed to change my colors lat in the project.


I also learned some new tools. I was fairly new to the Bulma framework and did not have experience with other CSS frameworks when I started this project. I learned a lot about Bulma and how to use a CSS framework. I had also never tried using Sass before I created this project.