Open Coffee Hosting website Screenshot of Coffee Hosting Website

About the Project

Wireframe for Coffee Hosting
Wireframe for Coffee Hosting

I took a class about web design in my freshman year of college. I already had a solid knowledge of the HTML, CSS, and JavaScript but took it to balance out some of my harder classes. It also counted towards my CIS minor (which I have since changed to CS major). In the class, each group of students was responsible for creating a website on a topic of their choice. We chose a web hosting website (my idea) and called it Coffee Hosting (also my idea).

I started out designing a rough draft of how I wanted the interface to be laid out in Inkscape. In making the final version of the website, I strayed from the original draft to make a simpler website, partly due to lack of group help.

If I learned anything from this project, it's that setting up a real web hosting business actually wouldn't be too hard with reseller hosting. Maybe I'll make this into a real web hosting company in the future.

Flowchart showing navigation map of website
Site map of Coffee Hosting

Designed to Sell

The Compare page of the website
The Compare page of the website

I designed this template from scratch and actually ended up making a website that resembles a Bootstrap template. Unfortunately I didn't have time to make the website scale for mobile devices like many Bootstrap templates but it is a solid desktop website regardless.

In making the template, I wanted to make sure that the website was designed specifically to sell web hosting. Important actions like ordering a product should have focus so links like “Order Now” “Pick this Plan” are stylized as buttons to make them stand out. The order form is designed to make the form appear smaller and less intimidating to new users. The ultimate goal of the website is to get the potential customer to the order form.

Coffee Hosting logo on light and a
Coffee Hosting logo on light and dark background