Do's en don'ts van geweldig webdesign

Als u deze handleiding volgt, zal deze een behoorlijk waardevolle bron voor webontwerp blijken te zijn, vooral als u van plan bent deze te gebruiken software voor website-ontwikkeling in de toekomst. Van onervaren tot ervaren, deze gids heeft voor ieder wat wils.

Het proces van geweldig webdesign Om er zeker van te zijn dat we allemaal op dezelfde pagina zitten, beginnen we met de basisdefinitie van ‘webdesign’. Volgens Wikipedia is webdesign:

“een proces van conceptualisering, planning, modellering en uitvoering van elektronische medialevering via internet in de vorm van opmaaktaal die geschikt is voor interpretatie door webbrowser en weergave als grafische gebruikersinterface” .

Het proces van webontwerp kan worden vergeleken met het proces van het schrijven van een onderzoekspaper. In de conceptualiserings-/planningsfase worden stroomdiagrammen (de schets) gemaakt die de navigatiestructuur van uw website illustreren. In de modelleringsfase worden statische wireframes gemaakt (de ruwe schets) die de skeletindeling voor elk onderdeel van uw website illustreren. Nadat de draadframes zijn gemaakt, worden afbeeldingen, kleuren en tekst gebruikt om het ontwerp van uw webpagina's te creëren op basis van de lay-out van de draadframes. In de uitvoeringsfase wordt uw ontwerp omgezet naar een formaat dat door webbrowsers wordt ondersteund, tekst en inhoud worden toegevoegd en ten slotte wordt uw website live op internet gepubliceerd zodat de wereld deze kan zien (definitief ontwerp).

Alle drie fasen van het ontwerpproces zijn even belangrijk. Veel webdesigners slaan een fase over om tijd te besparen of omdat ze dat niet nodig vinden. Alle drie de fasen zijn echter noodzakelijk als het uw doel is om een ​​succesvol ontwerp en een respectabele website te creëren. Zelfs als de drie fasen worden gebruikt, kunnen webontwerpers veel fouten maken die zullen leiden tot niet-gebruiksvriendelijke websites van slechte kwaliteit. Het is tijd om de kast met slechte webontwerppraktijken op te ruimen en deze weer aan te vullen met de goede.

Fase 1: Conceptualisering en planning
Deze fase wordt vaker overgeslagen dan de andere twee fasen. De meeste schrijvers houden er niet van om schetsen voor onderzoekspapers te maken, en de meeste webontwerpers houden ook niet van het maken van stroomdiagrammen. Wees niet lui. Als u de moeite neemt en uw website plant, zult u merken dat het webontwerpproces soepel verloopt en dat er minder fouten worden gemaakt.

Er zijn een paar dingen die u nodig heeft om uw website effectief te conceptualiseren en te plannen:

• een brein
• een pen en papier
• (optioneel) stroomdiagramsoftware
• een algemeen idee van de verschillende secties van uw website

Pak om te beginnen uw pen en papier of start uw favoriete stroomdiagramsoftware. We gebruiken OmniGraffle Professiona voor Mac OS X, dat $ 150 per licentie kost, maar het is de moeite waard als u regelmatig websites maakt. Als u een pc gebruikt, is SmartDraw een geweldig GRATIS stukje stroomdiagramsoftware dat u kunt gebruiken. Maar pen en papier werken prima.

Er zijn veel methoden om stroomdiagrammen te maken. We gaan je de meest eenvoudige manier laten zien om dit te doen vanwege de tijd en de lengte van dit artikel. Als je meer wilt weten over stroomdiagrammen, zoek dan naar stroomdiagrammen op Google of Yahoo.

Bekijk het stroomdiagram dat we hebben gemaakt bij het conceptualiseren van chromatische sites. (1) Bovenaan het stroomdiagram vermelden we de naam van onze website. (2) Vervolgens nemen we elk primair gedeelte van onze website op: Home, Over en Services. Deze secties vormen de hoofdnavigatie voor uw website. Wat de namen van elke sectie zullen zijn, is volledig afhankelijk van de inhoud van uw website. Probeer zo min mogelijk secties te gebruiken, zodat uw bezoekers niet overweldigd worden tijdens het navigeren door uw website.

