Konsepton sivusto: Sivuston design

Koska Konsepto tarjoaa korkeatasoista verkkosivustojen suunnittelupalvelua, ovat omat kotisivut tärkeä tilaisuus esitellä yrityksen osaamista.

Sivuston suunnittelun tavoitteita olivat mm.

• Omaperäisyys ja massasta erottuminen
• Mahdollisimman selkeä, jopa minimalistinen ulkoasu
• Tärkeiden viestien korostaminen visuaalisesti
• Yksinkertainen ja helposti ymmärrettävä rakenne
• Asialliset, ammattitaitoiset ja helposti lähestyttävät tekstit
• Mahdollisimman viimeistellyt toiminnot
• Käytettävyyteen ja hakukoneoptimointiin liittyvät asiat kunnossa

Ulkoasu

Ulkoasun suunnitteluun kului selvästi eniten aikaa, koska juuri mitään materiaalia ei ollut valmiina ja yrityksen visuaalinen tyyli suunniteltiin samalla kertaa.

Logon animointi on viime hetken ideoita, mutta pääsi mukaan, koska vaikutti hauskalta ja erikoiselta idealta. Ellei muuta, niin ainakin se on mieleen jäävä elementti.

Palaute animoidusta logosta on ollut sekä myönteistä että kielteistä, mutta myönteistä palautetta on tullut selvästi enemmän. Vaihtuvat kuvat liittyvät Konsepton palvelulupaukseen.

Jokaisella sivulla esiintyy samanlainen puhekuplaelementti. Niiden tarkoituksena on tiivistää ja korostaa kaikkein keskeisin viesti sivun sisällöstä ja tehostaa viestin vaikutusta. Osalla sivuista kakkospalstan tekstit toimivat samassa tarkoituksessa, joten sivustolla esiintyy kahdesta kolmeen tekstin tasoa yleisestä yksityiskohtaiseen.

Sivuston väreiksi valittiin mustan ja valkoisen lisäksi samat värit, joita Konsepton logossa on käytetty (kirkkaahko vihreä ja tumma harmaa). Lisäksi tarvittiin vielä vaalea harmaa tiettyjen elementtien hienovaraisempaan erottamiseen.

Valkoinen tausta antaa iloisemman ja optimistisemman vaikutelman kuin tumma tausta. Musta teksti valkoisella pohjalla muodostaa parhaan kontrastin.

Sivun leveydeksi valittiin 860 pikseliä, jolloin sen pitäisi mahtua ongelmitta myös pienemmälle näytölle.

Sivun elementtien sijoittelu perustuu 20 pikselin perusviivastoon (baseline grid) sekä palstoitukseen, jossa sivu on jaettu kahteentoista 50 pikselin levyiseen palstaan, joista kunkin välissä on 20 pikselin marginaali. (Paina Alt+g nähdäksesi apuviivat).

Leipätekstistä tehtiin tarkoituksella melko suurta, jotta lukeminen olisi helpompaa ja jotta vaikutelma olisi rohkeampi ja vakuuttavampi. Tämä myös vähentää todennäköisyyttä, että huononäköisten tarvitsisi suurentaa tekstin kokoa selaimestaan.

Tekstin koon ja palstojen leveyden suhde valittiin sillä perusteella, että tekstirivit olisivat mahdollisimman helppolukuisia. Ykköspalstan rivin pituus on n. 75 merkkiä.

Perinteisesti luettavuuden kannalta hyvänä tekstirivin on pidetty 45–75 merkkiä ja optimaaliseksi pituudeksi on ehdotettu 66 merkkiä. Verkkosivustolla rivien kannattaa olla hiukan pidempiä, koska yleensä ei ole käytettävissä useampaa palstaa (kuten lehdissä) tai aukeamaa (kuten kirjoissa). Rivin pituudet n. 100 merkkiin asti toimivat kohtuullisesti.

On yleinen harhaluulo on, että pääpalstan tekstirivien levittäminen koko näytön levyisiksi parantaisi käytettävyyttä. Sitä ei kannata oikeasti tehdä. Esimerkiksi 24 tuuman näytöllä rivin pituus saattaa kasvaa tekstin koosta riippuen 200–300 merkkiin ja fyysinen leveys 35 senttimetriin, mikä tekee seuraavan rivin alun löytämisestä haastavaa.

Sivustolla on käytetty kolmea eri fonttia:

• Päätteetön Franklin Gothic Demi Condensed logossa, navigaatioissa, otsikoissa ja korostetuissa teksteissä
• Päätteellinen Georgia leipätekstissä
• Päätteetön Arial lomakkeilla

Laadukas typografia on itselleni melko uusi aihe, mutta tulevaisuudessa sivuston typografiaan on tarkoitus panostaa enemmän.

Rakenne

Tällä hetkellä sivuston rakenne on seuraava:

• Esittely
• Palvelut
• Prosessi
• Työt
• Hinnasto
• Blogi
  • [Blogikirjoitukset]
• Ota yhteyttä

Blogia lukuunottamatta yksitasoinen rakenne palvelee hyvin tarkoitustaan tässä vaiheessa, mutta sivuston sisällön laajentuessa tullaan tarvitsemaan alisivuja osalle päätasoista.

