() translation by (you can also view the original English article)
Celostránkový obrázek je jedním z nejznámějších vzorů pro web v součastnosti. Někteří jej milují, někteří jsou nerozhodní, ale ať jsou pocity jakékoliv, pojďme se podívat na některé pozoruhodné příklady s osvědčenými postupy, zatímco jsme v tom.
Poznámka k Design konvergence
Termín "design konvergence" odkazuje na způsob designu, jak má ve zvyku stát se povědomí, sbližování, v čase. @jongold tweetl nedávno následující:
Kterou ze dvou možných webových stránek jste v současné době navrhovaly? pic.twitter.com/ZD0uRGTqqm
— gold (@jongold) February 2, 2016
Jeho idea byla, že návrháři chybí kreativita, místo toho sáhl po nejbližší přijatelné úmluvy při navrhování webových stránek. Celo obrazovkový snímek je dokonalým příkladem. My, jako návrháři, bereme snadnou cestu za pomocí tohoto vzoru? Ignoruje možnost posouvání hranic a inovace? Stojí web stále kvůli lenosti?
Nebo, jak Paul Boag konstatoval, jsme pouze část toho, co je zrání web design scény? Stavíme, co uživatelé chtějí; Co očekávají a tím usnadníme naše produkty k použít?
"Dále je objekt dokola více standardizován s design standarty"-Paul Boag
Nechám to na vašem rozhodnutí. Mezitím se pojďme podívat na některé celoobrázkové webdesigny!
Shora dolů, zleva doprava
Mnohé webové stránky přes celou obrazovku jsou přesné s jejich rozměry, ujistěte se, že počáteční viditelná část je o přesné velikosti jako aktuálního okna prohlížeče pomocí jazyka JavaScript nebo CSS. Jakmile je to hotovo, některé CSS umístění můžete umístit prvky na extrémy, i v případě, že se změní velikost okna.
Tento vzor použití provizorní sekundární navigace do spodní části obrazovky, s některými problém předchozí/následující odkazy levého a pravého. Obrázek na pozadí používá background-size: cover; na masivní figure prvek.
Ideas je celá obrazovka WordPress tématu s různými možnostmi pro prezentace, intra, domovskou stránku prezentace atd. Používá přechod umístěn v dolní části obrazovky čitelnost obrazu název a popis.
James Tupper vykukuje z dolní části obrazovky tím, že jeho tvář grafiku s background-position: center bottom;. Obrovský žlutý úvod je elegantně se rovná výška zobrazení pomocí nativního výšku CSS height: 100vh;.
Další informace o těchto dvou technikách CSS:
Lifestyle magazín Lagom, brainchild Elliot Jay a Samantha zásob, používá domovskou stránku, která vyplní obrazovku v plném rozsahu. Bez posouvání zde (Pokud při pohledu na malé obrazovce). Lagom používá dolního okraje k domu jeho sociální vazby.
Soul je šablona Shopify, a jedním z jeho rozložení je fullscreen jezdec s navigační odkazy umístěné na pravé straně.
Nechte prosím rolovat ↓
Nebezpečí se přes celou obrazovku, jako forma Úvod je, že uživatelé nemusí uvědomit, že je více nenalezneme posouvání. Náš velmi vlastní domovské stránky Envato to Neguje ikonou "scroll", což naznačuje, že byste se podívat pod řasy.
Blandly se rozhodnout pro povzbudivé dolů ukazující šipky říct, "Podívej se sem".
Kindeo Domovská stránka používá techniku, se mi líbí; zajištění, že malý kousek v další části je vždy zobrazen v dolní části okna. Existuje také šipka s "Najít další" tak, aby uživatel nikdy pochyb o tom, že existuje něco, co se nachází pod záhyb.
Kilani vzali poněkud pochybným přístup automatické přehrávání zvuku; existuje tlačítko Ztlumit na pravé dolní části obrazovky. Jejich způsob, jak říct, že posouvání dále je také zajímavé – určení "Posun dolů" instrukce na kurzoru myši:
Video
Damir Kotorić, bývalý UX designér na Envato, začal Falcon Films v důsledku jeho vášeň pro letecké snímkování. Je jen přirozené, že video hrají velkou roli v domovské stránce Falcon Films; Podívejte se na pozadí <video>, pak Sledujte showreel pro šťavnaté Melbourne dron záběry.</video>
Opět, Damir používá nativní CSS min-height: 100vh; Chcete-li vytvořit oddíl, hrdina celou obrazovku.
Landscape dosahuje skoro stejný účinek; celou obrazovku, automatické přehrávání videa s další showreel, ale používá JavaScript celou obrazovku. Automatické přehrávání mp4 video soubor, sama o sobě je 1,3 Mb, ale není nic jiného, ucpat vaši šířku pásma.
Styl
Jednu věc jsme se nezmínil ještě je, co celá obrazovka poskytuje nám: plátno! Využitím prostoru prezentovat produkt, firmu, myšlenku, je celý bod tohoto vzoru. Odstraňuje rušivé zbytku obsahu a zaměřuje se na zprávy a osobnost.
Příklad krajina z dřívějších používá krásná modrá kobalt, (jeden z důvodů, proč mám rád) a Voog dělá něco podobného, která vypadá skvěle.
Vždy říkám, že když – tento obrázek je duplex, takže může mít své současné 540Kb snadno štěpí ji na velikost. Některé mírné rozmazání, pak snížení kvality JPG na 50 % přivádí míč kolem 50 Kb bez ohrožení efekt vůbec.
Bloomberg Businessweek Design Conference (jdeš?) používá abstraktní typografické rozvržení, aby jeho bod. Návrh konvergence? Není tady, kámo.
Jsem nikdy zmínil Envato Tuts+ Translation Project? Možná... Každopádně jsem rád toto téma demonstrace RTL skript – check out Proland, šablony Bootstrap postavený přistání stránky s několika možností rozložení celé obrazovky.
Měli vaší výplň?
Celá obrazovka Domovské stránky je vzor u kterého není pravděpodobně že zmizí v dohledné době. A proč by měl? Je to účinný způsob seznámení uživatelů webové stránky všeho druhu. Jaké jsou některé z oblíbených? Kde jinde jste viděli tento vzor používá, pro lepší nebo horší? Dejte nám vědět v komentářích!
