praktickacviceni4 - Tumblr blog

praktickacviceni4 · 7 years ago

Text

ŘÍJEN 1 / UŽITÍ PRAVIDEL GRAFICKÉHO DESIGNU S OHLEDEM NA ELEKTRONICKÉ PUBLIKOVÁNÍ

NEJČASTĚJŠÍ ROZLIŠENÍ MONITORŮ

Rozlišení obrazovky počítačového monitoru či notebooku je jeden z parametrů, který je uváděn na čelním místě při výčtu vlastností. Je tento parametr skutečně tak důležitý a co vlastně ve skutečnosti rozlišení obrazovky znamená? Jak se tento údaj během let mění? A jaké je vlastně u počítačů dnes nejlepší rozlišení obrazovky?

Co je to rozlišení obrazovky?

Každý monitor, nebo chcete-li displej, obsahuje určitý počet zobrazovacích bodů, jejichž počet ovlivňuje množství informací, které se na obrazovku vejdou. Rozlišení monitoru se udává jako počet bodů v horizontální ose X, krát počet bodů vertikální osy Y. Rozměry monitoru se většinou udávají v pixelech, jež je nejmenší jednotkou digitální rastrové grafiky - 1 pixel/bod má průměr 0,3 mm. Tato velkost však není absolutní, mobilní telefony či tablety pracují s mnohem menší velikostí. Rozlišení si většinou uživatelé mohou nastavit podle svého uvážení a technických parametrů monitoru. Důležitý je také poměr obou údajů, protože definuje formát/tvar monitoru.

Jaká se v současnosti používají rozlišení?

Monitory se během let zvětšují a nabízejí neustále lepší obraz. S tím se logicky navyšuje i jejich rozlišení.

V současnosti je pro monitory:

nejběžnější rozlišení HD 1366 x 768 pixelů, které používá cca 35 % uživatelů či

Full HD 1920 × 1080 pixelů, jež využívá 18 % uživatelů.

Stále častěji se však objevují i monitory s rozlišením 2K (2560 × 1440 pixelů) nebo dokonce 4K (3840 × 2160 pixelů). iMac Pro využívá dokonce displej Retina 5K. Notebooky mají nejčastěji rozlišení HD 1366 x 768 pixelů, u vyšších modelů pak již zmíněné Full HD 1920 x 1080. Vysoká hustotu bodů na jeden palec je dnes hlavním ukazatelem vyspělosti displejů. U tabletů a mobilních telefonů, které používají systém Android, je vysoké rozlišení jednoznačné pozitivum, protože zjemňuje detaily, umožňuje lépe vykreslit fotky a nabízí ostřejší písmo. Notebooky se systémem Windows však mají, na rozdíl od notebooků Mac s operačním systémem iOS, se skutečně vysokým rozlišením značné problémy.

MacBook Pro s displejem Retina s rozlišením až 2880 × 1800 pixelů nabízí více než 5 milionů pixelů. Nejkvalitnější notebooky používají displeje Retina s podporou milionů barev

Notebooky Apple s operačním systémem iOS nemají s vysokým rozlišením žádné potíže, ba naopak. MacBook Air disponuje displejem s rozlišením 1440 x 900 pixelů, nový MacBook má 2304 x 1440 pixelů a MacBook Pro je osazen displeji Retina s rozlišením až 2880 × 1800 pixelů

RESPONZIVNÍ WEBDESIGN

Responzivní web design je pojem, se kterým roku 2010 přišel americký programátor Ethan Marcotte ve stejnojmenném článku na blogu A LIST Apart. Jedná se o způsob stylování HTML dokumentu, které zaručí, že zobrazení stránky bude optimalizováno pro všechny druhy nejrůznějších zařízení (mobily, notebooky, netbooky, tablety atd.). Historii takového designu lze nalézt již od roku 2001. Především díky vlastnosti Media Queries, která je (od přelomu let 2008 a 2009) zahrnuta ve specifikaci CSS3, lze rozpoznat vlastnosti zařízení, na kterém je stránka prohlížena a přizpůsobit tak samotnou stránku a její obsah.

Responzivní web design má tři základní úrovně: Flexibilní struktura, Flexibilní obrázky a Media Queries.

Flexibilní struktura

Flexibilní struktury se dosahuje pomocí procentních šířek. Jednotlivé šířky elementů tak nejsou zadávány v pixelech, nýbrž v procentech. Takto připravená struktura pak reaguje na různé šířky nejrůznějších zařízení. K výpočtu procentních šířek se používá jednoduchý vzorec:

procentuální šířka = (požadovaná šířka (v pixelech) / kontext (v pixelech)) *100

Kontext v tomto vzorci hraje roli obalového tagu. Pokud tedy v bloku, který je 600px široký, je potřeba vytvořit další blok, který má být například 287px široký, dosazení do vzorce bude vypadat takto:

47,83333333 = (287 / 600) *100

V rámci co nejpřesnějších šířek se při aplikaci techniky flexibilní struktury procenta nezaokrouhlují.

Flexibilní obrázky

Technika flexibilních obrázků zajistí, že obrázky se budou přizpůsobovat stejně tak, jako samotná struktura. Aby tohoto bylo dosaženo, neuvádí se šířka a výška obrázku uvnitř tagu <img>. Aby nedocházelo k přetékání, nastylují se všechny obrázky následujícím kódem:

img{ max-width: 100%; height: auto; }

Takto nastylované obrázky se dokáží přizpůsobit obrazovce jednotlivých zařízení.

Media Queries

Media Queries se považují za poslední úroveň responzivního web designu. Jsou to pravidla, díky kterým lze měnit stylování dokumentu v závislosti na šířce obrazovky zobrazovaného zařízení. Následující stylování (červené pozadí celého dokumentu) bude uplatněno pouze tehdy, pokud šířka prohlížeče na použitém zařízení bude v rozsahu od 660px do 780px.

UŽITEČNÉ ODKAZY

http://blog.iquest.cz/2017/11/14-tipu-pro-navrh-ikon-mobilnich.html

https://mobil.idnes.cz/rozliseni-displeje-uspora-energie-qhd-vs-full-hd-tovarni-nastaveni-1f8-/mob_tech.aspx?c=A170425_165424_mob_tech_vok

http://pixelfield.cz/blog/technologie-ve-vyvoji-mobilnich-aplikaci/

https://support.google.com/webmasters/answer/6101188?hl=cs

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

http://programujte.com/clanek/2013062900-nastroje-responzivniho-webdesignu/

