Sivuston suunnittelusta, osa 2 (Rautalankamallit)

Tässä projektissa oli tavoitteena tehdä suunnitelmat mahdollisimman pitkälle ennen kuin mukaan otettiin toteuttajat. Tämä ei aina ole järkevä vaihtoehto, eteenkään silloin, kun halutaan tehdä jotain ihan uutta ja erilaista. Silloin voi olla paras vaihtoehto kuvata toteutettavaa palvelua hyvin löyhästi ja mielikuvin, ja antaa toteuttajille mahdollisuus käyttää omaa osaamistaan. Tällöin toteutusvaihtoehdot voivat olla hyvinkin erilaisia, mutta toteuttajat ovat verkkoviestinnän asiantuntijoita; he tietävät, mikä on tämän hetken trendi, mihin ollaan menossa, millaisia tekniikoita ja tapoja on hyvä käyttää parhaan lopputuloksen saamiseksi.

Nyt oli tavoitteena luoda kumminkin perusverkkosivut, nykyaikaiset puitteet museoille, jotta he voivat tuottaa sisältöä verkkoon helposti ja monin eri tavoin. Verkkosivujen suunnittelussa yksi perusjuttu on rautalankamallit. Rautalankamallin voi periaatteessa piirtää vaikka käsin. Niiden avulla sivuston rakennetta, elementtien paikkoja ja toiminnallisuutta hahmotetaan, sekä minimoidaan suunnitteluvirheitä. Rautalankamallissa ei oteta kantaa siihen, miltä verkkosivusto näyttää visuaalisesti. Ilmaisia mallinnusohjelmia on verkko täynnä, esim. tätä voi kokeilla hakemalla googlesta sanoilla ”free wireframing tool”. Tässä projektissa käytin Hotgloo-nimistä ohjelmaa, joka ei ole ilmainen vaan maksaa noin 10 euroa kuussa. Usein ohjelmissa on kumminkin koeaika, jolloin ohjelmaa voi käyttää ilmaiseksi. Tässäkin ohjelmassa oli 15 päivää. Sitä ikkunaa kannattaa hyödyntää. 🙂 Alla esimerkkikuva ohjelman käyttöliittymästä. Oikeassa alalaidassa näkyy elementtiosio (elements), josta sai vetämällä (drag & drop) muokkauskenttään (valkoinen osio) haluamiaan elementtejä. Ohjelmassa oli sekä hyviä puolia (nykyaikainen käyttöliittymä, intuitiivinen) että puutteita (aika suppea valikoima elementtejä, muutamia epäloogisuuksia käytettävyydessä esimerkiksi mastereiden kanssa toimiessa…).

Hotgloo-rautalankamallinnusohjelman käyttöliittymä

Hotgloo-rautalankamallinnusohjelman käyttöliittymä

Rautalankamalleista on erityisesti hyötyä responsiivisia sivuja suunnitellessa, jolloin jokaisesta näkymästä tulee suunnitella esimerkiksi tässä tapauksessa kolme eri näkymää (läppäri, täppäri ja mobiili). Alla esimerkit etusivun tabletti- ja mobiilinäkymästä. Suurin ero varmaan on se, että mobiilissa tila loppuu helposti kesken yläpalkissa ja tällöin on hyvä tehdä valikko uudelleen. Usein päädytään siihen ratkaisuun, että valikosta näkyy mobiiliversiossa vain sana valikko (tai menu) ja kun sitä painaa, valikko avautuu alaspäin horisontaalisesti. Suunnittelin sivut myös niin, että esimerkiksi etusivulla on kaikkien neljän museon tiedot omissa palkeissaan tai palstoistaan. Yhden palstan leveys on 25% (tässä tapauksessa 960 pikselistä). Tablettiversiossa (joka alkaa siis kun päätelaite on alle 800 pikseliä ja päätyy 480 pikseliin) palkkien leveys on 50%. Jos tablettiversiossa palstojen leveys olisi edelleen 25%, tällöin kapeimmassa vaihtoehdossa eli siinä tapauksessa, kun päätelaite on 480 pikseliä, palstan leveys olisi enää 120 pikseliä (480 pikselistä 25%). Ei kovin miellyttävä lukea. Mobiiliversiossa palstan leveys on sitten aina 100%. Usein mobiiliversiosta pudotetaan myös kokonaan etusivun banneri(kuva) pois käytettävyyden nimissä.

Mobiilimallinnus etusivusta

Mobiilimallinnus etusivusta

Täppärimallinnus etusivusta

Täppärimallinnus etusivusta

Rautalankamallien tekotapoja on varmasti yhtä paljon kuin on tekijöitäkin. Eikä niitä kannata lähteä tekemään, jos ei tiedä verkkosuunnittelun periaatteista mitään. Tällöin voi koko työ mennä hukkaan. Toisaalta mallit voi tehdä myös hyvin suppeasti tai hyvin laajasti. Eli jos joitakin ajatuksia on siitä, miltä toivoisi verkkosivujen näyttävän, toki siihen voi käyttää rautalankamallinnusohjelmia. Asiasta oli hyvää tekstiä muun muassa Aucorin sivuilla ja englanninkielisessä Wikipedia-artikkelissa.

Tärkeätä on myös, että omista suunnitelmista ei pidä kynsin hampain kiinni. Muutoksia varmasti tulee sitä mukaan, kun huomataan, että joku ei toimi.

Minna

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s