Website bij tijdschrift

Introductie
- joost.kahmannhu.nl + Facebook
- wie weet wat van Photoshop?
- communicatieafspraken
Internet
- Kenmerken van dit medium
  - World Wide Web => netwerking + crossmediaal + narrowcasting
  - interactief => vraaggestuurd + vraaggericht
  - digitaal => multimediaal + beelddenken
- Bronnen
  - Hoi, Instituut voor Media Auditing
    MissMag kent alle tijdschriften
    Sanoma Media
    Vakbladen met proefabonnementen
    Wikipedia - tijdschriften
Webdesign
- Stappenplan
  - Een opdracht
    - De Briefing
      Wie wil wat? Met welk doel[en], voor welke doelgroep[en]?
      Gaat het om informeren of communiceren?
      Welke voorwaarden: beschikbare mensen, middelen, materiaal en tijd.
    - De debriefing
      Wat heb je als opdrachtnemer te bieden? En wat niet?
      Taakverdeling tussen opdracht gever en ~nemer.
      Overeenstemming over begrippen, uitwerking en vervolgafspraken.
  - Functioneel ontwerp
    - Wat gaat de website bieden en aan wie?
      Begin met een klare omschrijving van doel en doelgroep.
      Vervolgens bijvoorbeeld: inhoudelijke onderwerpen, de verschillende multimediale vormen, gewenste communicatie, betaalfunctie, forum, agenda/kalender, formulieren [met functie], colofon, contactgegevens, taalkeuzes, en zo meer.
      Schrijf álles op, zo compleet en eenduidig als mogelijk.
  - Logisch ontwerp
    - Ordening aanbrengen in de functionaliteiten voor de onbevangen sitebezoeker.
      Verbeeld je ordening in een flow chart, argumentatieboom, stroomschema, mindmap, sitemap of andere schematische weergave.
  - Technisch ontwerp
    - De nodige hard- en software om de website mogelijk te maken. En voor de redactie natuurlijk. Zoals opslagruimte voor alle media en alle gewenste formaten.
      Dit ontwerp leidt bijvoorbeeld tot een lijst van eisen aan een Content Management System.
  - Visueel ontwerp = vormgeving voor beeldscherm
    - De vorm is gescheiden van de inhoud; form follows function
      ·> zie verderop: Vormgeving
  - Bouwen
    - Voordat de bouwwerkzaamheden beginnen is het gangbaar om met de opdrachtgever alle bovenstaande ontwerpen door te nemen. En een tussentijdse betaling af te rekenen.
      Deze presentatie is zo degelijk dat, wanneer een andere webbouwer de klus verder uitvoert, het eindresultaat min of meer hetzelfde is.
      Een aanpassing in een van de ontwerpen heeft consequenties voor alle andere ontwerpen.
      Maak ook duidelijke vervolgafspraken over wie welk materiaal aan gaat leveren. En wie de auteursrechten regelt. En, belangrijk, over de definitieve oplevering. Anders blijf je bezig.
    - Werkwijze: materiaal verzamelen, bewerken voor het web en samenvoegen.
      Eerst een werkend prototype presenteren aan de opdrachtgever.
      Neem veel tijd om te testen. In verschillende browsers, op verschillende besturingssystemen.
  - Publiceren
    - Vooraf regelen: rechten voor auteur, uitgever, geportreteerde, e.d.
      Search Engine Optimalisation
      Maak vervolgafspraken voor de redactie en het technisch onderhoud.
      ·> zie verderop: Redactie
- Bronnen
  - Customer Media: Adformatie.nl, Customermedia.nl, Custo.be, Folders en kranten.nl, Infonu.nl, Labelmag.nl, Leerstoel Customer media, Propaganda.be, Redactiepartners.nl, Sanoma media, Scholieren.com, Slideshare.net, Smin.nl,
  - Web 1.0-2.0-3.0: Erwin Penders[2009], Frankwatching[2009], Increatie[2008], iSource[2010], LeerWiki,
