Piotr Tekien GAR1-B
Grafische Vormgeving Revisie portfoliostijl 3 december 2014
PIOTR TEKIEN – HKU GAME ART – GAR-1B
INHOUDSOPGAVE Inhoudsopgave
Revisie Portfoliostijl _____________________________________________________________________________________ 1
Inleiding ___________________________________________________________________________________________________________1
Vergelijking eigen site_____________________________________________________________________________________________1 www.swiftfreeze.com _____________________________________________________________________________________________1 studenthome.hku.nl/~piotr.tekien/ _____________________________________________________________________________2 Design punten _____________________________________________________________________________________________________2
Re design___________________________________________________________________________________________________________2 studenthome.hku.nl/~piotr.tekien/ _____________________________________________________________________________3 Re design V1 _______________________________________________________________________________________________________3 Re design V2 _______________________________________________________________________________________________________3 Waarom deze stijl? ________________________________________________________________________________________________4
Swiftfreeze.com Foto’s ____________________________________________________________________________________________1 studenthome.hku.nl/~piotr.tekien/ _____________________________________________________________________________3
FINAL RE DESIGN (V3) __________________________________________________________________________________ 6
Mindmap ___________________________________________________________________________________________________________6 Moodboard ________________________________________________________________________________________________________1
Prototype __________________________________________________________________________________________________________1 Conclusie & uitleg _________________________________________________________________________________________________1
REVISIE PORTFOLIOSTIJL Revisie Portfoliostijl INLEIDING Opdracht: • •
Hou je portfolio home pagina, intropagina kritisch tegen het licht. Op basis van de voorgaande lessen heb je nu genoeg munitie om te gaan kijken wat er niet direct communiceert.
Ik weet wat er fout is aan mijn site. Dit ligt niet aan het ontwerp, maar aan de doelgroep waar ik mijn site voor heb gemaakt. Natuurlijk zijn er punten die verbeterd kunnen worden, dit zijn dan punten die vaak mening gebonden zijn en dat is voor ieder persoon verschillend.
VERGELIJKING EIGEN SITE
Als ik mijn eigen site (www.swiftfreeze.com) vergelijk met de site die ik voor HKU heb gemaakt, dan zijn er inderdaad een aantal punten die anders zijn.
WWW.SWIFTFREEZE.COM
Mijn eigen site is nog zakelijk, dat wil ik voorlopig zo houden. Het werk komt in ieder geval sterk naar voren. Homepage • • • About
Op de homepage heb ik bijvoorbeeld een full screen slideshow. Onder de slideshow staat een korte informatieve introductie Onder de introductie staan mijn diensten, wat ik kan bieden aan iemand.
•
Portfolio • Contact
•
Page 1
Op de About pagina (My Passion) vertel ik over mijn passie en wat ik heb gedaan de afgelopen jaren. Verder vertel ik wat mijn vaardigheden zijn en staat mijn CV onderaan de pagina. Op de Portfolio pagina zijn er 3 categorieë n: Games, 3D & Photoshop.
Op de contact pagina staat een map van google en een marker waar ik woon in Hilversum inclusief een contactformulier zoals op de site van HKU.
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL STUDENTHOME.HKU.NL/~PIOTR.TEKIEN/ About • • Log •
HKU •
Portfolio •
Contact •
Op de about pagina heb ik een container die opgedeeld is in 3 blokken: een foto van mij, mijn studierichting en mijn favoriete game. Daar onder staat een verhaal over mijn passie, die ook te vinden is op mijn eigen website. Het logboek was dus specifiek gericht op de site van HKU. In dit logboek vertel ik elke week hoe mijn ervaring was van die week op school. Dit kan van alles bevatten. Op de HKU pagina wordt natuurlijk al het huiswerk dat bedoeld is voor de docenten gezet. Deze functie heeft weinig nut op een site om jezelf als Artist te verkopen. Vandaar dat ik los van dit mijn eigen site heb, Op mijn portfolio pagina is deze opgedeeld net als mijn eigen site. Hier staat het werk voorlopig in pdf’s. Op de contact pagina staat een simpel contactformulier die niet werkt omdat de school zijn server niet heeft aangezet.
DESIGN PUNTEN • • • •
Het design van mijn eigen site is natuurlijk anders dan die van de site die bedoeld is voor HKU. Op mijn portfolio site voor HKU was de bedoeling om alles simpel te houden en overzicht te creë ren voor de leraren om het werk te kunnen vinden die zij zoeken. Het design voor HKU moest er strak uitzien naar mijn mening en ik vind dat ik dat doel bereikt heb. Eventueel zou ik misschien een andere font kunnen gebruiken op mijn eigen site. Verder kan ik ook de site vormen naar hoe mijn eigen site opgebouwd is, maar persoonlijk vind ik dit onnodig omdat het nu alleen informatie bevat dat van belang is.
RE DESIGN
Ik heb toch geprobeerd een re-design te maken in combinatie met mijn eigen website. Het is nu een mix tussen HKU gericht en bedrijf gericht. Na de afgelopen les heb ik besloten om een 2e versie te maken van mijn re design. Dit keer los van alles.
Page 2
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL STUDENTHOME.HKU.NL/~PIOTR.TEKIEN/ RE DESIGN V1
Page 3
PIOTR TEKIEN – HKU GAME ART – GAR-1B
RE DESIGN V2
3 december 2014
REVISIE PORTFOLIOSTIJL WAAROM DEZE STIJL? Re design V1 In de 1e re design heb ik een combinatie gemaakt van mijn eigen website met die van HKU. Naar mijn persoonlijke mening werd dit te druk voor een homepagina. Aangezien ik een combinatie heb van de richtlijnen van HKU en mijn eigen site. Daarom heb ik een 2e versie gemaakt. Re design V2
In mijn 2e versie heb ik alle richtlijnen losgelaten en specifiek gericht voor de klant. Zoals in de les besproken werd heb ik mijn werk op de homepage naar voren laten springen door een grote slider aan de bovenkant te zetten. Verder onderaan de pagina is (nieuw/mooi) werk ingedeeld in 3 kolommen, wanneer er op de plaatjes word geklikt, komt er een lightbox met een vergrootte versie en aan de rechterkant informatie over het werk.
Ook dacht ik aan een “Step by step” button die laat zien hoe mijn workflow van die opdracht was op dat moment.
Verder heb ik een zoekfunctie rechtsboven geplaatst en snelle contactinformatie linksboven.
Page 4
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL SWIFTFREEZE.COM FOTO’S
Page 1
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL
Page 2
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL STUDENTHOME.HKU.NL/~PIOTR.TEKIEN/
Page 3
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL
Page 4
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
REVISIE PORTFOLIOSTIJL
Page 5
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
FINAL RE DESIGN (V3) FINAL RE DESIGN (V3) MINDMAP
Page 6
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
FINAL RE DESIGN (V3) MOODBOARD
Page 1
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
FINAL RE DESIGN (V3) PROTOTYPE
Page 1
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
FINAL RE DESIGN (V3)
CONCLUSIE & UITLEG In mijn 3e en laatste versie heb ik de feedback van de feedback les opgenomen en verwerkt in mijn laatste ontwerp. In dit ontwerp heb ik besloten om een combinatie te doen van 4 dingen:
Page 1
• • • •
Mijn structuur & orde in het leven die ik in de les heb uitgelegd Het gebruik van mijn skills waar ik goed in ben (3D) Het gebruik van een website (showcase) Een HUD die activeert op de middelmuis click van de muis (zoals in crysis om sneller te navigeren – zie voorbeeld)
Als eerste ben ik begonnen met een mindmap om neer te zetten wat ik precies zoek om mijzelf uniek te stellen boven anderen en welke boodschap ik wil overbrengen naar mijn publiek. Deze mindmap heb ik aangehouden tijdens het ontwerpen van mijn 3e design. Hierbij heb ik een moodboard gemaakt om de sfeer te creë ren welke richting het op gaat.
Aan de bovenkant van mijn website is zoals gewoonlijk, de navigatiebalk, deze hoort mee te kleuren afhankelijk van hoe laat het is op het moment dat de bezoeker mijn pagina bekijkt. Verder staat onder de navigatiebalk waar je je op het moment begeeft. De gebruiker kan dan een stap van 1 of 2 naar achteren gemakkelijk springen. Tijdens het bekijken van het portfolio werk kan de gebruiker de middelmuisknop ingedrukt houden om informatie te krijgen over het portfolio item (compact = less is more).
Tijdens het bezoeken van mijn portfolio wordt de gebruiker geleid door middel van korte 3D animaties, waarbij het thema uitfade en infade naar een nieuw thema die af hangt van het type portfolio item.
Het clicken van de middelmuisknop zal dan werken op basis van een lightbox systeem die automatisch opent op hover van een subcategorie als “PROCES” en open blijft nadat je de middelmuisknop los laat.
Verder kan de gebruiker naar beneden scrollen om naar het volgende portfolio item te gaan in plaats van terug te gaan naar het overzicht van alles.
PIOTR TEKIEN – HKU GAME ART – GAR-1B
3 december 2014
