Mga sample ng disenyo ng site

Talaan ng mga Nilalaman:

Mga sample ng disenyo ng site
Mga sample ng disenyo ng site
Anonim

Huwag na tayong pumunta sa mga numero at kalkulasyon, dahil imposibleng matukoy kung ilang site na ang umiiral sa Internet. Araw-araw, libu-libo, kung hindi man daan-daang libong mga site ang nabigo at ang mga bago ay lilitaw sa kanilang lugar. Ano ang dahilan ng mga pagkabigo? Bakit pumupunta ang mga tao sa site at agad itong iniiwan? Ang sagot ay simple at nasa harap ng iyong mga mata - ito ang disenyo ng site.

Epekto ng pang-akit

Sumasang-ayon, lahat ay may set ng ilang partikular na site na binibisita araw-araw. Sigurado ako na karamihan sa mga na-bookmark ay mga paboritong site na may mga pelikula, libro, balita, laro, atbp. Bakit, pagkatapos mahanap ang isang site, hindi namin sinusubukang maghanap ng isa pang katulad, na maaaring mas mabuti? Simple lang ang sagot! Ang mga site na na-bookmark namin ay maginhawang gamitin - ang mga naturang site ay karaniwang may maginhawang pag-aayos ng mga elemento, kategorya at isang kaaya-ayang disenyo na hindi nakakairita sa mata. Ito ang "epekto ng pang-akit", pagbisita nang isang beses sa isang maayos na dinisenyong site - iniiwan itoayoko na.

Tingnan natin ang halimbawa ng trading platform na dalawang site:

Mga halimbawang site
Mga halimbawang site

Walang alinlangan at hindi mapag-aalinlanganan, gustong isara ng site number 1 sa lalong madaling panahon, at ang site number 2, sa kabilang banda, ay gustong magtagal. Bakit ito nangyayari? Sa unang site, bilang karagdagan sa isang random na matatagpuan na produkto, mayroon ding isang oversaturation ng kulay, na hindi masasabi tungkol sa pangalawang site. Mayroong napakagandang kasabihan: "Nagkikita sila sa pamamagitan ng kanilang mga damit, ngunit nakikita sila sa pamamagitan ng kanilang isip", naaangkop din ito sa mga site, tanging sa halip na damit ay may disenyo, at sa halip na isip ay mayroong istraktura ng nabigasyon. Ang bisita, na pumasok sa site, ang unang bagay na nakikita niya ay ang scheme ng kulay, at pagkatapos lamang ay binibigyang pansin ang panloob na nabigasyon at istraktura ng site.

Color perception

Ang pangunahing panuntunan kapag pumipili ng mga kulay ay huwag lumampas ang luto. Minsan kahit na dalawa o tatlong tama ang napiling mga kulay ay higit pa sa sapat, isang matingkad na halimbawa nito ay ang site fb.ru. Maraming web designer ang gumagamit ng talahanayan ng "ligtas" na mga kulay upang idisenyo ang kanilang html site.

Talaan ng mga ligtas na kulay
Talaan ng mga ligtas na kulay

Tinatawag itong ligtas sa kadahilanang ang lahat ng mga kulay na ipinapakita dito ay ipapadala ng ganap na lahat ng mga user sa parehong paraan. Ang mga kulay na ito ay masasabing pamantayan kapag gumagawa ng disenyo sa site.

Color Compatibility

Ang bawat kulay ay may sariling "friendly" na kulay - ito ang kulay kung saan ito napupunta sa pinakamahusay. Hindi na kailangang muling likhain ang gulong at mag-eksperimento sa pagpili, ang lahat ay matagal nang naimbento at nasa pampublikong domain. Ang mga gulong ng kulay ay ginagamit upang pumili ng mga kulay. Itten. Ang larawan sa ibaba ay nagpapakita ng color wheel para sa pagtutugma ng 2 magkatugmang kulay.

Komplementaryong kumbinasyon ng kulay
Komplementaryong kumbinasyon ng kulay

T. ibig sabihin, ang kabaligtaran na kulay sa loob ng bilog ay itinuturing na pinakakatugma. Kung kailangan mong pumili ng 3 magkatugmang kulay, ginagamit din ang color wheel, tanging ang linya ng pag-aayos ng kulay ang babaguhin na.

