webdesign - mc studentenwerk in een oorspronkelijk design of een variaties in de stijl van een site....

1

Corrie van der Kroef

Webdesign

2


Site-analyse Er zijn veel manieren waarop je een site kunt analyseren. We beperken ons hier tot de homepage.

In deze opdracht gaan we 2 manieren toepassen:

1 Analyse van de paginastructuur

2 Analyse van de sfeer / uitstraling

Paginastructuur

Met paginastructuur wordt bedoeld de elementen waaruit en de manier waarop de webpagina is

opgebouwd.

Elementen die je kunt tegenkomen

Logo Mag niet ontbreken. Staat vaak op de belangrijkste plaats links boven. Is meestal ook de homebutton. Eyecatcher The 5 Second Rule: 5 seconde de tijd om een bezoeker een reden te geven om niet weg te gaan. Bijvoorbeeld door antwoord te geven op een vraag, iets interessants aan te bieden, iets interessants te laten zien. Navigatie Kan in de vorm van iconen, tekstknoppen, rollovers of afbeeldingen. Steeds vaker met een (hidden) uitklapmenu waardoor de informatie al gecategoriseerd wordt. Voor mobiele devices wordt het hidden menu weergegeven met het hamburgericoontje. Zoekvenster Hulp bij (specifieke) navigatie. Welkomstekst Belangrijk als startpunt, versterkt de navigatie en wekt vertrouwen.

Social media Like- en sharebuttons maar ook Twitter-, Instagram-accounts, etc. rechtstreeks op een website. Er wordt gebruik gemaakt van knoppen in een oorspronkelijk design of een variaties in de stijl van een site. Call to action Zet een bezoeker aan om iets te doen. Bijvoorbeeld iets te kopen of iets te bekijken. De plaats van een call to action is boven de ‘fold’ (de vouwlijn vanaf waar je gaat scrollen). Widget Ruimte in kolommen voor social media, links, afbeeldingen, extra menuutjes, etc. De term widget wordt ook voor applicatiemenuutje gebruikt. Maar dat bedoelen we hier niet. Kolommen staan meestal links en rechts van een pagina maar kunnen ook in header en footer staan. Contactgegevens Liefst op iedere pagina. Staan daarom vaak in de footer.

3


Banner Meestal een JPEG o fGIF met standaard afmetingen. Door gebruik te maken van kleur en animaties wordt (vaak door een externe adverteerder) geprobeerd de aandacht van mensen te trekken. Kan ook als afleidend ervaren worden. Slider Kan een visueel overzicht te geven van de mogelijkheden binnen de website of van de producten en diensten die er geboden worden. Video Een embedded (ingesloten) video is een snelle

en aantrekkelijke manier om een verhaal te vertellen. Belangrijk voor SEO. Afbeelding Ter illustratie of verduidelijking en ook weer belangrijk voor de zoekmachines door te kiezen voor afbeeldingen die met een zoekwoord te maken hebben. Titel en tussenkopje Belangrijk als tags voor zoekwoorden en accent in informatie. Keurmerk – Review - Voordeel- of weggeefactie - Newsitem Zie voor uitleg de tekstkaders.

Building trust Bijvoorbeeld door het benoemen van de mogelijkheid om gratis te verzenden, of terug te sturen, door reviews, contactmogelijkheden maar ook door het plaatsen van keurmerken.

Leadership = sharing Marktleider is niet langer een geweldige positie bij een gerespecteerd bedrijf. Het betekent steeds vaker actief zijn in het delen van praktische ervaring met anderen. Het delen van praktische adviezen en kennis met anderen laat zien dat jij en je bedrijf weet waar je het over hebt. Delen gebeurt vaak door het weggeven van een whitepaper of ebook.

Keep it fresh Houd een site actueel bijvoorbeeld door het plaatsen van een newsitem of recente twee. Een site die recent geüpdate is suggereert ook up tot date te zijn met de nieuwste ontwikkelingen in de branche.

4


Layout De manier waarop de verschillende elementen geplaatst zijn.

Het is van belang dat er goed wordt omgegaan met de ruimte op het scherm. Over elke millimeter van

