The city guide to partying all night!
The site was also created to update viewers about the brand’s events, tvcs, promos, etc.
The light mapper became the focal point of the entire website with a skyline photo of a city (photo should change per city) as the main background. Adding to this: a pin for locations of bars, clubs, etc. were placed on top as a sort of map. This can be filtered at the bottom in case the user only wants to get information on clubs & nothing else.
Clicking or hovering on a specific pin will show a brief excerpt of the place & clicking on “more details” will pull an entire slide dedicated to providing details & photos of the selected pin.
Note: More details page was originally designed by Ms. Jess Limcangco.
- Client: San Mig Light
- Project Brief: Improve and/or modernize San Mig Light’s old website – still using the same light mapper concept & to make it mobile-responsive. Additionally, provide a feed of content for users wherein they can use the site to be more updated about the happenings in the metro & to be able to check through lists of bars & clubs.
- Materials: Pencil & paper, Adobe Photoshop
- Font(s): Agency FB, Cantarell
- Designed for: Carbon Digital, Inc.
The user can navigate the site by clicking on the Menu button. This shall show all the pages of the site.
Clicking the lightmapper button will (originally) open a full-screen pop-up wherein the user can select & filter out options by selecting which specific city they want to party at.
Here are the inner pages! They house the available TVCs, promos, events, etc. of the brand. Some of these pages were made by Clang Laurea & Gretch Fuentes. 🙂
Note: Images grabbed from the respective clubs & bars, which San Mig Light will feature. Also, the social media feed was designed by my then-junior, Gretch Fuentes. 🙂
We also did a couple of Facebook posts, posters, & ads in line with the site.
Overall: This was a good break from my usual long parallax sites. I wanted to make it interactive, fun, yet also simple since the target market bracket for this particular website was pretty wide. That said, I didn’t work on this entire site alone! Some of my then-juniors, including Clang Laurea & Gretch Fuentes, worked on this project with me & it was quite a new experience considering that this was one of our first big clients!
As always, you learn from every design you make & in this particular project, I learned a lot – specifically, regarding the mobile responsiveness of the entire site. I had to think of what everything will look like on the tablet or phone. Mobile first wasn’t a thing yet so it took a bit of a struggle to “downgrade” everything to fit the phone’s screen. Thankfully, I didn’t necessarily put a lot of items in most of the pages so it was easy enough to fit everything
Mobile-first wasn’t a thing yet, so it was a bit of a struggle to “downgrade” everything to fit the phone’s screen. Thankfully, I didn’t necessarily put a lot of items in most of the pages so it was easy enough to fit everything on smaller monitors.
