Tämä wikiHow opettaa sinulle, kuinka suunnitella verkkosivusto, joka näyttää ammattimaiselta ja toimii hyvin. Vaikka suurin osa verkkosivustosi suunnittelusta on viime kädessä sinun tehtäväsi, on joitain tärkeitä asioita, joita sinun on tehtävä ja vältettävä, kun luot verkkosivuston.
Askeleet
Osa 1/2: Verkkosivuston suunnittelu
Vaihe 1. Määritä, haluatko käyttää verkkosivuston luojaa
Alusta luodut verkkosivustot edellyttävät melko yksityiskohtaista HTML -koodauksen ymmärtämistä, mutta voit helposti luoda verkkosivuston käyttämällä ilmaista isännöintipalvelua, kuten Weebly, Wix, WordPress tai Google Sites. Verkkosivustojen luojat ovat yleensä paljon helpompia käyttää ensimmäistä kertaa suunnittelijoita kuin HTML.
- Jos päätät koodata oman verkkosivustosi, sinun on opittava sekä HTML- että CSS -koodaus.
- Jos aika- ja energiainvestointi verkkosivustosi luomiseen ei kuulosta houkuttelevalta, voit myös palkata verkkosivuston suunnittelijan luomaan sivustosi puolestasi. Freelance -suunnittelijat voivat maksaa 30 dollaria tunnissa ja reilusti yli 100 dollaria tunnissa.
Vaihe 2. Kartoita sivustosi
Ennen kuin avaat edes verkkosivuston luojaa, sinun pitäisi tietää suunnilleen kuinka monta sivua haluat verkkosivustollasi olevan, minkä sisällön kullakin sivulla pitäisi olla, ja tärkeiden sivujen, kuten etusivun ja Tietoja, yleinen asettelu sivu.
Verkkosivustosi sivut voivat olla helpompi visualisoida, jos piirrät niistä karkeita kuvia sen sijaan, että määrittäisit vain, mitä sisältöä pitäisi näyttää
Vaihe 3. Käytä intuitiivista suunnittelua
Vaikka on jotain sanottavaa tuoreista ideoista, verkkosivustosi perussuunnittelun tulee noudattaa vakiintuneita ohjeita, kuten seuraavia:
- Navigointivaihtoehtojen (esim. Eri sivujen välilehdet) pitäisi olla sivun yläreunassa.
- Jos käytät valikkokuvaketta (☰), sen pitäisi olla sivun vasemmassa yläkulmassa.
- Jos käytät hakupalkkia, sen on oltava sivun oikeassa yläkulmassa.
- Hyödyllisiä linkkejä (esim. Linkit "Tietoja" -sivulle tai "Ota yhteyttä" -sivulle) pitäisi olla jokaisen sivun alareunassa.
Vaihe 4. Ole johdonmukainen
Riippumatta valitsemastasi tekstin fontista, värivalikoimasta, kuvateemasta ja suunnitteluvaihtoehdoista, varmista, että käytät samaa päätöstä koko sivustossasi. Voi olla uskomattoman järkyttävää nähdä yksi fontti tai värimalli, jota käytetään "Tietoja" -sivulla, kun etusivulla on käytetty täysin erilaista fonttia tai värimaailmaa.
- Jos esimerkiksi käytät sivustosi etusivulla yksinomaan kylmiä sävyjä, älä käytä kirkkaita, kovia värejä seuraavalla sivulla.
- Muista, että voimakkaiden tai ristiriitaisten värien käyttäminen, varsinkin kun värit näkyvät dynaamisesti (esim. Liikkuvasti), voi aiheuttaa epilepsiaa pienellä määrällä verkkokäyttäjiä. Jos päätät käyttää tällaisia värejä sivustossasi, muista lisätä epilepsiavaroitus ennen asiaankuuluvia sivuja.
Vaihe 5. Lisää navigointivaihtoehtoja
Sivusivun yläreunaan sijoittamalla suorat linkit verkkosivustosi tärkeille sivuille auttavat ohjaamaan ensimmäistä kertaa kävijät tärkeään sisältöön. Useimmat sivuston luojat lisäävät nämä linkit oletuksena.
On tärkeää varmistaa, että jokainen verkkosivustosi sivu on käytettävissä napsauttamalla verkkosivustosi vaihtoehtoja eikä vain sivun osoitteen kautta
Vaihe 6. Käytä toisiaan täydentäviä värejä
Kuten mikä tahansa muu muotoilu, verkkosivujen suunnittelu perustuu visuaalisesti miellyttäviin väriyhdistelmiin; tämän vuoksi on tärkeää valita yhteen sopivat teeman värit.
Musta, valkoinen ja harmaa on hyvä yhdistelmä, jos et tiedä mistä aloittaa
Vaihe 7. Harkitse minimalistisen suunnittelun käyttöä
Minimalismi rohkaisee kylmiä sävyjä, yksinkertaisia grafiikoita, mustavalkoisia tekstisivuja ja mahdollisimman vähän koristelua. Koska minimalismi ei vaadi juurikaan hienoja elementtejä, se on helppo tapa saada verkkosivustosi näyttämään ammattimaiselta ja houkuttelevalta ilman paljon työtä.
- Monilla verkkosivustojen tekijöillä on "minimalistinen" teema, jonka voit valita verkkosivustoasi määrittäessäsi.
- Vaihtoehto minimalismille on "brutalismi", joka käyttää ankarampia linjoja, kirkkaita värejä, lihavoitua tekstiä ja minimaalisia kuvia. Brutalismi seuraa vähemmän kuin minimalismi, mutta sivustosi sisällöstä riippuen se saattaa sopia paremmin suunnittelutarpeisiisi.
Vaihe 8. Tee ainutlaatuisia valintoja
Suorat linjat ja ruudukolla lukitut verkkoelementit ovat turvallisia panoksia, mutta muutamien ainutlaatuisten tyylipäätösten tekeminen sekä antaa sivustollesi persoonallisuuden että erottuu sivustostasi.
- Älä pelkää houkutella trendejä sijoittamalla verkkosivuston elementtejä epäsymmetrisesti tai käyttämällä päällekkäisiä elementtejä luodaksesi kerroksellisen ulkoasun.
- Tyylikkäät, terävät kulmat ja nelikulmaiset elementit (tunnetaan myös nimellä "korttipohjainen" esitys) ovat epäedullisempia kuin pyöristetyt, pehmeät elementit.
Osa 2/2: Verkkosivuston suorituskyvyn maksimointi
Vaihe 1. Hyödynnä mobiilin optimointivaihtoehdot
Mobiiliselaimet tuottavat enemmän verkkoliikennettä kuin työpöytäselaimet, mikä tarkoittaa, että verkkosivustosi mobiiliversioon kiinnitettävän huomion tulee olla vähintään sama kuin työpöytäsivustosi kehitys. Useimmat verkkosivujen luojapalvelut luovat automaattisesti mobiiliversion sivustostasi, mutta sinun on pidettävä mielessä seuraavat tiedot mobiilisivustollesi:
- Varmista, että painikkeet (esim. Sivustolinkit) ovat suuria ja niitä on helppo napauttaa.
- Vältä sellaisten ominaisuuksien käyttöönottoa, joita ei voi katsella mobiililaitteilla (esim. Flash, Java jne.).
- Harkitse verkkosivustosi mobiilisovelluksen luomista.
Vaihe 2. Vältä liikaa valokuvia sivulla
Sekä pöytätietokoneet että mobiililaitteet voivat selailla sivuja, jotka näyttävät suuren määrän valokuvia tai videoita. Vaikka kuvat ovat tärkeitä web -suunnittelussa, useamman kuin yhden käyttäminen sivulla voi aiheuttaa tarpeettoman pitkiä latausaikoja, mikä estää ihmisiä käymästä kyseisellä sivulla.
Yleisesti ottaen haluat, että verkkosivustosi sivut latautuvat alle neljässä sekunnissa
Vaihe 3. Lisää "Yhteystiedot" -sivu
Huomaat, että lähes kaikilla vakiintuneilla verkkosivustoilla on "Ota yhteyttä" -sivu, joka sisältää yhteystietoja (esim. Puhelinnumeron ja sähköpostiosoitteen). Joillakin sivustoilla on jopa sisäänrakennettu kysymyslomake tällä sivulla. "Yhteystiedot" -sivun lisääminen antaa sivuston katsojille suoran viestintälinjan sinulle, mikä lisää ratkaisua mahdollisiin turhautumisiin.
Vaihe 4. Luo oma 404 -sivu
Kun joku vierailee verkkosivustosi tietyllä sivulla, jota ei ole määritetty tai jota ei ole olemassa, 404 -virhe -verkkosivu tulee näkyviin. Useimmilla selaimilla on oletussivu 404, mutta voit ehkä muokata omiasi verkkosivustosi luoja -asetuksissa. jos on, varmista, että sisällytät seuraavat tiedot:
- Kevyt virhesanoma (esim. "Onnittelut - olet löytänyt virhesivumme!")
- Linkki takaisin sivuston etusivulle
- Luettelo yleisimmin katsotuista linkeistä
- Kuva tai logo verkkosivustollesi
Vaihe 5. Käytä hakupalkkia, jos mahdollista
Jos verkkosivustosi luontimenetelmä tukee hakupalkin lisäämistä verkkosivustoosi, on erittäin suositeltavaa tehdä niin. Tämä varmistaa, että käyttäjät voivat siirtyä nopeasti tietylle sivulle tai kohteeseen ilman, että heidän tarvitsee napsauttaa navigointivaihtoehtojasi.
Hakupalkit ovat hyödyllisiä myös silloin, kun yleisösi haluaa etsiä yleistä termiä ilman kokeiluja
Vaihe 6. Sijoita eniten aikaa kotisivullesi
Kun joku saapuu verkkosivustosi etusivulle, hänen pitäisi saada verkkosivustosi teeman ydin välittömästi; Tämän lisäksi kaikkien kotisivun elementtien pitäisi latautua nopeasti, mukaan lukien navigointivaihtoehdot ja mahdolliset kuvat. Etusivullasi pitäisi olla seuraavat näkökohdat:
- Toimintakehotus (esim. Napsautuspainike tai täytettävä lomake)
- Navigoinnin työkalurivi tai valikko
- Kutsuva grafiikka (esim. Yksi kiinteä valokuva, video tai pieni joukko valokuvia ja niihin liittyvä teksti)
- Avainsanat, jotka liittyvät verkkosivustosi palveluun, aiheeseen tai painopisteeseen
Vaihe 7. Testaa verkkosivustosi useilla selaimilla useilla alustoilla
Tämä on uskomattoman tärkeää, koska eri selaimet voivat käsitellä verkkosivustosi osia eri tavalla. Ennen kuin aloitat verkkosivustosi mainostamisen, vieraile verkkosivustollasi ja käytä sitä seuraavissa selaimissa Windows-, Mac-, iPhone- ja Android -alustoilla:
- Google Chrome
- Firefox
- Safari (vain iPhone ja Mac)
- Microsoft Edge ja Internet Explorer (vain Windows)
- Sisäänrakennettu selain useissa eri Android-puhelimissa (esim. Samsung Galaxy, Google Nexus jne.)
Vaihe 8. Jatka verkkosivustosi päivittämistä sen ikääntyessä
Suunnittelutrendit, linkit, valokuvat, käsitteet ja avainsanat muuttuvat ajan myötä, joten sinun on jatkettava verkkosivustosi muuttamista pysyäksesi ajan tasalla. Tämä edellyttää, että tarkistat verkkosivustosi suorituskyvyn muiden vastaavien sivustojen rinnalla vähintään joka kolmas kuukausi (mieluiten useammin).
HTML -perusohje
Esimerkki verkkosivusta HTML -koodilla
Tuki wikiHow ja avaa kaikki näytteet.
HTML -huijaussivu
Tuki wikiHow ja avaa kaikki näytteet.
Esimerkki yksinkertaisesta verkkosivusta
Tuki wikiHow ja avaa kaikki näytteet.
Vinkkejä
- Verkkosivujen saavutettavuus on toinen tärkeä osa verkkosivujen kehittämistä. Tämä sisältää esimerkiksi tekstitykset kuulovammaisille yleisölle, äänikuvaukset sokeille vierailijoille ja valoherkkyysvaroitukset, jos verkkosivustosi käyttää mahdollisesti kohtauksia aiheuttavia vaikutuksia.
- Useimmilla verkkosivustojen luojailla on joukko malleja, joiden avulla voit vahvistaa sivustosi ulkoasun ja suunnittelun ennen haluamiesi elementtien lisäämistä.
Varoitukset
- Useimmat sivuston luojat ovat ilmaisia; Jos kuitenkin haluat käyttää omaa verkkotunnustasi (esim. "www.journame.com" "www.yourname.wordpress.com" sijaan), sinun on maksettava kuukausi- tai vuosimaksu.
- Vältä plagiointia ja noudata kaikkia tekijänoikeuslakeja: älä lisää satunnaisia kuvia verkosta tai edes rakenneosia ilman lupaa.
