Liesbeth Mantel. Mediacollege webdesign professional

Transcriptie

1 Liesbeth Mantel Mediacollege webdesign professional Juni 2006

2 Inhoud 1 Inleiding Grid en layout Kleurenpalet Typografie Navigatie Schetsen Stylesheet... 10

3 1 Inleiding [Doelgroep] De portfolio website is bedoeld voor nieuwe- en al bestaande klanten van het (fictieve) eenmansbedrijf Internet Librarian Liesbeth Mantel (IL 2 M). Dit bedrijf richt zich op informatiezoekers en bedrijven/personen die web 2.0 applicaties willen gebruiken en hier hulp bij kunnen gebruiken. De informatiezoekers kunnen personen zijn uit het bedrijfsleven, die informatie zoeken ter ondersteuning van de dagelijkse werkzaamheden. Maar ook studenten die hulp nodig hebben bij het zoeken naar informatie voor de scriptie of moeders die ter ondersteuning bij de opvoeding van de kinderen informatie zoeken. Eigenlijk kan iedereen die informatie zoekt klant zijn van IL 2 M. De geinteresserden in web 2.0 applicaties kunnen bij IL2M terecht voor onderzoek, ontwikkeling en implementatie. De bestaande klanten vinden op deze portfolio website informatie over nieuwe projecten en contactinformatie. Nieuwe klanten vinden informatie over de diensten van IL 2 M, verwijzingen naar bestaande projecten en contactinformatie. Momenteel zijn bestaande projecten ontwerpen van websites (het functioneel beheer van cms/intranet/extranet) en het onderhouden van een weblog, daarom zijn deze als voorbeeld opgenomen op de pagina Portfolio. [Doel] Het doel van de website is om klanten duidelijk te maken dat informatie te vinden is, soms met een beetje hulp van een expert. Naast het geven van de zoekresultaten zal de klant op de portfolio website ook tips vinden die helpen bij het zoeken naar informatie. Het aantal web 2.0 applicaties neemt per dag toe. Om in dit woud van mogelijkheden datgene te vinden wat je in kan zetten, binnen bijvoorbeeld een bedrijf, kan hulp wenselijk zijn. Op deze portfolio website worden (in de toekomst) voorbeelden gegeven van implementaties, maar ook zijn hier verslagen van onderzoeken terug te vinden die voor opdrachtgevers zijn uitgevoerd en die geresulteerd hebben in implementaties van web 2.0 applicaties. [Vooruitblik] Momenteel bestaat de website uit een viertal onderdelen; home, portfolio, about en contact. De tekst voor home, about en contact zal niet vaak wijzigen. De portfoliopagina zal regelmatig worden aangepast. Binnenkort zal een pagina met zoektips worden toegevoegd, waar naast tips ook vaardigheden worden omschreven die helpen bij het zoeken naar informatie (ook links naar zoekmachines, zoekhulpen, deep-web zoekmanieren, etc.). Daarnaast zal in de nabije toekomst het voor klanten mogelijk zijn om via een extranet toegang te krijgen tot de stand-van-zaken-pagina zodat zij per dag kunnen bijhouden wat voor zoekresultaten er inmiddels gevonden zijn.

4 Grid en layout Het zoeken naar informatie kan soms een lastige zaak zijn, zeker als je niet kan vinden wat je zoekt. De website van IL 2 M moet niet te veel aandacht afleiden van datgene waar de gebruiker voor komt, met andere woorden het zoeken naar informatie. Contact krijgt daarom een prominente plaats op de website, net als portfolio en about. De grillige bloemvorm verwijst naar de natuur. Bij het zoeken naar informatie is het pad niet duidelijk en kan de zoeker alle kanten op, de vorm verwijst hiernaar. De bloem ontbloeit als de resultaten goed zijn en de klant tevreden is. De kleur is een actieve, heldere kleur paars/roze. Een frisse kleur naast het grijs (waarbij grijs verwijst naar het saaie image van bibliotheekmedewerkers wat weer verwijst naar het logo van tekst). Elke pagina past op een beeldscherm van 800 x 600. Hier is bewust voor gekozen. Een scrollbalk leidt af van het rustige beeld en is daarom weggelaten. Omdat de ruimte voor tekst op deze manier beperkt is zal er bij meer dan 1 pagina tekst een >>meer link rechts onder de tekst verschijnen. Op de website is altijd het volgende te zien: - het bloemmotief (grijs) - de home link (Internet Librarian Liesbeth Mantel lichtgrijs onderin scherm) - de navigatie

5 2 Kleurenpalet Binnen de vormgeving van deze website is gekozen voor enkele kleuren: - Grijs o Lichtgrijs tekstlogo # d7d3d3 o Donkergrijs bloemmotief # 8a8a8a - Roze (navigatie + titels) # e63b7a - Zwart (bodytekst) # De links worden aangepast met een <style-decoration= none > zodat de links (ook na het bezoeken van een (externe) pagina) zwart blijven en niet worden onderstreept. De navigatielinks zijn afbeeldingen en blijven ook na het aanklikken hetzelfde qua vorm en kleur. Alle links en afbeeldingen hebben een logische alt-text gekregen.

6 3 Typografie Het gekozen lettertype voor de gehele website is Verdana. Navigatie: Verdana regular 24 pt Koptekst: Verdana regular 60 pt Logo (Internet Librarian Liesbeth Mantel): Verdana regular 24 pt

7 4 Navigatie HOME About Portfolio Contact Voorbeeld 1 Voorbeeld 2 Voorbeeld 3 Etc.

8 5 Schetsen Naar aanleiding van moodboard zijn de volgende ontwerpen in Photoshop gemaakt: 1. 2, 3. 4.

9 Het laatste ontwerp (nummer 7) is uitgewerkt tot een werkende website.

10 6 Stylesheet <style type="text/css"> <!--.style2 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #E63B7A; font-size: 56px; }.style3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } --> </style>