Hanki täydellinen verkkosivuston asettelu 27 askeleella

Sivu 1/2: Sivuston asettelu: Aloittaminen ja työnkulun suunnittelu

Verkkosivun suunnittelun ei tarvitse olla vaikeaa, varsinkin jos tiedät yleiset virheet, joita on vältettävä. Tässä viestissä käymme läpi vaiheet, jotka sinun on tehtävä täydellisen verkkosivuasettelun saavuttamiseksi. Kerromme, mitä jokaisen uuden verkkosivuston rakentajan tulisi tietää ja tehdä ennen uuden projektin aloittamista, ja mitä heidän tulisi kiinnittää huomiota luiskahtamisen välttämiseksi.

Nämä vaiheet kattavat paitsi suunnittelunäkökohdat myös yleiset työnkulun vinkit. Tällä sivulla tutkitaan, miten pääset alkuun, ja suunnittelun työnkulun tärkeimmät vaiheet sivu 2 Löydät yleisiä neuvoja verkkosivujen ulkoasun lähestymisestä ja vinkkejä projektin käärimiseen. Noudata tätä neuvoa ja olet pian matkalla luomaan ammattimaisia ​​verkkosivujen asetteluja. Voit myös lukea Atomic Design , tapana jäsentää sivustosi.

Etsitkö vielä isäntää? Katso oppaamme parhaat verkkosivustopalvelut ja parhaat verkkosivustojen rakentajat juuri nyt. Ja sitä ei käsitellä tässä, mutta älä unohda virhesivujasi! Katso meidän valitsemamme paras 404 sivua inspiraation saamiseksi.



Päästä alkuun

01. Määritä, mitä menestys tarkoittaa

henkilö, jolla on kannettava tietokone

Pääset suunnittelun tarkoituksen juuriin

Ennen työn aloittamista sinun on tiedettävä, mihin sitä suunnittelet. Sivuston kuvauksen lisäksi sinun on tiedettävä, mitä odotuksia sillä on. Otetaan esimerkiksi uutissivusto. Mikä on tavoite? Onko se tehtävä mahdollisimman monta mainoksen näyttökertaa vai tarjotaanko se parhaan lukukokemuksen takaamiseksi? Kuinka nämä tavoitteet mitataan?

Hyvät uudistukset eivät välttämättä ole kaikkein räikeimpiä, mutta ne, jotka parantavat suorituskykyä ajan myötä. Keskustelu asiakkaidesi kanssa ennen suunnittelun aloittamista on avain kaiken tämän määrittelemiseen. Sinun on opittava, mitä heidän huolensa ja tavoitteensa ovat kirjoitetun SOW: n (työilmoituksen) ulkopuolella.

02. Ymmärrä nykyinen sivusto

Suunnittelijan osallistuminen projektiin ei useinkaan tapahdu erillään. Asiakkaat eivät aina ota sinuun yhteyttä aloittaakseen jotain tyhjästä. Useimmissa tapauksissa sinun on ymmärrettävä käytössä oleva järjestelmä, ja jos projektisi on tarkoitus haastaa se, etsi mahdollisuuksia kehittää sitä tai seurata sitä sellaisenaan.

Vaihtoehdot ovat rajattomat. Suunnittelu, mikä on paikallaan suunnittelunäkökulmasta, on avainasemassa, jos haluat liikkua nopeasti ja tunnistaa innovointimahdollisuudet, sen sijaan, että tarvitsisit kyseenalaistaa vakiintuneen ja tulla kotoisaksi kyvyttömänä ymmärtämään vaatimuksia.

03. Jaa malleja asiakkaiden kanssa jo varhaisessa vaiheessa

Kun ehdotat vuorovaikutteista konseptia tai ulkoasua, sinun on varmistettava, että sinä ja asiakas pääsette samalle sivulle mahdollisimman pian. Vältä käyttämästä liikaa aikaa konseptiin ennen kuin jaat sen asiakkaalle.

Kun alkuperäinen konsepti on hyväksytty, voit rentoutua hieman ja aloittaa tuotannon. Mutta ensimmäisen asiakkaan esittelyn jälkeen, jos asiakas ei rakastu siihen, sinun tulisi kerätä tarpeeksi palautetta tuoda toinen, sopivampi käsite pöydälle.

Suunnittelun työnkulku

04. Käsittele asettelu ensin

