Ontwerpdocument Beeld



Vergelijkbare documenten
Project Het Parool. Media, Informatie en Communicatie. Propedeuse. Ontwerpdocument Beeld

Ontwerpdocument. Media, Informatie en Communicatie. Propedeuse. Project het Parool

Handleiding wordpress

Op de website van de N!X Ruilkring klik je in het menu op Cyclos". Rechts bovenin klik je op de knop aanmelden. Je komt dan in het inlogscherm.

Grafisch ontwerp. Referenties.

Nieuws sites hebben een krantachtige vormgeving; de informatie staat voorop.

HANDLEIDING E-NEWSLETTER

Dennis Wagenaar v 1.0

Hoofdstuk 3: Excel aanpassen * 2010

Inhoudsopgave. Styleguide Bewust. Pagina 2

1. Over LEVIY 5. Openen van de activiteit 2. Algemene definities 6. Inloggen op het LEVIY dashboard 3. Inloggen 6.1 Overzichtspagina 3.

P5 Ontwerpdocument WIE IS DE MOL? Karlijn van Egmond P4 2015/2016 V1-07

Website maker. Bezoek je domein om de Website maker in te stellen. De volgende melding zal zichtbaar zijn.

Museumbezoek onder Studenten

Algemene regels. Stappenplan webdesign

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0

ONTWERPDOCUMENT NEMO. Jesse van Thijn & Tessa de Goede Project Visual Visual Essay

Smartphone app ONZO. Korte uitleg en functieverklaring van de app. Lighthouse Productions 17-Jan-12

Handleiding Berichtensysteem. Multitask ICT bv

5. Documenten Wat kan ik met Documenten? 1. Over LEVIY. 5.1 Documenten terugvinden Uitleg over vinden van documenten.

ActiveBuilder Handleiding

DESIGNBIBLE. 4 Visuele families (inspiratie) Afbeeldingroepen die inspiratie zullen bieden voor mijn vorm geving. 1 De websites van de sportbonden

User testing: Aan de hand van een expectation map heb ik 3 verschillende personen gevraagd om het prototype te testen.

Handleiding. Omschrijving Handleiding RaadDigitaal Android. Datum Versienummer 2.1

Handleiding CMS. Auteur: J. Bijl Coldfusion Consultant

make things ETA by Boudewijn Naaijkens

Ontwerp rapport Digitaal Instellingsplan Hogeschool van Amsterdam

Op Internet bestaat Hyves al een aantal jaren. Daarin

Vormgeving P1415: Eindwerk Mark van Dijken ( ) Klas koraal. Datum: 12 januari 2015 Docent: M. Andrews

The Facebook pagina van NKBV 50 Plus

iphone app - Rapporten

HANDLEIDING PATHÉ KLANTENSERVICE ZENDESK

Linda Thuijs-Koopmans - LinnenArt, huisstijl en logo ontwerp -

Wireframe #1 PTA Home

Portfolio s in Google Sites

Handleiding dashboard. 3WA SaaS platform

Handleiding voor organisaties

Inhoud van de website invoeren met de ContentPublisher

Binnenstad in kaart. Hoe werkt het?

Handleiding De Sociale Monitor

Ontwerpdocument. Maarten Kolthof. NHL Hogeschool Opleiding Communication & Multimedia Design Ontwerpdocument - Maarten Kolthof

Models & Processes Ontwerpdocument Milledoni.nl op mobiel. Laura Mentink V

Docnet handleiding 1

Inhoudsopgave. 01. Inloggen & wachtwoord aanpassen Blz Pagina s beheren Blz Sidebars beheren Blz Menu beheren Blz.

Stappenplan, hoe voeg ik mijn IFRAME toe aan Facebook?

Lijnen/randen en passe-partouts maken met Photoshop.

PTG Geleidestaten Applicatie Gebruikershandleiding externen Versie 1.4

Starten website/homepage

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet EXED CMS UITLEG

Functioneel ontwerp. Navigatie

ZÉLF JE WORDPRESS WEBSITE MAKEN?

Handleiding website Buurten Met Uitzicht

Het inlogscherm. Uitleg Demo pagina s

Sturen van mail via de PZV website

HANDLEIDING NIEUWE WEBSITE VARIAPACK.COM

Publiceren met WordPress

Whitepaper. design best practices

Handicom. Symbol for Windows. Image Manager. (Versie 3) Handicom, 2006, Nederland

MILLEDONI.NL OP MOBIEL. Door: Sijmen Vos, , klas v1-05 Docent: Koop Reynders Datum: 17 februari 2014

