Як асвоіць дызайн макета

Поўны дапаможнік па вывучэнні асноў візуальнага дызайну.

Пытанне на мільён долараў: у чым сакрэт добрага дызайну?

Мы можам пайсці па-філасофску наконт гэтага , але ўвогуле кажучы, праславуты «сакрэт» добрага дызайну заключаецца ў тым, як вы арганізуеце свае візуальныя элементы ў адносінах да палатна і адзін з адным. У прынцыпе, мы толькі што апісалі дызайн макета. Што, калі вы думаеце аб гэтым, усюды, куды вы ні паглядзіце.

Узяць, напрыклад, макет часопіса. Іх дызайн адпавядае класічнай сістэме сетак (мы збіраемся даведацца ўсё пра сеткі праз хвіліну). Звычайна ўсё выраўноўваецца злева, справа і ўнізе. Асабліва слупкі маюць выразнае апраўданае выраўноўванне, што робіць старонку не толькі візуальна прывабнай, але таксама лёгкай для чытання і аўтарытэтнай. Вялікія загалоўкі прыцягваюць увагу гледача, а падзагаловак кантрастуе па памеры, ствараючы візуальную іерархію інфармацыі.

Лінда Гаом, Behance

Усе гэтыя якасці робяць старонку дызайн чысты, структураваны і лёгкі для чытання, і яны адпавядаюць парадам, пра якія мы пагаворым далей. Але спачатку давайце больш разбярэмся з самім дызайнам макета.

Што такое дызайн макета?

Дызайн макета тычыцца размяшчэння графічных элементаў, каб прыцягнуць увагу чытача і перадаць канкрэтнае паведамленне візуальна прывабным спосабам .

Такім чынам, мы не размаўляеммесца адпачынку, у той час як іншыя элементы надаюць кірунак.

Просты спосаб зразумець гэта, узяўшы, напрыклад, наш вэб-сайт. Графіка выразна аддзеленая ад тэксту, як і заклікі да дзеяння, так што ўвага гледача пераходзіць ад аднаго блока інфармацыі да наступнага.

Прынцып #5. Выкарыстоўвайце кантраст

Глядзі_таксама: Як стварыць фоны

Пераканайцеся, што ў вашым дызайне дастаткова кантрасту.

Кантраст дапамагае арганізаваць ваш дызайн і ўсталюе вельмі неабходную іерархію і падкрэсліць тое, што важна.

Больш за тое, добрае выкарыстанне кантрасту таксама дадае візуальнай цікавасці вашаму дызайну. Давайце паглядзім праўдзе ў вочы, планіроўка, дзе ўсё аднолькавага памеру, формы або колеру, будзе выглядаць сумна. Кантраст дадае пікантнасці.

Ваша першая думка можа быць каляровым кантрастам, напрыклад, цёплым супраць халоднага, цёмным супраць светлага, сінім супраць аранжавага. Але ў той час як колер з'яўляецца надзвычай важным прынцыпам кантрасту, існуюць таксама кантрасты тыпу, выраўноўвання і памеру. І памятайце, кантраст таксама адносны. Ён мае значэнне толькі ў супастаўленні з іншымі элементамі.

Вось некалькі прыкладаў макетаў, у якіх гэтае правіла выкарыстоўваецца разумным і прыгожым спосабам. Звярніце ўвагу на кантраст у тыпаграфіцы, колеры і нават на кантраст у памеры паміж элементамі.

Крыніца: План дзеянняў па ўзгадненні IAG

Прынцып №6. Паўтарэнне, узор, рытм

Калі мы думаем пра паўтарэнне, мы думаемаднаго і таго ж элемента зноў і зноў.

Але ён адрозніваецца па дызайне. Гэта дакладна не так сумна. Пры правільным выкарыстанні паўтарэнне сапраўды можа пашырыць магчымасці вашага дызайну.

Паспрабуйце ідэнтыфікаваць і паўторна выкарыстоўваць матыў ва ўсім макеце, каб розныя вобласці адчувалі сябе звязанымі і часткай адной кампазіцыі. Гэта дапаможа вашаму дызайну мець тэму. Паўтараючы элементы, вы не толькі адпавядаеце чаканням вашай аўдыторыі, але і паляпшаеце карыстацкі досвед. Паслядоўнасць дазваляе карыстальнікам адчуваць сябе больш камфортна.

