Project: Ik Ben Iris Niet

ikbenirisniet-achterdeschermen

Weet je wat leuk is? Een blogger die contact opneemt nadat meerdere mensen Deliciae Design op Twitter hadden aangeraden en dat je diezelfde blogger al enige jaren volgt omdat ze zo geweldig leuk schrijft.

Iris zocht een webdesigner die een nieuw design kon ontwerpen, inclusief logo met de beroemde Bunny Von D en om haar geweldige recepten in een mooi jasje te steken met de mogelijkheid tot het filteren ervan. Dan ben je bij mij aan het juiste adres. Ik was super blij dat Iris contact opnam nadat ik alle Twitter berichtjes had gelezen van mensen die mij aanraden (bedankt daarvoor!). Ik zat echt te stuiteren op mijn stoel, eerlijk waar!

Toen ik haar eerste mailtje ook binnen kreeg, wilde ik het project zó graag aannemen. Wat zij voor ogen had sloot perfect aan met mijn kwaliteiten en ik wist zeker dat het een enorm leuk en leerzaam project zou worden. En ik kan je alvast vertellen – dat was het zeker!

IkBenIrisNiet

Het logo ontwerp

Het logo is het belangrijkste onderdeel van een website. Een logo bepaald jouw merkbeeld en onderscheid je van de overige bloggers. Iris wilde heel graag haar lieve Bunny Von D laten terugkomen in het logo en deze heb ik laten tekenen (en uiteindelijk in waterverf laten verwerken) door een vriendinnetje van mij. Ik heb gekozen om dit uit te besteden omdat ik wist dat Jessie dit vele malen beter kon.

Alleen het probleem was, Jessie woont in Amerika en het is dan vrij lastig om een begin te maken aan een logo wanneer je niet precies weet hoe het hoofdelement eruit komt te zien. Je wilt dat het logo natuurlijk één geheel vormt, dus het is belangrijk om de uiteindelijke stijl te weten zodat je de andere elementen op kan aanpassen.

In het begin ging dit dus helemaal mis! Ik had moeite met het inbeelden van Bunny Von D – want de illustratie had ik nog niet – en had een aantal logo’s ontworpen die totaal niet aansloten bij zowel Iris als bij de illustratie (zo bleek achteraf). De reden dat ik toch begonnen was met het ontwerpen van logo’s, kwam omdat ik de deadline niet wilde uitstellen. Foutje van mij want je hoeft niet alles tegelijk te doen. Ik had moeten wachten op de illustratie en vandaar uit verder moeten werken. Dat is beter voor jezelf (want je bent geen onnodig werk aan het doen) en beter voor de klant omdat deze kan kiezen uit een totaalplaatje. Nou was Iris een hele leuke en lieve klant en vond ze dit allemaal niet zo erg, vooral niet toen ik aangaf dat er een weekje vertraging tussen zou zitten. En daar was ik op dat moment (en nog steeds) heel blij mee. En zo zie je maar – met ieder project leer je weer wat bij.

De eerste logo’s die ik opleverde waren dus niet in de stijl dat Iris zocht. Toch wil ik ze delen want zo krijg je een beeld van een gehele proces en zie je ook dat het weleens mis kan gaan. Ik zie vaak op andere blogs voorbij komen dat het allemaal perfect gaat, maar dat is in werkelijkheid niet altijd zo. Misschien ben ik ook wel een klein beetje te hard naar mijzelf toe, maar het was zeker een leermomentje om niet alles tegelijk te willen doen.

ikbenirisniet_conceptlogoV1

Iris gaf aan dat ze de titel graag aan één stuk wilde en met een waterverf effect. Jessie had het op dat moment erg druk dus het duurde wat langer eer dat ik de illustratie ontving. Dus ik had wederom wat basislogo’s gemaakt zonder Bunny Von D, maar daar zat er één tussen die Iris helemaal perfect vond!

ikbenirisniet_conceptlogoV2

Nog geen paar uur later ontving ik van Jessie het concept versie van Bunny Von D en heb ik deze gelijk verwerkt in twee logo’s. Het was even puzzelen om alles in één stijl te krijgen, maar uiteindelijk is het gelukt.

ikbenirisniet_conceptlogoV3
Ta-Da! Het uiteindelijke logo voor Ik Ben Iris Niet.

Iris koos voor logo nummer #2. Is ‘ie niet leuk geworden? Na het logo ben ik gelijk begonnen aan het blogdesign.

Het Design

