Verkkosivuston asettelu on prosessi, jossa verkkosivu luodaan koodaamalla ja jäsentämällä sisältöä siten, että se on näytettävä ja interaktiivinen verkkoselaimessa. Se sisältää tekstin, kuvien, videoiden, linkkien, lomakkeiden ja muiden sivun elementtien muotoilun yhtenäisen ja houkuttelevan visuaalisen kokemuksen luomiseksi käyttäjille.
Sivuston suunnittelu ja ulkoasu sisältävät seuraavat pääkohdat:
-
HTML (Hypertext Markup Language):
- HTML:ää käytetään verkkosivun rakenteen luomiseen. Se määrittää otsikot, kappaleet, luettelot, kuvat, linkit ja muut elementit, jotka muodostavat sivun sisällön ytimen.
-
CSS (Cascading Style Sheets):
- CSS:n avulla muotoillaan HTML-elementtejä ja ohjataan niiden ulkonäköä. CSS:n avulla voit määrittää värejä, fontteja, kokoja ja elementtien sijoittelua sivulla.
-
Verkkosivuston ulkoasu. Responsiivinen muotoilu:
- Responsiiviseen suunnitteluun kuuluu CSS:n ja muiden tekniikoiden käyttäminen verkkosivujen luomiseen, jotka näkyvät oikein eri laitteilla ja näyttötarkkuuksilla, kuten tietokoneilla, tableteilla ja älypuhelimilla.
-
JavaScript:
- JavaScriptiä voidaan käyttää lisäämään interaktiivisuutta verkkosivuille. Tämän ohjelmointikielen avulla voit luoda dynaamisia elementtejä, olla vuorovaikutuksessa käyttäjien kanssa ja muuttaa sivun sisältöä ilman uudelleenlatausta.
-
Verkkosivuston ulkoasu. Selainten välinen yhteensopivuus:
- Asettelussa huomioidaan myös selainten välinen yhteensopivuus, jotta verkkosivut näkyvät oikein eri selaimissa (esim. Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).
-
Suorituskyvyn optimointi:
- Tärkeä osa asettelua on suorituskyvyn optimointi, kuten kuvien koon pienentäminen, välimuistin käyttö ja muut tekniikat, joilla varmistetaan sivujen nopea latautuminen.
Kirja-asettelugeneraattorit: 5 ILMAISTA työkalua.
Olemme koonneet tämän oppaan varmistaaksemme, että saat verkkosivuston, jota vierailijasi eivät hylkää suunnittelun perusteet verkkosivuston ulkoasu. Esittelemme perusasiat siitä, mitä pitäisi tehdä hyvä muotoilu, tärkeimmät tekniikat tehokkaan verkkosivustoasettelun luomiseen ja yleisimmät verkkosivustojen asettelutyypit.
Pakkaussuunnittelun lyhyt kuvaus
Tavoitteet. Verkkosivuston ulkoasu
Niin yksinkertaiselta kuin se kuulostaakin, verkkosivuston ulkoasun ainoa tarkoitus on tukea verkkosivuston tavoitteita, olipa kyseessä muuntaminen, brändin tunnistettavuus, viihdettä tai muuta tarkoitusta varten. Mutta tavoitteet verkkosivusto ilmaistaan sisällön kautta, ja asettelussa kuvataan, kuinka tämä sisältö voidaan toimittaa tehokkaasti. Tässä on joitain yleisiä toimintoja, joita verkkosivuston asettelu voi suorittaa:
- Tietojen näyttö . Hyvä verkkosivuston ulkoasu järjestää tiedot selkeällä tavalla, on helppo skannata, antaa painoarvoa tärkeimmille elementeille ja tekee käyttäjän työkaluista intuitiivisen löydettävissä ja käytettäviksi.
- Käyttäjien sitoutuminen: Hyvä sivuston ulkoasu tekee sivusta visuaalisesti houkuttelevan, ohjaa käyttäjän katseet kiinnostaviin kohteisiin ja kannustaa jatkamaan sivustolla liikkumista.
- Tuotemerkki: Hyvällä verkkosivun ulkoasulla on rooli myös brändäyksessä, jossa käytetään yrityksen brändiin sopivia välilyöntejä, kohdistusta ja skaalausta.
Nämä korkean tason tavoitteet ohjaavat verkkosivuston ulkoasun suunnittelua, mutta ennen kuin tarkastelemme tiettyjä verkkosivustojen asetteluja, keskustellaan näiden tavoitteiden toteuttamisesta yksityiskohtaisemmin.
Verkkosivuston ulkoasun kehittämisprosessi. Verkkosivuston ulkoasu
Verkkosivuston asetteluprosessin tulisi tapahtua verkkosivuston luomisen varhaisessa vaiheessa, mikä on jonkin aikaa sen jälkeen, kun olet kehittänyt verkkosivustostrategiasi, mutta ennen kuin hyppäät grafiikkaohjelmaan käyttöliittymän luomiseksi.
Verkkosivuston ulkoasu visualisoidaan rautalankakehyksellä, joka on peruslangallinen kartta, joka näyttää, kuinka sisältö sopii yhteen. On tärkeää erottaa rautalankasuunnittelu web-suunnittelusta, joka on kokonaisuus käyttöliittymägrafiikan ja muiden visuaalisten elementtien luontiprosessi web-sivua varten. Verkkosivujen ulkoasusuunnittelu on suuri osa web-suunnittelua, ja se alkaa rautalangasta. Ihannetapauksessa visuaalisen suunnittelun tulisi sopia lankakehyksen asettelua niin, että graafiset elementit sijoitetaan strategisesti eivätkä perustu ohikiiviin esteettisiin mieltymyksiin.
Tämän jälkeen voit luoda verkkosivuston asettelun seuraavasti:
-
Verkkosivuston ulkoasu. Määritä kaikki sisältöalueet.
Wireframes edustavat tyypillisesti sisältöä yksinkertaisina neliöinä ja suorakulmioina, oli se sitten kuva tai tekstilohko. On tärkeää tietää etukäteen, kuinka paljon sisältöä sinulla on ja kunkin kappaleen likimääräinen koko (tai sanamäärä), jotta voit sovittaa elementit tarkasti yhteen.
-
Luo sarja rautakehyksiä ja prototyyppejä.
Asettelu voi olla niinkin yksinkertainen kuin piirtäminen kynällä ja paperilla, mutta saatavilla on myös monia ohjelmia (esim. Hassu ), suunniteltu optimoimaan prosessi. Koska rautalankakehysten ei tarvitse olla yksityiskohtaisia taideteoksia, voit luoda niitä useita kerralla. Vaikka rakastuisit ensimmäiseen ideaasi, sinun pitäisi kehittää lisää rautalankakehyksiä laajentaaksesi mielikuvitustasi ja antaaksesi itsellesi vaihtoehtoja. Ilman hienoja grafiikoita, jotka häiritsevät sinua, voit keskittyä käyttökokemukseen ja oppia, mikä asettelu on heille intuitiivisin. Muista ottaa huomioon kaikki näytön koot - on suositeltavaa aloittaa asettelulla mobiililaitteetja rakenna se sitten.
-
Testaa, kerää palautetta ja iteroi.
Kun sinulla on muutama vaihtoehto, varmista, että keräät palautetta kollegoiltasi. Sovellukset, kuten Invision и Figma, Voit luoda interaktiivisia prototyyppejä, jotta voit helposti testata painikkeita ja navigointia ilman varsinaista verkkosivua. Jos kokeilukäyttäjät tallentavat itsensä näytölle navigoidessaan prototyyppiä, tämä voi paljastaa UX-kompastuskiviä. Kun olet tehnyt muutaman muistiinpanon, palaa vaiheeseen kaksi ja toista, kunnes saat täydellisen tuloksen.
Vaikka nämä ovat kirjaimellisia vaiheita verkkosivuston asettelun luomiseen, voi olla vaikea ymmärtää, mikä tekee asettelusta tehokkaan tai ei, kun olet vasta aloittamassa. Seuraavassa osiossa tarkastellaan tiettyjä menetelmiä, joita voit käyttää suunnittelupäätösten tekemiseen.
Keskeiset menetelmät tehokkaiden luomiseen. Verkkosivuston ulkoasu
Verkkosivujen ulkoasusuunnittelu on vuosikymmeniä ollut käytäntö, mikä tarkoittaa, että vuosien aikana on luotu useita suunnittelukonventioita ja -periaatteita ohjaamaan suunnittelijoita heidän ammatissaan. Alla on joitain hyödyllisimpiä näistä tekniikoista:
Visuaalinen hierarkia
Visuaalinen hierarkia on tapa tyylitellä kuusi suunnitteluelementtiä kontrastin parantamiseksi, jotta tietyt sisällöt erottuvat muista. Tämän saavuttamiseksi ulkoasun tärkeimmät osat ovat ne, jotka käyttäjän on tunnistettava välittömästi sivun tarkoituksesta riippuen. Ne sisältävät yleensä otsikoita, arvoehdotuksia, kehottaa toimintaan ja käyttäjän työkalut, kuten navigointi.
Visuaalinen hierarkia voi ilmetä monin tavoin, kuten valitsemalla fontin (koko, paino ja jopa erilaiset fonttiyhdistelmät), kohdistamalla tärkeitä elementtejä korkeammalle sivulla tai käyttämällä täydentäviä värejä elementtien korostamiseen.
Lukumallit. Verkkosivuston ulkoasu
Lukukuviot kuvaavat yleisimmät tavat skannata sivuja käyttäjät ja ne on kuvattu suunnattuina viivoina (vektoreina matemaatikoille). Koska tutkimukset osoittavat, että 79 % verkkosivuston vierailijoista vain selailee sivua, on tärkeää tehdä skannauksesta mahdollisimman helppoa. Yksi tehokas tapa tehdä tämä on suunnitella asettelu tiettyä lukumallia ajatellen.
Lukukuvioiden sisällyttäminen asetteluihisi edellyttää elementtien strategista sijoittamista katsojan näkölinjoille. Yleisimmät huomioon otettavat kuviot ovat Z-kuvio (siksak-vektori; hyödyllinen raskaan kuvan asetteluissa) ja F-kuvio (viivavektori; hyödyllinen raskaan tekstin asetteluissa).
Taitteen ylä- tai alapuolella. Verkkosivuston ulkoasu
Verkkosuunnittelussa "taitto" on viiva, josta verkkosivu leikataan pois näytön kokorajoitusten vuoksi. Sisältöä, joka näkyy sivun latautuessa, kutsutaan "sivun yläpuolelle", kun taas sisältöä, jonka avaaminen vaatii vieritä alaspäin, kutsutaan "sivun alareunaksi".
Verkkosivujen ulkoasun suunnittelussa tärkein ja/tai houkuttelevin sisältö (kuten arvolupaus ja toimintakehotus) tulee sijoittaa turvallisesti sivun yläosaan, jotta käyttäjien ei tarvitse etsiä sitä. Tämä tila on 1000 x 600 pikseliä useimmille näyttökokoille. Tästä huolimatta suunnittelijat voivat myös leikata kiehtovaa grafiikkaa ja kopioida taiton avulla houkutellakseen käyttäjiä vierittämään alaspäin samalla, kun he jatkavat vuorovaikutusta verkkosivun kanssa.
Verkkojärjestelmät. Verkkosivuston ulkoasu
Ristikkojärjestelmä on koviin mittoihin ja ohjeisiin perustuva layout. Ruudukko koostuu sarakkeista (tarkoitetut tilat sisällön sijoittamista varten) ja kouruista (pylväiden väliset tyhjät tilat).
Tyhjä tila
Valkoinen tila, jota joskus kutsutaan negatiiviseksi tilaksi, on yksinkertaisesti suunnittelun alue ilman sisältöä, eli tyhjää tilaa. Vaikka se on helppo jättää huomiotta ja usein houkuttelevaa täyttää sisällöllä, tyhjä tila voi olla tärkein omaisuus sivuston ulkoasussa.
Tämä sivustomalli herättää huomion tehokkaalla tyhjällä tilalla.
Ajattele, kuinka tekstirivi tyhjällä sivulla kiinnittää huomiosi paljon tehokkaammin kuin sivulla, joka on täynnä sisältöä. Runsaasti tyhjää tilaa lisää korostusta, jolloin koko sävellys on helpompi lukea. Toisin kuin painetuilla sivuilla, web-sivun pituutta ei ole rajoitettu, mikä antaa suunnittelijoille paljon enemmän vapautta strategiassa ja tyhjän tilan käytössä.
Yleisiä verkkosivustojen asettelutyyppejä. Verkkosivuston ulkoasu
Verkkosivustojen ulkoasu luodaan harvoin tyhjästä; itse asiassa usein sanotaan, että näin ei ole. Useimmat nykyaikaiset verkkosivustot perustuvat yleisiin asettelumalleihin, joita käytetään johdonmukaisesti, pienin vaihteluin Internetissä.
Vaikka jonkinasteinen omaperäisyys on tärkeää missä tahansa suunnittelussa, verkkosivustot on suunniteltu heti ymmärrettäväksi ja käytettäväksi. Joten kun käyttäjät tottuvat tietyntyyppisiin asetteluihin vuosien varrella, suunnittelijoiden on järkevää pysyä niissä. Muista, että viime kädessä ulkoasun tulee olla käytännöllinen, ja mitä vähemmän aikaa käyttäjät käyttävät uuden ulkoasun oppimiseen, sitä enemmän he käyttävät aikaa sivuston todelliseen käyttöön. Tämän lisäksi tässä on joitain yleisimmistä verkkosivustojen asetteluista:
Yhden sarakkeen asettelu
Yhden sarakkeen asettelu on asettelu, joka sijoittaa sisällön peräkkäin yhteen sarakkeeseen, usein keskelle.
Monet verkkosivujen asettelut alkavat tästä, koska mobiili-ensisijainen suunnittelu on pitkään suositeltu lähestymistapa ja mobiilisivustot asetetaan usein yhteen sarakkeeseen kokorajoitusten vuoksi. Tämä asettelu on hyödyllisin aloitussivuille tai kanavapohjaiselle sisällölle, kuten sosiaalisia verkostoja ja blogeja, koska se vähentää sivuelementtien määrää ja edistää vierittämistä.
Kaksisarainen asettelu. Verkkosivuston ulkoasu
Kahden sarakkeen asettelu, joskus jaetun näytön näkymässä, näyttää sisällön vierekkäin.
Tästä on hyötyä, kun halutaan korostaa kahden elementin välisiä eroja (esimerkiksi eri yleisöt vaatetussivustoilla, ennen/jälkeen palvelutyyli tai kaksi vaihtoehtoa hinnoittelu). Se on hyödyllinen myös grafiikan ja kopioinnin tasapainottamiseen, mikä tukee hienovaraisesti Z-kuvion lukemista.
Usean sarakkeen asettelu. Verkkosivuston ulkoasu
Monisarakkeista asettelua kutsutaan usein sanomalehti- tai aikakauslehtiasetelmaksi. Se sovittaa raskaan verkkosivuston sisällön yhdelle sivulle.
Ruudukkoa käytetään tyypillisesti järjestyksen ja hierarkian ylläpitämiseen tarjoamalla leveämpi saraketila tärkeämmille elementeille, kuten pääsisällölle, kun taas vähemmän tärkeille elementeille, kuten navigointivalikko, sivupalkki tai bannerimainos, jätetään vähemmän suhteellista tilaa. Tästä on hyötyä yritysten kotisivuille, kuva- tai videosivustoille, verkkojulkaisuille, mukautetuille kojelaudoille ja ostossivustoille – sivustoille, joilla on paljon sisältöä ja luokkia, joille käyttäjät ohjataan.
Epäsymmetrinen asettelu. Verkkosivuston ulkoasu
Epäsymmetrinen asettelu on, kun elementit on järjestetty epätasaiseen mittakaavaan ja lähelle - yksinkertaisesti sanottuna, ei symmetrisesti. Mutta vaikka se on ristikkojärjestelmän vastakohta, epäsymmetria ei tarkoita kaaosta.
Tasapaino on tärkeää missä tahansa suunnittelussa, ja epäsymmetrinen asettelu yksinkertaisesti saavuttaa tämän odottamattomilla tavoilla, kuten yhdistämällä suuren mittakaavan renderöinnin toisella puolella ja monia pienempiä elementtejä toisella. Tämä on hyödyllistä korostuksen lisäämiseksi liioittelemalla joitain elementtejä (kirjaimellisen koon, värityksen tai sijoittelun avulla) toisiin verrattuna. Se voi myös tukea mukautettuja lukumalleja (toisin kuin aiemmin mainitut tavalliset).
Brändeille, joilla on varaa omaksua epätavallinen lähestymistapa suunnitteluun, tämä asettelutyyli on ihanteellinen – toisin sanoen verkkosivustot, jotka keskittyvät taiteeseen, joilla on seikkailunhaluinen yleisö tai jotka haluavat tuoda esiin innovatiivisen tai läpimurtotuotteen.
Verkkosivuston ulkoasu on täysin toteutettu
Upea verkkosivuston ulkoasu tekee siitä visuaalisesti houkuttelevan, mutta myös intuitiivisen. Tämä on ensimmäinen askel tehdäksesi käyttäjiin ensivaikutelman ja houkuttelemalla heidät pysymään ja näkemään kaiken sivustosi tarjoaman sisällön. Verkkosivuston ulkoasu
Vaikka nämä verkkosivuston suunnittelun perusteet voivat antaa sinulle lähtökohdan, sinun tulee yrittää tehdä kaikkensa tarjotaksesi sivustosi vierailijoille poikkeuksellisen kokemuksen. Ja paras tapa saada nykyaikainen sivuston ulkoasu on työskennellä ammattimaisen suunnittelijan kanssa.
АЗБУКА «
Jätä kommentti