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



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

Ontwerpdocument Beeld

Dennis Wagenaar v 1.0

Visual design. Naam: Rob Dekker. Studentnummer: Vak: MMIO

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

SBO WEBSITES BOUWEN IN 7 STAPPEN

d e s i g n d o c u m e n t MELK

Functioneel ontwerp. Navigatie

M I K E R U B I O K E R N T A A K

Eerste moodboard. Tweede moodboard

Inhoudsopgave. Styleguide Bewust. Pagina 2

Website bouwen Blok2 Wat kan wel en wat kan

WEBSITE USABILITY. white-paper

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

Basishandleiding website voetbalvereniging Lemelerveld Wordpress content managementsysteem

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

Versie 2. Opdracht deel B Inhoud. Raoul Vos Hogeschool Leiden Studentnummer:

V.V. WILHELMUS HUISSTIJLHANDBOEK. Naam: Marco Remmerswaal Studentnummer: Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1.

FLASHBAY

behind interactive media:

Gebruikersdocumentatie Onderwijsbank Huisartsgeneeskunde

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

Design rationale document. Rabobank.com

Handleiding De Sociale Monitor

Checklist opmaken van een nieuwsbrief Sendt

Schets/Ontwerpplan. HIPDESIGN Alernatieve Jongeren

Grafisch ontwerp. Referenties.

Succesvol dankzij het juiste design Ilse Kroes UX-designer van Vevida.

VOOR VERBETERING VATBAAR. Nadia Groenewald G&IB

AB OVO. iguide STYLEGUIDE

Verslag Pencil, Photoshop & InDesign

Piotr Tekien. Grafische Vormgeving Revisie portfoliostijl GAR1-B. 3 december 2014 PIOTR TEKIEN HKU GAME ART GAR-1B

HANDLEIDING DOIT BEHEER SYSTEEM

Algemene regels. Stappenplan webdesign

Screen Design. Inge van Dam CMD2E Screen Design Product page. Inge van Dam CMD2E

Ontwerp rapport Digitaal Instellingsplan Hogeschool van Amsterdam

vliegtickets boekinsformulier voor 15 FEBRUARI 2015 groepsopdracht 2 rex hordijk alissa muffels luca verhees marek van der hoeven

Weebly. Inhoud. Vormingplus Limburg, L. Frederix

Opdracht Vodafone Interface De opdracht houdt in dat we een sales statistieken tool herontwerpen voor telecom provider Vodafone. Dit doen we door een

Museumbezoek onder Studenten

Handleiding Cliëntportaal voor cliënten en naasten van Zorggroep Elde. Inhoudsopgave. 1 Inleiding 2. 2 Portaal openen 2. 3 Registreren 3.

Handleiding korte instructie gebruik LommOnline voor verenigingen. Stap 1. Vooraf:

Inhoud. Ontwerpdocument 18 juni 2007

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

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

Handleiding wordpress

Stappenplan App maken

Pieter Geneugelijk 4H3

Seminar. Essay conceptstores

Ontwerpdocument BVA app Ontwerpdocument BVA app

Mach3Framework 5.0 / Website

Wij maken graag reclame voor anderen

E-zine. Nieuwe E-zine. Welkom!

Wanneer je de Apps installeert via de Ipad, vergeet ze dan zeker niet te synchroniseren via itunes met je pc of omgekeerd.

HANDLEIDING RAPPORTGENERATOR: IN TIEN STAPPEN NAAR UW EIGEN DUURZAAMHEIDSRAPPORT

M I K E R U B I O K E R N T A A K

Naast deze specificaties zijn deze de volgende opzetten in PSD formaat een goede basis om mee aan de slag te gaan: Desktop Mobiel

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

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

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

TIME-TRACKING GROUPING

HANDLEIDING Social media op website Stichting Vertellen, versie jan blad 1 van 8 HANDLEIDING SOCIAL MEDIA KOPPELEN AAN PROFIEL BIJ STG VERTELLEN

Stagebedrijf: Zwiers communicatiebureau Corporate- en Arbeidsmarktcommunicatie. Opdrachtgever: De RIBW KAM Regionale instelling Beschermt Wonen

INHOUDSOPGAVE. voorwoord

Learning Management Systeem (LMS) Bedrijfsopleidingen

WebsiteKlanten.nl Piet Hein Bouwkamp

Handleiding Website beheersysteem

Week 3 Opdracht 1 Visual design website sportmerk Meile Houtsma

Handleiding. RSS reader Feedly

HUISSTIJLHANDBOEK LIVING CTIVE

Een website maken met Weebly Alva ICT Karsten Campsteyn Jan Penders


