Webkit Font-Smoothing – http://maxvoltar.com/archive/-webkit-font-smoothing

Interessant artikel, zeker iets om rekening mee te houden met de opkomst van CSS3 en Font-face.

Dive Into HTML 5 – http://diveintohtml5.org/

Omdat ik zelf druk aan het kijken ben naar HTML 5 en nogal benieuwd ben naar de mogelijkheden en vooral limieten van nu. Goed artikel.

Launchlist – http://launchlist.net/

Binnenkort een website lanceren? Gebruik dan dit tooltje, dan weet je zeker dat er niets verkeerd kan gaan.

Design

Studio Breakfast – http://www.studiobreakfast.be/

Inspirerend ontwerp en vooral een mooi portfolio!

Evoke One – http://www.evokeone.com/v4/

Net een nieuwe release geweest, veel inspirerend werk!

Fontsquirrel

Ik heb Font Squirrel gebruikt tijdens de ontwikkeling van FixMyMobile, omdat deze site mij de mogelijkheid bood te experimenteren met meer lettertypes dan ik gewend was. Dankzij de @font-face generator kon ik alle gewenste fonts zo implementeren. Ik heb hier op Banzaidesign nog een artikel over geschreven: http://banzaidesign.nl/font-face/

Visual Effects and Layout Techniques With CSS3 – Smashing Magazine

Dit artikel op Smashing Magazine heeft me ontzettend veel uitgelegd over de combinatie van CSS3 en Javascript en wat daar allemaal wel niet mee mogelijk is. Kort gezegd: Teveel om allemaal in een keer op te nemen, dus ik ga zeker nog een aantal van die artikelen bekijken.

The $300 Million “Continue” Button

Ontzetend inspirerend verhaal over een designkeuze die uiteindelijk een belachelijk groot effect had op een compleet bedrijf!

What To Expect in 2010

Voorspelling van wat er in 2010 qua trends in webdesign zou gaan gebeuren. Het meeste is tot nu toe nog uitgekomen ook!

How-To: Create Effective Landing Page Designs

The Definitive Guide to Styling Web Links

Ook deze bleek ontzettend interessant en vooral handig!

Kop 3

Spotify is een nieuwe Muziekdienst die er voor zorgt dat je ‘muziekbibliotheek’ van mogelijk enkele duizenden nummers vergroot naar miljoenen. Ze bieden namelijk een dienst aan die zo’n beetje 70/80% van de mainstream markt heeft gepakt en die meteen beschikbaar is voor iedereen met een spotify account. Artiest intypen, nummer aanklikken en meteen afspelen. Veel simpeler hadden ze het denk ik niet kunnen maken.

Zoiets zou toch eigenlijk niet gratis kunnen zijn, zou je denken? Nou, het kan wel! De Spotify Free en Open accounts bieden de gebruiker de mogelijkheid gratis naar muziek te luisteren, al zij het onder enkele limitaties, waaronder reclames na elk 10e/20e nummer dat je luistert.

Waarom Spotify eigenlijk briljant is, is dat het werkt. Als ik een nummer op de radio hoor en ik denk: Daar wil ik meer van horen, dan is het gemakkelijker de artiest even in Spotify op te zoeken dan bijvoorbeeld een cd te kopen, of zelfs te downloaden. Bovendien zijn er functies als ‘meest beluisterde nummers’ en ‘gerelateerde artiesten’ gemaakt, zodat je gemakkelijk bijpassende en interessante muziek kan ontdekken.

Ikzelf ben bijvoorbeeld normaal nooit zo van de Jazz muziek, maar dankzij dit programma heb ik al diverse coole artiesten gevonden en leuke playlists gemaakt. Die playlists zijn overigens ook bijzonder gemaakt. Je kan ze delen middels een gewoon http linkje, maar je kan er ook een ‘Collaborative Playlist’ van maken, wat inhoudt dat mensen uit je vriendenlijst zelf nummers kunnen toevoegen en wijzigen. Ideaal voor feestjes: Je geeft iedereen de link en zegt: Jongens, gooi er maar leuke muziek in. Dan kan je Spotify tijdens het feest je gewoon op die playlist zetten en je weet zeker dat er leuke muziek bij zit!

