Share
Ecranul de ecran complet este unul dintre cele mai cunoscute modele de pe web în acest moment. Unii îl iubesc, unii îl fac rău, dar, indiferent de sentimentele dvs., să aruncăm o privire la câteva exemple notabile și să vorbim despre cele mai bune practici în timp ce suntem la el.
Termenul "convergență de proiectare" se referă la modul în care desenele și modelele au un obicei de a deveni similare, convergent, peste orar. Recent @ jongold tweeted următoarele:
care dintre cele două site-uri posibile pe care le proiectezi în prezent? pic.twitter.com/ZD0uRGTqqm
- aur (@ jongold) 2 februarie 2016
Ideea lui a fost că designerii nu au creativitate în aceste zile, în schimb, ajungând la cea mai apropiată convenție acceptabilă atunci când proiectează pagini web. Stropirea ecranului complet este un exemplu perfect pentru aceasta. Suntem noi, ca designeri, luând calea ușoară folosind acest model? Ne ignorăm posibilitatea de a împinge granițele și de a inova? Web-ul este în picioare încă din cauza lenei?
Sau, așa cum afirmă Paul Boag, suntem doar parte din ceea ce este o scenă de web design matură? Construim ceea ce doresc utilizatorii; ceea ce se așteaptă, făcând astfel produsele noastre mai ușor de utilizat?
"Cu cat obiectul este mai lung, cu atat standardele sale sunt mai mult standardizate" - Paul Boag
Vă las să decideți. Între timp, să aruncăm o privire asupra unor modele web full-screen pe ecran complet!
Multe site-uri cu ecran complet sunt precise cu privire la dimensiunile lor, folosind JavaScript sau CSS pentru a vă asigura că secțiunea inițială vizibilă este exact aceeași dimensiune ca fereastra browserului curent. Odată ce acest lucru este făcut, unele poziționări CSS pot plasa elemente la extreme, chiar dacă fereastra este redimensionată.
Idei este o temă WordPress pe tot ecranul cu diverse opțiuni pentru prezentări de prezentare, intro, prezentări de pagină de pornire etc. Utilizează un gradient poziționat în partea de jos a ecranului pentru a face mai ușor de citit titlul și descrierea imaginii.
James Tupper pătrunde din fundul ecranului, plasându-și chipul cu grafică fundal-poziție: fund central;. Stropul galben imens este elegant făcut egal cu înălțimea ferestrei de vedere folosind CSS nativ înălțime: 100vh;.
Aflați mai multe despre aceste două tehnici CSS:
Lifestyle revista Lagom, creatia lui Elliot Jay si Samantha Stocks, foloseste o pagina care completeaza ecranul in intregime. Nu derulați aici (dacă nu este vizualizat pe un mic ecran). Lagom foloseste marginea de jos pentru a-si pastra legaturile sociale.
Soul este un șablon Shopify și unul dintre planurile sale este un cursor complet pe ecran cu legături de navigare poziționate în partea dreaptă.
Pericolul cu utilizarea ecranului complet ca formă de introducere este că utilizatorii nu își dau seama că mai sunt multe de găsit prin derulare. Pagina noastră principală Envato neagă acest lucru cu o pictogramă "scroll", sugerând că trebuie să aruncați o privire mai jos.
Indraznește opțiunea pentru îndrăzneala îndreptată în jos îndreptând săgețile pentru a spune "uite în jos aici".
Pagina de pornire Kindeo folosește o tehnică pe care o plac; asigurându-vă că o mică bucată din secțiunea următoare este întotdeauna vizibilă în partea inferioară a ferestrei de vizualizare. Există, de asemenea, o săgeată cu "Află mai multe", astfel încât utilizatorul nu are nicio îndoială că există ceva de găsit sub coloana.
Kilani au luat abordarea destul de dubioasă a sunetului de redare automată; există un buton mut în partea dreaptă jos a ecranului. Modul de a vă sugera să derulați mai departe este, de asemenea, interesant - fixarea unei instrucțiuni "Scroll Down" pe cursorul mouse-ului:
Damir Kotorić, fostul designer UX de la Envato, a început Falcon Films ca urmare a pasiunii sale pentru fotografierea aeriană. Este rezonabil faptul că videoclipul joacă un rol important în pagina de pornire Falcon Films; verificați fundalul , apoi urmăriți spectacolul pentru filmările suculente din Melbourne.
Din nou, Damir a folosit CSS nativ min-înălțime: 100vh; pentru a crea o secțiune de eroi pe ecran complet.
Peisajul realizează aproape același efect; un ecran complet, redarea automată a unui videoclip cu showreel suplimentar, dar care utilizează JavaScript pentru a obține ecranul complet. Fișierul video mp4 de auto-redare în sine este de 1.3Mb, dar nu este nimic altceva să vă înfundați lățimea de bandă.
Un lucru pe care nu l-am menționat încă este ceea ce ne oferă ecranul complet: o pânză! Folosind spațiul pentru a prezenta un produs, o companie, o idee, reprezintă întregul punct al acestui model. Îndepărtează aglomerația restului conținutului și se concentrează asupra mesajului și a personalității.
Exemplul peisajului din trecut folosește un albastru frumos de cobalt (unul dintre motivele pentru care îl iubesc) și Voog face ceva similar, care arată Grozav.
Totuși, spun totul - această imagine este duotonă, astfel încât să poată fi tăiat cu ușurință la dimensiunile actuale de 540Kb. Unele încețoșări ușoare, apoi reducerea calității în format JPG la 50%, o reduce până la 50Kb fără a compromite efectul.
Conferința Bloomberg Businessweek Design (te duci?) Folosește un aspect tipografic abstract pentru a-și face punctul de vedere. Convergența designului? Nu aici, amice.
Am menționat vreodată proiectul de traducere Envato Tuts +? Posibil ... Oricum, îmi place demonstrația temei RTL de la această temă - verificați Proland, un șablon de pagină de destinație creat de Bootstrap cu mai multe opțiuni pentru aspectul complet al ecranului.
Pagina de start a ecranului complet este un model pe care nu vom mai vedea în curând. Și de ce ar trebui? Este o modalitate eficientă de a introduce utilizatorii pe site-uri de orice fel. Care sunt unele dintre preferatele tale? Unde ai mai văzut acest model folosit, pentru bine sau pentru mai rău? Spuneți-ne în comentariile!
Accentsconagua