Iris wilde dolgraag een vrolijk en kleurrijk design. Haar voorkeur ging uit naar een (oker)gele kleur en doordat ze gekozen had voor het gele waterverf logo, heb ik de kleur daaruit gehaald. De allereerste versie die ik opleverde als demo-site, was erg vrolijk en kleurrijk. De kleur geel kwam iets té vaak terug en dat paste niet bij Iris. Ik heb een aantal elementen daarom de kleur donkergrijs gegeven zodat je een mooi contrast krijgt. Zwart vond ik te hard en donkergrijs staat super mooi met deze kleur geel.

IkBenIrisNiet_website

De achtergrond heb ik vrij simpel gehouden. Ik heb een pagina van mijn waterverf boek ingescand en deze als achtergrond gebruikt, zodat het een mooi geheel vormt met het waterverf logo.

Iris heeft twee navigatiebalken – één bovenaan met een aantal algemene links en één onder het logo met daarin alle categorieën. Wanneer je scrollt zal deze navigatiebalk mee scrollen (en niet de balk die bovenaan staat). Heel leuk effect en ook handig zodat bezoekers niet terug naar boven hoeven te scrollen om een andere categorie te bekijken. Alhoewel dat met de scroll-to-top knop rechtsonder zo gepiept is. 😉 Onder ieder artikel is er de mogelijkheid om makkelijk en snel een artikel te delen naar Twitter, Facebook en Pinterest. Deze heb ik handmatig gecodeerd en er wordt geen gebruik gemaakt van een plugin. Ik hou van zulke elementen omdat het de browserervaring verhoogd – aan alles is gedacht en het is allemaal goed bereikbaar en te vinden.

De social media links in de zijbalk met directe weergave van het aantal volgers is een betaalde plugin SocialBox en om de footer wat te breken heeft Iris daar de mogelijkheid om 8 instagram foto’s te plaatsen. Hiervoor is er gebruik gemaakt van de plugin Instagram Slider Widget. Ik heb overigens wel de styling enigszins aangepast omdat met de laatste update van de plugin, het allemaal niet goed afgesteld stond.

IkBenIrisNiet_website2

Recepten Index

En dan nu het technische gedeelte van de website – de recepten index. Wist je dat jouw artikelen op basis van een standaard loop worden weergeven? En dat je in WordPress bepaalde templates aan kan maken die specifiek gericht zijn op een pagina, dus een template met de coderingen voor bijvoorbeeld een recepten index? In dat template heb ik een aparte WordPress loop gemaakt die Iris zelf kan aanpassen door middel van het aanvinken van vakjes (custom fields) binnen WordPress, zo kan zij gemakkelijk meerdere index pagina’s maken (dus niet specifiek alleen een Recepten Index) want de loop wordt ingesteld op basis van deze custom fields. Poeh, ik hoop dat het een beetje duidelijk is…

Ik heb dit zo gemaakt zodat het voor Iris makkelijk is om aan te passen – ze heeft geen kennis van PHP nodig om zelf de recepten index in te stellen.

De custom fields zijn aangemaakt door het gebruiken van de plugin Advanced Custom Fields (ik heb de PRO versie). Het aanmaken van custom fields is niet zo moeilijk, het in werking zetten is een ander verhaal en daar heb je aardig wat PHP kennis voor nodig. Ik zal er daarom niet te veel op in gaan, maar in totaal zijn het 8 custom fields die Iris moet invullen om de loop te bepalen.

recepten-index-acf

De filter heb ik door middel van een jQuery script (Filtrify) gemaakt. De filter pakt de gebruikte tags van alle recepten automatisch en zet deze om in het dropdown veld. Klik je op een tag dan verschijnen alle artikelen die gecategoriseerd zijn met die tag. Dit gaat met een heel leuk animatie CSS. Wanneer je overigens een jQuery script gebruikt om artikelen te laten weergegeven, dat werkt de normale paginanavigatie van WordPress niet. Je zal dan ook een jQuery script moeten toepassen om paginanummers onderaan een pagina te krijgen. En dat was wel zo handig want Iris heeft meer dan 150 recepten op haar blog staan! Voor de paginanummers gebruik ik het script jPages.

Het was even gepuzzel met alle coderingen (PHP en jQuery) maar ik mag mijzelf wel een schouderklopje geven want het werkt nu helemaal perfect. Ik vind de recepten index zo leuk geworden! En het leuke van dit alles, is dat wanneer Iris een recept schrijft waarbij ze (nieuwe) tags gebruikt, dan zal dit allemaal automatisch in de index én filter verschijnen. Iris hoeft dus niets meer te doen behalve het schrijven van lekkere recepten en ik kan je zeggen, dat doet ze goed!  😉

IkBenIrisNiet_website4