Вы можаце зрабіць гэта, паўтараючы фігуры або сімвалы. Ці нават колеравая гама, шрыфт і ўвогуле адзін і той жа стыль.

Глядзі_таксама: Гісторыя Інтэрнэту

Добрая звычка - выкарыстоўваць шрыфт у вялікай сям'і. Абмяжуйце розную колькасць узораў, таўшчыні/стыляў ліній і колераў і паўтарайце паўсюль. Акрамя таго, паспрабуйце захаваць стыль малюнкаў і графікі. Напрыклад, выкарыстоўвайце ілюстрацыі таго ж мастака.

Крыніца: Thepentool.co

Вось і ўсё. Гэта шэсць прынцыпаў, якія дапамогуць вам арганізаваць ваш дызайн і дасягнуць больш чыстага, прафесійнага і збалансаванага размяшчэння.

Але ваша падарожжа на гэтым не заканчваецца. Графічны дызайн - гэта не дакладная навука, і ён не павінен абмяжоўвацца парадамі і прынцыпамі. Як і ва ўсіх сферах творчасці, тут няма жорсткага правіла. Тонкае выкарыстанне гэтых парад надасць глыбіні і разнастайнасцівашы праекты.

Тым не менш, яны з'яўляюцца выдатнай адпраўной кропкай, і мы рэкамендуем вам паспрабаваць іх. І дайце нам ведаць, як яны спрацавалі!

Спампуйце Vectornator, каб пачаць

Вывядзіце свае праекты на новы ўзровень.

Спампуйце файл пра дызайн лагатыпа тут. Але дызайн друкаваных матэрыялаў, такіх як газеты, часопісы, плакаты і іх лічбавыя аналагі, а таксама вэб-дызайн, дызайн прыкладанняў або UX/UI.

Слова «макет» дае нам шмат падказак. Гэта азначае размяшчэнне загадзя вызначаных элементаў на старонцы.

Калі макет эфектыўны, ён добра выглядае і дапамагае гледачу зразумець паведамленне, якое дызайн спрабуе перадаць. Таму разуменне макета з'яўляецца ключом да стварэння прывабных, эфектыўных, зручных і прыемных кампазіцый.

Калі макет дрэнна перадае сваё паведамленне аўдыторыі, або, іншымі словамі, ён дрэнна "чытаецца". », дызайн будзе неэфектыўным, якім бы модным ён ні выглядаў. У сферы дызайну макета змест замяняе тэндэнцыі і хітрыкі.

Мэта дызайну макета

Хуткая перадача паведамлення

Гэта галоўнае. Дызайн макета ўсталёўвае ўзаемасувязь паміж графічнымі актывамі для дасягнення плыўнага патоку руху вачэй для максімальнай эфектыўнасці і ўздзеяння.

Каб стварыць баланс

Выкарыстанне прынцыпаў дызайну макета - самы просты спосаб стварэння пачуццё раўнавагі і сіметрыі ў вашых дызайнерскіх праектах, не становячыся сумнымі.

Каб стварыць згуртаванасць

Макет дапаможа вам арганізаваць шмат элементаў вашага дызайну лёгказасваяльным, згуртаваным і лагічным спосабам.

Каб стварыць прыгажосць

Баланс і структура натуральным чынам ствараюць прыгажосць.Калі ваш дызайн макета зроблены правільна, ён аўтаматычна стане візуальна прывабным для гледача. Чым менш намаганняў трэба прыкласці гледачам, каб зразумець паведамленне, тым больш прывабным будзе здавацца ваш дызайн.

Дызайнер Фрэнка Філіпіна для яго кнігі "I Used to Be a Design Student: Then - Цяпер». Крыніца: DesignBoom

Элементы дызайну макета

Тэкст

