Hoe haal ik mijn bezoekers over… – 3

Als mediavormgever is het belangrijk dat je een goede website kunt bouwen. Maar hoe haal je de bezoeker over om ook gebruik te maken van je website? Je hebt aan de vormgeving gedacht je hebt de teksten en afbeeldingen goed geselecteerd en de interface werkt ontzettend goed. Wat gebeurt en nu met de site?

Lees en maak deze opdracht

Redesign nieuwssite | 2

De vorige les heb je nos.nl en beta.nos.nl met elkaar vergeleken. Aandachtspunten daarbij waren vorm, structuur, hiërachie en gebruiksvriendelijkheid.

Nu ga je zelf een redesign maken van één van de volgende sites: “Redesign nieuwssite | 2” verder lezen

Boxmodel

Ieder element in HTML kan worden gezien als een rechthoekig gebied in de layout, dit noemen we “boxes”. Een box heeft vier belangrijke eigenschappen die het totale oppervlakte bepalen die het element in beslag neemt:

boxmodel

“Boxmodel” verder lezen

Redesign nieuwssite

De komende periode houden jullie je onder andere bezig met het redesign van een nieuwssite. Voordat je daarmee begint ga je eerst onderzoeken welke aspecten daarbij een rol zouden kunnen spelen.

Toevallig wordt op dit moment de website van de nos in een nieuw jasje gestoken. De huidige versie staat (als altijd) op nos.nl en de betaversie kun je bezoeken via beta.nos.nl

Maak een grondige vergelijking van beide versies. Wat is er allemaal gewijzigd, welke wijzigingen springen meteen in het oog en wat valt in eerste instantie minder op? Maak bij je vergelijking onderscheid tussen wijzigingen in

  • vorm
    Bijvoorbeeld: hoe is de verhouding tussen beeld en tekst?  Wat kun je zeggen over kleurgebruik?
  • structuur
    Hoe is de informatie gerangschikt, of met andere woorden: welke verschillende rubrieken of menu-items zie je op de site? Teken 2 sitemaps om dit duidelijk te maken.
  • hiërarchie
    Denk hierbij onder andere aan typografie, grootte, kleurcontrast en symmetrie
  • gebruiksvriendelijkheid / usability

Als je beide versies van de site op bovenstaande punten hebt vergeleken dan beargumenteer je vervolgens of je de wijziging een vooruitgang vindt of niet.

Je hebt voor deze opdracht anderhalf uur de tijd. Aan het eind van de les op vrijdag 7 november lever je de opdracht in via mail: lbrouns[at]mbovmm.nl.

Hanteer deze naamgeving voor de bijlage: MR41A-naam

Iconset – CSS Sprite sheet

Bedenk – Ontwerp – Promoot je eigen iconset

Lees de complete opdracht op  docs.google.com/a/mbovmm.nl/

Voor klas MV43B: Je kunt in dit voorbeeld zien wat je bij stap 3 van de opdracht moet inleveren. Dit stuur je uiterlijk 11 december per mail aan lessenlucbrouns[at]gmail.com. Vermeld je klas in het onderwerp van de mail.

Webfonts -2

Door webfonts te gebruiken heb je veel meer keuze aan lettertypes dan tot voor kort op het web mogelijk was. Er zijn een aantal verschillende manieren om webfonts toe passen. Bijvoorbeeld:

Je kunt bij deze opdracht zelf kiezen welke manier je gebruikt. Als je kiest voor Googlefonts of via de interface van dreamweaver CC dan vind je prima uitleg door de link te volgen.

Voor het gebruik van Fontsquirrel fonts kun je de uitleg in deze lesbrief webfonts volgen.

Schermafbeelding

Taken

Maak zelf een document waarin je 2 webfonts toepast. Stel daarbij minimaal de volgende elementen in:

  1. <body>
  2. <h1>
  3. <h2>
  4. <p>
  5. #header
  6. .introtekst