Triad - isang kumbinasyon ng 3 kulay
Triad - isang kumbinasyon ng 3 kulay

At maraming ganoong mga lupon, maaari kang pumili ng higit pang magkakatugmang mga kulay. Halimbawa, apat.

Tetrad - isang kumbinasyon ng apat na kulay
Tetrad - isang kumbinasyon ng apat na kulay

Pagpili ng mga kulay sa ganitong paraan sa pamamagitan ng mga lupon ni Itten, ang pinakamataas na kumbinasyon ng mga kulay ay makakamit at ang isang magandang biswal na disenyo ng site ay makukuha. Higit pang mga bilog na may kulay ang makikita online. Lumihis tayo ng kaunti sa pangunahing paksa, dahil gusto kong ipaalam sa iyo na ang mga Itten color wheel na ito ay ginagamit kahit ng mga propesyonal na taga-disenyo mula sa mundo ng fashion, ibig sabihin, kapag lumilikha ng mga damit na taga-disenyo, ginagamit ang ganitong paraan ng pagtutugma ng kulay.

Internal na istraktura ng site

Kung higit pa o mas kaunti ang lahat ay naging malinaw sa kulay na pang-unawa, nananatili ang isa pang mahalagang tagapagpahiwatig bilang panloob na istraktura ng site o sa madaling salita - "kagamitan". Hindi sapat na piliin lamang ang mga tamang kulay sa site, tulad ng mga palabas sa pagsasanay - sa magandang disenyo ng site hindi ka makakarating sa malayo. Ang tamang istraktura ng site ay parang frame ng isang bahay, kung hindi ito naplano nang tama, magiging abala ang pag-navigate sa paligid nito.

Kailangang pag-isipan nang maaga ang lahat ng elemento ng nabigasyon, at mas mabuti pa - isulat. IstrukturaAng site ay dapat, una sa lahat, naiintindihan at maginhawa para sa mga bisita. Maraming mga site ang nawawalan ng kanilang mga bisita dahil lamang sa huli, kapag pumapasok sa site, hindi naiintindihan kung saan at kung ano ang matatagpuan. Hindi na kailangang mag-clutter up sa isang masa ng mga pindutan at mag-hang ng isang grupo ng mga functionality. Kailangan mong palaging tumingin sa mga mata ng bisita, kung ang gumagamit ay hindi nangangailangan ng ilang pag-andar, pagkatapos ay mas mahusay na alisin ito. Muli, ang isang maliwanag at tamang halimbawa ng disenyo ng website ay ang website ng Fb.ru, kung saan matatagpuan ang lahat ng mga seksyon sa paraang naiintindihan at maginhawa para sa bisita.

Ang pinakamalaking pagkakamali

Ayon sa karaniwang pagsusuri, naniniwala ang isang user na hindi mahanap ang kinakailangang seksyon o impormasyon sa site sa loob ng 15-30 segundo na ang seksyon o impormasyong ito ay wala sa site at umalis sa mapagkukunan. Sa karamihan ng mga kaso magpakailanman. Isang pangunahing halimbawa ng isang site na may kakila-kilabot na nabigasyon:

Masamang pag-navigate sa site
Masamang pag-navigate sa site

Sa tingin mo, posible bang mahanap ang kinakailangang impormasyon sa naturang mapagkukunan sa pamamagitan ng pagpunta hindi mula sa paghahanap, ngunit sa pangunahing pahina lamang? Sa tingin ko hindi. Muli, ang saturation ng kulay at ang kasaganaan ng hindi maintindihan na pag-navigate, na maglalagay sa sinumang bisita sa pagkahilo at pagkalito. Upang maiwasan ang mga ganitong pagkakamali, kinakailangang pangkatin ang lahat ng seksyon at ilagay ang mga ito sa isang hiwalay na menu ng nabigasyon, na mauunawaan ng bawat bisita.

Form ng pagpaparehistro

Isa pang mahalaga at nakakatakot na salik sa site ay ang registration form. Sinusubukan ng ilan na kolektahin ang halos data ng lola sa tuhod sa window ng pagpaparehistro.

