10 Vefur Hönnun Reglur sem þú getur skemmt
Þar sem hönnun og hönnun almennt hefur þróast hefur verið sett reglur til að tryggja samræmi og nothæf hönnun.
Sum þessara reglna voru búin til einfaldlega vegna þess að vefhönnuðir misnotuðu ákveðnar reglur án tillits til notenda þeirra.
En þessi reglur eru ekki framfylgt af einhverjum og ætti að vera brotinn þegar nauðsyn krefur, sérstaklega þegar þeir brjóta þær myndi leiða til töfrandi hönnun.
Í þessari grein kynnum við 10 reglur sem þú getur skemmt ef það hentar þínum þörfum.
Regla # 1: Ekki birta láréttan rúlla
Verulegur fjöldi músa hefur ekki láréttan músarhjól. Þetta gerir það óþægilegt að fletta til vinstri eða hægri þegar efni vefsíðunnar nær yfir hlið vafrans.
Það getur verið pirrandi að þurfa að koma með músarbendilinn niður í neðst á glugganum og draga um skrúfuna yfir bara til að sjá orð eða tvö sem liggur fyrir utan sýnilegt svæði síðunnar. Það er sagt, hér eru nokkrar vel hönnuð vefsvæði sem setja skrunastikuna á virkan hátt.
Benek
Benek notar JavaScript til að breyta skrúfunarstefnu músarhjólsins frá lóðréttu til lárétta. Hver hlutur í eigu Benek er skipt í eigin dálki. Þessi síða hefur ótrúlega ferskan tilfinningu og rennur vel.
Skógúpur
Skógúpur fær í burtu með láréttri skrúfu vegna þess að það nýtir hvernig fólk skoðar skó. Fólk lítur mest á vörur frá toppi til botns, en skór eru mismunandi. Augu fólks fara venjulega yfir lengd skósins. Með því að nota þessa venju í þágu, gerir skógúrarinn hönnunarsíðuna á vefsíðu sinni í sömu átt og gerir hreyfingin tilfinningaleg.
Stephane Tartelin
Stephane Tartelin notar lárétta skruntanga til að gera listaverk hans líta út eins og það sé í listasafni. Þó að lóðrétt músarhjólin virkar ekki eins og það gerist í dæmunum hér að framan, virkar áhrifin ótrúlega vel. Þú gætir jafnvel haldið því fram að áhrifin yrði minnkuð ef músarhjólið var endurkóðað til að fletta lárétt.
Grafísk meðferð
Þó Grafísk meðferð birtir ekki lárétta flettistiku á síðu hennar, gerir það ennþá lárétt skrun með því að smella og draga um skjáinn. Grafísk kenning notaði lárétt flakk þar sem allar myndirnar eru í sömu hæð en ekki í sömu breidd. Lárétt flakk hjálpar síðuna flæði vel.
Lárétt leiðin
Lárétt leiðin er sýning á vefsíðum sem nota lárétta hreyfingu. Grungy grafíkin er falleg og þessi síða er einstök eins langt og CSS galleríin fara.
Regla # 2: Notaðu lágmarksfjölda leturskilna
Of mörg letur bregðast venjulega við hvert annað og yfirbuga áhorfandann. Hver leturgerð hefur persónuleika og of margir persónur geta skapað röskun.
Til að nota í raun meira en bara nokkrar leturgerðir, þá verður hönnun að vera mjög texta-stilla og restin af hönnuninni þarf að vera tiltölulega rólegur. Hér eru nokkur dæmi um vefsvæði sem nota þessa tilfinningu fyrir átökum og röskun til að taka þátt í notandanum.
Tenglar LA
Tenglar LA notar margar leturgerðir í ólínulegu skipulagi til að skapa orku. Síðan er erfitt að lesa fljótt en dregur notandann inn. Það er líka athyglisvert að ekkert letursins er of skrautlegur; hvert orð er læsilegt og haldið hönnuninni skörpum og hreinum.
Geo Elements Design Studio
Notkun margvíslegra leturna gefur venjulega tilfinningu fyrir orku og óreiðu, en Geo Elements Design Studio Vefsíðan er mjög opin og hreinn. Hver leturgerð er gefin eigin rými þannig að áhorfandinn tengi ekki við annað letur. Ímynd himinsins í bakgrunni hjálpar til við að styrkja tilfinningu um hreinskilni.
Richard Stelmach
Ólíkt síðasta fordæmi, Richard Stelmach ýtir mismunandi letri hans saman. Hönnunin virkar vegna þess að aðeins eitt letur lítur ekki út fyrir hönd dregin og hinir tveir virka vel með myndinni. Handritaðir leturgerðir virka venjulega vel saman, jafnvel þegar það eru margar mismunandi leturlit.
Satsu
Satsu virðist hafa margar mismunandi leturgerðir en í raun hefur aðeins þrjú (ekki með sportnámsefnið). Með því að geyma allt vandlega, tengir Satsu ákveðnar textar við hvert annað, þó að textinn geti verið í mismunandi letri.
Heiti lógósins er í einum leturgerð og tveir undirtitlarnar eru með eigin leturgerð, en áhorfandinn hópar náttúrulega þessum þremur textaritum saman. Satsu er fær um að búa til orku án þess að yfirgnæfa síðuna með persónuleika.
Regla # 3: Ekki nota of margar litir
Óttinn við að fara of langt með hönnun er það sem skilur fagfólk frá nýliði og nýliði frá ógleymanlegri. The oblivious reyna að gera hönnun þeirra eins öfgafullt og mögulegt er, með orðum í eldi, blikkandi texta og eins mörg litir og mögulegt er.
Nýliði langar til að halda hönnuninni lúmskur og þægilegur á auga, en á endanum getur hönnun þeirra stundum lítt líflaus. Eftirfarandi augljósar hönnun eru af nokkrum sannum fagfólki sem eru að þrýsta á mörk.
Matt Mullenweg
Matt Mullenweg er fallega lituð hönnun lítur út eins og vatnsliti málverk (síða hefur verið uppfært síðan þessi grein var skrifuð). Öll liti í bakgrunni myndu grípa athygli allra.
Almennt, góð hönnun með tonn af litum mun hafa þessar liti í bakgrunni, með einfaldari stiku upp fyrir framan. Lestur texta er mjög erfitt þegar of margt er að gerast.
Travic Isaacs
Travis Isaacs hönnun hefur litríka lóðrétta halli í bakgrunni sem gerir hönnunin litrík um allt. Þessi vefsíða hefur björtu bleiku sem tengilinn lit, sem er frábært val fyrir hönnuði sem vilja búa til litríka áhrif.
James De Angelis
James De Angelis ' Vefsíðan sýnir að textinn getur verið litrík án þess að koma yfir eins og nýliði. Hönnunin er mjög vara, og tagline er vissulega gefinn miðstöð.
Regla # 4: Gerðu markmið þitt á vefsvæðinu augljóst
Eitthvað sem raunverulega verður crammed í eyrum ungra hönnuða er að hönnun ætti þegar í stað að segja áhorfendum hvað þeir eru að horfa á áður en þeir lesa hvaða texta sem er.
Vörumerki viðurkenning er mikilvægt fyrir stór fyrirtæki, en stundum þurfa minni krakkar að vera svolítið snjallari til að fá athygli áhorfandans. Halda aftur upplýsingar geta intrigue áhorfandann og "stríða" fólki inn í að vilja læra meira.
Að beita þessari tækni við vefhönnun getur mjög aukið þann tíma sem notendur eru á vefsvæðinu þínu.
Cetrotrees
Í flestum verðbréfasöfnum í dag kynnir sjálfstjórinn eða fyrirtækið sjálfkrafa sig og útskýrir verk sín. Cerotreees setur í staðinn nokkrar óljósar tenglar til vinstri og sýnishorn af vinnu sinni til hægri, en ekkert útskýrir hugmyndina eða manninn á bak við það.
Loftið af leyndardómi umhverfis svæðið laðar notandann að vera.
The Last Mixtape
The Last Mixtape er annar eigu sem sýnir vinnu sína og ekkert meira. Slík hönnun vekur tilfinningu um mikla traust. Þeir reyna aldrei að selja sig; þeir búast bara við að notandinn verði blásið í burtu og að biðja um samning.
Peter Pearson
Notkun skvetta skjár er góð leið til að hægja á hugsunarferlinu og hvetja þá til að grafa dýpra. Markmið skvettasíðunnar er yfirleitt að útskýra síðuna fljótt með myndum eða stuttum texta.
En í Peter Pearson er málið er markmið þess að vekja tilfinningu. Stóri himinninn og splattered text effect gera frábært starf til að vekja forvitni vegna þess að þetta virðist yfirleitt ekki saman. Þessi síða gerir einnig frábært starf við að halda áfram með tilfinninguna sem skapað er af skvettasíðunni í raunverulegt efni.
Hreyfingar hreyfingarnar og hreyfimyndir sem fylgja notandanum eru mjög árangursríkar.
Piepmatzel
Frábær leið til að komast í kring um tungumálamörkin er að nota ekki orð. Piepmatzel er CSS gallerí og fólk sem hefur séð CSS gallerí áður mun líklega viðurkenna það eins og einn strax.
Þeir sem hafa ekki getað verið nógu spenntir til að gefa nokkrar af smámyndirnar smelli í von um að reikna út mynstrið. Lítið magn af texta neðst á síðunni hjálpar við flokkun og er óþarfi.
Regla # 5: Navigation ætti að vera auðvelt að reikna út
Navigation ætti ekki að vera flöskuháls á vefsvæðinu. Notendur ættu að geta fundið það sem þeir vilja fljótt. Stundum getur hins vegar ósáttanlegt, en enga leiðsögn, hjálpað notendum að finna tengingu við síðuna og hvað það er að stuðla að.
Alvin Tang
Eins og getið er um í fyrri hluta er loftið af trausti miðlað þegar eignasöfn er ekki stafað af sjálfum sér. Þetta er raunin í Alvin Tang er ljósmyndasafn. Þegar fyrst kemur á síðuna viðurkennir notandinn ekki strax orðin sem þeir sjá sem tenglar.
Þessi óvissa ætti að hvetja þá til að kjósa um smá. Að flytja músina yfir orð kemur í ljós að það er örugglega hlekkur, og þegar þú smellir á það, er glæsilegt mynd fullt. Myndin mun tæla notendur til að halda áfram að vafra.
Til að sjá fleiri myndir þurfa notendur að smella á "Til baka" hnappinn í vafranum sínum (eitthvað sem flestir skilja að gera) og smelltu síðan á annan tengil. Það er engin hönd í hönnuninni og það virkar mjög vel. Þetta er ekki venjulega "glæsilegt hönnun" en það skilar nákvæmlega hvað það þarf að.
Kasulo
Kasulo s siglingar eru ekki hræðilega erfitt að reikna út, en meðaltal notandi getur ekki vita nákvæmlega hvað á að gera þegar hann kemur á síðuna. Eftir fyrstu smelli, þó verður allt augljóst.
Notandinn siglar eigendaskiptin í 3-D stíl og nýjustu hlutirnar birtast næst frá upphafi. Notkun músarhjólsins er enn skemmtilegra.
Marcio Kogan
Marcio Kogan er síða er annað dæmi um frábær siglingar sem ekki er augljóst. Leiðbeiningin "Dragðu mig" er erfitt að standast, og þegar notandinn gerir það, eru þeir á leiðinni til að sigla eignasöfnin. Músin yfir forsýningarnar eru smá smáatriði en mjög áhrifamikill.
Ceranco
Ef viðskiptavinur var að biðja hönnuður um að búa til síðuna sína í 3-D, eins og skotleikur í fyrstu persónu, myndu flestir hönnuðir hlæja að sjálfum sér, taka djúpt andann og útskýra síðan hægt hvers vegna það væri slæm hugmynd .
Þó að vefsvæðið fyrir Ceranco er ekki nákvæmlega 3-D skotleikur, það gæti auðveldlega verið ruglað fyrir einhvers konar Indie tölvuleiki. Síður eins og þetta eru frábærir í aðlaðandi notendum. Þó að langur hleðslutími og fátækur leitarvélaaðgerð gera þetta minna en tilvalið fyrir flest verkefni, þá er það örugglega þess virði.
Regla # 6: Notaðu mismunandi litir fyrir texta og bakgrunn
Þessi regla er kannski ekki skrifuð alls staðar en margir nýliðar eru svo hræddir við að gera texta ólæsilegt að þeir telji ekki að nota sömu grunnlit fyrir bæði bakgrunn og leturgerð. Þú getur fylgst með nokkrum einföldum aðferðum til að gera svipaða liti.
Linksys
The Linksys síða er snyrtilegur vegna þess að það hefur eitt blátt fyrir alla tengla sína, þrátt fyrir að bakgrunnsliturinn sé ýmissa tónum af bláu. Þó að hætta og kannski ekki mesta litavaldið, þá virkar það.
Brad Colbow
Brad Colbow er hönnun er svipuð og Linksys 'vegna bláu textans á bláum bakgrunni. Blár á bláum er erfitt að draga af fallega, sérstaklega með svo margar mismunandi blús á vefnum.
Powerset
Svo langt í þessum kafla höfum við séð aðeins bláa vefsíður, vegna þess að blár textinn er erfiðasti fyrir mannlegt auga að lesa og svo læsilegur blár gerð er alltaf áhrifamikill. Ef textareikningur virkar í bláu, mun það líklegast virka í hvaða lit sem er.
Powerset notar letterpress stíl fyrir letrið sitt til að búa til 3-D áhrif sem skilur í raun texta úr bakgrunni.
Listamaður í hönnun
Listamaður í hönnun Ekki aðeins hefur grænn texti á grænum bakgrunni og gult / beige texti á gulum bakgrunni en hefur texta beint ofan á mynd.
Þó að sumar stafi megi vera erfitt að lesa, þá eru orðin í heild læsileg. Þessi tegund af áhrifum ætti nánast alltaf að vera miðpunktur í hönnun.
Horacio Bella
Horacio Bella notar annan 3-D áhrif á eigu hans. Í þessu tilfelli virðist bréfin skjóta fram frekar en að vera innblásin. Án þessara áhrifa hefði læsileiki verið mjög minni. Önnur góð áhrif notuð hér er þétt kerning bókstafa, sem bætir enn frekar læsileika.
Regla # 7: Ekki setja hreyfingu í átt að innihaldi þínu
Alvarlega, ekki skjóta upp litla Flash auglýsingar rétt þar sem notandinn er að lesa. Sama gildir um þær könnunarkassar sem birtast þegar notandinn er í miðju setningu. Notendur njóta ekki að vera annars hugar þegar þeir eru hálfleiðir með setningu. Nema ...
Það er mjög erfitt að vera ekki hrifin af litlu kóngulóinu ABA 's staður. Hönnunin er hreinn, og þó að kóngulóið sé truflun, þá er það allt í lagi. Svo langt, þessi síða sem ég held er eina undantekningin frá reglunum.
Regla # 8: Haltu við Vefur Safe Skírnarfontur
Þó að texti andlit skipti tækni eru enn ung, þá eru þeir þegar að gera stórt skvetta. sIFR var fyrsti og nýlega Cufón og Typefasce.js hafa komið fram.
Diseñorama
Á Diseñorama website, rauða "Recientemente" textinn er valinn. Eitt galli er að ef notandinn mun ekki hlaða strax, mun notandinn sjá upphaflega látlaus letrið stuttlega.
Annar galli er að ef notandinn hefur annaðhvort JavaScript eða Flash óvirkt, myndu þeir aðeins sjá upprunalegu letrið. Allt er talið, það er samt frekar flott. Vonandi er það sýnishorn af því sem á að koma á næstu árum.
Cactuslab
Cactuslab notar einnig sIFR fyrir bláa undirhöfuðin (eins og "vetrarvinna"). Þó að sIFR sé flóknasta skírteinisútskiptatæknin, þá er hægt að afrita og klista texta og gefa það stóran kost á því að nota tvær aðrar aðferðir.
Regla # 9: Ekki hafa pláss / áfangasíðu
Margir hönnuðir hafa haft sömu gamla umræðu við viðskiptavini sína um hvers vegna skvetta er ekki góð hugmynd. Google hefur tilhneigingu til að staða slíkra síða lægra og hægja á notandanum frá því að fá efni sem þeir eru eftir. En þau geta verið ótrúlega falleg og hvetjandi ef þau eru rétt.
Gloss Postproduction
Tilgangur safnsýnisins sem birtist á skv. Síðu Gloss Postproduction Vefsíðan er að vekja tilfinningalega viðbrögð frá notandanum.
Við hverja heimsókn er handahófi mynd úr eigu hlaðin. Smellir á myndina færir það niður og setur það á sinn stað meðal annarra eigna bæklinganna á síðunni. Skalunar- og hreyfingaráhrifin veitir framhald og hjálpar til við að flytja tilfinningar notandans við afganginn af vinnu fyrirtækisins.
Issa London
Þegar síða er algjörlega lokið í Flash getur hleðsluborðið þjónað sem skvetta síðu. Þegar notandi sér hleðslustiku munu þeir annað hvort loka síðunni og fara einhvers staðar annars eða skipta yfir í annan flipa og fletta annars staðar á meðan þeir bíða.
Þegar blaðið er hlaðið er best að bíða eftir að notandinn komi aftur áður en hann byrjar. Í Issa London Málið er að hliðið sé fullkomið myndlíking til að segja að vefsvæðið sé tilbúið og notandi getur slegið inn.
Þegar notandinn smellir á hliðið opnast hliðið og ýmsar sýndarmyndir birtast. Notkun hliðsins á skvettasíðunni er frábær hönnun hugmynd vegna þess að við innkomu líður notandinn.
Regla # 10: Ekki nota töflur
Allir vefur hönnuður sem notar töflur í hönnun þeirra verður strax kallað nýliði af reynslu hönnuðum. Töflur sýna ekki það sama í öllum vöfrum, og þeir geta gert kóðann kleift að vera sóðalegur en að minnsta kosti muntu vita hvað þú ert að fá með þeim. Hér eru nokkur dæmi um hönnun sem innihalda töflur.
Þetta borð er svolítið erfitt að sjá en er þar inni á milli tveggja stólanna. Það er fallegt lítið hliðarborð en dapurlega leggur það ekki mikið í hönnun þessa síðu.
Töflur eru hátt í bakgrunni þessa hönnun á Vinna við leik , en þeir halda fartölvum starfsmanna og öðrum hlutum innan seilingar. Án þessara tafla myndi herbergið líða miklu þéttari og bakgrunnsmyndin myndi ekki hafa sömu áhrif.
Þrátt fyrir að þessi hönnun einkennist aðallega af stólum birtist gott lítið borð efst til hægri á smámyndinni. Lítur út eins og pottur situr á henni.
Eins og langt eins og hönnun með borðum er þetta ein besta. Með tveimur töflum sem eru í þessari Flash fjör, gefur hönnunin þeim mikla athygli. Þessi síða ætti að vera á lista allra hönnuða á frábærum hönnun sem notar töflur.
Brjóta reglurnar!
Brjóta reglurnar er allt í lagi þegar hönnun kallar á það. Margir af hönnunarvalinu sem farið var yfir hér myndi ekki taka tillit til meðalhönnuðarinnar. Þetta er það sem skilur mikla hönnuði frá meðaltali.
Þeir sem eru hugrakkur nóg til að fara gegn því sem þeir hafa verið kennt standa alltaf út.
Skrifað eingöngu fyrir WDD bt Eli Penner. Hann rekur eigin heimasíðu sína á SleepyHero.com
Brýtur þú einhverjar reglur í hönnunina þína? Hvers vegna eða hvers vegna ekki? Vinsamlegast deildu skoðunum þínum með okkur ...