De vorige website van Broodje Q bestond uit een website waar je online bestellingen kunt doen, die je vervolgens kunt ophalen in het restaurant op het Schouwburgplein. Deze website is gebouwd via Sitedish en fungeert uitstekend als platform om klanten bestellingen door te laten geven, maar je kunt verder geen elementen aan de bouwer toevoegen. Dit gaf ons de kans om de nieuwe website op maat te ontwerpen en te bouwen in Webflow.

Aan het begin van de ontwerpfase — en op basis van merkwaarden — creëren we altijd meerdere ontwerprichtingen, waarvan er één altijd favoriet wordt. Misschien gaan we voor een minimalistische en strakke ontwerpstijl die de aandacht legt op mooie foto's van broodjes en het personeel. Of misschien willen we juist een speelse en kleurrijke stijl om die meer vrolijkheid uitstraalt. Of misschien kiezen we ervoor om zo dicht mogelijk bij de huidige visuele identiteit te blijven en zo de herkenbaarheid te behouden en te vergroten. Uiteindelijk hebben we dit allemaal tegelijkertijd gedaan.

Qua content waren vier dingen belangrijk: om overall het verhaal van Q te vertellen, tegelijkertijd wel aandacht te besteden aan het menu (het blijft voornamelijk een restaurant), bezoekers van de website kennis te laten maken met evenementen en tenslotte hen de mogelijkheid geven om contact op te nemen. We hebben ervoor gekozen om het verhaal van Q zowel te laten terugkomen in 100% van alle elementen op de website als op een specifieke pagina, waarvan je hieronder het resultaat ziet. De illustraties zijn afkomstig uit het huidige geprinte restaurant-menu, waarvan we de kleuren hebben geoptimaliseerd voor het web.

Het Broodje Q menu (niet te verwarren met website menu) speelt een belangrijke rol in de informatievoorziening richting bezoekers van de website én van het restaurant zelf. Zowel in het resaurant, als waar dan ook ter wereld kun je het menu bekijken via de website. Dit menu bestaat uit meer dan 50 broodjes, qrostinis, salades en andere gerechten en worden weergegeven in grid-view op de website. Drie kolommen en zo veel rijen als er nodig zijn. Op mobiele apparaten staan deze gerechten onder elkaar, in één kolom. Deze gerechten zijn bij uitstek pefect voor het gebruik van het ingebouwde content management systeem (cms) van Webflow. Dit betekent dat we één keer één element goed opbouwen en alle andere cms-items automatisch goed staan.

De nieuwe website van Q vervangt de voormalige website die met Sitedish was gemaakt. Dat betekent dat direct de mogelijkheid verviel om online te bestellen. Dat is natuurlijk niet gewenst. Het bouwen van een nieuwe op maat website stelde Q in de gelegenheid om ook Thuisbezorgd als optie toe te voegen wanneer je online bestelt. Nu kiezen gebruikers voor takeaway (Sitedish website zoals voorheen) of de welbekende Thuisbezorgd omgeving.

We waarderen het altijd enorm als er ruime keuze is in hoge kwaliteit foto’s. De foto’s die Q heeft aangeleverd geven een prachtige sfeerimpressie van het restaurant en nodigen uit om er eens te gaan eten. Dat geeft ons de kans om deze foto’s extra aandacht te geven en er veel gebruik van te maken in elementen op de nieuwe website. We durven ervoor te kiezen om foto’s op ongebruikelijke plekken te plaatsen, zoals in een contactformulier en daarnaast zorgen we ervoor dat posts op Instagram automatisch worden ingeladen op de nieuwe website van Broodje Q.

We maken een website op maat, maar dat betekent niet dat we elementen niet hergebruiken. Door dit wel te doen en daarbij de inhoud aan te passen, besparen we niet alleen tijd, maar we zorgen ook dat er patronen ontstaan die bezoekers van de website herkennen en onthouden. Bij blootstelling aan deze patronen in de toekomst, denken zij waarschijnlijk snel aan Q.

De wensen van Q en daarmee dit project, brachten de mogelijkheid met zich mee om een tof en visueel sterk ful screen menu te maken. De welbekende hamburger menu’s behoren vandaag de dag tot de standaard ontwerppatronen die veel mensen herkennen en daardoor weten hoe die werken. Door middel van een donkere achtergrondkleur, grote tekstlinks en fotografie, creëerden we een toffe navigatie-ervaring.

Over animatie en ervaring gesproken, ook op andere plekken op de website komen animatie, grote teksten en fotografie samen. Het restaurant van Broodje Q wordt in de middag omgetovert tot Bar Q, waar je na het werk gezellig een borrel kunt doen op het terras. Deze verandering hebben we terug laten komen op de website door de achtergrondkleur van de website te laten veranderen als gebruikers naar dit deel van de website scrollen om Bar Q nog meer aandacht te gegven.

Zo creëerden we de nieuwe website van Q.