http://jecas.cz/zjisteni-rozmeru

http://pixy.cz/pixynergia/2007/04/24/o-velikosti-pisma-v-prohlizecich-zvetsovani-a-zoomovani

https://www.creativebloq.com/web-design/names-every-designer-should-know-11135423

PROBLEMATIKA VIEWPORTŮ

https://www.vzhurudolu.cz/prirucka/viewport-mobily

https://www.zdrojak.cz/clanky/hardwarovy-css-pixel-responzivnim-designu/

https://www.vzhurudolu.cz/prirucka/css-pixel

Zalezi na velikosti monitoru a jeho rozlisovacich schopnostech. Napriklad: U patnáctipalcového monitoru při rozlišení 1024×768 představuje velikost jednoho pixelu sotva 0,3 mm

1 palec = 2,54 centimetrů

ABSOLUTNÍ JEDNOTKY

Jazyk CSS definuje šest absolutních jednotek. Jejich přehled včetně převodních vztahů:

inpalce 1 in = 2,54 cm

pxpixely 1 px = 1/96 in = 0.01041667 in

ptbody1 pt = 1/72 in

pcpicas1 pc = 12 pt

1px = 0,0264583333333333 cm

@media (max-width: 780px) and (min-width: 660px){ body{ background-color: red; } }

0 notes

praktickacviceni4 · 7 years ago

Text

BŘEZEN / UŽITÍ INTERAKTIVNÍCH PRVKŮ VE WEBDESIGNU, ANIMACE A VIDEO

UKÁZKY

PARALLAX WEBSITE

http://www.beargrylls.com/

http://toyfight.co/who/

https://www.hellomonday.com/

http://bad.diesel.com/

http://myriad.space/

http://antonandirene.com/

https://www.wokine.com/

https://lunargravity.be/

https://parall.ax/

http://www.toinos.com/

http://www.kabu-kitamura.com/colon/en/

https://bashooka.com/inspiration/40-parallax-web-designs-2017/

https://www.hpmagicwords.com.br/

https://www.papazian.gr/

http://www.henge07.com/

MOBILE PHONE ART

http://phonearts.net/

http://martinfryc.eu/vystavy/vernisaz-phone-art-2017/

https://studioijeoma.com/

0 notes

praktickacviceni4 · 7 years ago

Text

LISTOPAD / COPYWRITING A TYPOGRAFIE NA WEBU

Jak začít psát texty, které fungují? Jak začít s tajuplnou disciplínou zvanou copywriting? Prozkoumejte našich sedm bodů zkoumajících, proč je to vše trochu jinak, než si mnozí myslí.

1. Copywriting jste se ve škole neučili

Píšu, články, knížky, weby, tady je shrnutí několika pravidel.

Psaní je mnohem těžší, než si myslíte.

Že to zní nudně? A proč je to pravidlo pravidel? Protože všichni se učili psát ve škole. Tedy všichni si myslí, že umí psát. Jenže to tak není – a psaní jako takové je nesporně nejpodceňovanější ze všech kreativních disciplín. Třeba: Je snadné poznat, že se se vám moc nedaří pořídit hezké fotky – a jdete na fotokurz. Víte, že neumíte navrhovat weby, a tedy jste nadšeni z návrhu zadaného grafikovi.

Avšak poznat, že moc neumíte psát, je mnohem těžší – a chcete-li vstoupit do světa copywritingu, bez kruté sebereflexe to prostě nepůjde.

2. Copywriting se stále mění

Lidé živící se psaním (např. novináři) dosti často pojem copywriting nemají rádi. Jednak jim přijde nějaký záhadný, druhak se špatně vyslovuje a píše – skoro bych se vsadil, že patří k nejkomolenějším slovům na světě – web se hemží slovy jako copywritting, copyriting, nebo – můj oblíbený – copyrighting!

Definice mě moc nebaví, ale obecně lze říci, že copywriting bývá popisován jako kategorie psaní v reklamně a marketingu. Je to dle mého definice dost nepřesná, už jen proto, že s rozvojem obsahového marketingu se hranice těchto slov hodně rychle posouvají a mění. Ale to je vážně jedno: klíčové je zkrátka konstatovat, že copywriting prostě není a nemůže být obyčejné psaní.

3. Copywriting je myšlení, ne psaní

Jedním z nejhůře zlomitelných zlozvyků jakéhokoliv psaní je domněnka, že vše jest věcí múzy, kreativity, košatosti, brilantních spojení, prostě tzv. literárního střeva. Není, ba naopak, podobné návaly poetismu vždy vedou ke špatným koncům. Psaní v marketingu a PR je především záležitostí myšlení – tedy vymyšlení toho, o čem onen text bude, kam bude směřovat a co vyvolá – jak se pak namíchají konkrétní písmenka, to už je to nejjednodušší.

Vysvětlím na klasickém příkladu: je úplně jedno, JAK napíšete tiskovou zprávu, pokud nevymyslíte O ČEM by měla být, aby někoho zaujala. Jinými slovy: 99 procent tiskových zpráv, co cirkulují kolem nás, nemá sebemenší šanci dostat se do médií, protože autor jen psal, ale nemyslel. Tak jako u velkých románů platí tedy i pro malé kousky textu vzešlé ze skvělého copywritingu, že se za nimi skrývá mnoho myšlenek, nápadů, pokusů a omylů.

4. Copywriting vyžaduje další disciplíny

Dobrý copywriting nedokáže nikdy žít sám o sobě. V textech reklamních je jeho nedílnou součástí špičková práce grafika, v textech mířících na web nedokáže žít bez podpory mnoha dalších disciplín. Ve webdesignu nebudou písmenka dobře fungovat bez poznatků z oboru UX (User Experience), při vytváření obsahových strategií je základním úkolem kreativního týmu popasovat se s tím, aby obsah měl šanci opravdu být vidět ve výsledcích vyhledávání a měl šanci dobře fungovat na sociálních sítích.

Autoři blogů, kteří se probouzejí a usínají s myšlenkami na SEO, dokáží rychlostí blesku budovat zástupy svých čtenářů. A mimochodem: požadavky na univerzální vojáky v kreativních oborech (typu: office manager) už dnes musí obnášet poměrně pokročilé znalosti – například schopnost pracovat s WordPressem, Google Analytics atp.

