Главная страницаКатегория другое (frontend)Дизайн для разработчиков

Дизайн для разработчиков

Name: Дизайн для разработчиков
Rating: 4.8 (34 reviews)

Design for Developers

frontendmasters

★4.8 (всего оценок - 34)

Продолжительность

4 ч 20 мин

Категория

Другое (Frontend)

Количество уроков

63 Видео

Дата добавления

29 нояб. 2018 г., 11:48

Язык

Английский

Дата выхода

28 нояб. 2018 г., 12:53

Дата обновления

29 апр. 2026 г., 01:51

Дизайн для разработчиков — это практический курс, который поможет инженерам уверенно чувствовать себя в области проектирования интерфейсов. Вы научитесь создавать визуально продуманные и функциональные продукты, лучше понимать дизайнеров и быстрее воплощать идеи в коде. Это отличный выбор для фронтенд-разработчиков, инженеров и всех, кто стремится расширить набор профессиональных навыков.

Почему этот курс важен

Современная разработка требует не только технических знаний, но и понимания визуальной логики, UX-паттернов и принципов интерфейсного дизайна. Чем гибче разработчик в работе с макетами, тем быстрее и качественнее проходит создание продукта. Курс позволяет закрыть пробелы в дизайнерских навыках, не уходя в глубокие художественные дисциплины.

Что вы изучите в этом курсе

Основы композиции и создание макетов

Динамические макеты с нуля — освоите построение структуры интерфейса от первых эскизов до готовой сетки.
Поймёте, как композиция влияет на читаемость и восприятие информации.
Научитесь переносить макеты в браузер, учитывая адаптивность и технические ограничения.

Веб-типография

Узнаете ключевые принципы выбора шрифтов и иерархии текста.
Освоите практичные правила, обеспечивающие комфортное чтение на любых устройствах.

Теория цвета и работа с палитрами

Разберёте основы цветовых сочетаний и контрастности.
Получите список ресурсов для быстрого подбора современных палитр.

Редактирование изображений

Научитесь корректировать графику в Sketch и Adobe Photoshop.
Разберёте типичные задачи разработчика: подготовка ассетов, оптимизация изображений, экспорт в нужных форматах.

Взаимодействие браузера с визуальными элементами

Видение браузера — как отрисовываются стили, изображения и анимации.
Как использовать эти знания для создания чистых и доступных интерфейсов.

Прототипирование

Научитесь быстро собирать прототипы для демонстраций и тестирования.
Освоите передачу прототипов команде и работу с обратной связью.

Анимация в вебе

Разберёте, где анимация помогает, а где мешает.
Узнаете, как движения влияют на производительность и UX.

Пользовательские потоки и UX-подход

Поймёте, как пользователи взаимодействуют с интерфейсом.
Научитесь проектировать логичные и удобные пути прохождения задач.

Кому подойдёт курс

Фронтенд-разработчикам, стремящимся улучшить качество интерфейсов.
Бэкенд-инженерам, работающим над продуктами с UI.
Начинающим дизайнерам, желающим понять техническую сторону.
Тем, кто хочет повысить эффективность командной работы.

Какие навыки вы получите

Умение быстро создавать и править макеты.
Понимание базовых дизайнерских принципов.
Навык общения с дизайнерами на профессиональном языке.
Повышение скорости разработки и качества визуальных решений.

Удален по просьбе правообладателя

Урок 1.00:00:33
Introduction
Урок 2.00:02:34
Right vs. Left Brain
Урок 3.00:04:14
What this Course Is & Setup
Урок 4.00:02:43
Perfection
Урок 5.00:01:13
Designer vs. Developer
Урок 6.00:02:05
Introduction to Layouts & Grids
Урок 7.00:03:09
Balance Symmetry
Урок 8.00:03:45
Balance Asymmetry
Урок 9.00:02:47
Exploring Asymmetry Learning from Art History
Урок 10.00:04:11
Shape
Урок 11.00:03:04
Scale and Cropping
Урок 12.00:07:59
Grid
Урок 13.00:03:51
Layout Tools
Урок 14.00:01:42
Photoshop Keyboard Shortcuts
Урок 15.00:08:33
Layout and Composition Demo
Урок 16.00:01:52
Primitive Shapes Exercise
Урок 17.00:02:53
Primitive Shapes Review
Урок 18.00:05:23
Layout in CSS
Урок 19.00:05:22
CSS Grid Demos
Урок 20.00:07:19
Grid Naming Example
Урок 21.00:03:06
CSS Flexbox
Урок 22.00:05:18
Using ClipPath & Other Masking Tools
Урок 23.00:01:30
CSS Writing Mode
Урок 24.00:15:13
Grid By Example Demo
Урок 25.00:00:38
Layout Exercise
Урок 26.00:01:34
Layout Q&A
Урок 27.00:03:36
Color Modes
Урок 28.00:07:52
Color Mixing
Урок 29.00:02:13
Color Modes and Properties
Урок 30.00:07:10
Color in Code
Урок 31.00:02:37
Color Variables
Урок 32.00:01:27
Limited Color
Урок 33.00:06:13
Color Tools
Урок 34.00:00:54
Animated Gradients
Урок 35.00:01:55
How to Create a Palette
Урок 36.00:00:41
Data Visualization with HSL(A) Example
Урок 37.00:06:31
Creating a Palette Demo
Урок 38.00:00:39
Creating a Palette Exercise
Урок 39.00:03:37
Typography Basics
Урок 40.00:02:44
Typography Resources
Урок 41.00:04:16
Pairing Fonts
Урок 42.00:01:49
Typography for Lawyers
Урок 43.00:02:40
Typographic Color
Урок 44.00:08:55
Terminology
Урок 45.00:10:46
Typography Demo
Урок 46.00:06:08
Typography Exercise and Q&A
Урок 47.00:06:40
Remixing
Урок 48.00:06:17
Sources of Inspiration
Урок 49.00:05:59
UI Kit Demo
Урок 50.00:08:25
Image Formats & Resources
Урок 51.00:01:54
Exporting Tips
Урок 52.00:04:43
SVG
Урок 53.00:04:29
SVG Handling and Full Page Background
Урок 54.00:05:08
Images Demo Image Overlay Effects
Урок 55.00:10:42
Layout Demo Coding Compositions
Урок 56.00:00:29
Images & Layout Exercise
Урок 57.00:03:26
Loaders
Урок 58.00:03:10
User Experience & Tools
Урок 59.00:01:42
Motion Design Language
Урок 60.00:04:56
Types of Prototypes
Урок 61.00:06:13
Page Transitions
Урок 62.00:01:03
Interaction Exercise
Урок 63.00:00:20
Conclusion

https://github.com/sdras/design-for-developers

Автор - frontendmasters

frontendmasters

FrontendMasters — одна из ведущих онлайн-платформ для изучения фронтенд- и веб-разработки. Курсы представлены в формате видеоворкшопов и преподаются практикующими экспертами из крупных технологических компаний. Платформа охватывает широкий спектр современных технологий (JavaScript, React, TypeScript и др.) и делает упор на глубокое понимание и применение знаний на практике.

+792

Комментарии