Wat ik wel hoor zijn negatieve berichten over het aanbod. Niet omdat er te weinig artiesten op staan, nee: Er is teveel keuze! Het klopt in sommige gevallen ook wel: Teveel keuze is niet goed. Maar bij Spotify hebben ze geen keus: Als er minder muziek op zou staan en dus een groot deel van de gemiddelde muziekbibliotheek zou ontbreken, zou niemand er voor willen betalen of het überhaupt willen gebruiken. Daarnaast bieden ze de mogelijk om alles netjes te categoriseren met playlists en je kan nummers ‘starren’, wat neer komt op het toevoegen aan een favorieten-lijst.

Dat je ook kan betalen voor Spotify vind ik een prima initiatief, aangezien er toch ergens geld voor al die nummers weggehaald moet worden en ik het zelf nooit een probleem heb gevonden cd’s te kopen, al was het dus maar om de artiest te ondersteunen. Bovendien geeft Spotify Premium nog de mogelijkheid de muziek Offline te bewaren, waardoor je bijvoorbeeld in de trein of op een plek zonder internet nog naar je favoriete playlists kan blijven luisteren. Verder wordt de kwaliteit van het geluid opgekrikt van een toch al niet verkeerde, zeker in vergelijking met Youtube en andere alternatieven als Grooveshark, 192kbs naar een geweldige 320kbs, hoger dan de gemiddelde MP3 in uw eigen bibliotheek.

Ik hoop dat Spotify in de toekomst een stuk groter in Nederland gaat worden, dankzij social networking en dankzij reclamecampagnes, zodat de bibliotheek nog veel groter kan worden en het hebben van muziek op je harde schijf eigenlijk niet meer nodig is!

Playlists

• 3 voor 12 Song van het Jaar 2009
• 3 voor 12 Luisterpaal
• A Campingflight to Lowlands 2010
• Sziget 2010
• Awakenings Festival 2010
• Rolling Stone 500 Best Songs of All-Time
• Top Notch label (HipHop)

Screenshots

Naar aanleiding van de vraag van Wietse Veenstra, namens zijn bedrijf ShapeLess, of ik enkele van zijn functionele schetsen kon vertalen naar een bestaande huisstijl, heb ik een aantal van die schetsen onder handen genomen.

De indeling van de schermen stond dus grotendeels al vast, waardoor ik mij compleet kon focussen op het omzetten naar de huisstijl, die ook al grotendeels vaststond. Omdat het in dit geval alleen wel back-end betrof, had ik gelukkig wel aardig wat vrijheid om mijn eigen stijl toe te passen. Het was vooral de bedoeling om het lettertype (Georgia Italic) en de kleurstelling (Grijs/Rood-Oranje) terug te laten komen.

Vandaag ga ik wat vertellen over de site die ik heb gebouwd voor het bedrijf FiyMyMobile. Dit is een bedrijf in Australie, dat wordt gerund door een vriend van Daniël (mijn stagebegeleider), namelijk Willem-Jan van Daalen.

Omdat ik soms nogal wat problemen had met het ‘snel werken’ en dus snel producten afleveren, hebben we van te voren samen besloten dat dit een korte opdracht zou worden. Dit hield in dat ik de opdracht binnen enkele dagen zou gaan voltooien.

Ik had voor mezelf zo’n 3 dagen bedacht: Dag 1: Het ontwerpen van de complete website inclusief huisstijl en logo. Dag 2: Het omzetten van dit ontwerp naar HTML/CSS. Dag 3: Alles omzetten naar een CMS, zodat Willem-Jan alles gemakkelijk aan kan passen.