Že to vše už dávno víte? Skvělé, ale věřte, že je stále hodně adeptů copywritingu, kteří nad podobnými cizokrajnými slovy mávají rukou a říkají “jo chlapče, o SEO mi nic neříkej, hlavně, že to napíšu hezky poeticky”. Je to chyba vskutku fatální – psaní jako takové, poetické či ne, už dnes vlastně nemá moc smysl. Howgh.

5. Copywriting musí zkoumat, co lidé chtějí číst

Velmi rozšířený omyl o podstatě psaní na web zní: “Musíme vymyslet něco zajímavého, šťavnatého, až třeba bulvárního, protože to pak přece lidé budou číst, sdílet, hurá!”

Jenže, toto řešení už dávno nefunguje. Případně funguje, ale jen v krátkodobém horizontu a je tedy lepší se mu vyhýbat.

Naproti tomu ta zcela zásadní myšlenka, kterou si musí každý copywriter neustále opakovat, zní: Musím zjistit, co lidé hledají, a podle toho psát. Jinými slovy: první krokem při psaní na web musí být úvaha: Píšu o tématu, které někoho zajímá? Hledají opravdu lidé to, o čem chci psát? A jak bych tedy měl psát, aby to někdo našel?

Ano, dostáváme se tím do oblasti online marketingu a SEO (optimalizace pro vyhledavače), ale o těch přece už víme, že jsou nezastupitelnými přáteli každého šikovného blogera.

Jste zmatení? Toto “psaní na webovou objednávku” má mnoho podob. Ta nejzákladnější se dá odhadnout selským rozumem. Pokud napíšete text “Můj oblíbený recept na fazolovou polévku”, děláte patrně dobře, protože selský rozum napovídá: lidé budou do vyhledávacího řádku v googlu psát “fazolová polévka recept” nebo něco podobného. Chybu uděláte, pokud do titulku (který vyhledavačům silně napovíd, o čem celý text je) dáte něco “poetického”, např. “Prozradím vám, jak na luštěninovou superlahůdku”. Zní to možná zajímavě, ale nikdy to nikdo nenajde. Prostě to nepište, stejně to nikdo číst nebude.

6. Copywriting začíná u analýzy klíčových slov

Pokud vás minulý odstavec vyděsil, vězte, že to hlavní nás teprve čeká. On ten selských rozum je totiž většinou hodně špatný rádce. Já, například, jsem si byl mnoho let jist, že přece na webu nikdo nehledá divná slova jako “copywriting” – vždyť tomu přece říkáme “psaní”, a tak to musí hledat i lidé!

Jenže ouha, toto slovo, o němž se tu dnes bavíme, hledá podle statistik zhruba čtyřikrát více lidí než ono krásné a romantické slovo “psaní”.

Jak jsem na to přišel? Inu, provedl jsem si velmi zhruba cosi, bez čeho už dnes copywriter nemůže žít, tzv. analýzu klíčových slov. Nechci zde jít do detailů, ale podstata je prostá: vyhledejte různé webové nástroje, včetně přímo nástrojů firem Google i Seznam, nabízí orientační statistiky toho, co kdo hledá.

A copywriter zkrátka často píše tak, aby pokryl poptávku hledajících.

Mimochodem, tu fazolovou polévku hledá na googlu a seznamu každý měsíc asi 7000 lidí, luštěninovou superlahůdku nula, jak asi tušíte…

7. Copywriting je zbraň (pokud je perfektní)

Špatná zpráva zní: lidé pracující s textem nemají na růžích ustláno, nikdo si špičkového psaní moc neváží (protože ho nepozná), skoro nikdo za něj není ochoten rozumně zaplatit (“to si to raději napíšu sám!”), a obecně proto radím: psaním se opravdu nejspíš neuživíte. A teď ta zpráva dobrá: psaní je opravdu mocná zbraň, musí to však být psaní špičkové, skvělé, smysluplné, dobře promyšlené a tvrdá pravidla online světa ctící.

Nadsázka a prázdná fráze říkáte? Ani v nejmenším! Začněte něco-cokoliv hledat na internetu – a znovu si při tom uvědomte, v jak obrovském moři textového balastu plaveme. A jak vděční budete za každý ostrůvek skvěle napsaného článku.

Pak mi uvěřte ještě jedno: Google a další vyhledávače investují miliardy dolarů do postupů, aby právě tyto dobré texty odhalily a vytáhly výš k předním pozicím ve vyhledávání.

Pokud jste například došli v tomto textu až sem, patrně jsme mu pomohli v cestě nahoru – ano, google z toho usoudí, že tento text asi nebude úplně blbý. A pokud takových čtenářů bude víc, text bude dále stoupat…

Zkrátka: copywriting je fantastické dobrodružství, tedy se do něj s gustem pusťte!

TYPOGRAFIE NA WEBU

Kvalita a atraktivita webu stojí a padá na obsahu a designu. A v těchto zásadních vlastnostech a parametrech sehrává velmi významnou roli i styl písma neboli font na webu, který ovlivňuje čitelnost textů i celkový vzhled stránek. Vybrat ten nejlepší tak může být docela oříšek. Máme tu pro vás pět tipů, které vám ho pomohou rozlousknout.

Ještě než se vrhneme na konkrétní rady, podívejme se na trochu teorie. Co tedy termín font označuje? Popisuje písmo určité velikosti a řezu. Řez udává, do jaké skupiny fontů dané písmo patří (např. Tahoma, Times New Roman, Arial a další), případně jak je zvýrazněno (např. kurzíva či podtržení). A nyní už si přečtěte avizovaná doporučení.

1. Font na webu jako nezbytný dílek skládačky

Font se v kombinaci s dalšími vlastnostmi webu podílí na utváření dojmu u návštěvníků. A proto by měl přesně korespondovat se stylem stránek. Nejde však jen o design, zde se o slovo hlásí celkový tón komunikace, který používáte k oslovování uživatelů a potenciálních zákazníků, a dále váš obor, resp. zaměření.

Jestliže např. provozujete restauraci s elegantním a honosným interiérem, kde podáváte vytříbené pokrmy s odkazem na prvorepublikovou kuchyni, vyhněte se ultra moderním fontům s futuristickými detaily. A takto bychom mohli v příkladech pokračovat dále.

Při vytváření webu byste měli ve všech fázích myslet na své publikum, takže i při hledání ideálního fontu. Jiné písmo se zkrátka hodí pro lifestylový magazín určený náctiletým (kteří určitě uvítají něco nekonvenčního), jiné zase pro prezentaci advokátní kanceláře (kde je potřeba zachovat formálnost). Opět zde tedy platí doporučení z prvního bodu, že svůj výběr nesmíte odvíjet od toho, co se líbí vám, ale na základě toho, co bude nejlepší pro návštěvníky.

