Logo

 
affiliate_link 

Web design Deel I

 

Overwegingen

 

Grafische applicaties

Voor webdesign hebben we grafische applicaties nodig.

Adobe Photoshop, Adobe Fireworks,Paintshop Pro en GIMP zijn de populairdere van de vele grafische applicaties beschikbaar .

Adobe photoshop werkt met layers en biedt allerlei Photo bewerkingen aan.

Adobe Fireworks is grafische applicatie die speciaal gebaseerd is op het creŽren van grafisch materiaal en animaties voor websites.

Paintshop pro is ongeveer als Photoshop maarstukken goedkoper.

GIMP is geheel gratis en kan gedownload worden op http://www.gimp.org

Webdesign applications zijn Adobe dreamweaver en Microsoft webessentials (Frontpage).

Beiden kunnen websites zowel locaal als remote creŽren en bewerken.

 

Beeldscherm resoluties

Alhoewel vroeger met de CRT-schermen alle monitors dezelfde vorm en resolutie hadden is dat nu danig veranderd. Er zijn tal van vormen en resoluties bedacht voor verschillende schermen. We denken dan aan de vele LCD schermen voor desktops, laptop schermen, tablets, iPhones en mobile phones etc.

Liquid pages zijn paginas die zich aanpassen aan de beschikbare ruimte op het media waarop zij draaien.

Met anderen woorden als het scherm nu breed is of smal, het hele scherm wordt benut. Vooral belangrijk bij mobile internet waar de resoluties totaal verschillen zijn.

Java script kan gebruikt worden om een beeld resolutie te achterhalen en het beeld hieraan te passen. Dit is echter voor de hele dure websites, aangezien er heel veel manuren gaan in het creŽren van verschillende grafische versies van dezelfde website.

Normaliter wordt HTML code gebruikt om een website grafisch in elkaar te zetten. Normale html heeft

Wel zijn beperkingen en om iets speciaals te maken zijn soms complexe scripts nodig.

Probeer echter zoveel mogelijk standaard HTML te gebruiken welke door de World wide web consortium http://www.w3.org wordt erkend.

 

Browsers

Er zijn verschillende browsers waarvan waarschijnlijk internet Explorer (populairste), firefox en Google Chrome misschien de bekendste zijn.Daarnaast heb je ook Safari (iPhone), Webkit (Android phones gebruiken een combinatie van Webkit en Google Chrome) Opera, NetCaptor, NetPositive, Lynx, iCab en Neoplanet. De meeste web browsers zijn gratis te downloaden. Sommige browsers kunnen helemaal niet en andere kunnen sommige graphics niet displayen. Daarom is het altijd handig om je pictures te voorzien van een uitleg zodat men tenminste kan lezen welk plaatje er staat als men het niet kan zien. Daarnaast kan je ook alternatieven uitproberen zoals grafische documenten die gedownload kunnen worden enz.En als je het resultaat wilt zien, check het niet alleen op je eigen computer maar ook op de laptop of mobile Phone van anderen.

 

Kleur

Verschillende Operating Systems hebben hun eigen vertaling van kleur, waardoor een kleur op verschillende computers verschillend uitkomt. Websafe colors zijn 216 kleuren die op alle computers Mac of Windows hetzelfde eruit zien. Op http://www.visibone.com/color/chart_847.gif zie je visuele representatie van de websafe colors. Op dezelfde website in http://www.visibone.com/swatcheskan je CLUTS downloaden voor verschillende grafische programmas. CLUTS color look up tables zijn tools die je kan gebruiken in je programma als palet.

 

Bandbreedte (bandwidth)

 

Afhankelijk van de beschikbare internet verbinding zal de tijd voor het downloaden van je homepage verschillen. Dial Up en mobile Phone internet verbindingen in Suriname zijn in de orde van 56kbps. 56000/8= 7000 karakters per seconde, terwijl ADSL verbindingen kunnen oplopen officieel to 1.5 Mbps maar daadwerkelijk tot boven 3 Mbps dit is 3000000/8 = 375000 karakters per seconde.

Het is dus belangrijk om je homepage zo klein mogelijk te hebben. 100 kB is de ideale grootte voor een homepage.

Plaatjes vormen normaliter grote files en moeten daarom liefst gecomprimeerd worden m.a.w. gegoten en PNG.Hierbij is de JPEG een lossy formaat (picture kwaliteit wordt aangetast), terwijl PNG en GIF lossless formaten zijn (picture kwaliteit wordt niet aangetast).

 

Fonts

 

Alhoewel er tegenwoordig veel meer fonten beschikbaar zijn, zijn sommige fonten niet beschikbaar op alle media, waardoor ze vervangen worden of helemaal niet getoond worden door sommige browsers.

De fonts die heel populair zijn en door vrijwel alle browsers (HTML) worden ondersteund zijn Ö. Blz 83. Als je speciale fonts gebruikt en je wilt jouw text in elke browser onveranderd getoond zien moet je het als een picture in je pagina inbrengen. Hou er wel rekening mee dat een picture is veel groter dan normale tekst, alhoewel er manieren zijn om de text\picture zo klein mogelijk te krijgen.

Op http://www.bvfonts.com , http://carsonified.com/blog/category/design/fonts , http://dafont.com , http://www.typophile.com , http://youthedesigner.com/2009/06/10/18-fresh-font-designs kun je verschillende fonts bekijken en inspiratie opdoen.

 

Inspiratie

 

Voor inspiratie kan je naar de volgende websites http://thedesignmag.com , http://www.veer.com, http://www.smashingmagazine.com/category/showcase/

Design collecties vindt je op http://patterntap.com ,http://www.designmeltdown.com , http://www.webcreme.com

 

Navigeren

 

