Introduction
The Buzzworthy Studio rebrand and redesign was built to showcase our transformation. Over the years, we onboarded some exceptionally talented individuals who helped turn us into the studio we are today. We realized that we needed our own space to showcase the creative abilities, our dev prowess and unique personalities that our studio is built on. We made this site for users to understand who we are, if a user can feel a connection with us through this site and click the “Start a Project” button, then we’ve accomplished our ultimate goal.
The Challenge
In 2018 we added some key members to our team, expanded our services and grew our business dramatically. Our previous site no longer represented our team or our vision, so we decided to rebrand Buzzworthy from the ground up. The idea was to showcase the new projects that embodied our style and visually represented our personality. Over the next few months - with the help of six bottles of bourbon - we developed ideas and compiled our story. From brand collateral to front-end web design, we worked hard to get a team of perfectionists to all be satisfied with the results, but as always, it was our meticulous demeanor which enabled us to achieve this final, Awwward-winning website.
The entire concept of the site is based on the element of surprise, using elements such as subtle micro-animations to bring a smile to the user's face.
Design
When you're building your agency's own site, there's no limitations, and we took that to heart. The bold style of our new site, with strong typeface and rich color schemes, represents our passion, professionalism and energy. We even put together a photoshoot to ensure that our imagery was up to date with our studio's new philosophies. The entire concept of the site is based on the element of surprise, using elements such as subtle micro-animations to bring a smile to the user's face. We aimed to add context about our brand and help the end user connect with the Buzzworthy team.
Front-end features
We’re always thinking of better ways to keep people engaged. For our own website, we employed lively transitions, that don’t just guide you from one element to another—they propel you there. The transition shown above, which takes you from the Work page to one of the Work Detail pages, was created in Sketch and animated in Adobe After Effects.
Intro animation
When you know that a website is going to be a heavy load on any browser - mobile or desktop - it's important to consider the technological and functional aspects that will keep it from getting bogged down. In the case of our site rebuild, we chose to use fast loading intro animations to buy time for images to load further down the page. For example, while the homepage intro animation is introducing our studio to the world, the site is busy loading the homepage case study images. This duality ensures that the user experience isn't hindered by slow load times.
Home page
Our work speaks for itself - so it makes sense that it should speak for our agency as well. That's why we chose to have our visitors land on a full page of our recent projects, rather than an about us page. We believe our work tells more about who we are than any introductory statement could.. All transitions and timing were achieved with anime.js - simple JavaScript library, and CSS animations.
Navigation
In order to create a navigation which is both personal and engaging, .We decided to pair Buzzworthy imagery with the navigation links. The Images changing as you hover over different target locations - just another detail meant to surprise and delight site users.
Team page
Anyone who hires us gets to know our fun side. Whether we’re working or playing, we like to have a good time. How better to showcase our personalities than with these dual portraits that say, “Business in the front, party in the back.” We achieved this surprising reveal with HP animation.
Funhouse
This page is our playground, where our true nature is reflected through photos, gifs, videos and animations. Whether it’s the latest prototype for our client or evidence of fun times we’re having outside the office, we've shown it off here. The Funhouse serves as a mood page, where visitors and possible clients can connect with us emotionally, to better understand who we are and what we do.
Micro Interactions
Words alone wouldn't suffice to explain the way we work. We're adamant believers that the Devil is indeed in the details, and that actions - or interactions - speak louder than words. Our website needed to project the same, action, energy, and playfulness that we do, which we achieved through dynamic icons and micro animations. These animations manifest how our drive to do things differently can bring life to even the smallest components of a page.
We created dynamic icons that project a sense of motion, energy, and playfulness.
Technologies:
This case study takes a closer look at the technologies used during the project, as well as explaining what challenges we faced and what we learned in the process. - These takeaways provide useful,practical tips to our readers.
Front-end Frameworks and Libraries:
HTML 5, CSS 3 Anime.js, Waypoints.js, Lightslider, Smoothstate.js for ajax page transitions, Wow.js for revealing content animations
Backend Technologies:
Wordpress Tools: Sketch, Adobe After Effects, Adobe illustrator, Adobe photoshop, Sublime text editor, Prepros - for CSS compiling
Company Info
Buzzworthy is Brooklyn-based award-winning digital studio that specializes in developing stunning custom Wordpress websites.