2. Čitelnost na prvním místě

Originální a neotřelý tvar, sklon a nejrůznější detaily mohou sice z písma dělat efektní doplněk pro vaše webovky, ale vždy si dobře ověřte, že zamýšlený font bude na webu bez problémů čitelný. Ptejte se známých nebo na specializovaných fórech, shánějte nezávislé názory. Právě subjektivita je při tvorbě webových stránek jedním z vašich největších nepřátel.

Požadavek na maximální čitelnost je důležitý pro snadné předávání informací, které mají určitým způsobem působit na uživatele. A když pro něj bude obtížné text přečíst, nezachrání to ani podstata sdělení. Jednoduše z takového webu odejde. Font také nesmí unavovat oko, musí ho přirozeně vést z řádku na řádek.

Na webové stránky zvolte raději čitelný než bohatě zdobený font

3. Patkové vs. bezpatkové

A dostáváme se k další zásadní otázce – zvolit na webu patkové, nebo bezpatkové písmo? Tímto přívlastkem se vyjadřuje, zda má zakončení v podobě „patek“, drobných čárek, co protahují a zdobí linii písmena. Když patky nemá, je na pohled jednodušší a minimalistické. Opět by volba měla vycházet z celé povahy webu.

Obvykle se bezpatkové fonty používají všude tam, kde je předpoklad většího množství textu. Díky absenci patek je dobře čitelný i v malých velikostech. Trendy poslední doby tento druh vyzdvihují, protože svým nekomplikovaným provedením naplňuje známé heslo „v jednoduchosti je síla“.

Patkové písmo působí o něco „preciznějším“ dojmem a přisuzuje se mu lepší schopnost vedení oka. Není ale tolik vhodné právě pro menší velikosti. Nejlépe se proto osvědčí u kratších textových bloků a příspěvků, a to ve větších rozměrech.

Tip: Pokud se nebudete moci rozhodnout, jaký typ písma v rámci tohoto dělení zvolit, zaměřte se spíše na velikost a použité řádkování. Aktuálně se moderní webdesign soustředí především na zvětšování textů a zmírňování hustoty s cílem zajistit co největší přehlednost a čitelnost. Patky proto nemusí být až tak významné.

4. Pozor na divoké kombinace

Každý font je výjimečný, výběr toho jednoho je proto hodně složitý. Určitě vás oslovuje hned několik druhů, a z toho důvodu koketujete s myšlenkou použít je na webu všechny. Některé třeba pro homepage, jiné pro menu a další zase pro blog, kontakty či FAQ. V takovém případě pamatujte na pořekadlo „méně je více“.

Pokud chcete mít na stránkách různé fonty, nepouštějte se do příliš divoké kombinace a nevyužívejte více jak 3 typy. A spíše než na rozlišení dle jednotlivých sekcí se soustřeďte na součásti každé stránky. To znamená, že jedním fontem budete psát titulky a dalším zbylý text. A třetí zvolené písmo poslouží trochu okrajově např. do informačních bublin.

Varování před překombinováním platí i pro barvy. Určitě upusťte od omalovánek.Působí neprofesionálním a kýčovitým dojmem. Písmo musí zapadat do barevného schématu, je jeho pomyslnou třešničkou na dortu. Když bude zkažená, ani sebelepší korpus špatný dojem ze závěrečné nepovedené tečky nepřekoná.

Vždy se v otázce barev soustřeďte na kontrast. Písmo musí na pozadí vyniknout, nesmí s ním splývat. Tradičně se používá černé na bílém, nicméně svou kreativitu rozhodně nemusíte omezovat tímto standardem. Stejného efektu docílíte i s tmavými a světlými tóny obecně.

5. Nezapomeňte na telefony a tablety

Stále větší množství uživatelů přichází na weby z mobilních zařízení. Myslete na to a zvolte font, který vypadá skvěle jak na 24palcovém monitoru, tak na 5palcovém displeji telefonu. Proto zde musíme zopakovat jednu z hlavních náležitostí moderních webových stránek – dokonale responzivní design. Kromě přizpůsobení designových prvků zahrnuje právě i písmo.

Ukázky

https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html

https://fonts.google.com/?subset=latin-ext

https://www.designportal.cz/pismo-fonty-zdarma/

http://www.adtypo.com/letterings/

https://www.briefcasetype.com/fonts/sans/release-date

https://www.myfonts.com/foundry/Carnoky_Type/

http://www.dizajndesign.sk/en/blog-free-demo-fonts-27

https://unie-grafickeho-designu.cz/jak-si-poridit-legalne-fonty/#.W1m9ItIzbIU

http://objevit.cz/7-krasnych-ceskych-fontu-ktere-jsou-zdarma-t37037

0 notes

praktickacviceni4 · 7 years ago

Text

ŘÍJEN 2 / UŽITÍ PRAVIDEL GRAFICKÉHO DESIGNU S OHLEDEM NA ELEKTRONICKÉ PUBLIKOVÁNÍ

MŘÍŽKA, MODUL, GIRD

Mřížka neboli grid je struktura rovné (vertikální, horizontální, úhlové) nebo zakřivené vodící čáry při vytvářené obsahu. Mřížka, je prvek, který usnadňuje rozhodování při uspořádání nebo umístění obrázků, textu, grafických znaků do otevřené plochy publikace. Tato mřížka napomáhá k lepší orientaci a čitelnosti publikace. Je jakýmsi systémem, vodítkem, do kterého usazujeme objekty, texty a obrázky ve stejném či podobném principu. Zachovává po celou dobu publikace jednotný řád ve čtení textů a usnadňuje tímto čtenáři orientaci. V celé publikaci na čtenáře působí uklidňujícím a dobře čitelným dojmem.

Mřížka, jako taková, se rozděluje do dvou kategorií. Do kategorie symetrické mřížky, která je jakousi statickou variantou mřížky, která má zrcadlo sazby levé stránky publikace stejnou, jako její pravá část.

Naopak od druhé – mřížky asymetrické, která má stejný layout na levé i pravé straně, ale využívá jednoho užšího sloupce. Pro příkladné popisky, poznámky, ikony nebo další grafické prvky.

Jedním z prvních teoretiků, který se věnoval rozvržení plochy jakéhokoli formátu, byl německý typograf Jan Tschichold, na něhož navázali další a další designéři, kteří se zařazovali do tzv. švýcarského stylu. Jedněmi z nich byli např. Max Bill, Josef Müller-Brockmann, Emil Ruder a další.

