Uudistettujen mallien tarkastelu verkossa
Sivuston visuaalinen kieli vaikuttaa kävijään kaukana ensimmäisestä näkemyksestä.
Itse asiassa, kun noudatat parhaita verkkosivustoja, huomaat, että pienet yksityiskohdat puhuvat teille alitajuisesti ja että johdonmukaisuus parantaa sivustosi kokemusta ja sen seurauksena olet todennäköisesti palaamassa.
Tässä artikkelissa selvitämme, mikä tekee suunnittelusta johdonmukaisen , ja esitämme joitain johdonmukaisimpia verkkosivustoja.
Ole hyvä ja kommentoi artikkelin lopussa näiden verkkosivustojen johdonmukaisuutta ja voit lisätä linkkejä muihin tämän periaatteen mukaisiin linkkeihin.
Mitä tarkoitamme suunnittelun johdonmukaisuudella? Mukaan tämä määritelmä , johdonmukaisuus voidaan määritellä seuraavasti: "sopusointuinen yhtenäisyys tai sopimus asioiden tai osien välillä".
Sinun tavoite suunnittelija on luoda tilaus, jotta käyttäjät voivat helposti löytää etsimäsi tiedot. Johdonmukaisuus voi auttaa sinua saavuttamaan tämän tavoitteen.
Tarkistusten luettelo
Ensiksi määritellään kriteerit, joiden avulla voimme selvittää, ovatko tässä tarkistetut sivustot yhdenmukaiset. Myös itsellesi asetettavat kriteerit hyödyttäisivät omaa päivittäistä suunnittelutyötäsi. Kuten haluan sanoa, hyvä muotoilu luodaan ensin hyvällä havainnoinnilla . Tässä ovat kriteerit:
Tyypillinen yhdenmukaisuus:
- Onko olemassa pystysuuntainen vertikaalinen rytmi?
- Onko typografinen linjaus johdonmukainen?
- Ovatko kirjasinlajivalinnat johdonmukaiset?
- Onko typografinen navigointi ennustettavissa sivuille?
Graafinen koostumus:
- Onko verkkosivuston kuvat välistä johdonmukaista tunnelmaa?
- Onko kuvien värit sopivat yhteen?
- Ovatko kuvien tekstuurit yhdenmukaiset?
- Ovatko kuvat koot yhdenmukaiset verkkosivuston yleisen rakenteen ja toistensa kanssa?
Värinkestävyys:
- Käytetäänkö värejä tasaisesti eri sivuilla?
Kuvake ja painike koostumus:
- Ovatko saman perheen verkkosivuston kuvakkeet?
- Koskevatko kuvakkeet koossa?
Sivuston ei tarvitse täyttää näitä kriteerejä pisteeseen, mutta luettelo on hyvä lähtökohta, joka auttaa tekemään omat mallit tasalaatuisiksi ja harmonisiksi.
Okei, meillä on nyt mukava pieni tarkistuslista pelata. Katsotaanpa verkkosivustollamme, oppi niistä ja saa inspiraatiota!
52 viikkoa UX: stä
Mitkä ovat tämän sivuston kohokohdat:
- Yläosassa oleva valkoinen tila on yhtä tasainen.
- Typografia on johdonmukaisesti linjassa.
- Pisin sivusuuntainen navigointi ylhäältä on sekä älykäs että tuttu.
- Kuvien kuvat ovat aina mustavalkoisia.
Nyt, koska tässä artikkelissa on tietoja yksityiskohtiin, haluan kiinnittää huomiota kahteen vähäiseen kysymykseen tämän sivuston kanssa sekä alatunnistimessa: Ensinnäkin huomaa, että Go-hakupainikkeella on heijastus, kun taas muut sivuston elementit eivät (vertaa esimerkiksi yläosassa olevaa RSS-painiketta).
Huomaa myös, että otsikoiden ja tekstin välinen tila on paljon tarkempi alatunnistimessa verrattuna muuhun verkkosivustoon.
Punainen nauhat
- Ensinnäkin sivuston näkyvin osa: punainen! Kauniisti ja johdonmukaisesti käytetään logoa otsikoihin linkkien kautta painikkeisiin.
- Seuraavaksi painikegrafiikan rakenne on sama kuin logo.
- Huomaa myös, että painikkeet ovat visuaalisesti kaikki samat perheet, jopa sosiaaliset kuvakkeet alareunassa.
- Näyttötyyppi on mukava laatta serif-uudelleen, jota käytetään johdonmukaisesti logoista otsakkeisiin nappeihin.
- Lopuksi teksti-elementit koko sivustolla ovat linjassa tasaisesti, huuhtele vasemmalle ja riehuu oikealle.
Yaron Schoen
- Ensimmäinen asia, joka saa silmän, on se, kuinka otsikon kuvassa on syvyyttä. Jopa neljä alla olevaa graafista elementtiä ponnahtaa ulos säiliöistään ja pelaavat syvyys samalla tavalla.
- Typografia on täysin linjassa ruudukossa.
- Kirjasin on hyvin valittu ja toteutettu. Kotisivulla ja muilla sivuilla on myös jatkuvuus.
- Värit ovat myös hyvin johdonmukaisia, ja ne näyttävät hienosti tumman sinestä sinertävän vihreään, aina otsakkeesta alatasolle.
Fuzzco
- Katso tekstin yläreunassa. sitä käytetään myös kuvien läheisyydessä.
- Tarkastele otsikon tyyppiä sivuilla; hienosti tehty muokatulla Flashilla, antaen sille luovaa tunnelmaa.
- Serif on johdonmukainen kotisivun yli, mutta murtaa hieman sisäisillä sivuilla.
- Yläreitityksen värit vastaavat alatunnistetta, yhdenmukaistavat ja kehittävät sisältöä.
Styleboost
- Koko varmasti tekee tämän sivuston johdonmukaiseksi: iso . Suuret painikkeet, suuret kuvat (kaikki kooltaan yhtenäiset), iso tyyppi, iso valkoinen tila.
- Väri pidetään mahdollisimman pienenä ja sitä käytetään hyvin. Vaaleansininen säilyy harmoniaa, ja toissijainen harmaa leikkii syvyydellä ja hierarkialla.
- Painikkeet ovat suuria ja yhtenäisiä. Ne ovat myös hieman pyöristettyjä ja vastaavat hakukenttää.
- Ristikkorakenne on yksinkertainen ja kertoo, mitä seuraavaksi tulee. Jopa alatunniste on suhteessa, mikä näyttää olevan lähellä kultaista suhdetta.
Herkullinen hirviö
Tämä sivusto ei ole uusi, mutta se on kaunista siitä, miten se on pysynyt yhtenäisenä vuosien varrella eikä ole vanhentunut. Yksityiskohtien huomio on auttanut.
- Huomaa tekstuurit. Sivusto on kehystetty puuhyllyllä, joka liittyy yhtiön tarjoamaan ohjelmistoon.
- Graafiset elementit, kuten ruoho ja kasvit pitävät harmoniaa.
- Jokaisessa osassa on pyöristetyt kulmat, jopa diaesityspainikkeet.
- Vihreän-keltainen hallitsee sivua, joka kutsuu sinut tähän mielikuvitukselliseen ja ikimuistoiseen maailmaan.
Richard Meier & Partners -arkkitehdit.
Se on suunnitellut Massimo Vignelli , joka tunnetaan hallitsemasta verkkoa ja tuottaa modernia, johdonmukaista ja loogista mallia.
- Huomaa graafisten elementtien kohdistaminen. Väri-vasemmalla oleva tyyppi valikossa on linjassa alla olevien kuvien kanssa.
- Alivalikon alla oleva horisontaalinen sääntö on pysyvää, mikä auttaa käyttäjiä suuntautumaan verkkosivustoon.
- Navigoinnin ja kehon sisällön välinen tila on johdonmukainen, jolloin silmällä on selkeä polku seuraamaan.
- Tipografia on yksinkertainen, tasainen vasemmalle ja sans-serif, joka laskee johdonmukaisesti verkkoon.
Joukkue takana Informaation arkkitehdit on myös hallitseva yksinkertaisuus, verkkosuunnittelu ja johdonmukaisuus.
- Huomaa, miten navigointi ylhäällä on linjassa alla olevan ruumiin sisällön kanssa.
- Väripaletti on yksinkertainen ja johdonmukainen: punainen, valkoinen ja musta.
- Tekstin elementit ovat yhdenmukaiset. Huomaa, kuinka horisontaalisten sääntöjen välinen tila on johdonmukainen sivun alaspäin.
Wilson Miner
- Päivämäärät ja sisällön sisältö ovat kohdistettuja ensimmäiseen sarakkeeseen, jota seuraa kehon sisältö.
- Huomaa, miten yläreunassa oleva navigointi sijoittuu verkkoon, joka vastaa alla olevaa sisältöä.
- Typografia on yksinkertainen valkoinen ja musta: valkoinen osion otsikoille, musta runko-osaan.
Tapbots
- Ensimmäinen asia, joka saaliin silmäni, on erinomainen valkotilan käyttö, etenkin tasaisen välimatka logon ja navigoinnin välillä sekä ylä- että alapuolella.
- Kuvakkeet näyttävät tulevan samalta perheeltä, mikä luo harmoniaa.
- Syvyyden käyttö ylhäältä graafisesta sivupohjakuvaan on myös johdonmukainen.
- Värit sopivat sivulle: mustalla päällä vastaa jalkaantumia; punainen yläpainike vastaa alla olevaa hakupainiketta; ja harmaa navigointi vastaa jalkaterän harmaata palkkia.
Käärimistä
Jatkuva muotoilu vaatii monia työkaluja ja niitä voi olla vaikea saavuttaa.
Yksi vinkki voin tarjota on aloittaa mukava verkko ja sitten rakentaa wireframe päälle. Tämä antaa sinulle lintuperspektiivin kuvan graafisista elementeistä ja siitä, miten ne liittyvät toisiinsa.
Yllämainitut esimerkit antavat sinulle ajatuksen ruoan suhteen suunnittelusi toteuttamiseen. Johdonmukaisuus koostuu monista osista, jotka kaikki ovat keskeisiä prosessin osia.
Kirjoitettu yksinomaan Webdesigner Depotille Brooklynissa, New Yorkissa, web-suunnittelija Noam Almosnino. Seuraa Noamia Twitterissä , tai käy hänen verkkosivuillaan hellonoam.com .
Tietää muiden yhdenmukaisten verkkosivustojen jakamista kanssamme? Lähetä ne kommentteihin!