Verslag Pencil, Photoshop & InDesign Naam: Rob Dekker Studentnummer: 11020067 Vak: MMIO Datum: 07-02-2016
Pencil Bij het ontwerpen van drie verschillende voorstellen voor mijn portfoliosite heb ik gebruik gemaakt van het programma Pencil. In de voorstellen heb ik de lay-out en de informatiestructuur voor mijn website uitgewerkt. Er is gebruik gemaakt van een grid om de positionering van verschillende onderdelen te optimaliseren en zo de lay-out van de website overzichtelijk te houden. Ik heb vooral Sketch-onderdelen gebruikt om aan te geven dat het ontwerp een voorstel is, wat later nog aangepast kan worden. In de navigatiebalk van de voorstellen komen drie verschillende links: Home, Portfolio en About me. Bij Portfolio kun je vervolgens onderscheid maken of je wilt kijken naar de Deliverables of Dump. Afbeelding 1 Afbeelding 1 is het eerste wireframe. Ik heb ervoor gekozen om de pagina, waarop de content van de website wordt weergegeven, compact te houden om het gebruiksgemak voor de gebruiker te vergroten. Er wordt onderscheid gemaakt tussen de content en de header door beide onderdelen een aparte kleur te geven. In de afbeelding is dit aangegeven door een donkere en een lichte kleur grijs, omdat de kleuren nog vastgesteld moeten worden. In de header komt een logo of een afbeelding van de auteur van de website. Bovenstaande afbeelding is een representatie van de pagina waarop de opdrachten worden ingeleverd. Allereerst is er een blok waarin de titel van de opdracht wordt weergegeven en een link naar het PDFbestand. Onder dit blok staat een afbeelding van de opdracht en een (korte) beschrijving. De verschillende opdrachten worden gescheiden door een lijn, zodat het duidelijker is voor de gebruiker wanneer er sprake is van een nieuwe opdracht.
Afbeelding 2 Bovenstaande afbeelding is het tweede wireframe. Ik heb bij deze wireframe gekozen om de pagina over de gehele breedte te maken. Het is een simpel, maar ook een zeer duidelijk design. Bovenin de pagina staat de navigatiebalk en deze blijft altijd zichtbaar op het scherm, ook wanneer er bijvoorbeeld naar beneden wordt gescrolld, dit vergroot het gebruiksgemak. De navigatiebalk is horizontaal en links in de navigatiebalk staat het logo van de website. Ook bovenstaande afbeelding is een representatie van de pagina waarop de opdrachten worden ingeleverd. Er wordt door middel van een lijn onderscheid gemaakt tussen de verschillende opdrachten. Er wordt een afbeelding en een beschrijving van de opdracht weergegeven op deze pagina. Zowel de afbeelding als de beschrijving worden relatief groot weergegeven waardoor de site overzichtelijk is. In de beschrijving staat de naam van de opdracht en ook een link naar een PDF-bestand.
Afbeelding 3 Afbeelding 3 laat het derde wireframe zien. In dit ontwerp staat zowel een horizontale- als een verticale navigatiebalk. De horizontale navigatiebalk wordt altijd weergegeven en de verticale navigatiebalk staat enkel op de Portfolio pagina van de site. In de verticale navigatiebalk staan links van alle opdrachten die zijn gemaakt. Rechts van deze balk staan afbeeldingen en beschrijvingen van de opdrachten. Deze opdrachten worden gescheiden door een lijn. In de header staat een logo of afbeelding van de auteur. Ook staan hier de knoppen die verwijzen naar de andere pagina s. Onderaan de pagina staat een footer, waarin enkele informatie gegeven staat. Photoshop Het eerste wireframe in Pencil (afbeelding 1) is gekozen en dit ontwerp is dan ook verder uitgewerkt in Photoshop. Het ontwerp met een header en content die compact en centraal staan weergegeven op de pagina geeft een groot gebruiksgemak en een mooi design. In de header staat de naam en een afbeelding van de auteur waardoor het al snel duidelijk is wie de maker van de portfoliosite is. Het is voordeliger dat de navigatiebalk compacter is dan in de andere wireframes, want er zijn maar drie verschillende links (Home, Portfolio en About me). In dit wireframe zijn de opdrachten duidelijker van elkaar te onderscheiden, doordat na elke opdracht een lijn staat volgd door een balk staat met de naam van de volgende opdracht. Bij het plaatsen van de text- en shape layers en afbeeldingen is gebruik gemaakt van een grid, waardoor het design aantrekkelijker wordt gemaakt.
Afbeelding 4 Bovenstaande afbeelding is het uitgewerkte gekozen voorstel gemaakt in Photoshop. Allereerst heb ik een afbeelding toegevoegd die ik heb ingesteld als achtergrond en vervolgens heb vergrendeld. Door de afbeelding te vergrendelen kan het niet zomaar worden aangepast. Vervolgens heb ik de header en de content pagina ontworpen met behulp van shape layers. In de header staat een afbeelding van de auteur van de website. Deze afbeeldingen zijn omgezet in slimme objecten, waardoor de afbeeldingen op een non-destructieve manier konden worden vergroot en verkleind. Ook is er een aanpassingslaag toegepast, waardoor ik de kleuren van de afbeeldingen kon wijzigen zonder de originele pixelwaarden aan te passen. Er zijn ook andere aanpassingen gedaan aan de afbeelding, namelijk de helderheid, het contrast en de verzadiging. Deze beeldbewerkingen zorgen voor het optimaliseren van het fotografisch beeld. De navigatiebalk is gemaakt met text- en shape layers. Er is een laageffect toegepast op deze balk genaamd Schuine kant en relief, waardoor de balk een diepte krijgt. De header heeft het effect Slagschaduw waardoor het lijkt alsof de header boven de content ligt. De content pagina heeft een Patroonbedekking wat een leuk effect geeft aan de shape layer. Op de content pagina staat een shape layer, met een Schuine kant en relief, voor de titel van de opdracht (plus link naar een PDF) en daaronder een shape layer met een text layer voor de beschrijving van de opdracht of afbeelding. De link naar het PDF-bestand is rood gekleurd, zodat het meer opvalt tussen alle andere content op de pagina. Links van de beschrijving staat een afbeelding van de opdracht.
InDesign Bij het maken van het verslag heb ik gebruik gemaakt van paragraph styles (afbeelding 6) en character styles (afbeelding 5). Ik heb een character style gemaakt voor de tekst onder een afbeelding, waardoor ieder bijschrift op die manier dezelfde opmaak krijgt. Ook heb ik op dezelfde manier voor de subtitles een character style gemaakt. Bij de paragraph style heb ik iedere eerste alinea onder een subtitle laten beginnen met een grotere letter en de daaropvolgende alinea s hebben een inspringing van 10 mm. Er is ook gebruik gemaakt van baseline grids, waardoor de regelafstand constant blijft. Afbeelding 5 Afbeelding 6