Švýcarský styl se stal velmi minimalistickým výstupem či přístupem ke knihám, plakátům a akcidenční grafice, kde se využívalo písma bezpatkového, které bylo perfektně postaveno na mřížku dokumentu.

‚‚Někdy se design založený na mřížce může zdát nudný, je dobré si ale uvědomit, že je to jeden z nejsilnějších a nejefektivnějších systémů, známých již několik tisíc let.

Většina mřížkových systémů vychází z dávno známých principů, jako je pravidlo třetin, nebo zlatý řez.‘‘

Tento švýcarský styl si stále drží svoji pozici v grafickém designu – stále vznikají nové a nové výstupy po celém světě. A zdá se, že je stále populárnější – alespoň pro dnešní aktuální trendy.

Dále musíme jednoznačně zmínit padesáti osmidílnou mřížku Karla Gerstnera, kterou navrhl poprvé v 60. letech 20. století pro časopis Capital. Stala se nejznámější a nejpoužívanější mřížkou, která i přes svoji statickou stavbu umožňuje kreativní svobodu. Obsahuje mnoho variant rozvržení – různé velikosti modulů, moduly pro text i plochy pro fotografie či obrázky.

ERGONOMIE

Ergonomie (z řečtiny ergon práce a nomos zákon) je věda zabývající se odborným řešením rozporů mezi požadavky na optimální řešení problému z pohledu potřeb člověka, pracovního prostředí a pracovních podmínek, a to zejména stanovením vhodných rozměrů a tvarů nástrojů, nábytku a jiných předmětů a jejich uspořádání v pracovním prostředí a stanovení optimálních rozměrů a maximálních dosahových vzdáleností.

Podle definice je ergonomie mezioborová disciplina, jejímž cílem je dosáhnout přizpůsobení pracovních podmínek výkonnostním možnostem člověka. Tento vědní obor integruje a využívá poznatky humanitních věd (zejména psychologie práce, fyziologie práce, hygieny práce, antropometrie, biomechaniky) a věd technických.

Cílem je, aby používané předměty a nástroje svým tvarem co nejlépe odpovídaly pohybovým možnostem, případně rozměrům lidského těla. Například vhodně navržená židle má tvarem sedáku sedícímu pomoci, aby seděl vzpřímeně, a předcházet tak křivení páteře. Podobný význam má i výška a tvar bederní opěrky apod.

Ergonomie se například zabývá rozměry schodů, velikostí pracovního stolu a výškou jeho desky, šířkou eskalátorů, tvarem nástrojů a jejich rukojetí, umístěním a tvarem ovládacích i signalizačních prvků strojů a zařízení. Věnuje pozornost osvětlení a snaží se odstraňovat zbytečnou námahu zaměstnance.

Pro optimalizaci práce s počítačem stanovuje například vhodný maximální počet pohybů prstů při ovládání klávesnice (110 pohybů prstů jedné ruky za minutu) a zabývá se vhodným uspořádáním prvků na obrazovce, jakož i rozmístěním znaků na klávesnici.

Velikostí obrazovky mobilních zařízení a rozmístěním vhodným velikostem a rozmístění prvků na obrazovce s ohledem na dotykové ovládání.

10 přikázání špičkového responzivního webdesignu

Pryč jsou doby, kdy stačilo web doladit pro jedno či dvě rozlišení. Nechte vytvořit responzivní web, který se elegantně přizpůsobí každému zařízení, zatímco vy máte všechna data na jednom místě.

Poslední průzkumy společnosti NetMonitor ukazují, že brouzdá a nakupuje na českém internetu pomocí mobilního zařízení 4 012 580 uživatelů a jejich počet stále roste. Více jak 20 % vyhledávání na Google je uskutečněno skrze mobilní zařízení. Téměř 26 % emailů je otevřeno na mobilech, 10 % na tabletech. Co z toho vyplývá pro vás? Potřebujete mobilní web.

Jakou cestou se k mobilnímu webu vydat?

S dostupností webu pro mobilní zařízení se můžete vypořádat hned třemi způsoby.

Nechte si vytvořit mobilní aplikaci, aneb užívejte si zbytečně drahé řešení a neochotu uživatelů stahovat si do mobilu něco, co jim zapadne na desáté ploše mobilního telefonu.

Nechte si vyrobit další verzi webu, která si sice bude s mobilními zařízeními rozumět, ale její správa a implementace vás přijde na další balík.

Nebo si nechte vytvořit responzivní web, který se elegantně přizpůsobí každému zařízení, zatímco vy máte všechna data na jednom místě.

Obsah je jako voda. Dejte ho do šálku, stane se šálkem.

Nebo smartphonem. Nebo tabletem. U responzivního webu vrací server každému zařízení stále stejný výstup a ono zařízení si určuje, jak ho zobrazí.

1. Neopomeneš rozlišení všeho

Smartphone, tablet, desktop. Hezký začátek, ale opravdu toho váš kodér neumí víc? Pryč jsou doby, kdy stačilo web doladit pro jedno či dvě rozlišení. Počet typů rozlišení roste, nezapomínejte na ultravelké monitory nebo naopak na rozlišení menších smartphonů. Tři verze návrhu pro smartphone, tablet a desktop si může dovolit grafik, ale přesto vám vždy udělá pouze statické obrázky s fixní šířkou webu. Při implementaci je ale nutné myslet na jiné věci. Zkrátka, udělejte design fluidní a univerzální.

2. Cti SEO svého i obsah svůj

Google miluje responzivní design a při vyhledávání z mobilního zařízení upřednostňuje ve výsledcích ty weby, které si s tablety a smartphony rozumí. Díky jednotným URL adresám pro mobilní i desktopovovu verzi ho bude milovat i váš SEO master a linkbuilder, kteří se už nebudou muset potýkat s mobilní verzí URL typu m.vaseadresa.cz. Práci ušetříte také robotům vyhledávačů, kteří nemusejí řešit duplicitní obsah na dvou různých adresách.

Jak zjistit, jestli je váš web vhodný pro mobilní zařízení? Zkuste test použitelnosti webu v mobilech

3. Nezabiješ obsah

Přebíjet nekvalitní obsah responzivním designem se stalo v poslední době poměrně častým nešvarem. Pokud se tedy rozhodnete pro responzivní web, věnujte dostatečnou péči i jeho obsahu.

