Odpovědný webový design je populární a není to žádné tajemství. Právě to volají odborníci a do čeho přicházejí mnohé značky. Nejde jen o vytvoření webu připraveného pro mobilní telefony, ale o tom, aby byl váš web viditelný pro každou velikost prohlížeče, ať už prostřednictvím počítače, tabletu nebo smartphonu.

Choulostivá část o návrhu na odezvu vytváří místo, které vypadá dobře velké a malé. Musíte si hodně vzít v úvahu předtím, než otevřete svůj návrhový program a jdete do práce. Jedná se o další krok, který obvykle skončí tím, že stojí za to v hotovém výrobku. Je velmi zřejmé, když návrhář neplánuje reagovat; weby mají tendenci vypadat opravdu holé a nudné.

Je absolutně nezbytné, aby si designéři udržovali svou kreativitu na všech citlivých místech. S více lidmi, kteří používají tablety a smartphony, chcete si být jisti, že každý může zobrazit vaše stránky. Zde je několik tipů, které vám pomohou udržet kreativní a efektivní při navrhování pro citlivý web.

1. Využijte vynikající typografie

S citlivými stránkami musíte zvážit, co vypadá dobře na menší obrazovce. Dobrá typografie je základem jakéhokoliv dobrého webového designu, ale je to téměř nezbytné v citlivém návrhu webových stránek. Vzhledem k tomu, že velikost obrazovky klesá, většina prvků by se měla přeměnit a zmenšit nebo posunout. V první řadě by měla vaše typografie mít tuto schopnost.

Zadruhé byste měli používat text v různých hlavičkách a různých velikostech. Nyní obvykle používáme velmi velké nadpisy a hlavičky pro návrhy desek. Toto nemusí být úplně přerušeno, protože přemýšlíte o menších velikostech. Jen se ujistěte, že používáte plugin, jako je FitText, zmenšit velikost textu. To pomáhá.

Kovář používá mnoho různých typů písma a vytváří tak zajímavý vzhled. Oni také měnit velikosti těchto písem po celém webu. Co je zajímavé v režimu desktopu, je způsob, jakým jsou text a odstavce seřazeny v různých sloupcích. Při zmenšení okna se text sbalí do jednoho sloupce. Naštěstí zůstává text zachován stejným měřítkem a stylem.

Kovář

Smashing časopis má tendenci dělat totéž. Oni se zbaví pravé straně návrhu (reklamy) úplně, když je okno zmenšené. Avšak text obtéká uvnitř okna a styly, barvy a velikosti zůstávají stejné.

 SmashingMagazine

2. Používejte skvělé obrázky

Obrázky, jako typografie, jsou nesmírně důležité v jakémkoli návrhu webových stránek. Také jako typografie, v citlivých vzorů, když si prohlížíte web na menších obrazovkách, měly by se vaše obrázky také zdát menší nebo zmenšené. Existuje mnoho různých rozvržení a různých velikostí snímků, které lze použít v citlivém designu. Je důležité věnovat pozornost vybraným obrázkům a způsobu jejich použití, protože se bezpochyby změní. Vzhledem k tomu, že obrazovky se zvětšují nebo zmenšují, obrazy mění tvar a odhalují nebo ořezávají určité části obrazu.

V ideálním případě byste se měli ujistit, že vaše velké fotografické snímky nebudou mít na nich žádný grafický obsah, který může být oříznut při změně velikosti oken. Navíc, když vytváříte grafické obrázky, musíte se ujistit, že vytváříte obraz, který se rychle načítá a bude zobrazen na menší obrazovce. To je důvod, proč návrháři obejali plochý design. Je to jednodušší.

V aplikaci Pandiscio musíte nejdříve zaznamenat, jak vypadá větší obrázek záhlaví na pracovní ploše. Je plná, rozkládá se po stranách a je velmi kvalitní. Při zmenšení velikosti okna se obraz zmenšuje, změní se tvar (od obdélníkového na čtvercový) a ořízne se. Našli obrázky, které vypadají dobře, když se velikost obrazovky změní.

Pandiscio

KinHR je web, který používá spoustu různých grafických prvků i fotografií. Všimněte si, že při velkých a malých obrázcích záhlaví se zmenší, jako na webu Pandiscio. Nicméně, s grafickými prvky v těle, obrazy se zmenšují, ale zachovávají svůj tvar a nedosahují oříznutí.

KinHR

3. Nezapínejte na navigaci

Bod prázdný, pokud lidé nemají ponětí, jak se dostat kolem vašeho webu, pak prostě nebude. Navigace je při řešení citlivého designu obtížnější, protože jsme zvyklí vytvářet navigaci pro návrhy krajiny. Nyní musíme vytvořit navigaci, která se dá jednoduše zkondenzovat tak, aby odpovídala rozměrům portrétu.

Není to obrovský problém, když máte pár odkazů. Můžete buď snížit nebo zkrátit nabídku v horní části, nebo si pro diváky vytvořit rozbalovací nabídku. Velmi důležité je, jak zvládnete navigaci s více obsahem těžkých webových stránek.

Mashable má spoustu odkazů, protože má spoustu kategorií a ještě více článků. Kromě toho mají své vlastní firemní stránky, které musí být propojeny také. Mashable se rozhodne vytvořit v rozbalovací nabídce pro levnější stranu obrazovky pro menší prohlížeče.

Mashable

Monokle má pro svůj web dvě nejvyšší vrstvy rozsáhlé navigace. U menších prohlížečů si vytvořili skluzavku pro nejvyšší obsah a zkrátili druhou úroveň navigace.

Monokl

4. Bavte se používat

Když kliknete na odkazy online, pravděpodobně budete muset sedět a čekat, než se načínají věci, než uvidíte stránku. U telefonů je mimořádně nepříjemné, že musíte přesně nalézt další tlačítko, abyste se posunuli k většímu obsahu. Takováto věc není zábavná ani intuitivní.

Pozornost na detaily a zvýšení intuitivnosti vašeho webu činí váš web sdílenější. Přemýšlejte o tom, jaké je použití webu na libovolné velikosti prohlížeče. Přemýšlejte o tom, jaké webové stránky by měly dělat, když požadujete akci. Najděte tyto věci a opravte je tak, aby vaše stránky byly snadné, zábavné a intuitivní k použití. To také dělá to trochu zajímavější!

Bláto dělá jejich místo zajímavější tím, že věnuje pozornost jejich přechodům. Vytvářejí velmi elegantní pocit tím, že dovolují, aby mnoho z jejich prvků klouzalo dolů a stékalo, než aby se jen náhle pohybovalo a ukázalo se. To dělá svět rozdílu.  

Bláto

Neue Yorke používá hodně pohybu, když jde z položky portfolia na položku. Znovu vytváří pocit velmi špičkového a zvědaví diváky, kteří se brzy odhalí.

NeueYork

5. Mysli mimo krabici

Když vše ostatní selže, stačí být kreativní. Odpovědný návrh webových stránek nesmí být omezením, jak vytváříme webové stránky. Vždy je k dispozici tvořivost, ať už se jedná o kódování nebo návrh.

Společnost Enso vytvořila web, který vypadá, jako by neměl šanci reagovat. Všimněte si, jak změnili rozvržení trochu, když se velikost zmenší, ale zachovali si svou značku a kreativitu.

Enso

TBWA má stránky, které mají nějaký skvělý design. Ale mají také skvělé obrázky. A mají také skvělou typografii! Využili to zde, aby vytvořili velmi jedinečný a zajímavý webový design.

tbwa

Závěr

Udržování vaší tvořivosti v citlivém designu nebo v jakémkoli webovém designu je stejně jednoduché jako skicování vašeho konceptu a jeho revize, aby se udržely vaše cíle. Zábavná věc se stává mnohem jednodušší, když začnete plánovat, jak chcete, aby vaše webové stránky fungovaly a fungovaly, než byste s tím začali. Odpovědný návrh webových stránek nemusí být tento velký, všemohoucí úkol, který se designéři bojí. Je to docela jednoduché! Uchovávejte všechny předchozí věci, o kterých jsme diskutovali, a vytvořte stránky, které jsou právě mimo tento svět! Hodně štěstí s citlivým webovým designem.

Jaké tipy byste sdíleli, abyste udrželi citlivý design v interakci? Našli jste velmi kreativní reakci? Dejte nám vědět v komentářích.