De loopgroep van René Uijthoven op facebook. Inleiding... 1 Registreren bij facebook... 3 Lid worden van Loopgroep RUNé... 5

Handicom. Symbol for Windows. Image Manager. (Versie 4) Handicom, 2011, Nederland

De website heeft een redelijk gestileerde uitstraling en oogt ook experimenteel. Verder lijd hij nauwelijks af van de inhoud, namelijk zijn foto s.

Handleiding GlobeTrace Lite CMS V1.0

Down The Rabbit Hole door: Maria Barmentlo Klas: Paars Versie: 31 mei 2015

Inhoudsopgave: Inhoudsopgave 1 Inleiding 2 Televisie menu. 4 Radio menu. 6 MiniGids. 8 TV Gids . Programma informatie oproepen. Kiezen en Kijken...

Handleiding website Buurten Met Uitzicht

Wireframes after feedback v2.0

BRANDBOOK Algemene richtlijnen & instructies voor het gebruik van de Amplixs huisstijl maart 2019 Versie 2.2

LL365. Lowlands 365! Ontwerpdocument! het ontwerp van de LL365 app

Invoice Portal. Handleiding

Leerpaden maken. 1. Account en wachtwoord. 2. Maak een nieuw leerpad aan. 3. Inhoud aan een leerpad toe voegen. 4. Structuur aanbrengen op een pagina.

Hoe ga ik dit verwerken? (Begrip maken) Dit volume is goed, dit moet ik zo houden.

Inleiding. Daarnaast geldt dat bij gebruik van een eigen website een link wordt geplaatst bij de contactgegevens naar de homepage van In de Weerd:

Werkinstructie CareAssist Internet Urenregistratie

Webonderdelen (Web Parts)

Na het inloggen met de gegevens die je hebt gekregen, verschijnt het overzichtsscherm zoals hieronder:

behind interactive media:

Eerste moodboard. Tweede moodboard

De uitleg is van toepassing voor de Instagram app op jouw mobiele telefoon of tablet. 1. Wie mag jouw Instagram foto en video profielpagina zien?

CONCEPTVERSLAG. Amber van Blitterswijk Rob den Breems Mike Broere Sanne de Jager Nikita Veenhuizen

Berichten plaatsen op de ALO site

Handleiding. Patiëntenportaal. Handleiding Patiëntenportaal (maart 2019) Pagina 1 van 7

Surf naar en klik op registratiesysteem en volg de link klik hier voor het registratiesysteem.

Snel aan de slag met... versie

Smart Export data analyse

Toelichting Keyplan. Keyplan is er voor desktop en IOS apparaten:

Aan de slag met Acadin

L o w l a n d s 365. Naam: Tycho Hofstede Datum: Docente: Gertrude Lok Nummer:

Tips; fotoboek maken (bron: hema.nl)

styleguide Albert Slow Styleguide

HANDLEIDING RAPPORTGENERATOR: IN TIEN STAPPEN NAAR UW EIGEN DUURZAAMHEIDSRAPPORT

WORDPRESS. op de FourBottles manier. Pagina 1

Handleiding Wordpress versie

!!!!!!!!!!!! Handleiding website! VV Den Ham

In deze handleiding lichten wij het uploaden, splitsen en taggen van documenten en het terugzoeken van deze documenten in Basecone toe.

1 BUSINESS INTERNET SUPPORT

QUESTI OPSTARTGIDS ALGEMENE INSTELLINGEN EN LVS

Startershandleiding ProCheck+

Handleiding HBO GO V.2

Transcriptie:

Media, Informatie en Communicatie Project Parool Ontwerpdocument Beeld Nikita Brantsen Kim Vendrig Lisa Bol Thom Specht Christel Verwoerd Dewy Muijrers P122A Tutor : Jaimy Ramdin Media, Informatie en Communicatie 27-03-2013

Ontwerpdocument Beeld P122A 3 Inhoud 1 Inleiding 4 2 Inspiratieverslag Beeld 5 3 Moodboards 6 3.1 Moodboard over Amsterdam 6 3.2 Verantwoording keuze moodboard Amsterdam 6 3.3 Moodboard over de doelgroep 7 3.4 Verantwoording keuze moodboard doelgroep 7 4 Website 8 4.1 Visuals 8 4.2 Verantwoording keuzes website Parool Solutions 11 5 Applicaties 13 5.1 Visuals Parool Personal Assistent Applicatie 13 5.2 Verantwoording keuzes Parool Personal Assistent Applicatie 14 5.3 Visuals Parool Quiz Applicatie 15 5.4 Verantwoording keuzes Parool Quiz Applicatie 17