Texty by měly být použitelné pro všechny typy zařízení, maximálně stručné, členěné do odstavců a nadpisů.

Obrázky volte vždy větší a raději do nich nevkládejte text (v menším rozlišení nevypadá dobře a může se stát nečitelným).

Když už musíte vložit na stránku třeba graf nebo infografiku, rozhodně nevypínejte zoomování na dotykovém zařízení. Na zmenšených displejích tím informace znepřístupníte úplně.

Aby se na mobilních zařízeních obrázky nenačítaly zbytečně dlouho, zkomprimujte je nebo využijte s webmasterem nové techniky načítání obrázků pro různá zařízení. Pro ikonky, kresby nebo ilustrace využijte vektorový formát obrázku *.SVG, který šetří data a navíc se perfektně vykreslí i na zařízeních s tím nejjemnějším rozlišením displeje.

Nespoléhejte se na dosavadní přístup “tohle na mobilu nepotřebuju”. Prohlížení stránek na mobilu možná brzy převálcuje klasické počítače, dopřejte mu proto stejně kvalitní obsah.

4. Urychlíš načítání webu svého

Kdo chvíli čekal… Nic neprodal. Až 46 % zákazníků vám uteče, pokud se váš web načítá déle jak 10 vteřin. V případě eshopu, který vydělá 100 000 Kč denně, vás může přijít taková ztracená vteřina na 2,5 milionu korun ročně. Optimalizační responzivní techniky nejspíš nikdy nebudou z hlediska načítání tak výkonné jako samostatná mobilní verze, ale leckdy se mu blíží a nabízí tak přívětivé a rychlé načítání webu, které udrží zákazníky v teple vašeho nákupního košíku.

Zajímá Vás, jakou rychlostí se načítá váš web? Vyzkoušejte PageSpeed Insights

5. Nevezmeš designéra svého nadarmo

Šetřete grafickými prvky. Každá kudrlinka znamená snížení rychlosti načítání stránek a zbytečné stahování dat, které uživatele rozhodně nepotěší. Budoucnosti velí minimalismus a jednoduchá grafika, která sluší smartphonům, tabletům i desktopům. Myslete na detaily. Každý prvek řešte pomocí kaskádových stylů (CSS), a teprve když není jiné řešení, sáhnětě po obrázcích. Možná nejste zvyklí příliš řešit správný kontrast nebo čitelnost stránky, ti, co si váš web ale budou prohlížet venku na světle, to rozhodně řešit budou. Nedejte jim důvod odejít.

Responzivní zobrazení hraje do karet vzdušným webdesignům. Správně nastavená vizuální sémantika a dostatečné mezery mezi jednotlivými prvky (obrázky, texty, akční tlačítka a další) nejenže váš web udělá atraktivnější a uživatelsky přívětivější, ale ušetří a zjednodušší práci vašemu kodérovi.

6. Pomni, aby font čitelný byl

Pravidla responzivního designu platí i pro typografii. Sazba by měla mít svou specifickou velikost pro každé zařízení – písmo, které vypadá dobře na mobilu, nemusí slušet počítači (nebo v opačném případě nemusí být čitelné). Délka řádku by měla být optimalizovaná na šířku obrazovky, v ideálním případě by měl být počet znaků 50-75 u stolního počítače a 35-50 u mobilu. Využijte potenciál každého zařízení a přizpůsobte typografii každému z nich.

7. Bůh nejprve stvořil smartphone, pak tablet a nakonec desktop

Mějte na paměti heslo “Mobile first!”. Vždy začínejte tzv. odspodu, tedy od nejmenšího rozlišení, a pokračujte k rozlišením větším. Jinak v závěru zjistíte, že to, co jste navrhli pro desktop, na mobilní zařízení responzivní technikou nedostanete.

8. Požádáš testera svého

Když už má být responzivní web univerzální a rychlý, nezapomeňte ho patřičně otestovat. Proklikejte se ke všem stránkám a vyzkoušejte ovládání interaktivních prvků. Testujte ve všech prohlížečích – desktopových i mobilních - a především na reálných zařízeních, nespokojte se pouze se zmenšováním okna prohlížeče.

Pozor na velikost dotykových ploch. Zapomeňte na titěrné odkazy a pidi tlačítka.

Raději se vyhněte interakcím po najetí myší na objekt (vyjížděcí menu po přejetí kurzorem). Na desktopu sice funguje výborně, na dotykovém zařízení ale často způsobí víc škody než užitku.

Buďte opatrní s náročnými animacemi. Starší smartphone by je nemusel zvládnout tak velkolepě, jak bychom čekali.

9. Nesejdeš z cesty použitelnosti webu

Stejně jako v případě klasického webu i pro ty mobilní existuje celá řada návrhových vzorů. Mobilní uživatelé nejsou zvědaví na kreativní navigační systém webu, chtějí jednoduchou navigaci, na kterou jsou již zvyklí a která nebrání použitelnosti a ergonomii ovládání. Pro každou obsahovou i navigační komponentu existuje ověřený a zažitý návrhový vzor (pattern), jehož použitím nic nezkazíte.

Prohlédněte si nejčastěji používané návrhové vzory pro responzivní zobrazení na stránce

This is responsive

10. Neopomeneš zákazníka svého

Budoucnost jednoznačně patří mobilním zařízením. Po vynálezech typu Google Glass či AppleWatch můžeme předpokládat, že se do pár let připojí k internetu i vaše lednička. Nová generace se pomalu již rodí s chytrým telefonem v ruce a právem nosí přezdívku “digitální domorodci”. Za pár let budou právě oni tvořit nejpočetnější část vašich zákazníků. Nechcete o ně přijít? Připravte se na éru mobilního webu už teď!

Malá rada na závěr - myslete i na sebe!

Zní to jako sci-fi, ale z našeho mobilního telefonu se stává doslova “ovladač na život”. Když máme hlad, klikneme a objednáme si pizzu. Když sháníme nábytek do nového bytu, klikneme a objednáme si ho. Když chceme potěšit svou drahou polovičku, pošleme jí milou zprávu. A tak dále a tak dále…

Pokud se tedy po našem navnaďovacím článku chystáte opravdu vrhnout do vlastního responzivního díla, myslete i na to, jakým způsobem budete svůj web vlastně spravovat. Redakční systém (CMS) by měl být uživatelsky přívětivý, maximálně intuitivní a přehledný.

0 notes

praktickacviceni4 · 7 years ago

Text

ZÁŘÍ / ZÁKLADY MODERNÍHO A ORIGINÁLNÍHO WEBDESIGNU