Ontwerpverslag. Mobile Concepting 16 maart Rogier Wijnands Jelle Clignet Tom Bessems

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

Instructies Zitecraft Content Management System (CMS)

Een voorpagina of vaklokaal omzetten in WordPress

IQ LEADS Adres: Curieweg 8E Postcode: 2408 BZ Plaats: ALPHEN AAN DEN RIJN Telefoon: (0172)

Handleiding. Ouderportaal. obssprinkels

Handleiding voor het maken van je eigen webpagina op de schoolsite

styleguide Albert Slow Styleguide

Mobiele applicatie Walking Guide

Een website maken met Weebly

Tips & trucs banners maken voor je webshop

CMS Interactieontwerp website

Handleiding VKKOnline

Handleiding. Ouderportaal. Kindcentrum De Scharmhof. Kindcentrum De Scharmhof, Scharmbarg 1, 9407 EA Assen

TOPDESK Nedap healthcare Deze PDF is gegenereerd op

EEN WEBLOG MAKEN MET BLOGGER

MMIO Verslag. Groepsopdracht week 1. Hoe zorgen we dat kinderen van jongs af aan gezonder leren eten?

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op.

Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp

Bufferapp.com. Door Socialmedia-Oss.nl. Handleiding Pablo

Onderzoek naar product en concurrentie. 10 Concurrenten van webshop Sportieve E-bike. Websites links:

HANDLEIDING scoolfolio COACH

Portfolio s in Google Sites

Transcriptie:

Media, Informatie en Communicatie Ontwerpdocument Beeld Project Het Parool Jerry Leigh Henkes, Demy Verhoogt, Bastiaan Verbeek, Sterre van den Berge, Lucas de Vries, Kathy Gabriel en Hanna Loos. P125 Tutor : Henk Magrijn Propedeuse 28 maart 2013

[titel en naam] 3 Inhoud 1 Inleiding 4 2 Inspiratieverslag 5 3 Moodboards 7 3.1 Overige moodboards 8 4 Visuals website met verantwoording 11 4.1 Verantwoording website BijnaWeekend 16 5 Verantwoording vormgeving winstgevende applicatie: BijnaWeekend 17 6 Verantwoording vormgeving applicatie: FunFacts 20 7 Literatuurlijst 23

[titel en naam] 4 1 Inleiding In opdracht van Het Parool hebben wij een concept ontwikkeld voor een aanvullende website en twee nieuwe mobiele applicaties voor Het Parool. Het concept voor de aanvullende website is ontstaan tijdens een creatieve brainstormsessie en de groepsdiscussie op een van de locaties van de Hogeschool van Amsterdam. Het concept is een website met weekendinvullingen in Amsterdam, voor de doelgroep. De aanvullende site heet BijnaWeekend, met de pijlers: Gezin, Party & Event, Detox, Reizen, Cultuur en Eten & Drinken. Er komt elke donderdag nieuwe content op de site. De twee applicaties die bij het concept horen, gaan over citytrips met Amsterdammers en over de geschiedenis en gebeurtenissen in Amsterdam. In dit verslag wordt uitgelegd hoe en waardoor wij geïnspireerd zijn bij het maken van de website en applicaties. De moodboards die wij hebben gebruikt voor het concept, de website en de applicaties, worden zichtbaar gemaakt door middel van visualisaties.

[titel en naam] 5 2 Inspiratieverslag De inspiratie voor de website en applicaties komt van verschillende plekken. Allereerst is er inspiratie opgedaan uit de groepsdiscussie. Dit was een onderdeel van het onderzoek voor het rapport. Hieruit blijkt dat de voorkeur uitgaat naar een website of applicatie met een strak design. Het ontwerp moet niet te druk zijn en het moet meer beeld dan tekst hebben. Door deze ontdekkingen in de groepsdiscussie werd er onmiddellijk gedacht aan een presentatie aan het begin van deze periode. Hier werd de website Froot.nl gebruikt als een voorbeeld. Froot.nl is een website met veel interessante afbeeldingen en korte stukken tekst. Ook dit is een inspiratiebron geweest. De website is ingedeeld in blokken, wat een overzichtelijk geheel maakt. Ook de website van New York Magazine (nymag.com) is een inspiratie geweest. Dit is een vergelijkbare website met vergelijkbare onderwerpen. NYmag heeft ook ongeveer dezelfde doelgroep. Hoewel die site chaotischer is en meer tekst bevat, is het toch een inspiratiebron geweest. Er wordt namelijk strak gebruik gemaakt van een zwart-wit contrast. Dit geeft een fris en strak design. Als laatste is er nog inspiratie gekomen uit de moodboards. Er zijn moodboards gemaakt die cliché zijn en moodboards die niet cliché zijn. Vooral de collages die niet cliché zijn, zijn gebruikt ter inspiratie. Ook hier komt weer duidelijk naar voren dat zwart en wit gebruikt moeten worden.

