9 välttämätöntä verkkosuunnitteluvihjeä itse valmistajille

Verkkosuunnittelun perusperiaatteet & parhaat käytännöt, joiden avulla minkä tahansa tason aloittelijat voivat suunnitella visuaalisesti ammattilaista & tyylikkään näköinen verkkosivusto itse.


Verkkosuunnitteluvihjeitä aloittelijoille

Nykyään kuka tahansa voi olla web-suunnittelija. Kyllä, se on rohkea lausunto – mutta parannetulla pääsyllä avoimen lähdekoodin suunnitteluohjelmistoihin, kuten Linkuttaa, ja DIY-sivuston rakennusalustoilla, kuten Wix ja Weebly, tulva markkinoita, linja välillä amatööri ja vilpittömästi nettisivujen suunnittelija on tullut myöhemmin paljon ohuempi ja vaarallisempi. Luovuuden mielenkiintoinen asia on, että kukaan ei voi päättää puolestasi, kun olet “valmis” täyttämään tietyn roolin. Paljon rokkstaareja ei koskaan käynyt musiikkitunteja; monet menestyneet taiteilijat eivät koskaan opiskelleet ihmisen anatomiaa; ja suurin osa siellä olevista web-suunnittelijoista ei ole muodollista tutkintoa. Joten jos olet luonut oman yrityksesi verkkosivuston, voitko luottaa siihen, että olet “verkkosuunnittelija”? Se on sinun päätettävä.

Kuka tahansa voi olla web-suunnittelija DIY-sivuston rakennusalustoilla.

Napsauta Tweet

Jos olet tämän blogin seuraaja, olet todennäköisesti jo päättänyt rakentaa verkkosivustosi itse. Vaikka saatat tuntea olevani täysin tyrmistynyt verkon kehityksestä oppivan hämmästyttävän suuren määrän tietojen suhteen, voit olla varma tietäen, että jopa hyvin vähällä suunnittelukokemuksella varustetut yritysomistajat voivat todella luoda ammattimaisia ​​verkkosivustoja. Kaikki alkaa muutamien perusteiden seuraamisesta, jotka oikein sovellettuna voivat viedä mailin sivustosi suunnittelun ja käyttökokemuksen uskottavuuteen.

Mikä tämä opas on (ja mikä se ei ole)

Selvyyden vuoksi puhumme täällä verkkosivujen suunnittelun perusteista, emmekä keskity edistyneempiin aiheisiin, kuten verkkojärjestelmiin, JavaScriptiin tai CSS-kehyksiin. Tässä oppaassa oletetaan myös, että käytät jonkinlaista vetämällä ja pudottamalla -sivustojen rakentajaa, jotta voit suunnitella verkkosivuston ilman koodausta. Käytitpä sitten verkkosivustosi valmistajan jo olemassa olevaa mallia tai aloittaessasi tyhjästä (kunnianhimoisempi vaihtoehto aloittelijoille), tämä opas auttaa sinua verkkosivustollesi sovellettavissa Web-suunnittelun perusperiaatteissa ja käytännöissä. Yksi verkkosivujen suunnittelua käsittelevä artikkeli ei tule heti muuttamaan sinua asiantuntijaksi, joten harkitse tätä ensimmäisenä askeleena suurempaan maailmaan.

NOPEA VINKKI: Perustiedot HTML: stä ja CSS: stä ovat valtavia etuja kaikille aloitteleville verkkosuunnittelijoille. Jos haluat todella saada kädet koodaukseen, suosittelen tarkistamista W3Schools oppia lisää säätiöstä.

Verkkosuunnittelun perusteet aloittelijoille

Mennäänpä siihen, vai mitä? Tässä on hyödyllisimpiä suuntauksia ja ohjeita, jotka sinun on tiedettävä ensimmäisen verkkosivustosi rakentamisessa:

1. Pane hiiri pois, nouse kynä

Verkkosivustosi saattaa jo olla mielestäsi kaunis, täydellinen kokonaisuus – siksi hyppää heti Photoshopiin (tai mikä pahempaa, selaimeen ja HTML: ään) suunnitellaksesi sitä. Oi, hei – jäähdytä suuttimet hetkeksi! Älä laita kärryä hevosen eteen. Ensin, ota pois lyijykynä ja paperityyny ja aloita ideoidesi asettaminen helposti käsitettävään. Tämä on tärkeä vaihe sivustosi rakenteen kartoittamiseen käyttämällä vain suorakulmioita, logoja ja inspiroituja ideoita (joita kutsutaan usein Wireframing). Asiat voivat olla erittäin karkeita tässä vaiheessa; kukaan ei näe sitä, mutta sinä.