Co je Digitální design?

V průběhu několika desetiletí se postupně etablovala řada příbuzných disciplín, jejichž společným jmenovatelem jsou informační technologie a internet. V počátcích vývoje počítačů se zrodilo softwarové inženýrství, s postupným masovým využitím výpočetní techniky vznikaly další obory, jejichž úlohou je v různých ohledech zpřístupnění a plnohodnotné využívání IT technologií běžnými uživateli.

Podobně jako o století dříve, kdy se s rozvojem průmyslu vyvinul z řemeslné výroby design výrobků, máme nyní co do činění s potřebou navrhovat a vytvářet produkty a služby virtuální, nehmotné povahy. Vývoj v této oblasti dospěl až k tzv. ekosystémům digitálních produktů a služeb (Apple, Google, Microsoft…), tj. vzájemně propojenému komplexu www stránek, mobilních aplikací či jiného software včetně operačního systému i hardware.

Typickým znakem je jednotné uživatelské grafické rozhraní, logika ovládání, chování systému.

Stále častěji se také setkáváme s výrazem digitální produkt, kdy se k nějaké (většinou on-line) službě přistupuje podobně jako k reálnému produktu (marketing, servis a podpora uživatelů).

Pro úspěch, tj. masové používání všech těchto produktů a služeb je do velké míry podstatný jejich design.

User Interface (UI)

Problematika interakce člověka a stroje je ústředním tématem digitálního designu. Ovládání strojů a přístrojů prostřednictvím ovládacích prvků samozřejmě existovalo již před věkem digitálních technologií, rozvíjelo se v průběhu celé vědecko-technické revoluce před více než 150ti lety. Odtud pochází ergonomie, obor zabývající se optimalizací lidské činnosti (tj. zejména vhodnými rozměry a tvary nástrojů apod.).

Podobně se ustanovila barevná symbolika a tvarová sémantika jako důležité komunikační prostředky usnadňující rychlejší orientaci a bezpečnost při ovládání různých zařízení. Tyto znalosti se přenášejí i do navrhování virtuálních rozhraní.

S nástupem počítačů však vzniká nová otázka: jak ovládat nefyzické, virtuální funkce stroje. Tento problém řeší tzv. uživatelské rozhraní, které představuje koncovou vrstvu (tzv. front-end) stroje, resp. software, které stroj ovládá.

Uživatelské rozhraní (user interface – UI) znamená celkový systém, logiku a rozvrh / architekturu ovládacího rozhraní.

Grafické uživatelské rozhraní (graphic user inteface – GUI) pak představuje jeho konkrétní vizuální podobu, grafické řešení jednotlivých prvků.

Z podstaty věci nemusí mít UI pouze jedno grafické rozhraní, řada software má tzv. customizovatelné přizpůsobení vzhledu rozraní (témata, skiny).

Interaction Design (IxD)

Hlavním tématem v designu digitálních médií se stává interaktivita – akce a reakce. Uživatelské rozhraní vyzývá uživatele k různým akcím, následně na akce uživatele reaguje odpovídající odezvou a tím jej podněcuje k dalším akcím. Vzhledem k tomu, že digitální médium je ze své podstaty nelineární (tj. existuje více možností / scénářů toho, co následuje po každé akci uživatele), stává se z množství možných akcí komplexní chování systému.

Navrhováním chování UI se zabývá obor Interaction Design. Termín Interaction Design je obecně definován jako praxe navrhování interaktivních digitálních produktů, prostředí, systémů a služeb, přičemž se zaměřuje na interakce mezi uživatelem a počítačem.

Problematiku interakce člověka s počítačem, tzv. Humancomputer interaction (HCI) lze chápat jako průsečík počítačových věd, studia lidského chování, designu, mediálních studií a dalších oborů za účelem studia, plánování a navrhování použití interakce mezi lidmi (uživateli) a počítači. HCI implikuje, že na rozdíl od jiných nástrojů s pouze omezeným využitím (např. nůžky), poskytuje počítač mnoho možností, což otevírá neomezený dialog mezi ním a uživatelem.

Information Architecture (IA)

Pojem informační architektura se objevuje kolem roku 1970 a přesahuje v nejobecnější rovině pole digitálního designu. Zjednodušeně jej lze popsat jako rozhodování o tom, jak uspořádat jednotlivé části něčeho do pochopitelného celku. V tomto smyslu je IA součástí informačního či komunikačního designu, jež má své uplatnění i mimo digitální média.

Z hlediska digitálního designu se informační architektura zabývá organizací informací, jejich strukturováním a navrhováním jak celkové logiky systému webové stránky, software či aplikace, tak rozložením jednotlivých prvků a jejich vzájemných vztahů na každé stránce / obrazovce.

Základní myšlenkou je využití principů známých z designu a architektury v digitálním prostředí a v práci s informacemi. To znamená vytváření řešení s ohledem na uživatele tak, aby informace byly přehledně a logicky uspořádány, což usnadní jejich hledání a používání.

User Experience Design (UXD)

Pojem User Experience Design se v oblasti digitálních médiích etabloval v průběhu posledního desetiletí a v současnosti patří k nejfrekventovanějším výrazům v oboru. Je logickým pokračováním vývoje designového myšlení, které se postupně od zaměření na estetické, technologické a marketingové aspekty přesouvá k pozornosti věnované konečným spotřebitelům, neboli uživatelům navržených produktů a služeb.

To znamená spíše než by uživatelé měli přizpůsobit své postoje a chování, má být systém navržen tak, aby vycházel z existujících postojů a chování uživatelů, výsledkem jsou pozitivní prožitky plynoucí z interakce s digitálním systémem.

Úvod do responzivního webdesignu

Prohlížení webových stránek bylo v minulosti výsadou zejména stolních počítačů, později se přidaly notebooky. Tomu byla přizpůsobena tvorba webových stránek, při které se zpravidla využíval tzv. fixní layout s pevně definovanou šířkou, jelikož rozlišení a velikost obrazovek jednotlivých druhů těchto zařízení si byly vcelku podobné a jejich spektrum nebylo příliš široké.

V posledních několika letech, ale dochází k trvalému a postupnému poklesu podílu návštěv webových stránek z těchto druhů zařízení. Tento jev je způsobený nástupem mobilních zařízení, ze kterých jejich uživatelé mohou přistupovat k Internetu. Jedná se hlavně o mobilní telefony (zejména chytré mobilní telefony, tzv. smartphony), tablety, ale i elektronické čtečky knih či herní konzole.