En dat was het! Het design staat sinds 20 juni online en Iris heeft al heel veel positieve reacties mogen ontvangen. Toen ik de comments las op haar blogpost waarbij ze het nieuwe design introduceerde, zat ik echt te glunderen achter de computer. Zo leuk om te lezen dat bezoekers een design mooi vinden maar ook helemaal vinden passen bij de blogger. Daar draait het bij mij juist om, dat een blogger een uniek design heeft dat zijn of haar persoonlijkheid reflecteert. Een blogger is een eigen merk: je hebt een eigen perspectief, stijl en manier van communiceren. Om je te onderscheiden van de massa en jouw merk te versterken, betrek je onder andere de persoonlijkheid van de blogger in alle elementen die terugkomen op zijn of haar blog. Een eigen huisstijl dus, waarvan de basis het blogdesign is. Dit is namelijk het eerste wat een bezoeker ziet wanneer zij op jouw blog komen en bepalen of ze willen blijven of niet. Je kent het gezegde wel “don’t judge a book by its cover” maar toch doet iedereen het – zo ook bij een blog(design).

In het geval bij Ik Ben Iris Niet vind ik dat bovenstaande zeer goed gelukt is! Al zeg ik het zelf 😉

Wil jij ook een uniek blogdesign?

Zoek jij ook een uniek en gepersonaliseerd WordPress design voor jouw blog? Wij werken samen aan een design dat jouw persoonlijkheid reflecteert en volledig past bij de content van jouw blog. Ik ben momenteel aan het inplannen voor augustus en het lijkt mij leuk om jouw project daaraan toe te voegen. Interesse? Bekijk mijn diensten en hopelijk zie ik jouw mailtje snel in mijn inbox.

Geef een reactie

16 reacties

  1. Jessica says:

    Tof om te zien hoe je tot stand bent gekomen tot dit design! Ik vind jouw stijltje ook echt bij Iris haar site passen, dus vind het ook erg leuk om tezien dat ze naast de mijne nog meerdere keren de suggestie kreeg om eens met jou te gaan praten! Verdien je ook. Erg mooi geworden weer 🙂

  2. Sas says:

    Ik vind hem echt heel tof geworden! leuk te lezen hoe alles achter de schermen is gegaan

  3. sammie says:

    Ja, Iris haar blog ziet er super gaaf uit, zo leuk ook dat logo! Via haar blog kwam ik op de jouwe terecht 🙂

  4. Iris says:

    Heel erg leuk om het hele proces vanuit jouw kant te lezen! Ik vond het geweldig om met je samen te werken, ik denk dat ik mij geen betere webdesigner had kunnen wensen. Je wist precies in beeld om te zetten wat ik graag wilde, ook al wist ik zelf nog helemaal niet goed wàt ik nu precies wilde 😉 Ik heb tot nu toe alleen nog maar positieve reacties op de nieuwe layout gehad en dat is zo leuk! Want stiekem is het best wel spannend om zo’n groot en belangrijk project uit handen te geven, maar je hebt het echt supergoed gedaan. En het was ook wel lekker om zelf geen geklungel met ingewikkelde codes te hebben, en dat alles meteen mooi en professioneel werd gedaan. Heel erg bedankt en ik wens je héél veel succes met Deliciae Design, ik ga je in ieder geval aan iedereen aanraden! 🙂

  5. Rosanne says:

    Wat leuk om te zien hoe een design voor een blog zo tot stand komt :). Ik wil over een tijdje ook een nieuw design op mijn blog, dus zal als het zover is zeker een mailtje sturen!

  6. Jaimie says:

    Zo leuk om te lezen hoe je het design hebt gemaakt. Toevallig keek ik gisteren op je website, ik zie ook zo veel mooie layouts voorbij komen van jou! Ik ben een poosje niet zo veel bezig geweest met mijn blog, maar nu ga ik weer vol op bezig. Als mijn blog weer veel bezoekers heeft klop ik bij jou op de deur 🙂

  7. Inge says:

    Echt super leuk om te lezen, Naomi. Voor mij ook nog eens leerzaam (als Interaction Designer, die zich waarschijnlijk meer met front-end bezig wil gaan houden). Het design ziet er erg leuk en fris uit en die recepten index; chapeau!

    • Dankjewel Inge! Wat leuk dat je Interaction Designer bent! Ik heb je portfolio even bekeken en ziet er goed uit. Succes met solliciteren (maar dat gaat wel goed komen denk ik zo!) 🙂

  8. Rosan says:

    Goede reclame voor meer vrouwen in de techniek!
    Het is echt heel mooi geworden en leuk dat ze jou heeft gekozen!