Ontwerp Portfoliowebsite MMIO 2016

Transcriptie

1 Ontwerp Portfoliowebsite MMIO 2016 Marit Beerepoot februari 2016 Informatiekunde Universiteit van Amsterdam

2 Inleiding Voor deze opdracht was het de bedoeling dat er 3 verschillende voorstellen voor een portfoliosite werden gemaakt in Pencil. Hiervan heb ik de beste uitgewerkt in Photoshop. Vervolgens heb ik dit verslag gemaakt in Indesign. Pencil Om op een simpele manier verschillende ontwerpen te maken heb ik gebruik gemaakt van pencil. Ik heb vijf verschillende ontwerpen gemaakt in pencil. Ik zal ze een voor een bespreken en omschrijven waarom ik deze wel of niet heb gekozen om mee verder te werken. Ik heb gekozen om vijf ontwerpen te maken omdat ontwerp 1 & 2 en 4 & 5 niet heel veel van elkaar verschillen. Toen ik begon aan deze opdracht had ik echt geen idee welke kant ik op wilde met mijn portfolio site. Ik ben eigenlijk maar simpelweg begonnen met verschillende dingen te ontwerpen in pencil, in de hoop dat het wat werd. Door te werken met de grids die pencil aanbied ziet een ontwerp er snel goed uit. Het eerste wat ik bij elk design heb gedaan is gebruik maken van het window frame. Daarna heb ik vooral gebruik gemaakt van het text field, een grid en de image box. homepagina wil ik graag gelijk werk van mij laten zien, om de bezoeker gelijk een indruk te geven van wat ik kan. Er zijn veel witruimtes, waardoor het een rustig ontwerp is. Ik heb gekozen om deze niet te gebruiken omdat ik de site teveel witruimtes vond hebben en ik het niet handig vond om het menu aan de linkerkant te hebben. Ontwerp 2 Dit ontwerp lijkt op ontwerp 1, alleen heb ik gebruik gemaakt van een ander grid en het menu verplaatst. Bij dit ontwerp heb ik rijen van 4 afbeeldingen gemaakt om zo nog meer werk te kunnen laten zien. Er zijn weer veel witruimtes. Ik heb niet gekozen voor dit ontwerp omdat ik het geen rustgevend ontwerp vind. De rijen van vier afbeeldingen maken het beeld erg vol en in combinatie met de witruimtes vind ik het er niet rustgevend uitzien. Ontwerp 1 Bij dit ontwerp heb ik ervoor gekozen om aan de linkerkant een menu te maken. Naast het menu heb ik een grid gebruikt om rijen van 3 afbeeldingen te maken. Op deze Ontwerp 3 Bij dit ontwerp had ik het idee om met een kleur te gaan spelen en de rest van de site vrij wit te houden. Op deze homepage had

3 ik niet het idee om mijn werk te laten zien, maar om knoppen te maken om door te klikken naar de opdrachten. Wat ik mooi vind aan dit design is dat het een rustig design is. Wat ik onhandig vind aan dit design is dat het er niet spectaculair uitziet en mensen daardoor snel hun interesse in mijn site kunnen kwijtraken. Doordat het er niet heel spectaculair uitziet en ik het niet handig vind dat ik niet gelijk werk kan laten zien heb ik niet gekozen voor dit ontwerp. heb uiteindelijk toch gekozen om design 5 te gebruiken. Ontwerp 4 Ik ben zelf altijd erg onder de indruk van grafische designs, waar meteen veel te zien is. Ik kwam er al snel achter dat ik hierdoor wilde werken met ontwerp 4. Op deze homepage wil ik linken naar mijn opdrachten en daarmee ook gelijk stukjes uit mijn werk laten zien op de homepage, door middel van afbeeldingen. Al vrij snel zag ik veel mogelijkheden met dit design. Om de site interessanter te maken leek het mij leuk om een grijze overlay over de afbeeldingen te plaatsen, die verdwijnt als je over de afbeelding heen hovert. Daarnaast leek het mij leuk om de tekst ook te laten veranderen als je overheen hovert van de week en de opdracht naar Explore of Lees meer. Aangezien wij alleen gebruik mogen maken van HTML en CSS leken mij dit leuke opties om mijn site wat spectaculairder te maken. Door gebruik te maken van vlakken met verschillende groottes vind ik dat de site er nog iets interessanter uit kwam te zien. Ik vind het mooi dat er niet al te veel witruimtes zijn. Ik ben begonnen met dit design uit te werken in Photoshop, maar Ontwerp 5 Toen ik ontwerp 4 ging uitwerken in photoshop vond ik al snel dat er toch nog steeds te veel witruimtes waren in dit ontwerp, terwijl dit er al minder waren dan in de andere designs. Ik besloot weer terug te gaan naar pencil en nog wat andere designs te maken omdat ik toch niet tevreden was met design 4. De combinatie van de grootte van de vlakken en de witruimtes vond ik namelijk echt niet kloppen. Ik besloot dat het misschien een leuk idee was om geen witruimtes te gebruiken op de homepage en maakte design 5. Dit design is dus bijna gelijk aan design 4, alleen zijn de witruimtes weg. Waarom heb ik voor design 5 gekozen? Ik heb, zoals hiervoor beschreven, tijdens het ontwerpen in pencil veel met witruimtes gespeeld, maar kwam erachter dat ik het persoonlijk mooier vind als deze minimaal zijn of niet aanwezig zijn. Hierdoor kwam ik dus op dit vrij grafische design, wat ik er toch nog rustgevend uit vind zien. Naast dat ik een grafisch ontwerp mooi vind, heb ik tijdens het ontwerpen ook gelijk gedacht aan hoe ik een responsive webdesign kan maken. Aangezien steeds meer mensen websites bekijken op hun mobiel, leek het mij leuk mij om mij hier ook mee bezig te houden. Door het hele scherm te vullen en daarmee dus procenten en view-

