Peter Duijzers
Portfolio leerjaar 1
Hallo! Mijn naam is Peter Duijzers. Ik ben geboren op 7 juli 1992, wat mij nu dus 21 maakt. Momenteel studeer ik Communication & Multimedia Design aan het Avans in Breda. Hier hoop ik beter te worden in de dingen die mij het meest interesseren, namelijk het bouwen en vormgeven van websites.
2
Inhoudsopgave Blok 1 - A Slice of Life Project I Vormgeving voor Print - Andere Pijlen Vormgeving voor Print - Typografie Verbeelden I Informatiearchitectuur Webtechnologie I Grafische Tools
6 8 10 12 14 16 18
Blok 2 - Medium is the Message Project II Verbeelden II Vormgeving voor Beeldscherm Webtools
22 24 26 28
Blok 3 - Depth of the Surface Project III 32 Blok 4 - Food for Thought Project IV Visuele Identiteit Animatie Tools Webtechnologie II User Interface Design
36 38 40 42 44
3
blok 1 a slice of life
5
Project I
Doel Icoon Omschrijving Het stuk Breda dat ik toegewezen kreeg bevatte een kapper. Na onderzoek kwam ik er achter dat dit vroeger een wapenmagazijn was. Mijn icoon gaat daarom over ‘vastzitten in je baan’. Gebruikt programma Illustrator
6
7
andere pijlen Doel Ontwerp nieuwe pijlen Omschrijving De bedoeling was dat ik twee nieuwe pijlen ontwierp. Een formele pijl en een fantasie pijl. Gebruikt programma Illustrator
8
Peter Duijzers
9
typo grafie Doel Lettertype Omschrijving Voor dit vak ontwikkelde ik lettertypes voor twee prominent aanwezige voorwerpen of plekken in mijn slice. Gebruikt programma N.v.t.
10
11
ver beelden I Doel Schetsen Omschrijving D.m.v. het maken van collages maakte ik verschillende schetsen. Hiermee maakte ik beelden met een eigen betekenis. Gebruikt programma N.v.t.
12
13
informatie archi tectuur Doel Infographic Omschrijving Deze opdracht bestond uit het maken van een infographic, gerelateerd aan mijn slice. Gebruikt programma N.v.t.
14
15
webtech nologie I Doel Website Omschrijving Voor dit vak ontwikkelde ik een website met drie pagina’s, welke elk een andere emotie uitstraalden. Gebruikt programma Dreamweaver
16
17
grafische tools Doel Magazine Omschrijving Voor Grafische Tools maakte in m.b.v. verschillende Adobe programma’s een magazine wat aan bepaalde grafische eisen moest voldoen. Gebruikte programma’s Illustrator, InDesign, Photoshop
18
PETER. 01 CMD Bootcamp Van blokkendoos tot Pacman Slice of Life Ieder z’n eigen stukje Breda
Peter Duijzers (2073260)
Grafische tools Fotobewerking in een handomdraai
OMGAAN MET GRAFISCHE TOOLS
19
blok 2 medium is the message
21
Project II
Doel Event & Website Omschrijving Organiseer voor een eigen gevonden probleem een event en verzin hier een crossmediale campagne bij.
the very first event
Gebruikte programma’s Dreamweaver, Photoshop, InDesign
sand e (umm r van do f lux et ozca or n – n eon p redn av ilion n remi x e ) ck dub dj h
effenaar - Eindhoven
broo ky
09-11-2014 the very first event www.CYOP.com
22
ouse
step
23
ver beelden II Doel Anatomie & Perspectief Omschrijving Voor Verbeelden II leerde ik hoe ik het menselijk lichaam teken en hoe ik teken vanuit verschillende perspectieven. Gebruikt programma N.v.t.
24
25
Home
vorm. voor beeldscherm
Historie
Technieken
Flexibele grids en afbeeldingen
Media Queries
Breakpoints
Mobile first
Obstakels
Bronnen
Responsive webdesign
Responsive webdesign Responsive webdesign is een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.[1]
Doel Website ontwerp Omschrijving Aan de hand van een zelf gekozen woord ontwikkelde ik een concept website.
Een voorbeeld van hoe verschillende elementen van een webpagina zich aanpassen aan de schermgrootte van verschillende apparaten zoals het beeldscherm van een desktopcomputer, een tablet-pc en een smartphone t Historie De term responsive webdesign is bedacht in 2010 door Ethan Marcotte op de weblog A List Apart. Marcotte merkte destijds op dat steeds meer bedrijven investeerden in een mobiele website om hun klanten ook mobiel een optimale ervaring te bieden. Maar door het groeiende aantal apparaten, met allen hun eigen resolutie en afmetingen, bleek één mobiele website geen optimale oplossing. In plaats van te ontwerpen in vaste afmetingen, een benadering die stamt uit het printtijdperk, merkte Marcotte op dat het veel praktischer was om te ontwerpen in percentages en andere relatieve eenheden.[1] Technieken Een responsive website past zichzelf aan aan de omgeving waarin hij getoond wordt met behulp van flexibele grids,[2] flexibele afbeeldingen[3] en CSS3 media queries.[4] Enkele van de door Marcotte bedachte technieken zijn: Flexibele grids en afbeeldingen De flexibele grids zorgen ervoor dat breedtes en hoogtes van elementen niet in pixels worden bepaald, maar in relatieve eenheden als precentages en ems. Elementen in een flexibele grid schalen altijd naar een percentage van het element waarin ze zich bevinden, of de afmetingen van het zichtbare gedeelte van de browser.[2] Flexibele afbeeldingen worden ook relatief geschaald, zodat ze nooit buiten hun proporties worden weergegeven.[3] Media Queries Media queries geven de webpagina een indicatie van de afmetingen van het apparaat waarop de website wordt geladen. Meestal wordt de breedte van het scherm als uitgangspunt genomen.[5] Ook kan de website rekening houden met de pixeldichtheid van een scherm,[6] [7] om bijvoorbeeld afbeeldingen op een hogere resolutie te laden. Voorbeeld:[8]
Gebruikte programma’s InDesign, Photoshop
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen
and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }
26
27
webtools
Doel Portfolio website Omschrijving Maak een portfolio website en vul deze met je werken van dit jaar tot nu toe. Gebruikt programma Core FTP
28
29
blok 3 depth of the surface
31
PROject III
Doel Commercial Omschrijving Maak een keuze uit drie kranten en ontwikkel hier een commercial voor die bij de doelgroep past. Gebruikt programma N.v.t.
De ideeĂŤn/storyboards zijn mede door mij gemaakt. De commercial zelf is door een groepslid in After Effects gemaakt.
32
33
blok 4 food for thought
PROject IV
Doel Interventie Omschrijving Doe onderzoek naar een probleem en organiseer een interventie om dit probleem op te lossen. Gebruikte programma’s Illustrator, InDesign
De ideeën/storyboards, mobiele app, logo’s etc. zijn mede door mij gemaakt. De commercial zelf is door een groepslid in After Effects gemaakt.
36
37
visuele identiteit Doel Beeldonderzoek Omschrijving Voor dit vak maakte ik willekeurige foto’s van dingen die met eten te maken hadden. Hier deed ik vervolgens onderzoek naar. Uiteindelijk kwam ik uit bij de hoeveelheid suiker in voedsel. Gebruikt programma N.v.t.
38
39
animatie tools Doel Animaties Omschrijving Aan de hand van verschillende tutorials maakte ik 4 korte animaties en een eindanimatie. Gebruikt programma After Effects
40
41
webtechno logie II Doel Javascript Omschrijving In dit vak maakte ik kennis met Javascript en wat je er allemaal mee kunt. Ik heb verschillende opdrachten gemaakt, zoals een klok en een ‘Name Game’. Gebruikt programma Core FTP
42
43
user inter face design
Osiris, één portaal voor al je resultaten Personalia
Begeleiders
Cursusnaam
Inschrijven
Docent
Weging
Uitschrijven
Resultat
Mutatiedatum
Voldoendes
Welkom, P.J.A.C. Duijzers
Doel Osiris herontwerp Omschrijving “Kies uit één van de die casussen en maak hier een herontwerp voor.” Wij kozen voor Osiris. Gebruikt programma InDesign
Datum
Cursus
Toets
26-03-2014
CUCM-MOTDESCMD1
Motion Design
14-04-2014
CUCM-FILMBLDCMD1
Film- en Beeldanalyse
10-04-2014
CUCM-INTVIEWCMD1
Interviewen
24-03-2014
MUCM-AVTOOLSCMD1
AV tools
31-03-2014
MUCM-MEDCONCCMD1
Mediaconcepting
26-03-2014
MUCM-CAMPONTCMD1
Campagneontwikkeling
24-01-2014
MUCM-USAB2CMD1
Usability 2
26-03-2014
MUCM-AVTECHCMD1
AV techniek
24-01-2014
CUCM-CREPS2CMD1
Creative Problem Solving 2
21-01-2014
MUCM-VGBEELDCMD1
Vormgeving voor beeldscherm
24-03-2014
CUCM-COMMCMD1
Communicatie
24-03-2014
CUCM-WEBTEC1CMD1
Webtechnologie
< Vorige 12
44
ten
Voortgang Onvoldoendes
123
Onderwijs
Uitloggen
Resultaten weergeven in kleur
Docent
Weging
Resultaat
Mutatiedatum
F Duerinck
33
V
23-05-2014
CMPR Huitenga
100
6,2
22-05-2014
DRS. PT Verbeek
100
5
22-05-2014
JHRA Meijers
100
5,8
22-05-2014
HHJCM van Roy
100
6,5
22-05-2014
JW Leentfaar
100
7,8
13-05-2014
DRS. PT Verbeek
40
4,6
09-05-2014
F Duerinck
100
6,4
09-05-2014
M de Ruiter
100
7,5
22-04-2014
MRE Leclerq
60
6
04-04-2014
HHJCM van Roy
40
6,4
01-04-2014
NRM Kuipers
50
8,0
28-03-2014
Volgende 12 >
45
In opdracht van Avans Hogeschool Breda Communication & Multimedia Design Gemaakt door Peter Duijzers Studentnummer 2073260 Juni 2014
48