[titel en naam] 6

[titel en naam] 7 3 Moodboards In opdracht van het vak Beeld van de opleiding Media, Informatie en Communicatie op de Hogeschool van Amsterdam, heeft iedereen twee moodboards gemaakt die gebaseerd zijn op Amsterdam en de concepten van de nieuwe website. Wij hebben twee moodboards uitgekozen waarmee wij hebben verder gewerkt, waarvan wij denken dat zij het meest passen bij het gehele concept en een specifieke pijler van het concept. Moodboard Jerry Leigh Het hele concept is op een brede wijze vertaald in dit moodboard. Elke pijler komt hierin naar voren. Je ziet sfeerbeelden die horen bij de pijlers events, detox, gezin, eten&drinken en cultuur. Er is veel rekening gehouden met de interesses van de doelgroep. Het gebruik van de kleuren die gebruikt worden voor de website, worden naar voren gebracht. Uit het fieldresearch is gebleken dat deze kleuren de doelgroep aanspreken. Zwart, wit en een andere bijkleur. Moodboard Party Hanna Loos Dit moodboard is gericht op één specifieke pijler van de website. De pijler Party is in dit moodboard vertaald naar beeld en inspiratie. Ook hier is het gebruik van kleur gericht op het nieuwe concept van de website. Er is gekozen voor een strakke opmaak, omdat de sfeerbeelden vrij druk zijn en de doelgroep niet aanspreken.

[titel en naam] 8 3.1 Overige moodboards

[titel en naam] 9

[titel en naam] 10

[titel en naam] 11 4 Visuals website met verantwoording Visual: Home

[titel en naam] 12 Visual: Eten & Drinken

[titel en naam] 13 Visual: Cultuur

[titel en naam] 14 Visual: Gezin

[titel en naam] 15 Visual: Party & Events

[titel en naam] 16 4.1 Verantwoording website BijnaWeekend Er is gekozen voor donkergrijze letters en een lichtgrijze achtergrond, omdat dit rustiger is voor de ogen om te lezen dan een witte pagina met zwarte letters, maar toch duidelijk is. De titels van de pagina s zijn zwart, zodat deze duidelijk naar voren komen. Uit de groepsdiscussie is gebleken dat de doelgroep een strakke website wil, simpel en niet te veel felle kleuren. De pagina s van de website zijn opgedeeld in twee kolommen en de teksten zijn in blokken opgedeeld, die onder elkaar staan. Door deze indeling zijn de pagina s simpel en overzichtelijk. Verder is er geen gebruik gemaakt van felle kleuren, voornamelijk de kleuren lichtgrijs, zwart, wit en lichtgroen. Het logo van parool.nl bestaat uit schreefloze letters. De stukken op parool.nl zijn ook met een schreefloos lettertype geschreven. Omdat de nieuwe site een aanvullende site is op parool.nl, is het belangrijk dat deze een eenheid vormen. Daarom hebben wij voor het schreefloze lettertype Lucida grande gekozen. Dit lettertype heeft mooie ronde afwerkingen van de letters en is duidelijk te lezen. De doelgroep heeft duidelijk aangegeven in het groepsgesprek dat zij visueel is ingesteld. Er is gekozen voor een homepage met veel afbeeldingen. De pijlers zijn aangeven op een afbeeldingen, de gebruiker kan op deze afbeeldingen klikken om naar de verschillende pijlers te gaan. Voor de gebruikers die BijnaWeekend regelmatig bezoeken staat er een extra menu bovenaan de pagina, zodat men snel naar de verschillende pagina s kan gaan. Verder is er gebruik gemaakt van non-cliché beeldmateriaal. Dit geeft de site een aparte uitstraling. De doelgroep heeft aangeven dat zij beeld op de pagina s willen en dat de teksten niet te lang mogen zijn. Op de pagina s staan korte teksten die onderbroken worden met beeld. De lay-out van de site is gebaseerd op de website www.froot.nl. De lay-out van de website sprak ons erg aan en past bij de wensen van de doelgroep. De doelgroep wil dat de site overzichtelijk is en makkelijk is te gebruiken. Op www.froot.nl wordt er gebruik gemaakt van veel beeld, de pagina s zijn overzichtelijk onderverdeel in kolommen en er wordt gebruik gemaakt van de kleuren zwart, wit, grijs en groen. Op de aanvullende website voor parool.nl hebben wij wel meer tekst gebruikt, aangezien dit een aanvullende website is voor een krant, met wie wat te lezen wil hebben.