een resolutie moet nagedacht worden .

Dat betekent niet dat er geen witruimte in mag voorkomen.

Te veel informatie op één pagina kan ondervangen worden met linkjes naar andere pagina’s maar ook

met korte alinea’s en opsommingen. Aandachtspunten zijn: typografie, tekstgrootte, interlinie,

kleurgebruik, duidelijke knoppen voor conversie. Een website bekijkt men in F vorm van boven naar

beneden.In het Westen zijn we gewend van links naar rechts te lezen… en van boven

naar beneden. Hierdoor wordt door onze hersenen eigenlijk automatisch een prioriteit

gegeven aan de content bovenaan en links op een pagina. Dat is de reden, dat een menu

jaren lang links stond, maar inmiddels is men tot het inzicht gekomen, dat een menu

links blijvend de aandacht weghaalt van de belangrijkste content. De beste layout voor

de pagina op een goede website is een menu aan top, niets links en rechts uitsluitend

secundaire informatie. Tot wellicht over vijf jaar de inzichten opnieuw zijn aangepast.

F

5


Trends Extreme eenvoud / Flat design Bij flat design ontbreekt gesuggereerde diepte, het is – zoals de naam al doet vermoeden – plat. Effecten als schaduwen en highlights zijn uit den boze.

Dikke witte lijnen Er moet ergens een kader omheen of lijntje tussen. Krijtwit en tenminste zes pixels breed. Nadruk op het lettertype Handgeschreven fonts, mix & match lettertypes en grote aanwezige letters. Slogans zijn kort en zetten aan tot actie. Een onderscheid zal visueel gemaakt worden door grote dikke letters in combinatie met kleinere dunne letters. Transparante lagen Transparante lagen over een afbeelding of onder een tekst zodat de tekst goed leesbaar blijft en de foto niet volledig wordt verstoord. Zie medialink. Spookknoppen Geen schreeuwerige buttons. Door het gebruik van ghost buttons – oftewel spookknoppen – voorkom je dat de afbeelding wordt verstoord en verwijs je de bezoeker naar de juiste informatie. Raster lay-out Waar Pinterest mee begon, hebben webdesigners met websites in hun grid-achtige lay-outs overgenomen. Deze 'hokjes'lay-out stelt gebruikers in staat om elk item gemakkelijk te bekijken op een zeer gestructureerde en logische manier. Een mooi voorbeeld is de website van Lays, waar ook veel

gebruik gemaakt wordt van egale kleurvlakken en een opvallende lay-out in blokken.

http://medialink.sk/#/imagine

https://www.lays.nl/

6


Opdracht 1 Paginastructuur 1a Maak van 2 verschillende sites een screenshot van de homepage. 1b Maak van iedere pagina een wireframe. Benoem hierin de elementen die je tegenkomt. Een wireframe is een visuele manier om een paginastructuur weer te geven.

1c Beschrijf de layout van de verschillende homepages. Maak bij je beschrijving gebruik van de

begrippen: Flat design - Witruimte – Layout in Fvorm – Witte lijnen – Lettertype – Transparante lagen – Spookknoppen - Rasterlayout

7


Sfeer / uitstraling Sfeer en uitstraling spelen in op gevoel. Dit wil niet zeggen dat er niet concreet over nagedacht wordt. Een identiteit of huisstijl maakt een merk zichtbaar en concreet. Dat gebeurt door het publiek in contact te laten komen met uitingen die op elkaar zijn afgestemd zoals: het logo, visitekaartjes, websites, advertenties, bedrijfskleding, verpakkingen, etc. Een huisstijl is het uiterlijk van een organisatie. Met uiterlijk kun je laten zien wie of wat je bent => Identiteit! Zonder duidelijk gezicht weet niemand met wie hij zaken doet. Op de momenten dat de eigenaar / werknemer er zelf niet is om over het bedrijf te vertellen moet de huisstijl het even over kunnen nemen. Een website is een belangrijk communicatiemiddel waarop de huisstijl zichtbaar moet zijn. Voordat een ontwerper aan het werk gaat stelt een organisatie vast wat de gewenste identiteit en imago zijn. Wie is de doelgroep? Wat zijn hun interesses? Waar bevinden zij zich? Hoe moeten mensen de organisatie zien? Welke kernwaarden zijn daarin belangrijk? Kernwaarden zijn de belangrijkste waarden van een bedrijf of organisatie. Kernwaarden worden ook wel basiswaarden genoemd. De kernwaarden van een bedrijf zijn dus de punten waar de organisatie naar streeft.

