Moets en moenies van puik webontwerp

Wanneer dit gevolg word, sal hierdie gids 'n nogal waardevolle webontwerphulpbron wees, veral as u van plan is om te gebruik webwerf ontwikkeling sagteware in die toekoms. Van die onervare tot die ervare, hierdie gids het iets vir almal.

Die proses van wonderlike webontwerp Net om seker te maak ons ​​is almal op dieselfde bladsy, laat ons begin met die basiese definisie vir "webontwerp". Volgens Wikipedia is webontwerp:

"'n proses van konseptualisering, beplanning, modellering en uitvoering van elektroniese media-aflewering via internet in die vorm van opmerktaal wat geskik is vir interpretasie deur webblaaier en vertoon as grafiese gebruikerskoppelvlak" .

Die proses van webontwerp kan vergelyk word met die proses van die skryf van 'n navorsingsvraestel. In die konseptualisering/beplanningstadium word vloeidiagramme (die uiteensetting) geskep wat die navigasiestruktuur van jou webwerf illustreer. In die modelleringstadium word statiese draadrame geskep (die rowwe konsep) wat die skeletuitleg vir elke afdeling van jou webwerf illustreer. Nadat die draadrame geskep is, word grafika, kleure en teks gebruik om die ontwerp van jou webblaaie te skep gebaseer op die uitleg van die draadrame. In die uitvoeringsfase word jou ontwerp omgeskakel na 'n formaat wat deur webblaaiers ondersteun word, teks en inhoud word bygevoeg, en uiteindelik word jou webwerf regstreeks op die internet gepubliseer vir die wêreld om te sien (finale konsep).

Al drie fases van die ontwerpproses is ewe belangrik. Baie webontwerpers slaan 'n stadium oor om tyd te bespaar of omdat hulle nie dink dit is nodig nie. Al drie fases is egter nodig as jou doel is om 'n suksesvolle ontwerp en respekvolle webwerf te skep. Selfs as die drie fases gebruik word, is daar baie foute wat webontwerpers kan maak wat sal lei tot swak gehalte, nie gebruikersvriendelike webwerwe. Dit is tyd om die kabinet skoon te maak van slegte webontwerppraktyke en dit weer met die goeies aan te vul.

Fase 1: Konseptualisering en beplanning
Hierdie stadium word meer dikwels as die ander twee stadiums oorgeslaan. Die meeste skrywers geniet dit nie om buitelyne vir navorsingsvraestelle te skep nie, en die meeste webontwerpers hou ook nie daarvan om vloeidiagramme te skep nie. Moenie lui wees nie. As jy die moeite doen en jou webwerf beplan, sal jy vind dat die webontwerpproses glad verloop met minder foute wat langs die pad gemaak word.

Daar is 'n paar dinge wat jy nodig het om jou webwerf effektief te konseptualiseer en te beplan:

• 'n brein
• 'n pen en papier
• (opsioneel) vloeidiagram sagteware
• 'n algemene idee van die verskillende afdelings van jou webwerf

Om te begin, gryp jou pen en papier of begin jou gunsteling vloeidiagramsagteware. Ons gebruik OmniGraffle Professiona vir Mac OS X wat $150 per lisensie kos, maar dit is die moeite werd as jy gereeld webwerwe skep. As jy op 'n rekenaar is, dan is SmartDraw 'n wonderlike GRATIS stuk vloeidiagramsagteware wat jy kan gebruik. 'n Pen en papier werk egter goed.

Daar is baie metodes om vloeidiagramme te skep. Ons gaan jou die mees basiese manier wys om dit te doen ter wille van tyd en die lengte van hierdie artikel. As jy meer wil leer oor vloeidiagramme, soek vir vloeidiagramme op Google of Yahoo.

Kyk na die vloeidiagram wat ons geskep het toe ons Chromatic Sites konseptualiseer. (1) Aan die bokant van die vloeidiagram lys ons die naam van ons webwerf. (2) Vervolgens sluit ons elke primêre afdeling van ons webwerf in: Tuis, Oor en Dienste. Hierdie afdelings is die hoofnavigasie vir jou webwerf. Wat die name van elke afdeling sal wees, hang heeltemal af van die inhoud van jou webwerf. Probeer om so min as moontlik afdelings te gebruik sodat jou besoekers nie oorweldig word wanneer hulle deur jou webwerf navigeer nie.

