'Bean & Brew' Website Design

For me to complete my college course for 'Digital Design and Development', skills in web design and development were needed for the final exam. For this I chose to work on designing a website for a coffee shop called 'Bean & Brew'. The features I managed to implement into this basic design includes:
  • A header and footer than update globally
    • As long as the script exists on a page, a header and footer will exist
    • Can be edited and updates to all pages automatically
  • A home page
    • JavaScript is used to create a functioning carousel of offers, however it only works by the user manually progressing through it with the buttons provided.
  • A menu of items
    • JavaScript is used to display different categories in this menu.
  • An ordering page
    • No functionality, just to show how it could look when working.
  • An offers page
  • A locations page
    • Uses a Google Maps embed to show a marked location.
  • A jobs page
  • A search bar
    • Does not work, scales with the width of the window.
  • Sign in and sign up page
    • No functionality
These can all be viewed at web.sennastubbs.com/bean-and-brew-design, which hosts this design for anyone to view. The source code can also be viewed on GitHub! Just note that loading the website and image assets may take longer than usual since GitHub isn't the fastest when hosting pages.

The tools I used to develop this are Visual Studio Code (VSC), a powerful code editing tool; and an extension for VSC called Live Server, which hosts the website onto a local server and allows me to dynamically see changes I have made to my web design instantly. These are very effective tools and have helped me become efficient at developing this website. A tool that helped me visualise my ideas before I wrote the HTML and CSS is Canva. Not only did it let me plan out the layouts of each page, it also lets you plan out your hyperlinks; where they will be and where they will go. I highly recommend all of these tools for web design and development from my experience.

All the assets used in this project were found online via Google except for the logo, which was given to us by the course. Since I don't intend on taking this project any further and keeping it as a showcase of my developing skills, the assets should only be seen as placeholders.

This project can easily be improved with some more advanced functions implemented. Making the search bar functional would allow users to find items or topics on the website that match their input. Creating a basket and checkout system would allow users to add items they would like to order and purchase them, and integrating some kind of database for user accounts would allow users to find receipts of their past purchases and also allow for offers to be sent to those that have previously bought items here. An idea that can be added to the menu could be to show an info card when you click on an item, expanding on what it includes, costs, allergen notices, etc. 

One major problem that needs to be dealt with is the responsiveness of the website. As of now, when you resize the window very little changes. This will make it very difficult to view on other devices such as mobile devices and should be solved when designing any web-based project. It will definitely be something I would like to look into working on in the future!

However, the skills I have learnt from developing this basic website will prove to be very useful when I tackle more web-based projects in the future, and I can always enhance them with more interesting ideas I may come up with in the future like unique animations or interactions the user can have.