The Book Worm
As part of a web development course, I designed and developed a company website for The Book Worm, a spirited children’s book store, by creating web assets in a style guide and developing the front-end website to purchase books online.
The Book Worm Landing Page Design & Development
The goal of this project was primarily to practice front-end web development in HTML and CSS by developing a custom website from scratch. The first half of the project, including company branding and style guide, was completed individually while I partnered with Alex Grant for the second half in developing the web pages. I was responsible for developing the book browsing page, product page and checkout process over 3 weeks in the spring of 2021.
Screen recording of final website
Creating The Book Worm
The Book Worm is a local bookstore filled with magic and adventure for the kids of tomorrow, promoting literacy and engaging kids to read through a fun and dynamic atmosphere. I was inspired by my childhood love of reading and wished for a special space in my local community where I could engage with the stories I loved.
The brand identity needed to reflect the playful environment by incorporating bold colours and still being approachable to family-centred audiences. To start I wrote out a set of notes regarding the brand strategy of The Book Worm and possible features that families would enjoy.
Idea conception and brand values/goal
The Book Worm brand and website strategy and target audience for potential events
The Book Worm colour palette displayed in the website style guide
Additional brand imagery and icons for The Book Worm
Logo variations based on The Book Worm
Next I created a collection of brand imagery and icons for the company that could be incorporated into the website. This was important to give the website real content and place it in context.
Developing the Style Guide
After I had an understanding of the basic brand components, I translated the brand experience into HTML and CSS by creating a branded style guide.
Breakdown of product listing elements from style guide used together to create card design
A style guide is a collection of all the individual elements, such as buttons and text fields, that make up the website. I built the style based on atomic design principles which suggest that you start with the small possible elements, such as the typography or button, and then slowly continue to build upon it creating components, a collection of text and buttons, and sections, an entire form. I found this web design principle very important to create the building blocks of the website and has become a foundation step in my design process.
Each element in the style guide consists of the rendered element as it would appear on the website, the list of CSS selectors or classes that are used to style the element, and the block of HTML code. This makes it easy to refer back to the building blocks when constructing the website and communicating with other developers.
Example of an element in the style guide
Partnering up
The next milestone of the project was to partner up and choose one style guide to develop the front end of the website experience. My partner and I chose to continue working with The Book Worm because of the depth and detail I had created in my style guide.
To communicate with my teammate we used GitHub and the desktop GitKraken, which is a version control software that keeps track of every time you save a file. While it took a while to understand how to use GitKraken, it saved an enormous amount of time, in the long run, to be able to share and update files remotely with my partner.
Screenshot of GitKraken with recent pull and push commits to save our work and merge current code branches
Flexbox Frustration and Media Query Questions
For the final iteration of the website, I was responsible for designing and developing the book browsing page, product page, and check-out process. One of the biggest learning curves I had was implementing flexbox and media queries to create a responsive website that would work on all screen sizes dynamically.
To create a flexbox structure for the website I used multiple ‘container’ classes in CSS as the parent element and ‘item’ classes as the child element. This allowed me to arrange the flex items inside the container and relative to one another. I developed multiple variations of these classes for different aspects of the website when needed.
Media queries are another important CSS construct used to resize elements following the screen size. I created media queries in the browser by resizing the web pages and noting when elements would either overlap or squish. At that particular screen size, I would adjust the affected classes I wanted to change the size or layout of.
Final Website – Key Moments
Responsive web design principles in use to change the size of designs on different screens
Product listing page is built with flex box and media queries to dynamically respond to different screen sizes by changing the number of products
Featured books for each month are highlighted at the top of the browse page
Add books to the cart to checkout and purchase them
Building a Real Website…
Both the individual milestone of the style guide and the final website development received perfect scores in the class. The project was well received by the professor who noted “very nice style guide! Good work!” on the graded assignment.
Throughout this project, I gained practical experience in front-end web development and expertise in HTML and CSS. This project was very much an iterative learning activity, as I often had to recreate elements as I learned better ways of programming throughout the course. Looking back I can now see how far I’ve come in my front-end development skillset. I thoroughly enjoyed working on this project as I could bring my designs to life by building an interactive experience.