Vormgeving
- Randvoorwaarden
  - Hardware
    Verbindingssnelheid en bestandsgrootte, cpu-snelheid, monitor, beeldschermresolutie [1024 x 768 px -> 955 x 600]
    Ook voor email, mobiel, smartphone, beamer, tv, e-reader, pdf, print en zo meer
    iPad: dikke vinger bediening
  - Software
    HTML + PHP + CSS + img + javaScript [jQuery] + audio + video + flash + ...
    Afbeeldingen worden altijd gecomprimeerd voor het web
    Besturingssystemen [met fonts] + interpreterende browsers + players
    Wisselende standaarden: World Wide Web Consortium (W3C)
    CMS: Drupal, Facebook, Joomla, Ning, Superdesk, TYPO3, WordPress, www.cmsmatrix.org
  - Organisatorisch
    Communicatiebeleid: huisstijl, beschikbare ruimte, redactieprotocollen,
    Beschikbare middelen: eigen materiaal, collega's, auteursrechten [maak 5-jaren planning]
- Geef vorm: het principe
  - HTML was oorspronkelijk voor de minimale opmaak van wetenschappelijke documenten. Aan platte tekst worden voor de structuur tags toegevoegd. Zie broncode.
  - Broncode
    - <html>
      <head><title>Website bij tijdschrift</title>
      <link type="text/css" rel="stylesheet" media="screen" href="css/style.css" />
      </head>
      <body>
      <h1>Kop van artikel</h1>
      <p>platte tekst</p>
      </body>
      </html>
  - HTML elementen
    <body> <h1> - <h6> <p> <ol> <table>
    <a> <strong> <em> <img>
    voor CSS: <div> en <span> met onderscheidende #id en .class
  - Basismateriaal in HTML is de division <div>, rechthoekige vlakken die onder, naast en over elkaar te plaatsen zijn. Met eigen grootte, voor- en achtergrondkleur, achtergrondafbeelding, transparantie, schaduw, padding, border en margin. De inline <span>
    Een serie items, bijvoorbeeld in een menu, staat meestal gegroepeerd in een lijst.
  - Het stijlen van de inhoud werkt met Cascading Style Sheets.
    Een webpagina kan meerdere stylesheets hebben: van de hele site, van de rubriek en voor vertoning via beeldscherm, print, braille, tv, handheld en projection.
    Zo kan een document op beeldscherm het broodfont Arial hebben en als print Helvetica.
    In de <head> van de webpagina staan de linkjes naar de stylesheets.
  - CSS koppelt stijldefenities aan HTML tags. Bijvoorbeeld:
    body { background-color:#003366; }
    a { text-decoration:none; }
  - In CSS kun je een class maken:
    .rood { color:#cc0000; background-color:#ccccff; font-family: Impact, sans-serif; }
    
    In HTML koppel je die class aan een of meer tags:
    <span class="rood">Deze regel heeft een uitzonderlijke stijl</span>.
    Het resultaat in de browser is dan: Deze regel heeft een uitzonderlijke stijl.
- Compositie
  - Vormgeven is indelen: verbinden en scheiden
    En ordenen: volgorde, voor- en achtergrond, overzicht, contrast, herkenbaarheid,
    En sfeer: ruimte, ritme, kleur, rondingen, typografie, rust
    Wat is belangrijk?
  - Navigatie
    Drukwerk kent een inhoudsopgave, hoofdstukindeling en paginanummering zodat de lezer zich kan oriënteren.
    Op iedere pagina van een website moet herkenbare navigatie te vinden zijn. Deze biedt overzicht, ordening en toegang tot de andere pagina's van de site.
    Hoe ga je dat voor je site organiseren? Horizontaal of verticaal menu? Uitklapbaar submenu of gelaagd? Een kruimelspoor, sitemap, zoekfunctie? En hoeveel ruimte krijgt dat alles?
- Typografie voor het web
  - Naast het sturen van de tone of voice gaat het in journalistieke producten altijd om de leesbaarheid. Verder zijn er veel variaties mogelijk. Waarbij het advies is om maximaal drie verschillende lettertypen te gebruiken.
    In te stellen zijn: lettergrootte, regelafstand, letterafstand, woordafstand, klein kapitaal, inspringende eerste regel, inspringende alinea, vet, cursief, regellengte, kolombreedte, uitlijnen en uitvullen. En natuurlijk de kleur van tekst en de achtergrond.
    Zorg, door met deze instellingen te varieren, uit te komen op 50 tot 55 tekens, 10 tot 12 woorden per regel.
  - Lettertypen
    Gebruik voor de broodtekst veilige webfonts: beschikbaar op iedere computer.
    Times New Roman [win] en Times [mac]: The quick brown fox jumps over the lazy dog 1234567890
    Arial [win] en Helvetica [mac]: The quick brown fox jumps over the lazy dog 1234567890
    Georgia: The quick brown fox jumps over the lazy dog 1234567890
    Verdana en Geneva: The quick brown fox jumps over the lazy dog 1234567890
    Trebuchet MS: The quick brown fox jumps over the lazy dog 1234567890
    Impact: The quick brown fox jumps over the lazy dog 1234567890
    Comic Sans MS: The quick brown fox jumps over the lazy dog 1234567890.
    Steeds meer fonts zoals Verdana worden gemaakt voor beeldscherm. Het bestaat uit meerdere fonts, die, afhankelijk van de lettergrootte, te zien zijn.
  - Meer lettertypen
    Er zijn steeds meer mogelijkheden om lettertypen te embedden in je site. Je maakt dan een link naar Microsoft WEFT, Google's Webfonts, Adobe's Typekit of Opentype Fonts. Van daaruit worden de fonts in de browser van de bezoeker geladen.
    En dan maar hopen dat de browser van de bezoeker er weg mee weet.
    Deze pagina gebruikt Calibria.
- Kleuren voor het web
  - De RGB kleuren mengen anders dan de CYMK kleuren voor drukwerk.
    Maak gebruik van de 216 veilige webkleuren, zonder dithering [Een proces waarbij tussenliggende informatie wordt berekend uit de aangrenzende zodat een geleidelijker overgang ontstaat.] Websafe biedt minder keus dan web smart en unsafe.
    Hou altijd het contrast tussen voor- en achtergrond in de gaten. Niet iedereen heeft zo'n toffe monitor als de gemiddelde designer.
  - Kleurcodes: [hexadecimale] color codes RGB
    - Kleurenkaart met veilige webkleuren
- Beeldgebruik
  - Afbeeldingen zijn op het web vrijwel altijd losse bestanden. De kwaliteit hoeft niet zo hoog te zijn als voor drukwerk, 96 ppi voldoet. Dat is veel minder dan de megapixel kwaliteit in de fotografie. Een foto, met eenvoudige camera genomen, is veel groter dan 1024 x 768 en al snel zwaarder dan 2000kb.
    Ter vergelijking: deze hele html pagina, inclusief alle tekst en codes, is nog geen 50kb. De twee bijbehorende stylesheets samen 8kb. Hoe groter een bestand des te langer duurt het downloaden.
    Een afbeelding verkleinen is daarom de eerste stap. Schaal je een foto tot de helft van de oorspronkelijke breedte dan neemt haar 'gewicht' af tot 1/4 van de oorspronkelijke bestandsgroote.
    Compressie van de afbeelding is de tweede stap om de totale inhoud van een website beperkt te houden. Bewaar altijd je originelen en bewerk een kopie.
  - Compressie formaten voor het web:
    • bitmap: bestand.gif, bestand.jpg en bestand.png; dus vooraf op maat maken!
    • vector: bestand.swf;
  - Visualiseren is troef voor internet. Google op 'free icon sets' levert veel inspiratie op.
  - Interessant journalistiek onderwerp: mensen.
    De meeste camera's stellen scherp op het centrum van het beeld. Dat levert bij portretten vaak een saai plaatje op. Een nieuwe uitsnede maakt de foto sterker. Photoshop biedt de gulden-snede in haar crop tool. Handig.
    Op een beeldscherm is een afbeelding vaak klein. Laat daarom vooral zien waar het om gaat. Ga zo dicht mogelijk op je onderwerp zitten.
- Bronnen
  - • usability: Jacob Nielsen, vector vs pixel, Eye tracking,
    • hulpmiddelen: PixelStick [mac], screen ruler [windows], kleurenmeter [mac]
    • tekst: Web safe fonts,icon fonts, veilige webfonts, webfonts, leesbaarheid, Lorem Ipsum, Lesbarkeit und Ästhetik,
    • font: Dyslexi, Ecofont, waarom Comic Sans, effectieve fonts [onderzoek.pdf],
    • kleuren: esthetica, hexadecimale codes, mengen RGB vs CYMK, mengen, web kleurenschema's, Color Scheme Designer, kleur-verzadiging-helderheid,
    • beeld: dpi en ppi, Graphics on the web,
    • auteursrechten: VillaMedia, HU,
    • stijlgids: Hogeschool Utrecht, Rijksoverheid, Drempelvrij,
    • voorbeeldig: Zen Garden, icons, infografieken voor metro, flash banner, html+css+jQuery-site,
    • handleidingen: W3 schools, webdesign.org,
    • validering: Markup validation, CSS validation,
Redactie
- De inhoud: bezoekers kijken liever dan ze lezen.
  - Webschrijven: lezen van beeldscherm is een andere ervaring dan van papier, krant of tijdschrift. Vandaar:
    - • bied overzicht; de titel, tussenkopjes en beeldmateriaal geven de bezoeker argumenten om te gaan lezen of om weg te klikken
    - • bouw een artikel oprolbaar op, het belangrijkste eerst
    - • na de lead plaats je 'lees verder', zodat niet het hele artikel in de overzichtspagina's staat
    - • schrijf kort en krachtig; één gedachte per alinea is het uitgangspunt
    - • vergroot de leesbaarheid door witregels tussen alinea’s, duidelijke tussenkopjes, aanwezig beeldmateriaal, streamers en door het gebruik van lijsten bij opsommingen
    - • kopiëren van andere sites vervangen door verwijzen naar andere sites;
  - Beeldelementen: denk niet alleen aan foto's, ook aan titels, koppen, streamers, lijntjes, iconen, pictogrammen, infografieken [Infosthetics], Wordle en tabellen.
  - Multimedia: maak gebruik van Youtube, Vimeo, DailyMotion, Slideshare, Soundcloud, chatboxen, Flickr, Scribd, Prezi, Tumblr, Squidoo, Ustream, podcast, enz.; op maat van de doelgroep.
  - Omdat vaak meerdere mensen aan een website werken, heeft het voordelen om een duidelijk redactiestatuut te gebruiken.
- Rechten
  - Gebruik alleen foto's op je website waarvan je zeker weet dat je ze mag gebruiken!
    Degeen die publiceert, die op 'upload' of op 'publiceer' klikt, is verantwoordelijk.
  - Foto's die je "zomaar" aantreft op het web, mag je alleen gebruiken als dat nadrukkelijk vermeld staat. Of als ze zijn voorzien van een "Creative Commons" licentie. Lees dan de betreffende CC-licentie (er zijn varianten) om te zien of naams- of bronvermelding verplicht is, en of je de foto mag bewerken.
  - Zorg dat je bij twijfel altijd schriftelijk toestemming hebt.
  - Hoe kom je wel aan "vrije" foto's?
    In Google Images kun je onder "Geavanceerd zoeken" kiezen voor "Gebruiksrechten": "Gelabeld voor hergebruik"
    In Yahoo Images kun je onder "Filters" aanvinken: "Creator allows reuse".
    In Flickr kun je onder "Advanced search" kiezen voor: "Only search within Creative Commons-licensed content"
    Of: Resources Graphics, icoontjes, Stock.XCHNG,
- Public Relations, je site laten vinden
  - SEO: Google centrum voor webmasters, Basisbeginselen voor webmasters
    Gebruik van trefwoorden in <h1>heading</h1>, in title met logische opbouw en natuurlijk in de tekst.
    Voorzie afbeeldingen van een goede alt-tekst en/of title-tekst.
    Gebruik tekstueel duidelijke hyperlinks. En
  - PR: heb contact met je doelgroep[en] over je website via de vele andere kanalen:
    SNS, Socrative, Wiggio, Hallo!, Mindz, kranten, tijdschriften, vakbladen, radio, tv, reclame, advertorials, banners en zo meer.
    Hoe meer links naar je site deste beter.
  - Web banner: standaardmaten
- Gebruikersonderzoek
  - Dit onderzoek doe je om er achter te komen of de website zo goed is als je bedacht hebt. Of de vormgeving de gebruikersvriendelijkheid niet in de weg zit. Of dat wat belangrijk is ook daadwerkelijk als belangrijk wordt gepresenteerd.
    De onderzoek gebruik je om je website te vervolmaken.
  - Mogelijkheden:
    · real time onderzoek: ga naast een onervaren gebruiker zitten, geef deze bepaalde opdrachten en observeer het gedrag van de gebruiker.
    · Dribbble: leg jouw werk voor aan andere designers
    · Eyetracking [heatmap en scan path]
    · Installeer software voor de registratie van clickstreams
    · Waarmerk Drempelvrij: door een website volgens (internationale) normen te bouwen is de site ook bruikbaar voor mensen met een functiebeperking. Motorisch gehandicapten die geen muis vast kunnen houden kunnen een website dan met het toetsenbord bedienen. Blinden kunnen werken met apparatuur, die de tekst op het scherm voorleest. Er zijn braille leesregels die de informatie in braille weergeven. Er zijn browsers ontwikkeld die volledig spraak-gestuurd zijn.
    Om het waarmerk te krijgen laat je je website inspecteren.

Opdrachten

Opdracht a: kloppen je verwachtingen
- Bekijk met 2 personen de openingspagina's van de websites van 4 verschillende tijdschriften:
  • graag twee vakbladen en twee andere; de titel begint met een ...
  • beschrijf samen zo volledig mogelijk wat je verwacht te vinden op de openingspagina's
  • kijk zelfstandig niet langer dan 6 seconden, zonder te scrollen; sluit dan het venster
  • wat heb je gezien: noteer per persoon zo duidelijk mogelijk waar je aandacht naar toe getrokken werd
  • kijk samen uitgebreider naar de openingspagina en noteer de verschillen met jullie verwachtingen.
- Volgende week presenteren jullie de resultaten
Opdracht b: kloppen je verwachtingen
- Bekijk met 2 personen de openingspagina's van de websites van 4 verschillende tijdschriften:
  • graag twee vakbladen en twee andere; de titel begint met een [andere letter] ...
  • beschrijf samen zo volledig mogelijk wat je verwacht te vinden op de openingspagina's
  • kijk zelfstandig niet langer dan 6 seconden, zonder te scrollen; sluit dan het venster
  • wat heb je gezien: noteer per persoon zo duidelijk mogelijk waar je aandacht naar toe getrokken werd.
- We gaan een stap verder, met dezelfde 4 websites:
  • weer vooraf: welke functionaliteiten verwachten jullie allemaal te vinden
  • kijk dan samen uitgebreider naar de website en
  • noteer de verschillen met de werkelijkheid
- Volgende week presenteren jullie de resultaten

Opdracht c: debriefing en functioneel ontwerp

Een website bij een tijdschrift over customer media.

In groepjes van 4:

Silvie + Eva + Else + Jasmijn
Jetske + Alexander + Sanne + Jolanda
Berber + Martijn + Jelmer + Selma

Annelies + Ronald + Rowan + Sjoera
Linde + Gijsbert + Peter + Remco
Derek + Jamaica + Gerben + Willem

1 • formuleer zo duidelijk mogelijk het doel van de komende website
--- Wat valt er te beleven? Waarom komen de bezoekers terug?
Doel: Zakelijk portal over customer media. Met eigen community.
De site biedt nieuws, informatie, agenda, workshops, webshop en advertenties.
De community biedt: netwerk, forum, vacatures en korting.
Naast de site worden Twitter, Facebook en/of LinkedIn ingezet.
2 • formuleer zo duidelijk mogelijk de doelgroep[en]
--- Wie ga je aantrekken en binden?
Doelgroep: álle medewerkers aan het productieproces met betrekking tot customer media.
Sak: iedere communicatieprofessional die direct of indirect betrokken is bij de inzet van customer media/content voor het binden en vinden van relaties/klanten.
3 •
4 • maak per groepje een lijst met functionaliteiten voor de site; kompleet én duidelijk
4.a = Must have:
4.b = Should have:
4.c = Could have:
4.d = Would have:
5 • maak per groepje een ontwerp voor de openingspagina; printen op A3 formaat

Opdracht d: het ontwerp en de debriefing

Een website bij een tijdschrift over customer media.

In de subsubgroepjes van 4:

• Silvie + Eva + Else + Jasmijn
• Jetske + Alexander + Sanne + Jolanda
• Berber + Martijn + Jelmer + Selma

• Annelies + Ronald + Rowan + Sjoera
• Linde + Gijsbert + Peter + Remco
• Derek + Jamaica + Gerben + Willem

1 • [her]formuleer zo duidelijk mogelijk het doel van de komende website
-- Op basis van het bespreken van het eerste functoneel ontwerp, bedenken jullie opnieuw wat de doelen van de website zijn. Noteer deze zo duidelijk mogelijk.
2 • [her]formuleer zo duidelijk mogelijk de doelgroep[en]
-- Afgelopen week is gediscussieerd over de doelgroep voor het tijdschrift. Geldt dat ook voor de website? Noteer opnieuw zo duidelijk mogelijk de doelgroep voor de website.
3 • maak de lijst met functionaliteiten kompleet én duidelijk.
- prioritering:
-- 3.a = Must have:
-- 3.b = Should have:
-- 3.c = Could have:
-- 3.d = Would have: (hoeft niet perse)
4 • maak per groepje een ontwerp voor de openingspagina én voor de openingspagina voor de ingelogde leden.
5 • Donderdag gaan we, apart met subgroep Sanne en subgroep iPad, de functionele ontwerpen en bijbehorende pagina-ontwerpen bespreken.
Zorg daarom dat woensdag om 12:00 uur alle leden van de subgroepen [en Joost] beschikken over alle ontwerpen van de subgroep.
Op 8 december maken we dan, per subgroep,
a. een functioneel ontwerp [doel + doelgroep + geprioriteerde lijst van functies],
b. een logisch ontwerp, en op basis hiervan,
c. een pagina-ontwerpen voor de openingspagina en
d. een pagina-ontwerpen voor de leden-openingspagina.
-> Inleveren: a, b, c en d per email, uiterlijk 12-12-11 om 12:00uur
Sak ontvangt per subgroep: a, c en d. Graag op vrijdag zodat hij zich kan voorbereiden.
Beoordeling op:
· volledigheid
· duidelijkheid van de omschrijvingen
· vormgeving: wat oogt belangrijk, getoonde functionaliteiten, ordening, overzichtelijkheid en leesbaarheid
· onderlinge samenhang

Opdracht e: vaststelling definitief ontwerp na de de-briefing; per subgroep
- 1. een functioneel ontwerp [doel + doelgroep + geprioriteerde lijst van functies],
  2. een logisch ontwerp, en op basis hiervan,
  3. een visueel ontwerp voor de openingspagina
  4. het stijlboek bij het ontwerp magazine
  Met voorpagina, namen van de makers en, indien gewenst, een toelichting.
- -> Inleveren: geprint [2x bij Joost] op 15-12-11
Opdracht f: visueel ontwerp voor beeldscherm 1024 x 768; per subgroep
- Uitgangspunten zijn het functioneel ontwerp, logisch ontwerp en de stijl met stijlbeschrijving van het tijdschrift.
- 1. maak een visueel ontwerp voor de openingspagina.
  2. met in stijlgids voor de website waarin wensen komen te staan als vlakverdeling [maten], typografie [koppen en broodtekst], kleuren, en gebruik van beeld [vormen, logo, foto's].
- -> Inleveren: geprint [2x bij Joost] op 22-12-11
Opdracht g.1: maak individueel ...
- Uitgangspunten zijn het functioneel ontwerp, logisch ontwerp en de stijlgids voor de website. [zie opdracht e]
  En het vastgestelde ontwerp voor de openingspagina en bijbehorende stijlgids. [zie opdracht f]
- Onderdelen
  1. de openingspagina voor fans/leden
  2. een rubriekspagina met veel tekst [b.v. groot artikel]; maak minstens vier letterproeven.
- Maten openingspagina = 1024 x 768
  Maten subpagina's = 1024 x .......
  Inclusief ruimte voor advertenties.
  Gebruik voor de broodtekst alleen veilige webfonts. Voor andere tekst mag je zelf kiezen.
  Gebruik alleen veilige webkleuren.
- -> Individuele bespreking 12-01-12
Opdracht g.2: maak individueel ...
- Uitgangspunten zijn het functioneel ontwerp, logisch ontwerp en de stijlgids voor de website. [zie opdracht e]
  En het vastgestelde ontwerp voor de openingspagina en bijbehorende stijlgids. [zie opdracht f]
- Voeg onderdelen toe:
  3. een subpagina met veel beeld; een presentatie van ± 30 logo's van bedrijven op de CM-markt; maak minstens vier varianten.
  4. de 'events' pagina met agenda/kalender
  5. openingspagina van de webshop
  6. een leden-profielpagina met je eigen profiel
- Maten openingspagina = 1024 x 768
  Maten subpagina's = 1024 x .......
  Inclusief ruimte voor advertenties.
  Gebruik voor de broodtekst alleen veilige webfonts. Voor andere tekst mag je zelf kiezen.
  Gebruik alleen veilige webkleuren.
- -> Individuele bespreking vanaf 12-01-12
Opdracht h: [facultatief] maak een banner voor jezelf
- Mogelijk heb je strats je eigen bedrijf. Maak daarvoor een banner.
  En plaats de banner in je ontwerpen.
Opdracht i: week 09 = 19-01-12 - eenvoudig gebruikersonderzoek
- Het doel van de opdracht is om te laten zien hoe kritisch je op jezelf bent. En hoe je met opmerkingen van anderen omgaat.
- ·> presenteer [beamer] aan je subgroep jouw pagina's [naar keuze] en
  ·> stel gericht vragen over de onderwerpen waar je antwoord op wil.
  Het kan gaan over de vraag Wat is belangrijk?, over de aangeboden functionaliteiten, de geschiktheid voor de doelgroep, de navigatiestructuur, de toegankelijkheid en gelaagdheid, de indeling van een pagina, de lettertypen, het kleurgebruik, het beeldgebruik en zo verder.
- Donderdag 19 januari:
  • van 10:30 - 11:30: de groep iPad = van Annelies t/m Willem
  • van 11:30 - 12:30: de groep Sanne = van Alexander t/m Selma

Presentatie: week 10 - deel 1 = met beamer op papier
- Laat zien hoe je het doel van de CM website hebt uitgewerkt. En hoe je de doelgroep[en] aan je site gaat binden.
  Onderbouw je keuzes met duidelijke argumenten.
- Onderdelen
  ·> de openingspagina CM website
  ·> de openingspagina voor fans/leden
  ·> de rubriekspagina met veel tekst
  ·> de rubriekspagina met veel beeld
  ·> de 'events' pagina met agenda/kalender
  ·> openingspagina van de webshop
  ·> een leden-profielpagina met je eigen profiel
  ·> een andere rubriekspagina naar keuze
  ·> eventueel je eigen banner
- De 'andere' subgroep kiest uit de 12 aangeboden ontwerpen de meest geschikte ontwerpen. En zij beargumenteert haar keuze.
- Beoordeling presentatie op:
  · toelichting op de gekozen vormgeving
  · samenhang van de verschillende onderdelen
  · gebruikte argumentatie door presentator m/v en de beoordelaars.
Inleveren voor beoordeling: week 10 = op papier [1 exemplaar] én digitaal: je bijbehorende InDesign of Photoshop bestand.
- Laat zien hoe je het doel van de CM website hebt uitgewerkt. En hoe je de doelgroep[en] aan je site gaat binden.
  Onderbouw je keuzes met duidelijke argumenten.
- Onderdelen
  ··> de openingspagina CM website
  ··> de openingspagina voor fans/leden
  ··> de rubriekspagina met veel tekst plus de vier pagina's met letterproeven
  ··> de rubriekspagina met veel beeld plus de vier beeldvarianten.
  ··> de 'events' pagina met agenda/kalender
  ··> openingspagina van de webshop
  ··> een leden-profielpagina met je eigen profiel
  ··> een andere rubriekspagina naar keuze
  ··> eventueel je eigen banner
  ··> stijlboek voor website: gebruikte maten, lettertypen, kleuren en zo meer
  ··> verantwoording van gemaakte keuzes.
- Beoordeling papieren versie op:
  ·· uiterlijke verzorging
  ·· omgang met de opdracht [opdracht e en opdracht f]
  ·· volledigheid
  ·· duidelijkheid van de beschrijvingen
  ·· vormgeving: wat oogt belangrijk, getoonde functionaliteiten, ordening, overzichtelijkheid en leesbaarheid
  ·· onderlinge samenhang van functioneel, logisch en visueel ontwerp
  ·· juiste gebruik van maten, beeld, lettertype en kleuren
  ·· gebruikte argumentatie
Evaluatie van de lessen webdesign
- + over de inhoud: het ontwerpen van een website bij een magazine
- + over de organisatie: het lesprogramma enzo
|
- ||
  - |||
    - ||||
      - |||||
        ··· ···· ············· ·· ···· · ······.
      - |||||
        ·· ·········· ···· ·· ·· ·· ·······.

RV - website bij tijdschrift