Esimerkki verkkosivuston kehyskehyksestäVerkkosivuston kehys auttaa sinua kehittämään verkkosivustosi asettelua ja rakennetta, parantaen samalla käyttökokemusta (UX) ja säästää aikaa.

Tässä vaiheessa on paljon helpompaa muuttaa asetteluja, joiden alun perin ajattelisit toimivan, mutta nyt havaitset, että ne ovat sotkuisia ja hämmentäviä paperilla. Tämä säästää useita tunteja turhautumista, kun taas sama löytö tehdään, kun sivusto on koodattu ja selaimessa. Lisäksi se auttaa merkittävästi verkkosivun rakentamisessa, kun sinulla on kädessäsi referenssi neuvotella sen sijaan, että menisit sokeasti.

2. Seuraa hierarkiaa

On totta, että useimmilla Internet-surffaajilla on tapana skannata vain verkkosivuja sen sijaan, että vie aikaa itse kaiken lukemiseen. Sinun on oltava valmis tähän mennessä asettamalla tärkein sisältö etusijalle. Tämä tarkoittaa, että käyttäjän pitäisi pystyä sulauttamaan sivun tärkeimmät tiedot yhdessä ruudussa alkuperäisen latauksen aikana ilman, että tarvitsee zoomata tai selata. Tämä on tietysti paljon helpommin sanottu kuin tehty. Tässä on muutamia vinkkejä, joiden avulla voit paremmin ymmärtää tämän suunnitteluteorian merkityksen:

Pidä sisältö ”taiton yläpuolella”

Kutsumme ladatun sisällön ensimmäistä näyttöä ”taiteeksi” – ja kaikkea sen alapuolella olevaa, jota on vieritettävä nähdäkseen, pidetään toissijaisena. Yleensä tärkeimmät tietosi sijaitsevat ”taiton yläpuolella”. Tärkein tehtävä tällä alueella on houkutella käyttäjää ryhtymään toimiin tai luoda kannustin vierittää edelleen.

Hero-kuvan käyttäminen

Verkkosuunnittelussa yleinen suuntaus nykyään on täyttää tämä ”taitto yläpuolella” alue niin sanotulla sankarikuvalla tai bannerilla. Nämä ovat koko näytön taustakuvia, joissa on erittäin lyhyt ja kohtaan päällekkäinen teksti, yleensä pariksi toimintakehotuspainikkeen kanssa. Todennäköisesti verkkosivun koko tarkoitus voisi sisältyä tähän bannerialueelle, vaikka se toimii myös loistavana alustana seuraavalle sisällölle.

Esimerkki sankarikuvasta / bannerista

”Taitto” voi muuttua laitteesta riippuen

Asiat muuttuvat tässä monimutkaisiksi – ja miksi sinun ei pitäisi rasittaa itseäsi yrittää sovittaa kaikki tämän maagisen viivan yläpuolelle. Näytön mitat voivat vaihdella valtavasti käyttäjän laitteesta riippuen. Leuan pudottavan 5K-näytön pystysuuntainen resoluutio on 2880 pikseliä, kun taas iPhone 5: llä on vähemmän kuin puolet tästä. Tämä tarkoittaa, että mobiilikäyttäjät eivät vain pysty majoittamaan niin paljon sisältöä näytönsä kiinteistöihin. (Lisää tästä myöhemmin.)

NOPEA VINKKI: Yleinen nyrkkisääntö on varmistaa, että ”taiton yläpuolella” sisältö mahtuu näytön mittojen alimpaan yhteiseen nimittäjään. Tämä on yleensä hyväksytty 768 pikseliä pystysuuntainen resoluutio.

3. Typografia on suunnittelusi