Belangrijke huisstijlelementen 1 Logo en Pay-off 2 Typografie 3 Kleurenschema 4 Stijlelementen 5 Fotografie

Opdracht Sfeer en uitstraling 2a Maak van 2 verschillende sites een screenshot van de homepage. 2b Maak van iedere pagina een sfeerbeeld.

Onderdelen die daarin zeker aan bod moeten komen: Logo - Typografie - Kleuren – Stijlelementen – Fotografie

2c Geef per sfeerbeeld een beschrijving van de beoogde doelgroep en achterliggende

kernwaarden.

8


Doelgroep Deze moet zich uiteindelijk kunnen identificeren met de huisstijl en de huisstijl aantrekkelijk vinden.

- Op welke doelgroep richt je je? Wat is hun geslacht, leeftijd, burgerlijke staat, inkomen en opleidingsniveau? Dit geeft je een algemeen beeld, nog zonder gezicht.

- Wat is hun levensstijl? Word specifieker. Denk aan de groep die jij probeert te bereiken – wat zijn hun waarden, persoonlijkheid, idealen en hobby’s? Denk aan hun gedrag en gedachtenpatronen.

- Waar zijn je klanten? Locatie is belangrijk. Maar denk ook aan waar ze hun informatie vandaan halen en hun tijd doorbrengen. Reizen ze naar hun werk? Waar gaan ze heen voor ontspanning en op welke tijden?

Waar vind je deze informatie?Op de website van theater Kikker vind je bij Over ons – Achtergrond

- alinea 1: iets over de oprichters van het theater. - alinea 5: waar het theater zich op toespitst en waarin de doelgroep geïnteresseerd is. Ook staat

hier informatie over doelgroep en locatie. Op de website vind je de programmering. De inhoud van de verschillende voorstellingen geven je informatie over de interesses van de doelgroep! In het beleidsplan van theater Kikker vind je ook veel info over de doelgroep en de programmering (interesses van de doelgroep).

Opdracht 3 Doelgroep Maak een collage waarin de doelgroep zichtbaar wordt gemaakt. Verwerk op een creatieve manier in ieder geval de items:

- Opleidingsniveau - leeftijd - locatie

interessegebied Verwerk 4 extra items die te maken hebben met mogelijke interesses Van de doelgroep. Denk bijvoorbeeld aan:

- (social) mediagedrag - Abonnementen - Vakantiebestemming - Favo vrije tijds besteding

Aandachtspunten: Inhoud: Minimaal 8 verschillende items duidelijk gevisualiseerd. Vormgeving: Afgestemd op de doelgroep die in beeld wordt gebracht. Originaliteit, oorspronkelijkheid en eenheid.

Illu

stra

tie

hu

isst

ijl K

ante

el K

ind

ero

pva

ng

http://www.theaterkikker.nl/over-ons/meer-over-ons/achtergrond/

http://www.theaterkikker.nl/agenda/

http://anbi.nl/wp-content/uploads/stichting-theater-kikker/beleidsplan%202013-2016%20Theater%20Kikker.pdf

9


Iconen Steeds vaker wordt binnen (web)design gebruik gemaakt van iconen. Informatie wordt op deze manier gevisualiseerd. Hierdoor is het mogelijk op een snelle, duidelijke en vaak ook mooie manier te communiceren.

Voordelen van goede iconen

Het zijn goede ‘targets’: je kunt ze makkelijk aanraken op een touchscreen, maar ook met een muis. Ze besparen veel ruimte op het scherm(pje). Ze zijn in één oogopslag herkenbaar (of zouden dat moeten zijn). Ze zijn universeel, dus je hoeft ze niet te vertalen voor internationale gebruikers. Ze zijn meestal aantrekkelijk om naar te kijken en voegen echt iets toe aan het ontwerp van een pagina of interface. Ze vergroten de herkenbaarheid van een productgroep of merk als dezelfde iconen en stijl worden gebruikt op verschillende plekken.