Ontwerpdocument Beeld P122A 4 1 Inleiding Voor dit document is een inspiratieverslag geschreven waarin verteld wordt over de totstandkoming van de ideeën voor de applicaties en de website. De visuals van de Parool Quiz applicatie en de Parool Personal Assistent applicatie worden getoond. Daarbij wordt de verantwoording voor de keuzes toegelicht. Ook worden de visuals van de Parool Solutions website getoond, ook hierbij zal de verantwoording van de keuzes toegelicht worden. Tot slot worden de moodboards over Amsterdam en de doelgroep getoond. Ook hierbij wordt toegelicht waarom voor deze moodboards gekozen zijn.

Ontwerpdocument Beeld P122A 5 2 Inspiratieverslag Beeld Vanaf het moment dat het project Het Parool is begonnen wordt er door de gehele groep anders gekeken naar de buitenwereld. Buiten wordt er inspiratie opgedaan voor bijvoorbeeld het ontwerp van het logo of de lay-out van de website. We letten nu extra op de logo's die de meeste winkelketens gebruiken om hun winkel te presenteren. Tijdens de lessen Beeld zijn er opdrachten uitgevoerd waardoor er anders gekeken wordt naar bijvoorbeeld afbeeldingen. Afbeeldingen kunnen een abstracte of een concrete betekenis hebben. De concrete betekenis is voor deze de meeste mensen hetzelfde maar de abstracte betekenis kan door iedereen anders worden geïnterpreteerd. Door met elkaar ideeën uit te wisselen ontstaat er vaak een beter concept. Het met elkaar uitwisselen van ideeën helpt ook om individueel verder te denken. Ook zijn er tijdens de lessen Beeld voorbeelden gegeven over wat de do's en don'ts van tegenwoordig zijn op het gebied van vormgeving. Deze trends zijn bepaald door professionele mensen, maar dit kan door iedereen anders geïnterpreteerd worden. Er werd bijvoorbeeld beweerd dat horizontaal scrollen een don't was maar op dit moment langzaam aan het opkomen is. Deze informatie kan goed gebruikt worden bij het ontwerpen van de applicatie. Ook is er inspiratie opgedaan door middel van fieldresearch. De antwoorden die de deelnemers hebben gegeven hebben een bijdrage geleverd aan het ontwerp van de website en/of de applicaties. Ze hebben aangegeven wat ze het prettigst vinden aan hun favoriete applicaties. We halen zo veel mogelijk ideeën uit de fieldresearch omdat we daar de persoonlijke mening horen van onze doelgroep en dat is de meest bruikbare informatie voor ons concept.

Ontwerpdocument Beeld P122A 6 3 Moodboards Voor de moodboards is er gekozen om twee verschillende te creëren. De eerste wordt een cliché-moodboard en de tweede is een diepere uitwerking op de eerste. Ook zal het hoofdonderwerp van moodboard één te maken hebben met Amsterdam zelf en moodboard twee met de doelgroep 20 tot 35 jarigen. Deze twee hoofdonderwerpen zijn gekozen, omdat het duidelijke antwoorden geeft op de vragen: Wie is de doelgroep? en Waar leeft de doelgroep?. 3.1 Moodboard over Amsterdam 3.2 Verantwoording keuze moodboard Amsterdam Er is besloten om het moodboard over Amsterdam strak te houden. Wanneer beelden samen komen kan het namelijk snel chaotisch lijken. De achtergrondkleur van het moodboard is blauw geworden. Die kleur is gekozen omdat Het Parool ook blauw is. Verder is het moodboard gebaseerd op vijf clichéonderwerpen die passen bij Amsterdam, namelijk: Amsterdamse panden, fiets, het Leidseplein, grachten en duiven. Op de linkerkant van het moodboard staat de foto van de Amsterdamse panden, deze foto is het grootste van het moodboard. Uit deze foto is inspiratie gedaan qua kleur voor de andere foto s. In de andere foto s komen de warme kleuren terug. Maar dit geldt bij twee foto s ook voor de grijzige kleuren. Het moodboard is strak en overzichtelijk, maar straalt ook een grote stad met warmte uit. Een grote stad met warmte, dat is Amsterdam.