Prodej smartphonů a tabletů celosvětově rok od roku roste, stejně tak jako je-jich podíl na trhu oproti zařízením jako jsou stolní počítače a notebooky, u kterých je trend přesně opačný. S tím souvisí i nezanedbatelný podíl návštěv webových stránek z těchto mobilních zařízení, který rovněž rok od roku stále roste a předpokládá se jeho další růst i v nejbližších letech.

Zmiňovaná mobilní zařízení mají jednu důležitou odlišnost oproti stolním po-čítačům a notebookům. Je jí velikost zobrazovací plochy, která je výrazně menší a omezená. Prohlížení webových stránek vytvořených původně pro desktopy za pomoci fixního nepřizpůsobivého layoutu je na mobilních zařízeních velmi nepohodlné, obsah je zmenšený a tím pádem nečitelný, proto musíme stránky různě přibližovat a využívat posuvníků pro pohybování se po jejich jednotlivých částech, kdy velmi nepříjemným a nepohodlným je zejména horizontální posuvník.

Orientace na takovém webu je poměrně složitá a jeho prohlížení a ovládání rozhodně není pro uživatele mobilních zařízení příjemným zážitkem. Je tedy patrné, že vyvíjet stránky i nadále za pomoci fixního layoutu pouze pro desktopová zařízení není tou zcela vhodnou cestou.

Je potřeba optimalizovat weby i pro mobilní zařízení, které mají typicky menší obrazovky. Jedním ze způsobů je responzivní webdesign, což je přístup k návrhu webových stránek, které přizpůsobují obsah stránky v závislosti na zobrazovacím zařízení a jeho vlastnostech. Jeho cílem je komfortní zobrazení pro všechny uživatele, aby byly stránky přehledné, snadno ovladatelné a práce s nimi příjemná a bezproblémová, nezávisle na tom, jaké zobrazovací zařízení je použito.

Responzivní webdesign je poměrně novou problematikou, první zmínka o něm pochází z 25. května 2010, kdy samotný termín poprvé použil webový vývojář Ethan Marcotte https://ethanmarcotte.com/, který je tak považován za jeho zakladatele. V článku definoval tři základní prvky, na kterých stojí jeho princip.

ÚKOLY

ZADÁNÍ

OSOBNÍ RESPONZIVNÍ PORTFOLIO

Postup:

1. Navrhni vlastní grafickou značku a vizuální styl

a / Navrhni responzivní webové portfolio v souladu s vytvořeným vizuálním stylem, pracuj s ukázkami vlastních prací, v případě malého počtu použij zástupné práce pro ilustraci.

b / navrhni letáček tisknutelný na formát A3, který je v souladu s vizuálním stylem. navrhni způsob skládání.

3. Odprezentuj v přiložené pdf prezentaci, všechny klíčové řešení pro jednotlivé druhy zařízení, mobilní (zobrazení na výšku a na šířku), tablet, desktop.

FORMÁT ODEVZDÁNÍ

Portfolio 100 cm x 30 cm / pdf + přiložený použitý font + jpeg export na 850 px šířka, rozlišení 72 dpi,

A3 leták, pdf + jpeg export, 850 px šířka, rozlišení 72 dpi, + 3x foto reprezentující způsob skládáníí, 850 px šířka, rozlišení 72 dpi

Cílem úkolu je, aby práce s formátem, kompozicí, velikostmi prvků a skládáním letáku inspirovala práci s formátem, kompozicí, velikostmi prvků a responziivní chování webového portfolia a celkově ovlivnila možnost rozvíjení vizuálního stylu. Začněte letákem a úvahou nad skládáním.

UKÁZKY PORTFOLIÍ

http://tombiskup.com/

http://stefaniebrueckler.com/

http://peterkstudio.com/

http://proposals.nicolasparies.com/

http://merijnhos.com/

https://studiothomas.co.uk/projects

http://malikafavre.com/

https://cz.pinterest.com/pin/487936940862036731/

https://cz.pinterest.com/pin/487936940862036738/

https://cz.pinterest.com/pin/487936940862036761/

UKÁZKY ZAROVNÁNÍ PREZENTACE

https://cz.pinterest.com/pin/487936940871864603/

https://cz.pinterest.com/pin/487936940871864668/

https://cz.pinterest.com/pin/487936940871864661/

https://cz.pinterest.com/pin/487936940871864589/

https://cz.pinterest.com/pin/487936940871864658/

https://cz.pinterest.com/pin/487936940871864649/

UKÁZKY LETÁK

PROTOTYPING

https://marvelapp.com/

https://www.invisionapp.com/feature/freehand

https://www.invisionapp.com/blog/how-to-wireframe/

https://www.youtube.com/watch?v=PmmQjLqJQlY

VELIKOSTI PRVKŮ PŘI NÁVRHU RESPONZIVNÍHO WEBU

- pro webového designera je vždy určující fyzická velikost zařízení

- základní návrh pro tři typy zobrazovacích zařízení, desktop, tablet / na výšku a na šířku, mobil / na výšku a na šířku, zvolíme nejvíce prodávané zařízení v konkrétním roce

- dohledáme informace o velikosti obrazovky jednotlivých klíčových zařízení

- stáhneme mockupy k příslušným zařízením, čí si zhotovíme jejich schematický nákres

- návrh začínáme úvahou nad návrhem pro mobil, přístup mobile first

- typ / při navrhování nám mohou posloužit také zařízení, která máme k dispozici, zhotovíme printscreeny obrazovek a testujeme vzhled a velikosti přímo na nich.

POSTUP NÁVRHU WEBU

- nejprve shromáždíme a rozvrhneme a zorganizujeme obsah / texty, fotografie, ilustrace, grafy a navrhujeme wireframe, drátěný model v tužce, pak následuje schematický wireframe v pc, dále nasazení vizuálního stylu

TESTOVÁNÍ

- nakódovaný layout testujeme na dalších typech zařízení, o různých velikostech, a s kodérem dolaďuje zobrazení, tak aby graficky vypadalo na všech zařízení “čistě”, kodér dodává další breakpointy (zarážky, body přerušení), ve kterých se layout přizpůsobí.

POMŮCKY PŘI TVORBĚ PŘIZPŮSOBIVÉHO LAYOUTU

SLEDUJTE CHOVÁNÍ RESPONZIVNÍHO WEBU

- zužujte okno prohlížeče a sledujte přeskupování obsahu

- https://onepagelove.com/

0 notes