Kotisivut WordPressillä

3.1 Suunnittelun dokumentit

Tagged with

Suunnittelu kannattaa

Sanonta ”hyvin suunniteltu on puoliksi tehty” pätee myös omien sivujen suunnittelussa. Sivustosta laaditaan tavallisesti dokumentteja toteuttamista (tuotantoa) varten. Mitä paremmat nuotit on sivun tekovaiheessa olemassa, sitä selkeämpää on varsinainen toteutusvaihe, joskin usein toteutusvaiheessa ainakin itselläni usein tehdään vielä pieniä muutoksia suunnitelmaan.

Layout – leiska – rautalankamalli

WordPress-suunnittelussa sivun rakenne ja elementtien asettelu muodostuu usein teemasta. Sitä ennen on luultavasti muodostettu jonkinlainen mielikuva miltä sivusto tulisi näyttää ja teemaa haetaan muodostuneen mielikuvan pohjalta. Jos sivut suunnitellaan alusta pitäen koodaamalla, kuten suunnittelutoimistot tekevät, sivun rakenteesta hahmotellaan sivuston layout. Työkaluina voi olla yksinkertaisesti ruutupaperi ja kynä. Edistyneempi tapa on käyttää kuvankäsittelyohjelmaa, jossa sivuston eri osien ja elementtien suhteet ja koot saadaan pikselin tarkkuudella esiin. Sama koskee fontteja, fonttikokoja ja värejä.

Layoutin tekeminen kuvankäsittelyn avulla on visuaalinen tapa, jossa dokumenttiin voidaan merkitä elementtien mittoja tai katsoa elementin mitat piirretyn elementin ominaisuuksista. Kuvankäsittelyssä voidaan luoda esimerkiksi tiedosto, jonka mitat vastaavat hd-tason näyttölaitetta 1920×1080 ja hahmotella canvakselle layout kuvineen ja teksteineen.

Sivuston rakenne

Sivuston rakenteesta kannattaa tehdä miellekartta (mind map), joka kertoo sivuston sivujen ja artikkeleiden ym. linkityksen toisiinsa. Voimme ehkä sanoa, että sivuston menuvalikko on ikään kuin miellekartta sivuston sisällöstä, sillä se koostuu sivuston sivujen hierarkiasta.

Sivuston miellekartan voi rakentaa tekstinkäsittelyohjelmalla. Verkosta löytyy myös erilaisia työkaluja miellekarttojen tekemiseen. Vanha kunnon ruutupaperi ja kynä ovat tähänkin todella kätevät ja nopeat työkalut asioiden jäsentämiseen.

Navigaatio

Sivuston suunnittelun yhteydessä joutuu mainitsemaan myös navigaatiovalikon, joka on sivuston käytettävyyden kannalta avainasemassa. Navigaatiovalikko (menuvalikko) kuvastaa pitkälti sivuston rakennetta, joka on luonteeltaan hierarkkinen.

Etusivun merkitys

Sivusto sisältää etusivun lisäksi alasivuja ja rinnakkaissivuja. Etusivulla on erityisen tärkeä tehtävä sillä se avautuu ensimmäisenä selaajalle sivustolle saavuttaessa. Sen tehtävä on esittää lyhyesti sivun sisältöä ja tarkoituksena on, että selaaja saa jo etusivulta kuvan sivuston tarjonnasta. Suunniteltaessa etusivun sisältöä on otettava huomioon mitä selaaja mahdollisesti hakee sivustolta.

Etusivun rakenne voidaan WordPressissä esittää vieritettäessä ilmestyvinä lohkoina, joissa jokaisessa esitellään aihealueita sivuston sisällöstä ja mahdollisesti linkki alasivulle. Esimerkkinä voit tarkastella sivustoa: valkeakoski-motorsport.net

Oheisesta rakennekaaviosta voidaan nähdä sivuston (messukylalaiset.com) rakenteen mutta siitä voidaan myös peilata mahdollista sivuston navigaation tulevaa rakennetta. Etusivun lisäksi navigaatiossa voitaisiin esittää rinnakkaissivuina Messukylä, Yhdistys, Uutisia, Galleria, Yhteystiedot ja Linkit. Yhdistys rinnakkaissivun alasivuina olisivat pudotusvalikkona Tietoa meistä ja Liity jäseneksi.

Sivuston suunnittelun työkaluja

Kaavioiden rakentelun voi tehdä Microsoft Officen ohjelmilla mutta verkosta löytyy todella hyviä ohjelmia kaavioiden luontiin. Ohessa muutamia tehokkaita työkaluja rakenteen hahmottelemiseen ja suunnittelutyöhön.

