Kuidas kujundada veebisaiti (piltidega)

Sisukord:

Kuidas kujundada veebisaiti (piltidega)
Kuidas kujundada veebisaiti (piltidega)

Video: Kuidas kujundada veebisaiti (piltidega)

Video: Kuidas kujundada veebisaiti (piltidega)
Video: PS4 kontrolleri nupud ei tööta 2024, Mai
Anonim

See wikiHow õpetab teile, kuidas kujundada professionaalse ja hästi toimiva veebisaidi. Kuigi suurem osa teie veebisaidi kujundusest on lõppkokkuvõttes teie otsustada, on veebisaidi loomisel mõned kriitilised asjad, mida teha ja vältida.

Sammud

Osa 1: Kuidas kujundada oma veebisaiti

Veebisaidi kujundamine 1. samm
Veebisaidi kujundamine 1. samm

Samm 1. Tehke kindlaks, kas soovite veebisaidi loojat kasutada

Nullist loodud veebisaidid nõuavad HTML -kodeerimisest üsna üksikasjalikku arusaamist, kuid saate veebisaidi hõlpsalt luua, kasutades tasuta hostimisteenust, nagu Weebly, Wix, WordPress või Google Sites. Veebisaitide loojaid on esmakordselt disaineritel palju lihtsam kasutada kui HTML-i.

  • Kui otsustate oma veebisaidi kodeerida, peate õppima nii HTML -i kui ka CSS -i kodeerimise.
  • Kui veebisaidi loomiseks aja ja energia investeerimine ei kõla ahvatlevalt, võite oma saidi loomiseks palgata ka veebisaididisaineri. Vabakutselised disainerid võivad maksta vahemikus 30 dollarit tunnis kuni tunduvalt üle 100 dollari tunnis.
Veebisaidi kujundamine 2. samm
Veebisaidi kujundamine 2. samm

Samm 2. Kaardistage oma sait

Enne veebisaidi looja avamist peaksite teadma ligikaudselt, kui palju lehti soovite oma veebisaidil kuvada, milline peaks olema nende lehtede sisu ja oluliste lehtede, näiteks avalehe ja jaotise „Üldine” üldine paigutus. lehel.

Teie veebisaidi lehti võib olla lihtsam visualiseerida, kui joonistate neist igast jämedaid pilte, mitte ei määra lihtsalt, milline sisu peaks ilmuma

Veebisaidi kujundamine 3. samm
Veebisaidi kujundamine 3. samm

Samm 3. Kasutage intuitiivset disaini

Kuigi värskete ideede kohta on midagi öelda, peaks teie veebisaidi põhikujundus järgima kehtestatud juhiseid, näiteks järgmist.

  • Navigeerimisvalikud (nt erinevate lehtede vahelehed) peaksid asuma lehe ülaosas.
  • Kui kasutate menüüikooni (☰), peaks see olema lehe vasakus ülanurgas.
  • Kui kasutate otsinguriba, peaks see asuma lehe paremas ülanurgas.
  • Kasulikud lingid (nt lingid lehele „Teave” või „Võtke meiega ühendust”) peaksid asuma iga lehe allosas.
Veebisaidi kujundamine 4. samm
Veebisaidi kujundamine 4. samm

Samm 4. Olge järjekindel

Ükskõik, millist teksti fonti, värvipaleti, pilditeemat ja kujundusvalikuid valite, veenduge, et kasutate kogu veebisaidil sama otsust. See võib olla uskumatult raputav, kui lehel "Teave" kasutatakse ühte fonti või värviskeemi, kui avalehe jaoks kasutati täiesti erinevat fonti või värviskeemi.

  • Näiteks kui kasutate oma saidi avalehel ainult jaheda tooni värve, ärge rakendage järgmisel lehel eredaid ja valju värvi.
  • Pidage meeles, et valju või põrkuvate värvide kasutamine, eriti kui värvid kuvatakse dünaamiliselt (nt liikuvalt), võib vähesel arvul veebikasutajatest esile kutsuda epilepsia. Kui otsustate oma saidil selliseid värve kasutada, lisage kindlasti enne asjakohaseid lehti epilepsiahoiatus.
Veebisaidi kujundamine 5. samm
Veebisaidi kujundamine 5. samm

Samm 5. Lisage navigeerimisvalikud

Kodulehe ülaossa otselinkide paigutamine veebisaidi olulistele lehtedele aitab suunata esmakülastajaid olulisele sisule. Enamik saidiloojaid lisab need lingid vaikimisi.