Ontwerpdocument Beeld P122A 7 3.3 Moodboard over de doelgroep 3.4 Verantwoording keuze moodboard doelgroep Het moodboard over de doelgroep bevat alleen tekst. Hiervoor is gekozen, omdat het moodboard over Amsterdam al veel beeld bevat. Ook wordt er door middel van tekst een juiste indicatie gegeven over hoe de doelgroep denkt, wat hun bezighoudt en wie zij zijn. Er is maar een beperkte hoeveelheid kleur gebruikt in dit moodboard, omdat de tekst eruit moest springen. Zo heb je in een blikopslag al een indruk van de doelgroep en wordt je niet in verwarring gebracht door het kleurgebruik. Het moodboard is strak en netjes en ook dat geeft weer hoe de doelgroep is. Aangezien de doelgroep werkt of naar school gaat, zit er een bepaald schema in hun leven en dat is door middel van strakheid weergegeven op het moodboard.

Ontwerpdocument Beeld P122A 8 4 Website 4.1 Visuals

Ontwerpdocument Beeld P122A 9

Ontwerpdocument Beeld P122A 10

Ontwerpdocument Beeld P122A 11 4.2 Verantwoording keuzes website Parool Solutions In dit hoofdstuk worden de keuzes voor de website toegelicht. Er wordt behandelt welke keuzes gemaakt zijn voor de kleur, het concept, de vorm, de typografie, beeld en de lay-out. Voor de website Parool Solutions is ervoor gekozen om de huidige kleur van Het Parool te behouden, namelijk de kleur blauw. Er is bij de respondenten geïnformeerd over wat zij het beste bij de website vonden passen en hier kwam uit dat de kleur blauw moest blijven, omdat deze kleur kenmerkend is voor het Parool. Wel vinden de respondenten dat de kleur rood meer bij Amsterdam past. Om hier op in te spelen, zijn de 3 kenmerkende kruisjes van Amsterdam in het rood naast de naam van de website geplaatst. Voor de drie kruisjes is gekozen omdat dit kenmerkend is voor Amsterdam en de respondenten het belangrijk vinden dat de website een meer Amsterdamse uitstraling krijgt. Er is voor gekozen om de achtergrond wit te houden, omdat dit in het geheel een rustige uitstraling geeft en de tekst duidelijk te lezen is. Er is voor gekozen om de website in zijn geheel vooral overzichtelijk te houden. De respondenten vinden het belangrijk dat een website er overzichtelijk uitziet en dat informatie makkelijk en snel te vinden is. Hier is op de website ook voor gekozen door informatie in duidelijke pijlers te filteren. Ook is hiervoor gebruik gemaakt van kolommen. Door de gelijke kolommen is de informatie duidelijk verdeeld over de pagina. In de linker kolom is het keuzemenu te vinden. De respondenten vinden het belangrijk dat het keuzemenu duidelijk is en deze hebben ze het liefst aan de linkerkant. In de bovenste kolom waar de naam van Parool Solutions te zien is, is ervoor gekozen deze een blauwe kleur te geven. Door de blauwe kleur springt de naam eruit en wordt de naam Parool Solutions goed zichtbaar gemaakt. Ook de slogan is in een redelijk groot lettertype gezet, waardoor deze goed zichtbaar is. De respondenten waren nauwelijks op de hoogte van de huidige slogan en vinden het belangrijk de nieuwe slogan beter zichtbaar te maken zodat deze wel onthouden wordt. De nieuwsberichten zijn in het midden van de pagina geplaatst. Hier is voor gekozen omdat dit het belangrijkste is op de pagina en het zo een duidelijke centrale plaats heeft. Rechts aan de zijkant zijn advertenties te vinden. Ze zijn rechts geplaatst zodat deze geen belemmering vormen tijdens het lezen van de nieuwsberichten. Op de website zijn veel afbeeldingen te zien. De respondenten vonden het belangrijk meer beeld van Amsterdam te zien. Door het plaatsen van afbeeldingen is de website ook aantrekkelijker dan wanneer er alleen lappen tekst te zien zijn, aldus de respondenten. Voor het lettertype is gekozen omdat ook deze overeenkomt met het huidige lettertype van Het Parool.

Ontwerpdocument Beeld P122A 12 Het concept van de website Parool Solutions is vooral om het leven van de Amsterdammer gemakkelijker te maken. Parool Solutions speelt in op problemen waar de gemiddelde inwoner van Amsterdam mee te maken krijgt. Dit is onderverdeeld in de volgende pijlers: Rides, Peoples needs, Food and Drinks, Technologic, Spare Time, Shopping en Up-to-date. Onder elke pijler worden oplossingen bedacht voor problemen in deze categorie. Voor dit concept is gekozen omdat het opzoeken van informatie vaak lastig blijkt te zijn. Voor elk probleem moet gebruik worden gemaakt van een andere website om de oplossing te vinden. Met Parool Solutions bieden wij op één website alle oplossingen voor spelende problemen in Amsterdam. Daarnaast is ervoor gekozen informatie te filteren per stadsdeel. De respondenten hebben aangegeven het fijn te vinden wanneer informatie gefilterd is per stadsdeel omdat zij geen informatie willen lezen die voor hen niet relevant is. Per stadsdeel wordt alleen het belangrijkste nieuws geplaatst, zodat de website geen kopie wordt van de huidige Parool website vol nieuwsberichten.