Ellei sinulla ole valokuvausyritystä, teksti on minkä tahansa verkkosivuston tärkein osa, joten on tärkeää tehdä tämä osa oikein. Verkkosivusi hierarkia on suuresti riippuvainen valitsemastasi typografiasta: kuinka otsikot, alaotsikot ja tekstit seuraavat luonnollista virtausta ja pysyvät visuaalisesti erottuvina toisistaan. Katso kattava kuvaus typografiasta tutustumalla oppaamme parhaisiin käytäntöihin. Tässä on joitain tärkeitä otteita:

  • Varmista, että teksti on helposti luettava (Vältä kukka fontteja!) ja riittävän suuri (yleensä noin 16 kuvapistettä vartaloa kohti).
  • Pysy enintään kaksi kirjasinta– ja varmista, että pariliitokset ovat hyvät!
  • Anna kappaleillesi tilaa hengittää toistensa välillä ja aseta tarpeeksi yläpäällinen tai marginaali otsikoissa ilmaisemaan selviä sisällön katkoksia.
  • Vältä pitkiä tekstirivejä. Silmien kohdalla on helpompaa, että kappaleen rivit eivät ole enempää kuin 15 sanaa pitkä—Ja vähän vähemmän kuin mobiililaitteissa.
  • serif fontit ovat tyypillisesti parhaiten vain painetut – ellei niitä käytetä Webissä isoissa otsikoissa.

4. Värit & Kontrasti ovat ratkaisevia

Olemme puhuneet pitkään väripsykologiasta, mutta käsite toistuu. Verkkosivustollesi valitsemillasi väreillä on valtava rooli siinä, miten käyttäjät havaitsevat tuotemerkkisi, sekä kuinka motivoituneita he voivat tuntea toimiessaan (ts. Ostamalla asioita) verkkosivustosi kautta. Miksi? Jokainen väri herättää tietyt tunteet, ja joko niiden luontaisen luonteen tai kulttuurin muuttamisen vuoksi nämä värit ovat liittyneet tietyntyyppisiin yrityksiin. Jos lasten leluyhtiö tai taloudellinen neuvonantaja maalasi koko verkkosivustonsa kirkkaasti mustalla, se lähettäisi ehdottomasti vääriä signaaleja aiotulle yleisölle. Kääntöpuolella kirkas oranssi tai miellyttävä sininen vangitsisi asiakkailleen täydellisen sävyn ja tietoisuuden.

Esimerkki web-suunnittelun väreistäSininen on väri, joka herättää luottamusta, suosittu valinta rahoitukseen liittyville verkkosivustoille.

Jos olet jo määrittänyt tuotemerkin värit, käytä verkkosivustosi värejä. Parasta on kuitenkin pitää se enintään kolme väriä sivustollesi; kuten fontteja, et halua liioitella sitä täällä, sillä sivustosi saattaa johtaa moniin persoonallisuushäiriöihin. Ole varovainen myös liian monien värivirheiden suhteen verkkosivustollesi. silmämme on kiinnitetty heihin kuin hunajaloukut, ja ne voisivat keskeyttää sisällön luonnollisen virtauksen. Käytä väriä vain silloin, kun sitä tarvitaan eniten, kuten linkkien tai painikkeiden kanssa.

Aiheesta kontrasti, on välttämätöntä, että teksti erottuu taustasta. Kun käytät kirjasimilla vaaleanharmaaita, keltaisia ​​tai vihreitä, ne tekevät melkein varmasti näkymättömiksi sivulla. Musta valkoisella taustalla on suurin kontrastiyhdistelmä, ja siihen yleensä tulisi pitää kiinni.