Oluline on veenduda, et iga teie veebisaidi leht on juurdepääsetav, klõpsates oma veebisaidi valikutel, mitte ainult lehe aadressi kaudu

Veebisaidi kujundamine 6. samm
Veebisaidi kujundamine 6. samm

6. Kasutage üksteist täiendavaid värve

Nagu iga teine disainilahendus, tugineb veebisaidi kujundus visuaalselt meeldivatele värvikombinatsioonidele; seetõttu on ülioluline valida teemavärvid, mis sobivad kokku.

Must, valge ja hall on hea kombinatsioon, kui te ei tea, kust alustada

Veebisaidi kujundamine 7. samm
Veebisaidi kujundamine 7. samm

Samm 7. Kaaluge minimalistliku disaini kasutamist

Minimalism julgustab jaheda tooni värve, lihtsat graafikat, mustvalgeid tekstilehti ja võimalikult vähe kaunistusi. Kuna minimalism nõuab vähe väljamõeldud elemente, on see lihtne viis muuta oma veebisait professionaalseks ja atraktiivseks ilma palju tööd nõudmata.

  • Paljudel veebisaitide loojatel on minimalistlik teema, mille saate oma veebisaidi seadistamisel valida.
  • Alternatiiviks minimalismile on "brutalism", mis kasutab karmimaid jooni, erksaid värve, julget teksti ja minimaalset kujundlikkust. Brutaalsusel on vähem järgijaid kui minimalismil, kuid sõltuvalt teie veebisaidi sisust võib see teie disainivajadustele paremini sobida.
Veebisaidi kujundamine 8. samm
Veebisaidi kujundamine 8. samm

Samm 8. Tehke ainulaadseid valikuid

Sirged jooned ja ruudustikuga lukustatud veebielemendid on turvalised panused, kuid mõne ainulaadse stiililise otsuse tegemine annab teie saidile isikupära ja aitab teie saidil silma paista.

  • Ärge kartke trende lüüa, paigutades veebisaidi elemendid asümmeetriliselt või kasutades kattuvaid elemente, et luua kihiline välimus.
  • Kuigi elegantsed, teravad nurgad ja ruudukujulised elemendid (tuntud ka kui "kaardipõhine" esitlus) on vähem soodsad kui ümarad, pehmed elemendid.

Osa 2: Kuidas veebisaidi jõudlust maksimeerida

Veebisaidi kujundamine 9. samm
Veebisaidi kujundamine 9. samm

Samm 1. Kasutage mobiilseadmete optimeerimise võimalusi

Mobiilibrauserid annavad rohkem veebiliiklust kui lauaarvuti brauserid, mis tähendab, et tähelepanu, mida pöörate oma veebisaidi mobiiliversioonile, peaks vähemalt võrduma teie lauaarvuti veebisaidi arenguga. Enamik veebisaitide loojateenuseid loob automaatselt teie saidi mobiiliversiooni, kuid peaksite oma mobiilisaidi puhul meeles pidama järgmist teavet.

  • Veenduge, et nupud (nt saidi lingid) on suured ja neid on lihtne puudutada.
  • Vältige funktsioonide rakendamist, mida ei saa mobiilseadmes vaadata (nt Flash, Java jne).
  • Kaaluge oma veebisaidi jaoks mobiilirakenduse loomist.
Veebisaidi kujundamine 10. samm
Veebisaidi kujundamine 10. samm

Samm 2. Vältige liiga palju fotode kasutamist lehel

Nii laua- kui ka mobiilibrauserid võivad vaeva näha, et laadida lehti, millel kuvatakse suur hulk fotosid või videoid. Kuigi pildid on veebidisaini seisukohalt olulised, võib rohkem kui mõne kasutamine lehe kohta põhjustada tarbetult pika laadimisaja, mis takistab inimestel kõnealust lehte (lehti) külastamast.

Üldiselt soovite, et teie veebisaidi lehed laadiksid alla nelja sekundi

Veebisaidi kujundamine 11. samm
Veebisaidi kujundamine 11. samm

Samm 3. Lisage leht "Kontakt"

Märkate, et peaaegu kõigil väljakujunenud veebisaitidel on leht „Võtke meiega ühendust”, millel on kontaktandmed (nt telefoninumber ja e -posti aadress); mõnel saidil on sellel lehel isegi sisseehitatud küsimuste vorm. Lehe „Kontakt” lisamine annab veebisaidi vaatajatele teile otseühenduse, lisades seega lahenduse võimalikele pettumustele.

Veebisaidi kujundamine 12. samm
Veebisaidi kujundamine 12. samm

Samm 4. Looge kohandatud 404 leht

