In June 2014 Drupal Association announced that we became a design partner, and we will design European Drupalcon 2015. Association had chosen a beautiful location for it - Barcelona! We got this information a bit earlier than all Drupal Community :) So we had to create a logo and a splashpage as well as stickers and posters for announcing Drupalcon 2014 in Amsterdam.
We started discussing different design concepts with amazing team of Drupal Association, which included local team from Barcelona. We learned so many interesting facts about Spain and Barcelona, that locals really love their city and are proud of it. Our partners from Barcelona delivered a huge amount of detailed information, and we had so much inspiration for creating the main thing, the logo.
We prepared and discussed many concepts which could show all Barcelona advantages. It turned out that the city has so many buildings with unique architecture besides famous Gaudis masterpieces, and locals love and proud of their seaside. As a result we managed to combine a sea, great architecture and Drupal into one sign. We used the unique Eixample grid as a base of sign; big part of Barcelona was built using this grid. This famous thing highlights Barcelona from any other city. Inside one of the elements of the sign we placed Drupals silhouette; Barcelona will become a home for it during European Drupalcon in 2015. Sea turned into blue color in the logo, in addition to Spanish traditional red and yellow colors. All composition also conjures mosaic which decorates the city.
Using logo as a base we created design for stickers and poster for Drupalcon in Amsterdam.
Time for designing a splashpage has come. It's possible to use the most creative ideas and interesting effects for this website; everything that brings up an unique look and feel of the city. We came up with a few colorful sketches with our ideas for a splashpage. Accosiation chose one of them and we started to implement it.
The aim was to make up something fresh, clean and modern and use the latest web techniques to implement these ideas. First of all, our splashpage is made of several diagonal sections, a hero image, mosaic images, some info copies and a video of Barcelona. All these parts move independently as you scroll and create the effect of a lightweight page. It’s made with the help of Scrollorama, jQuery plugin for doing cool scrolly stuff. The page can be viewed from any device. Parallax effects are disabled for smalltouch devices not to overload them.
Basically, this page is a pure design and front end thing. The biggest challenge for our front end developer was to make up these diagonal sections. Not to reveal all the secrets, we’ll only say that this was made with CSS3 and some magic when it came to responsive. If you ever try to make a responsive diagonal webpage, please send us a link ;)
On the very bottom of the page we placed the video from the local team presenting Barcelona. Watch it, feel the spirit of the city and see you next year in Barcelona. We promise to make some cool stickers;) Check the splashpage for dates!