Tämä tuntuu hyvin ilmeiseltä, mutta olen huomannut liian usein, että suunnittelijat hyppäävät suoraan työhönsä ennen kuin miettivät ongelmaa, jota yritämme ratkaista. Suunnittelu koskee ongelmien ratkaisemista, eikä niitä voida ratkaista kaltevuuksien tai varjojen avulla, vaan pikemminkin hyvän asettelun ja selkeän hierarkian avulla.

Ajattele sisältöä, asettelua ja toiminnallisuutta. Varmista, että nämä ajatukset ovat asiakkaasi tavoitteiden mukaisia, ja voit jakaa ne.

05. Aloita luonnostelu ylätason kehyksestä

Sivuston asettelu: UX-luonnos

Peruslankakehys auttaa sinua strukturoimaan asettelun (suurenna napsauttamalla oikean yläkulman kuvaketta)

Kun minua pyydetään luomaan ulkoasu verkkosivuston ulkoasulle, ensinnäkin teen keksiä ylätason kehys, joka ratkaisee kaikki suunnitteluongelmat. Kehys on käyttöliittymä, joka ympäröi sisältöä ja auttaa käyttäjää suorittamaan toimia ja selaamaan sitä. Se sisältää navigoinnin ja komponentit, kuten sivupalkit ja alatankot.

Jos lähestyt suunnittelua tästä näkökulmasta, sinulla on selkeä käsitys siitä, mitä asettelusi tarvitsee suunnitellessasi osioita etusivun ulkopuolelle.

06. Lisää ruudukko

ruudukot eri näytöillä

Esimerkki 978-ruudukosta, jonka peruspiste on 10 kuvapistettä

Se on niin yksinkertaista kuin miltä se kuulostaa. Ennen kuin alat suunnitella mitään, tarvitset oikean ruudukon. Ei ole kelvollisia tekosyitä aloittaa ilman verkkoa - ja jos et, voin vakuuttaa teille, muotoilu ei näytä yhtä hyvältä. Ruudukko auttaa sinua jäsentämään eri osioiden asettelun; se opastaa sinut näyttökoon erityisvaatimusten läpi ja auttaa sinua luomaan reagoivia malleja, joten olet johdonmukainen sekä etäisyyden että monien muiden suunnitteluongelmien suhteen.

Tutustu tähän oppaaseen saadaksesi selville, miten tämä tehdään luomalla ruudukon, joka mukautuu kaikkiin näyttökokoihin .

07. Valitse typografia

Verkkosivujen asettelu: typografia

Nyrkkisääntö on käyttää enintään kahta erilaista kirjasinta verkkosivuston ulkoasussa

Eri kirjasinten ja värien tutkiminen on osa projektin etsintävaihetta. Yleensä suosittelen, että verkkosivustolla ei käytetä enempää kuin kahta erilaista kirjasinta, vaikka se riippuu todella sen luonteesta. Valitse kirjasin, joka on helppo lukea suurille tekstinpaloille, ja ole leikkisempi otsikoiden ja toimintakehotusten kanssa. Etsitkö inspiraatiota? Tutustu täydelliseen yhteenvetoon fonttien pariliitos tai luettelo ilmaiset fontit . Älä pelkää isojen fonttien käyttöä ja ole luovaa ja johdonmukaista, kun käytät typografiaa.

08. Valitse väriteema

Sivuston asettelu: värit

Color Huntin kaltaiset työkalut on suunniteltu auttamaan valitsemaan paletti

Kirjasinjoukon valitsemisprosessin aikana sinun on aloitettava tutkiminen, mitä värejä käytät käyttöliittymässä, taustoissa ja tekstissä. Suosittelen rajoitettua värejä ja sävyjä yleiseen käyttöliittymään.

On tärkeää soveltaa niitä johdonmukaisesti koko verkkosivuston ulkoasuun kunkin elementin toiminnallisuudesta riippuen. Ajattele sellaisten sivustojen asettelua kuin Facebook, Twitter, Quora ja Vimeo. Käyttöliittymän lisäksi kuville tai graafisille yksityiskohdille ei saisi olla värirajoituksia, kunhan ne eivät häiritse komponenttien toimintaa.

Jos juutut, katso meidän luettelo parhaat värityökalut web-suunnittelijoille .

09. Yksinkertaista asettelua

Sivuston asettelu: B-kelan kotisivu

Yksinkertaisissa asetteluissa on yleensä helpompaa navigoida

