10 vecí, ktoré návrhári tlače musia vedieť o dizajne obrazovky

Prechod od návrhu pre tlač k návrhu pre obrazovku, najmä pre web, môže byť frustrujúcim procesom. Zdá sa, že všetko by malo byť priame a jednoduché; máte návrhárske schopnosti, takže by sa mali prekladať iba slová typu „páči sa mi to“ ... však?

Bohužiaľ, zatiaľ čo veľmi platia základné aspekty dobrého dizajnu - veľkosť, farba , poloha, prázdne miesto, najlepšia typografická prax a tak ďalej - existuje veľa jedinečných vlastností, vďaka ktorým je prechod z tlače na obrazovku výzvou.

Tu zredukujeme primárne rozdiely medzi návrhom pre tlač a návrhom pre obrazovku na sedem všeobecných princípov. Obeďte tieto hlavy a čoskoro budete na ceste k pixelovej dokonalosti ...



01. Priestor je neobmedzený

Na rozdiel od tlače môže stránka na obrazovke pokračovať navždy

Na rozdiel od tlače môže stránka na obrazovke pokračovať navždy

Pri navrhovaní pre tlač ste obmedzený množstvom miesta na stránke, ktoré môžete použiť. To zvyčajne znamená, že musíte dostávať všetky svoje kľúčové správy v jedinom rozšírení, čo vedie k ťažšiemu marketingu, ktorý nie je vždy jemný a rafinovaný.

Na webe môžete použiť médium na zverejnenie vašich marketingových správ na prakticky neobmedzenom množstve priestoru, čo vám umožní vylepšiť váš prístup. Podstatné je, že automaticky nepredpokladajte, že rovnaká kópia bude rovnako dobre fungovať na obrazovke aj v tlači; rozpätia pozornosti sú na webe kratšie, ale svoju kópiu môžete rozložiť, aby ste boli rafinovanejší a jemnejší. Môžete tiež využiť výhodu analytiky na to, aby ste videli cestu, ktorú váš čitateľ vedie, a umožniť vám tak prispôsobiť a vylepšiť svoju kópiu.

02. Môžete použiť multimédiá

Zvážte začlenenie videa, zvuku a interaktivity do svojich návrhov

Zvážte začlenenie videa, zvuku a interaktivity do svojich návrhov

Jedným z najväčších rozdielov medzi dizajnom pre tlač a web je ten, že v tlači sa obmedzujete na slová a obrázky, zatiaľ čo na webe máte možnosť použiť rôzne médiá, ktoré vám pomôžu rozprávať príbeh, zaujať čitateľa a vyžadovať ich pozornosť. Inteligentné použitie interakcie videa, zvuku a používateľov vám môže pomôcť nadviazať vzťah s vašim návštevníkom (čitateľom), čo im spôsobí, že trávia viac času na vašom webe, trávia viac peňazí vo vašom online obchode alebo odporúčajú váš obsah viac ľuďom.

To neznamená, že by ste mali automaticky obopnúť všetky druhy médií, ktoré môžete vložiť do stránky; obsah akéhokoľvek druhu by mal pridávať hodnotu používateľskému zážitku a ponúkať mu zážitok alebo obsah, ktorý inde nenájdu. Ak dosiahnete správnu rovnováhu, posuniete sa nielen nad rámec toho, čo by ste mohli dosiahnuť v tlači, ale tiež si získate verných návštevníkov.

03. Spolupráca je kľúčová

Nikto sa nemôže špecializovať na všetko, takže spolupráca je chrbticou webu a dizajnu aplikácií

Nikto sa nemôže špecializovať na všetko, takže spolupráca je chrbticou webu a dizajnu aplikácií

Zatiaľ čo tlačoví dizajnéri bývajú dosť osamelí ľudia, na webe existuje oveľa viac spolupráce - a to z dobrého dôvodu: je ťažké mať všetky potrebné zručnosti na vytvorenie úplného webového zážitku. Možno budete dobrí v navrhovaní pútavých rozložení a písaní presných textov, ale bez možnosti kódovať PHP a JavaScript bude váš web statický a neinteligentný, alebo sa môže stať, že kód HTML môžete kódovať najlepším z nich, ale nie ste tak horúce pri navrhovaní ovládacích prvkov používateľského rozhrania.

