De nieuwe website van dJGA

website-djga-03

De voorpagina van de nieuwe website

De afgelopen maanden ben ik op mijn werk bij dJGA bezig geweest met een leuk project: het ontwerp van een nieuwe website voor ons bureau. We hebben daarbij een proces doorlopen wat denk ik ook wel interessant is voor andere bedrijven die een nieuwe website willen laten bouwen.

We hadden behoefte aan een nieuwe website omdat de bestaande niet meer voldeed aan de eisen van deze tijd. De oude site was lastig te onderhouden en de beelden van de projecten werden te klein getoond zodat een bezoeker niet echt een idee kreeg van het werk wat we bij dJGA doen. Omdat we als architecten altijd een sterke mening hebben over hoe iets eruit moet zien hebben we het proces zo ingericht dat we het ontwerp grotendeels zelf hebben gemaakt en dat door een externe partij hebben laten bouwen.

01 oude site djga

De vorige website van dJGA

Het ontwerpproces

Samen met collega’s Martjan den Hoed en Femke Feenstra hebben we het kernidee ontwikkeld dat onze website als een boek moet functioneren. Je hebt een omslag (de voorpagina) en je hebt inhoud (de projectpagina’s). Natuurlijk heb je ook een inhoudsopgave, maar die is minder belangrijk. Vanaf de voorpagina kun je direct naar een projectpagina navigeren. Je zit dit principe uitgebeeld in onderstaand schema:

website-structuur-02b

Met het ‘boek’ concept ben ik een aantal voorstellen voor de verschillende webpagina’s gaan maken. Vooral de projectoverzichtspagina was een uitdaging, want hoe toon je die met tientallen projecten om uit te kiezen? We zijn uitgekomen op een twaalftal beelden van projecten die uitgelicht worden, met daaronder een lijst van alle projecten. Via het menu zijn alle projecten te selecteren op naam, jaar en functie en is er een kaart waar alle projecten op staan.

mockups

responsive-samples

Responsive design

Het was voor ons belangrijk dat de website volledig responsive is. Dat houdt in dat hij meeschaalt met het medium waarop de site bekeken wordt. Hierdoor blijft de inhoud leesbaar op een tablet of telefoon, en is de site ook bruikbaar op apparaten die met je vinger bediend worden in plaats van een muis. Ook hebben we gekeken naar wat vakgenoten als website prefereren. Daarover kun je meer lezen in de blog die ik ga schrijven over ‘de architect en zijn website’.

Een aantal beelden van ontwerp waar we vervolgens een aantal websitebouwers mee benaderd hebben vind je hieronder. Er waren een aantal punten die we belangrijk vonden, en aan de hand van die criteria hebben we de bouwer geselecteerd. Zo wilden we graag een gebruiksvriendelijk Content Management Systeem (CMS), goede grafische kwaliteiten, een gunstige prijs van de bouw en het onderhoud, relevante referenties, goed contact met ons als klant, een tijdsindicatie en waren we benieuwd naar de eigen inbreng van de ontwikkelaar.

conceptdocument02

Open source of een gesloten CMS

Na de presentaties van de ontwikkelaars hebben we ervoor gekozen om onze website te laten bouwen in het open source platform WordPress omdat we daarmee niet aan een custom CMS van een ontwikkelaar vastzitten. Hadden we een ontwikkelaar gekozen met een zelfgemaakt CMS dan waren we eigenlijk verplicht om ook levenslang te betalen voor onderhoud bij die partij, omdat iemand anders het systeem niet kent. Nu het een open source systeem is kan bij wijze van speken ook ons eigen systeembeheer sleutelen aan de PHP code, en zijn we niet van een derde partij afhankelijk.

We kozen voor het eenmansbedrijf Presta, wat gerund wordt door Sheila Tan. Zij was zo flexibel dat ze een aantal dagen in de week bij ons op locatie kon komen werken. Hierdoor konden wij direct reageren als ze een opzet voor de website gebouwd had. Na de selectie is de site in drie maanden gebouwd. Omdat we het ontwerp al klaar hadden kon Presta snel aan de slag, maar tijdens de rit doken er diverse onverwachte uitdagingen op waar dan ter plekke een oplossing voor bedacht moest worden.

