Digital Donut Cafe

Digital Donut Cafe is a fictional cafe/restaurant business that I created during my first term in BCIT as a final project in my Design Fundamentals and Interface Design Usability courses. The cafe is specifically targeted to high school and university students who are looking for a place to relax or do their homework and indulge in some treats (aka donuts) in a cafe-style setting.

ClientBCIT Term 1Year2016Tools UsedHTML, CSS, Brackets, Adobe Illustrator, Adobe Photoshop, Balsamiq

My Role

  • Created branding assets such as the logo and the style guide
  • Designed wireframes, user interaction workflow, and visual mockups
  • Coded the website using HTML and CSS

Branding

The Digital Donut Cafe’s logo features a donut and square pixels to form the letter D. The pixels are also dispersing in the other end to further emphasize the “digital” aspect of the brand, while the donut represents the main product.

The primary colour palette for the logo demonstrates the bright, bold, and colourful personality of the cafe. The colours are in the pastel shade to represent relaxation and openness. The color selection also symbolizes the “reward” and “treat yourself” aspect of the brand.

When coming up with the overall design for the website, I wanted to implement some design principles that we learned in the course:

  • The colour palette demonstrates a clean, minimalistic look with a small pop of colour. This will put the main focus on the photography featured on the website.
  • I also implemented minimalism and simple fonts/typography to ensure a fresh and uncluttered UI, so the text remains readable.
  • The images also do not have any filters added to avoid any unnecessary distractions.
  • I also used flat design towards my icons, buttons, and logo, to emphasize easier usability.

User Interface Strategy

I designed the wireframes using Balsamiq with the user’s experience and interaction in mind. I wanted the website to be easy to use but also interactive.

Using draw.io, I created a user interaction workflow for the Order Online and Contact Us pages. The diagrams helped me clarify what kind of response a user receives after an interaction with the website.

Using draw.io, I created a sitemap & flowchart diagram that describes all of the pages in the website. I took it a step further and added the basic user interactions from the Order Online and Contact Us pages.

Process

The following demonstrates more design principles I included in the website through front-end development:

  • I used big, hero images in the home page above the scroll, in the form of a CSS slider. This is featured to grab the viewer’s attention upon entering the website.
  • I also included some small scale animations when hovering links, buttons, and specific images that have a link to them. This is done purely through CSS.
  • A small version of the “long scroll” technique is established in the Menu page, which takes the viewer to the sub-sections of the page.

Final Thoughts

At the start of my development process, I was unsure about my ability to code a website from the ground up because we were just learning these languages for the first time. Throughout the process, I learned that the planning stage is very crucial and important in developing websites. With a lot of planning before development, it is actually easier and faster to build the website because you have a lot of resources to refer back to. Overall, my first web development experience was definitely a learning process that involved a lot of trial and errors, but I enjoyed every single minute of it.