Гэта ўключае не толькі тэкст або абзацы, але таксама загалоўкі, падзагалоўкі, верхнія і ніжнія калонтытулы. Ваш выбар тыпаграфікі, колеру і памеру дазволіць па-рознаму паўплываць на тое, як ваш макет будзе транслявацца вашай аўдыторыі.

Выява

Самыя распаўсюджаныя тыпы малюнкаў - гэта фатаграфіі, ілюстрацыі або інфаграфіка.

Фігуры

Фігуры могуць быць геаметрычнымі, вельмі вуглаватымі, або яны могуць быць арганічнымі, імітуючы свет прыроды. Яны таксама могуць быць абстрактнымі. Абстрактныя формы былі вельмі моднымі ў мінулым годзе, бо мы бачылі, як вэб-дызайнеры ўключалі іх у складаныя і разгалістыя кампазіцыі.

Фігуры могуць замяніць малюнак. Ці яны могуць быць выкарыстаны для дадання графічных элементаў на старонку, вылучэння тэксту або размежавання прасторы паміж іншымі візуальнымі элементамі.

Прабелы

Любы дызайн макета будзе мець пэўную колькасць прабелаў што дазволіць вашым элементам дыхаць і вылучацца самі па сабе.

Залатыя прынцыпы дызайну макета

Вы заўважыце, што прынцыпыдызайну макета прытрымлівацца многіх асноўных прынцыпаў дызайну. Напрыклад, выкарыстанне колеру пэўным чынам, тыпаграфіка, паўтарэнне, кантраст, іерархія і баланс.

Прынцып №1. Выкарыстоўвайце сеткі

Сеткі дапамагаюць дызайнерам размясціць розныя элементы дызайну, такія як тэкст і малюнкі, такім чынам, каб выглядаць паслядоўна і лёгка прытрымлівацца.

Яны забяспечваюць пачуццё парадку, яны не дазваляюць элементам перасільваць адзін аднаго. , і самае галоўнае, сеткі таксама выправяць ваша выраўноўванне. Зрабіце вашу працу больш чыстай і прафесійнай.

Крыніца: hgmlegal.com

Анатомія сетак

Вы можаце падумаць, што гэта проста вертыкальныя і гарызантальныя лініі, але сетка складаецца з некалькіх частак. Шмат, насамрэч. Вось самая важная тэрміналогія, якую вам трэба ведаць у базавай сетцы:

• Фармат - гэта поўная вобласць вашага канчатковага дызайну. Такім чынам, калі вы распрацоўваеце нешта для друку, фарматам з'яўляецца старонка, а калі вы вэб-дызайнер, фарматам з'яўляецца вэб-старонка або акно браўзера.
• Палі - гэта наўмысныя пустыя прасторы паміж фарматам і дызайнам.
• Flowlines - гэта гарызантальныя лініі, якія падзяляюць ваш макет на паралельныя секцыі. Лініі пераносу дапамагаюць чытаць ваш дызайн і накіроўваюць чытача правільна сачыць за зместам.
• Модулі - гэта блокі, утвораныя гарызантальнымі і вертыкальнымі лініяміналіўныя лініі любой сеткі. Калі вы падумаеце, яны з'яўляюцца будаўнічымі блокамі любой сеткі. Усе вашыя вертыкальныя модулі ствараюць вашыя слупкі, у той час як усе вашыя гарызантальныя сеткі ствараюць вашыя радкі.
• Рэгіёны - гэта групы звязаных вертыкальных або гарызантальных модуляў. Няма правілаў адносна таго, як вы вырашылі іх арганізаваць.

Крыніца: Radversity

Тыпы сетак

Сеткі макета ўпершыню выкарыстоўваліся для размяшчэння почырк на паперы.

Яны ўзыходзяць да 13-га стагоддзя, калі французскі мастак Вільяр Дэ аб'яднаў сістэму сеткі з залатым сячэннем, каб стварыць макеты друкаваных старонак з палямі. Гэтую сеткавую сістэму вы бачыце і па гэты дзень, пра што сведчыць большасць макетаў друкаваных кніг і часопісаў. Выдаўцы, рэдактары і дызайнеры аддаюць перавагу выкарыстоўваць стандартныя сеткі не толькі таму, што яны добра выглядаюць, але і таму, што чытачы чакаюць, што пэўныя элементы дызайну будуць знаходзіцца ў пэўным месцы.

