{"id":62857,"date":"2019-07-05T16:31:45","date_gmt":"2019-07-05T14:31:45","guid":{"rendered":"https:\/\/www.drawplanet.cz\/drawstudy\/?p=62857"},"modified":"2019-07-05T16:31:45","modified_gmt":"2019-07-05T14:31:45","slug":"jak-se-vyhnout-zacatecnickym-chybam-pri-tvorbe-designu","status":"publish","type":"post","link":"https:\/\/drawstudy.eu\/en\/jak-se-vyhnout-zacatecnickym-chybam-pri-tvorbe-designu\/","title":{"rendered":"Jak se vyhnout\u00a0za\u010d\u00e1te\u010dnick\u00fdm\u00a0chyb\u00e1m\u00a0p\u0159i tvorb\u011b\u00a0designu\u00a0"},"content":{"rendered":"
Ka\u017ed\u00fd se m\u016f\u017ee nau\u010dit principy dobr\u00e9ho designu. Z na\u0161eho \u010dl\u00e1nku z\u00edsk\u00e1te z\u00e1kladn\u00ed znalosti a praktick\u00e9 designov\u00e9 dovednosti, kter\u00e9 m\u016f\u017eete hned aplikovat!<\/span><\/span><\/p>\n Pokud nev\u011b\u0159\u00edte, \u017ee se m\u016f\u017eete nau\u010dit design, p\u0159e\u010dt\u011bte si slova legend\u00e1rn\u00edho Davida Grohla (buben\u00edk v kapele Nirvana, kytarista a zp\u011bv\u00e1k FooFighters).<\/p>\n \u201eNikdy jsem se neu\u010dil hr\u00e1t na bic\u00ed. Nikdy jsem se neu\u010dil hr\u00e1t na kytaru. N\u011bjak jsem se k tomu p\u0159irozen\u011b dostal s\u00e1m. Pokud opravdu milujete to, co d\u011bl\u00e1te, jste v\u00e1\u0161niv\u00ed a soust\u0159ed\u011bn\u00ed, m\u016f\u017eete d\u011blat, cokoli opravdu chcete. 1. Pou\u017eijte hodn\u011b kontrastu. 2. T\u00e9m\u011b\u0159 \u010dern\u00e1 je lep\u0161\u00ed ne\u017e \u010dern\u00e1 <\/p>\n 5. Velikost p\u00edsma a pr\u00e1zdn\u00e9 m\u00edsto. <\/p>\n 6. Pokud je objedn\u00e1vka d\u016fle\u017eit\u00e1, pou\u017eijte seznam. 7. Nejprve vytvo\u0159te \u010dernob\u00edl\u00fd design a pozd\u011bji p\u0159idejte barvu. Zde je n\u011bkolik dal\u0161\u00edch str\u00e1nek:<\/span><\/span><\/p>\n Colormind – tvorba barev na b\u00e1zi um\u011bl\u00e9 inteligence, R\u00e1di byste se t\u0159eba v budoucnu v\u011bnovali grafick\u00e9mu designu profesion\u00e1ln\u011b? Pom\u016f\u017eeme v\u00e1m s d\u016fle\u017eit\u00fdmi z\u00e1klady, abyste m\u011bli na \u010dem stav\u011bt. :)<\/p>\n
\nA te\u010f, kdy\u017e opravdu chcete d\u011blat design, p\u0159ikro\u010d\u00edme k praktick\u00fdm rad\u00e1m. Vrhn\u011bte se na to!<\/p>\n
\nBarva pozad\u00ed a textu by m\u011bla b\u00fdt zcela odli\u0161n\u00e1, abyste p\u0159\u00edli\u0161 neunavovali zrak div\u00e1ka. Nejl\u00e9pe se \u010dte \u010dern\u00fd text na b\u00edl\u00e9m pozad\u00ed. Dr\u017ete se d\u00e1l od sv\u011btle \u0161ed\u00fdch, \u017elut\u00fdch a zelen\u00fdch t\u00f3n\u016f. Pokud mus\u00edte skoro \u0161ilhat, abyste text p\u0159e\u010detli, z\u0159ejm\u011b jste nedodr\u017eeli uveden\u00e9 pravidlo.<\/p>\n<\/span><\/span><\/p>\n
\nPokud m\u00e1te na v\u00fdb\u011br, zkuste pou\u017e\u00edt na text barvu # 333333 RGB (51,51,51) m\u00edsto \u010dist\u00e9 \u010dern\u00e9. \u010cist\u011b \u010dern\u00fd text na b\u00edl\u00e9m se p\u0159ed o\u010dima trochu m\u00edh\u00e1 a neumo\u017e\u0148uje soust\u0159ed\u011bn\u00ed na p\u00edsmenka.
\n
\n3. Nejd\u0159\u00edve d\u016fle\u017eit\u00fd obsah
\nNejd\u0159\u00edve um\u00edst\u011bte nejd\u016fle\u017eit\u011bj\u0161\u00ed informace, abyste popsali hlavn\u00ed \u00fa\u010del. D\u016fle\u017eit\u00fd obsah by m\u011bl b\u00fdt viditeln\u00fd bez p\u0159ibl\u00ed\u017een\u00ed nebo posouv\u00e1n\u00ed.
\n
\nPod\u00edvejme se na n\u011bkter\u00e9 dobr\u00e9 p\u0159\u00edklady vizu\u00e1ln\u00ed hierarchie v re\u00e1ln\u00e9m \u017eivot\u011b.
\nInstagram (vlevo dole) se zam\u011b\u0159uje na fotografii \/ video, kter\u00e9 u\u017eivatel zve\u0159ejnil.
\nPinterest (vpravo dole) za\u010d\u00edn\u00e1 hled\u00e1n\u00edm, po kter\u00e9m u\u017e n\u00e1sleduj\u00ed obr\u00e1zky. Pinterest to d\u011bl\u00e1 z\u00e1m\u011brn\u011b. Vyhled\u00e1v\u00e1n\u00ed je hlavn\u00ed funkc\u00ed jejich aplikace, lid\u00e9 pou\u017e\u00edvaj\u00ed Pinterest k nach\u00e1zen\u00ed vizu\u00e1ln\u00edch informac\u00ed.<\/p>\n<\/span><\/span><\/p>\n
\nSpotify (vlevo dole) se zam\u011b\u0159uje na obal alba a n\u00e1zev skladby. Navzdory tomu, \u017ee ovl\u00e1dac\u00ed tla\u010d\u00edtka p\u0159ehr\u00e1va\u010de jsou sekund\u00e1rn\u00ed, Spotify zv\u00fdrazn\u00ed tla\u010d\u00edtko Play.
\nFacebook (vpravo dole) je velmi podobn\u00fd Instagramu a d\u00e1v\u00e1 na prvn\u00ed m\u00edsto obsah va\u0161ich p\u0159\u00e1tel.<\/span><\/span><\/p>\n
\n<\/span><\/span><\/p>\n
\n4. Zarovnejte v\u0161echny prvky.
\nNejrychlej\u0161\u00ed zp\u016fsob, jak opravit prvek, kter\u00fd nesed\u00ed na sv\u00e9 m\u00edsto, je prvek vyrovnat. Kdy\u017e design\u00e9\u0159i hovo\u0159\u00ed o pot\u0159eb\u011b vyrovn\u00e1n\u00ed, sna\u017e\u00ed se upozornit na nedostatek slad\u011bn\u00ed.
\nZarovn\u00e1n\u00ed je jedn\u00edm z nejjednodu\u0161\u0161\u00edch vylep\u0161en\u00ed, kter\u00e9 lze prov\u00e9st na webu nebo v aplikaci tak, aby celek vypadal 10x l\u00e9pe.<\/span><\/span><\/p>\n
\nZde je dal\u0161\u00ed p\u0159\u00edklad, tro\u0161ku jsme p\u0159ed\u011blali rozm\u00edst\u011bn\u00ed. Jak to vypad\u00e1? Nep\u0159ipad\u00e1 v\u00e1m, \u017ee je n\u011bco \u0161patn\u011b?
\nTip: v\u0161imn\u011bte si zarovn\u00e1n\u00ed lev\u00e9ho okraje, kter\u00e9 je opravdu specifick\u00e9. Vpravo jsou v\u0161echny hlavn\u00ed bloky zarovn\u00e1ny.
\n\u0160patn\u00e9 zarovn\u00e1n\u00ed vlevo a opraveno vpravo.<\/span><\/span><\/p>\n<\/p>\n
\nD\u011bl\u00e1me design pro lidi, ne pro mravence. Zv\u011bt\u0161en\u00edm velikosti p\u00edsma bude obsah mnohem sn\u00e1ze \u010diteln\u00fd, pokud je mezi \u0159\u00e1dky dostatek m\u00edsta.<\/span><\/span><\/p>\n<\/p>\n
\nPokud na objedn\u00e1vce nez\u00e1le\u017e\u00ed a chcete inspirovat lidi k vyhled\u00e1v\u00e1n\u00ed (nap\u0159. Pinterest nebo AirBnB), pak pou\u017eijte zobrazen\u00ed v m\u0159\u00ed\u017ece.
\nVzhledy p\u0159i pou\u017eit\u00ed seznamu a m\u0159\u00ed\u017eky.<\/span><\/span><\/p>\n<\/p>\n
\nD\u00edky tomu se zam\u011b\u0159\u00edte na nejd\u016fle\u017eit\u011bj\u0161\u00ed v\u011bci ve va\u0161\u00ed aplikaci.
\nBarva vyvol\u00e1v\u00e1 silnou emocion\u00e1ln\u00ed reakci a \u010dasto br\u00e1n\u00ed tomu, aby se \u010dlov\u011bk soust\u0159edil na \u0159e\u0161en\u00ed hlavn\u00edho probl\u00e9mu n\u00e1vrhu.<\/span><\/span><\/p>\n
\n<\/span><\/span><\/p>\n
\n8. Vytvo\u0159te pohodln\u00fd design.
\nOmezen\u00ed pohyb\u016f rukou je d\u016fle\u017eit\u00e1 ot\u00e1zka, pod\u00edvejte se na ilustraci z n\u00e1dhern\u00e9ho \u010dl\u00e1nku Luka Wroblewsk\u00e9ho o mobiln\u00ed navigaci.
\nIdentifikuje oblasti, kter\u00e9 jsou nejsnadn\u011bji dosa\u017eiteln\u00e9 prstem (alespo\u0148 pro prav\u00e1ky). R\u00e1di bychom vid\u011bli aplikace, kter\u00e9 umo\u017e\u0148uj\u00ed zm\u011bnit rozhran\u00ed zprava doleva.
\nMnoho \u00fa\u010dinn\u00fdch mobiln\u00edch aplikac\u00ed m\u00e1 v doln\u00ed t\u0159etin\u011b obrazovky mobiln\u00edho telefonu navigaci a z\u00e1kladn\u00ed ovl\u00e1d\u00e1n\u00ed.<\/span><\/span><\/p>\n
\n
\n9. Pou\u017e\u00edvejte p\u0159edem p\u0159ipraven\u00e9 palety.
\nBarvy jsou trochu neuchopiteln\u00e9 um\u011bn\u00ed. V\u0159ele doporu\u010dujeme j\u00edt na Dribbble a hledat palety barev (\u201ePalety barev\u201c). Nebo m\u016f\u017eete pou\u017e\u00edt gener\u00e1tory barev, jako je Coolors nebo Color Claim.
\nPou\u017eijte hotov\u00e9 palety a u\u0161et\u0159\u00edte si hodiny zbyte\u010dn\u00e9 pr\u00e1ce, argument\u016f a dohad\u016f.<\/span><\/span><\/p>\n
\nColor Farm – barevn\u00e9 palety z popul\u00e1rn\u00edch d\u011bl na Dribbble,
\nBarva Lisa – barevn\u00e9 palety z obraz\u016f velk\u00fdch um\u011blc\u016f,
\nSwissColors – barevn\u00e9 palety ve stylu \u0161v\u00fdcarsk\u00e9ho designu,
\nHTML Color Codes je velmi dobr\u00e9 m\u00edsto pro n\u00e1vrh\u00e1\u0159e a v\u00fdvoj\u00e1\u0159e o barv\u011b, web m\u00e1 vynikaj\u00edc\u00ed n\u00e1stroj pro vytv\u00e1\u0159en\u00ed barevn\u00fdch palet, n\u00e1zvy barev v r\u016fzn\u00fdch variant\u00e1ch (Hex, RGB, HSL, HTML), hotov\u00e9 barevn\u00e9 palety pro ploch\u00fd a materi\u00e1lov\u00fd design, v\u00fdukov\u00e9 programy pou\u017e\u00edt barvy a odkazy na dal\u0161\u00ed u\u017eite\u010dn\u00e9 zdroje
\nColor Hunt – speci\u00e1ln\u011b vybran\u00e9, kr\u00e1sn\u00e9 barevn\u00e9 palety, kter\u00e9 jsou aktualizov\u00e1ny ka\u017ed\u00fd den
\nColordot je barevn\u00e1 paleta, kde m\u016f\u017eete pomoc\u00ed my\u0161i prozkoumat v\u0161echny odst\u00edny barev.
\n
\n10. Pou\u017e\u00edvejte doporu\u010den\u00ed spole\u010dnosti Apple a Google.
\nTyto spole\u010dnosti maj\u00ed vynikaj\u00edc\u00ed zdroje pro v\u00fdvoj\u00e1\u0159e aplikac\u00ed na platform\u011b iOS nebo Android.
\nNap\u0159\u00edklad Google Material Design, kter\u00fd obsahuje instrukce, n\u00e1stroje, barvy, ikony a komponenty, kter\u00e9 v\u00e1m pomohou za\u010d\u00edt s n\u00e1vrhem va\u0161\u00ed aplikace.
\nApple m\u00e1 Human Interface Guidelines, kde najdete v\u0161e, co pot\u0159ebujete k n\u00e1vrhu aplikace na iOS.
\n
\nPamatujte si, \u017ee hlavn\u00ed v\u011bc je praxe.
\nBude n\u011bjak\u00fd \u010das trvat, ne\u017e zjist\u00edte, jak na kvalitn\u00ed design, ale brzy si v\u0161imnete, \u017ee uveden\u00e1 pravidla zlep\u0161\u00ed va\u0161e dovednosti.<\/p>\n