Background Home

theamerican.ca

Website for Vancouver Bar

Fully Responsive

Animation Integration

The Client

The American is a pub and games room located in the Strathcona area of Vancouver's East side. The owners of the establishment also own several other bars and originally maintained one website (thecobalt.ca), with all information for their various establishments located in this singular space. However, as each business began to grow, so too did the individual needs and desired online presence for each business begin to outgrow the one website. After being approached by the client, the initial objective was to re-design the site to become a more optimal space for maintaining each bar's presence. However, after discussing options with the client and several iterations of different sitemap options, it was decided that the best approach moving forward, to structure the various content of each site most effictively, would be to construct new sites for each of the individual businesses.



View IA Proposal View Sitemap Visit Site Now

The Challenge

Stepping through the doors of The American it quickly becomes apparent that it is unlike most bars. The room exudes fun. In the centre of the wide-open space are long communal tables, ideal for group interaction. Around the perimeter of the space are pinball machines, pool table, foos ball, and a DJ booth for the numerous events the space hosts. The challenge early on was in finding a way to create a digital space that mirrored The American in mood, as well as visual aesthetic. As The American is unlike most bars, and in order to stay on-brand, its website would need to be unlike the websites of most bars.

97% Complete
78% Complete
76% Complete
Responsive image
invision

The Process

As The American itself is a cocktail bar, craft beer bar, games room that broadcasts sporting events, daytime cafe, and often an impromptu dance space, establishing a navigation system that represented the bar by its selling features was the first order of business. A sustantial amount of the site's primary audience will be viewing via mobile device, so it was imperative to ensure the site's responsiveness across various platforms, and easy to navigate for user tasks such as locating hours of operation, location, events, and menus. I integrated timed CSS animations to interact with the user throughout the interface in an aim to parallel the playful nature of the bar itself, and elected for a subdued colour palette so as to not overshadow the photographic-forward nature of the overall design.

Tools

HTML, CSS, JavaScript, CSS Animation

photoshop

Photoshop

UI/UX Design

theamerican.ca