Kun suunnittelet verkkosivustoa, sinun on ensinn\u00e4kin m\u00e4\u00e4ritelt\u00e4v\u00e4, miksi tarvitset verkkosivuston. Mit\u00e4 tarkoitusta verkkosivusto palvelee sinua? Verkkosivustosi on oltava br\u00e4ndisi ainutlaatuinen tunniste, joten se on suunniteltava liiketoimintasi tarpeiden mukaisesti. <\/p>\n\n\n\n
Sinun on p\u00e4\u00e4tett\u00e4v\u00e4, mit\u00e4 sis\u00e4lt\u00f6\u00e4 aiot julkaista verkkosivustollasi. Tuleeko siit\u00e4 verkkokauppa vai tietokeskus asiakkaillesi vai onko se uutissivusto. <\/p>\n\n\n\n
Voit valita kolme strategista vaihtoehtoa - myyd\u00e4 tuotteita tai palveluita, luoda johtolankoja ja luoda yritystunnuksia. N\u00e4ihin kuuluvat verkkokaupat, portfoliosivustot, blogit, laskeutumissivut, ansioluettelosivustot, tapahtumasivustot ja paljon muuta, ja kullakin on erilainen tavoite. <\/p>\n\n\n\n
Sivuston tarkoitus vaikuttaa my\u00f6s sivuston suunnitteluun. Se, mit\u00e4 toimintoja sivustoon on sis\u00e4llytett\u00e4v\u00e4, p\u00e4\u00e4tet\u00e4\u00e4n sen tarkoituksen perusteella. <\/p>\n\n\n\n
N\u00e4in ollen sinulla on oltava my\u00f6s asianmukainen sis\u00e4lt\u00f6strategia, jossa m\u00e4\u00e4ritell\u00e4\u00e4n, millaista sis\u00e4lt\u00f6\u00e4 aiot julkaista sivustolla.<\/p>\n\n\n\n Kun verkkosivuston tavoite on asetettu, sinun on p\u00e4\u00e4tett\u00e4v\u00e4, mit\u00e4 alustaa aiot k\u00e4ytt\u00e4\u00e4 verkkosivuston kehitt\u00e4miseen. Verkossa on monia alustoja, joista voit valita. <\/p>\n\n\n\n Yksi suosituimmista vaihtoehdoista on WordPress. L\u00e4hes 20% itse yll\u00e4pidett\u00e4vien verkkosivustojen osalta<\/a> k\u00e4ytt\u00e4v\u00e4t maailmanlaajuisesti WordPressi\u00e4, joka on valtava yhdelle alustalle.<\/p>\n\n\n\n WordPress antaa sinulle niin paljon suunnitteluvaihtoehtoja, ett\u00e4 voit tarkastella 10 t\u00e4ysin erilaista verkkosivustoa, joilla on eritt\u00e4in erilaiset mallit ja elementit, ja ne kaikki voidaan rakentaa WordPressill\u00e4. <\/p>\n\n\n\n Voit luoda virheett\u00f6mi\u00e4 ja ainutlaatuisia verkkosivuja WordPressin avulla, mutta ennen kuin aloitat, sinun on valittava hosting-paketti. <\/p>\n\n\n\n Sinun on my\u00f6s ostettava ja ladattava teemasi ennen kuin aloitat verkkosivustosi rakentamisen. Katsotaanpa WordPress-sivuston suunnitteluun liittyvi\u00e4 vaiheita. T\u00e4m\u00e4 auttaa sinua ymm\u00e4rt\u00e4m\u00e4\u00e4n prosessia paremmin.<\/p>\n\n\n\n T\u00e4m\u00e4 on luultavasti prosessin helpoin ja samalla kriittisin osa. Nimen valitseminen verkkosivustollesi on helppoa, mutta sinun on my\u00f6s muistettava, ett\u00e4 t\u00e4m\u00e4 on nimi, johon ihmiset yhdist\u00e4v\u00e4t br\u00e4ndisi. Tee siis valintasi viisaasti. <\/p>\n\n\n\n Useat yritykset voivat rekister\u00f6id\u00e4 uuden verkkotunnuksen puolestasi. Suosituimpia yrityksi\u00e4 ovat muun muassa BlueHost, DreamHost, GoDaddy ja Hostinger. Otetaan nyt esimerkiksi BlueHost. <\/p>\n\n\n\n BlueHost<\/a> on WordPressille optimoitu hosting-sivusto. Se on melko edullinen ja aloittelijayst\u00e4v\u00e4llinen, joten se ei ole liian ylivoimainen. <\/p>\n\n\n\n Mene siis BlueHostin sivustolle ja valitse itsellesi sopiva hosting-paketti. Voit valita kolmesta eri suunnitelmasta - Basic, Plus ja Choice Plus. Jos olet vasta aloittamassa, Basic-paketti riitt\u00e4\u00e4 hyvin. <\/p>\n\n\n\n Seuraava vaihe on verkkotunnuksen sy\u00f6tt\u00e4minen, jonka olet valinnut verkkosivustollesi. BlueHost antaa sinulle my\u00f6s ilmaisen verkkotunnuksen 1 vuodeksi, jos tarvitset sellaisen. T\u00e4m\u00e4n j\u00e4lkeen voit sy\u00f6tt\u00e4\u00e4 henkil\u00f6kohtaiset tietosi, suorittaa maksun ja saattaa oston p\u00e4\u00e4t\u00f6kseen. <\/p>\n\n\n\n Voit asentaa WordPressin manuaalisesti tai k\u00e4ytt\u00e4\u00e4 BlueHostia t\u00e4h\u00e4n. Kun olet rekister\u00f6itynyt BlueHostiin, voit kirjautua asiakasprofiiliisi. BlueHost tarjoaa sinulle helppok\u00e4ytt\u00f6isen ohjatun toiminnon WordPressin asentamista varten. <\/p>\n\n\n\n Voit my\u00f6s siirty\u00e4 \"Omat sivustot\" -v\u00e4lilehdelle ja antaa uuden sivustosi verkkotunnuksen ja WordPressiss\u00e4 k\u00e4ytt\u00e4m\u00e4si k\u00e4ytt\u00e4j\u00e4tunnuksen tai salasanan, ja kun ohjattu asennus on valmis, sivustosi on valmis muokattavaksi. <\/p>\n\n\n\n Permalinkki m\u00e4\u00e4ritt\u00e4\u00e4, miten URL-osoitteesi on j\u00e4sennelty sivustossasi. Yleisin ja k\u00e4yt\u00e4nn\u00f6llisin rakenne on sellainen, jossa on sivuston nimi ja sivun otsikko. <\/p>\n\n\n\n Esimerkiksi SaaS-sivuston hinnoittelusivun URL-osoite voi olla \"XYZ.com\/pricing\". <\/p>\n\n\n\n Jos haluat valita WordPressin permalinkin, valitse Asetukset ja sitten Permalinks ja valitse haluamasi tyyli. <\/p>\n\n\n\n Jotta verkkosivustosi n\u00e4kyisi kaikille ja n\u00e4kyisi hakusanoissa, Googlen on l\u00f6ydett\u00e4v\u00e4 ja indeksoitava sivustosi. T\u00e4t\u00e4 varten sinun on ment\u00e4v\u00e4 uudelleen WordPressin asetuksiin, sitten kohtaan Lukeminen ja poistettava valintaruutu kohdasta \"Discourage search engines from indexing this site\".<\/p>\n\n\n\n Seuraavaksi asetat WordPress-sivuston otsikon ja taglineen. Siirry t\u00e4t\u00e4 varten Asetuksiin ja kirjoita Aseta otsikko ja iskulause -kenttiin haluamasi otsikko ja iskulause. <\/p>\n\n\n\n Valitsemastasi teemasta riippuen otsikko ja iskulause voivat n\u00e4ky\u00e4 useissa eri paikoissa verkkosivustollasi. Se on my\u00f6s SEO-kuvauksessa, jota Google k\u00e4ytt\u00e4\u00e4 listatessaan sivustosi hakutuloksissa. <\/p>\n\n\n\n Tunnuslause ei kuitenkaan ole pakollinen, ja sen voi j\u00e4tt\u00e4\u00e4 tyhj\u00e4ksi, jos sit\u00e4 ei tarvita. <\/p>\n\n\n\n Jos haluat sallia tai est\u00e4\u00e4 k\u00e4ytt\u00e4ji\u00e4 kommentoimasta uusia viestej\u00e4, pingbackeja jne., voit menn\u00e4 Asetukset-kohtaan ja sitten Keskustelut-kohtaan ja tehd\u00e4 muutokset rastittamalla tai poistamalla rastit.<\/p>\n\n\n\n Aikavy\u00f6hykkeen asettaminen tekee uusien postausten ja sivujen julkaisemisesta mielekk\u00e4\u00e4mp\u00e4\u00e4 tai ennakoitavampaa. Voit asettaa aikavy\u00f6hykkeen sijaintisi mukaan tai sen mukaan, miss\u00e4 kohdeyleis\u00f6si on, sen mukaan, kumpi palvelee tarkoitusta paremmin.<\/p>\n\n\n\n Seuraavaksi sinun on hankittava WordPress-teema sivustollesi. WordPressiss\u00e4 itsess\u00e4\u00e4n on muutamia ilmaisia ja maksullisia vaihtoehtoja, mutta jos haluat laajemman valikoiman, sinun on ment\u00e4v\u00e4 verkkomarkkinapaikalle, kuten osoitteeseen ThemeForest<\/a> tai riippumaton teemakauppa kuten ThemeIsle<\/a>.<\/p>\n\n\n\n Voit ostaa haluamasi teeman n\u00e4ilt\u00e4 sivustoilta ja ladata zip-tiedoston WordPressiin. Kun teema on lis\u00e4tty WordPress-kirjastoon, se voidaan asentaa helposti menem\u00e4ll\u00e4 kohtaan Ulkoasu \u2192 Teemat, valitsemalla teema ja napsauttamalla Asenna. Ja ottaaksesi sen k\u00e4ytt\u00f6\u00f6n sivustollasi sinun tarvitsee vain napsauttaa esiin tulevaa Aktivoi-painiketta. <\/p>\n\n\n\n Toinen eritt\u00e4in t\u00e4rke\u00e4 asia, joka auttaa sinua my\u00f6hemmin hallitsemaan sivustoasi, on k\u00e4ytt\u00e4m\u00e4si lis\u00e4osat. Olipa kyse sitten siit\u00e4, ett\u00e4 haluat sivustoosi analytiikkaa, haluat luoda verkkokaupan tai haluat helposti muuttaa verkkosivustosi ulkoasua, laajennukset ovat v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4. <\/p>\n\n\n\n Valitse siis huolellisesti tuhansista saatavilla olevista WordPress-liit\u00e4nn\u00e4isist\u00e4 ja asenna ne t\u00e4ss\u00e4 vaiheessa.<\/p>\n\n\n\n T\u00e4m\u00e4n j\u00e4lkeen verkkosivujen suunnittelun perusteet ovat l\u00e4hes valmiit. Nyt sinun on hiukan hienos\u00e4\u00e4dett\u00e4v\u00e4 asioita, jotta siit\u00e4 tulisi toimivampi ja houkuttelevampi.<\/p>\n\n\n\n Vaikka web-suunnitteluvalintoihin vaikuttavat enemm\u00e4n henkil\u00f6kohtaiset mieltymyksesi, on kuitenkin suositeltavaa seurata uusimpia web-suunnittelun trendej\u00e4 varmistaaksesi, ettei sivustosi j\u00e4\u00e4 mist\u00e4\u00e4n paitsi. <\/p>\n\n\n\n Katso, mit\u00e4 kilpailijasi tekev\u00e4t. N\u00e4in saat selville, mitk\u00e4 ovat alasi viimeisimm\u00e4t trendit, ja voit sitten p\u00e4\u00e4tt\u00e4\u00e4, seuraatko tuota trendi\u00e4 vai luotko uuden. <\/p>\n\n\n\n Trendeihin voi kuulua mit\u00e4 tahansa muiden kilpailevien sivustojen k\u00e4ytt\u00e4mist\u00e4 v\u00e4reist\u00e4 fontteihin ja siihen, millaista vuorovaikutusta tuotemerkit ovat asiakkaidensa kanssa, ja paljon muuta.<\/p>\n\n\n\n Br\u00e4nd\u00e4ys<\/a> on eritt\u00e4in t\u00e4rke\u00e4\u00e4 verkkosivujen suunnittelussa. Verkkosivustosi edustaa br\u00e4ndi\u00e4si verkossa, joten sen on oltava yhdenmukainen yleisen br\u00e4ndin kanssa. <\/p>\n\n\n\n Kaiken logosta, kirjasimista, v\u00e4rimaailmasta ja k\u00e4ytt\u00e4mist\u00e4si kuvista l\u00e4htien on oltava linjassa br\u00e4ndistrategian kanssa. <\/p>\n\n\n\n Esimerkiksi k\u00e4ytt\u00e4m\u00e4si v\u00e4rimaailman pit\u00e4isi v\u00e4litt\u00f6m\u00e4sti muistuttaa k\u00e4vij\u00e4\u00e4 yrityksest\u00e4si. Sill\u00e4 pit\u00e4isi olla jonkinlainen yhteys yrityksesi imagoon. <\/p>\n\n\n\n Jos esimerkiksi myyt ruukkukasveja verkossa, verkkosivustosi v\u00e4rimaailman tulisi mieluiten sis\u00e4lt\u00e4\u00e4 vihre\u00e4n s\u00e4vyj\u00e4, jotta k\u00e4vij\u00e4t voivat yhdist\u00e4\u00e4 yrityksesi sivustoon. <\/p>\n\n\n\n Kukin v\u00e4ri spektriss\u00e4 edustaa tiettyj\u00e4 ominaisuuksia, kuten vaaleanpunainen v\u00e4ri edustaa jotain naisellista tai tytt\u00f6m\u00e4ist\u00e4, punainen v\u00e4ri edustaa energiaa tai elinvoimaa ja keltainen v\u00e4ri optimismia ja iloisuutta. On siis t\u00e4rke\u00e4\u00e4 k\u00e4ytt\u00e4\u00e4 v\u00e4rej\u00e4 sopivasti. <\/p>\n\n\n\n T\u00e4m\u00e4n lis\u00e4ksi logon ja fonttien tulisi olla yhdenmukaisia muiden alustojen kanssa. K\u00e4ytt\u00e4m\u00e4ll\u00e4 r\u00e4\u00e4t\u00e4l\u00f6ityj\u00e4 kuvia oikeissa paikoissa sivustolla voi my\u00f6s toimia hyvin br\u00e4nd\u00e4yksesi kannalta. <\/p>\n\n\n\n Seuraava asia, jonka sivustosi tarvitsee, on sivustokartta. Sivustokartta m\u00e4\u00e4ritt\u00e4\u00e4, kuinka monta sivua sinun on luotava. Sivustokartta antaa sinulle selke\u00e4n kuvan siit\u00e4, mit\u00e4 sivustosi kattaa. <\/p>\n\n\n\n Verkkosivuston rakentaminen ilman sivustokarttaa voi olla hyvin vaikeaa, koska sinulla ei ole k\u00e4sityst\u00e4 siit\u00e4, mik\u00e4 verkkosivustosi laajuus tulisi olla.<\/p>\n\n\n\n Ihanteellisessa sivustokartassa on yleens\u00e4 seuraavat sivut:<\/p>\n\n\n\n Jotkin verkkosivustot saattavat tarvita my\u00f6s seuraavia <\/p>\n\n\n\n Jokaisella yrityksell\u00e4 on ainutlaatuiset toiminnot ja tarpeet, joten sivustokartan on katettava kaikki yrityksen t\u00e4rke\u00e4t osat. <\/p>\n\n\n\n Luomalla virtauskaavio, josta k\u00e4y ilmi, mit\u00e4 sivuja on tarkoitus sis\u00e4llytt\u00e4\u00e4 ja miss\u00e4 sivuston navigoinnissa n\u00e4iden sivujen pit\u00e4isi olla, asiat on paljon helpompi hahmottaa.<\/p>\n\n\n\n Seuraava t\u00e4rke\u00e4 vaihe on luoda sivustollesi ainutlaatuinen ulkoasu, jossa otetaan huomioon kaikki t\u00e4h\u00e4n menness\u00e4 k\u00e4sittelem\u00e4mme tekij\u00e4t. Nyt verkossa on helposti saatavilla teemoja ja malleja, joita useimmat aloittelijat k\u00e4ytt\u00e4v\u00e4t mieluiten. <\/p>\n\n\n\n Mutta yksi asia, joka on syyt\u00e4 muistaa, on se, ett\u00e4 malli ei koskaan anna sivustollesi samanlaista ainutlaatuista kokemusta kuin r\u00e4\u00e4t\u00e4l\u00f6ity UI- tai UX-suunnittelu. <\/p>\n\n\n\n T\u00e4h\u00e4n tarvitset kokeneiden graafisten suunnittelijoiden ja UI\/UX-suunnittelijoiden apua tai todella hyvi\u00e4 suunnitteluty\u00f6kaluja. Suunnittelussa on m\u00e4\u00e4ritelt\u00e4v\u00e4 selke\u00e4sti, milt\u00e4 verkkosivustosi jokainen sivu n\u00e4ytt\u00e4\u00e4, mihin sis\u00e4lt\u00f6 sijoitetaan sivulla, mihin CTA-painikkeet ja opt-in-lomakkeet sijoitetaan ja paljon muuta. <\/p>\n\n\n\n Jos aiot suunnitella verkkosivut itse, voit aloittaa tekem\u00e4ll\u00e4 karkean luonnoksen siit\u00e4, milt\u00e4 haluat sivun n\u00e4ytt\u00e4v\u00e4n. T\u00e4m\u00e4n alustavan luonnoksen perusteella voit luoda sivustosta mallinnoksen, ja jos se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4, voit rakentaa prototyypin testataksesi, toimiiko verkkosivu odotetulla tavalla.<\/p>\n\n\n\n Toinen eritt\u00e4in t\u00e4rke\u00e4 osa verkkosivustoasi on sivuston kopio. Verkkosivustosi tekstin ei pit\u00e4isi olla vain houkutteleva ja houkutella sivustollesi lis\u00e4\u00e4 k\u00e4vij\u00f6it\u00e4, vaan sen pit\u00e4isi my\u00f6s auttaa sivustoa n\u00e4kym\u00e4\u00e4n hakutuloksissa. Ihannetapauksessa verkkosivuston kopion tulisi olla lyhyt ja ytimek\u00e4s. <\/p>\n\n\n\n Pidempi sis\u00e4lt\u00f6 on tarkoitettu muille alustoille, kuten blogeihin. Tekstin tulisi olla suunnattu kohdeyleis\u00f6lle.<\/p>\n\n\n\n T\u00e4rkeiden sanojen ja lauseiden sek\u00e4 CTA-kohtien tulisi olla lihavoituja tai ainakin selv\u00e4sti n\u00e4kyviss\u00e4. Verkkosivuston tekstin tulisi my\u00f6s olla optimoitu hakuja varten k\u00e4ytt\u00e4m\u00e4ll\u00e4 oikeita avainsanoja ja j\u00e4sent\u00e4m\u00e4ll\u00e4 sis\u00e4lt\u00f6 oikein.<\/p>\n\n\n\n Eik\u00f6 sinulla ole aikaa kirjoittaa omaa verkkosivuteksti\u00e4? Sisu Digital tarjoaa copywriting-palvelu<\/a> riippuen tarpeistasi, kuten verkkosivujen kopioinnista, mainoskopioista, blogeista jne.<\/strong><\/p>\n\n\n\n Kun verkkosivun suunnittelu, grafiikka ja teksti ovat valmiit, on aika rakentaa sivu. WordPressiss\u00e4 t\u00e4m\u00e4 prosessi voi olla helppo tai hieman monimutkainen, riippuen valitsemastasi teemasta. <\/p>\n\n\n\n Joissakin teemoissa on helppoja verkkosivujen rakentajia, mutta jotkut teemat vaativat hieman manuaalista ty\u00f6t\u00e4. <\/p>\n\n\n\n![\"web-suunnittelun](\"https:\/\/sisudigital.fi\/wp-content\/uploads\/2021\/03\/web-design-2021-1-1024x635.jpg\" "\\"\\"")
<\/figure><\/li><\/ul>2. Valitse verkkosivustosi alusta<\/strong><\/h2>\n\n\n\n
![\"web-design-perusteet-2021-valita-teema\"](\"https:\/\/sisudigital.fi\/wp-content\/uploads\/2021\/03\/web-design-essentials-2021.jpg\" "\\"\\"")
<\/figure><\/li><\/ul>3. Tutkimus viimeisimm\u00e4t <\/strong>Verkkosuunnittelu<\/strong> Suuntaukset<\/strong><\/h2>\n\n\n\n
4. P\u00e4\u00e4t\u00e4 br\u00e4ndist\u00e4si<\/strong><\/h2>\n\n\n\n
5. Luo sivustokartta<\/strong><\/h2>\n\n\n\n
6. Luo verkkosivujen suunnittelu<\/strong><\/h2>\n\n\n\n
7. Kirjoita verkkosivustosi kopio<\/strong><\/h2>\n\n\n\n
8. Rakenna verkkosivut<\/strong><\/h2>\n\n\n\n