🐰 Дизайн для начинающих
Основной упор подборки сделан на цифровой визуальный дизайн. Про UX можно почитать тут.
Обзор содержимого
О профессии
Быстрый старт
С чего начинается дизайн
Дизайн-принципы
Типографика
Цвет
Композиция
Крепкая вёрстка
UI-дизайн
Вдохновение и насмотренность
Учимся на ошибках
Начало карьеры
ТОП-10 материалов
🔥Дизайн в цифровой среде
🔥Типографика и верстка
🔥Дизайн-альманах от Readymag
🔥Гайд по визуальному дизайну в интерфейсах (UI)
🔥Пользовательский интерфейс
🔥100 главных принципов дизайна
🔥Живая типографика
🔥Refactoring UI
🔥25 правил визуального дизайна, которые можно смело применять в любом проекте
🔥Верстать макет быстро
👨🏻🎨 О профессии
В этом блоке собрали материалы вводного характера, которые помогут узнать больше о профессии дизайнера цифровых продуктов и специализациях.
О профессии
| Name | Изучить | Тип | Язык |
|---|---|---|---|
| Что такое digital-дизайн | https://www.uprock.ru/education/chto-takoe-digital-design | статья | 🇷🇺 |
| Дизайнер интерфейсов. Роль в продуктовой команде и возможности для роста | https://vc.ru/s/1204302-kadrovyy-centr-cdto-work/537199-dizayner-interfeysov-rol-v-produktovoy-komande-i-vozmozhnosti-dlya-rosta | статья | 🇷🇺 |
| Как устроена профессия UX/UI-дизайнер | https://bangbangeducation.ru/point/instruktsiia/ux-ui-dizajn-chto-eto-takoe/ | видеостатья | 🇷🇺 |
| Кто такой дизайнер интерфейсов и как им стать | https://www.youtube.com/watch?v=A6mH9pfPnSQ | видео | 🇷🇺 |
| Как стать дизайнером интерфейсов и продуктовым дизайнером | https://www.youtube.com/watch?v=LVfCAEPCRWE | видео | 🇷🇺 |
| UX/UI-дизайнер: все, что вы хотели знать, но боялись спросить | https://habr.com/ru/companies/Get_experts/articles/569434/ | статья | 🇷🇺 |
| Что не так с дизайнерами интерфейсов | https://habr.com/ru/articles/761320/ | статья | 🇷🇺 |
| Как стать дизайнером интерфейсов – пошаговое руководство | https://ux-journal.ru/kak-stat-dizajnerom-interfejsov.html | статья | 🇷🇺 |
🏄♂️ Быстрый старт
А для тех кому не терпится окунуться в азы профессии ниже собрали объёмные самодостаточные материалы.
Самоучители
| Материал | Изучить | Тип | Язык |
|---|---|---|---|
| 🔥Дизайн в цифровой среде | https://tilda.education/courses/web-design/ | курс | 🇷🇺 |
| 🔥Типографика и верстка | https://bureau.ru/projects/book-typography/ | книга | 🇷🇺 |
| 🔥Дизайн-альманах от Readymag | https://readymag.com/almanac/ru/ | лонгрид | 🇷🇺 |
| 🔥Пользовательский интерфейс | https://bureau.ru/projects/book-ui/ | книга | 🇷🇺 |
| 🔥Гайд по визуальному дизайну в интерфейсах (UI) | https://deshub.notion.site/ce378b4fa5584dfc90f340d9434eb02f?pvs=4 | курс | 🇷🇺 |
| Самоучитель по дизайну интерфейсов. Старт не за миллион деняк | https://vc.ru/design/813347-samouchitel-po-dizaynu-interfeysov-start-ne-za-million-denyak | подборка | 🇷🇺 |
| Основы дизайна | https://slashdesigner.ru/basics | подборка | 🇷🇺 |
🤔 С чего начинается дизайн
Дизайн в широком смысле — это процесс создания продукта, приносящего пользу. На то, какой будет итоговый продукт влияет понимание цели, мышление и организация работы дизайнером.
Организация работы
| Материал | Изучить | Тип | Язык |
|---|---|---|---|
| Как мышление влияет на результат дизайна | https://leandesign.pro/kak-myshlieniie-vliiaiet-na-riezultat-dizaina/ | статья | 🇷🇺 |
| Дизайн-мышление: гайд по процессу | https://tilda.education/courses/web-design/designthinking/ | курслонгрид | 🇷🇺 |
| Про полезное действие | https://leandesign.pro/koghda-biespoliezno-dizainit-2/ | статья | 🇷🇺 |
| Этапы разработки интерфейса | https://medium.com/design-pub/%D1%8D%D1%82%D0%B0%D0%BF%D1%8B-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D0%B0-baf666d6ad8f | статья | 🇷🇺 |
| Процесс работы над продуктом | https://reticent-author.notion.site/4316360cebe64eaab94c0cea24e63500?pvs=4 | инструкция | 🇷🇺 |
| Как не зависеть от вдохновения | https://vk.com/@lean.school-kak-ne-zaviset-ot-vdohnoveniya | статья | 🇷🇺 |
📜 Дизайн-принципы
В начале сложно объективно оценивать качество дизайна (своего или чужого), поэтому необходимо ознакомиться с базовыми принципами в дизайне и узнать о работе человеческого восприятия.
Принципы
| Материал | Изучить | Тип | Язык |
|---|---|---|---|
| 🔥100 главных принципов дизайна | https://store.artlebedev.ru/books/100-glavnykh-printsipov-dizaina/ | книга | 🇷🇺 |
| 5 самых важных принципов визуального дизайна для UX/UI-дизайнеров | https://ux-journal.ru/5-samyh-vazhnyh-printsipov-vizualnogo-dizajna-dlya-ux-ui-dizajnerov.html?fbclid=IwAR2mFUKn5WQkSwaNDquwtcG0OOa2LgZo8y2x0CbdoiLmSpvBRBwDXMZUIks | статья | 🇷🇺 |
| Ключевые принципы психологии дизайна | https://ux.pub/editorial/kliuchievyie-printsipy-psikhologhii-dizaina-2c18 | статья | 🇷🇺 |
| Принципы гештальта в дизайне пользовательского интерфейса | https://habr.com/ru/companies/cloud4y/articles/347444/ | статья | 🇷🇺 |
| Принципы дизайна от несравненного Дитера Рамса | https://losko.ru/design-rules-of-dieter/ | статья | 🇷🇺 |
| Эмоциональный дизайн | https://www.uprock.ru/education/emocionalnyy-dizayn | статья | 🇷🇺 |
| Дизайн — это про красоту или удобство? | https://www.uprock.ru/articles/dizayn-eto-pro-krasotu-ili-udobstvo-2 | статья | 🇷🇺 |
⚠️ Перед тем как приступить к созданию макета нужно познакомиться с тремя важными аспектами: типографика, цвет и композиция.
1️⃣ Типографика
Первый кит, на которой стоит любой дизайн-макет.
Типографика
| Материал | Изучить | О чём | Тип | Язык |
|---|---|---|---|---|
| 🔥Живая типографика | https://awdee.ru/kniga-zhivaya-tipografika-teper-besplatna/ | типографика | книга | 🇷🇺 |
| Типографика | https://readymag.com/almanac/tipografika/ | типографика | лонгрид | 🇷🇺 |
| Типографика. Краткий курс | http://www.quickandlazy.appspot.com/ | типографика | курс | 🇷🇺 |
| Типографика. Виды гарнитур (шрифтов). Детальный разбор. | https://www.youtube.com/watch?v=Z7ylv7weSoY | типографика | видео | 🇷🇺 |
| Виды шрифтов: как выбрать лучший вариант для дизайна | https://practicum.yandex.ru/blog/vidy-shriftov-v-dizaine/ | типографика | статья | 🇷🇺 |
| Типографика. Как оформить абзац текста. Пошаговый урок | https://www.youtube.com/watch?v=Ej_FIuy99tI&feature=youtu.be | типографика | видео | 🇷🇺 |
| Как сочетать шрифты, не сочетая шрифты | https://nobelfaik.livejournal.com/240053.html | типографика | статья | 🇷🇺 |
| Заголовки в дизайне (h1, h2, h3) | http://miloskiy.com/zagolovki-v-dizajne-h1-h2-h3-p/ | типографика | статья | 🇷🇺 |
2️⃣ Цвет
Второй кит, на которой стоит любой дизайн-макет.
Цвет
| Материал | Изучить | О чём | Тип | Язык |
|---|---|---|---|---|
| Цвет | https://readymag.com/almanac/tsvet/ | цвет | лонгрид | 🇷🇺 |
| Теория цвета: правила применения в дизайне | https://practicum.yandex.ru/blog/cvet-v-dizajne-teoriya-cveta-osnovy-dlya-dizajnerov/ | цвет | статья | 🇷🇺 |
| Что такое цветовой круг Иттена и как им пользоваться | https://practicum.yandex.ru/blog/chto-takoe-tsvetovoy-krug-ittena/ | цвет | статья | 🇷🇺 |
| Основы дизайна: теория цвета | http://miloskiy.com/osnovy-dizajna-po-stopam-bauhauza-teoriya-tsveta/ | цвет | статья | 🇷🇺 |
| Основы дизайна: светлое и тёмное | http://miloskiy.com/po-stopam-shkoly-dizajna-bauhauz-iskusstvo-formy/ | цвет | статья | 🇷🇺 |
3️⃣ Композиция
Третий кит, на которой стоит любой дизайн-макет.
Композиция
💪 Крепкая вёрстка
Самый важный навык дизайнера, который хочет работать с визуалом. Без уверенной работы с макетом в UI-дизайне будет проблематично.
Вёрстка
| Материал | Изучить | Тип | Язык |
|---|---|---|---|
| 🔥Верстать макет быстро | https://leandesign.pro/vierstat-makiet-bystro/ | статья | 🇷🇺 |
| Алгоритм верстки | https://nobelfaik.livejournal.com/98088.html | инструкциястатья | 🇷🇺 |
| Динамика полей в афише спектакл | https://vk.com/@lean.school-djuly | статья | 🇷🇺 |
| Подружить текст с картинкой | https://nobelfaik.livejournal.com/178573.html | статья | 🇷🇺 |
| Дизайн макета с нуля | https://youtu.be/zOn0jZNuY-o?si=i31pnNC9ryO5Q4B4 | видео | 🇷🇺 |
| Верстка по форме | https://nobelfaik.livejournal.com/76267.html | статья | 🇷🇺 |
| Как за 5 минут сделать плакат, чтобы клиент его утвердил | https://youtu.be/9AC-Z_mmBIE?si=Pntsnq-FsclziHbS | видео | 🇷🇺 |
| Левый верхний угол | https://nobelfaik.livejournal.com/113432.html | статья | 🇷🇺 |
💻 UI-дизайн
Вот мы и добрались к тому, что называем UI. Создать хороший пользовательский интерфейс с первого раза будет сложно, поэтому обращайся к блокам выше, чтобы заполнять проблемы в знаниях.
UI
💅 Вдохновение и насмотренность
Дизайн в том числе творческая сфера, здесь не обойтись без развитого вкуса и креативного подхода.
Насмотренность
| Материал | Изучить | Тип | Язык |
|---|---|---|---|
| Что такое насмотренность | https://practicum.yandex.ru/blog/chto-takoe-nasmotrennost-i-kak-ee-razvivat/ | статья | 🇷🇺 |
| Не плагиат, а вдохновение | https://practicum.yandex.ru/blog/chto-takoe-referensy-v-dizayne/ | статья | 🇷🇺 |
| Управляемый креатив: как разработать wow-дизайн? | https://vc.ru/u/57675-sibiriks/554530-upravlyaemyy-kreativ-kak-razrabotat-wow-dizayn | статья | 🇷🇺 |
| Развитие визуального вкуса и получение нового опыта | https://tilda.education/courses/web-design/tastedevelopment/ | раздел курса | 🇷🇺 |
| Уровень нормы: как насмотренность и вкус влияют на качество дизайна | https://vc.ru/design/117690-uroven-normy-kak-nasmotrennost-i-vkus-vliyayut-na-kachestvo-dizayna | статья | 🇷🇺 |
🌝 Учимся на ошибках
Через изучение того как “не надо” происходит наилучшее усвоение теории на практике.
Ошибки
| Материал | Изучить | О чём | Тип | Язык |
|---|---|---|---|---|
| Ошибки проектирования | https://slashdesigner.ru/db72c4636a9e48f49303c81ed4b0f692 | учимся на ошибках | подборка | 🇷🇺 |
| Частые ошибки в вёрстке | https://leandesign.pro/mistakes/ | учимся на ошибках | статья | 🇷🇺 |
| Картинка без модуля | https://nobelfaik.livejournal.com/198223.html | учимся на ошибках | статья | 🇷🇺 |
| 10 ошибок при работе с цветом в UI | https://teletype.in/@designless/vRPIJjZCj | учимся на ошибках | статья | 🇷🇺 |
💼 Начало карьеры
О том как начать зарабатывать дизайном, устроиться на первую работу и не только.
Карьера
| Материал | Изучить | Тип | Язык |
|---|---|---|---|
| С чего начать свой путь в большой дизайн | https://leandesign.pro/s-chiegho-nachat-svoi-put-v-bolshoi-dizain/ | статья | 🇷🇺 |
| Джуны тоже получают работу | https://deshub.notion.site/d1c609b627014b0da431ebc972dfeb51?pvs=4 | статья | 🇷🇺 |
| На что на самом деле смотрят эйчары при найме дизайнера в продукт? | https://deshub.notion.site/20859b265b984738a5e08f08158fe87e?pvs=4 | статья | 🇷🇺 |
| «Плох стажёр, который не хочет стать арт-директором»: как найти работу джуниор‑дизайнеру | https://skillbox.ru/media/design/junior-designer-starter/ | статья | 🇷🇺 |