Ontwerpdocument Beeld P122A 13 5 Applicaties 5.1 Visuals Parool Personal Assistent Applicatie

Ontwerpdocument Beeld P122A 14 5.2 Verantwoording keuzes Parool Personal Assistent Applicatie In dit hoofdstuk wordt toegelicht welke keuzes er zijn gemaakt voor het ontwerpen van de Parool Personal Assistent applicatie. Omdat Parool Personal Assistent het leven van de doelgroep handiger moet maken is gekozen voor een overzichtelijke en duidelijke app. Om het overzichtelijk te houden is er gekozen voor het gebruik van drie kleurtinten, namelijk: blauw (van Het Parool), donkergrijs en wit. Ook de keuze voor de typografie hangt samen met de keuze om het overzichtelijk te houden. Er is daarom gekozen voor schreefloze letters in de gekozen kleurtinten. Wat betreft de buttons in het menu onderaan de applicatie is er ook naar gestreefd om het duidelijk en overzichtelijk te houden. Wanneer op de eerste button geklikt wordt, het poppetje, komt de gebruiker bij zijn of haar profiel. De tweede button, het envelopje, brengt hen naar hun berichten. De derde button, de i, staat voor informatie. De vierde en tevens laatste button is het potloodje, deze staat voor instellingen. Wanneer de knop ingedrukt is verandert de kleur van de knop van donkergrijs naar blauw. Scherm 1: Dit is het inlogscherm van de app. De gebruiker ziet het menu dan al wel, maar deze werkt pas na het inloggen. Scherm 2: Op scherm 2 zijn de meldingen te zien. Hier is een weergave te zien van een fictieve inbox van een gebruiker. Wanneer de gebruiker op de knop waar de i op staat drukt, is het hele bericht te lezen. Scherm 3: Dit is het instellingenscherm. Er kan door middel van schuifknoppen ingesteld worden of de gebruiker wel of geen pushmeldingen wil. De blauwe teksten aan de linkerkant zijn de onderwerpen waar de gebruiker pushmeldingen van wil ontvangen. Deze zijn zelf in te stellen. De berichten ontvangt de gebruiker sowieso in zijn of haar inbox. Daarentegen is het wel mogelijk om per onderwerp aan te geven of de gebruiker wel of geen pushmelding wil ontvangen.

Ontwerpdocument Beeld P122A 15 5.3 Visuals Parool Quiz Applicatie

Ontwerpdocument Beeld P122A 16

Ontwerpdocument Beeld P122A 17 5.4 Verantwoording keuzes Parool Quiz Applicatie In dit hoofdstuk wordt toegelicht welke keuzes er zijn gemaakt voor het ontwerpen van de Parool Quiz applicatie. Er is voor gekozen om de huidige kleur van Het Parool, de kleur blauw, te behouden. Hiervoor is gekozen omdat deze kleur herkenbaar is voor het Parool. Omdat de applicatie merkversterkend is, moet dit aansluiten bij de huidige identiteit van Het Parool. Om dezelfde reden is er ook voor een lettertype gekozen die overeenkomt met het huidige lettertype. Er is voor gekozen om de quizvragen te filteren in verschillende categorieën. Bij de respondenten werd aangegeven dat zij dit fijn zouden vinden, omdat zij alleen informatie over onderwerpen willen waar hun interesse ligt. Wanneer een vraag goed wordt beantwoordt, zal het gekozen antwoord groen kleuren en wanneer de vraag fout wordt beantwoordt zal deze vraag rood kleuren en het goede antwoord met de kleur groen aangegeven worden. Daarna wordt er de mogelijkheid gesteld meteen door te gaan naar de volgende vraag of om meer te lezen. Wel wordt het antwoord kort toegelicht. De respondenten gaven aan het niet fijn te vinden ongevraagde informatie in beeld te krijgen, maar het fijn vinden wanneer ze dit zelf kunnen aangeven. Daarom wordt deze keuze in de applicatie gesteld aan de gebruiker.