Mga Kasalukuyang Kalakaran sa Disenyo ng Web: Full-on Full Screen na mga Home Page

() translation by (you can also view the original English article)

Ang full screen splash ang isa sa pinakapamilyar na mga tularan sa web sa kasalukuyan. Ang iba ay gusto ito, ang iba ay ayaw ito, ngunit kahit anuman ang inyong mga nararamdaman tingnan natin ang ilang kapansin-pansing mga halimbawa at pag-usapan natin ang tungkol sa pinakamabibisang mga kaugalian habang nandito tayo.

Isang Tala sa Design Convergence

Ang terminong “design convergence” ay tumutukoy sa paraan na ang mga disenyo ay may kinagawiang maging magkatulad, nagtatagpo, sa paglipas ng panahon. Kamakailan @jongold nagtweet ng sumusunod:

alin sa dalawang posibleng mga website ang kasalukuyan mong idinidisenyo? pic.twitter.com/ZD0uRGTqqm
— gold (@jongold) Pebrero 2, 2016

Ang punto niya ay ang mga nagdidisenyo ay kulang sa pagkamalikhain sa mga panahon ngayon, sa halip inaabot ang pinakamalapit na katanggap-tanggap na kombensyon kapag nagdidisenyo ng mga web page. Ang full screen splash ay perpektong halimbawa nito. Tayo ba, bilang mga tagadisenyo, ay tumatahak sa madaling daan sa pamamagitan ng paggamit ng tularang ito? Ipinagwawalang-bahala ba natin ang pagkakataon upang itulak ang mga hangganan at magpabago? Ang web ba ay nananatiling nakatigil dahil sa katamaran?

O kaya, katulad ng sinabi ni Paul Boag, tayo ba ay bahagi lamang ng kung ano ang nahihinog sa eksena sa pagdidisenyo sa web. Tayo ba ay gumagawa ng kung ano ang gusto ng mga gumagamit; kung ano ang inaasahan nila, at sa gayon ginagawang mas madaling gamitin ang ating mga produkto?

“Kapag mas matagal na nasa paligid ang isang bagay mas nagiging pamantayan ang disensyo nito” – Paul Boag

Iiwan ko sa inyo ang pagdedesisyon. Pansamantala, tingnan muna natin ang ilang full-on full screen na mga disensyo ng web!

Itaas papuntang Ibaba, Kaliwa papuntang Kanan

Madaming mga full screen na website ay tiyak tungkol sa kanilang mga sukat, gamit ang JavaScript o CSS upang siguraduhing ang panimulang nakikitang seksyon ay ang eksaktong parehong sukat sa kasalukuyang browser window. Kapag ito ay tapos na, ang ilang pagpoposisyon ng CSS ay maaring maglagay ng mga element sa mga sukdulan, kahit ang window ay mapalitan ang sukat.

Pansamanatalang gamiting ang tularang ito upang maglagay ng pangalawang nabigasyon sa ilalim ng screen, na mayroong link ng nakaraan/susunod na isyu sa kaliwa at kanan. Ang panlikurang larawan ay gumagamit background-size: cover; sa maramihang figure element.

Ang Ideas ay full screen na WordPress na tema na may iba-ibang pagpipilian para sa mga slideshow, mga intro, mga homepage presentation at iba pa. Ito ay gumagamit ng gradient na nakalagay sa ilalim ng screen upang gawing nababasa ang titulo ng larawan at paglalarawan.

Sinilip ni James Tupper mula sa ilalim ng screen sa pamamagitan ng grapikong pagpoposisyon ng mukha niya na may background-position: center bottom;. Ang malaking dilaw na splash ay eleganteng ginawang kapareho sa taas ng viewport gamit ang tubong ng CSS height: 100vh;

Matuto ng higit pa tungkol sa dalawang CSS na pamamaraan na mga ito:

Ang pamumuhay na pahayagan na Lagom, mapanlikhang isip nina Elliot Jay at Samantha Stocks, ay gumamit ng homepage na pumuno sa screen sa kabuuan nito. Walang pag-iiskrol dito (maliban na lang kung tinitingnan sa maliit na screen). Ang Lagom ay gumamit ng ilalim na gilid upang tahanan ng mga social link nito.

Ang Soul ay Shopify na template, at ang isa sa mga layout nito ay fullscreen na slider na may nabigasyon na link na nakalagay sa kanan.