De iconen waar het bij deze opdracht om gaat zijn:

Knop: Zoals home, contact, shop, producten, programma of agenda. Social media –button: Twitter, Facebook, LinkedIn, Instagram, etc. Avatar: Een plaatje dat als gebruikersafbeelding op het internet gehanteerd wordt. Favicon: Een klein icoontje voor een website dat vaak te zien is in de adres- of titelbalk.

10


Aandachtspunten Eigenheid en herkenbaarheid Door consequente toepassing van een bepaalde stijl ontstaat eigenheid en herkenbaarheid. In het voorbeeld uit de huisstijl van Rijksoverheid is gebruik gemaakt van een specifieke ‘keep’.

Gestileerd of geometrisch De vorm van een icoon kan wordt worden opgebouwd vanuit - een gestileerde waarneming (een realistisch beeld dat grafisch is gemaakt) - geometrische vormen (zoals een rechthoek en een cirkel)

Rond of rechthoekig De afgeronde hoeken geven de iconen een vriendelijk en toegankelijk karakter. Door een object dat

dichterbij staat een andere hoekradius te geven dan een object in de verte wordt op subtiele wijze

diepte gesuggereerd. Binnenvormen zijn meestal voorzien van rechte hoeken.

11


Begrijpelijkheid en samenstelling De begrijpelijkheid van het icoon gaat te allen tijde voor vorm. Het heeft de voorkeur een icoon op te bouwen vanuit één element. Maar soms kan het voor de begrijpelijkheid of context wenselijk zijn om een combinatie te maken van meerdere objecten of onderwerpen.

Tekstuele toevoeging Uiteraard is uitgangspunt dat iconen voor zich spreken en een tekstuele toevoeging overbodig is. Vaak blijkt de betekenis van iconen vanzelf uit de context waarbinnen deze toegepast worden. Soms is een tekstuele toevoeging onvermijdelijk, waar het gaat om organisatienamen bijvoorbeeld. Kleurgebruik De iconen worden opgezet in één kleurvariant (meestal zwart) en kunnen in elke kleur van het huisstijlkleurenpalet gebruikt worden. Er kan ook gebruik gemaakt worden van tinten, arcering en gradients. Let wel op voldoende contrastwaarde tussen de kleur van het icoon en de achtergrond kleur. Een geel icoon op een witte ondergrond bijvoorbeeld is 'slecht leesbaar'.

Diapositief Voor witte objecten is een alternatief icoon nodig voor diapositieve toepassing. Belangrijk is dat het icoon geen lijnicoon is maar opgebouwd uit vlakken en optisch dezelfde uitstraling en grootte heeft als de positieve versie ervan.

12


Opdracht 4 Iconen Maak een eigen iconenserie bestaande uit: 4a 1 avatar 4b 1 favicon 4c 2 buttons (home – contact –shop – producten – programma – etc) 4d 2 social media follow-buttons (Twitter – Facebook – LinkedIn – Instagram – etc)

Criteria

Eenheid

De iconen moeten gezamenlijk 1 serie vormen, in één stijl worden ontworpen. Dit betekent dat je

consequente keuzes moet maken voor gestileerd of geometrisch, rond of rechthoekig, arcering, gradiënt,

kleurgebruik, lijndikte, tekenstijl, etc.

Oorspronkelijkheid / originaliteit Probeer een specifiek eigen element te verwerken in je ontwerp wat je uiteraard ook weer consequent toepast. Duidelijkheid

Liefst vanuit 1 element en zonder tekstuele toevoeging moet duidelijk zijn wat met het icoon bedoeld

wordt. Voldoende contrast en een minimum aan details moeten ervoor zorgen dat het icoon in klein

formaat nog duidelijk is.

Kwaliteit

Een icoon van 2,5cm – 2,5cm met een resolutie van 300 dpi moet 100% haarscherp (niet vaag of pixelig)

