modus, web -design

11
1 Modus ry Tampere 1.4.2014 Modus ry:n verkkosivuston uusiminen - ideointia sekä speksausta Web -suunnittelu, Nanna Nurmala [email protected]

Upload: nanna-nurmala

Post on 20-Jul-2015

290 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Modus, web -design

1 Modus ry

Tampere 1.4.2014

Modus ry:n verkkosivuston uusiminen

- ideointia sekä speksausta

Web -suunnittelu, Nanna Nurmala [email protected]

Page 2: Modus, web -design

2 Modus ry

1. Alustava rautalanka ja ajatuksen Moduksen hallitukselta

Alustavassa speksaussessa tuli seuraavia toivomuksia ja kommentteja:

- Luonnoksen pohjalta hallitus tekee muutosehdotukset ym.päätökset jatkoon liittyen. - Suurimmat puutteet löytyvät Designlainaamon sivuilta. Minkälainen sen pitäisi olla? Onko tuotteet ryhmitelty jollain tavalla? Onko joka tuotteelle oma sivu? Helsingin taidelainaamolla on tällainen sivusto http://www.taidelainaamo.fi/public/go.php MUITA AJATUKSIA : - Tarvitaanko IN ENGLISH englanninkielinen sivu (tarvitaanko lainkaan?)-> EI - Tarvitaanko sivu MEDIA (lehdistötiedotteille yms. )-> KYLLÄ - Tarvitaanko ETUSIVULLE kuvakaruselli vai olisiko jokin muu vaihtoehto tyylikkäämpi -> TÄHÄN JOKU EHDOTELMA OTETAAN VASTAAN!! ETUSIVUILLA voisi minun mielestä näkyä: - Kuva tai kuvia + Logo - Ajankohtaista - Linkkin fb-sivuille Mietin myös kohtaa ARKISTO..se voisi toisaalta olla osa linkkiä MODUS RY ja siellä yksinkertaisesti toimintakertomukset.

Page 3: Modus, web -design

3 Modus ry

2. Template –pohja (css tai html5 –editori)

- Uudistetun sivuston pohjaa muutetaan kaupallisemmaksi sekä käytettävyyttä parannetaan niin, että sivustosta näkyy ja löytyy paremmin Modus ry:n toiminta ja jäsenistö. Nostetaan paremmin esiin yhdistyksen aktiivisuus sekä designlainaamon toiminta. Jäsenhankintaa pitää myös korostaa.

- Alareunan footerissa on yhteystiedot aina helposti näkyvillä - Sivuston fontit Segoe UI otsikoissa/kuvat ja leipätekstinä verdana.

Seuraavassa esitys template –pohjan rakenteesta: [Kirjoita lainaus asiakirjasta tai jonkin mielenkiintoisen kohdan yhteenveto. Voit sijoittaa tekstikehyksen mihin tahansa kohtaan asiakirjassa. Tekstikehystyökalut-

välilehden avulla voit muuttaa erotetun lainauksen tekstikehyksen muotoilua.]

Yläframe: logo, navi, haku ja linkki designlainaamoon

Kunkin sivun yksittäisen sivun sisältö

Oikea sivuframe: facebook,

portfoliot, jäsen hankinta, näyttelyt, kilpailut

Alafooter: yhdistyksen yhteystiedot

Page 4: Modus, web -design

4 Modus ry

3. Etusivu – uusi kuvascrolli ja yhdistyksen ajankohtaiset uutiset -Lisätään etusivun kruunuksi uusi kuvascrolli, joka päivitetään kuvilla + alapuolinen lyhyt kuvateksti (toimiva "palikka" , mac + mobiili) -Moduksessa tapahtuu artikkeleita, tietoa uusista jäsenistä ja muuta infoa yhdistyksen asioista.

Visuaalisuutta lisätään kuvascrollin avulla, jossa

esitellään mm. yhdistyksen jäsenten

töitä jne. Lisätään "kilke", mikä toimii varmasti myös

macissä sekä mobiililaitteissa.

Moduksessa tapahtuu otsikon alle kaikki

ajankohtainen. Uudet jäsenet toivotetaan

tervetulleeksi ja infotaan heidän