(3) Voeg vervolgens alle secundaire pagina's (subsecties) toe die op elk van de primaire pagina's worden vermeld. Voor Home hebben we professioneel webontwerp, webontwikkeling en zoekmachineoptimalisatie opgenomen. De secundaire navigatie moet beschrijvender zijn dan de primaire navigatie. Hoe dieper de navigatiehiërarchie van uw website gaat, hoe beschrijvender elk label moet zijn.

De Dos

• Minder is meer; houd het aantal primaire secties tot een minimum beperkt. We gebruiken 6 secties op onze website, wat meer dan genoeg is
• Of u nu pen en papier of stroomdiagramsoftware gebruikt, houd de zaken zo schoon en georganiseerd mogelijk. Hoewel u (en iedereen die met u samenwerkt) de enigen bent die het stroomdiagram zullen gebruiken, moet het nog steeds logisch zijn. Uw primaire secties moeten bredere termen gebruiken, terwijl secundaire en tertiaire termen meer beschrijvend moeten zijn

De Donts
Het maken van een stroomdiagram is vrij eenvoudig; Er zijn echter een paar fouten die gemakkelijk kunnen worden gemaakt:

• Gebruik geen zeer beschrijvende termen in uw primaire navigatie, tenzij uw hele website zich op één beperkt onderwerp concentreert. Probeer niet meerdere onderwerpen op dezelfde pagina te plaatsen. Maak een algemene sectie voor deze onderwerpen en maak vanuit die sectie subsecties. Hierdoor is de kans groter dat de webpagina's met subsecties (beschrijvende) een betere ranking krijgen in de zoekmachines (Google, Yahoo, MSN, Ask). Zodra u een beknopt en beschrijvend stroomdiagram heeft gemaakt, bent u klaar om door te gaan naar de tweede fase van het webontwerpproces:

Fase 2: Modellering
In de modelleringsfase worden statische ‘wireframe’-mock-ups gemaakt. Elke mockup illustreert een kaal skelet van de lay-out voor elk van de webpagina's die in uw website worden opgenomen. Deze fase is belangrijk omdat het ons een idee geeft van waar verschillende elementen in ons ontwerp zullen worden geplaatst. Enkele van deze elementen zijn:

• logo
• navigatiemenu
• content
• afbeeldingen, video's

Om deze mockups te maken, kunt u pen en papier of uw favoriete mockupsoftware gebruiken. In het verleden hebben we Photoshop gebruikt, maar de laatste tijd gebruiken we OmniGraffle Professional. OmniGraffle is niet zo arbeidsintensief als Photoshop en stelt ons in staat onze wireframe-mockups veel sneller samen te stellen.

Zorg er bovendien voor dat u de stroomdiagram(men) die u hebt gemaakt bij de hand heeft, aangezien u hier zo nu en dan naar moet verwijzen om er zeker van te zijn dat u alle pagina's die op uw website verschijnen, nabootst.

Hier is ons voorbeeld van hoe een wireframe-mockup eruit zou moeten zien. Zoals u kunt zien, zijn er geen kleuren of afbeeldingen inbegrepen. Dit is precies hoe een wireframe-mockup zou moeten zijn: een skeletachtige lay-out van uw ontwerp. Het doel is om een ​​algemeen idee te krijgen van waar elk van de elementen van de webpagina zal worden geplaatst.

Meestal beginnen we linksboven en werken we naar beneden. Er is geen specifieke manier waarop een wireframe eruit zou moeten zien. Gebruik je fantasie. Zorg er echter voor dat u bij het maken van uw wireframes niet vergeet de belangrijkste elementen van een website op te nemen (logo, navigatiemenu, plaatsing van inhoud, plaatsing van afbeeldingen/video).