Ainoa asia, joka sivustolta tällä hetkellä puuttuu, on näyteikkunatyylinen etusivu. Sellaisen suunnittelu jäi odottamaan blogin julkaisua, joten sen suunnittelu on vuorossa seuraavaksi.

Ihannetapauksessa sivuston etusivu vastaa mahdollisimman nopeasti ja tehokkaasti kaikkiin oleellisiin kysymyksiin: kuka, mitä ja miten ja miksi? Muun sivuston tehtäväksi jää laajentaa ja syventää näitä tietoja tarvittaessa.

Konsepton tapauksessa etusivulta tulisi selvitä ainakin yrityksen esittely, palvelut, menetelmät ja prosessi ja yrityksen visio. Lisäksi etusivulla kannattaa esitellä vaihtuvaa sisältöä (esimerkiksi blogikirjoitukset, ilmoitukset, uutiset, työnäytteet) ja tehdä yhteistyön aloittaminen mahdollisimman helpoksi.

Sivujen osoitteet haluttiin pitää mahdollisimman yksinkertaisina, joten osoitteista poistettiin kaikki turhat osat.

Turhiksi osiksi katsottiin alidomainin nimi “www.” sekä sivujen tiedostopäätteet “.html” ja “.php”. Ne poistettiin näkyviltä parilla uudelleenohjauksella Apachen .htaccess-tiedostossa:

RewriteEngine On
 
# Poistetaan "www."
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301]
 
# Poistetaan tiedostopäätteet ".html" ja ".php"
RewriteRule ^(palvelut|prosessi|tyot|hinnasto)(/?)$ $1.html
RewriteRule ^(ota-yhteytta)(/?)$ $1.php

Sivujen osoitteissa päädyttiin käyttämään väliviivaa sanavälien merkkinä. Syitä oli useita:

• Totuttua kieltä (toisin kuin alaviiva tai plusmerkki)
• Erottuu alleviivatusta tekstistä (toisin kuin alaviiva)
• Helppo kirjoittaa näppäimistöltä
• Helppo lukea ääneen
• WordPress käyttää oletuksena väliviivaa

Sisältö

Sivuston sisällöstä on pyritty tekemään paitsi haluttavaa, myös helposti lähestyttävää. Esitetyt asiat on pyritty pitämään mahdollisimman yksinkertaisina.

Sisältö on valittu muun muassa sillä perusteella, ettei lukijalle jäisi avoimia kysymyksiä mistään päätöksentekoon vaikuttavasta asiasta. Tätä varten sivustolle on lisätty asioita, jotka useimmilta tämän alan yrityksiltä puuttuvat:

• Tietoa saatavilla olevasta osaamisesta
• Tietoa tekijöistä: nimet, kuvat, kuvaukset, CV:t
• Tietoa siitä, miten käytännön työskentely tapahtuu
• Tietoa työnäytteiden taustoista
• Hinnasto ja hintalaskuri

Yllättävän harvalta sivustolta löytyy tietoa näistä asioista, vaikka ne ovat oleellisia asiakkaan päätöksenteon kannalta. Itselleni tulee tällaisten sivustojen kohdalla väkisinkin mieleen, että onko yritys luotettava vai onko sillä jotakin salattavaa.

Yhteydenottolomakkeesta pyrittiin tekemään käytettävä siten, että eri yhteydenottotapauksia varten on omat kenttänsä. Näin käyttäjän ei tarvitse itse miettiä, mitä kaikkea missäkin tapauksessa tarvitsee mainita.

Lomakkeen kentät jäävät täytetyiksi sekä onnistuneen lähettämisen jälkeen, että mahdollisen virheen tapahtuessa. Tällöin käyttäjä voi esimerkiksi kopioida tekstit sähköpostiviestiin tai tarkistaa kirjoituksensa, lisätä unohtuneet asiat ja lähettää lomakkeen uudestaan.

Etusivulla ja yhteydenottosivulla pyrittiin henkilökohtaiseen palveluun laittamalla tekijän ja yhteyshenkilön nimi ja kuva näkyville (eli oma kuvani tässä tapauksessa).

Sivuston sisältö on vielä kaukana täydellisestä, mutta sitä on tarkoitus kasvattaa ja kehittää vähitellen yrityksen tarpeita vastaavaksi. Tämä on siltä kannalta tarkoituksenmukaista, että yrityksen alkutaipaleella voi tapahtua nopeitakin muutoksia, eikä yrityksen lopullinen suunta ole vielä selvillä.

Tulevaisuudessa sivustolle on tarkoitus lisätä mm. seuraavaa:

• Tarkempaa tietoa osaamisesta ja menetelmistä
• Tietoa yrityksen filosofiasta: visio, arvot, periaatteet jne.
• Hyödyllisiä artikkeleita toimintaan liittyvistä aiheista
• Hyödyllisiä case-kuvauksia
• Mahdollisesti kirjasuosituksia ja muuta vastaavaa

Tämä kirjoitus kuuluu sarjaan Konsepton sivustoa käsitteleviä kirjoituksia. Kirjoitukset ovat:

• Konsepton sivusto: Sivuston design
• Konsepton sivusto: Valmiit komponentit
• Konsepton sivusto: Julkaisujärjestelmä
• Konsepton sivusto: Analytiikka ja hakukoneoptimointi