Borði og merkingar í vefhönnun
Stefna má fæðast svo hljótt og lúmskur að við sjáum sjaldan þau.
Og þegar þú skoðar hundrað vefsíður, sérðu oft mynstur sem þú myndir annars sakna. Eitt slíkt mynstur er tíð notkun merkja og borða.
Þessir litlu blómstra hafa orðið æ vinsælari. Þessi grein fjallar um þau tvö atriði vegna þess að þau eru notuð saman svo oft.
Þó að borðar séu sjálfskýringar, með merkjum merkir ég gervilitana sem hanga ofan af skjánum, eins og merki á boli.
Vefsíðurnar sem nota þessar þættir eru sannarlega framúrskarandi í gæðum. Að setja saman þetta glæsilega sýningartæki virtist vera ótrúlega auðvelt. Fáir straumar eru svona: Einn verður yfirleitt að vaða í gegnum margar lélegar dæmi til að finna bragðgóður sjálfur.
Afhverju notaðu þessar tætlur og merkingar?
Merkingar eru gagnlegar vegna þess að þeir vekja athygli notandans með því að búa til ímyndina um dýpt. Þeir ýta efni sínu út fyrir notandann. Merkingar eru einnig oft stíll með kýla, hvort sem er með 3-D áhrif eða feitletrun í andstæðum litum.
Þessir þættir gera merkið lykilatriði fyrir mikilvægar upplýsingar: lógó, flakk, símtöl til aðgerða. Við sjáum þetta í sýningunni hér fyrir neðan. Auðvitað, eins og alltaf, metið þarfir þínar áður en þú framkvæmir þennan þátt á eigin vefsvæði.
Borðið hefur sömu eiginleika, sem er örugglega ástæðan fyrir því að við finnum það og merkið saman svo oft: það vekur athygli og er frábær staður fyrir mikilvægar upplýsingar. Lögun borðarinnar setur það í sundur frá merkinu, þó; Þessir tveir örvar á endanum virðast benda á innihald innan, sem er beinlínis bein athygli notandans.
Fjölskylda af stílum
Önnur ástæða þessara tveggja þátta er oft að finna saman á vefsíðum er að þau eru bæði stafræn framsetning efnis. Ekki á óvart þá að mörg af vefsíðum hér að neðan eru með önnur efni sem tengjast efni, þar á meðal lúmskur sauma, áferð og aðrar lífrænar þættir.
Borðar
Letter Learner
Böndin snyrtilega ramma nafnið Letter Learner hér. Einnig er blaðið sett fram sem ein dálkur; Ribboned titill hvetur notandann til að hefja ferð sína efst og flæða niður þaðan.
Ribot
Ribot Borði er frekar lúmskur. The blómstra líf upp á síðunni, en summa upp fókus félagsins í tveggja stafa tagline. A fullkominn leið til að stilla væntingar, vegna þess að nafn fyrirtækisins segir okkur ekki hvað það gerir.
Alex Pierce
Með textanum er svo mikil á heimasíðunni Alex Pierce 'S eigu, það myndi taka frekar djörf þáttur til að jafnvægi það út. Í þessu tilviki er borðið gott starf við að setja upp hausinn. Ég elska líka hvernig brotið lag í miðju borði bætir áherslu á nafn hönnuðar.
Rockaholic!
Á frekar óvenjulegt Rockaholic! , borðið beinir athygli notandans niður, spilar vel í lóðrétta skrúfuna á vefsíðunni og hjálpar notandanum að grafa sig í efnið.
Paris Jones
Ljúffengur rauður á borði gerir nafn hljómsveitarinnar Paris Jones skjóta út hérna. Jafnvel þótt textahöndunin sé frekar lúmskur, tryggir djörf mynstur að þú sért það.
Blog en Bois
Á Blog en Bois , örvun borðarinnar er sérstaklega öflugur, aðallega vegna þess að andstæða er dökk á bak við gula. Mér finnst ég dreginn aftur í lógóið aftur og aftur. Það er vissulega öflug leið til að taka þátt í vörumerkinu í huga notandans.
HTML5 Boilerplate
The vinsæll website HTML5 Boilerplate notar borði til að vekja athygli okkar á mikilvægustu aðgerðunum á síðunni. Ég elska að línurnar gera starf sitt án þess að þurfa að segja "Sækja hér." Samsetningin á borðum og merkjum segir okkur að þetta sé hvar á að hlaða niður auðlindunum.
Cantilever Fish & Chips
Tilgangur borðarinnar er ekki svo skýrt Cantilever Fish & Chips . Nánar um að vera "opið 7 daga í viku" virðist vera tiltölulega minniháttar en væntanlega er það mikilvægt aðgreining fyrir þessa veitingastað.
Wells Riley
Wells Riley er fullkomið dæmi um tætlur í þjónustu fagurfræði. Borðið lítur vel út hér og verður áhersla á síðunni.
Dhiraj Singh Karki
Ég elska alltaf hönnun sem fer frá venju. Eignasafn UI hönnuður Dhiraj Singh Karki er bara svo vefsíða. Hér er borðið notað frekar snjallt og pakkar ekki næstum sömu sjónarmiðum og á öðrum vefsíðum. Það blandar rétt inn á síðuna og hefur enn næga stíl til að halda hönnuninni að líta of einföld.
Chipmunk
Chipmunk er gott dæmi um hversu vel borði getur unnið með lífrænum þáttum. Borðið í kringum aðalleiðsögnin passar fullkomlega með ríka myndunum hér fyrir neðan. Það heldur einnig leiðsögninni að glatast meðal öflugra listaverkanna.
Ryan M. Stryker
Enn og aftur sjáum við kraft á borði til að einblína á athygli. Miðlæg staðsetning og feitletrað andstæða tryggja að þú missir ekki af Ryan M. Stryker Nafn.
Tags
Ennea
Gefið að Ennea er föt vörumerki, það er ekki á óvart að merkið hér inniheldur lógóið og vörumerkið. Stundum virkar einföld nálgun best.
Philip Meissner Hönnun
Merkið inniheldur aðalleiðsögnina á Philip Meissner Hönnun . Venjulega myndi ég láta af sér þessa óvenjulega tengingu, en fyrirkomulagið og litirnir tryggja að tenglarnar séu frábærar auðvelt að finna.
Tinkering Monkey
Hvað gæti verið mikilvægara á e-verslun website og leiðbeina notendum að skrá sig út? Tinkering Monkey hefur fallegt lítið djörf merki til að hjálpa notendum að klára kaupin.
Parkbud
Með öllum snjallsímafyrirtækjunum þarna úti, þurfa hinir góðir að miðla lykilhlutdeildum sínum. Parkbud er ókeypis og djörf rauð merkið tryggir að þú þekkir það. Merkið er fallega haldið út úr veginum en alltaf sýnilegt úr augaðshorninu og minna þig á að þetta bragðgóður app er ókeypis.
Lense
Lense er fullkomið dæmi um merki ásamt textíláferð. Takið eftir fyrst textaðan denimbakgrunn; Einnig er skurður landamærin undir aðalleiðsögninni mjög textílbundin.
Coreymade
Þó smá smáatriði, elska ég virkilega hvernig handritið skrifar merkið Coreymade finnst meira eins og merki á skyrtu en venjulegt vefsíðamerki. Og gervi-3D áhrifin gerir merkið virkilega að skjóta fyrir áhorfandann.
Netastica
Merkið á Netastica er aðallega þarna til að líta vel út, þótt það sé ennþá að innihalda mikilvægar upplýsingar og tenglar gestir á heimasíðuna.
Ryan Havoc Taylor
Merkið er í slíkum sýnilegum stað á Ryan Havoc Taylor 'S website sem það þarf ekki mikið af andstæða til að standa út. Það virkar vel með flæði vefsíðunnar og sinnir hlutverki sínu áreynslulaust.
Borðar og merkingar
Í lokasýningu þessa sýningar, munum við líta á vefsíður sem nýta bæði borði og merki.
ClearSpan Media
Borðar og merkingar fara mjög vel saman, eins og sýnt er af ClearSpan Media . Hér finnur þú einnig efni með mynstur, sauma og lúmskur litabreytingar. Þau tvö merkja upp og borðið niður fyrir neðan virka sem áhugaverð hringur fyrir notandann.
Krichevtsova Alexandra
Þó Krichevtsova Alexandra Vefsíðan er frekar barebones í innihaldi, merkið og borðið bæta við auka lífinu við lykilatriði. Þú gætir notið þessa vefsíðu án þess þó að vita hvað manneskjan gerir.
Wes Bos
Flestar vefsíðurnar í þessu safni hafa frekar stórar tætlur. Ekki svo með Wes Bos . Hann er mun minni, góð áminning um að þeir þurfa ekki að ráða yfir hönnuninni til að sinna störfum sínum.
Niðurstaða
Með hliðsjón af gæðum vefsíðna í þessu safni settust enginn þessara hönnuða að því að byggja eitthvað "samkvæmt nýjustu tísku". Frekar stóðu þeir frammi fyrir þörfum, og þar af leiðandi komu fram áhrifarík sjónrænt tæki til að einbeita sér að athygli, miðla mikilvægum upplýsingum og leggja áherslu á mikilvægar aðgerðir.
Ef þú vilt nokkrar góðar CSS-undirstaða tætlur fyrir eigin vefsíðu þína, þá ertu á vefnum 3-D Ribbon Generator er handlagið tól fyrir starfið.