Najúspešnejšie webové stránky kombinujú množstvo rôznych technológií, ktoré si vyžadujú rôznorodé schopnosti. Nebojte sa požiadať o pomoc odborníkov. Môže to byť hodnotná investícia a je súčasťou toho, čo robí z webu takú živú komunitu.

04. Jedna veľkosť sa nehodí všetkým

Dizajn pre plátno: dizajn novín

V tlači sú merania absolútne - pri dizajne obrazovky sú relatívne

Pri návrhu pre tlač sa dá všetko spoľahlivo merať v palcoch, obrázkoch a bodoch. Pri návrhu obrazoviek je základnou jednotkou merania pixel, ale pixel môže mať inú veľkosť medzi dvoma rôznymi obrazovkami. To je myšlienka, s ktorou sa mnohí dizajnéri tlače pri prechode potýkajú.

Nepredpokladajte, že pretože sa na vašom MacBooku so sietnicou zobrazuje vykreslenie 300px ako jeden palec, budú to robiť všetci ostatní. Najbežnejším prístupom je predpokladať, že 72 pixelov zaberie jeden palec, ale to je úplne nominálne - na obrazovke je všetko flexibilné.

05. Vaše návrhy nie sú vytesané do kameňa

Dizajn pre obrazovku: monotyp

Upustite od myšlienky, že vaše návrhy sú vytesané do kameňa

Ak chcete rozšíriť predchádzajúci bod, jednou z najväčších výziev je opustiť myšlienku, že váš dizajn je vytesaný do kameňa a má pevný vzhľad. Na webe rôzne prehliadače vykreslia váš obsah mierne odlišne. Vaše nastavenia môžu byť prepísané vašimi návštevníkmi a v závislosti na použitej veľkosti obrazovky a okna sa váš web môže vykresliť úplne odlišne (v súčasnosti sa osvedčuje osvedčený postup, ktorý by sa mal vykresľovať zodpovedajúcim spôsobom na veľkosť obrazovky / okna).

Nestrávte čas snahou o dosiahnutie perfektnej zhody pixelov medzi prehliadačmi - nikdy to nedosiahnete. Jednou zo silných stránok dizajnu je, že ide o tekuté médium.

ktorá z nasledujúcich možností je najlepším podporným dokumentom pre spornú faktúru

06. Užívateľská skúsenosť je všetko

Dizajn pre obrazovku: webová stránka BBC

Webové stránky nie sú ako brožúra - musíte sa oveľa viac zamyslieť nad tým, ako sa používatelia budú pohybovať v obsahu

Na rozdiel od tlače je web interaktívne médium, ktoré môže používateľovi poskytnúť okamžitú spätnú väzbu. Dizajn webových stránok sa ako taký oveľa viac podobá vytváraniu používateľských skúseností než navrhovanie brožúry. Musíte zvážiť, ako sa čitateľ môže pohybovať po vašom obsahu pri prechádzaní zo stránky na stránku.

Majte na pamäti, že webová stránka často koná aj ako vyslanec značky, takže musí vyjadrovať všetky hodnoty podnikania, ktoré predstavuje. Zamerajte sa na použiteľnosť, vďaka čomu je ľahké vyhľadať a používať interaktívne oblasti (ako sú navigačné lišty odkazov, galérie obrázkov a videá).

07. „Sklad“ je irelevantný

Dizajn pre obrazovku: záhyb

Rôzne veľkosti, tvary a orientácie obrazovky znamenajú, že koncept „záhybu“ nemá pre moderný webový dizajn žiadne uplatnenie: web navrhla spoločnosť Fiasco Design

V tlači vás vždy učia navrhovať tak, aby najdôležitejší obsah bol „nad záhybom stránky“ - časť novín, ktorá sa zobrazí, keď je papier zložený do stohu.

ako zviazať knihu šnúrkou

Na webe stále existuje záhyb; oblasť mimo okamžite viditeľnú časť obrazovky, ktorú musíte posunúť, aby ste ju videli; ale bohužiaľ ako webový dizajnér nemáte spôsob, ako zistiť, kde sa tento záhyb na obrazovke daného prehliadača nachádza.

Problém je v tom, že medzi zariadeniami existuje toľko rôznych rozlíšení obrazovky a používatelia môžu meniť veľkosť svojich okien prehliadača, takže to, čo vidíte ako záhyb na vašom počítači, sa takmer určite bude podstatne líšiť od toho, čo vidí všetci ostatní.

Namiesto toho, aby ste sa obávali, kde je záhyb, utiahnite sa z toho, že používatelia webu vedia rolovať, a tento koncept im celkom vyhovuje. Robiť ako Fiaskový dizajn a namiesto toho sa zamerajte na navrhovanie pútavého, atraktívneho a pútavého obsahu, ktorý povzbudzuje vašich návštevníkov, aby sa chceli posúvať a zobraziť viac!

08. Rozloženia sú plynulé, nie pevné

Dizajn pre obrazovku: plynulé rozloženie

Rozloženia v modernom webovom dizajne nie sú pevné a nemenné ako v tlači

Jednou z najťažších vecí, ktoré sa musia tlačoví dizajnéri naučiť, je to, že webové stránky môžu mať plynulé rozloženie. Namiesto predpísania oblastí s pevnou veľkosťou obsahu na webe je možné veľkosť jednotlivých textových polí, obrázkov a stĺpcov meniť podľa šírky okna prehliadača (výrezu). Tento rozdiel znamená, že sa musíte zbaviť myšlienky, že môžete úplne ovládať, ako sa bude váš návrh vykresľovať, má však aj výhody.

09. Znalosť základov nesmierne pomáha

Dizajn pre obrazovku: podmienky webdizajnu

Pochopenie základných prvkov webu vám pomôže pri jeho navrhovaní

Aj keď máte na napísanie kódu niekoho iného, ​​pochopenie toho, ako fungujú stavebné prvky webu, pomáha prekonať veľa frustrácií spojených s návrhom webových stránok.

Ak si nájdete čas, aby ste sa naučili HTML (základný stavebný kameň webu) a CSS (metóda, ktorou aplikujeme estetické atribúty na obsah), pochopíte obmedzenia aj príležitosti média. Náš článok Výcvik webdizajnu: najdôležitejšie online zdroje by vám malo pomôcť nájsť vhodný učebný zdroj, aby ste mohli začať.

10. Webová typografia je férová

Dizajn pre obrazovku: webové písma

Služby ako Typekit vám poskytujú prístup k širokej škále webových písiem

Až donedávna bol web obmedzený na veľmi malý výber „webových bezpečných“ typov písma, čo viedlo k veľkej homogenizácii webovej typografie. Našťastie ich pribúda webové písma dostupné prostredníctvom služieb ako napr Webové písma Google a TypeKit .

Tieto a podobné služby majú revolučný vplyv na typografiu, ktorú uvidíte na webe, ale stále je treba si uvedomiť, o čom je reč. Miera kontroly nad vaším typom je na obrazovke oveľa obmedzenejšia ako v tlači. Napríklad môžete stále nastaviť svoj počiatočný bod, ale nemáte nijakú kontrolu nad vyrovnaním párov. Ak chcete použiť ozdobné glyfy, musíte sa zašpiniť kódom, aby ste mohli ručne nahradiť tvary písmen alebo špecializované podskupinové písma.

Ďalšie čítanie

Web je plný fantastických zdrojov pre návrhárov a pokrýva všetko, čo si len môžete predstaviť. Vybrali sme niekoľko našich obľúbených webov, ktoré vám pomôžu začať s návrhom obrazovky.

časopis .net

Sesterský titul CreativeBloq, časopis .net pokrýva celú škálu možností návrhu a vývoja webových stránok. Rovnako ako fantastické výukové programy, časopis ponúka širokú škálu priemyselných komentárov a analýz, noviniek a funkcií.

Smashing Magazine

Časopis Smashing Magazine obsahuje množstvo článkov a tutoriálov o webdizajne a vývoji. Počnúc základnými stavebnými prvkami až po pokročilé kódovanie JavaScriptu.

Zoznam navyše

Tento online webový časopis sa už dlho považuje za priekopníka v definovaní a prijímaní osvedčených postupov pri navrhovaní obrazoviek. Široká škála článkov, vrátane rozsiahlych archívov, pokrýva všetko od používania písma po tipy a triky pri rozložení.

Slová : Sam Hampton-Smith

Páči sa ti to? Nezabudnite sa pozrieť na:

Ak máte ďalšie tipy, ktoré by ste nám mali povedať o navrhovaní pre obrazovku a nie o tlači, použite pole s poznámkami nižšie ...