Verslag. Pencil, Photoshop, Indesign. Studentnummer: Multimedia- en Interactieontwerp

Maat: px

Weergave met pagina beginnen:

Download "Verslag. Pencil, Photoshop, Indesign. Studentnummer: Multimedia- en Interactieontwerp"

Tania Willems
7 jaren geleden
Aantal bezoeken:

1 Verslag Pencil, Photoshop, Indesign Naam: Kennet Botan Studentnummer: Vak: Multimedia- en Interactieontwerp Docent: Marije ten Brink Datum:

2 INLEIDING Voor het vak MMIO moest er een website worden ontworpen en uitgewerkt, dit moest met behulp van de programma s Pencil en Photoshop. Het proces van het ontwerpen en uitwerken is vervolgens in Indesign beschreven. In dit verslag staat waarom ik voor bepaalde wireframes heb gekozen en wat mijn uiteindelijke keuze is geworden. De gekozen wireframe heb ik vervolgens uitgewerkt in Photoshop en leg daarbij uit hoe ik het programma Photoshop heb gebruikt. Tot slot geef ik toelichting van de verschillende tekenstijlen die ik heb gebruikt met Indesign. PENCIL wireframe 1 In het eerste ontwerp is er gebruikt gemaakt van een groene banner. In deze banner staat links het logo van de website en onderaan staan links naar andere pagina s. Ik heb hiervoor gekozen zodat het voor de gebruiker duidelijk is op welke website hij zit en zich makkelijk kan navigeren met de links. Verder is er een content section in het midden van de pagina, dit stuk is grijs gekleurd zodat het goed afspat van de witte achtergrond. Het grijze middenstuk is niet over de hele breedte gezet, maar heeft aan beide kanten een padding van ongeveer 20%. Dit zorgt ervoor dat de gebruiker niet een tenniswedstrijd kijkt, maar juist rustig een site leest zonder al te veel moeite. In de content section zelf staat duidelijk al op de eerste regel wat voor site het is. Daaronder zal een korte bijschrijving staan over de site en vervolgens een voorbeeldopgave om de gebruiker echt een voorproevje van de soort opdrachten te geven. Ook is er nog gebruik gemaakt van een footer.

3 wireframe 2 In het tweede ontwerp is er gebruik gemaakt van een abstracte achtergrond van zuilengebouw. Dit geeft naar mijn mening meer flair aan de site. Daarnaast is er voor een andere kleurencombinatie gekozen en zijn de banner en footer transparant gemaakt zodat je de achtergrond kan blijven zien. Ook is de navigatiebalk gehighlight en moet deze van kleur veranderen als je er met je muis overheen hovert. Dit zorgt ervoor dat de gebruiker visueel goed ziet waar hij op drukt. De content in het midden komt overeen met de content die in wireframe 1 is beschreven.

4 wireframe 3 In het derde ontwerop is er gekozen voor een totaal andere ontwerp. In dit ontwep staat de achtergrond, die het hele scherm inneemt, centraal. In dit ontwerp heb ik voor een plantenachtergrond gekozen, maar dat maar een voorbeeld en kan ik voor elk ander achtergrond laten vervangen. Boven op de achtergrond staan grids. Zo is er een grid voor de titel, beknopte en uitgebreide informatie over mezelf, opdrachten, en footer. Dit ontwerp zorgt ervoor dat de gebruiker snel keuze Uiteindelijk is er gekozen voor ontwerp 2. Van de drie wireframes viel wireframe 3 als eerst als, omdat een navigatiebalk onbreekt waardoor de gebruiker snel het overzicht kan kwijtraken. Ook zag wireframe 3 er druk uit, waar de gebruiker op de homepage wel erg veel informatie in één keer krijgt. Daarna is wireframe 1 afgevallen, omdat er een achtergrond ontbrak Er zijn nog wel aanpassingen gemaakt aan het ontwerp van wireframe 2, zo is er gekozen voor een andere achtergrond. Ook is het grijze middengedeelte, wat ervoor zorgt dat de content wordt gehighlight, weggelaten.

5 PHOTOSHOP lagen In photoshop is er door middel van lagen wireframe 2 uitgewerkt. De eerste laag is de achtergrond, de tweede laag zijn de transparante banner en footer waardoor je de eerste laag nog kan zien, de derde laag is de navigatiebalk en tot slot bestaat de vierde laag uit content. De eerste drie lagen zijn shapelayers, terwijl de vierde laag een textlayer is. INDESIGN tekenstijlen Er is gebruik gemaakt van drie verschillende tekenstijlen, zo is er een hoofdkop, subkop en tekst. De hoofdkop maakt gebruik van kapitalen met een underline en een grootte van 18, de subkop maakt gebruik van kleinkapitalen met een grootte van 18 en de tekst gebruikt normale letters met een grootte van 14. Er is gekozen voor Verdana als lettertype, omdat het naar mijn mening erg fijn leest en erg nog zakelijk uitziet. alineastijl Er was ook nog een mogelijkheid om gebruik te maken van eigen gemaakte alineastijlen, maar ik heb er voor gekozen om bij de tekenstijlen de regelafstand op automatisch te zetten. Naar mijn mening zorgt dit nog steeds voor een prettige regelafstand.

Vergelijkbare documenten

Verslag Pencil, Photoshop & InDesign

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