Als sommige van uw pagina's dezelfde lay-out zullen gebruiken, is het niet nodig om al die pagina's na te bootsen (hoewel dat zeker wel kan). Zorg ervoor dat u elke unieke lay-out van uw website mockup maakt. Je zult jezelf later dankbaar zijn.

De do's

• mockup alle unieke pagina's
• neem belangrijke elementen op (logo, navigatie, plaatsing van de inhoud, afbeeldingen/videoplaatsing) - begin bovenaan en werk naar beneden - verwijs naar het stroomdiagram dat u in fase 1 hebt gemaakt, zodat u niet vergeet om eventuele pagina's te mockupn - opslaan, opslaan, opslaan – zoals met alles op de computer, slaat u uw mockup(s) ongeveer elke 10 minuten op
• focus op strakke, gebruiksvriendelijke lay-outs -label uw elementen zodat u niet vergeet wat ze zijn wanneer u ernaar verwijst in fase 3, uitvoering -gebruik andere websites als inspiratie; er is niets mis mee om elementen van andere sites over te nemen en deze je eigen te maken (zie “donts”)

De niet's

• voeg geen afbeeldingen of kleuren toe (dat is voor de volgende fase) -maak uw mockups niet te “druk”; focus op schone, goed georganiseerde, gebruiksvriendelijke lay-outs - sla deze fase niet over; het is net zo belangrijk als de eerste en de laatste. Als u elementen van andere websites overneemt, zorg er dan voor dat u geen plagiaat pleegt; er is een verschil tussen geïnspireerd worden door een andere website om bepaalde elementen van je ontwerp te creëren en het schaamteloos wegnemen van de lay-out en kleuren ervan

Fase 3: Uitvoering
In de derde en laatste fase, de uitvoering, worden de planningen uit fase 1 en 2 gecombineerd om te helpen bij het creëren van een live, interactieve website.
De derde fase is veruit de meest tijdintensieve fase, aangezien u 1) de grafische afbeeldingen maakt, 2) de inhoud maakt en ten slotte 3) de webontwerpen van afbeeldingen omzet in code die webbrowsers gebruiken om uw website aan de wereld te presenteren.

Tegen de tijd dat je de derde fase bereikt, zou je een duidelijk idee moeten hebben van:

• hoe uw bezoekers van de ene plaats naar de andere gaan (fase 1, stroomdiagram) - hoe uw webpagina's worden opgemaakt (fase 2, wireframe-mockups)

Als je geen duidelijk idee hebt van deze twee dingen, ga dan terug naar de eerste en tweede fase en ga door met het ontwikkelen ervan. U zult merken dat de derde fase het gemakkelijkst is als u een duidelijk, beknopt strijdplan voor het ontwerpen van uw website heeft opgesteld.

Gooi de pen en het papier weg
In fase 3 moet u Photoshop of een ander beeldbewerkingsprogramma gebruiken, omdat u kleuren en afbeeldingen gaat gebruiken om de lay-out voor uw website te maken.

Meestal beginnen we eerst met het maken van de ‘startpagina’ (index). Gebruik de wireframes die u in fase 2 hebt gemaakt als sjabloon voor elke pagina die u maakt. Gebruik echter in plaats van vaste vakken afbeeldingen, kleuren en tekst. Elke pagina moet er precies uitzien zoals u wilt dat deze er op internet uitziet, aangezien dit de laatste fase van het ontwerpproces is.