Draw.io

Diagrams verkko-ohjelmann avulla voit luoda vuokaavioita ja miellekarttoja, joiden avulla on kätevä muodostaa kokonaiskuvaa sivuston rakenteesta. Ohjelman löydät verkko-osoitteesta https://www.draw.io/

Selaaja – kohderyhmä?

Itseasiassa jo ennen verkkosivujen suunnittelua tulee miettiä millainen kohderyhmä sivustoilla on. Lisäksi rakenteen suunnittelussa keskeisenä ajatuksena on selaaja. Mitä tietoa sivustolle saapuva selaaja hakee ja odottaa saavansa. Odotuksiin vaikuttavat luonnollisesti myös hakukoneissa näkyvät tiedot sivustosta (Avainsanat, kuvaukset sivustosta ym.). Jos ja kun tavoitteena on selkeä käytettävyys, suunnittelijan on osattava asettua selaajan saappaisiin.

Pyri vastaamaan jokaisella sivustosi sivulla seuraaviin seikkoihin:

  • Missä osassa sivustoa olen?
  • Onko sivuston muihin osiin pääsy selkeää?
  • Löydänkö haluamani tiedon lähteelle ja jos olen matkalla sinne, niin olenko menossa oikeaan suuntaan?

Yhtenäisyys edistää käytettävyyttä

Sivuston sivuihin kannattaa suunnitella muutama yhtenäinen ulkoasu, joiden mukaan sivut suunnitellaan. Yhtenäisyys sivujen ulkoasussa luo selaajalle turvallisuuden ja helpon käytettävyyden tunnetta. Suunnitellessa saattaa olla kätevää suunnitella alasivuille muutama layout, joita käyttää sivujen luomisessa.

Sivujen kopiointilisäosaa (esim. Yoast Duplicate Post) voidaan käyttää uusien sivujen luomiseen kopioimalla sivu ja muokkaamalla kopion sisältöä ja tallentaa se uudella nimellä. Sivustoeditorit saattavat myös sisältää mahdollisuuden tallentaa sivu templateksi, joka voidaan ottaa käyttöön uudelle sivulle.

Yhtenäisyyttä kannattaa noudattaa myös artikkeleissa ja suunnitella niihinkin muutama versio, joita käyttää uusia artikkeleita kirjoittaessa.

Suunniteltavat asiat muistilista

  1. Kartoitus (kohderyhmät, sivuston tarkoitus)
  2. Sivuston sivut ja sivuston rakenne (Mitä sivuja sivustolle tulee, navigaatio)
  3. Sivun rakenne (Etusivun ja alasivujen rakenne ja tyylit)
  4. Sivuston värit ja typografia (voi miettiä jo suunnitteluvaiheessa)

Graafinen ohjeisto

Graafinen ohjeisto tehdään usein esimerkiksi logon käytöstä mutta se voidaan tehdä myös sivuston värien ja typografian määrittämisessä.

Graafisesta ohjeistosta löytyvät:

  • Värit: Käytettävät värisävyt ja niiden HEX- ja muut numeraaliset koodit.
  • Typografia: Suunnitelma sivustolla käytettävistä fonteista ja fonttien koot mm. HTML-otsikkotasoissa (h1-h6), leipätekstissä, painikkeissa, navigoinnissa jne.

Ehdotuksia sivuston aiheista

Seuraavassa muutamia esimerkkiaiheita, joista voit aloittaa suunnittelemaan sivustoja. Tarjolla on kuviteltuja caseja sivustoiksi.

Merisaaren lintubongarit ry

Merisaaren lintubongarit on pieni mutta aktiivinen lintubongausyhdistys kuvitellulla Merisaaren saaristoalueella. Yhdistyksen toimintaan kuuluu lintujen bongaamisen ohella myös alueen asioiden ajaminen ja niistä huolehtiminen. Yhdistys toimii siis samalla asukkaiden asialla.

Yhdistys tarvitsee verkkosivut, jotka edustavat yhdistystä verkossa mutta tiedottaa myös yhdistyksen toiminnasta. Sivuille olisi hyvä saada yhteydenottolomake ja jonkinlainen kalenteri, jonka kautta voisi tiedottaa yhdistyksen tulevista tapahtumista. Lintubongareilla on myös melko aktiivinen bloggaamisporukka, joka mielellään kirjoittelee uusia artikkeleita linnuista, yhdistyksen retkistä ja tapahtumista, viimeisimmistä varusteista kuten kiikareista, kaukoputkista ja vaatetuksesta. Myös paikkakunnalla järjestettyjä muista tapahtumista tullaan ajoittain kirjoittelemaan tekstejä.

