Three Broomsticks Pub
- Category: Web design
- Industry: Education, Entertainment
- Responsibilities: Design, XHTML and CSS page builds, content creation
- Launched: February 1, 2010
- View This Project: www.threebroomstickspub.com
Project Summary
This site was designed to be used as part of the ‘Advanced Website Design’ curriculum at the University of Rhode Island. For this course, I wanted to take the students through a series of web design/build exercises using a small business as the case study. I decided on using a bar/pub as my example for the project, but rather than design a site for some generic establishment, I wanted to have some fun with this, so I created a site for one of the noteworthy locations from the Harry Potter universe.
One of my main motivations in this design and subject matter was the chance to use some very organic, real world textures and images. I have seen many sites that use wood-grains or paper as elements of the design itself and I've always really liked that style. Unfortunately, that look and feel is something that I never had a call for in my professional work - so I decided to use this project as an excuse to experiment with this style a bit. The entire design was created using stock elements and textures and manipulating them in Photoshop. Since this site is meant to be instructional, I wanted the end product to have been achievable using easily available elements and some Photoshop filters and effects. The ‘banner logo’, for instance, was created using a series of stock images (the banner, a broom icon) along with some type layers and working with them to create the final, stitched-banner looking logo.
In addition to the design of the site, I created the pages using XHTML and CSS, including some fun CSS3 animations and transitions, which really add to the ‘magical’ aspects of the user experience by making items move, spin, rotate and grow (and which will be a nice vehcle for me to discuss the future of web design - and CSS3 - during the final parts of these classes). I also wrote all of the content for the site, which proved to be a fun project since it allowed me to play around a bit in Harry's magical world and draw upon some of the fun aspects of that universe for the site's content.
The class will work with a slightly scaled back version of this design and will be taken through a step by step series of lessons to introduce them to using semantic markup and CSS to build a website. The lessons learned in these exercises will later be applied to a final project that each student will work on using a subject matter of their own choosing.
As the disclaimers on the site state, this project is in no way affiliated with Harry Potter, JK Rowling or Warner Bros., but is meant only for educational and entertainment purposes.