Käyttö­liittymät

Keltaisella taustalla oleva verkkosivu, jossa on violetti pullo jalustalla ja toistuva violetti pullojen kuvio.

Kokemusta käyttöliittymäsuunnittelusta meillä on poikkeuksellisen paljon: olemme viime 20 vuoden aikana suunnitelleet lukemattomia responsiivisia nettisivuja, verkko­kursseja, mobiili­pelien käyttö­liittymiä – jopa Apple Vision Prolle. Visuaalisen suunnittelun lisäksi, pystymme myös rakentamaan netti­sivuja alusta loppuun Webflow'lla. Näin saat täysin räätälöidyt, modernit ja käyttäjä­ystävälliset sivut nopeasti. Sivuja voit itse päivittää helposti 24/7.  

Projektiesimerkit tällä sivulla

Keltaisella taustalla oleva verkkosivu, jossa on violetti pullo jalustalla ja toistuva violetti pullojen kuvio.
Kannettava tietokone, jossa avoinna NAPA Schoolin verkkosivu, ympärillä kirja, puhelin, rannekello, muistivihko ja hiiri pöydällä.
Lehtipiste logo with a blue circle inside a red square and menu options including magazines, newspapers, books & paperbacks, and collectibles & trend products.

Nettisivuja

Työpaikkasivu, jossa hakutoiminto tehtävänimikkeen ja sijainnin mukaan, listattuja työpaikkoja kuvin ja tiedoin, sekä tietoa yrityksestä ja palveluista.

Rekyrtointiyritys Armstrongin nettisivut animoituine etusivuineen.

Kannettava MacBook Pro -kannettava, jonka näytöllä näkyy GEONA-verkkosivusto, jossa mainostetaan tervettä maaperää unelmakodille ja kehotetaan pyytämään tarjous.

Geonalle tehdyn nettisivuehdotuksen työpöytä- ja mobiilinäkymät.

Vapaus-verkkosivun aloitussivu, jossa iso otsikko 'Make a good move' ja kaksi painiketta työ­suh­de­pyörille työnantajalle ja työntekijälle kuvalla, jossa söpö valkoinen hahmo pupunkorvilla.

Suunnittelimme Vapauden alkuperäiset nettisivut, blogin sekä verkkokaupan Webflow'lla.

Labrocin kotisivu, jossa on otsikko Rakentamisen elinkaaren laboratorio ja palvelualueet: asbesti ja haitta-aineet, sisäilma, betoni ja ympäristö.

Laboratorio Labrocin nettisivujen visuaalinen suunnittelu.

CDK Guide - kattava opas AWS Cloud Development Kitin käyttöön pilvi-infrastruktuurin rakentamiseksi koodina, sisältäen moduulit ydinperiaatteista edistyneisiin konsepteihin ja käytännön esimerkkejä.

CDK Guiden nettisivujen visuaalinen suunnittelu.

Projekteja

Asiakas

Lehtipiste

Expand
Expand

Lähtötilanne

Riesen Designillä oli ilo osallistua Lehti­pisteen nettisivujen uudelleen suunnitteluun yhteis­työssä Pinton kanssa. Suunnittelimme uuden verkkopalvelun käyttö­liittymän perustuen Lehtipisteen äskettäin päivitettyyn visuaaliseen ilmeeseen.

Edellisten, vuonna 2016 suunniteltujen sivujen toiminnal­lisuudet olivat edelleen ajan tasalla, mutta käyttö­kokemus koettiin jäykäksi ja kankeaksi. Alusta piti myös päivittää, jotta sisältöjen hallinta olisi entistä sujuvampaa.

Ratkaisu

Suunnittelimme laadukkaat ja selkeästi navigoitavat sivut, jotka ilahduttavat ja palvelevat tasa­vertaisesti kaikkia käyttäjä­ryhmiä.

Riesen Design teki

  • Käyttöliittymäsuunnittelu
  • Rautalangat/käyttäjäpolut

Projektisuunnittelu: Pinto

Tekninen toteutus: Coredo

Lehtipiste logo with a blue circle inside a red square and menu options including magazines, newspapers, books & paperbacks, and collectibles & trend products.

