Разобрать визуальную иерархию
Возьмите одну страницу и назовите главное сообщение и основное действие. Сравните их заметность с второстепенными элементами; объясните, что помогает или мешает чтению.
Веб-дизайн · английская озвучка
Web Design for Web Developers: Build Beautiful Websites!
Программа, практика и требования
Web Design for Web Developers — бесплатный вводный курс Йонаса Шмедтманна о внешнем виде веб-страниц. За 54 минуты видео он знакомит с типографикой, цветом, изображениями, отступами и визуальной иерархией. Доступ открывается непосредственно на Udemy; оплачивать этот курс через RusUdemy не требуется.
Бесплатный курсUdemy указывает бесплатный доступ на дату проверки. Откройте программу в своём аккаунте: платное оформление через RusUdemy для неё не требуется.Открыть на Udemy- 4,445 788 оценок на Udemy
- 834 162студента на Udemy
- 54 минвидео · 19 лекций
- ENанглийская речь преподавателя
Бесплатный курс UdemyАнглийский язык · обновление ноябрь 2024
Перед началом
Подойдёт ли вам этот курс
Кому подойдёт
Начинающим разработчикам, которым нужны понятные ориентиры по внешнему виду страницы до изучения большого дизайн-инструмента.
Что знать до старта
Опыт дизайна или программирования не нужен. Достаточно компьютера и подключения к интернету.
Что сможете сделать
Разбор правил оформления веб-страниц: типографика, палитра, изображения, отступы и визуальная иерархия.
Учесть при выборе
На дату проверки доступ бесплатный: оформлять платную покупку через сервис не нужно. Материал пересекается с блоком веб-дизайна в большом HTML/CSS-курсе Йонаса. Это 54 минуты видео, а не полноценная подготовка UI/UX-дизайнера.
Содержание и открытый урок
Посмотреть на страницу глазами посетителя
Работающий интерфейс может оставаться трудным для чтения: заголовки спорят друг с другом, текст теряется на фоне, а главное действие не отличается от второстепенного. Короткий курс помогает заметить такие проблемы и получить первые ориентиры для исправления. Он не заменяет обучение UI/UX, исследование пользователей или большой курс вёрстки. Есть и содержательное пересечение: автор прямо отмечает, что эти темы также входят в его HTML/CSS-программу. Поэтому бесплатный обзор удобен для знакомства со стилем объяснения, а не как обязательная добавка к уже выбранному большому курсу.
Перед стартом оцените открытый урок и подготовьте инструменты. На дату проверки доступ бесплатный: оформлять платную покупку через сервис не нужно. Материал пересекается с блоком веб-дизайна в большом HTML/CSS-курсе Йонаса. Это 54 минуты видео, а не полноценная подготовка UI/UX-дизайнера.
Самопроверка · редакционные задания
Как проверить навык самостоятельной практикой
Эти упражнения предложены редакцией RusUdemy для самостоятельной проверки навыков. Они не являются дополнительными уроками преподавателя и не предполагают проверку работ автором.
Упорядочить типографику
Ограничьте число размеров и начертаний текста, проверьте длину строки и межстрочный интервал. Убедитесь, что короткий заголовок и длинный абзац одинаково удобны для чтения.
Сократить палитру
Выберите основной цвет, нейтральные оттенки и понятный акцент для действия. Проверьте читаемость текста и не передавайте важное различие только цветом.
Проверить отступы на реальном содержимом
Замените примерные тексты и картинки своими. Посмотрите, сохраняются ли группировка и ритм, когда заголовок длиннее, а изображение имеет другое соотношение сторон.
54 мин видео · 19 лекцийСверить программу на Udemy
Программа бесплатного курса: правила оформления веб-страниц
Основные блоки проверенной программы собраны ниже. Полное оглавление и превью доступны на Udemy. Задания для самопроверки предложены редакцией RusUdemy: они дополняют уроки и не выдаются за обещания автора.
На дату проверки в открытых данных Udemy: 4 раздела, 19 лекций, 54 мин видео. На установку инструментов, самостоятельную практику и разбор ошибок потребуется дополнительное время. Темы ниже сгруппированы редакцией; перед выбором сверяйте доступное оглавление на Udemy.
Примените несколько принципов к собственной странице. Если хочется самостоятельно собрать и опубликовать сайт, следующий шаг — базовые HTML и CSS; переходить к большому курсу только ради повторения дизайна не обязательно.
- 01
Введение и материалы для самостоятельного изучения
- 02
Типографика, цвет, изображения и работа с иконками
- 03
Отступы, визуальная иерархия и оформление страницы
- 04
Итоговые рекомендации и продолжение практики
Оригинал курса — на английском
Понимать решение важнее дословного перевода.
Откройте бесплатный фрагмент и объясните своими словами, что делает пример и зачем нужен каждый шаг. Смотрите небольшими частями, ведите словарь терминов и повторяйте показанные действия самостоятельно. Перевод помогает понимать речь, но проверка результата всё равно остаётся частью практики.
Как проходить курсы Udemy на английскомАнглийская озвучка; английские субтитры указаны в каталоге Udemy как автоматические. Русских субтитров в проверенном списке нет. Доступность автоматического перевода проверяйте в плеере.
Опыт работы с сервисом
Отзывы клиентов RusUdemy
Оперативно подошли к покупке курса. Очень доволен. Большое спасибо.
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Спасибо Михаилу за помощь! Все получилось быстро и легко!
Отзыв от:
Помогли с приобретением курса за 5 мин. Буду обращаться ещё. Михаилу респект!
Отзыв от:
Прекрасный сервис, буквально за пару минут купил курс. Всем советую
Отзыв от:
Ответы перед стартом