zijn. Uiteraard heeft vector de voorkeur.

13


Banner

14


De inhoud Een banner is een reclame-uiting (met doorklik-mogelijkheid) op internet. Meestal een combinatie van

afbeeldingen en teksten. De banner kun je gebruiken om te adverteren voor bijvoorbeeld een product

of een evenement. Wat de inhoud is van je banner is afhankelijk van je doel. bereiken.

Een banner plaats je op een plaats waar de beoogde doelgroep actief is. Het plaatsten van banners op

externe sites is meestal niet gratis. Vergoedingen aan externe sites kunnen op een aantal manieren

plaatsvinden. De meest voorkomende zijn:

- Cost per Click: Kosten per klik op je banner

- Cost per Mille: Kosten voor 1000 vertoningen van je banner

- Cost per Sale: Kosten per sale die voortkomen uit een klik op je banner

Bannerformaten Er zijn een aantal verschillende maten waarin banners gemaakt worden om ze op verschillende

manieren te kunnen inzetten. Voor 1 bannerset gebruik je uiteraard dezelfde stijl. De teksten en

afbeeldingen krijgen een andere maat en andere positie ten opzichte van elkaar.

In de infographic van Adcrowd, de meest voorkomende bannerformaten. Bannersformaten.nl geeft een

overzicht van formaten en de verschillende posities op een site.

http://www.bannersformaten.nl/

15


Opdracht 5 Banners

Maak 2 verschillende banners: Eén met de nadruk op het product en de prijs. Eén met de nadruk op het product en de sfeer. Gebruik voor beide banners dezelfde ingrediënten: een product en een persoon. Kies vervolgens voor één van de twee en maak daarvan nog een banner in een afwijkend formaat.

Selecteren van een product

Opdracht 5a Maak een selectie van een product uit een foto met een drukke achtergrond.

Zoek een foto met een product. Bijvoorbeeld een flesje parfum, een koptelefoon, een duikbril of een handtas. Je bent vrij in de keuze van je onderwerp maar moet je wel houden aan de volgende criteria: -De foto moet groter dan 2 MB zijn. -De foto moet copyright-free zijn. -Het product moet opgaan in een drukke achtergrond. Selectie met het toverstafje of snelle selectie mogen niet mogelijk zijn.

Maak een selectie van het product met behulp van het Pengereedschap. Dit is een zeer nauwkeurig selectiegereedschap. Omdat je met de Pen een pad om het object maakt zullen er geen pixels ontstaan maar strakke lijnen. Het is echter geen snelle manier van selecteren en je moet er even op oefenen om het onder de knie te krijgen. Voor je met de pen aan het werk gaat moet je eerst in de optiebalk controleren of de instellingen juist zijn.

Check je in de optiebalk of het pengereedschap staat op Pad in plaats van op Vorm of Pixels

Klik ergens aan de rand van het product dat je wilt selecteren. Klik vervolgens een stukje verder en houd nu de muis of touchpad ingedrukt. Sleep een stukje verder zodat de geselecteerde lijn een vloeiende

16


kromming krijgt. Weer aangekomen bij het beginpunt zal het pad zich sluiten. Dit kun je zien doordat aan de punt van de pen een rondje zichtbaar wordt. Klik nu met de Rechtermuis en kies voor Selectie maken. Geef aan of je een Doezelrand / Feather wilt. Probeer uit hoe groot deze moet zijn. Voor een product met een strakke buitenrand zoals metaal of glas, kies je voor 0 of 1. Voor een product met een zachte buitenrand zoals stof of vacht, kies je voor 5 of meer. Kopieer het product met Ctrl + J in een nieuwe laag. Canvas vergroten Het is de bedoeling dat zowel de oorspronkelijke foto als het uitgesneden product naast of onder elkaar te zien zijn. Maak het bestand groter (breder of hoger). Ga hiervoor naar Afbeelding – Canvasgrootte – Vink aan Relatief – Typ de maat van de extra ruimte die je nodig