(3) Voeg dan al die sekondêre bladsye (onderafdelings) by wat op elk van die primêre bladsye gelys sal word. Vir Tuis het ons professionele webontwerp, webontwikkeling en soekenjinoptimalisering ingesluit. Die sekondêre navigasie moet meer beskrywend wees as die primêre navigasie. Hoe dieper jou webwerwe se navigasiehiërargie gaan, hoe meer beskrywend moet elke etiket wees.

Die Dos

• Minder is meer; hou die aantal primêre afdelings tot 'n minimum. Ons gebruik 6 afdelings op ons webwerf wat meer as genoeg is
• Of jy nou 'n pen en papier of vloeidiagramsagteware gebruik, hou dinge so skoon en georganiseer as moontlik. Alhoewel jy (en enigiemand wat saam met jou werk) die enigste is wat die vloeidiagram sal gebruik, moet dit steeds sin maak - Jou primêre afdelings moet breër terme gebruik, terwyl sekondêre en tersiêre terme meer beskrywend moet wees

Die Donts
Die skep van 'n vloeidiagram is redelik reguit vorentoe; daar is egter 'n paar foute wat maklik gemaak kan word:

• Moenie baie beskrywende terme in jou primêre navigasie gebruik nie, tensy jou hele webwerf op een nou onderwerp fokus - Moenie probeer om veelvuldige onderwerpe op dieselfde bladsy saam te voeg nie. Skep 'n algemene afdeling vir hierdie onderwerpe en skep onderafdelings uit daardie afdeling. Dit sal die onderafdeling (beskrywende) webblaaie meer geneig maak om beter ranglys in die soekenjins (Google, Yahoo, MSN, Ask) te hê. Sodra jy 'n bondige en beskrywende vloeidiagram geskep het, is jy gereed om aan te beweeg na die tweede fase van die webontwerpproses:

Fase 2: Modellering
In die modellering stadium word statiese "wireframe" mock-ups geskep. Elke mockup illustreer 'n kaalbene-skelet van die uitleg vir elk van die webblaaie wat by jou webwerf ingesluit sal word. Hierdie stadium is belangrik omdat dit ons 'n idee gee van waar verskillende elemente in ons ontwerp geplaas gaan word. Sommige van hierdie elemente is:

• logo
• navigasie spyskaart
• inhoud
• beelde, video's

Om hierdie mockups te skep, kan jy 'n pen en papier of jou voorkeur mockup sagteware gebruik. In die verlede het ons Photoshop gebruik, maar die afgelope tyd het ons OmniGraffle Professional gebruik. OmniGraffle is nie so hulpbronintensief soos Photoshop nie en dit stel ons in staat om ons draadraammodelle baie vinniger saam te stel.

Maak ook seker dat jy die vloeidiagram(te) wat jy geskep het naby jou het, want jy sal van tyd tot tyd daarna moet verwys om seker te maak dat jy al die bladsye wat op jou webwerf sal verskyn, bespot.

Hier is ons voorbeeld van hoe 'n draadraammodel moet lyk. Soos u kan sien, is daar geen kleure of grafika ingesluit nie. Dit is presies hoe 'n draadraammodel moet wees - 'n skeletuitleg van jou ontwerp. Die doel is om 'n algemene idee te kan hê van waar elkeen van die webblad se elemente geplaas gaan word.

Ons begin gewoonlik van links bo en werk ons ​​pad af na onder. Daar is geen spesifieke manier waarop 'n draadraam moet lyk nie. Gebruik jou verbeelding. Maak egter seker dat wanneer jy jou draadrame skep, jy nie vergeet om die belangrikste elemente van 'n webwerf (logo, navigasiekieslys, inhoudplasing, beelde/videoplasing) in te sluit nie.