Mitä yksinkertaisempi sivuston rakenne on, sitä helpompaa käyttäjien on navigoida. Jokaisen osan on kerrottava tarina; se tarvitsee syyn ja lopputuloksen käyttäjälle. Asettelun tulisi auttaa sisältöä korostamaan tarinan tärkeimpiä kappaleita.

Todellisuudessa sivulla ei saisi olla liikaa toimintakehotuksia - kaiken pitäisi ajaa siihen lopulliseen 'Mitä voin tehdä täällä?'

kuinka julkistaa kuva Facebookissa

Ajattele yksinkertaista asettelua, jonka voit kuvitella yksinkertaista tarkoitusta varten, ja aloita lisäämällä tarvittavia komponentteja. Loppujen lopuksi olet yllättynyt siitä, kuinka vaikeaa on pitää se yksinkertaisena.

10. Tarkenna kaikki komponentit

Microsoft Music -suunnittelu

Claudio Guglieri työskenteli käyttöliittymäsuunnittelun parissa Microsoft Musicissa

Käsittele jokaista komponenttia ikään kuin se voitaisiin esittää suunnittelukilpailussa. Jos kiinnität huomiota jokaiseen komponenttiin, kokonaisuus on enemmän kuin sen osien summa. Minun on myönnettävä, että tämä neuvo ei ole minun. Kuulin sen edellisessä toimistossa ja olin järkyttynyt siitä, kuinka selkeä ja totta tämä lausuma oli.

Jokainen komponentti on suunniteltava ikään kuin se voisi olla yksin kaikkien aikojen paras komponentti. Joskus suunnittelijat jättävät tietyt sivuston osat viimeiseen tehtäväluetteloonsa, eivätkä lopulta näytä heille paljon kunnioitusta.

11. Kävele asiakkaita läpi ratkaisusi

Vältä tekemästä suuria paljastuksia työstäsi. Yksi asiakkaan kanssa usein tapahtuvan kommunikoinnin tavoitteista on välttää yllätyksiä paljastettaessa työsi. Aikoina, kun olen esittänyt edistykseni, olen huomannut hyödyllisemmäksi viedä heidät matkalle ja näyttää mistä aloitin, näkökohdat, joita minulla oli navigoinnin aikana tai missä lopulta laskeuduin sen sijaan, että vain näytän matkan loppu ilman asiayhteyttä.

Tekemällä tämän huomaat, että he joko ovat samaa mieltä johtopäätöksistäsi, tai jossain vaiheessa läpikäynnin aikana huomautat virheestä tai muusta vaihtoehdosta, jota et ehkä ole harkinnut. Kummassakin tapauksessa sinulla on keskustelu ja asiakas tuntee olevansa enemmän sijoittunut, kun he ovat osa prosessia.

12. Ajattele liikkeessä

yksinäinen planeetta -sivusto

Liike on välttämätöntä interaktiivisten kokemusten suunnittelussa

Liike on välttämätöntä interaktiivisten kokemusten suunnittelussa. Mitään mallia ei voida enää arvioida sellaisenaan tai staattisena kompaktina; jokainen komponentti on määritelty sen suhteella järjestelmään, ja tämä suhde tarvitsee liikkeen välittää oikein. Liike voi havainnollistaa dynaamisia vaikutuksia asettelusi sisältöön tai vuorovaikutteisiin tiloihin. Tätä toista tarkoitusta varten suosittelen, että viet suunnittelusi hieman syvemmälle prototyyppeihin.

13. Prototyyppi, prototyyppi, prototyyppi

yksinäinen planeettasivusto mobiililaitteilla

Prototyyppien tekeminen on paras tapa testata vuorovaikutusta

Prototyyppien tekeminen on paras tapa testata vuorovaikutusta ja tekniikkaa. On paljon prototyyppityökalut jotka tekevät siitä nykyään helppoa, eikä sinun tarvitse olla koodausguru tehokkaiden prototyyppien luomiseen. Tämä on jälleen yksi tapa saada asiakas innostumaan ja mukana käsitteillä ja ideoilla, jotka muuten tarvitsevat paljon selitystä.

Seuraava sivu: Suunnittelutapa ja kääriminen

  • 1
  • kaksi

Tämänhetkinen sivu: Sivuston asettelu: Aloittaminen ja työnkulun suunnittelu

Seuraava sivu Sivuston asettelu: Suunnittelun lähestymistapa ja kääriminen