hebt in. Met de pijltjestoetsen kun je aangeven of de extra ruimte er links, rechts, boven of onder bijkomt. Verplaats de afbeeldingen zodat ze beide te zien zijn. Sla het bestand op als eigennaam-productselectie.psd én eigennaam-productselectie.jpg

Selecteren van eenpersoon

Opdracht 5b Maak een selectie van een persoon uit 2 foto’s met een drukke achtergrond.

Zoek een foto van een persoon. Je bent vrij in de keuze van je persoon maar moet je wel houden aan de volgende criteria: -De foto moet groter dan 2 MB zijn. -De foto moet copyright-free zijn. -De persoon moet opgaan in een drukke achtergrond. Selectie met het toverstafje of snelle selectie mogen niet mogelijk zijn. Maak een selectie van een persoon met behulp van het Pengereedschap. Controleer in de optiebalk of de instellingen juist zijn. Het pengereedschap moet staan op Pad in plaats van op Vorm of Pixels. - Klik ergens aan de rand van de persoon die je wilt selecteren. - Teken met de pen om de persoon tot je weer bent bij het beginpunt. - Klik nu met de Rechtermuis en kies voor Selectie maken. Geef aan dat je een Doezelrand / Feather wilt.

17


Rand verfijnen van de haren Om ook de ruimtes tussen de haren te kunnen verwijderen kies je in de Optiebalk voor het gereedschap Selecteren - Rand verfijnen / Refine edge. Dit gereedschap werkt alleen als het object geselecteerd is. Een object kun je selecteren door tegelijk op het laag-icoon en CTRL te klikken. Kies bij Refine edge voor Overlay. Je hebt nu een roze achtergrond. Klik in het menu Rand verfijnen op de knop links gereedschap Straal verfijnen. Schilder met Straal verfijnen over de randen van het haar. Photoshop selecteert nu de fijne details. Klik op OK. Kopieer en plak vervolgens de gemaakte selectie in een nieuwe laag (Ctrl + J). Verwijder de oude laag en bestudeer het verschil.

met rand verfijnen zonder rand verfijnen

Rand verfijnen van de totale persoon Pas Rand verfijnen nog een keer toe, maar nu op de totale persoon. Selecteer de juiste laag. Kies voor Selecteren - Rand verfijnen / Refine edge. Kies voor de optie Vloeiend / Smooth. Schuif het pijltje een flink stuk naar rechts. Kies vervolgens voor de optie Doezelaar / Feather. Schuif dit pijltje een klein stukje naar rechts. Klik op OK. Kopieer en plak vervolgens de gemaakte selectie in een nieuwe laag (Ctrl + J). Verwijder de oude laag en bestudeer het verschil. Als je niet tevreden bent herhaal je de toepassing met andere waardes. Het is namelijk van de grootte van je foto afhankelijk wat de beste waardes zijn. Canvas vergroten Ook voor dit document vergroot je het canvas. Afbeelding – Canvasgrootte – Vink aan Relatief – Typ de maat van de extra ruimte die je nodig hebt. Geef met de pijltjestoetsen aan of de extra ruimte er links, rechts, boven of onder bijkomt. Verplaats de afbeeldingen zodat ze beide te zien zijn. Sla het bestand op als eigennaam-persoonselectie.psd én eigennaam-persoonselectie.jpg

18


Banner / prijspakker

Opdracht 5c Maak een banner met de nadruk op prijs van de 2 selecties uit opdracht 1 en 2. Maak een nieuw document: Formaat: 600 px breed en 315 px hoog, 72 pixels/inch, RGB. Plaats zowel het product als de persoon in het document. Vul dit aan met:

- Naam van het product - Call to action - Prijs - Actietermijn

Aandachtspunten voor de banner zijn Compositie, Aandacht voor prijs, voordeel en product. Sla het bestand op als: eigennaam-banner.psd én eigennaam-banner.jpg.

19


Banner / sfeer

Opdracht 5d Maak een sfeerbeeld van de 2 selecties uit opdracht 1 en 2. Maak een nieuw document: Formaat: 336 px breed en 280 px hoog, 72 pixels/inch, RGB. Plaats zowel het product als de persoon in het document.. Vul dit aan met:

- Naam van het product - Sfeervolle achtergrond - Call to action - Bewerk de afbeelding door het gebruik van effecten en filters.

In het voorbeeld is gebruik gemaakt van: Ctr+U – verzadiging minimaliseren (zwart-wit maken). Filter – Rendering – Zon / Lens flare. Aandachtspunten voor dit sfeerbeeld zijn Compositie, Kleurgebruik en Eenheid. Sla het bestand op als: eigennaam-sfeerbeeld.psd én eigennaam-sfeerbeeld.jpg

Bannerformaat

Opdracht 5e Kies één van de twee banners en maak daarvan nog een banner in een afwijkend formaat. Kies 1 van de formaten uit de infographic op pagina 1.

20


Animatie

Waarom is een informatieve animatie op je website een goed idee? http://www.easyexplainvideo.com/works/why_use_explainer_video_on_your_website/

Oké, een goed plan dus. Dan gaan we er 1 maken.

Het script

http://www.easyexplainvideo.com/works/why_use_explainer_video_on_your_website/

21


Opdracht 6a Script Bedenk een animatie voor het verkopen van een dienst of product. Gebruik voor het schrijven van het script de 5 stappen zoals hierboven omschreven.

22


Opdracht 6b De beelden ZOEK BIJ ALLE STAPPEN IN JE SCRIPT PASSENDE BEELDEN. MAAK ZOVEEL MOGELIJK GEBRUIK VAN EIGEN FOTO’S EN TEKENINGEN. GEBRUIK EVENTUEEL OOK MATERIAAL VAN INTERNET. LET DAARBIJ OP AUTEURSRECHT!

Opdracht 6c De animatie EEN ANIMATED GIF KUN JE ONDER ANDERE MAKEN IN PHOTOSHOP. JE MAG OOK EEN ANDER PROGRAMMA GEBRUIKEN ALS JE

DAT PRETTIGER VINDT. ONDERSTAANDE UITLEG HEEFT BETREKKING OP PHOTOSHOP. BESTANDSFORMAAT

- MAAK EEN NIEUW BESTAND VAN 500 PIXELS BIJ 500 PIXELS IN RGB MET EEN RESOLUTIE VAN 72 DPI. TEKST EN BEELD IN GROEPEN

- PLAATS DE VERSCHILLENDE TEKSTEN UIT JE SCRIPT STEEDS OP EEN NIEUWE LAAG. - PLAATS DE VERSCHILLENDE AFBEELDINGEN DIE JE BIJ JE SCRIPT GEVONDEN HEBT IN APARTE LAGEN. - Maak een Nieuwe groep aan in het menu Lagen

- Schuif de lagen (tekst en beeld) die samen een slide vormen in een groep. - Geef de groepen een toepasselijke naam per slide van je beeldverhaal.

23


Tijdlijn - Om een Animatie te kunnen maken, moet je in Venster / Window het menu Tijdlijn openen. - Klik nu op Videotijdlijn maken. - Linksonder kun je de Tijdlijn-animatie met onderstaand icoontje omzetten in een Frame-animatie

en weer terug. - Kies voor Frame-animatie.

- Je ziet een venster met een frame met daarin weergegeven wat er op de zichtbare laag te zien is. Dupliceer dit frame door op het Kopieericoontje te klikken.

- Klik in het 1e frame. Maak de groep met Slide1 Zichtbaar. - Klik in het 2e frame. Maak de groep met Slide 2 Zichtbaar. - Ga door tot alle groepen in frames gezet zijn.

Afspeelduur

- Per frame kun je de gewenste tijd aangeven. Zorg ervoor dat iedere slide goed te zien is maar ook niet te lang duurt. Zet de Speelduur van de animatie op 3 maal,.

- Klik op Play om je animatie te bekijken en eventueel aan te passen. Opslaan

- Sla de animatie op als PSD zodat je nog wijzigingen kunt aanbrengen. - Geef de animatie de naam eigennaam-animation - Sla de animatie op als Animated gif: Bestand/File – Exporteren – Safe for web – Kies Gif

Bij een oudere versie van Photoshop kun je rechtstreeks kiezen voor Bestand – Opslaan voor web.

