1 Site-analyse Er zijn veel manieren waarop je een site kunt analyseren. We beperken ons hier tot de homepage. In deze opdracht gaan we 2 manieren toepassen: 1 Analyse van de paginastructuur 2 Analyse van de sfeer / uitstraling Paginastructuur Met paginastructuur wordt bedoeld de elementen waaruit en de manier waarop de webpagina is opgebouwd. Elementen die je kunt tegenkomen Logo Mag niet ontbreken. Staat vaak op de belangrijkste plaats links boven. Is meestal ook de homebutton. Eyecatcher The 5 Second Rule: 5 seconde de tijd om een bezoeker een reden te geven om niet weg te gaan. Bijvoorbeeld door antwoord te geven op een vraag, iets interessants aan te bieden, iets interessants te laten zien. Navigatie Kan in de vorm van tekstknoppen, rollovers of afbeeldingen. Steeds vaker met een (hidden) uitklapmenu waardoor de informatie al gecategoriseerd wordt. Voor mobiele devices wordt het hidden menu weergegeven met het hamburgericoontje. Zoekvenster Hulp bij (specifieke) navigatie. Welkomstekst Belangrijk als startpunt, versterkt de navigatie en wekt vertrouwen. Social media Like- en sharebuttons maar ook Twitter-, Instagram-accounts, etc. rechtstreeks op een website. Er wordt gebruik gemaakt van knoppen in een oorspronkelijk design of een variaties in de stijl van een site. Call to action Zet een bezoeker aan om iets te doen. Bijvoorbeeld iets te kopen of iets te bekijken. De plaats van een call to action is boven de fold (de vouwlijn vanaf waar je gaat scrollen). Widget Ruimte in kolommen voor social media, links, afbeeldingen, extra menuutjes, etc. De term widget wordt ook voor applicatiemenuutje gebruikt. Maar dat bedoelen we hier niet. Kolommen staan meestal links en rechts van een pagina maar kunnen ook in header en footer staan. Contactgegevens Liefst op iedere pagina. Staan daarom vaak in de footer.
Banner Meestal een JPEG o fgif met standaard afmetingen. Door gebruik te maken van kleur en animaties wordt (vaak door een externe adverteerder) geprobeerd de aandacht van mensen te trekken. Kan ook als afleidend ervaren worden. Slider Kan een visueel overzicht te geven van de mogelijkheden binnen de website of van de producten en diensten die er geboden worden. Video Een embedded (ingesloten) video is een snelle en aantrekkelijke manier om een verhaal te vertellen. Belangrijk voor SEO. Afbeelding Ter illustratie of verduidelijking en ook weer belangrijk voor de zoekmachines door te kiezen voor afbeeldingen die met een zoekwoord te maken hebben. Titel en tussenkopje Belangrijk als tags voor zoekwoorden en accent in informatie. Keurmerk Review - Voordeel- of weggeefactie - Newsitem Zie voor uitleg de tekstkaders. 2 Building trust Bijvoorbeeld door het benoemen van de mogelijkheid om gratis te verzenden, of terug te sturen, door reviews, contactmogelijkheden maar ook door het plaatsen van keurmerken. Leadership = sharing Marktleider is niet langer een geweldige positie bij een gerespecteerd bedrijf. Het betekent steeds vaker actief zijn in het delen van praktische ervaring met anderen. Het delen van praktische adviezen en kennis met anderen laat zien dat jij en je bedrijf weet waar je het over hebt. Delen gebeurt vaak door het weggeven van een whitepaper of ebook. Keep it fresh Houd een site actueel bijvoorbeeld door het plaatsen van een newsitem of recente twee. Een site die recent geüpdate is suggereert ook up tot date te zijn met de nieuwste ontwikkelingen in de branche.
3 Layout De manier waarop de verschillende elementen geplaatst zijn. Het is van belang dat er goed wordt omgegaan met de ruimte op het scherm. Over elke millimeter van een resolutie moet nagedacht worden. Dat betekent niet dat er geen witruimte in mag voorkomen. Te veel informatie op één pagina kan ondervangen worden met linkjes naar andere pagina s maar ook met korte alinea s en opsommingen. Aandachtspunten zijn: typografie, tekstgrootte, interlinie, kleurgebruik, duidelijke knoppen voor conversie. F Een website bekijkt men in F vorm van boven naar beneden. In het Westen zijn we gewend van links naar rechts te lezen en van boven naar beneden. Hierdoor wordt door onze hersenen eigenlijk automatisch een prioriteit gegeven aan de content bovenaan en links op een pagina. Dat is de reden, dat een menu jaren lang links stond, maar inmiddels is men tot het inzicht gekomen, dat een menu links blijvend de aandacht weghaalt van de belangrijkste content. De beste layout voor de pagina op een goede website is een menu aan top, niets links en rechts uitsluitend secundaire informatie. Tot wellicht over vijf jaar de inzichten opnieuw zijn aangepast.
4 Trends met betrekking tot layout Extreme eenvoud / Flat design Bij flat design ontbreekt gesuggereerde diepte, het is zoals de naam al doet vermoeden plat. Effecten als schaduwen en highlights zijn uit den boze. Dikke witte lijnen Er moet ergens een kader omheen of lijntje tussen. Krijtwit en tenminste zes pixels breed. Nadruk op het lettertype Handgeschreven fonts, mix & match lettertypes en grote aanwezige letters. Slogans zijn kort en zetten aan tot actie. Een onderscheid zal visueel gemaakt worden door grote dikke letters in combinatie met kleinere dunne letters. Transparante lagen Transparante lagen over een afbeelding of onder een tekst zodat de tekst goed leesbaar blijft en de foto niet volledig wordt verstoord. Zie medialink. Spookknoppen Geen schreeuwerige buttons. Door het gebruik van ghost buttons oftewel spookknoppen voorkom je dat de afbeelding wordt verstoord en verwijs je de bezoeker naar de juiste informatie. Raster lay-out Waar Pinterest mee begon, hebben webdesigners met websites in hun grid-achtige lay-outs overgenomen. Deze 'hokjes'lay-out stelt gebruikers in staat om elk item gemakkelijk te bekijken op een zeer gestructureerde en logische manier. Een mooi voorbeeld is de website van Lays, waar ook veel gebruik gemaakt wordt van egale kleurvlakken en een opvallende lay-out in blokken.
5 Opdracht 1a 1b Paginastructuur Maak van 4 verschillende sites een screenshot van de homepage. Maak van iedere pagina een wireframe. Benoem hierin de elementen die je tegenkomt. Een wireframe is een visuele manier om een paginastructuur weer te geven. 1c Beschrijf de layout van de verschillende homepages. Maak bij je beschrijving gebruik van de begrippen: Flat design - Witruimte Layout in Fvorm Witte lijnen Lettertype Transparante lagen Spookknoppen - Rasterlayout
6 Sfeer / uitstraling Sfeer en uitstraling spelen in op gevoel. Dit wil niet zeggen dat er niet concreet over nagedacht wordt. Een identiteit of huisstijl maakt een merk zichtbaar en concreet. Dat gebeurt door het publiek in contact te laten komen met uitingen die op elkaar zijn afgestemd zoals: het logo, visitekaartjes, websites, advertenties, bedrijfskleding, verpakkingen, etc. Een huisstijl is het uiterlijk van een organisatie. Met uiterlijk kun je laten zien wie of wat je bent => Identiteit! Zonder duidelijk gezicht weet niemand met wie hij zaken doet. Op de momenten dat de eigenaar / werknemer er zelf niet is om over het bedrijf te vertellen moet de huisstijl het even over kunnen nemen. Een website is een belangrijk communicatiemiddel waarop de huisstijl zichtbaar moet zijn. Voordat een ontwerper aan het werk gaat stelt een organisatie vast wat de gewenste identiteit en imago zijn. Wie is de doelgroep? Wat zijn hun interesses? Waar bevinden zij zich? Hoe moeten mensen de organisatie zien? Welke kernwaarden zijn daarin belangrijk? Kernwaarden zijn de belangrijkste waarden van een bedrijf of organisatie. Kernwaarden worden ook wel basiswaarden genoemd. De kernwaarden van een bedrijf zijn dus de punten waar de organisatie naar streeft. Bijvoorbeeld: Walt Disney Geen cynisme; Het koesteren en verbreiden van gezonde Amerikaanse waarden; Creativiteit, dromen en fantasie; Fanatieke aandacht voor consistentie en details; Bewaren en beheersen van het imago van Disney. Sony Verheffing van de Japanse cultuur en het nationale aanzien; Een pionier zijn, niet anderen volgen: het onmogelijke voor elkaar brengen; De capaciteiten en creativiteit van het individu aanmoedigen. Koning Willem I College Wij zijn een community college; Wij spreken alle talenten aan; Wij voeden creatief denken; Wij verleggen grenzen; Wij gaan voor een betere wereld. Belangrijke huisstijlelementen 1 Logo (combinatie beeldmerk en woordmerk) Pay-off (soort slagzin die de identiteit van het merk of de organisatie versterkt - kan ook een descriptor zijn met informatie over het merk of bedrijf). 2 Typografie (Lettertypes tekstgrootte, interlinie) 3 Kleurenschema. Vaak wordt uitgegaan van 1 of 2 hoofdkleuren en enkele ondersteunende / versterkende kleuren. Uiteraard moet(en) de hoofdkleur(en) passend zijn voor het merk / de organisatie. Er is meer aandacht voor minder felle kleurcombinaties. De trend zijn serieuze kleuren, veel donkergroene, donkerblauwe en paarse tinten met lichtere variaties. De reden voor deze verschuiving staat in nauw verband met de vintage revival. 4 Stijlelementen (grafische elementen uit de huisstijl die op een andere manier toegepast kunnen worden.) 5 Fotografie (Een keuze voor stijl van fotograferen, type foto's, eventuele bewerkingen).
7 Opdracht Sfeer en uitstraling 2a 2b 2c Maak van 4 verschillende sites een screenshot van de homepage. Maak van iedere pagina een sfeerbeeld. Onderdelen die daarin zeker aan bod moeten komen: Logo - Typografie - Kleuren Stijlelementen Fotografie Geef per sfeerbeeld een beschrijving van de beoogde doelgroep en achterliggende kernwaarden.