Kui keegi külastab teie veebisaidi konkreetset lehte, mida pole veel seadistatud või pole olemas, kuvatakse veebileht „404 viga”. Enamikul brauseritel on vaikimisi 404 leht, kuid võite oma veebisaidi looja seadetes oma kohandada; kui jah, lisage kindlasti järgmised andmed:

  • Kerge veateade (nt "Palju õnne - leidsite meie vealehe!")
  • Link saidi avalehele
  • Kõige sagedamini vaadatavate linkide loend
  • Teie veebisaidi pilt või logo
Veebisaidi kujundamine 13. samm
Veebisaidi kujundamine 13. samm

Samm 5. Võimalusel kasutage otsinguriba

Kui teie veebisaidi loomise meetod toetab veebisaidile otsinguriba lisamist, on tungivalt soovitatav seda teha. See tagab, et kasutajad saavad kiiresti liikuda kindlale lehele või üksusele ilma teie navigeerimisvalikutel klõpsamata.

Otsinguribad on kasulikud ka siis, kui teie vaatajaskond soovib otsida üldist terminit ilma katse-eksituse meetodit kasutamata

Veebisaidi kujundamine 14. samm
Veebisaidi kujundamine 14. samm

Samm 6. Investeerige oma kodulehele kõige rohkem aega

Kui keegi jõuab teie veebisaidi avalehele, peaks ta teie veebisaidi teema sisust kohe aru saama; Lisaks peaksid kõik avalehe elemendid kiiresti laadima, sealhulgas navigeerimisvalikud ja kõik pildid. Teie avalehel peaksid olema järgmised aspektid:

  • Kutse tegevusele (nt klõpsamisnupp või täidetav vorm)
  • Navigeerimise tööriistariba või menüü
  • Kutsuv graafika (nt üks kindel foto, video või väike grupp fotosid koos kaasneva tekstiga)
  • Teie veebisaidi teenuse, teema või fookusega seotud märksõnad
Veebisaidi kujundamine 15. samm
Veebisaidi kujundamine 15. samm

Samm 7. Testige oma veebisaiti mitme platvormi mitmes brauseris

See on uskumatult oluline, kuna erinevad brauserid võivad teie veebisaidi aspekte erinevalt käsitleda. Enne veebisaidi reklaamimise alustamist proovige oma veebisaiti külastada ja kasutada järgmistes Windowsi, Maci, iPhone'i ja Androidi platvormide brauserites:

  • Google Chrome
  • Firefox
  • Safari (ainult iPhone ja Mac)
  • Microsoft Edge ja Internet Explorer (ainult Windows)
  • Sisseehitatud brauser mitmetes erinevates Android-telefonides (nt Samsung Galaxy, Google Nexus jne)
Veebisaidi kujundamine 16. samm
Veebisaidi kujundamine 16. samm

Samm 8. Jätkake oma veebisaidi vananemist

Disainitrendid, lingid, fotod, kontseptsioonid ja märksõnad muutuvad aja jooksul, nii et peate oma veebisaidil muudatuste tegemiseks jätkama, et olla kursis. Selleks peate kontrollima oma veebisaidi toimivust koos teiste sarnaste veebisaitidega vähemalt kord kolme kuu jooksul (soovitavalt sagedamini).

Põhiline HTML -abi

Image
Image

Veebilehe näidis HTML -iga

Toetage wikiHow ja avage kõik proovid.

Image
Image

HTML -i petuleht

Toetage wikiHow ja avage kõik proovid.

Image
Image

Lihtsa veebisaidi näidis

Toetage wikiHow ja avage kõik proovid.

Näpunäiteid

  • Veebisaidi juurdepääsetavus on veebisaidi arendamise teine oluline aspekt. See hõlmab näiteks subtiitreid kuulmispuudega vaatajaskonnale, helikirjeldusi pimedatele külastajatele ja valgustundlikkuse hoiatusi, kui teie veebisait kasutab potentsiaalselt krampe põhjustavaid efekte.
  • Enamikul veebisaitide loojatel on mallide komplekt, mille abil saate oma eelistatud elementide lisamiseks oma saidi kujunduse ja kujunduse kinnitada.

Hoiatused

  • Enamik saidi loojaid on tasuta; kui aga soovite kasutada oma domeeni (nt www.yourname.wordpress.com) asemel "www.yourname.com"), peate maksma igakuist või aastamaksu.
  • Vältige plagieerimist ja järgige kõiki autoriõiguse seadusi: ärge lisage ilma loata veebist juhuslikke pilte ega isegi konstruktsioonielemente.

Soovitan: