Website voor een interieurbouwer
Statema Interieurbouw is een naam die ik verzonnen heb, zodat ik voor deze branche een compleet ontwerp kon uittekenen in plaats van een voorbeeldje. Vier pagina's, allemaal af, en helemaal gericht op een vak waarin de foto het werk verkoopt.
Je verkoopt iets dat nog niet bestaat
Wie een bar of een kastenwand laat maken, bestelt iets wat nog nergens staat. Die klant wil eerst zien of jij zoiets eerder gemaakt hebt en hoe het geworden is. Een site voor dit vak begint daarom niet met een verhaal over vakmanschap, maar met foto's van opgeleverde projecten.
Dat stelt andere eisen dan bij de meeste bedrijven. Het beeld moet groot en in ware kleuren staan, want er wordt op het scherm naar een naad en een houtsoort gekeken.
Vier pagina's, met de projecten voorop
Vier pagina's en een foutpagina. Op de homepage staan de projecten direct onder de kop, zodat je niet hoeft te scrollen voordat er iets te zien is.
- Home Een korte kopregel, daaronder meteen drie projectfoto's en een uitvergroot project met de kerncijfers. Onderaan de soorten werk en de aanzet tot contact.
- Projecten Bovenaan alle opnamen naast elkaar, als de contactafdruk waarop fotografen hun foto's beoordelen. Elke foto springt naar dezelfde case verderop op de pagina, daar uitvergroot en met het verhaal erbij.
- Studio Beeld uit de werkplaats, wie er werken, en de werkwijze in vier stappen van opmeting tot montage.
- Contact Formulier met een keuzelijst voor het soort project, en het adres en telefoonnummer ernaast. Geen ingesloten kaart maar een link naar Google Maps, zodat de pagina niets van buiten hoeft op te halen.
- Foutpagina Een leeg fotokader met het bijschrift dat dit nummer er niet tussen staat, en een knop terug naar de projecten.
Waarom de pagina bijna zwart is
De achtergrond is een warm bijna-zwart (#1b1917) en in de interface zit geen enkele accentkleur. Dat is geen stijlgrap, maar een keuze voor het beeld. De grijzen zijn warm gekozen omdat hout en textiel warm beeld opleveren; een blauwzwart steekt daar vals bij af. Puur wit en puur zwart komen nergens voor, want witte tekst op zwart gaat schitteren.
De koppen staan in Manrope, een strak geometrisch font dat past bij werk dat op de millimeter wordt uitgetekend. Het is een variabel bestand, dus de kop, het bijschrift en het kerncijfer komen uit dezelfde familie zonder dat de site iets extra's laadt. De lopende tekst staat in Atkinson Hyperlegible, ontworpen door het Braille Institute om lettervormen zo goed mogelijk uit elkaar te houden. Op een donker fond ogen letters dunner, en dan scheelt dat echt. Beide lettertypes staan in de site zelf, er gaat geen verzoek naar Google.
De indeling leent van het contactvel waarop fotografen hun opnamen naast elkaar beoordelen: een dicht raster van frames, met onder een haarlijn een klein bijschrift met projectnummer en naam. De uitgelichte projecten zijn twee vakken breed, zoals de aangekruiste opnamen op zo'n vel. Tekst staat nooit over een foto heen. Bewegen doet de pagina nauwelijks: een rustige fade bij het openen, verder alleen reactie op wat je aanwijst. Geen inzoomende beelden.
Wat dit ontwerp van je vraagt
Dit ontwerp hangt aan beeld: hoe meer goede projectfoto's er zijn, hoe sterker het wordt. Het raster groeit gewoon mee met wat jij te laten zien hebt.
De cijfers naast een project, zoals het aantal vierkante meters of de bouwtijd, zet ik er alleen bij als jij ze kunt bevestigen, en nooit meer dan drie per project. Wat je hierboven ziet is verder een uitgangspunt en geen mal: kleur, indeling en het aantal pagina's stem ik af op wat jij te laten zien hebt.
Zo'n site voor jouw werkplaats
Stuur me wat foto's van je laatste project en vertel wat je maakt. Dan bouw ik een voorbeeld van jouw homepage, met een vaste prijs erbij. Allebei zonder verplichting.
Liever eerst zelf rondklikken? bekijk dit ontwerp live.