As sommige van jou bladsye dieselfde uitleg sal gebruik, is dit nie nodig om al daardie bladsye te bespot nie (alhoewel jy beslis kan). Maak net seker dat u enige unieke uitleg wat u webwerf sal hê, naboots. Jy sal jouself later bedank.

Die doen's

• mockup alle unieke bladsye
• sluit belangrike elemente in (logo, navigasie, inhoudplasing, beelde/videoplasing) -begin van bo af en werk jou pad af -verwys na jou vloeidiagram wat in stadium 1 geskep is om te maak dat jy nie vergeet om enige bladsye na te maak nie -stoor, stoor, stoor – soos met enigiets op die rekenaar, stoor jou mockup(s) elke 10 minute of so
• fokus op skoon, gebruikersvriendelike uitlegte - etiketteer jou elemente sodat jy nie vergeet wat dit is wanneer jy daarna verwys in stadium 3, uitvoering - gebruik ander webwerwe as inspirasie; daar is niks verkeerd daarmee om elemente van ander werwe af te neem en dit jou eie te maak nie (sien "donts")

Die Dont's

• moenie grafika of kleure insluit nie (dit is vir die volgende fase) - moenie jou mockups te “besig” maak nie; fokus op skoon, goed georganiseerde, gebruikersvriendelike uitlegte - moenie hierdie stadium oorslaan nie; dit is net so belangrik soos die eerste en die laaste - as jy elemente van ander webwerwe neem, maak seker dat jy nie plagiaat nie; daar is 'n verskil tussen om deur 'n ander webwerf geïnspireer te word om sekere elemente van jou ontwerp te skep en om hul uitleg en kleure blatant af te skeur

Fase 3: Uitvoering
In die derde en laaste fase, uitvoering, word die beplanning van fase 1 en 2 gekombineer om te help met die skep van 'n lewendige, interaktiewe webwerf.
Die derde fase is verreweg die tydsintensiefste aangesien jy 1) die grafika sal skep 2) die inhoud skep, en laastens, 3) die webontwerpe van beelde omskakel na kode wat webblaaiers gebruik om jou webwerf aan die wêreld voor te stel.

Teen die tyd dat jy die derde fase bereik, behoort jy 'n duidelike idee te hê van:

• hoe jou besoekers van een plek na 'n ander sal kom (fase 1, vloeidiagram) - hoe jou webblaaie uitgelê sal word (stadium 2, draadraammodelle)

As jy nie 'n duidelike idee van hierdie twee dinge het nie, gaan terug na die eerste en tweede fases en gaan voort om hulle te ontwikkel. U sal vind dat die derde fase die maklikste is as u 'n duidelike, bondige strydplan vir die ontwerp van u webwerf saamgestel het.

Gooi die pen en papier weg
In stadium 3 moet jy Photoshop of 'n ander beeldbewerkingsprogram gebruik, aangesien jy kleure en grafika gaan gebruik om die uitleg vir jou webwerf te skep.

Ons begin gewoonlik eers die "tuis"-bladsy (indeks) skep. Gebruik jou draadrame wat jy in stadium 2 geskep het as 'n sjabloon vir elk van die bladsye wat jy skep. In plaas daarvan om soliede bokse te gebruik, gebruik eerder grafika, kleure en teks. Elke bladsy moet presies lyk soos jy wil hê hulle moet lyk op die internet, aangesien dit die finale stadium van die ontwerpproses is.

Maak seker dat jy die agtergrond vir jou navigasie insluit (maar moenie eintlik die teks by jou prent voeg nie). Wanneer dit met CSS (cascading style sheets) omgeskakel word, moet jou navigasie in die vorm van teks wees en nie beelde nie. Prente kan nie deur die soekenjins deurkruip word nie (die sleutelwoorde wat in jou navigasie gebruik word, sal nie in die soekenjin se resultatebladsye geïndekseer word nie, wat beteken dat minder mense jou webwerf sal kan vind).

