Kui soovite veebilehti kujundada ja luua, on see protsess palju lihtsam, kui plaanite ette. Planeerimisetapis saavad disainer ja klient koostöös leida oma vajadustele vastava vormi ja paigutuse. Planeerimisprotsess mõjutab saidi stiili või stiili, võib öelda, et see on veebidisaini kõige olulisem aspekt, eriti kui see on mõeldud ärilistel eesmärkidel.
Samm
Osa 1: 4: Põhistruktuuri loomine
Samm 1. Määrake veebisaidi funktsioon
Kui loote isiklikku saiti, siis teate ilmselt juba vastust. Kui aga loote saiti mõnele teisele organisatsioonile, ettevõttele või isikule, peate välja selgitama, mida ta soovib, ja saidi funktsionaalsuse. Kõik, mida siin määrate, jõustub veebilehe valmimisel.
- Kas veebisait nõuab Storefront'i? Kas kasutajate kommentaare tuleks teha? Kas kasutaja peab hiljem konto looma? Kas veebisaidi artikkel on orienteeritud? Või kuvandile orienteeritud? Kõik need ja muud küsimused aitavad teil saidi kujundamisel ja kujundamisel.
- Selle planeerimisprotsessi saab joonistada, eriti kui see on mõeldud suurettevõttele ja selle projekti loomisega on seotud palju inimesi.
Samm 2. Looge saidikaardi skeem (saidikaart)
Saidiplaani skeem sarnaneb vooskeemiga, mis näitab, kuidas kasutajad liiguvad ühelt lehelt teisele. Selles etapis pole teil vaja veebilehte, vaid üldist mõistete voogu. Diagrammide loomiseks või oma paberil visandamiseks saate kasutada arvutiprogrammi. Kasutage seda diagrammi hierarhilise paigutuse ja veebilehe ühenduvuse mõistete demonstreerimiseks.
Samm 3. Proovige kaardi koostamise meetodit
Üks populaarne rühmade veebiarenduse meetod on kõigi kaartide kasutamine kõigi ootuste väljaselgitamiseks. Võtke mitu märkmekaarti ja kirjutage veebilehe põhisisu igaühele eraldi. Korraldage need kaardid koos meeskonnaga, et leida parim idee. See meetod sobib kasutamiseks siis, kui teete veebilehtede loomisel teistega koostööd.
Samm 4. Kasutage paberit ja teadetetahvlit või tahvlit
See on väikese eelarvega originaalne planeerimismeetod, saate sisu kiiresti kustutada või nihutada ja voogu muuta. Joonistage oma veebikujundus paberile, seejärel ühendage paberid niidiga või joonistage tahvlile jooned. See meetod sobib väga hästi ajurünnakuteks.
Samm 5. Looge sisuvarud
Tegelikult on see pigem sobivam kasutada veebide ümberkujundamisel kui uutes veebikujundustes. Sisestage iga valmis sisu või veebileht arvutustabelisse. Märkige üles iga sisu või lehe eesmärk, kasutades seda loendit, et otsustada, mida eemaldada ja mida säilitada. Saate lihtsustada veebi struktuuri ja lihtsustada hiljem ümberkujundamise protsessi.
Osa 2/4: HTML -i põhikontuuri loomine
Samm 1. Looge traatraam veebilehe hierarhia loomiseks
Põhiline HTML -mall on teie loodava saidi plaan, kasutades ainult kõige elementaarsemaid silte ja näidissisu (plokid/mallid). See raamistik vastab küsimusele „Mis on veebis nähtav ja kus?” Selle kontuuri loomisel ei ole vaja vormindamist ja kujundamist.
- Enne stiiliseadete valimist näete põhistruktuuriga sisu struktuuri ja vooskeemi.
- Põhilised HTML -mallid ei ole staatilised, nagu PDF -id või pildid. Uute struktuuride loomiseks saate näitesisu kiiresti pühkida.
- Baasraamistik on interaktiivne, millest saavad kasu nii veebiarendajad kui ka kliendid. Kuna see põhiraamistik on kirjutatud lihtsa HTML -koodiga, saate sellel siiski navigeerida ja teada, kuidas veebilehtede vahetamine toimib. Seda ei saa PDF -iga teha.
Samm 2. Proovige halli kasti meetodit
Blokeerige või tõstke esile oma veebilehe sisu hallis kastis, kõige olulisem sisu on ülaosas. Sorteeri sisu ühte veergu. Näiteks kui leht on „Ettevõtte kohta”, on ülaosas üksikasjalik teave ettevõtte kohta, millele järgneb töötajate loend, seejärel kontaktandmed jne.
See ei hõlma päiseid ja jaluseid. Hall kast on veebis kuvatava sisu visuaalne esitus
Samm 3. Proovige põhilist kontuuride koostamise programmi
On mitmeid programme, mida saate kasutada põhilise veebiraamistiku loomisel. Veebiprogrammeerimiskoodi (keele) hulk, mida peate valdama, on iga programmi puhul erinev. Mõned üsna populaarsed programmid on järgmised:
- Mustrilabor. See sait on pühendatud “aatomidisainile”, iga sisu loetakse “molekuliks”, mis moodustab suurema veebilehe.
- Jumpcharts. See veebileht pakub veebipõhiseid planeerimis- ja kadreerimisteenuseid. Need saidid on tasulised ja nõuavad tellimist, kuid saate veebiraamistikke kiiresti luua, ilma et peaksite palju veebiprogrammeerimiskoodi omandama.
- Wirefy. Wirefy on veel üks sait, mis pakub "aatomidisaini". Veebiarendajad saavad tööriista tasuta.
Samm 4. Kasutage lihtsat HTML -i märgistust
Hea põhimalli saab hõlpsasti algsele saidile teisendada. Ärge mõtle selle malli loomise ajal liiga palju veebistiilile. Kasutage hõlpsasti mõistetavat ja muudetavat märgistust.
Lihtne põhiraamistik on palju parem. Märgistuse loomise eesmärk on üles ehitada struktuur. Visuaalset välimust saab hiljem kohandada CSS -i ja täiustatud märgistusega
Samm 5. Looge igale veebilehele põhikontuur
Teil võib tekkida kiusatus võrdsustada iga veebileht ühe põhijoonega. Tegelikult muudab see teie saidi lihtsaks ja igavaks. Looge igale lehele erinev kontuur, saate aru, et iga leht vajab oma kujundust.
Osa 3/4: Sisu loomine
Samm 1. Valmistage sisu ette enne veebilehe loomist
Veebivaate eelvaate vaatamine on palju lihtsam, kui teil on juba tegelik sisu näidiste või kohatäidete kasutamise asemel. Teil ei pea olema liiga palju sisu, kuid teie makett näeb palju parem välja, kui kasutate originaalpildi koopiat.
Teil ei pea olema kogu artikli materjal, kuid vähemalt sellel peaks olema tegelik pealkiri
Samm 2. Pidage meeles, et suurepärane sisu ei ole ainult tekst
Internet on palju keerulisem kui lihtne veebileht tekstiga. Külastajate ligimeelitamiseks ja kutsumiseks suurepärase veebisaidi loomiseks vajate mitmesugust erinevat sisu. Näiteks:
- Pilt.
- Hääl.
- Videod.
- Veebiedastus või veebivoo (Twitter)
- Facebooki integreerimine
- RSS
- Veebikanal
Samm 3. Küsige abi professionaalselt fotograafilt
Kui soovite oma saidile fotosid lisada, on teie veebisaidilt saadud esmamulje palju parem, kui see on täis professionaalset fotograafiat. Üks hea foto on väärt rohkem kui kakskümmend madala kvaliteediga fotot.
Otsige värskelt lõpetanud fotograafiakunsti kui odavamat lahendust kui professionaalne fotograaf, kes on selles valdkonnas juba pikka aega tegutsenud
Samm 4. Kirjutage kvaliteetseid artikleid
Veebilehe kirjalik sisu määrab teie veebiliikluse suuruse. Kuigi te ei pea selles disainiprotsessis sisu loomise pärast liiga palju muretsema, ei tee see paha, kui hakkate sellele mõtlema, sest ka pärast saidi valmimist vajate regulaarselt sisu.
Lisaks artikli sisule on olemas kirjalik materjal, mis peab teil olema ka veebilehe koostamise käigus. Näiteks kontaktandmed, ettevõtte nimi või muu, mida saidil mitu korda kasutatakse
Osa 4/4: kontseptsioonide muutmine veebisaitideks
Samm 1. Korraldage põhielemendid
See elementide paigutus kehtib teie saidi iga lehe kohta, näiteks päised, joonealused märkused ja navigeerimismenüüd. Seadistage see väga lihtsas stiilis, et saaksite kontrollida, kuidas kõik lehed välja näevad. See on eriti kasulik veebipaigutusprotsessi liikudes.
Ärge muretsege detailide pärast liiga palju, proovige päise eelvaadet (eelvaadet) vaadata
Samm 2. Looge lihtne paigutus
Alustage kellaasendi nihutamisega põhikontuuri veerult lehe tegelikule asukohale. Näiteks võiksite navigeerimise näidismenüü teisaldada lehe vasakule ja pealkirjade loendi paremale.
Enne järgmise sammu juurde liikumist jätkake mitme lehe veebipaigutustega katsetamist. Luba teistel seda vaadata, et näha, kas sinu loodud paigutus tundub elav
Samm 3. Loo makett
Kasutage oma veebisaidi makettide või näidislehtede loomiseks sellist programmi nagu Photoshop. Kasutage juhendina koostatud paigutust. Pilditöötlusprogrammiga saate makette teha kiiremini ja saada soovitud tulemusi. Nende piltide tulemusi saab hiljem kasutada viitena veebiprogrammeerimiskoodi kirjutamise protsessis.
Pange makett tegelikku sisu, et see hea välja näeks
Samm 4. Asendage näidiskontseptsioon algse sisuga
Lisage veebilehtedele sisu ja elemente. Ärge praegu higistage veebistiili seadeid, vaid pange kõik õigesse kohta. See aitab teil hiljem tehtud veebistiili muudatused üle vaadata.
Samm 5. Looge veebistiili juhend
Väga oluline on säilitada stiilide segu, eriti suurte saitide puhul. Kui sait on mõeldud ärilistel eesmärkidel ja sellel on juba oma kaubamärk või stiil, tuleks see saidi kujundusse integreerida. Veebilehe stiilijuhendi loomisel tuleb arvestada järgmiste asjadega:
- Navigeerimine
- Pea märkus
- Lõige
- Kaldkiri
- Julge iseloom
- Lingid (aktiivne, passiivne, hõljuk)
- Piltide kasutamine
- Ikoon
- Nupp
- nimekirja
Samm 6. Rakendage veebistiili
Kui olete leidnud õige stiili ja kujunduse, viige see ellu. CSS on üks lihtsamaid viise stiilide rakendamiseks veebilehel või saidil. CSS -i kasutamise üksikasjade paremaks mõistmiseks lugege järgmisi juhiseid.