[titel en naam] 17 5 Verantwoording vormgeving winstgevende applicatie: BijnaWeekend De doelgroep heeft aangegeven te houden van een strak, rustig en overzichtelijk design. Omdat er veel waarde wordt gehecht aan de mening van de doelgroep, is er zoveel mogelijk geprobeerd te voldoen aan de wensen van de doelgroep. In de applicatie is duidelijk te zien dat er gebruik is gemaakt van een strakke lay-out. Er is gebruik gemaakt van glossy effecten en het is overzichtelijk. Er zitten weinig knoppen op zodat er weinig verwarring kan ontstaan. De doelgroep heeft aangegeven graag een waarderingssysteem te hebben in een applicatie. Die functie is toegevoegd evenals een zoekfunctie om gemakkelijk te kunnen navigeren. De logo s en iconen op de applicatie zijn duidelijk en laten weinig aan de verbeelding over; dat geeft duidelijkheid. Omdat er gemakkelijk genavigeerd kan worden door de applicatie, is het overzichtelijk gebleven. Reizen staat centraal in de applicatie en daarom is gebruik gemaakt van veel beelden. De foto s van de reisbestemmingen zijn gebruikt om de doelgroep een goed voorbeeld te geven van hun bestemming. De foto s zijn tevens herkenbaar zodat het gemakkelijk voor de doelgroep te herkennen is welke foto bij welke bestemming hoort. De kleuren zijn in het teken van Het Parool in blauw tinten. Er is ook veel gebruik gemaakt van zwart, grijs en wit. Dat is gedaan omdat de doelgroep duidelijkheid en rust wil. De kleuren zijn neutraal en hebben een goed contrast, waardoor de tekst makkelijk te lezen is. Om in het kader van rustig, duidelijk en overzichtelijk te blijven, is er gebruik gemaakt van Helvetica Neue en Helvetica Neue Light. De lettertypen zijn bekend en erg duidelijk. Bovendien is Helvetica goed geschikt voor digitaal gebruik omdat het schreefloos is. Een schreefloos lettertype draagt ook bij aan de rust en een strak design.

[titel en naam] 18 Visuals applicatie: BijnaWeekend

[titel en naam] 19

[titel en naam] 20 6 Verantwoording vormgeving applicatie: FunFacts Voor de applicatie FunFacts is als hoofdkleur blauw gebruikt. In het logo, maar ook in de applicatie, is gebruik gemaakt van donkerblauw tot lichtblauw. Deze kleur is gekozen omdat het de applicatie een fris, rustig en strak uiterlijk geeft. In de groepsdiscussie is gevraagd naar hoe een applicatie eruit moet zien. Volgens de deelnemers van de groepsdiscussie moet een applicatie weinig verschillende en felle kleuren hebben. De voorkeur gaat meer uit naar rustige kleuren. Het design moet vooral strak zijn. Daarom is bijvoorbeeld de achtergrond van de applicatie blauw overlopend naar wit, en weer terug naar blauw. Hier is bewust voor gekozen om de gebruiker niet af te leiden. Het lettertype van de applicatie is genaamd Janda Manatee. Dit lettertype is vrij speels, maar toch goed te lezen. Tijdens de groepsdiscussie werd er opgemerkt dat een applicatie direct te gebruiken moet zijn, zonder te veel instellingen en vragenlijsten voordat je de applicatie kan gebruiken. De applicatie kan snel gebruikt worden na het downloaden. In het inlogscherm zijn er twee keuzes die de gebruiker kan maken: hij maakt een account aan of logt in via Facebook. Als de gebruiker al een account heeft, hoeft er alleen eenmalig een emailadres en wachtwoord ingevoerd te worden. Om de applicatie zo duidelijk mogelijk te maken is er gebruik gemaakt van grote buttons. Tijdens de groepsdiscussie is naar voren gekomen dat een applicatie niet te ingewikkeld moet zijn. De grote buttons zorgen ervoor dat de gebruiker simpel kan navigeren binnen de applicatie. Er is geprobeerd om per scherm zo min mogelijk buttons te maken om zo de gebruiksvriendelijkheid te verhogen. Er zijn kleine maar duidelijke pictogrammen gebruikt om bijvoorbeeld naar het vorige scherm te navigeren of om naar de instellingen te gaan.

[titel en naam] 21 Visuals applicatie: FunFacts

[titel en naam] 22

[titel en naam] 23 7 Literatuurlijst Froot.nl. (z.j. ). Homepage. Geraadpleegd op: 21 maart 2013, van: www.froot.nl NYmag. (z.j. ). Homepage. Geraadpleegd op: 21 maart 2013, van: http://nymag.com/