Haaste

Ei elämyksel­lisyyttä tai inspiraatiota, katalogi­­mainen ilme.

Ratkaisu

Rikotaan tuotteiden ruudukko tuomalla houkut­televia, valo­­­kuvallisia tuote­ryhmä­n­ostoja etusivulle.

Lehtien kansikuvia ja hintoja, mukaan lukien Iltalehti, Ilta-Sanomat, Kunto Plus, Daphne's Diary, Mountain Bike, Linux Magazine UK, Allas, Aeroplane Monthly, Fly Fishing & Fly Tying, Året Runt, Das Neue Blatt ja Svensk Damtidning.
Poika istuu sohvalla nauraen ja pitäen kortteja kädessään, alla viehättäviä keräilykorttipaketteja kuten Super Mario ja Hello Kitty.

Haaste

Hankala navigointi, kankea haku ja sorttaus.

Ratkaisu

Yksinkertaistetaan navigointi: tuote­­listausta suodatetaan reaali­­aikaisesti tuote­ryhmävalikolla, haulla ja kielellä.

Verkkokaupan valikko ja etusivu, jossa näkyy Mindful Mandalas -värityskirja ja useita tuotekategorioita.
Verkkokaupan aikakauslehtien ja kirjojen etusivu, jossa näkyy hakupalkki, kielivalikko ja kategorioita vasemmalla.

Haaste

Elähtänyt ilme, joka ei edusta Lehti­pistettä.

Ratkaisu

Luodaan näyttävät ja raikkaat, uuden brändin mukaiset sivut.

Lehtipiste-verkkosivun etusivu, jossa näkyy lehtiä, kirjoja ja mainos, jossa teksti inspiraatiota hyvään oloon.
Nainen istuu kahvilapöydän ääressä lukien lehteä, vieressä on kupillinen kahvia, taustalla Lehtipiste-verkkosivun käyttöliittymä.
Lehtipisteen verkkosivuston käyttöliittymä, jossa vasemmassa reunassa logo, hakupalkki ja yksinkertaistettu kategoriavalikko, keskellä nainen lukee lehteä kahvikupin äärellä, ylävalikko ja tuotteiden esittely alhaalla.
Kaksi ihmistä lukemassa lehteä sohvalla, ja näyttö, jossa uudet lehdet ja lehtipistehaku kartalla.
Verkkosivun aikakauslehtivalikoima, jossa vasemmalla kategorioiden valikko ja oikealla erilaisten lehtien kansikuvat ja hinnat järjestettyinä ruudukkoon.
Lehtipisteen verkkosivun naisten aikakauslehtiosio, jossa on Me Naiset -lehden kansikuva, hinta 2,90 euroa ja tuoteinformaatio.
Sähköpostiosoitteen ilmoitusruutu tilaajille uudesta julkaisusta Lehtipisteen verkkosivulla.
Kuusi uutisartikkelin esikatselukorttia, joissa on otsikkoja ja kuvia, esimerkiksi pinottuja sanomalehtiä, mies lukemassa ja pinottuja kirjoja.
Kaksi älypuhelinta, joista vasemmassa näkyy Lehtipisteen verkkokaupan etusivu kuvineen ja tuotteineen; oikeassa puhelimessa Lehtipisteen valikko ja uutislehtiä.
Lehtipiste-verkkosivun mobiilinavigaatio, jossa valikko sisältää lehdet, sanomalehdet, kirjat, keräilytuotteet, muut tuotteet, kuluttajille, kumppaneille, uutiset, tietoa meistä ja yhteystiedot.
MacBook Pro, jossa näkyy Lehtipiste-verkkosivusto, johon sisältyy kuva hymyilevästä naisesta, joka lukee lehteä kahvipöydässä.

"Riesen Design suunnitteli Lehtipisteen verkkosivujen visuaalisen ilmeen, ja yhteistyö oli sujuvaa alusta alkaen. Liiketoimintamme erityispiirteet ja tarpeet tavoitettiin hyvin, ja sivuille onnistuttiin luomaan raikas, aikaa kestävä ilme, joka tukee erinomaisesti brändiämme. Sivut palvelevat meitä joustavasti asiakaskommunikaatiossa ja tekevät tiedon esittämisestä selkeää ja helposti lähestyttävää."

