Geeky Bits of this website

Here are some key points in the design and construction of this site.

Goal Website

With this website I want to:

  • convince potential employers of my IT-skills
  • tempt potential employers to start a job application procedure with me
  • show my works of art, because th question "What kind of paintings do you paint?!" is so hard to answer without images

The following processes need to take place on the website:

Use cases for this website

All choices which are made during the design, the interaction design, the making of content, the deviding of content over the website and the used techniques have to add to at least one part of this scheme. Whenever a choice is made which does not add to the scheme, the choice was a wrong one.

The process the most important actor (the potential employer) aims at him or her contacting me. The process the potential employer goes through is roughly the following:

activity diagram with conversionpoint for potential employer

Website design principles

  • A place on the internet which presents me in design and interaction.
  • A design which is as calm, restful and minimalistic as possible:
    • Easy to read: large fonts, quiet background, as little lines, shapes and colours as possible
    • Compact/efficient design: elements, spaces and colours have (where possible) more than one function, so the number of elements will be kept to a minimum
    • Animations: humans do not move according to a mathematical model. Therefore: movements on my website should not be based on a mathematical model.
    • Every click should result in special behaviour, yet not hinder or annoy the visitor. The behaviour of the website should be such that someone with lots of HTML knowledge and experience thinks "Wait a minute! How does it do that?!"
  • The use of a photogallery which gives an impression like a paper portfolio:
    • Complete quietness
    • Only the image; no other information
    • Black background behind the photo of the artwork
    • Using a slideshow should be possible
    • No use of pop-ups
  • Startingpoint for the design which shows my artwork: Adrian Pelltiers' hover navigation ("Shadow")

Other principles of the project

  • Budget: "Infinite" (finally!)
  • Deadline: "When it's finished, its finished" (Lovely!)
  • I don't do "I can't do that/I don't know how to do that". It is never a reason to stop or design another solution. I just push through untill I do know how to do it
  • Using the website with the mobile devices of Apple (the hippest iPhone and iPad around at the moment) and its hip rivals of HTC and Samsung should be possible with little changes to the design or technique
  • Paintings must remain visible for the visually impaired
  • Design = Activity Diagram for the visitors, then build a mock-up in front-end languages. No use of completely detailed digital drawings or sketches.
  • The design should relatively easy be able to be converted to a website for a freelancer who "does something with websites" (and talks on his website about clients, cases, ways of working and "how to get in touch with me")

Used style elements

Fonts

  • Logo, menu, footer, buttons: ITC Avant Garde Gothic Std; Extra Light
  • All other fonts: Georgia

Colours

  • - Standard background colour
  • - Standard foreground colour (colour of the main font)
  • - Support background colour
  • - Support foreground colour (color of the main font)
  • - Call To Action colour
  • - Call To Action colour when hovered on

Techniques used

  • XHTML 1.0 / CSS / Javascript according to W3C WIA level 3 specs
  • jQuery
  • AJAX
  • Colorbox: A very thoroughly written photogalleryplugin for jQuery, which I addapted heavily.
  • jQuery BBQ - Back Button & Query Library: a jQuery plugin which enables to store and retrieve the browserhistory on your site in Javascript (needed when using AJAX in order to let the back/forwardbutton work as the user expects it to work).
  • HoverIntent: a jQuery plugin which attempts to determine the user's intent regarding "hovermoments" (attempts to determine if the user intents to point with the mousepointer at a specific part of your website, or "accidently" passes a specific part of your website with the mousepointer whilst on its way to another part of your website).
  • Bassistance.de - jQuery plugin: Validation: a jQuery plugin which handles the validation of forms and gives feedback in a very userfriendly way.
  • Bitstorms' color animation plugin: a jQuery plugin which enables animation between different colors
  • Apache module mod_rewrite: Makes it possible to use URLs which are userfriendly and which let Google read and index different AJAX-states
  • Google Analytics: On this site Google Analytics measures the different AJAX-states which the visitor visits (including AJAX-states of the portfoliosettings, photogallery, contactform and downloading of the resume).
  • PHP
  • MySQL