February 10, 2017
by Bruno G. Tavares
WordPress, Bar, Website, PHP, and CMS
5 minutes read
A closer look in the process of developing the bar's website
The client wanted to rebrand their existing jazz bar to become a gay bar with jazz nights and so needed a new website that would convey the new direction. The rebranding, general look and functionality of the new website, would need to continue to appeal to the older jazz crowd while drawing new and younger gay patrons. They also wanted the new website to feature their new events schedule: Jazz performances on Tuesdays, drag shows on Wednesdays and Saturdays, Queer/Rock’n’Roll music on Fridays, and art shows on Sundays. In general, the idea was to create a “classy but edgy” new persona and website for the bar that would appeal to art loving patrons of both jazz and gay culture.
old website (each block is what is displayed on the screen as you scroll down)
While waiting for new photographs of the bar to be supplied by the client, it was difficult to create a new design as the color palette of the old photographs were so distinct. Also, the burgundy, grey and brown colors of areas around the photographs, hindered the development of the new look. Once new photographs were taken, which I was eventually hired to do, going to the bar on a performance night with the laser lights and gay culture in full swing, the design for the new website finally started to take shape. The new photographs changed everything.
trying to distance from the old color palette
Also during the design process, the manager changed his mind on the general concept, he no longer wanted to retain jazz nights but instead simply become a gay/queer friendly bar every night of the week. No more “classy”, instead he wanted the website to convey a “vibrant and fun” atmosphere.
the new website
When opening the website home page, using a regular desktop computer, users see a gif of laser lights behind a photographic slideshow on the right and a drink menu on the left. The home page gives one the sense of actually standing at the bar preparing to order a drink and watch a performance. The laser light gif in the background, photos of the bar and patrons on one side, and the drink menu on the other. The website’s menu bar is located under the slideshow, with links to Events, About and Contact pages. The footer contains links to social media outlets, contact information as well as the address with a link to the map. Both the header and footer have black backgrounds so they blend nicely into the blackness of the background laser light gif, tying everything together.
The events’ page has a full screen background photograph showing a drag queen during a performance, setting the mood of the page. An events api lays on top of the photograph, displaying all the events for the month.
The about’s page has another full screen photograph in the background showing a drag queen performing. Overlaying the background photo, is a brief description of the newly rebranded bar, on the right side, with a photograph slideshow on the right side, showing patrons happily mingling and ordering drinks and attending events. The about page clearly conveys the newly rebranded lively atmosphere.
The Contact’s page has the same background as the about’s page. It contains a contact form so users can put their info and send a message. There is also a map showing the location of the bar.
instructions to customize the content
Lastly, I created a user friendly content management interface, for each page. The interface allows the client to change photos and written information as wanted, able to update events and keep the website as lively as the bar itself. This also minimized any ongoing website maintenance costs.