Мазмұны
Көрнекі дизайн негіздерін үйренуге арналған толық нұсқаулық.
Миллион долларлық сұрақ: жақсы дизайнның құпиясы неде?
Бұл туралы философиялық тұрғыдан қарауға болады. , бірақ жалпы айтқанда, жақсы дизайнның «құпиясы» визуалды элементтерді кенепке және бір-біріне қатысты ұйымдастыру тәсілінде жатыр. Негізінде, біз жай ғана макет дизайнын сипаттадық. Ойлағанда, қай жерде қарасаңыз да болады.
Мысалы, журналдың макетін алайық. Олардың дизайны классикалық тор жүйесіне сәйкес келеді (бір минут ішінде торлар туралы бәрін білеміз). Барлығы әдетте солға, оңға және төменгі жағында тураланады. Бағандарда, әсіресе, бетті көрнекі түрде тартымды етіп қана қоймай, сонымен қатар оқуға оңай және беделді ететін нақты негізделген туралау бар. Үлкен айдарлар көрерменнің назарын аударады, ал тақырыпша ақпараттың көрнекі иерархиясын құру үшін өлшем бойынша контраст ретінде келеді.
Линда Гаом, Беханс
Бұл қасиеттердің барлығы бетті жасайды. дизайн таза, құрылымды және оқуға оңай және олар біз келесіде айтатын кеңестерге сәйкес келеді. Бірақ алдымен макет дизайнының өзі туралы көбірек түсінейік.
Макетинг дизайны дегеніміз не?
Макет дизайны оқырманның назарын аудару және белгілі бір хабарды көрнекі түрде тартымды етіп жеткізу үшін графикалық элементтердің орналасуына қатысты. .Сондықтан біз сөйлеспейміздемалыс орны, ал басқа элементтер бағыт береді.
Мұны түсінудің қарапайым жолы - мысалы, біздің веб-сайтты мысалға алу. Графика мәтіннен анық бөлінген, сондай-ақ әрекетке шақырулар да, сондықтан көрермен назары ақпараттың бір кластерінен келесісіне ауысады.
Принципі. №5. Контрастты пайдаланыңыз
Дизайныңызда жеткілікті контраст бар екеніне көз жеткізіңіз.
Контраст дизайныңызды ұйымдастыруға көмектеседі және өте қажет иерархияны орнатады және маңызды нәрсеге баса назар аударады.Сонымен қатар, контрастты жақсы пайдалану дизайныңызда көрнекі қызығушылықты арттырады. Барлығы бірдей өлшемде, пішінде немесе түсте болатын орналасу қызықсыз болып көрінетінін мойындайық. Контраст жағдайды жақсартады.
Сіздің бірінші ойыңыз түсті контраст болуы мүмкін, мысалы, жылы мен салқын, күңгірт пен ашық, көк пен қызғылт сары сияқты. Бірақ түс контрасттың өте маңызды принципі болғанымен, түрі, теңестіру және өлшем бойынша контрасттар да бар. Есіңізде болсын, контраст да салыстырмалы. Ол тек басқа элементтермен қатар тұрғанда ғана мағынаға ие.
Міне, осы ережені ақылды және әдемі түрде қолданатын макеттердің кейбір мысалдары. Типографиядағы, түстегі және тіпті элементтер арасындағы өлшемдегі контрастқа назар аударыңыз.
Дереккөз: IAG Салыстыру әрекетінің жоспары
№6 қағида. Қайталау, үлгі, ырғақ
Қайталау туралы ойлаған кезде біз ойлаймыз.бір элементтің қайта-қайта.
Бірақ дизайнында ол басқаша. Бұл соншалықты қызық емес екені сөзсіз. Дұрыс пайдаланған кезде, қайталау дизайнды күшейте алады.
Әртүрлі аймақтар бір-бірімен байланысқан және бір композицияның бір бөлігі болып сезінуі үшін бүкіл макеттегі мотивті анықтап, қайта пайдалануға тырысыңыз. Бұл сіздің дизайныңыздың тақырыпқа ие болуына көмектеседі. Элементтерді қайталау арқылы сіз өзіңіздің аудиторияңыздың күткеніне сай жеткізіп қана қоймайсыз, сонымен қатар пайдаланушы тәжірибесін жақсартасыз. Тұрақты болу пайдаланушыларға өздерін жайлырақ сезінеді.
Мұны кескіндерді немесе таңбаларды қайталау арқылы жасауға болады. Немесе тіпті түс схемасы, шрифт және жалпы бірдей стиль.
Жақсы әдет - үлкен отбасымен шрифтті пайдалану. Үлгілердің, сызықтардың салмағының/стильдерінің және түстерінің әртүрлі санын шектеп, қайталаңыз. Сондай-ақ, суреттер мен графиканың стилін бірдей сақтауға тырысыңыз. Мысалы, бір суретшінің иллюстрацияларын пайдаланыңыз.
Дереккөз: Thepentool.co
Болды. Бұл дизайнды ұйымдастыруға және таза, кәсіби және теңдестірілген орналасуға қол жеткізуге көмектесетін алты қағида.
Бірақ сіздің саяхатыңыз осымен бітпейді. Графикалық дизайн нақты ғылым емес және ол кеңестер мен принциптермен шектелмеуі керек. Жаратылыстың барлық салаларында сияқты, қатаң ереже жоқ. Бұл кеңестерден нәзік жолдармен шығу тереңдік пен әртүрлілікті қосадыдизайндарыңыз.
Дегенмен, олар тамаша бастау нүктесі болып табылады және біз оларды сынап көруге шақырамыз. Және олардың қалай жұмыс істегенін бізге хабарлаңыз!
Бастау үшін Vectornator қолданбасын жүктеп алыңыз
Дизайндарыңызды келесі деңгейге көтеріңіз.
Файлды жүктеп алу
Мұнда логотип дизайны туралы. Бірақ газеттер, журналдар, плакаттар және олардың цифрлық аналогтары, сондай-ақ веб, қолданба немесе UX/UI дизайны сияқты баспа материалының дизайны."Орналасу" сөзі бізге көптеген кеңестер береді. Бұл беттегі алдын ала анықталған элементтердің орналасуын білдіреді.
Орналасу тиімді болған кезде ол жақсы көрінеді және ол көрерменге дизайн жеткізгісі келетін хабарды түсінуге бағыттайды. Сондықтан макетті түсіну тартымды, тиімді, қолданушыға ыңғайлы және ұнамды композициялар жасаудың кілті болып табылады.
Егер макет өз хабарын аудиторияға жақсы жеткізе алмаса немесе басқаша айтқанда, ол "жақсы оқылмайды" «, дизайн қаншалықты сәнді көрінсе де тиімсіз болады. Орналасу дизайны саласында мазмұн трендтер мен трюктерді ауыстырады.
Орналасу дизайнының мақсаты
Хабарды жылдам жеткізу
Бұл маңызды. Макет дизайны максималды тиімділік пен әсер ету үшін көз қозғалысының біркелкі ағынына қол жеткізу үшін графикалық активтер арасындағы байланысты орнатады.
Тең-теңдікті жасау
Орналасу дизайнының принциптерін пайдалану - құрудың ең қарапайым тәсілі. дизайн жобаларыңызда скучно емес тепе-теңдік пен симметрия сезімі.
Ұйымдастықты жасау
Орналасу дизайныңыздың көптеген элементтерін оңай сіңімді, біртұтас және логикалық түрде реттеуге көмектеседі.
Сұлулықты жасау
Тепе-теңдік пен құрылым табиғи түрде сұлулықты тудырады.Егер макет дизайны дұрыс жасалса, ол автоматты түрде көрерменге көрнекі түрде тартымды болады. Көрермендер хабарламаны түсіну үшін қаншалықты аз күш жұмсауы керек болса, дизайн соғұрлым тартымды болып көрінеді.
Фрэнк Филиппиннің «Мен Дизайн студенті болдым» кітабының дизайнері: Содан кейін - Енді.' Дереккөз: DesignBoom
Орналасу дизайнының элементтері
Мәтін
Бұл мәтіннің негізгі бөлігін немесе абзацтарды ғана емес, сонымен қатар тақырыптарды, ішкі тақырыптарды, үстіңгі деректемелерді және төменгі колонтитулдарды қамтиды. Типографияны, түс пен өлшемді таңдауыңыз сіздің макетіңіздің аудиторияңызға қалай аударылатынына әртүрлі әсер етеді.
Сурет
Кескіндердің ең көп тараған түрлері фотосуреттер, иллюстрациялар немесе инфографика болып табылады.
Пішіндер
Пішіндер геометриялық болуы мүмкін, олар өте бұрышты немесе олар табиғи әлемге ұқсайтын органикалық болуы мүмкін. Олар абстрактілі де болуы мүмкін. Өткен жылы дерексіз пішіндер өте сәнді болды, өйткені біз веб-дизайнерлердің оларды күрделі және кең композицияларға қосқанын көрдік.
Пішіндер кескінді алмастыра алады. Немесе олар бетке графикалық элементтерді қосу, мәтінді бөлектеу немесе басқа визуалды элементтер арасындағы кеңістікті бөлу үшін пайдаланылуы мүмкін.
Сондай-ақ_қараңыз: SVG мен PNG арасындағы айырмашылық неде?Ақ кеңістік
Кез келген макет дизайнында белгілі бір мөлшерде бос орын болады. бұл сіздің элементтеріңіздің тыныс алуына және өздігінен ерекшеленуіне мүмкіндік береді.
Макетинг дизайнының алтын принциптері
Принциптермакет дизайны дизайнның көптеген негізгі принциптеріне сәйкес келеді. Түсті белгілі бір жолмен пайдалану сияқты, типография, қайталау, контраст, иерархия және тепе-теңдік.
1-қағида. Торларды пайдаланыңыз
Торлар дизайнерлерге мәтін және кескіндер сияқты әртүрлі дизайн элементтерін біртұтас және оңай орындалатындай етіп орналастыруға көмектеседі.
Олар тәртіп сезімін береді, элементтердің бір-бірінен асып түсуінен сақтайды. , және ең бастысы, торлар да сіздің туралауыңызды түзетеді. Жұмысыңызды таза және кәсібирек ету.
Дереккөз: hgmlegal.com
Торлардың анатомиясы
Сіз бұл жай ғана тік және көлденең сызықтар деп ойлауыңыз мүмкін, бірақ тор бірнеше бөліктерден тұрады. Көптеген, шын мәнінде. Мұнда негізгі торда білу қажет ең маңызды терминология берілген:
Сондай-ақ_қараңыз: Диснейдің қысқаша тарихы- Пішім - бұл соңғы дизайнның толық аймағы. Сондықтан басып шығаруға арналған бірдеңені жасасаңыз, пішім - бет, ал егер сіз веб-дизайнер болсаңыз, пішім - веб-бет немесе шолғыш терезесі.
- Шектер - пішім мен дизайн арасындағы әдейі бос орындар.
- Ағындық сызықтар - орналасуды параллель бөліктерге бөлетін көлденең сызықтар. Ағындық сызықтар дизайнның оқылуына көмектеседі және оқырманды мазмұнды дұрыс орындауға бағыттайды.
- Модульдер көлденең және тік сызықтармен құрылған блоктар.кез келген тордың ағын сызығы. Егер сіз бұл туралы ойласаңыз, олар кез келген тордың құрылыс блоктары болып табылады. Барлық тік модульдер бағандарыңызды жасайды, ал барлық көлденең торлар жолдарыңызды жасайды.
- Аймақтар - тік немесе көлденең қосылған модульдер топтары. Бұларды қалай ұйымдастыруға шешім қабылдайтыныңызға қатысты ережелер жоқ.
Дереккөз: Radversity
Тор түрлері
Орналасу үшін алдымен торлар пайдаланылды. қағаздағы қолжазба.
Олар 13-ші ғасырда француз суретшісі Виллар Де шеттері бар басып шығарылған бет макеттерін шығару үшін тор жүйесін алтын қатынаспен біріктірген кезден басталады. Сіз бұл тор жүйесін бүгінгі күнге дейін көре аласыз, себебі баспа кітаптар мен журнал макеттерінің көпшілігі дәлелдейді. Баспагерлер, редакторлар және дизайнерлер стандартты торларды тек жақсы көрінгені үшін ғана емес, оқырмандар белгілі бір дизайн элементтері белгілі бір жерде болуын күтетіндіктен пайдалануды жөн көреді.
Торларды екі жолмен жасауға болады: симметриялы немесе асимметриялық. Симметриялық торлар тік және көлденең аймақтар бір-біріне тең болатын ортаңғы сызықпен жүреді; және бағандардың ені бірдей.
асимметриялық торда , аты айтып тұрғандай, жиектер мен бағандардың барлығы бірдей емес.
>Осы классификацияға сүйене отырып, дүние жүзінде қолданылатын орналасу торларының бес негізгі түрі бар, оларға сенуге болады:
Қолжазбаторлар құжаттарға арналған тордың ең көп тараған түрі болып табылады. Олар үстіңгі деректемені, төменгі деректемені және шеттерді бөледі және негізінен мәтіннің шекараларын қамтамасыз ететін пішім (немесе бет) ішінде тіктөртбұрыш жасайды. Олар журналдар, газеттер мен кітаптардың негізі болып табылады. Бұл сізге ең таныс макет болуы мүмкін.
Дереккөз: UXplanet
Дереккөз: Radversity
Баған торлары журнал шығарудағы тағы бір сүйіктілер. Әдеттегі журнал орналасуы мәтінді оқуға оңай бөлімдерге бөлу үшін баған торларын пайдаланады. Бірақ олар веб-сайттар үшін де өте танымал. Екіден алтыға дейінгі торларды пайдалануға болады. Көбірек мүмкін, бірақ жалпы емес. Баған торлары туралы өте маңызды нәрсе - бағандар немесе саңылаулар арасындағы қашықтық бір-бірінен бірдей қашықтықта болуы.
Симметриялық баған торларын газеттер пайдаланады, мысалы, веб-дизайнда асимметриялық баған торы артықшылық береді. .
Дереккөз: UX Planet
Дереккөз: Radversity
Модульдік торлар баған торына ұқсас, бірақ олар сондай-ақ көлденең ағындарды есепке алады. Тордың бұл түрі орналасуда әртүрлі элементтерді ұйымдастыру қажет болғанда және баған торлары жеткіліксіз болған кезде қажет.
Модульдік торларда бірдей өлшемді модульдер бар, бұл кеңістіктік аймақтарды әртүрлі тәсілдермен визуализациялауды жеңілдетеді.
Дереккөз: UXПланета
Дереккөз: Radversity
Базалық торлар мәтінге негізделген композициялар үшін керемет. Негізгі сызық - теру кезінде мәтін орналасқан жол, ал алдыңғы қатар - екі негізгі сызық арасындағы қашықтық. Тақырып немесе тақырыпшалар қаншалықты үлкен болуы керек деп ойлайсыз ба?
Базалық торлар мәтінге ағынды ырғақ беруге көмектеседі.
Дереккөз: UX Planet
Дереккөз: Fragaria
Иерархиялық торлар олардың барлығына қарағанда торға ұқсамайды. әріптестер. Дегенмен, олар дизайн элементтерін маңыздылық ретімен ұйымдастырғанда өте пайдалы. Иерархиялық торлар модульдік торларға негізделуі мүмкін немесе тіпті өзіңізді де жасай аласыз. Веб-сайттар бұл торды көп пайдаланады, әсіресе сандық журналдар мен газеттер сандық жүйеге өту кезінде бағандық торларға емес, иерархиялық торларға көбірек сүйенеді.
Дереккөз: UX Plane
Принципі №2. Теріс кеңістікті пайдаланыңыз
Біз көбіне бос болу, үнсіздік немесе түстің болмауы жаман нәрсе деп ойлаймыз. Бірақ біз олардың контрасттың берік негізі екенін қарастырмаймыз.
Ақ кеңістік деп те аталады, теріс кеңістік дизайндағы нақты элементтері жоқ аймақ болып табылады. Бұл аумақ бос қалды. Ол сіздің активтеріңізді қоршап қана қоймайды, сонымен қатар олардың арасында қажетті байланыстарды жасайды. Осыған байланысты теріс кеңістік заңды дизайн элементі болып табылады және сіздің орналасуыңыздың қаншалықты тиімді болуына үлкен әсер етедідизайн болып табылады.
Жақсы және жаман теріс кеңістік
Теріс кеңістік дизайндағы әртүрлі аймақтарды бөлуге көмектеседі, сонымен қатар макеттің тыныс алуына мүмкіндік береді. Бұл визуалды иерархияға және визуалды тепе-теңдікке көмектеседі; ол пайдаланушының назарын негізгі элементтерге қояды; ол алаңдаушылық деңгейін төмендетеді; және сайып келгенде, ол сіздің дизайныңызға стиль мен талғампаздық қосады.
Тәжірибесіз дизайнерлер мәтінді үлкейту немесе логотипті немесе кескінді үлкейту арқылы кенептің көп бөлігін толтыруға бейім болуы мүмкін. Бірақ элементтерге бөлме беру көрерменге белгілі бір ақпарат сигналдарын тезірек және ыңғайлырақ таңдауға мүмкіндік береді.
Егер бәрі көрерменнің назарын аудару үшін айғайласа, ештеңе естілмейді.– Аарон Уолтер, «Дизайн эмоция'
Теріс кеңістікті анықтаудың оңай жолы - модульдік торды пайдалану. Оны дизайнның үстіне қою арқылы сіз қай модульдер бос қалуы мүмкін екенін және қайсысы толтырылуы керек екенін оңай көре аласыз.
Дизайнер Brunswicker, Дереккөз: Codesignmag.com
№3 қағида. Бір фокустық нүктені таңдаңыз
Клиент сізден логотипті үлкейтуді сұрады ма? Ал содан кейін тақырыпты одан да үлкенірек ету үшін бе?
Сіз бәрін баса алмайсыз. Бұл жақсы дизайн нүктесін жеңеді. Уақыт сияқты фокус салыстырмалы. Бір элемент ерекшеленуі үшін екіншісі фон ретінде қызмет етуі керек. Дизайныңызды көрсету үшін кейбір элементтер басқаларға үстемдік етуі кереквизуалды иерархия.
Дизайндағы фокус нүктесі ең үлкен көрнекі салмағы бар бір элемент болып табылады. Бұл сіздің макетіңіздегі кез келген нәрсеге қарағанда алдымен көзді тартатын элемент.Фокценттік нүкте аудиторияңызға дизайныңызда олардың көру саяхаты қай жерде басталатынын хабарлайды. Демек, бұл сіз айтып отырған оқиғаның басы.
Бұған әдетте үлкен суретті немесе үлкен типография көзін пайдалану арқылы қол жеткізуге болады. Төмендегі фокустық нүктенің қаншалықты тиімді екенін байқаңыз
Браулио Амадо Bloomberg Businessweek үшін әзірлеген, Дереккөз: Бұл өте жақсы
Бірақ фокустық нүкте аудиторияңыздың назарын аударатын болса да, келесі ереже оны басшылыққа алуға көмектеседі.
4-қағида. Жақындық пен ағын туралы ойланыңыз
Жақындық принципі қарапайым. Бір-бірімен байланысты элементтердің бірге орналастырылғанына көз жеткізіңіз.
Жақындық визуалды активтердің қосылғанын және орналасуды ұйымдастыруға көмектесетін бір көрнекі бірлік болатынын көрсетеді.Осылайша, тек бір-бірімен байланысы бар кластерлік дизайн активтерін ғана жасаңыз және аудиторияңызды олар тұтынуы қажет тиісті мазмұн бөлігіне бағыттау үшін дизайныңыздағы ақпарат қалталарын пайдаланыңыз. Бұл сондай-ақ ағын принципі деп аталады.
Дереккөз: Satori Graphics
Жақсы ағыны бар дизайн элементтерден элементке дейін барлық макетте көрермендердің назарын оңай тартады. Сіздің фокус нүктелеріңіз көзді тартып, айналады