Сеткі могуць быць распрацаваны двума спосабамі: сіметрычнымі. або асіметрычны. Сіметрычныя сеткі ідуць па цэнтральнай лініі, дзе вертыкальныя і гарызантальныя вобласці роўныя адна адной; і слупкі маюць аднолькавую шырыню.

У асіметрычнай сетцы , як вынікае з назвы, палі і слупкі не ўсе аднолькавыя.

Зыходзячы з гэтай класіфікацыі, ва ўсім свеце выкарыстоўваюцца пяць асноўных тыпаў макетных сетак, на якія можна спадзявацца:

Рукапіссеткі з'яўляюцца найбольш распаўсюджаным выглядам сеткі для дакументаў. Яны падзяляюць верхні, ніжні калонтытул і палі і ў асноўным ствараюць прамавугольнік унутры фармату (або старонкі), які забяспечвае межы вашага тэксту. Яны з'яўляюцца асновай для часопісаў, газет і кніг. Такім чынам, напэўна, гэта макет, з якім вы больш за ўсё знаёмыя.

Крыніца: UXplanet

Крыніца: Radversity

Сеткі слупкоў - яшчэ адзін фаварыт у выданні часопісаў. У тыповым макеце часопіса выкарыстоўваюцца сеткі слупкоў для падзелу тэксту на раздзелы, якія лёгка чытаюцца. Але яны таксама вельмі папулярныя для вэб-сайтаў. Вы можаце выкарыстоўваць ад дзвюх да шасці сетак. Больш магчыма, але не часта. Вельмі важная рэч аб сетках слупкоў - гэта тое, што адлегласць паміж слупкамі, або жолабамі, знаходзіцца на аднолькавай адлегласці адзін ад аднаго.

Сіметрычныя сеткі слупкоў выкарыстоўваюцца, напрыклад, у газетах, у той час як асіметрычная сетка слупкоў з'яўляецца пераважнай у вэб-дызайне. .

Крыніца: UX Planet

Крыніца: Radversity

Модульныя сеткі падобныя на сетку слупкоў, але яны таксама ўлічваюць гарызантальныя лініі плыні. Гэты тып сеткі неабходны, калі вам трэба арганізаваць розныя элементы ў вашым макеце, а сетак слупкоў проста недастаткова.

Модульныя сеткі маюць модулі аднолькавага памеру, што дазваляе вельмі лёгка візуалізаваць вашыя прасторавыя зоны рознымі спосабамі.

Крыніца: UXПланета

Крыніца: Radversity

Базавыя сеткі фантастычныя для тэкставых кампазіцый. Базавая лінія - гэта радок, дзе знаходзіцца тэкст, калі вы ўводзіце тэкст, а пачатковая лінія - гэта інтэрвал паміж дзвюма базавымі лініямі. Цікава, наколькі вялікім павінен быць ваш загаловак ці падзагалоўкі?

Базавыя сеткі дапамогуць надаць вашаму тэксту плаўны рытм.

Крыніца: UX Planet

Крыніца: Fragaria

Іерархічныя сеткі менш падобныя на сетку, чым усе іх адпаведнікі. Тым не менш, яны вельмі карысныя пры арганізацыі элементаў дызайну ў парадку важнасці. Іерархічныя сеткі могуць быць заснаваны на модульных сетках, або вы нават можаце стварыць свае ўласныя. Вэб-сайты часта выкарыстоўваюць гэту сетку, асабліва лічбавыя часопісы і газеты ў сваім пераходзе да лічбавання больш абапіраюцца на іерархічныя сеткі, а не на сеткі слупкоў.

Крыніца: UX Plane

Прынцып #2. Выкарыстоўвайце Negative Space

Мы часта лічым, што пустата, цішыня або адсутнасць колеру - гэта дрэнна. Але мы не прымаем да ўвагі тое, што яны з'яўляюцца трывалай асновай кантрасту.