Nu je een idee hebt van mijn planning, laten we gaan kijken hoe dat heeft uitgepakt! Ik ben op een donderdag begonnen met het complete proces, nadat ik van Willem-Jan in een email de opdrachtomschrijving had ontvangen. Omdat ik nog niet precies een idee had wat ik met het algehele design van de website wilde gaan doen, besloot ik om met het logo te beginnen.

Zoals te zien, heb ik ook meteen een kleurstelling bepaald, zodat deze direct naar de website doorgevoerd kon worden. Grijs omdat het rustig is, wit omdat het toch een nette website diende te worden en blauw om aan te geven dat het bedrijf te vertrouwen is.

Na goedkeuring van Willem-Jan ben ik toen bezig gegaan met het website ontwerp, waarvoor ik goed gekeken heb naar de (mogelijke) concurrenten op de Australische markt. Ik had eerlijk gezegd ook geen idee of er verschillen zouden zijn tussen de Nederlandse en Australische webdesign-markt. Gelukkig bleek dit nogal mee te vallen, bij de concurrenten viel vooral het volgende op:

• telefoonnummer groot op de pagina
• veel, grote afbeeldingen
• direct de mogelijkheid om je zaken te regelen
• simpel, niet te uitbundig design

Met deze zaken in mijn achterhoofd ben ik aan de slag gegaan. Ik ben met een aantal ontwerpen achter elkaar bij Willem-Jan gekomen en na een paar revisies, waarvan hieronder een aantal te zien zijn met als laatste het eindresultaat zoals dat nu online staat:

 

Dit was gelukkig nog aan het einde van de eerste dag, waardoor ik de volgende dag kon beginnen met omzetten! Ik ben echter niet meteen begonnen met omzetten, omdat ik verwachtte hier niet de hele dag aan bezig zou hoeven. Ik heb dus eerst nog een aantal aanpassingen aan het ontwerp gemaakt, waarna ik toch echt met omzetten kon beginnen!

Nou is dat omzetten zelf niet zo bijzonder, dus ik zal het hier alleen hebben over de problemen waar ik tegen aanliep: Het ontwerp was in feite prima geschikt om om te zetten en, na een paar aanpassingen, werkten zelfs Internet Explorer 7 & 8 vlekkeloos mee; een hele geruststelling. Het valt me op dat dit de laatste tijd bij mij ook steeds beter gaat. Ik hoef bijna niks meer in een apart IE.css bestand te plaatsen, puur omdat die browsers weer lopen te prutsen.

Ik denk dat dit deels komt doordat ik beter (netter) ben gaan programmeren en gewoon logischer dingen ben gaan stylen ook. Aan het einde van dag 2 werkte alles in ieder geval vlekkeloos en alles volgens de HTML/CSS regels.

Op dag 3 werd het dan toch tijd om alles om te zetten naar een CMS, zodat het gemakkelijker zou zijn voor Willem-Jan de content naar eigen wens aan te kunnen passen. Ik heb WordPress gekozen voor de CMS, om een aantal redenen. Het is ten eerste zeer gemakkelijk aan te passen en ten tweede ben ik er beter mee bekend dan met wat voor CMS dan ook.

Het omzetten verliep in het begin zeer voorspoedig, waardoor de ‘frontpage’ redelijk gauw in WP overgezet was. Toen kon ik beginnen met andere pagina’s, waarvan ik tot op dat moment nog niet echt bedacht had hoe ze er uit zoude komen te zien. Achteraf niet erg handig natuurlijk, maar het bood een interessante impuls en zorgde ervoor dat ik er meteen praktisch over na kon denken.

Kort gezegd, ondanks dat ik een aantal problemen tegenkwam waarbij content niet helemaal goed naar voren kwam en ik dat nog even moest aanpassen en WordPress dat nog wel eens de neiging heeft aan je code te zitten, viel het allemaal best mee!

In de dagen hierna heb ik dagelijks nog een uurtje besteed aan het perfectioneren van het ontwerp en het optimaliseren van de website voor de tragere verbindingen van Australia, maar hierover later meer!

