Styleguide
Methode, tokens en componenten
01
Inleiding
Deze pagina is openbaar omdat de rest van de site beweringen doet die je moet kunnen controleren.
Hier staan de methode waarmee ik werk, de kleuren en letters van deze site met hun contrastwaarden, en de onderdelen waaruit de pagina's zijn opgebouwd.
02
De methode: zes stappen
Na elke stap is er iets te zien. Hieronder elke stap met wat die voor deze site opleverde, behalve wat intern blijft.
-
Stap 1
Gesprek en afbakening
Een halfuur over het bedrijf, de bezoeker en het doel van de site. Daarna een voorstel met vaste prijs en wat daar wel en niet in zit.
-
Stap 2
Structuur en teksten
Sitemap, en per pagina de secties en de boodschap. Ik zet voorlopige teksten neer, zodat het ontwerp met de echte lengtes werkt; de definitieve teksten lever je aan voordat de site live gaat.
-
Stap 3
Styleguide in de browser
Kleuren, letters, ritme en de belangrijkste onderdelen, als werkende webpagina, niet als plaatje. Hier wordt de richting bepaald.
Deze pagina op 1440, met de tokens live. -
Stap 4
Prototype
De pagina's als klikbare website met de echte teksten. Alles werkt zoals in de echte site, met één uitzondering: formulieren versturen nog niets. Daarom worden de lege, ingevulde en bevestigde staat als aparte schermen ontworpen.
Het prototype: Home op 1440 en 412 naast elkaar in de viewer. -
Stap 5
Bouw en CMS
Het prototype wordt een site die je zelf kunt bijhouden: contentblokken, templates, formulieren waarvan de berichten betrouwbaar in je mailbox aankomen, beeldverwerking, beveiliging. Dit is bouwwerk en kost de meeste tijd.
De bouw van deze site: WordPress, elke pagina opgebouwd uit blokken. -
Stap 6
Meten en opleveren
Snelheid en toegankelijkheid worden gemeten en gepubliceerd, de site gaat live, en je krijgt een korte uitleg van het CMS.
03
Tokens, live
Verander de achtergrond, de tekstkleur, het accent of het gewicht van de koppen, en zie elke component op deze pagina direct meeveranderen.
Tokens aanpassen
Kleur en type
Kleur, contrast op ground en op raised
Type: rol, maat mobiel / desktop, gewicht, interlinie, spatiëring
Ritme en lijnen
Beweging
Zo verschijnt een sectie bij het scrollen.
04
Componenten
Elke component en elke variant één keer, met naam: kies er hieronder een. Het zijn voorbeelden, geen werkende delen van deze pagina. De header staat bovenaan deze pagina, de footer met de slotregel en de contactactie onderaan.
ContactAction / primary: standaard, hover, focus, actief, uitgeschakeld
Eyebrow, SectionHeading, TextBlock
Vakmanschap
Werk
Twee groepen, één maker
Onder Vakmanschap staan drie websites die ik bij een bureau heb gebouwd naar het ontwerp van dat bureau.
Een toeleverancier heeft twee bezoekers die elkaar in de weg zitten.
De inkoper van een machinebouwer wil weten of het bedrijf in aanmerking komt en daarna een tekening uploaden. De vakman die een baan zoekt, wil weten hoe het er in de werkplaats aan toegaat.
WorkGroup / ontwerp-en-bouw, met ProjectRow / concept
Ontwerp en bouw
-
Landgoed De Bleekhoek
Drie ingangen, een weekmenu zonder foto's, en zakelijk als de conversie.
Bekijk de case Landgoed De Bleekhoek
WorkGroup / vakmanschap, met ProjectRow / agency en ProjectRow / pending
Vakmanschap
-
Expoteam
Craft CMS, drie talen op drie domeinen; header, footer, taalwissel en een groot deel van de blokken van mij, in een team van twee.
Bekijk de case Expoteam
CaseHeader
Ontwerp en bouw
Landgoed De Bleekhoek
Een website voor een landgoed bij Ootmarsum met een restaurant, zalen en een trouwlocatie: drie soorten gasten, drie ingangen, één rustige site.
CaseMeta, naast het eerste tekstblok
Wat de opdrachtgever is
Landgoed De Bleekhoek bestaat niet.
Het is een verzonnen landgoed in het buitengebied van Ootmarsum: een restaurant met een weekmenu dat elke maandag wisselt, een koetshuis met zalen voor vergaderingen en bedrijfsdagen, en een tuin waar getrouwd wordt. Ik heb dit bedrijf bedacht als tegenhanger van Renderink: waar Renderink laat zien dat ik een industriële, dichte site kan ontwerpen, laat De Bleekhoek zien dat ik ook een rustige site kan maken.
Alles is verzonnen, inclusief het KVK-nummer in de footer. De fotografie is rechtenvrij stockmateriaal; zie beslissing 4.
DecisionList
-
01
Drie ingangen, gelijkwaardig, met Zakelijk in het midden
De homepage opent met drie even grote ingangen: Restaurant, Zakelijk, Trouwen. Elke route eindigt in één aanvraag: een reservering, een offerte of een bezichtiging, als laatste blok van de pagina. De diepgroene accentkleur is voor die routes bewaard, op de drie ingangen en op de boekingsknoppen, en nergens decoratie. De gast die wil eten, vindt het restaurant in één klik.
-
02
Het weekmenu zonder foto's
Een restaurantsite zonder foto van het eten lijkt een gok, maar het is een bewuste keuze. Het weekmenu is tekst: de week, drie gangen, een prijs en een paar praktische regels. De gerechten staan groot in een serif, in een smalle kolom in het midden, met een hairline tussen de gangen. Het is de pagina waarop de typografie het werk doet dat elders de fotografie doet, en het was het eerste blok dat ik bouwde: als die kolom met lange gerechtnamen op mobiel niet standhoudt, klopt de letterschaal van de hele site niet. De eigenaar werkt het menu elke maandag zelf bij.
-
03
Nederlands, u en jullie
De site spreekt de gast met u aan, ook op de zakelijke pagina. Alleen de trouwpagina zegt jullie, omdat daar een stel leest en niet één persoon. Dat onderscheid staat in de inhoudsstructuur, niet alleen in de teksten, zodat het in elke latere tekst overeind blijft.
ViewportSwitcher
Screenshot / desktop
Screenshot / mobile
Screenshot / pair
Screenshot / stack
CaseNav
StepList / compact
-
Stap 1
Gesprek en afbakening
-
Stap 2
Structuur en teksten
-
Stap 3
Styleguide in de browser
-
Stap 4
Prototype
-
Stap 5
Bouw en CMS
-
Stap 6
Meten en opleveren
ServiceBlock, met PracticalList
Voor ondernemers die één aanspreekpunt willen
Voor een MKB-bedrijf dat een nieuwe website nodig heeft en geen zin heeft in een bureau voor het ontwerp en een bouwer voor de rest. Ik doe allebei, in zes stappen: gesprek en afbakening, structuur en teksten, styleguide in de browser, prototype, bouw en CMS, meten en opleveren. Na elke stap staat er iets dat je zelf kunt bekijken.
€ 3.500
- Wat erin zit
-
Een eigen thema, ontworpen en gebouwd op WordPress, met een CMS waarin je zelf kunt werken. Formulieren waarvan de berichten betrouwbaar in je mailbox aankomen, een testomgeving, de basis voor vindbaarheid en bezoekersstatistieken, beeldverwerking, beveiliging, een uur uitleg over het CMS, en een meetrapport bij oplevering. Tot tien pagina's vul ik met je teksten.
- Wat er niet in zit
-
Teksten schrijven, fotografie, een logo of huisstijl en hosting. In stap 2 leg ik per pagina vast welke teksten er nodig zijn en zet ik voorlopige teksten neer; de echte lever je aan of laat je schrijven.
- Wat de prijs bepaalt
-
Het aantal paginatypes, niet het aantal pagina's: een type als de homepage of een dienstpagina ontwerp ik één keer, en je gebruikt het zo vaak als je wilt. Een tweede taal, een webshop of een koppeling met een ander systeem zit niet in de vanafprijs: wat je daarvan nodig hebt, komt in het voorstel bovenop die prijs.
- Hoe de prijs tot stand komt
-
Na het eerste gesprek krijg je een voorstel met één vaste prijs en een lijst van wat erin zit en wat niet. De helft betaal je bij de start, de helft bij oplevering. Per paginatype zijn er twee correctierondes. Meerwerk reken ik af tegen € 70 per uur, en alleen na je akkoord.
- Daarna
-
Dertig dagen na de livegang los ik fouten kosteloos op. Daarna neemt een onderhoudsafspraak het over, maandelijks opzegbaar; zie hieronder.
SpecTable
- HTML, CSS/SCSS, JavaScript, Twig, Liquid
- WordPress (ACF, Bedrock), Craft CMS, Prepr
- Magento, Shopify
- Modulaire contentbloksystemen
Availability
Per project of per deelopdracht, met een vaste prijs vooraf. Strippenkaart van 40 uur voor doorlopend werk: € 65 per uur. Uurtarief € 70, excl. btw.
De algemene voorwaarden gaan bij elk voorstel mee; een raamovereenkomst van het bureau is bespreekbaar.
Portrait / home en Portrait / over
Form / contact
Alle velden zijn verplicht.
TextPage
Algemene voorwaarden
Alessandro Aresu, ingeschreven bij de Kamer van Koophandel onder nummer 42202326, Ringovenstraat 23, 7531 ZM Enschede, alessandro@alessandroaresu.com.
1. Toepassing
Deze voorwaarden gelden voor elk voorstel en elke overeenkomst tussen Alessandro Aresu en jou als opdrachtgever. Ze gaan als bijlage bij elk voorstel mee. Afwijkingen gelden alleen als ze schriftelijk zijn vastgelegd. Inkoopvoorwaarden van de opdrachtgever zijn niet van toepassing, tenzij ik die schriftelijk heb aanvaard. Is er een raamovereenkomst, dan gaat die voor op de punten die erin staan. Voor de rest gelden deze voorwaarden.
ImageSlot
DistanceTest
De afstandstest laat zien dat ik heel verschillende websites kan ontwerpen en bouwen, niet steeds dezelfde in een andere kleur.