Zorg ervoor dat u de achtergrond voor uw navigatie toevoegt (maar voeg de tekst niet daadwerkelijk aan uw afbeelding toe). Bij conversie met behulp van CSS (cascading style sheets) moet uw navigatie de vorm hebben van tekst en niet van afbeeldingen. Afbeeldingen kunnen niet door zoekmachines worden gecrawld (de trefwoorden die in uw navigatie worden gebruikt, worden niet geïndexeerd op de resultatenpagina's van zoekmachines, wat betekent dat minder mensen uw website kunnen vinden).

Wanneer u tevreden bent met uw ontwerpen en het gevoel heeft dat ze klaar zijn om op internet te worden gezet, is het tijd om de ontwerpen uit elkaar te halen, zodat u een op CSS gebaseerde lay-out kunt maken. Ga naar w3schools.com voor meer informatie over het converteren van uw lay-outs naar CSS of het markeren van uw website in CSS. Nadat we op internet hadden rondgekeken, konden we geen fatsoenlijke tutorial van beeld naar CSS vinden, dus verwacht er de komende weken een van ons. Het omzetten van uw ontwerpen naar CSS is uiterst belangrijk omdat tabelindelingen tot het verleden behoren.

Hier is een voorbeeld van een bijna voltooide website van de lay-out die we in fase 2 hebben gemaakt. Deze is rechtstreeks vanuit onze webbrowser overgenomen en zoals u kunt zien, is er nu een logo, kleuren, een mooi navigatiesysteem, een voettekst, en het allerbelangrijkste: een schone, georganiseerde lay-out.
Dankzij de planning in stap 1 en 2 is onze indeling overzichtelijk en eenvoudig in gebruik.

De Dos

• verwijs naar uw sjablonen die in fase 2 zijn gemaakt; Hoewel het prima is om af te wijken van uw oorspronkelijke lay-out, hoeft dit niet te gebeuren
• doe wat onderzoek voordat je je daadwerkelijke ontwerp maakt; krijg ideeën van andere sites en maak ze uw eigen (zonder plagiaat)
• voeg kleur en afbeeldingen toe om het uiteindelijke uiterlijk van uw webpagina's te creëren - gebruik CSS (cascading style sheets) om uw ontwerpen van afbeeldingen om te zetten in opmaak die begrijpelijk is voor webbrowsers - verwijs naar uw stroomdiagram vanaf fase 1 bij het coderen van uw pagina's met hyperlinks; het is beter om een ​​vervolgkeuzemenu te gebruiken dat alle (of de meeste) links op uw website op elke pagina bevat; dit zorgt voor eenvoudiger navigatie en maakt het ook gemakkelijker om uw pagina's te crawlen wanneer de spiders van zoekmachines langskomen; een geweldige plek om CSS-vervolgkeuzemenu's te krijgen is op DynamicDrive.com - voltooi uw ontwerp terwijl u werkt in Photoshop of welke beeldbewerkingssoftware u ook gebruikt; het kan lastig zijn om wijzigingen in uw ontwerp aan te brengen zodra het is omgezet in opmaak (code)

De Donts

• neem de tekst niet op in uw navigatiemenu's bij het converteren naar CSS; Gebruik in plaats van afbeeldingstekst gewone tekst die leesbaar is voor de spiders van zoekmachines
• gebruik geen tabellen bij het converteren; zelfs als je een boek over CSS moet kopen, is het de moeite waard; tafels zijn dood
• sla de eerste twee fasen niet over alleen maar om tijd te besparen; uw website ZAL beter zijn als u vanaf het begin van het webontwerpproces begint (in plaats van aan het einde)
• vergeet niet uw afbeeldingen te comprimeren wanneer ze uit elkaar worden geknipt voor CSS; er is niets erger dan een langzaam ladende website vanwege grote afbeeldingsbestanden; Photoshop heeft een optie “Opslaan geoptimaliseerd voor web” (CS3 – “Opslaan voor web en apparaten”)

Proces baart kunst
Door een webontwerpproces te volgen zoals het proces dat in dit artikel wordt geïllustreerd, vergroot u de kans op het creëren van een website die goed georganiseerd, gemakkelijk navigeerbaar en zeer gebruiksvriendelijk is. Laten we eerlijk zijn: als bezoekers verdwalen of in de war raken terwijl ze op uw website proberen te surfen, kunnen ze op de terugknop klikken en op zoek gaan naar een gebruiksvriendelijkere website. Mensen houden er niet van om na te denken als het gaat om het vinden van hun weg op websites. Laat ze niet nadenken. U doet het denkwerk door uw website van fase 1 tot en met fase 3 te plannen en u zult merken dat meer mensen uw website met plezier zullen bezoeken.