24


Seductive Design Productverkoop en de kunst van het verleiden.

By SaraSoueidan

Een plaatsje boven de lijn is een kwestie vanVerleiden

25


Meer dan fuctionaliteit

Consumenten moeten worden verleid door meer dan alleen de functionaliteit van het product.

In de wijze waarop je het product presenteert moet je de aandacht trekken en je onderscheiden van de concurrent.

26


Een beetje wel … je moet grappig zijn, ook anders, onverwachts uit de hoek kunnen

komen, een klein beetje mysterieus, betrouwbaar overkomen, er goed uitzien,

actueel en maatschappelijk betrokken zijn, de ander uitdagen,

toegankelijk, zorgen voor interactie, en als iemand anders een positief verhaal over je

vertelt is het al helemaal te gek.

27


Grappig / Creatief

Opvallend

Opvallen op het web, tussen de concurentie.

28


Onverwacht Guerilla-advertising Op een onverwachte, ludieke manier reclame maken om op deze manier publiciteit en sympathie te verkrijgen voor het product.

Mysterieus Inspelen op nieuwsgierigheid.

29


Betrouwbaar

Bekende Nederlander + expert Voorbeeld http://www.youtube.com/watch?feature=endscreen&NR=1&v=xx- 1_a3rvX0

Veel gebruikte termen: technologie – doorbraak - wetenschappelijk bewezen - (onafhankelijk) onderzoek - aangetoond effect - werkzaam dermatologisch getest.

Speciaal voor jou De presentatie is gericht op bijvoorbeeld: kinderen, zwangere vrouwen, professionals etc.

http://www.youtube.com/watch?feature=endscreen&NR=1&v=xx-1_a3rvX0

30


Mooi zijn

Er goed uitzien

Apple’s mantra: simplicity

is the ultimate

sophistication.

(eenvoud is de ultieme

verfijning.)

De design principes waren

leidend en bepalend voor

de technologische

functionaliteit. Hij

omarmde de eenvoud van de

strakke, functionele en

tijdloze ontwerpprincipes.

De muren van de

productiehallen werden

museumwit geschilderd, de

vloeren moesten schoon

zijn en de machines en

robots werden in een

speciaal kleurenschema in

de Applekleuren gespoten.

31


Status bieden

Extra waarde geven

32


Erbij horen Merken (logo / kleuren) of producten gebruikt door vips. In de clip Telephone van Lady Gaga komen heel wat merken In beeld ….. http://www.youtube.com/watch?v=EVBsypHzF3U

Verantwoord Nadruk op :duurzaam, milieuvriendelijk, mens- diervriendelijk, fair trade,dicht bij de natuur, gezond, basic.

http://www.youtube.com/watch?v=EVBsypHzF3U

33


Toegankelijk

Actueel Nadruk op een populair televisieprogramma, een actuele gebeurtenis, of een speciale viering. Bijvoorbeeld Sinterklaas of Koningsdag, maar ook wintertijd of K3.

Nadruk op prijsvoordeel.

Goedkope materialen en kleurencombinaties staan centraal. Kernwoorden zijn:

prijspakker, korting, extra inhoud en koopje.

34


De ander uitdagen

Interactief

35


Een positief verhaal vertellen Sharing is caring

http://www.youtube.com/watch?v=7fXEgO2iL7Y

http://www.youtube.com/watch?v=R55e-uHQna0

Opdracht 7 Seductive design Ontwerp twee verschillende presentaties voor een bestaand product. Maak uit onderstaande uitgangspunten twee verschillende keuzes:

- Grappig - Anders (Opvallen t.o.v. de concurrent) - Onverwacht (guerrilla advertising) - Betrouwbaar (archetype – bekende Nederlander – wetenschappelijk bewezen, etc.) - Mysterieus (nieuwsgierigheid opwekken) - Verantwoord - Speciaal voor jou - Actueel - Uitdagend (Interactief) - De gebruiker een goed verhaal laten vertellen (usergenerated)



webdesign - mc studentenwerk in een oorspronkelijk design of een variaties in de stijl van een site....

Documents