NOPEA VINKKI: On parasta välttää täysi kylläisyys väreillä verkossa. Pure Red (heksaarvo # ff0000) on hiukan liian punssi silmissä. Samoin puhdas musta (# 000000) fonteilla on taipumus värähtää liian voimakkaasti silmille, kun taas hiukan vähentynyt musta (# 333333) helpottaa lukemista.

Haluat myös, että teksti aukeaa taustakuvia vastaan. Erittäin kiireisten valokuvien käyttäminen voi häiritä tekstiä, joten tämän ongelman välttämiseksi joko käytä vähemmän yksityiskohtaisia ​​valokuvia tai käytä esimerkiksi rgba (51,51,51,0,5) -peittokuvaa pehmentääksesi kuvan alla olevaa kuvaa.

kuvan peittokuva esimerkkiKäytä peittokuvaa tekstin takana, jotta se aukeaa taustalta.

Kontrasti vaikuttaa myös siihen, kuinka käyttäjät houkutellaan tiettyihin sivustosi avainelementteihin. Tärkeimpien toimintakehotuspainikkeidesi on tartuttava silmään kontrastivärien avulla. Sininen “Osta nyt!” -painike menettää kiireellisyytensä ja arvonsa, kun sivusto, joka käyttää sinistä kaikkialla, nielaisee sen, mutta saman sivun punainen painike kiinnittää käyttäjän huomion huutamalla “Hei! Napsauta minua! ”

6. Kuvien käyttö

Verkkosivustollasi käytettävien oikeiden kuvien valitseminen johtuu osittain omasta taiteellisesta soveltuvuudestasi, mutta on myös älyllisiä näkökohtia, joiden pitäisi auttaa valintaprosessissa. Vältä ensin koristamasta sivustoasi vierailla kuvilla vain siksi, että ne saattavat näyttää hyvältä. Mieti sen sijaan, kuinka jokainen käyttämäsi kuva palvelee omaa tarkoitustaan, ja mikä tärkeintä, miten se toimii sisältö. Hyvin valittu valokuva voi välittää brändisi, palvelusi, tuotteesi tai yleisösi paljon tehokkaammin kuin sanat. Käytä valokuvia auttaaksesi käyttäjiä ymmärtämään jotain, herättämään tunteita tai herättämään luottamusta. Niiden käytön puhtaasti esteettisistä syistä pitäisi olla toissijaista.

Tiedostotyyppien ymmärtäminen & Puristus

Kuvien käyttämiseen verkossa on tehtävä lisävaihe. Nuo hienoja valokuvia, jotka saat esimerkiksi sivustolta Shutterstock ja iStock voi olla melko massiivinen (5000+ vaakapikseliä ja koko yli 10 megatavua), mikä on hieno tulostusta varten, mutta ne eivät sovellu verkkosivustoille. Kaikilla ei ole supernopeaa kuitu Internetiä, joten sinun on pienennettävä kuvasi kokoa, jotta ne voidaan ladata kerrallaan (puhumattakaan siitä, että 40% kävijöistä poistuu, jos sivuston lataaminen kestää yli 3 sekuntia!). Tyypillisesti haluat pitää kaikki kuvasi enintään 500 kilotavua kooltaan, vaikka keskimääräisen tiedostosi pitäisi todennäköisesti olla noin 100 kilotavua.

  • JPEG on valokuvien vakioformaatti. Se on häviöllinen muoto, mikä tarkoittaa, että sen kuvanlaatu heikkenee pakkauksen aikana. Jos käytät JPEG-kuvaa täysleveydessä taustakuvassa, suosittelen pitämään sen vaakaresoluutio arvossa vähintään 1200 kuvapistettä. Yleisiin tarkoituksiin, Vältä alle 600 kuvapisteen kuvan käyttöä vaakaresoluutio, koska se näyttää todennäköisesti epäselvältä nykyaikaisissa näytöissä.
  • PNG on suositeltava valinta grafiikoille tai kuville, jotka vaativat läpinäkyvyys. Se on häviötön muoto, joka säilyttää kuvanlaadun, mutta voi myös lisätä tiedostokokoja. Yleensä käytät PNG-grafiikkaa kuvissa, kuvakkeissa tai pienissä kuvissa, jotka voidaan pinota muiden elementtien päälle niiden läpinäkyvyyden vuoksi. Tarvitset harvoin PNG: n, joka on suurempi kuin 1000 kuvapistettä.
  • SVG (skaalautuva vektorigrafiikka) on uudempi muoto, joka korvaa GIF ja jopa PNG joissakin tapauksissa. SVG: n kauneus on, että se voi olla niin suuri tai niin pieni näytöllä kuin tarvitset, ja säilyttää samalla täydellisen selkeyden ja terävyyden (ja olla silti pieni tiedostokoko). Sinun tulisi harkita SVG: n käyttöä logoissa, kuvakkeissa tai logoissa vektorigrafiikka verkkosivustollasi; Koska korkeat DPI-näytöt ovat nyt yleistyviä, SVG-terävyys tarjoaa parhaan kuvanlaadun.

Esimerkkejä kuvatiedostotyypeistä

6. Mobiili-ensimmäinen suunnittelu

Olemme nyt saavuttaneet ajan, jolloin suurin osa ihmisistä kuluttaa verkkosisältöä puhelimillaan, ei pöytätietokoneella. Seurauksena on, että web-suunnittelussa on huomattavasti enemmän etusijaa räätälöidä erityisesti mobiilikokemukseen, mikä on johtanut “mobiili ensin” -filosofiaan.

Pohjimmiltaan tämä tarkoittaa, että paperille tekemäsi alkuperäisen luonnos- ja suunnitteluvaiheen aikana on parasta keskittyä ensin sivuston mobiililaitteistoon. Ainoastaan ​​sivustosi toiminnan kannalta tärkein sisältö näytetään pienemmillä näytöillä. Tämä pakottaa sinut yksinkertaistaa ulkoasu ja leikkaa kaikki häiritsevät elementit heti alusta alkaen. Mieti takaisin ”taitto yläpuolella” olevaan sisältöön: jos varmistat ensin, että kaikki tärkeät tiedot mahtuvat puhelimen alkuun, niin tiedät varmasti, että ne mahtuvat suuremmille näytöille. Kun olet naulannut tärkeän mobiiliasettelun, voit alkaa lisätä koristeita tai suurempia kuvia työpöydän näytöille.

Matkapuhelimesi asettelu olettaa vertikaalisemman suunnittelun, joka inspiroi vieritystä, kuin työpöydän laaja maisema. Jos esimerkiksi tuotesivullasi näytetään luettelot kolmella ruudulla työpöydällä, matkapuhelimesi asettelu näyttää yleensä ne vain yhtenä sarakkeena.

Kyllä, tämä tarkoittaa, että sinun on periaatteessa luotava useita asetteluja jokaiselle verkkosivustosi sivulle. Onneksi kaikkien hyvien verkkosivustojen rakentajien tulee tarjota reagoivia malleja, jotka säätävät näitä asetteluja automaattisesti, joten sinun on vain hienosäädettävä niitä.

NOPEA VINKKI: Varmista, että sivustosi yksikkö elementti, etenkin jos se on interaktiivinen, on vähemmän kuin 44xx44xx kooltaan. Miksi? Tämä on pienin kohde, jossa sormi voi silti napauttaa sitä tarkasti.

7. Pidä asiat linjassa

Kun elementit näyttävät satunnaisesti sijoittuneen sivustosi yli, se johtuu usein kohdistusongelmasta. Kuvittele verkkosivusi graafiselle paperiarkille. Erota se tasaisiin sarakkeisiin piirtämällä esimerkiksi kuusi suoraa viivaa. Nyt haluat varmistaa, että elementtien vasen reuna on jaettu ja kohdistettu vain näihin kuuteen pystysuoraan viivaan.

8. Pidä se yksinkertaisena

Usein sanotaan, että paras web-suunnittelu jää huomaamatta; vain huono muotoilu kutsuu huomion itseensä. Kuten aiemmin mainittiin, minkä tahansa verkkosivuston tärkein osa on yksinkertaisesti sen teksti. Jos pystyt tarjoamaan erinomaisen typografian, josta on ilo lukea, on todennäköistä, että sinun ei tarvitse tehdä paljon enemmän. Yritetty sivustosi ylisuunnitteluun vain sotkee ​​ja monimutkaistaa asioita.

Onko laatikkovarjot välttämättömiä? Hulluja, koristeellisia kuvioita? Kymmeniä värejä? Luultavasti ei.

9. Suuret avoimet tilat

Sisältösi tarvitsee tilaa hengittää. Valkoinen tila on vallitseva suunnitteluvalinta nykyaikaisille verkkosivustoille: leveät, avoimet tyhjät tilat sisällön välisten alueiden täyttämiseksi. Se on miellyttävämpi tapa sulauttaa tietoa, ja se kannustaa myös poistamaan tarpeetonta tekstiä ja kuvia pitämään sivuston puhtaana.

johtopäätös

Verkkosuunnittelu voi olla hajauttava tekniikan ala, konseptit käytännössä, kielet opiskelemiseksi ja taiteellisuus hallita. Vain kokemuksen avulla kaikki nämä komponentit alkavat olla järkeviä, mutta olet jo matkalla vain ymmärtämällä perusteet siitä, mikä tekee hyvästä verkkosivustosta toimivan. Toivon, että tämä opas toimii aloituspisteenäsi ja että se antaa sinulle itseluottamus viedä verkkosivustosi omiin käsiisi ja rakentaa sen siten, että vain yrityksen omistaja tietää parhaiten.

Suunnittelija on syntynyt!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me