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

Google site

Voor het project bewegen en gezondheid maak je met google sites een eenvoudige site waar je op een logische en aantrekkelijke manier de producten presenteert die je voor dit project maakt. Techniek is bij deze opdracht van ondergeschikt belang.

In de eerste les op 26 september maak je de basisopzet. Vóór de volgende les moet je het volgende af hebben:

  • 4 werkende menu-items
  • kleuren en lettertype van de site aanpassen
  • inhoud plaatsen op de 4 “pagina’s.” Gebruik tenminste tekst, afbeeldingen en een you-tube video.

Single Page Parallax | opdracht 2

Maak een website waarbij alles op een lange ‘page’ staat. Door middel van verschillende scrollsnelheden ga je naar de volgende menu-items / rubrieken van de site.

De complete opdracht kun je als pdf downloaden

Acrobatschermopname001

Een werkend voorbeeld staat hier: SinglePage Parallax voorbeeld

Full Page Parallax

Een geavanceerd versie waar de hoogte en breedte zich aanpast aan de afmetingen van je browservenster: Full Page Parallax