Pakiusap Patuloy na Mag-iskrol ↓

Ang panganib sa paggamit ng full screen bilang anyo ng pagpapakilala ay maaring hind napagtanto ng mga gumagamit na madaming matatagpuan sa pamamagitan ng pag-iiskrol. Ang ating sariling Envato home page ay magkakaila dito sa pamamagitan ng “scroll” na icon, nagmumungkahi na dapat kang sumilip sa ilalim ng tiklop.

Blandly piliin ang nanghihikayat na pababang nakaturong unahan ng pana upang sabihing “tumingin sa ibaba ditto”

Ang Kindeo home page ay gumagamit ng pamamaraang gusto ko; sinisigurado na ang maliit na piraso ng susunod na seksyon ay lagging nakikita sa ibaba ng viewport. Mayroon ding palaso na may “Tingnan ang mas marami pa” upang ang gumagamit hindi kailanman magdududa na mayroon ibang bagay na matatagpuan sa ilalim ng tiklop.

Ang Kilani ay kumuha ng mas medyo walang katiyakang pamamaraan sa pag-o-autoplay ng tunog; may walang tunog na button sa kanang ilalim ng screen. Ang kanilang paraan ng pagmumukahi upang mag-iskrol pa kayo ay kawili-wili – ang pag-ipit sa “Scroll Down” na direksyon sa mouse cursor:

Video

Damir Kotorić, dating UX na tagadisensyo sa[], ay sinimula ang Falcon Films bilang resulta ng kanyang pagmamahal sa panghihipawid na pagkuha ng larawan. Makatwiran lamang na ang video ay gumaganap ng malaking bahagi sa Falcon Films home page; tingnan ang panlikuran <video>, pagkatapos ay panoorin ang showreel para sa makatas na Melbourne drone na footage.

Muli, ang Damir ay gumamit ng tubong CSS na min-height: 100vh; upang makalikha ng full screen na bayaning seksyon.

Ang Landscape ay nakakamit ang kaparehong epekto; full screen, nag-o-autoplay na video na may karagdagang showreel, ngunit gumagamit ng JavaScript upang makuha ang full screen. Ang pag-o-autoplay ng mp4 na video na file mag-isa ay 1.3Mb, ngunit wala ng iba pa upang na babara sa bandwidth.

Istilo

Isang bagay na hindi pa natin binanggit ay kung ano ang maibibigay para sa atin ng full screen: ang canvas! Gamit ang puwang upang ipakilala ang produkto, ang kumpanya, ang ideya, ay ang buong punto ng tularan na ito. Ito ay nagtatanggal ng kalat sa natitirang nilalaman at nakapokus sa mensahe at personalidad.

Ang Landscape na halimbawa kanina ay gumagamit ng magandang kobalt na asul (isa sa mga dahilan kaya gusto koi to) at ang Voog ay gumagawa ng bagay na kapareho, na mukhang kahanga-hanga.

Ngunit palagi ko itong sinasabi – ang larawang ito ay duotone, kaya maaari mong makuha ang kasalukuyang 540Kb na madaling nahahati sa mababang sukat. Ang ilang bahagyang panlalabo, pagkatapos ibinababa ang kalidad ng JPG sa 50% ibinababa ito ng mga 50Kb nang hindi ikinokopormiso ang epekto.

Ang Bloomberg Businessweek Design Conference (pupunta ba kayo?) ay gumagamit ng abstract na typographic na layout upang gawin ang point. Design nitong nagtatagpo? Hindi ditto, mate.

Nabanggit ko ba kailanman ang Envato Tuts+ Translation Project? Maaari.. Gayon pa man, gusto ko ang temang demonstrasyong ito ng RTL na script–tingnan ang Proland, ang Bootstrap na ginawang lapagang pahina na template na may ilang full screen na layout na mga pagpipilian.

Nagkaroon na kayo ng inyong Pagpuno?

Ang full screen na home page ay tularan na malamang hindi natin makikitang mawawala sa mga darating na panahon. Ang bakit dapat ito? Ito ay epektibong paraan ng pagpapakilala sa mga gumagamit ng lath ng uri ng website. Alin ang ilan sa inyong mga paborito? Saan niyo pa nakitang ginagamit ang tularan na ginamit, para sa mas mabuti o mas malala? Ipaalam ninyo sa amin ang inyong mga komento!