Anna-Leena Raita

Valikoimajohtaja, Lehtipiste

Projekti

Napa School

Expand
Expand

Lähtökohta

Riesen Designillä oli ilo toteuttaa Napa Schoolin omat netti­sivut Napa Agencyn mukavan porukan kanssa. Napa School on opetus- ja konsultointi­palvelu, joka tarjoaa sisältöä niin taiteilijoiden luovaa panosta kaipaaville yrityksille, ammattilais­­taiteilijoille kuin kuluttajillekin. Uusien netti­sivujen kautta on helppoa varata live- tai etätyö­pajoja, joiden aiheina ovat esimerkiksi kirjonta, kollaasi tai vaikkapa kasvo­maalaus. Inspiraatiota voi myös hakea runsaasta kuva­galleriasta sekä Napa Schoolin Instagram-postauksista.

Ratkaisu

Sivut on toteutettu Webflow’lla – työkalu, joka mahdollistaa täysin räätälöityjen nettisivujen toteutuksen ilman koodaamista. Webflow tuottaa silti hyvin puhdasta koodia taustalla ja sivuille voi lisätä omaa räätälöityä koodia tarvittaessa. Näin suunnittelijalla pysyy täysi hallinta layout-vaiheesta lopputulokseen asti ja sisällön päivittäminen on asiakkaalle helppoa.

Riesen Design teki

  • Käyttöliittymäsuunnittelun
  • Teknisen toteutuksen
Napa Schoolin verkkosivun etusivu, jossa on violetti otsikko, navigaatiopalkki ja tietoa taiteilijoille, yrityksille ja yhteisöille suunnatuista opetus- ja konsultointipalveluista.
Kannettava tietokone, jossa avoinna NAPA Schoolin verkkosivu, ympärillä kirja, puhelin, rannekello, muistivihko ja hiiri pöydällä.
Kolme NAPA Schoolin verkkosivun osaa: etätyöpaja, Napa School -opetus ja konsultointi, kukin omalla taustavärillään ja sisältöineen.
Askartelutarvikkeita, kuten vihreä nauha, sakset, vihreä kynä, neulontapuikot ja sydämen muotoisia paperileikkeitä valkoisella taustalla, keskellä teksti NAPA School Tekemisen meininki.
Kolme NAPA School -verkkosivun näyttöä vierekkäin: Live-työpaja, galleria ja inspiraatiota, joissa on kuvia, tekstiä ja painikkeita.
Työpaja otsikolla 'Letter Graffiti', jossa opettajana Antti Kalakivi ja kesto 90 minuuttia.
Värikäs kukkaseppele vaaleanpunaisella taustalla ja teksti '05/2018 KUKKASEPPELE Marjo Maininki'.
NAPA School -sivun mobiilinäkymä, jossa näkyy kirjaimista tehtävää graffitia maalattavana ja valikko, jossa vaihtoehtoina Meistä, Etätyöpaja, Live-työpaja, Konsultointi, Galleria ja Inspiraatiota.
Kannettava tietokone, tabletti ja älypuhelin, joissa näkyy Napa Schoolin verkkosivusto ja etätyöpaja-sivut valkoisella taustalla ja vihreä kasvi vasemmalla.

Tätäkin teemme

Logot & visuaaliset ilmeet

Avoin kirja, jossa on violetteja grafiikkasymboleja ja kolme värilohkoa musta, keltainen ja punainen.

Kuvitukset & hahmot

Värikäs abstrakti maalaus paperilla, jossa on violetti maalaustussi, maalaustelineen päällä.

Pakkaukset & tuotekuvat

Violetti pullo, jossa on oranssin ja keltaisen sävyinen koristeellinen etiketti ja kansi.

Animaatiot

Toistuva kuvio, jossa violetinsävyisiä pulloja oranssilla taustalla ja keskellä violetilla soittopainikkeella varustettu valkoinen ympyrä.