Koloniaal wonen, modern bouwen

Het Koloniehuis is een renovatieproject van Heddes Vastgoed BV. Het bestaat uit 14 luxe koopappartementen, opgedeeld in 3 verschilende typen:

1. Royale appartementen
2. Penthouses
3. Hoekappartementen

Doelstelling

De website is onderdeel van een marketingplan voor Het Koloniehuis, met als doel het promoten van de appartementen. Naast het verstrekken van informatie als prijs, plattegronden en locatie, moet de site vooral een luxe sfeerimpressie geven.

Voorwaarden

1. De website moet toegankelijk zijn voor een zo groot mogelijke doelgroep.
2. Het project heeft een hele korte tijdslimiet en een beperkt budget, maar dit mag niet ten koste gaan van de luxe uitstraling van de website.

De uitdaging

Omdat het project nog in voortgang is, hadden we in eerste instantie weinig origineel beeldmateriaal. Ook zouden we rekening moeten houden met de vertaling van de site in het Engels en in het Duits in een later stadium.

Dit betekende dat we moesten zorgen dat de site zo efficiënt mogelijk werd opgezet, en dat we met een minimum aan beeldmateriaal een modern-koloniale sfeer moesten zien te creëren.

De Cinnamon-aanpak

Toegankelijkheid

Door de opzet eenvoudig te houden, zonder het gebruik van complexe tabellen, maar enkel met CSS en XHTML werd de site toegankelijk gemaakt voor het grootste aantal browsers.

De site in verschillende browsers

De site in Internet Explorer 6	De site in Netscape Navigator 4	De site in MacLynx

Snelheid

We reduceerden laadtijden * door het gebruik van achtergrondafbeeldingen en het toepassen van één externe Stylesheet voor de gehele site.

Laadtijden van de website per modemtype

Modemtype	14K	28K	56K	ISDN (128Kb/sec.)	Breedband (>1440Kb/sec.)
Laadtijd (sec.)	20,6	10,3	5,21	2,15	0,23
* Deze laadtijden zijn bij benadering; factoren als bezetting van het netwerk, de snelheid van computers en problemen bij hosting providers spelen een rol.

Structuur & navigatie: vindbaarheid van informatie

• We kozen voor een zo plat mogelijke structuur van de website met zo min mogelijk deeplinks (Links die diep in de site duiken), zodat informatie makkelijk te vinden is.
• Deeplinks gaven we aan met zg. breadcrumbs (een pad dat de huidige locatie in de site aangeeft, zie afbeelding), om de bezoeker extra duidelijkheid te geven over waar hij/zij zich bevindt.
• We hielden een horizontale navigatiebalk aan voor algemene informatie. De navigatie van de appartementen plaatsten we verticaal aan de linkerkant. Door de appartementen een eigen navigatie te geven, krijgen ze meer prioriteit op de pagina. Dit benadrukten we nog eens door afbeeldingen te gebruiken in plaats van tekst.

Structuur & navigatie in beeld

Eenvoudige vlakke structuur	Gebruik van Breadcrumbs	Twee soorten hoofdnavigatie

Concept & ontwerp

We deden online een kort onderzoek naar koloniale elementen, waarbij we met name keken naar architectuur, interieur en materialen. (Koloniale meubels en interieuren maken een solide indruk, zonder zwaar te zijn. Dit gevoel wilden we laten terugkomen in de site, zonder dat de opzet van de site saai zou worden.)

Indeling

Voor het verkrijgen van deze solide modern-koloniale sfeer gebruikten we een kleurcombinatie van warme houttinten met veel wit. Waarbij donkerbruin de ‘steunpilaren’ van de site vormden, en wit ingezet werd voor contrast, leesbaarheid en een moderne uitstraling.

We plaatsten een schuin afgesneden afbeelding centraal, om de indeling dynamischer te maken.

Huisstijl

Om het project een eigen identiteit te geven, ontwierpen we een tekstlogo. De ornamentjes aan weerskanten geven het tekstlogo de indruk van een houtuitsnede, wat aansluit bij de koloniale sfeer van ambachtelijk gemaakte meubels. We gebruikten een ‘old-style’ lettertype (Hoefler Text), om een klassieke en warme sfeer te creëren.

Huisstijl tot uitdrukking gebracht

Kleurenopzet	Dynamiek in de indeling	Tekstlogo Het Koloniehuis

Tijds- en budgetlimiet

Indeling

Het technische probleem om een zo efficiënt mogelijke site te maken, losten we op door een 2-koloms indeling met een horizontaal blok erboven te gebruiken. Deze indeling bespaarde productietijd door de eenvoud en overzichtelijkheid ervan. Dit gaf ons ruimte voor het perfect afwerken van beeldelementen en het toevoegen van extra’s als afbeeldingen voor tekst.

Standaarden

Door zorgvuldig volgens webstandaarden te coderen, beperkten we de tijd voor het testen en debuggen van de site.

Gebruik van CSS

We implementeerden afbeeldingen en navigatie via Cascading Style Sheets, hierdoor hoefden we slechts een minimale hoeveelheid code aan te passen voor de Duitse en Engelse vertaling van de site.

Conclusie

De uitdaging voor ons projectteam bij Het Koloniehuis was om een eenvoudige site toch een luxe uitstraling te geven, binnen een beperkte tijd en een beperkt budget.

Screenshots van de website

Interieuropties	Plattegronden	Inschrijfformulier

De Engelse en Duitse vertaling kwamen kort na de oplevering van de Nederlandse versie binnen. De beide vertalingen in het Engels en het Duits konden, dankzij de opzet van de Nederlandse versie, binnen de helft van de tijd gerealiseerd worden.

Case Studies

In een Case Study willen wij u laten zien welke strategie en gedachtengang wij hebben gevolgd om de doelstelling van de klant te realiseren. Zo krijgt u een helder beeld van de Cinnamon-aanpak.

• Algera BV, specialisten in installatietechniek
• Koloniaal wonen, modern wonen
• Boekensteun. het ontstaan van een bibliotheekwebsite