Yhdistyksen tapahtumat ovat luonteeltaan: vuosittain hallituksen kokouksia, kuukausittaisia meetinkejä, lintukävelyjä, jotka toistuvat joka toinen kuukausi. Järjestämme myös retkiä läheisille paikkakunnille ja nähtävyyksille.

Yhdistys haluaisi etusivulle erityistoiveena listan viimeisimmistä kirjoituksista ja tapahtumista maininnan johonkin.

Yhdistyksellä on olemassa logo ja joitain kuvia Merisaaresta, joita voisi käyttää kuvittamaan sivuja. Sivuilla voisi yleisilme olla väreiltään jotenkin tuon logon tapainen mutta yhdistys antaa ammattilaisille vapaat kädet suunnitteluun.

Materiaalia sivujen tekemiseen on oheisessa pakatussa tiedostossa. Tiedostossa on kuvia ja logomme png-tiedostona. Laitoin myös powerpoint-erityksen viimeisestä kokouksesta, jotta pääset kiinni toimintamme luonteesta.

Materiaali

TYP-talot Oy

TYP-talot Oy on perustettu vuonna 1985 talonrakennusyritys Lieksassa. Yritys keskittyy omakotitalorakentamiseen sesonkiaikaan mutta teemme myös kylpyhuonesaneerauksia ja perusparannuksia kaikkien kotiin. Saneeraukset keskittyvät talviaikaan sesongin ulkopuolelle. Yrityksen palveluksessa on kolme ammattitaitoista toimijaa yrityksen omistajan lisäksi.

Tarvitsemme käyntikortiksi verkkosivustot, joista selviää yrityksemme toiminta ja muut vastaavat tiedot yhteydenottolomake mukaan luettuna.

Yrityksen sivustot voisivat käsittää etusivun ja alasivuja myytävistä palveluista:

  • Hirsirakentaminen
  • omakotirakentaminen
  • saneeraukset

Sivustot voivat olla muodoltaan perinteisesti sivujen linkit ylätunnisteessa sivun ylälaidassa ja yrityksen logo vasemmassa reunassa. Yrityksellä on olemassa logo, joka on oheisessa pakatussa .zip-tiedostossa. Laitoin myös joitain kuvia toiminnastamme tiedostoon sivustoja varten. Haluaisimme myös etusivulle yläosaan, jonkin graafisen elementin, joka sisältää iskevän lauseen, joka kuvastaa yrityksemme laadukasta palvelua.

Yrityksemme tiedot ovat:

TYP-talot Oy
Kerantie 7
81720 Lieksa
p. 041 390 9863
kimmo.virtanen@gmail.com
Y145676-7

Materiaali

Hairy-do

Hairy-do on parturi-kampaamo Ranualla. Tarvitsemme näyttävät sivustot, joiden avulla markkinoida yrityksemme palveluja. Sivustoille olisi hyvä tulla tietoa palveluistamme, joita ovat:

  • Leikkaukset, kampaukset
  • Värikäsittelyt
  • Kihartamiskäsittelyt
  • Tarjolla myös laadukkaita hiustenhoitotuotteita.

Sivuston ulkoasun suunnittelun suunnittelun jätän teidän ammattilaisten käsiin. Toivon kuitenkin sivustolle tummaa violettiin vivahtavaa ulkoasua, joka sopii mukavasti yhteen logomme kanssa (liitteenä). Violetti väri on meille mieluinen :). Sivustolle ei tule varauskalenteria tässä vaiheessa vaan yhteydenottolomake riittää. Lomakkeessa voisi olla myös jokin valinta mitä palvelua viesti tai ajanvarauspyyntö koskee.

Etusivulla voisi olla lyhyesti kuvattuna ja eriteltynä palvelumme kuvitettuna kuvilla. Kuvia meillä ei ole mutta käyttäkää joitain vapaasti käytettäviä kuvia kuvittamiseen. Voimme lisätä omat kuvat sitten itse jälkikäteen, jos haluamme.

Yrityksemme tiedot ovat:

Tmi Hairy-do
Koivukuja 2
97700 Ranua
p. 0500 345 9867
paivi.lahtinen@gmail.com
Y-123456-7

Avaa logo uuteen välilehteen selaimessa ja lataa koneellesi.