10 Web-suunnittelu sääntöjä, joita voit rikkoa
Koska web-suunnittelu ja muotoilu ovat yleisesti kehittyneet, on luotu sääntöjä johdonmukaisten ja käyttökelpoisten mallien varmistamiseksi.
Jotkut näistä säännöistä luotiin yksinkertaisesti siksi, että sivuston luojat käyttivät väärin tietyt periaatteet ottamatta huomioon käyttäjiään.
Mutta näitä sääntöjä ei ole pakotettu kenenkään mukaan, ja ne tulisi rikkoa tarpeen mukaan, varsinkin kun niiden rikkominen johtaisi upeaan muotoiluun.
Tässä artikkelissa esitämme 10 sääntöä, jotka voit rikkoa, jos se sopii suunnittelustarpeisiisi.
Sääntö # 1: Älä näytä vaakasuoraa vierityspalkkia
Merkittävä määrä hiiristä ei ole vaakasuoraa hiiren rullaa. Tämän vuoksi on vaikeaa vierittää vasemmalle tai oikealle, kun verkkosivun sisältö ulottuu selaimen sivuille.
Se voi olla ärsyttävää saada hiiren kohdistin alas ikkunan alareunaan ja vetää vierityspalkkia vain nähdäksesi sana tai kaksi, joka sijaitsee sivun näkyvän alueen ulkopuolella. Sanotaan, että tässä on joitain hyvin suunniteltuja sivustoja, jotka asettavat vierityspalkin toimimaan tehokkaasti.
Benek
Benek käyttää JavaScript-ohjelmaa hiiren pyörän selaussuunnan muuttamiseksi pystysuorasta vaakatasoon. Jokainen kohde Benekin salkussa on jaettu omaan sarakkeeseensa. Sivustolla on yllättävän tuore tunne ja virtaa sujuvasti.
Shoe Guru
Shoe Guru pääsee pois horisontaalisesta rullauksesta, koska se hyödyntää tapaa, jolla ihmiset katsovat kenkiä. Ihmiset katsovat eniten tuotteita ylhäältä alas, mutta kengät ovat erilaisia. Ihmisten silmät liikkuvat yleensä kengän pituuden yli. Käyttämällä tätä tapaa sen eduksi Shoe Guru tekee verkkosivujen suunnittelusta virtaavan samaan suuntaan, jolloin liike tuntuu luonnolliselta.
Stephane Tartelin
Stephane Tartelin käyttää vaakasuoraa vierityspalkkia, jotta hänen taideteoksensa näyttää olevan taidegalleriassa. Vaikka pystysuoran hiiren pyörä ei toimi kuten edellä olevissa esimerkeissä, vaikutus vaikuttaa yllättävän hyvin. Voit jopa väittää, että vaikutus vähenisi, jos hiiren rullaa koodattiin uudelleen horisontaalisesti.
Graafinen terapia
Sillä aikaa Graafinen terapia ei näytä sivulla olevaa vaakasuoraa vierityspalkkia, se sallii edelleen vaakasuoran selauksen napsauttamalla ja vetämällä ruudun ympäri. Graafinen teoria käytti horisontaalista navigointia, koska kaikki sen kuvat ovat saman korkeuden sijaan samanlaisia. Vaakasuuntainen navigointi auttaa sivuston virtaamista sujuvasti.
Vaakasuora tapa
Vaakasuora tapa on verkkosivustojen näyttö, joka käyttää vaakasuoraa vieritystä. Nerokas grafiikka on kaunista, ja tämä sivusto on ainutlaatuinen siltä osin kuin CSS-galleriat menevät.
Sääntö # 2: Käytä vähimmäismäärä fonttikuvia
Liian monet fontit ovat yleensä ristiriidassa toistensa kanssa ja heikentävät katsojia. Jokaisella fontilla on persoonallisuus, ja liian monet persoonallisuudet voivat aiheuttaa häiriötä.
Käytä tehokkaasti muutakin kuin vain pari fonttia, suunnittelun on oltava hyvin tekstipohjaista, ja loput suunnittelun on oltava suhteellisen hiljaisia. Seuraavassa on muutamia esimerkkejä sivustoista, jotka käyttävät tätä ristiriitaa ja häiriötä käyttäjän ottamiseksi mukaan.
Linkit LA
Linkit LA käyttää monia fontteja epälineaarisessa asettelussa luomaan energian tunnetta. Sivua on vaikea lukea nopeasti, mutta vetää käyttäjän sisään. On myös syytä huomata, että mikään fontti ei ole liian koristeellinen; jokainen sana on luettavissa, pitäen suunnittelun raikas ja puhdas.
Geo Elements Design Studio
Useiden kirjasinten käyttäminen yleensä välittää energiaa ja kaaosta, mutta Geo Elements Design Studio Sivusto on hyvin avoin ja puhdas. Jokaiselle fontille annetaan oma tila, jotta katselija ei liitä sitä toiseen fonttiin. Taustan taustalla oleva kuva auttaa vahvistamaan avoimuuden tunnetta.
Richard Stelmach
Toisin kuin viimeinen esimerkki, Richard Stelmach työntää eri fonttinsä lähellä toisiaan. Suunnittelu toimii, koska vain yksi fontti ei näytä käsin piirrettyinä, ja kaksi muuta toimivat hyvin havainnollisesti. Käsin kirjoitetut fontit toimivat yleensä hyvin yhdessä, vaikka eri fonttipintoja olisi paljon.
Satsu
Satsu näyttää olevan paljon erilaisia fontteja, mutta tosiasiassa on vain kolme (ei sisällä liikuntaneuvoston salkun osaa). Välttämällä kaikkea huolellisesti, Satsu yhdistää tiettyjä tekstiriviä keskenään, vaikka tekstissä voi olla eri fontteja.
Logo-nimike on yhdellä fontilla, ja molemmilla alaotsikoilla on oma fonttinsä, mutta katselija ryhmittelee luonnollisesti nämä kolme tekstiä yhteen. Satsun pystyy luomaan energiaa ilman ylivoimaa sivulta persoonallisuuksilla.
Sääntö # 3: Älä käytä liian monta väriä
Pelko mennä liian kauas muotoilu on se, mikä erottaa ammattilaiset aloittelijoista ja aloittelijoista unohtamattomista. Epättämättömät yrittävät tehdä malleistaan mahdollisimman äärimmäisen, sanalla tulta, vilkkuva teksti ja mahdollisimman monta väriä.
Rookies haluaa pitää suunnitelmansa hienovaraisena ja helppoa silmällä, mutta lopulta niiden mallit voivat joskus näyttää elottomalta. Seuraavat silmää miellyttävät mallit ovat joidenkin todellisia ammattilaisia, jotka työntävät rajoja.
Matt Mullenweg
Matt Mullenwegin kauniisti värillinen muotoilu näyttää vesivärimaalaukselta (sivusto on päivitetty, koska tämä artikkeli on kirjoitettu). Kaikki taustan värit nappaisivat kenenkään huomion.
Yleensä hyviä malleja, joissa on värejä, on nämä värit taustalla, yksinkertaisempi paletti edessä. Tekstin lukeminen on erittäin vaikeaa, kun liian monia asioita on meneillään.
Travic Isaacs
Travis Isaacsin muotoilu on värikäs pystysuora kaltevuus taustalla, joka tekee suunnittelusta näyttävän värikäs koko. Tämä sivusto on kirkkaan vaaleanpunainen linkin värisenä, mikä on loistava valinta suunnittelijoille, jotka haluavat luoda värikkään vaikutuksen.
James De Angelis
James De Angelis ' verkkosivusto osoittaa, että teksti voi olla värikäs ilman, että se tulee ristiriitaiseksi. Suunnittelu on erittäin varaa, ja tagline on varmasti keskeinen vaihe.
Sääntö # 4: Tee sivustosi tavoite selväksi
Jotain, joka tosiasiallisesti riistää nuorten suunnittelijoiden korville, on se, että suunnittelun pitäisi heti kertoa katsojille, mitä he katsovat, ennen kuin he lukevat minkä tahansa tekstin.
Brandin tunnistaminen on tärkeä suuryrityksille, mutta joskus pienempien kaverien on oltava hieman älykkäämpiä saadakseen katsojan huomion. Jäljellä olevat tiedot voivat juontaa katsojia ja "kiusata" ihmisiä haluamaan oppia lisää.
Tämän tekniikan soveltaminen web-suunnitteluun voi lisätä huomattavasti aikaa, jolloin käyttäjät pysyvät sivustossasi.
Cetrotrees
Useimmissa salkkuissa nykyään freelancer tai yritys tavallisesti esittelee itsensä ja selittää heidän työnsä. Cerotreees sen sijaan laittaa hieman epämääräisesti merkittyjä linkkejä vasemmalle ja näytteet sen työn oikealta, mutta mikään ei selitä ajatusta tai henkilöä sen takana.
Sivustoa ympäröivän mysteerin ilma herättää käyttäjää pysymään.
Viimeinen Mixtape
Viimeinen Mixtape on toinen portfolio, joka osoittaa sen työn ja ei mitään muuta. Tällaiset mallit herättävät äärimmäisen luottamuksen tunteen. He eivät koskaan yritä myydä itseään; he odottavat vain, että käyttäjä irtoaa ja tulee pyytämään sopimusta.
Peter Pearson
Splash-näytön käyttö on hyvä tapa hidastaa käyttäjän ajatusprosessia ja innostaa heitä kaivaamaan syvempää. Splash-sivun tavoite on yleensä selittää sivustolla nopeasti kuvia tai lyhyt teksti.
Mutta sisään Peter Pearsonin tapaus, sen tavoitteena on herättää tunne. Suuri taivas ja roiskeita tekstejä tekevät hienoa työtä kiehtovan uteliaisuuden vuoksi, koska nämä asiat eivät yleensä näy yhdessä. Tämä sivusto tekee myös hyvää työtä jatkamalla splash -sivun luomaa tunnetta varsinaiseen sisältöön.
Side-scrolling liike ja animoituja viivoja, jotka seuraavat käyttäjän ovat todella tehokkaita.
Piepmatzel
Hyvä tapa kiertää kielimuuri on olla käyttämättä sanoja. Piepmatzel on CSS-galleria, ja ihmiset, jotka ovat nähneet CSS-galleriaa, todennäköisesti tunnistavat sen heti.
Ne, jotka eivät ole, saattavat olla tarpeeksi innostuneita antamaan muutamia pienoiskuvia klikkauksen toivossa kuvata kuvio. Sivun alareunassa oleva pieni teksti auttaa lajittelussa ja on tarpeetonta.
Sääntö # 5: Navigointi olisi helppo selvittää
Navigointi ei saa olla sivuston pullonkaula. Käyttäjien pitäisi pystyä löytämään haluamansa nopeasti. Joskus kuitenkin ei-intuitiivinen, mutta silmiinpistävä navigointi voi auttaa käyttäjää tuntemaan olevan yhteydessä sivustoon ja mitä se edistää.
Alvin Tang
Kuten edellisessä kappaleessa mainittiin, luottamusilma välitetään silloin, kun salkku ei leviä. Näin on Alvin Tangin valokuvausportfolio. Kun ensin saapuu sivustoon, käyttäjä ei tunnista välittömästi sanoja, joita he näkevät linkkeinä.
Tämän epävarmuuden pitäisi vaatia heitä piiloutumaan hieman. Hiiren siirtäminen sanaa kohtaan paljastaa, että se on todellakin linkki, ja kun napsautat sitä, upea valokuvien lataus. Kuva houkuttelee käyttäjiä jatkamaan selaamista.
Jos haluat nähdä lisää kuvia, käyttäjien on napsautettava selaimensa "Takaisin" -painiketta (mitä useimmat ihmiset ymmärtävät) ja valitse sitten toinen linkki. Suunnittelussa ei ole kädensijaa, ja se toimii erittäin hyvin. Tämä ei ole perinteisesti "upea muotoilu", mutta se antaa juuri sen, mitä se tarvitsee.
Kasulo
Kasulo n navigointi ei ole kovin vaikeaa selvittää, mutta keskivertokäyttäjä ei välttämättä tiedä tarkalleen, mitä pitäisi tehdä, kun saapuu sivustoon. Ensimmäisen napsautuksen jälkeen kaikki käy ilmi.
Käyttäjä selaa portfoliokappaleita kolmiulotteisessa tyylissä, ja uusimmat kohteet näyttävät lähinnä alkua. Hiiren pyörän käyttö on vielä hauskempaa.
Marcio Kogan
Marcio Koganin sivusto on toinen esimerkki suuresta navigoinnista, joka ei ole välittömästi ilmeinen. Ohjaus "Vedä minua" on vaikea vastustaa, ja kun käyttäjä tekee sen, he ovat matkalla risteilemään salkun kohteita. Hiiren esikatselut ovat pieniä yksityiskohtia, mutta todella vaikuttavia.
Ceranco
Jos asiakas pyytää suunnittelijoita tekemään sivustonsa kolmekymmentä, kuten ensiapupolku videopeli, useimmat suunnittelijat hiljaa nauravat itsensä, syövät syvään henkeä ja sitten hitaasti selittää, miksi tämä olisi huono idea .
Vaikka verkkosivusto on Ceranco ei ole täsmälleen kolmiulotteinen ampuja, se olisi helppo sekoittaa jonkinlaiseen indie-tietokonepeliin. Tämän kaltaiset sivustot ovat upeita käyttäjiä. Pitkä latausaika ja huono hakukoneoptimointi tekevät siitä vähemmän kuin ihanteellinen useimmille projekteille, mutta se on varmasti toinen ajatus.
Sääntö # 6: Käytä eri värejä tekstiä ja taustaa varten
Tätä sääntöä ei kenties ole kirjoitettu koko paikalle, mutta monet rookieet pelkäävät tekstin lukemattomuutta, koska he eivät pidä samaa perusväriä samanlaisena kuin tausta ja fontti itsessään. Voit seurata joitakin yksinkertaisia tekniikoita, jotta samanlaiset värit toimivat.
Linksys
Linksys Linksys sivusto on siisti, koska sillä on kaikki siniset siniset linkit, vaikka taustan väri on eri sävyjä sinisenä. Vaikka riski ja ehkä ei ole suurin väripäätös, se toimii.
Brad Colbow
Brad Colbowin malli on samanlainen kuin Linksysin, koska sinisellä tekstillä on sinistä taustaa. Sinistä sinistä on vaikea vetää mukavasti, varsinkin niin monta eri bluesia koko sivustolla.
Powerset
Toistaiseksi tässä osiossa olemme nähneet vain sinisiä verkkosivustoja, koska sininen teksti on vaikeinta ihmisen silmien lukemiseen ja niin luettavissa oleva sininen on aina vaikuttava. Jos tekstitoiminto toimii sinisenä, se todennäköisesti toimii missä tahansa värissä.
Powerset käyttää tekstipainatyyliä fonttinsa luomaan 3-D-efektin, joka erottaa tekstin tehokkaasti taustalta.
Artist In Design
Artist In Design ei vain vihreää tekstiä vihreällä taustalla ja keltainen / beige teksti keltaisella taustalla, mutta siinä on teksti suoraan kuvan päällä.
Vaikka yksittäisiä kirjaimia voi olla vaikea lukea, sanat kokonaisuudessaan pysyvät luettavissa. Tämän tyyppinen vaikutus olisi lähes aina oltava keskipisteenä suunnittelussa.
Horacio Bella
Horacio Bella käyttää toista 3-D vaikutusta hänen salkkuunsa. Tällöin kirjaimet näyttävät ponnahtavan ulos eikä hammasteta sisäänpäin. Ilman tätä vaikutusta luettavuus olisi vähentynyt huomattavasti. Toinen hyvä vaikutus, jota käytetään tässä, on kirkkaiden kirjeiden kiristäminen, mikä parantaa edelleen luettavuutta.
Sääntö # 7: Älä laita animaatiota sisällön tapaan
Vakavasti, älä pudota pikku Flash-mainoksia juuri silloin, kun käyttäjä luki. Sama koskee niitä kyselyjä, jotka näkyvät aina, kun käyttäjä on lauseen keskellä. Käyttäjät eivät nauttikaa häiritsemättä, kun he ovat puoliväliin lauseella. Ellei…
Pieni hämähäkki on todella vaikea olla kiehtonut ABA sivustolla. Suunnittelu on puhdasta, ja vaikka hämähäkki on hämmennys, se on okei. Tähän mennessä tämä sivusto on mielestäni ainoa poikkeus sääntöön.
Sääntö # 8: Kiinnitä Web-Safe-fontit
Vaikka fonttien kasvojen korvaavat tekniikat ovat vielä nuoria, he tekevät jo suuren roiskumisen. sIFR oli ensimmäinen ja viime aikoina Cufon ja Typefasce.js ovat syntyneet.
Diseñorama
On Diseñorama verkkosivuilla, punainen "Recientemente" teksti on valittavissa. Yksi haittapuoli on, että jos sivusto ei lataudu välittömästi, käyttäjä näkee alkuperäisen tavallisen fontin lyhyesti.
Toinen haittapuoli on se, että jos käyttäjällä on JavaScript tai Flash käytöstä poistettu, he näkevät vain alkuperäisen fontin. Kaikki asiat ovat silmiinpistäviä. Toivottavasti se on esikatselu siitä, mitä tulee tulevina vuosina.
Cactuslab
Cactuslab käyttää myös sIFR: ää sinisille alaotsakkeille (kuten "Winter Work"). Vaikka sIFR on monimutkaisin kirjasimen korvaamismenetelmistä, tekstiä voidaan kopioida ja liittää, mikä antaa sille suuren edun verrattuna kahteen muuhun tekniikkaan.
Sääntö # 9: Älä ole Splash / Landing Page
Monilla suunnittelijoilla on ollut sama sama keskustelu asiakkaidensa kanssa siitä, miksi roiskesivu ei ole hyvä idea. Google pyrkii luokittelemaan tällaiset sivut alhaisemmiksi ja hidastaa käyttäjää saamasta sisältöä, jonka he ovat. Mutta ne voivat olla uskomattoman kauniita ja inspiroivia, jos ne tehdään oikein.
Gloss Postproduction
Salkunäytteen tarkoitus, joka näkyy Gloss Postproduction sivuston on herättää emotionaalinen reaktio käyttäjältä.
Jokaisen käynnin yhteydessä satunnainen valokuva portfoliosta ladataan. Napsauttamalla valokuvaa laskee sen alas ja sijoittaa sen paikoilleen muiden sivuston salkun palasioiden kesken. Skaalaus ja liikkeen vaikutus antavat jatkoa ja auttavat siirtämään käyttäjän tunteita muuhun yrityksen työhön.
Issa Lontoossa
Kun sivusto on kokonaan tehty Flashissa, latauspalkki voi toimia splash-sivuna. Kun käyttäjä näkee latauspalkin, he joko sulkevat sivun ja menevät muualle tai siirtyvät toiseen välilehteen ja selaa muualle, kun he odottavat.
Kun sivu latautuu, on parempi odottaa käyttäjää palaavan ennen käynnistämistä. Sisään Issa Lontoossa 's tapauksessa portti on täydellinen metafora sanoa, että sivusto on valmis ja käyttäjä voi tulla.
Kun käyttäjä napsauttaa porttia, portti avautuu ja näkyvät erilaiset kuvitetut mallit. Splash-sivun portin käyttäminen on loistava suunnitteluidea, koska käyttäjän sisäänsyötön jälkeen tuntuu olevan sitoutunut.
Sääntö # 10: Älä käytä taulukoita
Kaikki web-suunnittelija, joka käyttää taulukoita omissa malleissaan, kutsutaan heti kokeneen suunnittelijan rookiksi. Taulukoissa ei näytetä samoja kaikissa selaimissa, ja ne voivat tehdä lähdekoodista epäkelpoisen, mutta ainakin tiedät, mitä saat heidän kanssaan. Seuraavassa on muutamia esimerkkejä malleista, joissa on taulukoita.
Tämä taulukko on hieman vaikea nähdä, mutta se on sijoitettu kahden tuolin väliin. Se on mukava pieni sivupöytä, mutta ei valitettavasti lisää paljon tämän sivuston suunnittelua.
Taulut ovat tämän taustan taustalla Toimi Play , mutta ne pitävät työntekijöiden kannettavat tietokoneet ja muut kohteet helposti. Ilman näitä pöytiä huone tuntuu paljon tyhjentyneeltä, eikä taustalevyllä olisi samaa vaikutusta.
Vaikka tämä muotoilu useimmiten sisältää tuoleja, pieni pöyti näkyy pikkukuvan oikeassa yläkulmassa. Näyttää siltä, että potti istuu.
Mitä tulee malleihin pöydillä, tämä on yksi parhaista. Kahdessa pöydässä, joissa on Flash-animaatio, muotoilu antaa heille paljon huomiota. Tämän sivuston pitäisi olla jokaisen suunnittelijan listalla suurista malleista, jotka käyttävät taulukoita.
Rikkoa sääntöjä!
Sääntöjen rikkominen on kunnossa, kun malli vaatii sitä. Monet suunnitteluratkaisuista, joita tarkasteltiin täällä, eivät ole keskimäärin harkitsevia. Tämä erottaa suuret suunnittelijat keskimäärin.
Ne, jotka ovat rohkeita vastustaa sitä, mitä heille on opetettu, erottuvat aina.
Kirjallinen yksinomaan WDD bt Eli Pennerille. Hän hoitaa omalla verkkosivustollaan SleepyHero.com
Rikkoo sääntöjä web-malleissasi? Miksi tai miksi ei? Kerro mielipiteesi kanssamme ...