Негатыўная прастора, таксама званая прабеламі, - гэта вобласць у вашым дызайне, якая не мае ніякіх фактычных элементаў. Гэта пустая тэрыторыя. Ён не толькі акружае вашы актывы, але і стварае неабходныя сувязі паміж імі. З-за гэтага адмоўная прастора з'яўляецца законным элементам дызайну і мае вялікі ўплыў на эфектыўнасць вашага макетадызайн ёсць.

Добрая супраць дрэннай негатыўнай прасторы

Негатыўная прастора дапаможа падзяліць розныя вобласці ў вашым дызайне, а таксама дазволіць вашаму макеце дыхаць. Гэта дапамагае з візуальнай іерархіяй і візуальным балансам; ён засяроджвае ўвагу карыстальніка на асноўных элементах; гэта зніжае ўзровень адцягнення ўвагі; і, нарэшце, гэта дадае стылю і элегантнасці вашаму дызайну.

Неспрактыкаваныя дызайнеры могуць мець тэндэнцыю запаўняць як мага большую частку свайго палатна, павялічваючы тэкст або павялічваючы лагатып або выяву. Але прастора для элементаў дазваляе гледачу хутчэй і зручней выбіраць пэўную інфармацыю.

Калі ўсё прыцягвае ўвагу гледача, нічога не чуваць.

– Аарон Уолтэр, «Дызайн для эмоцыі'

Лёгкі спосаб вызначыць сваю негатыўную прастору - гэта выкарыстанне модульнай сеткі. Размясціўшы гэта паверх вашага дызайну, вы зможаце лёгка ўявіць, якія модулі могуць заставацца пустымі, а якія трэба запоўніць.

Дызайнер Brunswicker, Крыніца: Codesignmag.com

Прынцып No3. Выберыце адзіны каардынацыйны цэнтр

Ці прасіў вас калі-небудзь кліент павялічыць лагатып? А потым зрабіць загаловак яшчэ большым?

Усё не падкрэсліш. Гэта перамагае сэнс добрага дызайну. Як і час, увага адносная. Каб адзін элемент вылучаўся, другі павінен служыць фонам. Некаторыя элементы павінны дамінаваць над іншымі, каб ваш дызайн адлюстроўваўсявізуальная іерархія.

Фокус у дызайне - гэта адзін элемент з найбольшай візуальнай вагой. Гэта элемент, які ў першую чаргу прыцягвае погляд, больш за ўсё астатняе ў вашым макеце.

Каардынацыйны цэнтр аб'явіць вашай аўдыторыі, з чаго пачынаецца іх прагляд вашага дызайну. Такім чынам, гэта пачатак гісторыі, якую вы распавядаеце.

Звычайна гэтага можна дасягнуць, выкарыстоўваючы вялікую выяву або вялікую крыніцу тыпаграфікі. Звярніце ўвагу, наколькі эфектыўным з'яўляецца прыведзены ніжэй каардынацыйны цэнтр

Распрацаваны Брауліа Амаду для Bloomberg Businessweek, Крыніца: прыемна, што

Але хоць каардынацыйны цэнтр прыцягне ўвагу вашай аўдыторыі, наступнае правіла дапаможа кіраваць гэтым.

Прынцып №4. Падумайце пра блізкасць і паток

Прынцып блізкасці просты. Пераканайцеся, што звязаныя адзін з адным элементы размешчаны разам.

Блізкае размяшчэнне азначае, што візуальныя актывы злучаны і становяцца адной візуальнай адзінкай, якая дапамагае арганізаваць ваш макет.

Такім чынам, кластэрызуйце толькі актывы дызайну, якія маюць адносіны адзін з адным, і выкарыстоўвайце кішэні інфармацыі аб вашым дызайне, каб накіраваць сваю аўдыторыю да той часткі адпаведнага зместу, якую яны павінны выкарыстоўваць. Гэта таксама называецца прынцыпам патоку.

Крыніца: Satori Graphics

Дызайн з добрым патокам будзе з лёгкасцю весці вока гледачоў па ўсім макеце, ад элемента да элемента. Вашы каардынацыйныя кропкі будуць цягнуць вока і стаць