1 1CASUS LUTJEBROEK TOTAAL WONEN 1.1OPDRACHTOMSCHRIJVING Voor de course eindopdracht van de course Webdesign moet er een website worden gemaakt. Wij, ...
1CASUS LUTJEBROEK TOTAAL WONEN 1.1OPDRACHTOMSCHRIJVING Voor de course eindopdracht van de course Webdesign moet er een website worden gemaakt. Wij, Eric van Blokland en Geert Bos, hebben besloten om een fictieve meubelzaak te nemen als opdrachtgever. Hoewel het bedrijf fictief is, wordt als voorbeeld een bestaande meubelzaak gebruikt. Het bedrijf heet Lutjebroek Totaal Wonen en is gevestigd in Lutjebroek.
2 ANALYSE EN BEELDVORMING 2.1 BEDRIJFSANALYSE Voordat we beginnen kunnen met het ontwerpen van de site, moeten we eerst weten hoe het bedrijf zelf in elkaar zit en wat de wensen zijn van de eigenaren. Hiervoor hebben we een enquete gehouden met de eigenaren. 2.1.1 Algemene informatie Bedrijfsnaam? Internetadres gereserveerd? Aantal medewerkers Globale organisatiestructuur
Complete woninginrichting: Raamdecoratie, meubelen, kleinmeubelen, slaapkamers, vloerbedekking Particulieren en bedrijven (als eindgebruikers) 80 % binnen een straal van 10 kilometer, 15% binnen een straal van 20 kilometer Rest verdeeld over Noord Holland en de kop van Flevoland. Nee Ja, showroom. Nog geen andere vestigingen De klant goede service en kwaliteit leveren tegen een betaalbare prijs. Familiebedrijf, vader op zoon, op… Wil binnen een afzienbare tijd een winkel openen in de grote stad (Hoorn), met daarbij een twee vaste medewerkers (1 verkoper en 1 stoffeerder). Complete woninginrichting
2.1.2 Website algemeen Aanleiding website
Bestaande website Vijf woorden die betrekking hebben op de toekomstige website
Voor de correspondentie was een e-mail-vriendelijke naam nodig, bijvoorbeeld [email protected] ipv [email protected]. Bovendien is de wens dat ook mensen van buitenaf het bedrijf via het internet kan vinden en eventueel bezoeken. (extra reclame). Nee Visitekaartje, routebeschrijving, service uitstralen, rustig, onderhoudsvriendelijk
2.1.3 Doel en doelgroep Doelstelling Website Specifieke boodschap Wanneer website geslaagd Bestaande klanten benaderen middels website Nieuwe klanten trekken Doelgroepbeschrijving Taken websitebezoeker
Klanten laten kennismaken met Lutjebroek Totaal Wonen Duidelijk maken dat service en kwaliteit hoog in de vaandel staat bij het bedrijf Als er een nieuwe klant de zaak binnenkomt nav de website Ja, wanneer er een bepaalde actie is of wanneer er iets opgeruimd moet worden. Natuurlijk Zie paragraaf… 1. homepage bekijken 2. aanbiedingen bekijken 3. routeomschrijving afdrukken 4. eventueel een vraag stellen (afspraak) 5. winkel bezoeken
2.1.4 Look and feel website Gevoel bezoeker website Gewenste uitstraling Bestaande huisstijl, verantwoordelijke uitvoering, maker huisstijl Moet huisstijl worden meegenomen in het ontwerp van de website Websites die aanspreken Websites die niet aanspreken
Welkom, rust Service en kwaliteit gericht Ja, de directrice zorgt ervoor dat bij elke reclame uiting de huisstijl wordt gebruikt. Het ontwerp ligt bij Reclamebureau LMB te Hoorn. Hoeft niet perse, wel graag de kleur handhaven. Google.nl Telegraaf.nl
2.1.5 Interactie Informatie
Webshop Regelmatig nieuws Vacatures op website Zoekmachine op website Mensen die content aanleveren Offline informatie Wie regelt e-mailafhandeling
1. Adresgegevens 2. Routeomschrijving 3. Aanbiedingen/opruiming 4. Assortiment Nee, de klant kan eventueel een opruimingsaanbieding reserveren, maar geen aankopen doen via het internet. Alleen wanneer er een nieuwe aanbiedingsfolder is van de inkoopcombinatie. Eén keer per kwartaal. Nee, voorlopig niet. Nee, de website moet niet al te groot worden (enkele items) Dhr. K.M. Meesters, tevens lid webteam. Alleen de aanbiedingsfolders van de inkoopcombinatie. De directrice neemt deze taak op zich, er is al een sjabloon beschikbaar in Outlook.
Techniek Webruimte beschikbaar Binnen bedrijf databases gebruikt Welke browsers/platformen
Nog niet, is in aanvraag. Hostingprovider is De Heeg. De website gaat draaien op Linux en ondersteunt PHP4, SSL, MySQL. Ja, voor kassasysteem en klantensysteem. Deze informatie mag niet gedeeld worden op het Internet. Alle browsers/platformen, met name Windows.
2.1.7 Onderhoud Intern of extern onderhouden CMS Ervaring mbt website bouwen Opleidingen mogelijkheden Wie wordt verantwoordelijke website
In eerste instantie extern onderhouden, later wanneer het mogelijk is intern onderhouden. Nee, een platte pagina structuur Niemand heeft voldoende ervaringen met het bouwen tot websites. Wel weet de directrice hoe zij e-mails en moet beantwoorden. Zo weinig mogelijk, maximaal 2 man (inclusief directrice) Directrice
2.1.8 Promotie Huidige marketingactiviteiten
Communicatie klanten Idee website promoting
Budget beschikbaar website promotie Medium internet gebruikt binnen verkoop
1. mond-tot-mond reclame 2. advertenties in regionale weekbladen bij acties/meubelshow 3. sponsorbladen van verenigingen Lutjebroek e.o. 4. streekkrant bij acties/meubelshow 5. inkoopcombinatie: adressenvan dealers 6. leveranciers: adressen van dealers 7. huis-aan-huis-folder inkoopcombinatie Lutjebroek e.o. Met klanten praten op de weg (winkelstraat Lutjebroek, Hoorn). Regelmatig schrijven met informatie over hun aankopen. Dealerlinks bij leveranciers en inkoopcombinatie Aanmelden zoekmachines Webadres opnemen op folders, briefpapier, facturen, offertes, memo-blokjes, meetlinten, pennen Bestaande reclame aanpassen in kranten, sponsorbladen Nee, niet aan gedacht Ja, voor het opvragen van prijslijsten, plaatjes van producten, kasten-bestelprogramma, e-mail, bestellingen plaatsen, etc.
DOEL EN DOELGROEP 3.1 DOELGROEP Om te kunnen bepalen welke bezoekers op de website kunnen komen, moet eerst het doelgroep van de bezoekers worden bepaald. Mogelijke klanten die op de website komen: 1. 2. 3. 4. 5.
Plattelands lui, zoals boeren Dorpelingen (Lutjebroek en omstreken) Stedelingen (Hoorn) Passanten Flevolanders (andere kant van de dijk)
3.2 PERSONA Om beter zicht te hebben op de doelgroep zijn hier enkele persona’s gemaakt. Persona’s zijn beschrijvingen van fictieve personen, welke lijken op de potentiële bezoekers van de website.
3.2.1 Frans Wind Persoon Frans Wind is een 40 jaar, wonende in de buurt van Lutjebroek. Frans is agrariër van beroep. Hij woont op een kleine afstand van de winkel. Computergebruik Voor zijn werkzaamheden als boer heeft hij een simpele computer bij de melkmachine waar hij de eigenschappen van de koe invult in voor hem geïnstalleerde programma’s. Tevens heeft hij de beschikking over een computer waarop hij zo nu en dan video’s bewerkt van zijn kleinkinderen. Internet gebruik Voor zijn werk als boer bezoekt hij dagelijks de websites met informatie over de melk en slachtprijzen. Tevens bezoekt hij regelmatig websites met betrekking op het weer en nieuws. Ook maakt Frans gebruik van beursgerelateerde pagina’s om zo nu en dan iets te beleggen, als aanvulling op zijn pensioen. Frans maakt gebruik van een breedbandverbinding. Als een internetpagina te lang duurt (enkele seconden) dan hoeft het voor hem niet meer en gaat hij naar een andere. Zijn favoriete zoekmachine is Google, zijn favoriete nieuwssite is Nu.nl en de site van de lokale nieuwsblad. Tevens is hij lid van Lutjebroek Stentor (lokale nieuwsblad) en van het computerblad Computer Idee. Online shopping Op het gebied van online shopping is Frans geen held. Hij maakt wel gebruik van telebankieren van de Rabo. Alleen voor de kleine boodschapjes, zoals bestellingen van veevoer en een nieuwe stropdas, maakt hij gebruik van de standaard webshops. Over het algemeen wil Frans eerst de goederen zien, voelen, ruiken en proberen, voordat hij overgaat tot aankoop. Wel gebruikt hij het internet om de winkels, waar hij eventueel een aankoop wil gaan doen, te bezoeken en te kijken of er nog speciale aanbiedingen zijn. Het onderhandelen en tot koop overgaan doet hij liever in de winkel zelf. Wanneer de winkel waar hij naar toe wil gaan, niet bij hem in de buurt zit, wil hij graag gebruik maken van een routebeschrijving. Frans is niet in bezit van een navigatiesysteem en heeft een hekel aan zoeken.
Henk Kamps Henk Kamps is 49 jaar oud en woont in Hoogkarspel. In deze zelfde plaats is hij leraar op een basisschool. Varierent geeft hij les aan de groepen 5, 6, 7 en 8. Henk moet nog een beetje wennen aan het internet maar doet erg z’n best. Vooral om mee te kunnen komen met zijn leerlingen. Hij wil weten wat de kinderen allemaal doen met internet en hun eventueel kunnen helpen en waarschuwen voor eventuele gevaren. Tot nu toe is de meeste kennis die heeft afkomstig van zijn leerlingen, maar bij alles wat hij leert, zoekt hij op internet ook naar de achtergronden. Hij kan ondertussen dan ook aardig overweg met de zoekmachines. Via het internet, voornamelijk email, heeft Henk contact met andere basisschoolonderwijzers verspreid over het land. Wanneer Henk iets nieuws wil aanschaffen, met name elektronica, kijkt hij ook altijd op internet om te kijken wat de ervaring van andere zijn met bepaald aparatuur.
3.2.3 Marjan de Boer Marjan de Boer is 25 jaar oud en is kapster. Ze woont en werkt in Enkhuizen. Ze is in deze omgeving opgegroeid en woont samen met haar vriend. Marjan is nog net niet “opgegroeid” met het internet maar maakt er wel al jaren gebruik van en kan dus aardig haar weg vinden. Het gebruik van zoekmachines heeft voor haar geen geheimen meer. Verder is ze al jaren aktief op profielensites en sinds enige tijd ook “hyves”. Ze waardeert het gemak van het vinden van informatie en het in contact blijven met vrienden en kenissen. Veel van haar vriendinnen wonen niet meer in de buurt sinds ze zijn gaan studeren maar dankzij email en chatprogramma’s “spreekt” ze haar vriendinnen nog bijna dagelijks. Een enkele keer koopt ze ook wat op internet maar bij de meeste shops heeft ze toch een onprettig gevoel, tenzij het gaat om bedrijven als KPN of Vodafone of een vliegtuigmaatschappij. Vakanties boekt ze meestal online.
MOODBOARD Om in te leven in de sfeer van Lutjebroek Totaal Wonen, zijn hier twee moodboards ontwikkeld. Aan de hand van deze moodboards kunnen wij de sfeer van de site bepalen.
3.3.1 Moodboard: Koffie, service en degelijkheid
3.3.2 Gezelligheid op het platteland
4 KLEUR 4.1 KLEUREN ADV MOODBOARDS Als we de belangrijkste kleuren uit de moodboards halen, komen we op de volgende kleuren:
Waarbij de bruine kleur voorkomt in de koffie van de moodboard “Koffie, Service en Degelijkheid”.
Waarbij de bordeau rode kleur uit de gordijnen van de moodboard “Gezelligheid op het platteland”.
4.2 BASISKLEUR WEBSITE Wij hebben als basiskleur van de website voor de bordeau rode kleur gekozen. Voor de keuze hebben we de volgende redenen:
Rood is ook de kleur van de logo van de fictieve winkel (hadden we van tevoren bepaald).
Rood wordt geassocieerd met warmte, gezelligheid (ook vuur en passie).
Bruin wordt geassocieerd met poepkleur, oud, verledentijd.
4.3 KLEURENWAAIER Kleurenwaaier waarbij de bordeau rood als basis wordt genomen:
5 WEBONTWERP 5.1 STRAMIENEN ADV MOODBOARDS Als we volgens de moodboards de stramienen moeten maken, komen ze er ongeveer als volgt er uit te zien:
5.2 WEBONTWERPEN 5.2.1 Webontwerp 1 Het webontwerp is geënt op een briefkaart. De bordeau rode kleur wordt als basis genomen in de linkerhelft van de pagina, de knoppen zweven over het rode vlak. De logo en tekst bevindt zich hierbij in de linker helft.
5.2.2 Webontwerp 2 Dit ontwerp heeft een logo-balk aan de bovenkant, waarbij in de balk links de logo zit verwerkt en rechts sfeer foto’s van het bedrijf. Onder de foto’s zijn de belangrijkste snelkoppelingen te vinden. Vervolgens wordt de site verdeelt in twee gedeeltes, waarbij de navigatie links zit en de tekst met foto’s rechts. Om de site zit een grijze rand die zo groot is als de rest van het beeldscherm. De scrollbar is afhankelijk de grootte van de tekst in het rechter deel.
5.3 BASIS WEBONTWERP Er is gekozen voor webontwerp 2, omdat dit ontwerp de sfeer duidelijker naar voren brengt. Een belangrijk verschil tussen de beide ontwerpen is dat ontwerp 2 meer gebruik maakt van beeldmateriaal, welke voor een winkel ontzettend belangrijk is.
5.4 STRAMIEN BASIS WEBONTWERP
Kenmerken van de stramien:
Fixed design
Pagina is gebouwd voor een minimale resolutie van 800 x 600
Pagina is gecentreerd (zowel vertikaal als horizontaal)
De pagina wordt op een resolutie van 800 x 600 pixels gemaakt, omdat nog ongeveer 6,4% van de internetters deze resolutie heeft ingesteld. Aangezien dat de doelgroep bestaat uit plattelands mensen, waaronder ook 50-plussers welke vaak zo laag mogelijke resolutie instellen (ivm verminderde zichtsvermogen). Bewijs van de gebruikte schermresoluties op het internet volgens Google Analystics voor een site met ongeveer 2000 bezoekers per dag:
5.4.1Aanpassing stramien en webontwerp
Kleine aanpassing stramien: een extra onderbalk. In het basisontwerp is een kleur aan de onderzijde van het scherm opgenomen, welke langzaam vervaagt naarmate het hoger komt. Om de website toch netter te laten ogen, is er besloten om de site aan de onderkant een balk mee te nemen in de bordeaurode kleur. In deze balk komt de contactinformatie te staan.
6 LETTERTYPEN 6.1 LETTERTYPEN IN DE WEBSITE Behalve hoe de site er uit komt te zien moet ook bepaald worden welke lettertypen binnen de site worden gebruikt en de manier waarop. Hierbij moet er gekeken worden naar het type pagina en welke gebruiksgroep de site gebruikt. In de website worden de volgende lettertypen gebruikt:
De grootte van de lettertypen worden op de site middels de CSS vastgezet. Volgens de doelgroep van de website is er geen reden om aan te nemen dat er veel mensen komen, waarvoor speciale toepassingen nodig zijn. Wanneer de site ook door minder valide mensen (met braille-lezers, slecht zicht), dan is het raadzaam om de lettergroottes in percentages op te nemen. Lettergroottes, waarvan de groottes in percentages zijn opgenomen, kunnen in de browser ingesteld worden. Voordeel van vaste lettergroottes is dat de site overal hetzelfde eruit komt te zien.
6.2 SCHERM LETTERTYPES Verdana, Arial, Helvetica, sans-serif Wanneer een bezoeker de website bezoekt zal hij een lettertype zien uit de lettertype familie: Verdana, Arial, Helvetica, sans-serif. Afhankelijk welke lettertype hij/zij op de computer heeft geïnstalleerd zal hij een van de genoemde lettertypes zien. Wanneer hij/zij meerdere van deze lettertypen op de computer heeft staan, zal de eerste lettertype zien die in het rijtje wordt genoemd. Indien hij/zij geen lettertype op de computer heeft, zal de bezoeker een lettertype zien die sans-serif (zonder schreef) is. De genoemde lettertypes komen op de meeste computers voor. Verdana en Arial zijn bijna op elke computer te vinden. Dit zorgt er dus voor dat de website, die als basis de genoemde lettertypen heeft ingesteld, dezelfde opbouw heeft zoals de websitebouwer bedoeld heeft. Er is gekozen voor een sans-serif lettertype, omdat dit op het scherm de beste leesbaarheid geeft.
6.3 AFDRUK LETTERTYPES Verdana, Arial, Helvetica, sans-serif Times New Roman, Times, serif Bij het afdrukken van de pagina’s is er gekozen voor twee lettertype families. Voor het algemene deel wordt gekozen voor de lettertype familie Verdana, Arial, Helvetica, sans-serif, zodat de opbouw van de site terugkomt in de afdruk. Alleen de regel met de contactgegevens wordt weergegeven in deze lettertypes. Voor de content echter is er gekozen voor de lettertype familie Times New Roman, Times, serif. Reden hiervoor is dat de letters met schreef beter leesbaar is op papier.
7 OPBOUW HTML-CODE 7.1 TABLE BASED Op de site wordt slechts één tabel opgenomen. Deze tabel zorgt ervoor dat de content gecentraliseerd op de pagina wordt getoond.
De rode lijn kan worden gezien als een veld van de tabel, welke de volledige, bruikbare scherm inneemt (100% width, 100% height).
7.2 CSS-POSITIONING Alles, behalve het alles omvattende tabel, worden gedefinieerd middels DIV-tags. De content bevat de normale tags (h1, h2, p, hr, etc.). De div-tags worden in de twee CSS-bestanden bepaald hoe ze eruit komen te zien en waar ze zich bevinden.
7.3 META-TAGS Binnen de site worden alle meta-tags gebruikt, zodat behalve bezoekers ook zoekmachines de site makkelijk kunnen indexeren. Om toch te voorkomen dat de site wordt opgenomen in zoekmachines, wordt in de volgende meta-tag aangegeven dat de site niet moet worden ge-indexeerd: <meta name="robots" content="noindex,nofollow" /> Resterende meta-tags: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta name="author" content="Eric van Blokland & Geert Bos" /> <meta name="description" content="Lutjebroek Totaal Wonen. Uw plek voor de complete woninginrichting." /> <meta name="keywords" content="meubels, meubelen, kasten, stoelen, banken, eetkamer, slaapkamer, bed, vitrage, gordijnen, verlours, vloerbedekking, tapijt, laminaat, novilon, woonvisie, bankstel" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="reply-to" content="[email protected]" /> <meta name="language" content="dutch" />
7.4 LINK-TAGS De eerste twee link-tags zorgen ervoor dat voor bepaalde media (scherm en printer) de bijbehordende stylesheet worden geladen. De laatste tag zorgt ervoor dat er een icoontje zichtbaar is naast de titel van de website.
7.5 OPBOUW DIV-TAGS De site bestaat uit de volgende div-tags: 1. Main De allesomvattende div-tag. Hierin komen alle andere onderdelen van de website te staan. Deze div-tag is de buitenzijde van de eigenlijke website, lekker gecentreerd dankzij de tabel. 2. Top Bevat de onderdelen logo, afbeeldingen en het menu (home | contact | route). a. Logo Logo van Lutjebroek Totaal Wonen. b. Images_top De vier foto’s van de showroom. c.
Nav_top Het menubalk met home, contact en route.
3. Menu Bevat de navigatiemenu van de website a. Nav Navigatiemenu. Wanneer de bezoeker naar een andere pagina gaat, wordt de “>” voor het menu-onderwerp gezet waar de bezoeker op dat moment is. 4. Content Het onderdeel van de website dat per pagina wisselt. In content worden alle inhoudelijke zaken opgenomen, zoals de aanbiedingen, contact informatie en routebeschrijving. 5. Bottom Bevat de contact informatie, zodat de bezoeker direct het essentiële informatie direct kan zien zonder dat hij van pagina hoeft te wisselen.
Het blauwe blok staat voor de div-tag “content”.
8 SCREENSHOTS Screenshots van de pagina in de verschillende browsers. Het is een uitdaging gebleken om de site in verschillende browsers zoveel mogelijk gelijk te houden. Elke browser heeft toch zijn eigen manier van weergeven.