Primary Navigation

 

 

Search bar

Secondary Navigation

 

Main Content

Tertiary or Supporting Navigation

Navigatie begint met het bepalen van een navigatie schema waarin je bepaalt hoe de verschillende paginas met elkaar verbonden moeten zijn. Daarna wordt bepaald hoe je dat visueel wilt doen.

Bepaal wat er allemaal gelinkt moet zijn met je hoofdpagina. Primaire navigatie zit normaliter op alle paginas van je website. Deze zijn de belangrijkste links die vanaf elke pagina beschikbaar moeten zijn. Secundaire navigatie betreft links die te maken hebben een specifieke afdeling van uw organisatie en alleen in die secties voorkomen. Tot vorig jaar was het heel populair om Primary en Secondary navigation te verbinden middels een dropdown menu. Dit concept gaat er steeds meer uit en men neigt terug naar eenvoud en minder script. Tertiaire navigatie gaat naar paginaís die niet perse passen in het gehele plaatje. Bij zeer complexe websites is er ook een search bar aanwezig. Bovenstaand tonen we in een ontwerp hoe normaliter bovenstaande navigatievormen worden toegepast.

Er wordt ook gebruik gemaakt van shortcut navigatie als een essentiele functie niets te maken heeft met de totale navigatie. Bv een Buy Now of Shopping Cart link in een online shopping website; of een referral naar een partnerís website. Referentie navigatie waarbij je aanvullende informatie krijgt over een object dat jouw interesseerd. Je kan bv op een online bookstore op een boek clicken en krijgt informatie over het boek of de schrijver.

Bread crum navigatie gebruik je als je door navigatie terecht komt op paginas die geen weg terug hebben naar de main page. Je laat dan bv rechtsboven spoor achter van elke pagina die vooraf ging.

Home>

Activiteiten>

Commewijne>

Slagbal

Via dit spoor kan de browser terug naar een eerder bezochte pagina.

 

Navigatie visueel

320px-Web_2_0_Map_svg.png

Om de navigatie visueel voor te stellen worden doorgaans de volgende vormen gebruikt.

Tabs; verticale en horizontale navigatie balken

Form elements ; zoals dropdown menus en

search boxes

Uitklapbare menus; bij het klikken komt een menu

metandere links te voorschijn etc

Grafische buttons

Text of hyperlinks; hyperlinks zijn onderstreept

Inline text ††††† ; links in de context zelf

Tag clouds††† ; Zie je hiernaast staan

Sliders††††††††††††††††††††††† ; Ziet er als onderstaand uit

slider.png

Bij het aanklikken van een menubutton verschijnt een nieuwe pagina met secundaire links.

Op http://patterntap.com/tap/collection/navigation kan je meer visuele navigatie tools vinden.

 

Inhoud hiŽrarchie

 

In elke website verdiend de inhoud prioriteit boven alles. Hoe mooi je website ook mag zijn als de inhoud de bezoeker niet boeit komt hij nooit terug.Alhoewel het spannend lijkt om met alle toeters en bellen een spang spang website op te zetten, is het veel beter de bombel en flitsen zo zuinig mogelijk te gebruiken.

Bepaal de prioriteiten afhankelijk van je doelen en hoe je die naar de webinhoud vertaalt.

Vb van vertaling van doelen op een Home page

Home Page Element

website doel(en)

webpage doel(en)

Logo/Naam

Publiek bekend maken met de org

OriŽntatie van de bezoeker

Korte Statement

Publiek bekend maken met de org

OriŽntatie van de bezoeker

Navigatie

Alle doelen zijn hier vertaald

OriŽntatie van de bezoeker met alle afdelingen van de org

Photo van de organisatie

Of illustratie van het doel van de organisatie

Advertentie voor de organisatie (mits het een interessante weergave is)

Wekken van vertrouwen en bekendheid bij de bezoeker

Copyright (als relevant)

In Suriname niet zo belangrijk

 

Contact informatie

Maak jezelf bereikbaar

Bezoekers kunnen via interactie meer informatie betrekken of uitwisselen met de organisatie

News/ highlights

Verhoog drang tot participatie bij het publiek

Relevante nieuws van de organisatie wekt erkenning bij leden en interesse bij potentiŽle leden op.

Sign up link (als relevant)

Vereenvoudiging van het registratie proces, helpt potentiŽle participanten over de drempel

Gebruikers aanmoedigen om zich te committeren aan een relatie met de organisatie.

 

Graphic File typen

 

Gif wordt voornamelijk gebruikt voor graphics. Bij het comprimeren kan je kiezen voor dithering. Dithering is het vervangen van verwijderde kleuren bij het komen tot een kleinere kleuren palet. Dithering maakt de file groter en persoonlijk vindt ik het effect afschuwelijk. Je kan verder kiezen voor lossless waardoor er geen verslechtering van het beeld plaatsvindt. Transparency maakt de alpha channel (background kleur) doorzichtig. Gif ondersteund daarnaast animaties (bewegend beeld).

JPEG wordt voornamelijk gebruikt voor fotos. Het comprimeren is lossy. Er treedt dus wel qualiteits verlies van de picture op.Je kan bij de compressie kiezen voor kwaliteit en scherpte(hoe hoger de kwaliteit en hoe scherper het beeld hoe groter de file).

In photoshop en fireworks kan je de background color kiezen als alphachannel. Alle plekken met deze kleur worden dan transparant.

PNG wordt voornamelijk voor graphics gebruikt. De PNG 32 bit, biedt een alpha channel voor transparancy. Ook hier is dither mogelijk.

Vergeleken bij andere browsers is Internet Explorer gelimiteerd in het omgaan met verschillende features van de bovenstaande graphics formaten.

 
  Einde DL I