Maling registration form
Maling registration form

Mga ganitong form sa pagpaparehistroay uso noon, nang ang Internet ay nagsimula lamang na lumitaw sa mga tahanan. Ngayon, nais ng gumagamit ng Internet na mahanap ang impormasyong kailangan niya sa lalong madaling panahon, at ang mga mahabang form ng pagpaparehistro, sa kabila ng mahusay na disenyo ng site, ay 99% na malamang na maitaboy. Ang perpektong form ng pagpaparehistro ayon sa mga pamantayan ngayon ay ipinapakita sa ibaba.

Tamang registration form
Tamang registration form

Kahit na ang impormasyong ito ay hindi sapat, kung gayon walang sinuman ang nag-abala na humiling nito sa ibang pagkakataon mula sa bisita, pagkatapos ng proseso ng pagpaparehistro. Ang diskarteng ito ay itinuturing na mas tapat at palakaibigan kaysa sa registration form, na mas katulad ng isang job application form.

Mga template ng website

Maraming site ang ginagawa na ngayon sa mga modernong CMS-system na nagbibigay ng libreng disenyo ng site. Ngunit ang libreng disenyo (mga template) ay hindi nagdadala ng anumang visual na disenyo, kaya kung ang may-ari ng site ay hindi subukang baguhin ito sa anumang paraan, pagkatapos ay ang naturang site ay mawawala sa paghahanap.

Nararapat ding banggitin ang buong Internet portal na nag-aalok na i-deploy ang iyong sariling website batay sa mga ito. Sa kasong ito, may mga kalamangan at kahinaan:

  • Ang una at marahil ang tanging plus ay ang pagiging simple. Ang frame ng site ay, bilang isang panuntunan, ay na-modelo sa naturang mga mapagkukunan ng mga nakaranasang taga-disenyo, ang disenyo ng site ay dinadala sa ilalim ng ilang mga kinakailangan at panuntunan. Ito ay nananatiling lamang upang punan ito ng pampakay na materyal at maghintay para sa mga unang bisita. Samakatuwid, ang pagiging simple at kaginhawaan ng naturang mga serbisyo ay umaakit sa mga nagsisimula. Ngunit kung ang site ay naka-set up para sa seryosong pag-unlad at kumpetisyon para satop-1 sa mga search engine, kung gayon mas mabuting tanggihan ang ganoong serbisyo.
  • Mula sa mga minus - ang ibinigay na mga template sa karamihan ng mga kaso ay hindi maaaring i-edit o baguhin, kailangan mong gamitin ang ibinigay sa lahat ng oras. Ang monotony ay ang pangunahing kawalan, na pinag-usapan natin sa pinakadulo simula, dahil ang bawat site ay dapat na indibidwal at naiiba sa hitsura mula sa iba. Maraming paghihigpit na imposibleng ilarawan, dahil ang bawat naturang serbisyo ay may kanya-kanyang sarili.

Huling bahagi

Lahat ng inilalarawan sa materyal na ito ay hindi nagpapanggap na isang "pangunahing pagtuturo", maaari mo at kahit na kailangan mong gawin ang lahat sa iyong sariling paraan - ito ay isang hanay lamang ng mga pinakakaraniwang tuntunin at pagkakamali. Ngunit ang pinakamahalagang punto, na inilarawan dito sa anyo ng pang-unawa ng kulay at ang panloob na istraktura ng site, ay ang pamantayan para sa pagdidisenyo ng site. Ang maling napiling mga kulay ay matatakot ang sinumang bisita na kakapasok lang sa site, at ang hindi marunong magbasa ng disenyo ng mga kategorya at mga elemento ng site ay hindi magpapahintulot sa kanya na mag-navigate at hanapin ang kinakailangang impormasyon. Ang mga puntong ito ay dapat bigyan ng pinakamataas na atensyon at, tulad ng nabanggit sa itaas, dapat mong palaging tumingin sa anumang site sa pamamagitan ng mga mata ng isang bisita, at hindi sa pamamagitan ng mga mata ng isang developer.

Inirerekumendang: