Geeky bits van deze website

Hier een klein kijkje in de keuken waarin de website gebakken werd.

Doel Website

Met deze website wil ik:

  • potentiële werkgevers overtuigen van mijn IT-capaciteiten
  • potentiële werkgevers verleiden tot het ingaan van een sollicitatieproces met mij
  • mijn kunstwerken tonen, omdat de vraag "Wat voor schilderijen maak je dan?!" zo moeilijk te beantwoorden is zonder plaatjes.

De volgende processen moeten op de website gedaan kunnen worden:

Use cases voor deze website

Alle keuzes die gemaakt worden bij het ontwerpen van de vormgeving, de interactie, de inhoud, de verdeling van de inhoud over de site en het toepassen van de techniek voegen toe aan minstens één onderdeel in bovenstaande schema. Voegt een keuze niet toe aan bovenstaande schema, dan is er sprake van een verkeerde keuze.

Het "werkproces" van de belangrijkste actor (de potentiële werkgever) heeft tot doel dat hij of zij contact met mij op neemt. Het proces dat de potentiële werkgever op mijn website doorloopt ziet er als volgt uit:

stroomschema met conversiepunt voor de potentiele werkgever

Uitgangspunten vormgeving Website

  • Een plek op het internet die mij presenteert in vormgeving en interactie
  • Een zo rustig mogelijk en minimalistisch design:
    • Prettig leesbaar: grote letters, rustige achtergrond, zo weinig mogelijk lijnen en kleuren
    • Compact/efficiënt design: elementen, vlakken en kleuren hebben (waar mogelijk) meerdere functies zodat het aantal elementen tot het minimum beperkt blijft.
    • Animaties: mensen bewegen niet volgens een wiskundig model. De animaties op de websites dienen dit ook niet te doen.
    • Iedere klik moet bijzonder zijn, terwijl het de bezoeker niet hindert. Het gedrag van de website moet zo zijn dat een HTML kenner denkt "Hé?! Hoe doet ie dat?!"
  • Gebruik van een fotogallery die een blik geeft zoals een papieren portfolio:
    • Complete rust
    • Alleen het beeld, geen overige info
    • Zwarte achtergrond achter foto kunstwerk
    • Diaserie tonen moet mogelijk zijn
    • Geen gebruik van een pop-up

Overige uitgangspunten project

  • Budget: "Oneindig" (Eindelijk!)
  • Deadline: "Alstie af is istie af" (Heerlijk!)
  • Ik doe niet aan "Dat kan (ik) niet". Het is sowieso geen reden tot compromissen in het design of de interactie. Ik zet gewoon door tot ik het wel kan
  • Het bekijken en bedienen van de website met mobile devices van Apple (hipste iPhone en iPad van dit moment) en de hipste tegenhangers van HTC en Samsung moet met zo weinig mogelijk aanpassingen mogelijk zijn
  • Schilderijen moeten voor blinden toegankelijk blijven
  • Het design moet met relatief weinig aanpassingen om te bouwen zijn tot een website voor een freelancer die "iets met websites doet" (en op zijn website iets roept over klanten, cases, werkwijzes en bereikbaarheid)
  • Ontwerpen = stroomschema voor bezoekers en daarna mock-up bouwen in fontend talen. Geen uitgewerkte digitale afbeeldingen als schets

Gebruikte stijlelementen

Lettertypes

  • Logo, menu, footer, knoppen: ITC Avant Garde Gothic Std; Extra Light
  • Overige fonts: Georgia

Kleurenpallet

  • - Standaardkleur achtergrond
  • - Standaardkleur voorgrond (kleur van het meest gebruikte lettertype)
  • - Steunkleur achtergrond
  • - Steunkleur voorgrond (kleur van het meest gebruikte lettertype)
  • - Kleur Call To Action
  • - Kleur Call To Action bij hoveren

Gebruikte technieken

  • XHTML 1.0 / CSS / Javascript op W3C WIA level 3
  • jQuery
  • AJAX
  • Colorbox: Een zeer netjes opgezette plugin voor de photogallery, die ik daarna stevig aangepast heb
  • jQuery BBQ - Back Button & Query Library: een jQuery plugin die het opslaan en terughalen van de browsergeschiedenis mogelijk maakt in Javascript (nodig wanneer je AJAX gebruikt en de back/forward knop wilt laten functioneren zoals de gebruiker verwacht).
  • HoverIntent: een jQuery plugin die de intentie van een bezoeker probeert te achterhalen omtrent "hovermomenten" (achterhaalt of de bezoeker met de muis een specifiek punt op de website aanwijst, of "toevallig" over dit punt heen gaat met het pijltje van zijn muis terwijl hij op weg is naar een ander deel van de website).
  • Bassistance.de - jQuery plugin: Validation: een jQuery plugin die op een voor een bezoeker erg gebruiksvriendelijke manier checkt of een formulier goed is ingevuld.
  • Bitstorms' color animation plugin: een jQuery plugin die er voor zorgt dat er geanimeerd kan worden tussen verschillende kleuren
  • Apache module mod_rewrite: Maakt het mogelijk om URLs te gebruiken die gebruiksvriendelijk zijn en waarmee Google de verschillende AJAX-states kan lezen en indexeren.
  • Google Analytics: Op deze site meet Google Analytics de AJAX-states die de bezoeker bezoekt (inclusief de AJAX-states rond het zoekfilter van de portfolio, fotogallery, contactformulier en downloaden van CV).
  • PHP
  • MySQL