Uudet verkkosivut
Tervetuloa Helsingin Vieraskodin uusille nettisivuille. Verkkosivu-uudistus toteutettiin yhteistyössä ammattikorkeakoulu Metropolian kanssa. Tämän artikkelin ovat kirjoittaneet uudistuksen takana olleet opiskelijat Maiju, Tiia, Liisa ja Annaliina.
Kuvat tiimistä – Satu Himanen, Metropolia Digitaalinen muotoilu
Opiskelemme digitaalista muotoilua. Digitaalinen muotoilu on laaja ala ja opiskelemme koulussa muun muassa koodausta, käyttäjälähtöistä suunnittelua, verkkosivujen ja sovellusten suunnittelua ja toteutusta sekä käyttäjätutkimusta. Tämä oli meidän ensimmäinen asiakasprojektimme ja kolmelle meistä myös ensimmäinen verkkosivu, jonka teimme. Projektin aloittivat ennen meitä kolmannen vuosikurssin opiskelijat, jotka olivat työstäneet alustavia tekstejä sekä keränneet materiaalia Helsingin Vieraskodista ja sen toiminta-ajatuksesta.
Tässä Helsingin Viereskodin vanhat verkkosivut, jotka kaipasivat päivitystä sekä sisältöön että ulkoasuun.
Meidän tehtävänämme oli tehdä Helsingin Vieraskodille uudet verkkosivut, vektoroida ja siistiä logo sekä koota esite, jonka voi tulostaa Vieraskodin sivuilta. Projekti kesti kokonaisuudessaan kahdeksan viikkoa. Projektin aikana olemme päässeet kokeilemaan uusia ohjelmia ja tekniikoita, ratkoneet monen monta ongelmatilannetta sekä oppineet hurjasti uutta. Asiakkaanamme toimivat kehityspäällikkö Hanna-Mari ja vastaava ohjaaja Sanna. Hoidimme projektia etänä vallitsevan koronatilanteen takia.
Aloitimme projektin tutustumalla asiakkaaseemme Helsingin Vieraskotiin, kartoitimme tehtäväämme ja loimme alustavan aikataulun. Ensimmäisen Zoom-palaverin jälkeen aloimme luoda sivulle sivukarttaa ja wireframea eli rautalankamallia sivuston osioista ja sisältöjen järjestyksestä.
Kuva sivukartan työstämisestä.
Kuvia rautalankamallista.
Tässä ensimmäiset rautalankamallit asukkaaksi sivusta (jonka nimi muuttui myöhemmin asuminen sivuksi) sekä yhteystiedot sivusta. Rautalankamallien avulla hahmotellaan sivuston rakenne ja varmistetaan, että osiot ovat selkeitä ja käyttäjäystävällisiä. Rautalankamallit kulkevat mukana ja muokkautuvat läpi projektin.
Sivuston tekstejä työstimme muun muassa ryhmän kanssa pienessä työpajassa. Historia-sivua ja sen kuvagalleriaa kootessamme pääsimme tutustumaan myös Vieraskodin mielenkiintoiseen historiaan. Myös Sanna ja Hanna-Mari täydensivät tekstejä ja lopputulos oli kaikkien mielestä hyvä.
Projektissa aikaa kului paljon visuaalisen ilmeen suunnitteluun. Kokeilimme useita eri vaihtoehtoja ja väripaletteja kunnes päädyimme yhdessä asiakkaan kanssa nykyiseen ilmeeseen. Olemme kaikki tyytyväisiä ja erityisesti etusivu on kerännyt hyvää palautetta myös sivustoa ja sen toimintaa testanneilta luokkalaisiltamme.
Ensimmäisiä väripaletti-ideoita.
Väripaletteja projektin varrelta.
Lopullinen väripaletti, johon päädyimme.
Paljon aikaa meni myös itse sivun toteutukseen, jonka teimme WordPress-ohjelmistolla. Se on suosittu sivuston rakennusohjelma, jolla on rakennettu 30% maailman verkkosivuista. Opimme paljon WordPressin toiminnasta ja sen lisäosista sekä palvelimiin ja sivustojen ylläpitoon liittyvistä asioista.
Kaiken kaikkiaan olemme ryhmän kanssa todella tyytyväisiä siihen millainen lopputuloksesta tuli. Me kaikki opimme uusien ohjelmien käyttöä ja tekniikoita, saimme paljon lisää tietoa verkkosivujen toiminnasta sekä kokemusta asiakkaan kanssa työskentelystä. Sannan ja Hanna-Marin kanssa yhteistyö oli sujuvaa sekä mukavaa. Saimme heiltä hyviä kehitysideoita ja huomiota sekä tyytyväisiä reaktioita toteutuksiimme.
Erityiskiitos Sannalle ja Hanna-Marille yhteistyöstä! 🙂
-Maiju, Annaliina, Tiia ja Liisa