Kui soovite veebisaiti kujundada ja luua, on see palju lihtsam, kui kulutate selle planeerimisele veidi aega. Planeerimisfaas võimaldab arendajal ja kliendil koostööd teha, kuni nad leiavad oma vajadustele vastava vormingu ja paigutuse. Planeerimisprotsess mõjutab saidi stiilivalikuid ja on vaieldamatult veebidisaini kõige olulisem aspekt, eriti ettevõtete jaoks.
1
Määrake saidi funktsionaalsus. Kui loote saiti enda jaoks, teate tõenäoliselt juba vastust sellele küsimusele. Kui loote saiti teisele inimesele, ettevõttele või organisatsioonile, peate välja selgitama, mida nad saidilt ja selle funktsionaalsuselt ootavad. Kõik, mille siin otsustate, mõjutab lõplikku veebisaiti. Kas see vajab poe esikülge? Kas vajate kasutajate kommentaare? Kas kasutajad peavad looma kontod? Kas see on artiklile orienteeritud? Pildile orienteeritud? Kõik need küsimused ja palju muud aitavad teavet saidi kujunduse ja struktuuri kohta. See võib olla pikk protsess, eriti suuremate ettevõtete jaoks, kus projektiga on seotud palju inimesi.
2
Looge saidikaardi diagramm. Saidikaardi diagramm on nagu vooskeem ja näitab, kuidas kasutajad ühelt lehelt teisele liiguvad. Siin pole vaja isegi lehti, vaid üldist mõistete voogu. Diagrammi loomiseks võite kasutada arvutiprogrammi või visandada selle ise paberile. Kasutage saidikaardi diagrammi, et näidata, kuidas näete veebilehe hierarhiat ja ühenduvust.
3
Proovige kaartide sorteerimist. Populaarne meetod grupi jaoks on kasutada kaardivirna, et selgitada välja igaühe ideaalne lähenemisviis. Võtke virn märkmekaarte ja kirjutage igaühele ühe lehe põhisisu. Laske oma meeskonnal kaardid korraldada nii, nagu nad kõige kasulikumaks peavad. See sobib kõige paremini olukordades, kus teete saidi loomisel teistega koostööd.
4
Kasutage paberit ja teadetetahvlit või tahvlit. See on algne väikese eelarvega planeerimismeetod, mis võimaldab teil sisu kiiresti kustutada või teisaldada ja selle ümber suunata. Joonistage kujundus paberitükkidele ja ühendage need nööriga või joonistage piirjooned tahvlile. Suurepärane ajurünnakuteks.
5
Tehke sisu inventuur. See on rohkem suunatud ümberkujundamisele kui uutele saitidele. Sisestage kõik oma sisutükid või olemasolevad lehed arvutustabelisse. Märkige üles igaühe eesmärk ja kasutage seda loendit, et teha kindlaks, mis läheb ja mis jääb. See aitab vähendada rasva ja lihtsustab ümberkujundamisprotsessi.
6
Looge traatraam, mis aitab hierarhiat tugevdada. HTML-traatraam on teie tulevase saidi skelett, mis kasutab sisu esitamiseks ainult kõige elementaarsemaid silte ja plokke. See vastab küsimusele: “Mis ja kus ekraanil kuvatakse?” Vormindamist ja stiili eiratakse traatraamis täielikult. Raam võimaldab teil näha sisu struktuuri ja voogu enne stiilivalikute tegemist.HTML-traatraamid ei ole staatilised nagu PDF-id või pildid ning võimaldavad teil sisuplokke kiiresti ümber tõsta, et luua uus struktuur.Raamat on interaktiivne, mis on kasulik nii arendajale kui ka kliendile. Kuna traatkarkass on kirjutatud lihtsas HTML-is, saate sellegipoolest navigeerida ja tunda, kuidas lehtede vahel liikumine toimib. Seda ei saa PDF-i kontseptsiooni kaudu väljendada.
7
Proovige halli kasti meetodit. Blokeerige oma lehe sisu hallides kastides, kusjuures kõige olulisem sisu on ülaosas. Plokid on paigutatud ühte veergu, kusjuures lehe kõige olulisem sisu on ülaosas. Näiteks kui leht on ettevõtte leht Teave, võivad ettevõtte üksikasjad olla ülaosas, millele järgneb töötajate loend, millele järgneb kontaktteave jne. See ei sisalda päist ja jalust. Hallid kastid kujutavad endast lihtsalt lehel leiduvat sisu visuaalselt.
8
Proovige traatraamimisprogrammi. On mitmeid programme, mis võivad teid raamimisprotsessis aidata. Kodeerimisalaste teadmiste hulk on programmiti erinev. Mõned populaarsemad programmid hõlmavad järgmist: Pattern Lab. See sait on spetsialiseerunud “aatomdisainile”, kus igat sisu käsitletakse kui “molekuli”, mis moodustab suurema lehe. Kiirdiagrammid. See on veebisaitide planeerimise ja raamimise teenus. See nõuab tasulist tellimust, kuid võimaldab teil kiiresti luua traatraamid, ilma et peaksite kodeerimise pärast liiga palju muretsema. Wirefy. Wirefy on veel üks “aatomi disaini” süsteem. Tööriistad on arendajatele tasuta saadaval.
9
Kasutage lihtsat HTML-i märgistust. Hea traatraami saab hiljem hõlpsasti tegelikuks saidiks teisendada. Ärge muretsege raamimise ajal stiili pärast. Selle asemel kasutage märgistust, mida saab hõlpsasti mõista ja vähese vaevaga ümber vahetada. Traatraamiga on vähem rohkem. Eesmärk on lihtsalt struktuur üles ehitada. Visuaale saab hiljem CSS-i ja täpsema märgistuse abil kohandada.
10
Looge oma saidi iga lehe jaoks traatraam. Võib tekkida kiusatus teha üks traatraam ja öelda: “Lahe, ma saan seda igal lehel rakendada ja mul on hea.” Tegelikkuses toob see kaasa üldise ja igava saidi. Võtke aega iga lehe raamimiseks ja avastate peagi, et igal lehel on oma organisatsioonilised vajadused.
11
Enne veebisaidi loomise alustamist valmistage sisu ette. Kui teil on kohahoidjate asemel tegelik sisu, on palju lihtsam näha, kuidas teie veebisaidi stiil välja näeb. Teil ei ole vaja liiga palju sisu, kuid see näeb makettides palju parem välja, kui teil on koopiad ja originaalkujutised. Te ei vaja tingimata artikli sisu, kuid teil peaksid olema vähemalt tegelikud pealkirjad.
12
Pidage meeles, et hea sisu on midagi enamat kui tekst. Internet on palju enamat kui lihtsad tekstiveebisaidid. Oma nišis silma paistmiseks vajate külastajate meelitamiseks ja hoidmiseks mitmesuguseid sisutüüpe. Mõned võimalikud sisud, mida meeles pidada: pildid. AudioVideoStreams (Twitter) Facebooki integreerimine RSSIsukanalid
13
Telli professionaalne fotograaf. Kui lisate oma saidile fotosid, on teie esmamulje professionaalse fotograafiaga palju parem. Üks hea foto on rohkem väärt kui kakskümmend halba. Otsige hiljutisi kunstifotograafia lõpetajaid, et leida odavamaid lahendusi kui kauaaegsed professionaalid.
14
Kirjutage kvaliteetseid artikleid. Teie lehel olev kirjalik sisu määrab teie veebiliikluse suure hulga. Kuigi te ei pea kujundusprotsessi praeguses etapis sisu loomise pärast liiga palju muretsema, ei tee haiget sellele mõtlema hakata, sest pärast saidi avaldamist vajate sisu regulaarselt.Beyond article sisu, on kirjalikud üksused, mida te tõenäoliselt veebisaidi loomise protsessi käigus kasutate. See võib hõlmata kontaktteavet, ettevõtete nimesid või midagi muud, mida kasutatakse saidi mitmes kohas.
15
Stiili globaalsed elemendid. Need on asjad, mida näete teie saidi igal lehel (nt päis, jalus ja navigeerimismenüü). Looge väga lihtne stiil, et saaksite näha, kuidas kõik teie lehed välja näevad, kui need on paigas. See on väga kasulik, kui lähete küljendusprotsessi. Ärge muretsege liiga palju üksikasjade pärast, kuid proovige saada see mõnevõrra lähedaseks sellele, kuidas päised lõpuks välja näevad.
16
Looge põhipaigutus. Alustage traatraami kellade liigutamist ühest veerust nende üldistesse asukohtadesse lehel. Näiteks võite liigutada navigeerimisploki lehe vasakusse serva ja pealkirjade loendi paremale. Enne edasiliikumist katsetage paar lehekülge paigutustega. Laske teistel neid katsetada, et näha, kas nad tunnevad end orgaanilisena.
17
Loo makett. Kasutage oma saidi mõnest leheküljest maketi loomiseks sellist programmi nagu Photoshop. Kasutage juhisena valitud paigutust. Saate töötada palju kiiremini pilditöötlusprogrammis ja saada kõik just nii, nagu soovite. See võimaldab teil kasutada neid pilte viidetena, kui on aeg tegelikult kodeerida. Kaasake maketi tegelik sisu, et kõik koos hea välja näeks.
18
Asendage oma plokid sisuga. Alustage lehele sisu ja elementide lisamist. Ärge muretsege veel stiili pärast, vaid asetage kõik õigesse kohta. See aitab teil öelda, kas teie stiilimuutused hakkavad toimima.
19
Loo stiilijuhend. See on oluline ühtse stiili säilitamiseks, eriti suuremate saitide puhul. Kui sait on mõeldud ettevõttele, millel on juba visuaalne kaubamärk, tuleks see saidi kujundusse kaasata. Asjad, mida stiilijuhendis kaaluda: navigeerimispäised (
, jne) lõigud kaldkirjad paksus kirjas lingid (aktiivsed, passiivsed, hõljuvad) pildikasutus ikoonid nupud loendid
20
Rakenda oma stiili. Kui olete saidi stiili ja kujunduse otsustanud, on aeg alustada selle rakendamist. CSS on üks lihtsamaid viise stiili juurutamiseks lehel või kogu saidil. Lisateavet CSS-i kasutamise kohta leiate sellest juhendist.