Conclusie: Dit was een zeer leerzaam project, omdat ik helemaal zelfstandig bezig kon en dus zelf alle verantwoordelijkheid kreeg. Het heeft me een aantal lessen geleerd, waardoor ik in het vervolg sneller en efficienter kan werken!

NB: Om FixMyMobile live te zien, ga naar FixMyMobile.com.au

Deze eerste blogpost zal vooral in het teken staan van wat ik allemaal heb gedaan tijdens de eerste helft van mijn stage. Ik heb namelijk al een aantal projecten hier kunnen doorlopen en wil graag laten zien wat dat allemaal heeft opgeleverd totnutoe.

Stagebedrijf

Ik loop momenteel stage bij het bedrijf 24hosted, een klein internetbedrijfje, gebaseerd in Groningen. De eigenaar, Daniel Drenth, heeft tevens de rol van Stagebegeleider op zich genomen en, ja je raadt het al, begeleid mij tijdens mijn stageperiode.

24hosted is in eerste instantie een hostingbedrijf, maar houdt zich bijvoorbeeld ook bezig met mobiele telefonie op de webshop Belzaak. Dit is een van de grootste online telecomwinkels van Nederland en ik moet zeggen; het is een behoorlijk grote site, vooral aan de achterkant met alle databases en extra ontworpen systemen die er allemaal draaien.

Spamvrijwerken.nl

Omdat 24hosted een bedrijf is waar groei in zit, is Daniël op zoek gegaan naar mogelijkheden en kansen waarmee 24hosted zich kan onderscheiden en verder specialiseren binnen de markt. Een spamfilter is er daar een van. Spam is namelijk, zoals jullie ongetwijfeld weten, een van de meest irritante fenomenen van het internet en vooral bedrijven die hun e-mailadres op hun site hebben staan, hebben er ontzettend veel last van en dat kost natuurlijk op jaarbasis handen vol met geld.

Toen Daniël na een periode van goed zoeken een spamfilter tegenkwam, is er besloten dat wij deze op onze servers gaan draaien en verkopen aan nieuwe en bestaande klanten. Dit zou natuurlijk via de bestaande site van 24hosted kunnen plaatsvinden, maar omdat dit zo’n specifieke dienst was is er besloten dit spamfilter onder een aparte naam en een losstaande site te draaien: Spamvrijwerken.nl

Omdat dit project zich vrij snel aandiende nadat ik hier was begonnen was het een perfecte manier om te voelen hoe het is om zelf grotendeels een project te runnen. Ik kreeg hierbij ontzettend veel vrijheid, zodat ik lekker mijn gang kon gaan. Het was in feite de bedoeling dat ik het volgende zou doen:

• Het creëren van een huisstijl inclusief logo en kleurenschema.
• Pagina-indeling ontwerpen en vormgeven met de huisstijl.
• Het ontwerp omzetten naar HTML.
• HTML weer omzetten op de CMS van 24hosted.

Ik ben dus begonnen met het ontwerp gedeelte en heb in eerste instantie het volgende logo opgeleverd met bijpassend kleurenschema.

In dit kleurenschema is gekozen voor een blauwe kleur als hoofdkleur, omdat dat vooral zakelijkheid en professionaliteit uitstraalt. De oranje kleur is toegevoegd als contrastkleur. Dit is, na meerdere versies het ontwerp geworden van de hoofdpagina:

1. Het logo.
2. Menu, opgebouwd uit 1 sprite.
3. Een roterende afbeelding, die verandert op het moment dat een pagina wordt ingeladen.
4. Actieblok, met duidelijke teksten en knop.
5. Korte uitleg van de werking.
6. Opsomming van de Unique Selling Points

Voor meer informatie hier over ik graag verwijzen naar de portfolio pagina over deze site, die binnenkort online zal komen te staan.

Hier laat ik het eerst bij, graag tot snel!