Wanneer jy tevrede is met jou ontwerpe en voel dat hulle gereed is om op die internet geplaas te word, is dit tyd om die ontwerpe uitmekaar te breek sodat jy 'n CSS-gebaseerde uitleg kan skep. Vir meer inligting oor die omskakeling van jou uitlegte na CSS of die merk van jou webwerf in CSS, besoek w3schools.com. Nadat ons op die internet rondgekyk het, kon ons nie 'n ordentlike beeld-na-CSS-tutoriaal vind nie – verwag dus een van ons in die komende weke. Die omskakeling van jou ontwerpe in CSS is uiters belangrik aangesien tabeluitlegte iets van die verlede is.

Hier is 'n voorbeeld van 'n amper voltooide webwerf van die uitleg wat ons in stadium 2 gespot het. Dit is direk vanaf ons webblaaier geneem en soos jy kan sien, is daar nou 'n logo, kleure, 'n mooi navigasiestelsel, 'n voetskrif, en die belangrikste, 'n skoon, georganiseerde uitleg.
Danksy die beplanning in fase 1 en 2 is ons uitleg goed georganiseer en maklik om te gebruik.

Die Dos

• verwys na jou sjablone wat in fase 2 geskep is; alhoewel dit goed is om van jou oorspronklike uitleg af te wyk, hoef jy dit nie te doen nie
• doen bietjie navorsing voordat jy jou werklike ontwerp skep; kry idees van ander webwerwe en maak dit jou eie (sonder om te plagiaat)
• sluit kleur en grafika in om die finale voorkoms vir jou webblaaie te skep -gebruik CSS (cascading style sheets) om jou ontwerpe van beelde om te skakel na opmaak wat verstaanbaar is deur webblaaiers -verwys jou vloeidiagram vanaf stadium 1 wanneer jy jou bladsye met hiperskakels kodeer; dit is beter om 'n aftrekkieslys te gebruik wat al (of die meerderheid) van die skakels op jou webwerf op elke bladsy insluit; dit sal makliker navigasie moontlik maak en dit sal ook makliker maak om jou bladsye te deurkruip wanneer die soekenjinspinnekoppe daarby stop; 'n wonderlike plek om CSS-aftrekkieslys te kry, is by DynamicDrive.com -finaliseer jou ontwerp terwyl jy in Photoshop werk of watter beeldbewerkingsagteware jy ook al gebruik; dit kan moeilik wees om veranderinge aan jou ontwerp aan te bring sodra dit omgeskakel is in opmaak (kode)

Die Donts

• moenie die teks in jou navigasiekieslys insluit wanneer jy na CSS omskakel nie; in plaas daarvan om beeldteks te gebruik, gebruik gewone teks wat deur soekenjinspinnekoppe leesbaar is
• moenie tabelle gebruik tydens omskakeling nie; al moet jy 'n boek oor CSS koop, sal dit die moeite werd wees; tafels is dood
• moenie die eerste twee fases oorslaan net om tyd te bespaar nie; jou webwerf SAL beter wees as jy by die begin van die webontwerpproses begin (in plaas van aan die einde)
• moenie vergeet om jou beelde saam te pers wanneer hulle vir CSS uitmekaar gesny word nie; daar is niks erger as 'n webwerf wat stadig laai as gevolg van groot beeldlêers nie; Photoshop het 'n opsie "Save Optimized For Web" (CS3 - "Save for Web and Devices")

Proses maak perfek
Deur 'n webontwerpproses te volg soos die een wat in hierdie artikel geïllustreer word, verhoog jy die kanse om 'n webwerf te skep wat goed georganiseer, maklik navigeerbaar en baie gebruikersvriendelik is. Kom ons erken dit – as besoekers verdwaal of verward raak terwyl hulle probeer om op jou webwerf te blaai, kan hulle die terugknoppie druk en na 'n meer gebruikersvriendelike webwerf soek. Mense hou nie daarvan om te dink wanneer dit kom by die vind van hul weg op webwerwe nie. Moenie hulle laat dink nie. Jy doen die denke deur jou webwerf van stadium 1 tot stadium 3 te beplan en jy sal vind dat meer mense dit sal geniet om jou webwerf te besoek.