Vuonna 2014 perustin MOTE-toimiston Rembrant Van der Mijnsbruggen kanssa. Verkkokauppaan erikoistuneena teemme yhteistyötä asiakkaiden kanssa heidän brändimatkansa jokaisessa vaiheessa – alkuperäisestä markkinastrategiasta ja brändi-identiteetistä suunnitteluun, kehitykseen ja markkinointiin – aina kestävän kasvun tavoitteena. Olen innoissani jakaessani verkkosivusuunnittelun vinkkejä ja neuvoja, joita olen kerännyt urallani.
Valmiin verkkosivuteeman muokkaaminen on helppoa – jos haluat nähdä, miltä verkkosivustosi näyttää neljällä tuotteella rivillä verrattuna kahteen tuotteeseen rivillä, voit esikatsella sen muutamassa sekunnissa. Mutta täysin räätälöidyn verkkosivuston kanssa koodin muutokset voivat olla aikaa vieviä ja kalliita. Siksi suunnittelijat luovat verkkosivumallinnuksia ennen siirtymistä kehitysvaiheeseen.
Tässä artikkelissa opit lisää verkkosivun mallinnuksista sekä työkaluista ja parhaista käytännöistä oman mallinnuksen luomiseen.
Mikä on verkkosivun mallinnus?
Verkkosivumallinnus on staattinen visuaalinen esikatselu siitä, miltä verkkosivusto tulee näyttämään. Se antaa käsityksen sivuston lopullisesta suunnittelusta ja asettelusta, mutta se ei ole vielä toiminnallinen taustakoodin kanssa, joka tekisi sivustosta interaktiivisen ja julkaisuvalmiin. Verkkosuunnittelijat käyttävät verkkosivumallinnuksia erilaisten suunnitteluvaihtoehtojen tutkimiseen ennen verkkosivusuunnittelun luovuttamista kehitykseen koodausta varten. Kun verkkosivusto on rakennettu koodilla, sitä on vaikeampi säätää, joten korkean tarkkuuden verkkosivun mallinnus (sellainen, joka on mahdollisimman lähellä lopullista tuotetta) voi säästää aikaa ja rahaa.
Vertailussa verkkosivun mallinnukset, rautalankamallit ja prototyypit
Rautalankamallit, mallinnokset ja prototyypit ovat kaikki erilaisia tapoja visualisoida suunnitteluidea. Tässä on milloin käyttää kutakin:
Rautalankamallit
Rautalankamallit ovat kaavioita, jotka näyttävät verkkosivuston asettelun ja rakenteen ilman suunnitteluelementtejä. Voit ajatella rautalankamallia verkkosivun suunnittelun pohjana.
Rautalankamalli voi olla yksinkertainen kynä-ja-paperi-luonnos, joten se on hyödyllinen työkalu ei-suunnittelijoille, jotka haluavat viestiä visionsa. Rautalankamallit voivat myös auttaa suunnittelijoita, jotka työskentelevät verkkosivustojen kanssa, joissa on uusi tai syvästi interaktiivinen elementti. Tämä johtuu siitä, että rautalankamallit antavat sinun päättää sivuston perusrungon ja toiminnallisuuden ennen kuin jäät kiinni suunnitteluun ja koodiin.
Vaikka rakentaisit yksinkertaisemman verkkokauppasivuston, rautalankamalli voi auttaa sinua vahvistamaan yleisen myyntisuppilon ja asiakaskokemuksen, jonka haluat luoda. Koska rautalankamallit ovat niin yksinkertaisia, ne ovat loistava tapa saada kaikki samalle sivulle ennen suunnittelun aloittamista.
Mallinnukset
Mallinnukset ovat yksityiskohtaisia, staattisia esityksiä, jotka havainnollistavat suunniteltua verkkosivun asettelua brändin päätösten kanssa sovellettuna. Toisin kuin rautalankamallit, mallinnukset sisältävät taiteellisen suunnan, typografian ja värien käytön.
Mallinnukset antavat realistisen esikatselun siitä, miltä lopullinen verkkosivusto näyttää käyttäjälle, mutta ne eivät ole vielä interaktiivisia. Mallinnukset ovat välttämättömiä räätälöityä verkkosivustoa rakentaessa, koska ne mahdollistavat suunnittelun muutosten tekemisen ennen koodauksen aloittamista.
Prototyypit
Prototyypit tarjoavat eniten tarkkuutta verkkosivuston esikatseluun. Nämä ovat interaktiivisia malleja, jotka käyttävät esikatselulinkkejä simuloidakseen käyttäjäkokemusta ja tuodakseen verkkosivusuunnittelun lähemmäs elämää.
Projekteille, jotka vaativat erilaisten interaktiivisten elementtien testaamista ennen kehitystä, prototyyppi voi olla todella hyödyllinen. Yksinkertaisemmissa projekteissa saatat siirtyä suoraan mallinnuksesta kehitykseen.
Kuinka luoda verkkosivun mallinnus
- Päätä, kuinka esittää brändi
- Luo lineaarinen kertomus
- Kokoa brändielementit
- Suunnittele mallit jokaiselle sivutyypille
- Lisää merkityksellisiä paikkamerkkejä
- Hanki palautetta
Riippumatta siitä, suunnitteletko jotain itse vai työskenteletkö suunnittelijan kanssa, perustekijät, jotka tulee ottaa huomioon suunnitteluprosessin aikana, ovat samat.
1. Päätä, miten esittelet brändiä
Ensimmäinen askel verkkosivuston suunnittelussa on ottaa askel taaksepäin ja miettiä, miten haluat esittää brändin. Jos työskentelet suunnittelijan kanssa, saatat aloittaa prosessin luovalla briefillä. Se auttaa heitä oppimaan brändistäsi, yleisöstäsi ja inspiraation lähteistäsi.
On luonnollista haluta keskittyä tiettyihin ominaisuuksiin, mutta ennen kuin jäät kiinni teknisiin yksityiskohtiin, yritä ensin loitontaa: Mieti yleistä tarinaa, jonka haluat kertoa verkkosivustosi asettelulla.
Esimerkiksi voit aloittaa tavoitteella kannustaa käyttäjiä viettämään enemmän aikaa etusivullasi. Etusivu on usein brändin ensimmäinen kosketuspiste. Sillä on myös yleensä korkeimmat poistumisprosentit. Mutta sen sijaan, että aloittaisit ominaisuuksien tai konversion optimoinnin näkökulmasta, kysy itseltäsi: "Kuinka luomme syvemmän yhteyden etusivun vierailijoiden kanssa?"
Ratkaisu saattaa olla yhtä yksinkertainen kuin yhden lauseen johdannon kirjoittaminen brändistäsi alkunäkymään. Jos brändin arvot ovat liiketoimintasi ytimessä, tämä on loistava mahdollisuus esitellä kyseiset arvot suoraan etusivulla. Esimerkiksi kestävyyden tai osallistavuuden kaltaisten arvojen osoittaminen voisi resonoida kohderyhmäsi kanssa, pitäen heidät sivustollasi pidempään.
2. Luo lineaarinen kertomus
Verkkosivustosi tulisi noudattaa lineaarista kertomusta, mikä tarkoittaa, että jokainen osio ja sivu virtaa loogisesti ja rakentuu seuraavan päälle. Onnistunut kertomus varmistaa, että kun joku laskeutuu etusivullesi, heillä on selkeä käsitys brändistäsi ja tuotetarjonnastasi. Kun he matkustavat sivuston läpi, sinun tulisi tarjota lisää yksityiskohtia ja ominaisuuksia, jotka auttavat heitä löytämään oikeat tuotteet itselleen.
Perinteisessä verkkokauppasivustossa lineaarinen kertomuksesi on myyntisuppilo: Käyttäjä laskeutuu etusivulle, joka esittelee brändisi. Sieltä he löytävät tuotekokoelmasivusi, jotka menevät syvemmälle yksityiskohtiin kuin etusivusi – tuoden tärkeimmän tiedon esiin ensin, toissijaisen ja kolmannen asteen tiedon läheisyyteen. Onnistuneessa kerronnassa käyttäjä valitsee sitten tuotteita, menee ostoskorisivulle ja lopulta suorittaa kassaprosessin.
3. Kokoa brändielementit
Kun olet miettinyt, kuinka haluat muotoilla verkkosivuston kertomuksen, kerää brändin elementit, joita käytetään suunnittelussa.
Jos sinulla on brändiohjeistus, voit jakaa ne suunnittelijasi kanssa (tai viitata niihin itse). Jos ei, sinun täytyy päättää brändin elementeistä kuten typografiasta, grafiikasta ja väreistä ennen mallinnoksen luomista. Verkkosivuston ruudukkoasettelu perustuu brändifonttien rivikorkeuksiin ja kirjainväleihin, joten on tärkeää päättää näistä brändin elementeistä ennen verkkosivumallinnoksen piirtämistä. Kun sinulla on ruudukkoasettelu, voit luoda mallinnoksia käyttäen suunnitteluresurssejasi ja luovaa briefiäsi.
4. Suunnittele mallit jokaiselle sivutyypille
Kun suunnittelet verkkosivumallinnoksen, et luo mallinnosta jokaiselle yksittäiselle verkkosivulle. Sen sijaan luot mallinnusmallit erityyppisille sivuille, kuten kokoelmasivumalli ja tuotesivumalli.
Kun suunnittelet kutakin näistä malleista, ota askel taaksepäin ja kysy: "Mikä tekee kokemuksesta menestyneimmän?" Esimerkiksi, jos sinulla on kuratoitu valikoima kuutta tuotetta tai vähemmän, kokoelmasivusi tulisi esitellä jokainen näistä tuotteista ja lisätä hieman kontekstia ennen kuin siirryt yksityiskohtaisiin tuotesivuihin.
Jos sinulla on puolestaan kymmeniä, satoja tai jopa tuhansia tuotteita, sinun tulisi suunnitella verkkosivusto kehittyneemmällä tuotesuodatuksella. Se auttaa varmistamaan, että joku, joka laskeutuu kokoelmasivulle, voi kaventaa tuloksia tuotteisiin, jotka ovat heille merkityksellisimpiä.
5. Lisää merkityksellisiä paikkamerkkejä
Koska mallinnus on esikatselu siitä, miltä verkkosivustosi lopulta näyttää, on mahdollista, että tuotat vielä sisältöä sivustolle mallinnoksen ollessa käynnissä. Jos näin on, voit käyttää merkityksellistä paikkamerkkiä.
Vaikka mallinnoksessa käytetyt kuvat ja teksti olisivat väliaikaisia, niiden tulisi olla mahdollisimman lähellä lopullista tavoitetta. Näin, kun esikatselet mallinnoksia, saat todella käsityksen sivuston suunnitellusta suunnasta. Esimerkiksi sen sijaan, että käyttäisit "lorem ipsum" -paikkamerkkitekstiä, voit luonnostella esimerkkitekstiä, joka on brändin mukainen.
6. Hanki palautetta
Kun mallinnoksesi on valmis, on aika esitellä se sidosryhmille ja hankkia palautetta. Verkkosivumallinnoksen luomisen päähyöty on, että voit tehdä tarkistuksia muuttamatta koodia, joten käytä tätä tilaisuutta varmistaaksesi, että kaikki sidosryhmät luottavat mallinnukseen ennen sen tuotantoon viemistä.
Verkkosivun mallinnustyökalut
On monia suunnittelutyökaluja, joita voit käyttää verkkosivumallinnoksen luomiseen, mutta joitakin suosituimmista ovat:
Sketch
Sketch on verkkosivusuunnittelusovellus, joka mahdollistaa nopean iteroinnin. Vuonna 2010 luotu erityisesti käyttöliittymäsuunnittelua varten, Sketch voi luoda mallinnoksia sekä interaktiivisia prototyyppejä. Vakiotilaus alkaa 12 dollarista (n. 10,26 eurosta) kuukaudessa.
Figma
Figma on suunnittelutyökalu, joka mahdollistaa reaaliaikaisen yhteistyön. Jos sinulla on useita ihmisiä työskentelemässä mallinnoksen parissa samanaikaisesti, Figma voisi olla hyvä vaihtoehto. Voit rekisteröityä Figmaan ilmaiseksi, mutta jos haluat käyttää kaikkia sen ominaisuuksia, suunnitelmat alkavat 15 dollarista kuukaudessa.
Adobe XD
Suunnittelijat, jotka työskentelevät koko Adobe-suunnittelusarjan kanssa (sovellukset kuten Photoshop, Illustrator, InDesign ja Lightroom) rakastavat Adobe XD:tä sen saumattoman integraation vuoksi muiden Adobe-sovellusten kanssa. Adobe ei enää myy XD:tä itsenäisenä tuotteena, mutta voit käyttää sitä Adobe Creative Cloud -tilauksen kautta 59,99 dollarilla kuukaudessa.
Verkkosivun mallinnus – usein kysytyt kysymykset
Kuinka mallintaa verkkosivusto ilmaiseksi?
Verkkosivuston mallintamiseen tarvitset suunnittelutyökalun, joka maksaa rahaa. Onneksi monet suunnittelutyökalut, kuten Figma, tarjoavat ilmaisen kokeilujakson tai ilmaisen version vähemmillä ominaisuuksilla, joita voit käyttää lähtökohtana. Canva on toinen ilmainen työkalu, jota voit käyttää ilmaisen verkkosivumallinnoksen tekemiseen.
Milloin sinun tulisi luoda verkkosivumallinnus?
Verkkosivumallinnus on hyödyllinen täysin räätälöityä verkkosivustoa rakentaessa, koska se mahdollistaa käsityksen saamisen siitä, miltä sivusto tulee näyttämään ja tuntumaan ennen siirtymistä kehitykseen. Se antaa sinulle jotain, jota voit jakaa, viitata ja iteroida suunnitellessasi sivustoa. Projektista riippuen saatat luoda verkkosivumallinnoksen rautalankamallin luonnostelun jälkeen, tai saatat ohittaa rautalankamallin ja mennä suoraan mallinnokseen projektin vaatimusten määrittämisen jälkeen.
Ovatko verkkosivumallinnokset välttämättömiä?
Tietystä projektista riippuen et ehkä tarvitse verkkosivun mallinnuksia. Esimerkiksi, jos luot sivustosi käyttäen Shopify-teemaa, voit ohittaa mallinnuksen ja käyttää mallia interaktiivisena prototyyppinä. Siitä huolimatta monet hyvän mallinnoksen luomisen periaatteet pätevät tähän lähestymistapaan.