We zijn erg blij dat we voor WordPress hebben gekozen. Achteraf terugkijkend vind ik het bijzonder dat het systeem zo flexibel is dat we zelfs onze complexe structuur van projectgegevens en afbeeldingen erin kwijt konden. Op een gegeven moment werd het hele proces voor ons zo complex dat we het overzicht kwijtraakten en hebben we met behulp van MindJet een mindmap gemaakt om de vele aandachtspunten beheersbaar te houden. Een spaghetti die duidelijkheid biedt.

Webfonts

dJGA-logo-rood-x2Het huisstijl-lettertype van dJGA is Futura, een modernistisch lettertype wat in de jaren ‘30 ontworpen is door Paul Renner. Hoewel het een mooi font is met duidelijke invloeden van het Bauhaus is het niet erg geschikt voor langere stukken tekst. We hebben er daarom voor gekozen om Avenir in te zetten als lettertype wat het merendeel van de tekst voor zijn rekening neemt; alle navigatie elementen zijn gezet in Futura.

De voorpagina

website djgaDe plek waar veel mensen hun bezoek zullen beginnen functioneert als een glossy voorpagina van een tijdschrift: fullscreen beelden van ons beste werk met daarop teksten van de laatste projecten en nieuwsberichten. Bijna alles op deze pagina is klikbaar naar een bepaald gedeelte van de site, en een citaat toont wat opdrachtgevers over ons bedrijf gezegd hebben. Om de tekst leesbaar te houden hebben we een transparant plaatje met een donker verloop voor de foto gelegd die het subtiel donkerder maakt.

Omdat wij als architectenbureau grotendeels actief zijn in de sectoren gezondheidszorg en scholen zijn we veel met mensen bezig. Nu ik dit opschrijf bedenk ik me dat dit natuurlijk met andere gebouwsoorten ook zo is, maar van onze gebouwen wordt verwacht dat de gebruiker er ook daadwerkelijk beter van wordt. Zowel qua gezondheid als educatie. ‘Healing Environment’ of ‘frisse scholen’ heet dat met een hippe term.

We hadden onszelf dus als doel gesteld dat de foto’s die we toonden ook vooral mensen, de gebruikers in het gebouw moesten laten zien. Ik moet zeggen dat we daar nog niet helemaal in geslaagd zijn. Het is een manco van veel architectenbureau’s: wel strakke vormen, maar geen mens te bekennen.

Het portfolio van projecten

projectpaginaDe projectpagina is één van de belangrijkste onderdelen van een architectenwebsite en daar is dan ook veel tijd in gaan zitten. Je treft er een serie tekeningen, renderingen en foto’s in een ‘slider’ die je ook fullscreen kunt tonen en met het toetsenbord kunt bedienen. Ernaast een kaartje wat de locatie van het project in zijn nabije omgeving toont. We maken hiervoor gebruik van Mapbox wat op zijn beurt van de open source OpenStreetMap gegevens gebruik maakt. Gaaf hieraan is dat je je eigen gebouwen kunt intekenen, zoals ik bechreven heb in mijn blog over digitale kaarten.

Een korte tekst legt de achtergrond van het betreffende project uit en in de zijbalk vind je een serie gegevens over het project, zoals het adres, de opdrachtgever, de grootte in vierkante meters en gerelateerde projecten en nieuwsberichten. Op sommige van deze facts kun je doorklikken om meer van dezelfde categorie te bezoeken.

De puntjes op de i

Begin juli is de nieuwe site live gegaan en ten tijde van schrijven van dit artikel is de website voor zo’n 90% klaar. Aan een paar kleine dingen, zoals de meertaligheid en alternatieve selectie methoden voor projecten wordt nog gewerkt.

Ik ben benieuwd wat je van de website vind, en of je nog verbeterpunten ziet!

Info

Dit artikel is op geschreven door in de categorie webdesign.

het op Twitter
Deel op Facebook

2 reacties op “De nieuwe website van dJGA

  1. Max schreef op :

    Hi,

    Het is wel een een leuke site geworden. Djga site heeft wel features van Alliedworks.com….

  2. jan schreef op :

    Fantastisch dat je de kans hebt gekregen hieraan mee te werken!
    Prachtig resultaat!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *