--- title: "Verkkosivuston suunnittelu: Opas onnistuneeseen projektiin" description: Verkkosivuston suunnittelu on iso prosessi. Verkkosivujen uudistus tai kokonaan uuden sivuston luominen kannattaa tehdä ammattilaisten kanssa alusta asti. image: https://e-strand.com/hubfs/2023-WWW-kuvat-e-Strand-HubSpot-PowerDuo2.png --- [Skip to content](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#main-content) Tämä on hakukenttä, johon on liitetty automaattinen ehdotus. - Ehdotuksia ei ole, koska hakukenttä on tyhjä. [![e-Strand logo](https://e-strand.com/hubfs/e-Strand%20logo.svg "e-Strand logo")](https://e-strand.com) - [ETUSIVU](https://e-strand.com/fi/) - [PALVELUT](https://e-strand.com/fi/palvelut) - [Graafinen suunnittelu](https://e-strand.com/fi/graafinen-suunnittelu) - [Verkkosivut](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas) - [Google Ads](https://e-strand.com/fi/blogit/tag/google-ads) - [HubSpot](https://e-strand.com/fi/hubspot) - [Kuvauspalvelut](https://e-strand.com/fi/kuvauspalvelut) - [AI-video](https://e-strand.com/fi/ai-video) - [Somemarkkinointi](https://e-strand.com/fi/blogit/tag/somemarkkinointi) - [Ravintolan markkinointi](https://e-strand.com/fi/ravintolan-markkinointi) - [ME](https://e-strand.com/fi/meistä) - [BLOGIT](https://e-strand.com/fi/blogit) - [Uutiskirje](https://e-strand.com/fi/uutiskirje) - [Ota yhteyttä](https://e-strand.com/fi/ota-yhteytta) - Search Search Search huhtikuuta 8, 2023 5 min read time # Verkkosivuston suunnittelu: Opas onnistuneeseen projektiin Myyntiä edistävän verkkosivuston uudistaminen tai kokonaan uuden luominen on laaja prosessi. Siksi se kannattaa suunnitella ammattilaisten kanssa alusta asti.  [CMS](https://e-strand.com/fi/blogit/tag/cms), [Sisältömarkkinointi](https://e-strand.com/fi/blogit/tag/sisältömarkkinointi), [SEO](https://e-strand.com/fi/blogit/tag/seo) ![Verkkosivujen suunnittelu](https://e-strand.com/hubfs/2023-WWW-kuvat-e-Strand-HubSpot-PowerDuo2.png) Yrityksen verkkosivusto kannattaa nähdä laajemmin, kuin pelkkänä tuote- tai yhteystietojen säilytyspaikkana. Tehokas sivusto voi esimerkiksi konvertoida liidejä myynnille, säästää Back-Office aikaa ja olla asiakaspalvelurobotti. Tämä opas kertoo pähkinänkuoressa, mitä verkkosivujen suunnittelussa tulee ottaa huomioon. ### Sisällysluettelo #### [Vanhan sivuston analytiikka](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#analytiikka) #### [Uuden sivuston tavoitteet](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#tavoitteet) #### [Sivuston navigaatiot](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#tavoitteet) #### [Tekstin kirjoitus ja SEO](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#sisalto) #### [Sivujen metatiedot](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#metatiedot) #### [Kuvien hankkiminen](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#kuvat) #### [Sisällönhallintajärjestelmät (CMS)](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#cms) #### [Graafinen suunnittelu](https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas#graafinen) #### *"Briiffauksen kultainen sääntö: Pystyäksesi selittämään asian muille, se on osattava selittää ensin itselle."* --- ## Historiasta voi oppia Kun on kyse verkkosivun uudistuksesta, kannattaa ensin perata, mitä vanha sivusto teki hyvin, mitä huonosti. Analytiikkatyökalujen avulla se onnistuu parhaiten. Yleensä jokaisella 2010 jälkeen tehdyllä nettisivulla on ollut Google Analytics tai vastaava analytiikkaohjelma käytössä. --- ## Mitä tavoitteita uudelle verkkosivulle asetetaan? Ostopolut ja oma myyntiorganisaatio täytyy saada kohtaamaan mahdollisimman vaivattomasti. Tässä esimerkkinä muutamia palikoita joita voi käyttää  liidigenerointiin ja myynnin tehostamiseen. - Kalenteribuukkaukset - Liidilomakkeet (lämpimät liidit) - Liiditunnistukset (kylmät liidit) - Landing page (kampanjasivut) - CTA (Call to Action) eli Palikat, jotka houkuttelevat kävijöitä toimimaan - Markkinoinnin automaatio Näitä pallottelemalla saadaan hahmotettua haavekuva uudesta sivustosta. Uudet toiminnot vaativat usein myös muutoksia  myyntiprosesseihin, joten kokonaisuus kannattaa miettiä huolella. *Layoutin aika ei ole vielä!* Usein viimeistään tässä kohtaa ajaudutaan väärälle raiteelle. Aletaan miettiä liian aikaisin, mille uusi sivusto tulee näyttämään. Siihen ei kannata vielä hypätä. Raaka ja työläs suunnittelun vaihe on vielä edessä. --- ## Kartoitetaan ylänavigaatio ja footer Lähes jokainen verkkosivusto käsittää samat sisältökokonaisuudet: 1. Ylänavigaatio 2. Sisältö 3. Footer Klassinen, mutta edelleen toimiva metodi on kirjoittaa Exceliin, mitä lukee ylänavigaatiossa ja mitä footerissa. Tämän itsestään selvälle kuulostavan työvaiheen kun tekee kunnolla, säästää erittäin paljon aikaa, rahaa ja hermoja. *Malliesimerkki ylänavigaatiosta kuvitteellisen psykoterapiafirman sivuilla:* | **Etusivu** | **Autamme sinua** | **Terapiamuotomme** | **Meistä** | | --- | --- | --- | --- | |   | Unettomuudessa | Lyhytterapia | Historia | |   | Ahdistuksessa | Hypnoosi | Yhteystiedot | |   | Elämänmuutoksissa | Kertaterapia |   | Tähän vaiheeseen liittyy oleellisesti terminologia ja hakukoneoptimointi. Täytyy pureskella todella valmiiksi se mitä ollaan myymässä - niin, että sen voi kiteyttää yhteen sanaa. Navigaatioihin tulevat sanat ja termit ovat myös yksi suurimmista tekijöistä, mitkä ratkaisevat kuinka korkealle hakukonetuloksissa noustaan ([SERP](https://en.wikipedia.org/wiki/Search_engine_results_page)). --- ## Kaikki lähtee tekstistä Jokainen edellisessä kohdassa mainittu sivu täytyy kirjoittaa auki. Otsikot, väliotsikot sekä "taglinet" on mietittävä huolellisesti. Kun kirjoitamme verkkoon, emme kirjoita pelkästään ihmisille, vaan myös internetin hakukoneille. Kirjoitusprosessi auttaa hahmottamaan mitä ja millä termistöllä (SEO) tuotteitanne tai palvelujanne tullaan myymään. Myyntiprosessit hioutuvat ja kokonaiskuva alkaa hahmottua - sivujaottelusta ja tekstin määrästä puhumattakaan. Usein tässä kohdassa kuulee lauseen: "*No, laitetaan nyt jotain aluksi, muutetaan sitten myöhemmin"*. Kannattaa muistaa, että hakukoneet tekevät ns. Deep Crawlin useiden kuukausien sykleillä. Vaikka sivun teksti on muutettu, se muuttuu hitaasti hakukoneiden näkökulmasta. Kannattaa julkaista mahdollisimman valmiiksi mietityt tekstit heti uuden nettisivun lanseerauksessa. --- ## Hakukoneoptimoinnin osa-alueet tulee ottaa huomioon Hakukoneet arvostavat selkeyttä, siksi niille on annettava selkeästi mietityt: - Sivuotsikot (Meta title / Title Tag) - Kuvaus (Meta Description) ![e-strand-meta-title-meta-description](https://e-strand.com/hs-fs/hubfs/e-strand-meta-title-meta-description.jpg?width=650&height=167&name=e-strand-meta-title-meta-description.jpg) Näihin potentiaalinen asiakas törmää ensimmäisenä hakiessaan tietoa internetistä. Jos ja kun sivujen teksti on kirjoitettu jo valmiiksi auki, näiden kenttien määrittely on helppoa. --- ## Kuvien hankinta: Helpommin sanottu kuin tehty Kun tekstit on tehty, on aika valita tekstille sopivat kuvat. Tyypillisesti jokaisella sivulla on vähintään yksi kuva. Tämä kohta kuulostaa helpolle, mutta on käytännössä kaikkea muuta. Täydellistä markkinointikuvaa kun ei ole olemassakaan. Ei, vaikka sadat kuvapankit tarjoavat kymmeniä miljoonia kuvia. Niitä kahlatessa ja kuvapankkien lisenssioikeuksia lukiessa vierähtää helposti tunteja tai päiviä. Ilmaisia kuvapankkeja on myös, mutta niiden kuvatarjonta on hyvin rajallinen. Vanhalta sivustolta voidaan saada joitain käyttökelpoisia kuvia, mutta yleensä verkkosivun uudistuksessa tähdätään freesiin ilmeeseen, jota vanhat kuvat eivät mahdollista. Tekoälyn avulla voidaan myös luoda kuvia. Vaihtoehto toimii joissain tapauksissa, joissain ei. Valokuvaaja voidaan myös palkata jos budjetti antaa myöden. Vaihtoehtoja on siis olemassa. Tähän aiheeseen kannattaa laittaa aikaa ja miettiä kuvat sekä kuvien nimeäminen tarkkaan. Hakukoneiden kuvahakutoiminto on räjähdysmäisessä kasvussa myynnin tekijänä. Esimerkkinä verkkokaupat.  ![google image search](https://e-strand.com/hs-fs/hubfs/google%20image%20search.jpg?width=649&height=731&name=google%20image%20search.jpg) Kuvat eivät ole esillä pelkästään omilla verkkosivulla, vaan myös silloin, kun joku jakaa verkkosivun toisille somessa, eli ns. featured image - joka on oma taiteenlajinsa.  Viimeistään tässä vaiheessa kannattaa myös tarkistaa, onko yrityksenne logo ajan tasalla ja käyttövalmiina digitaaliseen julkaisuun. --- ## Sisällönhallintajärjestelmän ja ulkoasun valinta Kun edellä mainitut pohjatyöt on tehty (tai saatu ainakin käyntiin), päästään tekniikkaan käsiksi. Valitaan verkkosivulle tekninen alusta eli sisällönhallintajärjestelmä. Vaihtoehtoja on tietenkin lukuisia. Tässä ne missä me voimme olla avuksi: - WordPress - [HubSpot CMS](https://e-strand.com/fi/hubspot) Kummassakin on puolensa. Kumpikin toimii valmiina saatavilla olevilla sivupohjilla (template), jotka määrittelevät sivuston rautalankamallin, käytettävyyttä (UX) ja pitkälle sitä mille verkkosivu tulee näyttämään. [Lue vertailumme WordPressin ja HubSpot CMS:n välillä](https://e-strand.com/fi/blogit/wordpress-vs-hubspot-cms) --- ## Graafinen suunnittelu Valmiiden CMS-sivupohjien käyttö raamittaa sivustoprojektia. Lopullinen viilaus tehdään kuitenkin [graafisen suunnittelun](https://e-strand.com/fi/graafinen-suunnittelu) näkökulmasta. Värit, fontit ja sivuston koko ulkoasu viilataan näyttämään juuri teidän brändille. Myyntiä edistävän verkkosivun suunnittelu on aina laaja prosessi. Ammattilainen kannattaa ottaa jo mahdollisimman aikaisessa vaiheessa mukaan, kun tätä prosessia aletaan miettimään. Panostus tulee takaisin lopputuloksessa. #### Olemme tehneet verkkosivuja vuodesta 2004. [Ollaan yhteydessä](https://e-strand.com/fi/ota-yhteytta).   Related Posts ## You may also like this [Similar Articles](https://484997.hs-sites.com/krazy/blog) [![WordPress vai HubSpot CMS](https://e-strand.com/hs-fs/hubfs/Verkkosivujen-suunnittelu-1080px.jpg?width=624&height=427&name=Verkkosivujen-suunnittelu-1080px.jpg)](https://e-strand.com/fi/blogit/wordpress-vs-hubspot-cms) toukokuuta 20, 2023 5 min read time ### [WordPress vs HubSpot CMS - kumpi kannattaa valita?](https://e-strand.com/fi/blogit/wordpress-vs-hubspot-cms) Sekä WordPress että HubSpot ovat internet-maailmaa mullistavia järjestelmiä. Verkkosivualustoina ne... [![Picture of Janne Suomi](https://e-strand.com/hs-fs/hubfs/Janne%20Suomi%20eStrandOy.jpg?width=40&height=40&name=Janne%20Suomi%20eStrandOy.jpg) Janne Suomi](https://e-strand.com/fi/blogit/author/janne-suomi) [verkkosivuston suunnittelu](https://e-strand.com/fi/blogit/tag/verkkosivuston-suunnittelu) [WordPress](https://e-strand.com/fi/blogit/tag/wordpress) [HubSpot CMS](https://e-strand.com/fi/blogit/tag/hubspot-cms) [![Nettisivujen suunnittelu](https://e-strand.com/hs-fs/hubfs/nettisivujen-suunnittelu.jpg?width=624&height=427&name=nettisivujen-suunnittelu.jpg)](https://e-strand.com/fi/blogit/verkkosivut-ja-crm-hubspotilla) huhtikuuta 26, 2024 2 min read time ### [Verkkosivun ja CRM:n lanseeraus HubSpotin avulla](https://e-strand.com/fi/blogit/verkkosivut-ja-crm-hubspotilla) Digitaalinen läsnäolo ja ketterät järjestelmät ovat nykypäivän liiketoiminnan avainasemassa. Lue... [![Picture of Janne Suomi](https://e-strand.com/hs-fs/hubfs/Janne%20Suomi%20eStrandOy.jpg?width=40&height=40&name=Janne%20Suomi%20eStrandOy.jpg) Janne Suomi](https://e-strand.com/fi/blogit/author/janne-suomi) [CRM](https://e-strand.com/fi/blogit/tag/crm) [HubSpot CMS](https://e-strand.com/fi/blogit/tag/hubspot-cms) [Menestystarinat](https://e-strand.com/fi/blogit/tag/menestystarinat) [Graafinen suunnittelu](https://e-strand.com/fi/blogit/tag/graafinen-suunnittelu) [![HubSpot CRM](https://e-strand.com/hs-fs/hubfs/e-Strand-HubSpot-CRM-blog-v2.png?width=624&height=427&name=e-Strand-HubSpot-CRM-blog-v2.png)](https://e-strand.com/fi/blogit/hubspot-crm-tehostaa-ja-organisoi-myyntiä) huhtikuuta 13, 2023 1 min read time ### [HubSpot CRM tehostaa ja organisoi myyntiä](https://e-strand.com/fi/blogit/hubspot-crm-tehostaa-ja-organisoi-myyntiä) HubSpotin ilmainen versio riittää pitkälle Nykypäivän nettisovellusten rahastusmalli on kuin... [![Picture of Janne Suomi](https://e-strand.com/hs-fs/hubfs/Janne%20Suomi%20eStrandOy.jpg?width=40&height=40&name=Janne%20Suomi%20eStrandOy.jpg) Janne Suomi](https://e-strand.com/fi/blogit/author/janne-suomi) [CRM](https://e-strand.com/fi/blogit/tag/crm) [HubSpot](https://e-strand.com/fi/blogit/tag/hubspot) ### Tilaa uutiskirjeemme Lähetämme uutisia ja blogeja harkitusti. Eikä huolta, voit lopettaa tilauksen koska tahansa. #### Kontakti - [Ota yhteyttä](https://e-strand.com/fi/ota-yhteytta) - [Tilaa uutiskirje](https://e-strand.com/fi/uutiskirje) - [LinkedIn](https://www.linkedin.com/company/e-strand/) - [Facebook](https://www.facebook.com/estrand.ltd/) #### Muuta - [Tietosuojaseloste](https://e-strand.com/fi/tietosuojaseloste) #### Luettavaa - [Blogit](https://e-strand.com/fi/blogit) #### Ländärit - [PowerDuo HubSpot CRM + CMS](https://e-strand.com/hubspot-powerduo) - [Local Communications Partner](https://e-strand.com/fi/local-partner-finland) [![e-Strand logo](https://e-strand.com/hubfs/e-Strand%20logo.svg "e-Strand logo")](https://e-strand.com) e-Strand Oy on vuonna 2015 perustettu, digitaaliseen mediaan ja markkinointiin keskittynyt mainostoimisto. Made in Finland. © 2026 All Rights Reserved ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Janne Suomi", "url" : "https://e-strand.com/fi/blogit/author/janne-suomi" }, "dateModified" : "2024-03-22T06:43:59.721Z", "datePublished" : "2023-04-08T04:15:00.000Z", "headline" : "Verkkosivuston suunnittelu: Opas onnistuneeseen projektiin", "image" : [ "https://e-strand.com/hubfs/2023-WWW-kuvat-e-Strand-HubSpot-PowerDuo2.png" ], "mainEntityOfPage" : { "@id" : "https://e-strand.com/fi/blogit/verkkosivuston-suunnitteluopas", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://e-strand.com/hubfs/e-Strand%20logo-1.svg" }, "name" : "e-Strand Oy" } } ```