Das Buro Creative Agency

Kruip in het hoofd van de opdrachtgever om verwachtingen te managen

Als creative agency moet je website van goeden huize komen om te laten zien waar je goed in bent. De creativiteit moet van het scherm spatten. Das Buro kwam met een creatief design en een wensenlijst voor animaties bij Slik. Het ontwerpen en bedenken hoe de animaties technisch moeten werken, dat kan Das Buro wel. Nu de technische uitvoering nog :). De uitdaging: in het hoofd van Das Buro kruipen om een goed beeld te krijgen van de ideeën voor de animaties. Om vervolgens een slimme WordPress website te bouwen die aan de achterkant en de voorkant, met extra aandacht voor de animaties, aan de verwachtingen van Das Buro voldoe

Animaties met Javascript en Lottie.js maken de website

De website van Das Buro bevat over de gehele website animaties. Animaties zijn kleine, bewegende interacties op een website. We noemen ze ook wel micro-animaties. Kleine animaties zie je vaak terug in icoontjes, buttons of pijltjes die bewegen of van kleur veranderen als je er met je muis overheen gaat. Ze vallen niet direct op, maar geven je als gebruiker toch een ‘extra gevoel’.

Klik zelf eens door de website heen en ontdek de verschillende kleine en grotere animaties. Of loop er samen met ons doorheen:

• Ga naar dasburo.nl. Er start direct een video, zonder geluid. Klik eens op ‘play with sound’ en je bent getuige van een subtiele transitie waarbij de video opnieuw begint en de content uitfade.
• Klik op ‘Projects’, scroll naar beneden en zie wat er met de navigatie gebeurt. Afhankelijk van de achtergrondkleur van de afbeeldingen, verandert de tekstkleur van de navigatie. Hiervoor maakten we gebruik van CSS mix-blend-mode. Deze code geeft aan hoe elementen ten opzichte van elkaar moeten blenden 🎨
• Bij ‘Projects’ is veel leven in de brouwerij dankzij de bewegende afbeeldingen bij de projecten. Via WordPress kan Das Buro zelf video’s in .webm formaat uploaden. WebM is een bestandsformaat dat specifiek wordt gebruikt voor het online delen van video. Video’s in .webm zijn minder zwaar om in te laden en bevat toch een hoge kwaliteit. Fijn voor de performance (snelheid) van de website. Vindt Google ook gelijk leuker 😃
• Scroll door de pagina ‘Projects’ over de afbeeldingen. Als je hier met je muis overheen gaat, verandert de vorm van de afbeelding. Indrukwekkend! Dit gebeurt ook bij de onderdelen ‘Projects insights’ en ‘The latest gossip’.
• Klik nu op één van de projecten. Wouw, zag je dat? De pagina van het project schuift als het ware over de website heen in een vloeiende transitie. Wij worden er warm van 🔥. Voor deze transitie creëerden we een illusie met Javascript. Zodra je op een project klikt, kleuren we eerst een vlak over de gehele pagina in met de kleur die bij het project hoort. Daarna sturen we je met Javascript door naar de projectpagina, zodat je een illusie van een transitie krijgt.
• Scroll door de pagina ‘Process’. Je komt allerlei animaties tegen bij de verschillende bullets. Deze bijzondere animaties, die afspelen op de achtergrond tijdens het scrollen, maakten we met Lottie.js. Dit is een techniek waarmee je animaties vanuit Adobe After Effects verandert in een animatie die aanpasbaar is met Javascript. Met Lottie.js koppelen we de animatie aan hoe ver je naar beneden scrollt. Zo is een tekstuele pagina toch visueel aantrekkelijk.
• Nu je alle animaties van voorgaande punten hebt gezien, is het je mogelijk opgevallen dat er nog meer animaties zijn op dasburo.nl. Zoals bijvoorbeeld de vertraging in het inladen van content wanneer je scrollt. Oftewel: delayed online scrolling. Een interactie met grote impact op de user experience die we graag toepassen in onze projecten.

It’s all about building brands

Met een stevige basis en een goed merk-DNA zorgt Das Buro voor een unieke positionering van merken. Merk-DNA met een visie die inspireert, een missie die een innerlijke vlam ontsteekt en de waarden die een merk constant laat zien. Door middel van een merkplan blaast Das Buro merken een nieuw leven in.

Met een sterk team van strategische denkers, ontwerpers en creatieve marketeers, gaat dit bureau dagelijks aan de slag met de mooiste merken en bijzondere projecten.

Wil je meer zien van Das Buro en de bijzondere website met animaties? Breng dan snel een bezoek aan de website!