4 width te gebruiken is het makkelijker om een responsive webdesign te maken. Dit vind ik een groot pluspunt aan dit design. Daarnaast zie ik in dit design ook veel mogelijkheden, zoals ik ookal eerder beschreef. Het idee is dus dat ik een grijze overlay over elke afbeelding plaats en deze verdwijnt wanneer je eroverheen hovert. Daarnaast heb ik het idee om de tekst ook aan te passen als je over afbeelding heen hovert, wat uitnodigt om de pagina te bekijken. Dit lijken mij leuke toevoegingen aan dit design. Zo maak ik dit simpele design toch een stuk interessanter. Uiteindelijk is de voornaamste reden dat ik voor dit ontwerp heb gekozen dat het een grote uitdaging is om hiermee aan de slag te gaan. Tijdens het vorige blok, bij het vak Webprogrammeren en Databases, hebben mijn groepje en ik tijdens een project namelijk al gewerkt met een grid( en daarmee dus ook veel witruimtes). Hierdoor leek het mij leuk om nu iets anders te doen, waar ik nog geen ervaring mee heb. Daarnaast was ik tijdens het project eindverantwoordelijk over de CSS, waardoor ik daar de vorige periode veel mee bezig geweest ben. Door nu te kiezen voor een iets moeilijker ontwerp, waarbij veel gebruik moet worden gemaakt van de hover functie en ik elke week interessante beelden wil uitkiezen voor op de homepage, heb ik toch een grotere uitdaging dan dat ik een standaard site zou maken met een standaard grid en veel witruimtes. Uitwerking met photoshop Het eerste wat ik deed in photoshop was een grid maken. Het standaard grid voldeed niet aan de eisen die ik stelde dus heb ik een grid gemaakt die het veld horizontaal en verticaal in tweeën verdeelde en die vlakken weer in vieren verdeelde. Omdat ik nog geen ervaring met photoshop had ben ik simpelweg begonnen met vierkanten maken met de Rectangle tool om de posities te bepalen. Daarna heb ik textlayers gebruikt om mijn naam en het menu bovenaan de pagina te plaatsen. Om deze op de goede plaats te krijgen kwam het grid goed van pas. Ik heb er bewust voor gekozen om

5 de achtergrond van het menu in een wit-/ grijstint te laten, om zo rust op de pagina te houden omdat het ontwerp al vrij druk is. Uiteindelijk heb ik gekozen om de achtergrond van de pagina #E0E0E0 te maken. Dit vond ik precies de goede verhouding tussen wit en grijs. Dit is daarnaast ook een kleur die veel gebruikt wordt bij Material design, wat later nog van pas kan komen als ik wil werken met een accent kleur. Hierna heb ik een afbeelding gehaald uit de eerste opdracht, de video-opdracht, en ben gaan spelen met de color overlay. Ik heb gebruik gemaakt van de kleur #0F0F0F voor de grijze overlay die ik over elke foto heen wil hebben en daarvan de Opacity aangepast tot ik er tevreden mee was. In het design dat ik heb gemaakt zit over bijna elke foto een grijze overlay, behalve over de afbeelding bij Week 2 Opdracht 1, zodat de kleur te zien is wanneer je over de afbeelding heen zou hoveren. De afbeeldingen waar de tekst week 1 in staan zijn afbeeldingen die ik ook daadwerkelijk wil gebruiken, de andere afbeeldingen heb ik gebruikt om een beter beeld te krijgen van de website wanneer elk vlak een afbeelding heeft. Hoe heb ik ervoor gezorgd dat ik non destructive editing gebruikte? Allereerst heb ik gebruikt gemaakt van aanpassingslagen om kleur- en toonwijzigingen op een afbeelding toe te passen, hierdoor heb ik niks aan de originele afbeelding veranderd. Daarnaast heb ik bijvoorbeeld van de collage bij week 1 opdracht 2 gebruik gemaakt van een smart-object om op een niet-destructieve wijze de perfecte grootte te vinden. Ook hier heb ik pas een filter gebruikt nadat ik er een smart-object van heb gemaakt, waardoor de originele afbeeldingen onaangeraakt blijven. Zoals op de afbeelding hieronder heb ik dus gebruik gemaakt van een tekst-layer, een layer met een smartobject en over de layer met de smartobject een color overlay. Ik heb ook uitsneden gemaakt door een gedeelte van de afbeelding te selecteren en de rest van de afbeelding te verbergen. Hierdoor verwijder ik geen deel van de afbeelding en kan er later een nieuwe uitsnede gemaakt worden. Slot In deze opdracht heb ik voor de eerste keer met pencil, photoshop en indesign gewerkt. Het was een opdracht waarin veel ruimte was voor eigen ingeving en je alles jezelf aan moest leren. Ik had bijvoorbeeld nog nooit gehoord van non destructive editing en had geen idee hoe je layers moest gebruiken. Hierdoor was dit een zeer leerzame opdracht waar ik veel tijd in heb gestoken.