yhteystiedot! Linkki portfolioon?

Page 5: Modus, web -design

5 Modus ry

4. Modus ry – yhdistyksen omasivu

- Yhdistyksen esittely ja säännöt - Hallituksen tiedot - Arkisto siirtyy tälle sivulle ja nykyinen linkitys poistuu ylänavigaatiosta

Modus ry:n esittely ja nykyisen

hallituksen jäsenten tiedot

Yhdistyksen säännöt,

toimintakertomukset ja arkisto.

Kaikista aukeaa klikillä tiedostot .pdf –muodossa.

Page 6: Modus, web -design

6 Modus ry

5. Designlainaamo, tuotteiden haku, suuremmat tuotekuvat ja hinta

- Selkeytetään tuotehakua ja laitetaan kuvat tiiviimmin, joka parantaa huomattavasti designlainaamon käytettävyyttä

- Suuremmat kuvat. Toteutetaan hallituksen toiveiden mukaan isompi tuote-esittelyboksi ja sen alle tuotekuvista karuselli, jota voi selata sekä suurentaa kuvia.

- Lainaa tai osta heti–toiminto ja suora tuotekysely taitelijalle linkistä avautuva suorasähköposti.

Alkuteksti ja linkki

sopimusehtoihin.

Tuotteet ja niiden tekijät esiin

selkeämmin. Designlainaamoon

näkyvämpi tuotetaulu. Nopea, yhden klikkauksen

takana oleva, yhteydenotto.

Teosten pikahaku taitelijan nimellä tai tekniikalla.

Kaikista lainaamon teoksista

pienemmät tuotekuvat, joita

voi selailla. Aukeaa

klikkaamalla suurempaan

tuotetauluun.

Page 7: Modus, web -design

7 Modus ry

6. Jäsenet - Uusi jäsenten sivu johdattaa portfolioihin, josta löytää taitelijan oman esittelysivun (kuvat, yhteystiedot jne.) - Nimihaun kautta pääsee suoraan kyseisen henkilön omalle sivulle

Taiteilijoiden pikahaku tai aakkosellinen

selaus.

Page 8: Modus, web -design

8 Modus ry

7. Portfolio – jäsenen oma portfolio - Uudistetaan sivu visuaalisempaan suuntaan, enemmän esittelemään taitelijoiden töitä sekä referenssejä. Kuva olisi kiva – näin Moduksen jäsenet myös voisivat naamaltaan jäädä paremmin mieleen!

Henkilön esittelyteksti,

kuva ja yhteystiedot.

Tuotekuvat. Klikkaamalla isommaksi.

Referenssit tai CV.

Page 9: Modus, web -design

9 Modus ry

8. Liity jäseneksi

- Houkutteleva teksti jäsenyyden hyödyistä viilattava sisältö? - Jäsenhakemuslomake, helpotettava sen täyttämistä (lyhennettävä), mitkä tiedot oikeasti ovat

tärkeitä?

Lyhempi ja ketterämpi jäsenhakemuskaavake.

Parantaa käytettävyyttä.

Page 10: Modus, web -design

10 Modus ry

9. Yhteystiedot

- Lisätään toimiston sekä yhdistyksen yhteystiedot karttoineen – linkki google mapsiin - Kuvalliset infot yhdistyksen johdosta

Kartta ja kaikki yhdistyksen

yhteystiedot. Linkki facebookiin ja

mahdolliset muut somet.

Yhdistyksen johtajiston

yhteystiedot sekä pienet

henkilökuvat.

Page 11: Modus, web -design

11 Modus ry

10. Media –sivu

- Media sivulta tulisi löytyä lehdistöä ja muuta mediaa varten aina logot sekä graafinen ohjeistus - Mahdolliset lehdistötiedotteet kerätään tälle sivulle ja ladattavissa .pdf:nä - Kaikista Moduksen järjestämistä tapahtumista tai vierailijoista presentaatioiden / esitysten

tiivistelmä tms.

Logot ja graafinen ohjeistus

ladattavissa.

Moduksen järjestämien tilaisuuksien

presentaatiot tai esitykset ladattavassa muodossa.

Ladattavat tiedotteet.