Содержание

что это за профессия, что он делает и сколько зарабатывает

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

Чем занимается

Специалист создает всё, что мы видим на экранах компьютеров и смартфонов. Обязанности зависят от компании и сферы, но в основном они такие:

👉 оформлять сайты — от лендингов до интернет-магазинов;

👉 разрабатывать элементы — баннеры, кнопки, анимацию;

👉 проектировать логику интерфейса — например, куда попадает пользователь при клике, когда появляется всплывающее окно;

👉 оформлять цифровые рекламные материалы — имейл-рассылки, баннеры для соцсетей;

👉 улучшать продукт по результатам А/B-тестов;

👉 адаптировать сайты под экраны смартфонов.

Направления

🚀 UI

Это пользовательский интерфейс — то, как выглядит продукт. То есть всё, с чем взаимодействует человек на сайте или в приложении: от иконок до звуков или анимации. UI-дизайнер определяет, какого цвета сделать кнопку, нужны ли отступы, какой шрифт использовать для заголовка в интерфейсе.

🚀 UX

Это опыт пользователей — то, как с продуктом взаимодействуют. UX-дизайнер изучает потребности клиентов, продумывает компоновку, рисует прототипы, проводит тесты, готовит технические задания.

UX шире, чем UI. Если UI определяет цвет кнопки, то UX — в какую часть страницы ее поставить. Эти направления тесно связаны, поэтому часто ими занимается один и тот же человек. 

🚀 Веб

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

UX/UI-дизайнеры — узкие специалисты. Профиль веб-дизайнера шире. Он работает с UI, UX и выполняет функции графического дизайнера, бизнес-аналитика и верстальщика.

Карьерный рост и зарплата

Веб-дизайнеры получают в среднем 86 341 ₽ в месяц. Зарплата зависит от региона. Больше всего зарабатывают в Москве, Санкт-Петербурге, Екатеринбурге, Челябинске, Казани. Еще на доход влияет направление, самый высокий — у узких специалистов: UI и UX.

Источник: хабр, второе полугодие 2021 года

Если работать на зарубежный рынок, то средняя зарплата веб-дизайнера в год будет больше — $57 000.

Карьерная лестница:

  • начинающий (junior, джуниор), опыт до года — рисует несложные веб-страницы и добавляет контент, часто обращается за помощью к наставнику;
  • специалист (middle, мидл), от года до трех лет — решает более сложные задачи, например самостоятельно разрабатывает прототип многостраничного сайта;
  • старший специалист (senior, сеньор), от трех лет — контролирует создание сайта от идеи до запуска, обучает команду.

Примеры вакансий разных карьерных ступеней с хедхантера

Требования

«Мягкие» навыки (soft skills)

Это личностные качества, которые помогают решать повседневные рабочие задачи и расти в карьере.

⚡️ Коммуникабельность. Дизайнер создает продукт не один, а в команде с верстальщиком, маркетологом, копирайтером. С ними нужно договариваться, предотвращать конфликты, объяснять позицию. Еще это качество помогает общаться даже с самым требовательным заказчиком. 

⚡️ Эмпатия. Чувствует потребности пользователей, ставит себя на их место, предугадывает реакцию на готовый проект. Понимает, каким сайтом будет удобно пользоваться, а каким нет.

⚡️ Обучаемость. Следит за тенденциями, осваивает графические программы и другие инструменты. Находит способы, как быстрее и лучше решить задачу.

⚡️ Аналитические способности. Ничего не пускает на самотек и не делает наобум. Все решения принимает взвешенно, на основании опыта пользователей, — от цвета кнопки до размера картинки.  

⚡️ Самоорганизованность. Делит проект на этапы, следит за тем, чтобы всё было готово к сроку. Особенно такое качество важно для фрилансеров: помогает справляться с соблазном отложить дела на завтра.

⚡️ Адаптивность к переменам. Команда может менять продукт по результатам исследования, а заказчик — вносить правки. Дизайнеру важно быстро корректировать план работы.

«Жесткие» навыки (hard skills)

К профессиональным навыкам относят владение графическими инструментами и базовые знания в дизайне и веб-разработке:

✅ Основы дизайна. Это виды, жанры, техники графики, использование фотографий и иллюстраций.

✅ Типографика. Нужна, чтобы правильно подбирать шрифт, кегль, регистр.

✅ Композиция. Специалист компонует картинки, текст, кнопки и другие элементы так, чтобы это было и удобно, и эстетично.

✅ Прототипирование. Для подготовки черновой версии продукта, чтобы потом презентовать, редактировать и согласовывать с заказчиком.

✅ Цветовой круг. Дизайнер знает, как разные цвета работают вместе, какие и когда сочетать.

✅ Frontend-разработка. Чтобы понимать, как макет превращают в рабочий продукт.

✅ Графические программы. Например, Adobe Illustrator, Photoshop. В прошлом году популярны были Sketch и Figma. Еще в списке инструменты для адаптивного веб-дизайна — проверять, как выглядят страницы на разных типах устройств. 

Какие инструменты собирались осваивать веб-дизайнеры в 2021 году

Как стать веб-дизайнером с нуля

👨‍🎓 Где учиться

Вузы

В университетах по направлениям «дизайн и программирование», «графический дизайн», «дизайн» дают фундаментальные знания, прививают вкус, закладывают основы. Но «вышка» — это дорого. Например, учеба в НИУ ВШЭ в Москве стоит 700 000 ₽ в год. Зато получите диплом от лучшего российского вуза в категории «Искусство и дизайн» — по версии международного рейтинга QS-2021.

Онлайн-школы

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

За три месяца на курсе «Профессия веб-дизайнер» от Qmarketing Academy вы изучите основы: композицию, цвет, типографику, UX и UI. Освоите программы Figma, Adobe Photoshop, Tilda, Readymag, After Effects. В конце — карьерный блок. Узнаете, чем отличается работа в студии от фриланса, как и где искать клиентов, как выстраивать коммуникацию. Создадите четыре проекта для портфолио — это поможет в поиске работы.

Баннеры и лендинги для Qiwi и «Перекрестка»: учебные проекты выпускников, которые начинали с нуля

2

3

3

📚 Что читать

«Веб-дизайн», Якоб Нильсен. Руководство, как взаимодействовать с пользователями: готовить контент, оформлять страницы, упрощать навигацию и создавать сайты. Книга отвечает на вопрос, что нужно сделать, чтобы клиентам было удобно.

«Не заставляйте меня думать», Стив Круг. Книга с примерами и иллюстрациями, советами, как избежать ошибок и создавать сервисы с пользой для клиента. Основы веб-дизайна и юзабилити — будет понятно и новичку.

📱На что подписаться в телеграме

«Веб-дизайн в Figma»: статьи, дизайн-системы, видеоуроки, плагины и сервисы.

«Веб-дизайнер на удаленке»: советы новичкам по шрифтам, иллюстрациям, интерфейсам и прототипам, коммуникации с заказчиками.

«UI/UX-дизайнер»: канал, чтобы тренировать насмотренность. Выкладывают по два варианта оформления, в комментариях обсуждают, какой правильный и почему.

Где искать работу

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

Пример резюме после курса «Профессия веб-дизайнер» Skypro и Qmarketing Academy

Ищите клиентов на площадках:

  • weblancer.net,
  • godesigner.ru,
  • fl.
    ru,
  • freelancejob.ru.

В телеграм-каналах: 

  • «UI/UX Jobs»,
  • «Точка входа ⚫️ Дизайн-вакансии».

На сервисах по поиску работы:

  • Хабр Карьера,
  • hh.ru,
  • geekjob.ru.

На Geekjob.ru есть удобные фильтры не только по специализациям, но и по узким направлениям

Плюсы и минусы профессии

Плюсы

Минусы

  • Веб-дизайнеры на третьем месте по популярности среди дизайн-направлений в Москве и Санкт-Петербурге, на четвертом — в регионах.
  • Для специалистов уровня мидл есть вакансии с доходом от 100 000 ₽.
  • Необязательно учиться годами в университете. Навыки можно освоить за три месяца на онлайн-курсе и сразу начать зарабатывать.
  • Можно выбрать формат: работать в штате в офисе или на удаленке, вести проекты на фрилансе.
  • Нужно портфолио, без этого сложно найти клиентов.
  • Очень нужно — время и усидчивость, чтобы освоить несколько графических программ. Потом придется постоянно изучать новое, следить за трендами.
  • Уклон в аналитику. Простора для творчества немного. Все решения должны быть основаны на тестах, исследованиях, а не вкусе.

Коротко о профессии

  • Веб-дизайнер оформляет и делает удобными сайты, приложения и программы. В зоне его ответственности — расположение элементов, цвета, шрифты, анимация и другие эффекты. 
  • Специалист должен уметь работать в графических программах, например Sketch и Figma. Разбираться в композиции, типографике, прототипировании. 
  • Средняя зарплата — 86 341 ₽. На доход влияет опыт, регион, специализация.
  • Учатся на веб-дизайнеров в вузах и на онлайн-курсах. Последний вариант дешевле и быстрее. Освоите инструменты с нуля, соберете проекты в портфолио и уже через три месяца начнете зарабатывать.

Курсы и вебинары Веб-дизайнер в Специалисте

Веб-дизайн

Курсы дизайна

От веб-дизайнера требуется умение создать визуально приятное и логичное по сути графическое оформление информации. Для этого, кроме художественного чутья и эстетического вкуса, веб-дизайнеру нужно знание приемов компьютерной верстки, умение использовать графические программы для создания веб-интерфейса в сочетании со способностью обеспечить хорошее юзабилити сайта. Обязательным минимумом является владение HTML и CSS, программами семейства Adobe, умение применять разработки Microsoft для создания графических объектов.

Более международной профессии, чем веб-дизайнер, пожалуй, не найти. Находясь в Москве, веб-дизайнер может сегодня работать на заказчика из штата Техас, через неделю — на крупную немецкую компанию, а через месяц его работодателем станет японский бизнесмен. В сети интернет есть немало иностранных сайтов, поражающих посетителей «импортной» современностью и лаконичностью. На самом деле сделаны они руками веб-дизайнеров — наших соотечественников. Веб-дизайнер — одна из немногих профессий, которая позволяет, по договоренности с работодателем, выполнять необходимую работу без транспортной нервотрепки и посещения офиса, то есть в так называемом «удаленном режиме».

Чтобы быть востребованным на рынке специалистов, успешные веб-дизайнеры постоянно совершенствуют мастерство. Центр «Специалист» при МГТУ им.Н.Э.Баумана проводит обучение как для начинающих веб-дизайнеров, так и для профессионалов, которые хотят повысить свою квалификацию.

  • 05.11.2022

    Другие даты

    Дипломная программа — 264 ак.ч

    Веб — дизайнер со знанием юзабилити (UX/UI)

    Продолжительность: от 3 до 6 месяцев

    Один курс в подарок!

    Шуев

    Роман

    Евгеньевич

    Читать отзывы

    111 690 ₽

    148 930 ₽

    125 890 ₽

    167 930 ₽

  • 05. 11.2022

    Другие даты

    Дипломная программа — 336 ак.ч

    UX/UI — дизайнер. Разработка веб — интерфейсов с использованием Figma 2.0

    Продолжительность: от 4 до 8 месяцев

    Один курс в подарок!

    Шуев

    Роман

    Евгеньевич

    Читать отзывы

    145 390 ₽

    193 920 ₽

    165 690 ₽

    220 920 ₽

  • 20.10.2022

    Другие даты

    Комплексная программа — 124 ак. ч

    Веб — дизайнер

    Вы экономите 33% стоимости третьего курса!

    Гревцов

    Валентин

    Валентинович

    Читать отзывы

    55 990 ₽

    65 970 ₽

    64 490 ₽

    75 970 ₽

  • 20.10.2022

    Другие даты

    Комплексная программа — 140 ак.ч

    Веб — дизайнер + Usability

    Вы экономите 37% стоимости третьего курса!

    Гревцов

    Валентин

    Валентинович

    Читать отзывы

    72 190 ₽

    84 970 ₽

    83 190 ₽

    97 970 ₽

  • 06. 11.2022

    Другие даты

    Комплексная программа — 92 ак.ч

    Специалист по Adobe Photoshop СС

    Вы экономите 49% стоимости третьего курса!

    Морозов

    Кирилл

    Владимирович

    Читать отзывы

    49 190 ₽

    57 970 ₽

    50 890 ₽

    59 970 ₽

  • 20.10.2022

    Другие даты

    Курс — 44 ак.ч

    Уровень 1. Создание сайтов на HTML 5 и СSS 3″> HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3

    Гревцов

    Валентин

    Валентинович

    Читать отзывы

    19 990 ₽

    22 990 ₽

  • 22.10.2022

    Другие даты

    Курс — 24 ак.ч

    Создание лендингов в конструкторе «Тильда»

    Самбурский

    Станислав

    Евгеньевич

    Читать отзывы

    17 990 ₽

    20 990 ₽

  • 06. 11.2022

    Другие даты

    Курс — 32 ак.ч

    Adobe Photoshop CC для MAC и PC. Уровень 1. Растровая графика

    Морозов

    Кирилл

    Владимирович

    Читать отзывы

    15 990 ₽

    16 990 ₽

  • 14.11.2022

    Другие даты

    Курс — 16 ак.ч

    Дизайн — мышление

    Тимина

    Татьяна

    Анатольевна

    Читать отзывы

    9 990 ₽

    11 990 ₽

  • 05. 11.2022

    Другие даты

    Курс — 30 ак.ч

    Adobe Photoshop СС/CS6 для MAC и PC. Уровень 2. Профессиональная ретушь

    Морозов

    Кирилл

    Владимирович

    Читать отзывы

    17 990 ₽

    19 990 ₽

  • 05.11.2022

    Другие даты

    Курс — 24 ак.ч

    Основы дизайна

    Шуев

    Роман

    Евгеньевич

    Читать отзывы

    10 990 ₽

    11 990 ₽

  • 24. 10.2022

    Другие даты

    Курс — 48 ак.ч

    Веб — дизайн. Визуальное оформление и верстка сайтов

    Павлов

    Юрий

    Евгеньевич

    Читать отзывы

    29 990 ₽

    35 990 ₽

  • 24.10.2022

    Другие даты

    Курс — 36 ак.ч

    Figma для UI/UX дизайнера

    Павлов

    Юрий

    Евгеньевич

    Читать отзывы

    21 990 ₽

    24 990 ₽

  • 24. 10.2022

    Другие даты

    Курс — 24 ак.ч

    Дизайн интерфейсов в программе Adobe XD

    Павлов

    Юрий

    Евгеньевич

    Читать отзывы

    11 990 ₽

    13 990 ₽

  • 24.10.2022

    Другие даты

    Курс — 32 ак.ч

    Дизайн интерфейсов в программе Sketch

    Павлов

    Юрий

    Евгеньевич

    Читать отзывы

    23 990 ₽

    24 990 ₽

  • 24. 10.2022

    Другие даты

    Курс — 48 ак.ч

    Юзабилити сайтов. Проектирование веб — интерфейсов

    Павлов

    Юрий

    Евгеньевич

    Читать отзывы

    34 990 ₽

    38 990 ₽

  • 01.12.2022

    Другие даты

    Курс — 36 ак.ч

    Adobe Animate 2020.

    Анимация и баннеры

    Маркелов

    Эдуард

    Александрович

    Читать отзывы

    16 990 ₽

    19 990 ₽

  • 05.11.2022

    Другие даты

    Курс — 36 ак.ч

    Adobe Photoshop СС/CS6 для MAC и PC. Уровень 2. Расширенные возможности

    Морозов

    Кирилл

    Владимирович

    Читать отзывы

    23 990 ₽

    24 990 ₽

  • 05. 11.2022

    Другие даты

    Курс — 24 ак.ч

    Adobe Photoshop СС/CS6. Уровень 3. Публикация изображений (печать и web)

    Морозов

    Кирилл

    Владимирович

    Читать отзывы

    17 990 ₽

    17 990 ₽

  • Звоните по тел.
    +7 (495) 640-48-43

    Курс — 24 ак.ч

    Уровень 3. Графический дизайн. Профессиональные приемы создания и обработки изображений.»> Adobe Photoshop СС/CS6 для MAC и PC. Уровень 3. Графический дизайн. Профессиональные приемы создания и обработки изображений.

    11 990 ₽

    12 990 ₽

Веб-дизайнер | КПиД ИТМО

федеральное государственное автономное образовательное учреждение высшего образования

Профессиональная переподготовка, 370 ак.часов/6 месяцев

Записаться на курс

Паспорт курса

Описание курса

Отзывы выпускников

Аннотация курса

Профессиональные стандарты

Предварительные требования

Уверенный пользователь ПК.

Программа курса

  • Растровая графика Adobe Photoshop (50 часов)
    • Тема 1. Основные сведения о программе. Интерфейс программы

      Типы обрабатываемых изображений. Свойства пиксельных изображений. Операции обработки цифровых изображений. Начальное окно Adobe Photoshop и элементы интерфейса. Меню. Панель быстрого доступа. Настройка интерфейса — рабочие среды. Панель настройки инструментов. Палитрыпанели. Диалоговые окна. Управление открытыми документами. Упорядочивание документов. Создание копии рабочего окна. Операции с файлами. Увеличение и уменьшение изображения на экране. Режимы отображения рабочего экрана. Вывод на экран и отключение видимости элементов интерфейса. Получение информации об изображении. Выбор и использование инструментов. Настройки и установки программы.

    • Тема 2. Элементарные действия с изображением

      Параметры нового документа. Размеры изображения. Размер холста (канвы). Обрезка изображения — кадрирование. Вращение изображения. Отзеркаливание или отражение изображения. Отмена действий.

    • Тема 3. Коррекция изображений

      Палитра Info (Инфо). Автоматическая коррекция. Простые решения по коррекции. Тоновая коррекция изображений. Характеристики тона изображения. Анализ гистограмм. Команды тоновой коррекции. Использование команды Brightness/Contrast (Яркость/Контраст). Оценка тона изображения с помощью команды Levels (Уровни). Коррекция тона изображения с помощью Curves (Кривые). Обработка 8- и 16-битных файлов. Цветовая коррекция. Изменение резкости и четкости. Добавление шума, удаление погрешностей.

    • Тема 4. Редактирование изображения

      Использование основного и фонового цвета. Кодировка цвета. Калибровка монитора. Управление цветом. Определение цвета с помощью диалогового окна. Синтез цвета с помощью палитры Color (ЦветСинтез цвета). Палитра Swatches (ОбразцыКаталог). Основные параметры рисующих инструментов. Инструменты Pencil (Карандаш), Brush (Кисть) и Eraser (Ластик). Инструмент Paint Bucket (Заливка). Инструмент Gradient (Градиент).. Слои фигуры. Инструменты ретуши.

    • Тема 5. Работа с выделенными областями

      Создание выделения с помощью инструментов. Геометрические выделения. Растушевка границы выделения. Выделение области, основанной на цвете. Комбинирование инструментов выделения. Команды меню Select. Редактирование выделенной области с использованием альфа-каналов. Перемещение границ выделенной области. Модификация выделенной области командами подменю Modify (Модификация). Перемещение выделенной области. Копирование выделенных областей. Копирование выделенной области при перетаскивании. Удаление выделенных пикселов. Трансформирование изображения в выделенной области.

    • Тема 6. Работа со слоями

      Послойная организация изображения. Палитра Layers (Слои). Использование палитры Layers (Слои). Настройка прозрачных областей слоя. Режимы рисования и наложения слоев. Применение эффектов и стилей. Применение к слою стиля. Smart-объекты. Деформирование изображений. Объединение и сведение слоев. Композиции слоев.

    • Тема 7. Корректирующие слои. Маскирование слоев

      Корректирующие слои в палитре Layers (Слои). Создание корректирующих слоев. Палитра Adjustments (Коррекция). Корректирующие слои тоновой коррекции. Корректирующие слои цветовой коррекции. Корректирующий слой Vibrance (Вибрация). Корректирующий слой Black and White (Белое и черное). Корректирующий слой Photo Filter (Фотофильтр). Корректирующий слой Channel Mixer (Смешение каналов). Корректирующие слои Invert (Инвертирование), Threshold (Порог) и Posterize (Постеризовать). Корректирующий слой Gradient Map (Карта градиента). Маскирование слоев. Создание слой-маски. Палитры для работы с масками. Диалоговое окно Refine Mask (Уточнить маску).

    • Тема 8. Создание и обработка текстов

      Основные термины. Ввода текста. Типы текста, их создание и использование. Палитры форматирования в Adobe Photoshop. Обработка маскированного текста. Обработка векторного текста. Создание из текста рабочего контура. Преобразование текста в кривые. Изменение формы текста. Создание текста вдоль контура. Создание текста внутри контура. Растеризация текстового слоя.

    • Тема 9. Изображения для интернета

      Графические форматы изображений в Интернете. Оптимизация отдельных изображений. Оптимизация формата JPEG. Оптимизация формата GIF. GIF-анимация. Видео и видеослои. Автоматизация действий.

    • Тема 10. Подготовка изображений для печати

      Размеры пиксельной графики для полиграфии. Использование форматов файлов для полиграфии. Формат TIFF. Формат EPS. Формат PDF. Использование формата RAW. Создание контуровпутей. Модель кривой Безье. Предварительное цветоделение. Параметры конвертации в CMYK. Рекомендуемые установки цветоделения. Печать из Adobe Photoshop.

  • Векторная графика AdobeIllustrator (35 часов)
    • Тема 1. Рабочая область и создание стандартных фигур и линейных объектов.

      Введение. Запуск и интерфейс программы. Создание и открытие документов. Установки документа. Использование инструментов, отображение рисунка. Палитры. Сохранение документа. Использование шаблонов документов. Создание основных геометрических фигур. Создание линейных объектов.

    • Тема 2. Выделение, расположение и размещение объектов.

      Инструменты выделения. Сочетание фигур. Группирование объектов. Расположение объектов. Перемещение и копирование объектов. Удаление, фиксирование и скрытие объектов.

    • Тема 3. Работа с контурами.

      Инструменты для создания контуров. Элементы векторного контура. Создание контуров инструментом Pen. Выделение контуров и опорных точек. Изменение кривизны контура в точке. Использование инструментов группы Pencil. Инструмент Reshape. Команды обработки контуров.

    • Тема 4. Работа с цветом.

      Цветовые модели, используемые в программе. Цветовая модель RGB. Цветовая модель CMYK. Цветовая модель HSB. Цветовая модель Grayscale. Присваивание цвета объектам. Градиентные заливки. Конвертирование цветов моделей RGB и CMYK. Инструменты Live Paint Bucket и Live Paint Selection. Декоративные заливки

    • Тема 5. Преобразование объектов и контуров.

      Перемещение объектов в процессе их создания. Перемещение объектов с помощью палитры Control. Трансформирование объектов. Использование инструментов трансформирования. Трансформирование изображений с помощью палитры Transform. Использование инструментов группы Warp. Команды меню Effect.

    • Тема 6. Превращения, оболочки, трехмерные эффекты.

      Превращения. Оболочки. Обтравочные маски. Трехмерное представление объектов.

    • Тема 7. Работа с текстом.

      Инструменты для работы с текстом. Параметры символов. Заголовочные и абзацные текстовые блоки. Размещение текста в замкнутом объекте. Размещение текста вдоль контура. Обтекание текстом графических объектов. Отображение текста плашками. Преобразование текста в кривые. Текстовые стили.

  • Основы веб-технологий (50 часов)
    • Тема 1. Введение в HTML. Структура страницы.

      Понятие HTML. Основы работы глобальной сети Интернет. Понятие веб-сервера. Статичные и динамичные сайты. Основные типы сайтов. Обзор современных стек технологий HTML и CSS. Базовая структура HTML. Варианты разметки страницы. Основные блоки HTML-страницы.Создание гиперссылок и работа с ними. Основы работы с гиперссылками. Взаимосвязь между страницами статичного веб-сайта.

    • Тема 2. Размещение изображений, списков и таблиц

      Размещение изображений на веб-странице. Упорядоченные и неупорядоченные списки. Основы работы с таблицами. Отрывки прошлого: старые сайты верстали в таблицах.

    • Тема 3. Медиа-файлы. Iframe. Формы

      Размещение на своих страницах звуковых и видео-файлов.Внедрение внешних HTML-страниц. Взаимодействие ссылок с iframe-элементами.Текстовые поля, радио-кнопки, флажки/чекбоксы, элемент выбора select и их атрибуты. Создание формы обратной связи.

    • Тема 4. Основы каскадных таблиц стилей CSS.

      Основы работы с CSS. Подключение файла стилей. Базовые понятия: селектор, свойство, каскад, наследование, единицы измерения. Применение CSS-свойств к оформлению изображений.

    • Тема 5. Макетирование страницы с CSS

      Верстка страницы по макету. Построение структуры страницы. Высота и ширина колонок. Свойства float, display.

    • Тема 6. Адаптивные html-страницы

      @media, медийные запросы (@mediaqueries) для страниц, mediafeature.

    • Тема 7. Работа со шрифтами

      @font-face, GoogleFonts, Единицы измерения для работы со шрифтами и html-элементами.

    • Тема 8. CSS-анимация.
    • Тема 9. Подготовка, размещение и поддержка сайта в сети

      Выбор хостинга. Основы работы с FTP-клиентами. Использование тега meta.

    • Тема 10. Гибкая работа со страницами сайта

      Проверка валидности верстки. Языки серверного программирования и генерация динамических HTML-страниц. Возможности JavaScript по работе с HTML-страницами и CSS-свойствами.

  • Основы JavaScript (40 часов)
    • Тема 1. Введение в JavaScript

      Типы данных. Операторы. Инструкции и выражения. Переменные и константы.

    • Тема 2. Конструкции ветвления и циклы

      Конструкции ветвления логики программы (if…else, switch). Циклы: с предусловием, постусловием и арифметический.

    • Тема 3. Функции

      Понятие функции. Объявление функции. Аргументы функции. Возврат значений. Области видимости. Стрелочные функции. Анонимные функции.

    • Тема 4. Массивы и объекты

      Понятие объект (Object). Свойства объекта. Методы объекта. Массивы. Свойство и методы функции. Объект String и его аргументы. Объект Math. Функция parseInt(). Функция parseFloat(). Статические функции объекта Math.

    • Тема 5. Клиентский JavaScript. Объект Window

      Объекта Data. Работа с таймерами. Свойства и методы объекта Window. Управление поведением Window. Объект Location. Объект History. Объект Navigator.

    • Тема 6. Клиентский JavaScript. Объектная модель документа: DOM. Работа с HTML элементами.

      Причины использования DHTML. DOM (DocumentObjectModel — объектная модель документа). Доступ к узлам DOM. Доступ по идентификационному номеру (ID) . Доступ по атрибуту name. Доступ по имени дескриптора . Доступ и изменение класса через свойство className. Получение информации об узле. Перемещение по иерархическому дереву DOM. Метод removeChild(). Удаление элементов. Методы createElement() и appendChild(). Создание и добавление элементов. Методы insertBefore(). Создание и добавление элементов. Метод createTextNode(). Создание текстовых элементов. Метод setAttribute(). Добавление атрибутов. Метод cloneNode(). Клонирование элементов. Метод replaceChild(). Замена элементов. Свойство innerHTML. Изменение фрагментов кода HTML. Использование CSS стилей в сценариях JavaScript. Соглашения об именах: CSS-атрибуты в JavaScript. Работа со свойствами стилей. DHTML-анимация.

    • Тема 7. Клиентский JavaScript. Cookie

      Описание cookie. Cookie в браузере.

    • Тема 8. Клиентский JavaScript. Формы и обработка событий

      Элементы управления и объекты. Быстрый доступ к объектам. Динамическое изменение значений атрибутов. Изменение элементов на основе значений, указанных пользователем. Динамическое изменение списка вариантов. Проверка выбранных флажков. Изменение элементов перед отправкой формы на сервер. Использование встроенных функций JavaScript. Отключение элементов. Элементы только для чтения.

  • Современные технологии верстки (40 часов)
    • Тема 1 CSS-фреймворки

      CSS-фреймворки: Bootstrap и Foundation. Базовые возможности фреймворков.

    • Тема 2 Контейнеры. Система сеток Bootstrap

      Контейнеры. Система сеток Bootstrap. PSD-файл для разработки макета.

    • Тема 3. Оформление HTML-элементов

      Оформление списков, шрифтов, таблиц и изображений с помощью Bootstrap.

    • Тема 4. Компоненты Bootstrap

      Кнопки. Выпадающие элементы. «Хлебные крошки».

    • Тема 5. Формы

      Всплывающие формы. Формы обратной связи. Всплывающие сообщения.

    • Тема 6. Встраивание медиа-файлов

      Границы. Иконки. Встраивание медиа-файлов на HTML-страницы.

    • Тема 7. Flexbox. Сетка Flexbox

      Понятие Flexbox. Основы работы с Flexbox.

    • Тема 8. JavaScript и события Bootstrap

      Понятие JavaScript. Базовые возможности языка. Взаимодействие с Bootstrap. Управление поведением bootstrap-компонент через JS.

  • Проектирование интерфейса пользователя (UI-проектирование) (40 часов)
    • Тема 1: Основы проектирования интерфейсов.

      История экранных интерфейсов. Общие понятия интерфейса и его элементы. Интерфейсы сегодня, тенденции и тренды. Проектировщик интерфейсов, кто он? Поиск референсов, графические стоки.

      Практика: Создание простого лэндинга по примеру. Повторить стиль одной страницы, изменив название и основное изображение.

    • Тема 2: Элементы интерфейсов.

      История и тенденции развития экранных интерфейсов, технологический аспект. Приемы для создания нужного настроения на сайте. Первостепенность задачи при проектировании. Значимость различных элементов. Примеры стилей и их применения. Проектный подход, рисование кнопок и иконок.

      Практика: Создание сета элементов в различных стилях (для 2-х сайтов, игрового и продающего). Отрисовать по 2 иконки и по 2 кнопке для каждого из сайтов.

    • Тема 3: Модульные сетки в экранных интерфейсах. FIGMA.

      Экранная верстка. Модульные сетки и их применение. Модульные сетки и их адаптивность. С чего начинать макет интерфейса?

      Практика: Создание макетов простой страницы на основе модульной сетки в Photoshop и в Figma.

    • Тема 4: Лендинги и сложные макеты в web, адаптивность.

      Отличия простого и сложного web-дизайна. Зачем нужен лендинг и в чем его особенности? Проектирование полных страниц в Figma, мобильный интерфейс.

      Практика: Создание лендинга сайта и его мобильной версии.

    • Тема 5: Экранная типографика. Текст в web

      Текст, как составляющая удобства использования или usability. Экранная типографика, ее особенности. Текст в web, его значимость для пользователя и для систем. Порядок элементов, логика взаимодействия.

      Практика: Доработайте контент своего сайта. Проверьте, чтобы тексты и короткие тексты, заголовки, были оформлены верно. Соблюдая общий стиль отрисуйте экраны взаимодействия, состояния кнопок и элементов, чтобы все было готово к анимации.

    • Тема 6: Элементы Figma.

      Figma и порядок организации проекта.

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

    • Тема 7: Анимация и переходы в Figma.

      Практика: создать анимированный контент, записать его с экрана в формат gif и прислать ссылку на папку с gif-анимацией внутри. Постарайтесь максимально анимировать все возможные кнопки, слайдеры, выезжающие и раскрывающиеся экраны.

    • Тема 8: Презентация проекта.

      Практика: Полная отладка макета, создание десктопной и мобильной версий сайта. Запись анимации и презентация макета.

  • Проектирование пользовательского опыта (UX-проектирование) (30 часов)
    • Тема 1. Философия и научная методология в дизайне
    • Тема 2. Качественные и количественные методы исследования – предложить и использовать количественный метод для заданной задачи. (5 задач)
    • Тема 3. Психология человеко-компьютерного взаимодействия – Создание карты пользователя (персона), другие методики описания пользователя
    • Тема 4. Пользовательские истории (когда… я хочу… я могу…) – написать историю (3-5 шт)
    • Тема 5. Проектирование пользовательского опыта – создание сценария пользовательского опыта
    • Тема 6. Проектирование продукта
    • Тема 7. Юзабилити-тестирование
    • Тема 8. Анализ и оценка пользовательского опыта
    • Форма аттестации: презентация проекта.

      Проект включает в себя качественные и/или количественные методы исследования, создание карты пользователя (персона), пользовательские истории, сценарии пользовательского опыта, проектирование, юзабилити-тестирование, отчет по оценке пользовательского опыта, предложения по улучшению.

  • Создание сайта на конструкторе Tilda 2 (40 часов)
    • Конструктор Тильда

      О назначении конструкторов. Панель управления сайтами. Выбор тарифа. Экспорт кода. Создание сайта. Настройки сайта. Создание страниц. Список страниц. Настройки отдельной страницы. Интерфейс редактирования страницы. Предпросмотр и публицикация страницы. Списки страниц. Техническая поддрежка.

      Практика: создание учетной записи, сайта и страницы сайта.

    • Стандартные блоки

      Хэдер и футер. Обложка. Блок о проекте. Добавление изображения. Добавление галлереи. Блок преимущества. Команда сайта. Список страниц. Добление отзывов. Расписание для сайта мероприятия. Этапы работы над проектом. Контакты. Подключение карт. Добавление соцсетей. Сетка парнеров.

      Практика: создание лэндинга из стандартных блоков на выбранную тему.

    • Zero-block

      Создание нулевого блока. Панель навигации. Доступные элементы. Работа с текстом. Работа с изображениями. Шейпы. Добавление кнопок. Работа с видео. Работа с тултипами. Вставка кода. Добавление формы. Размеры в пикселях и процентах. Цвет и границы и тени. Порядок слоев. Пару слов о lazyload картинок.

      Практика: создание интеренет-магазина на выбранную тему.

    • Сайт

      Настройка домена. Выбор главной страницы. Стастистика сайта. Googleanalytic и Яндекс метрика. Настройка HTTPS. Настройка шрифтов, цвета для всего сайта. Seo — рекондамендации. Экспорт сайта. Cервисы приёма данных из форм. Платежные системы. Выбор шапки и подвала. Действия с сайтом. Ограничение доступа. Личный кабинет. HEAD для всего сайта. Кастомизация СSS для всего сайта.Ключи от API карт. Фавикон.

      Практика: исправление работ, созданных во втором и третьем блоках по SEO-рекоммендациям. Подключение платежной системы. Подключение карты. Добавление фавикона.

    • Анимация

      Рассмотрение возможностей анимации в Тильда. Анимация в стандартных блоках. Basic в ZeroBlock. Длительность, задержка, увеличение, просмотр. Параллакс. Фиксирование. Step-by-step в ZeroBlock. События: элемент на экране, блок на экране, по скроллу, по ховеру, по клику. Старт анимации. Зацикливание. Шаги. Перемещение, масштаб, опасность, поворот, задержка.

      Практика: добавление анимации к работам, созанным во втором и третьем блоках + бонус (выполнение задания на анимацию скроллинга)

    • Дополнительно

      Полезные скрипты с mo-tilda. Как персонализировать страницу «Спасибо» в Tilda. Применяем градиент к заголовку в Tilda. Как создать фиксированную кнопку из ZeroBlock в Tilda. Фоновое видео в Zero-блоке. Создание калькулятора для сайта. Эффект печатной машинки. Добавление собсвенного скрипта.

      Практика: доработка страницы спасибо для интеренет-магазина, добавление видео в zero-блок лэндинга.

  • Дипломное проектирование (40 часов)
    • Защита дипломной работы (5 часов)

      Преподаватели курса

      Сивинский Станислав Андреевич

      Веб-разработчик Senior, преподаватель

      Юлия Безбах

      Дизайнер, UI/UX-дизайнер, преподаватель

      Пономаренко Сергей Иванович

      Дизайнер, член союза дизайнеров, преподаватель

      Флеров Александр Викторович

      Дизайнер-верстальщик, старший преподаватель

      Государев Илья Борисович

      Веб-разработчик Senior, преподаватель, к. п.н., доцент

      Светлана Деркунская

      Дизайнер, преподаватель

      Дарья Полякова

      Дизайнер, преподаватель

      Карлов Петр Геннадьевич

      приглашенный эксперт

      Информация © 1993ー2022 Университет ИТМО

      Разработка: выпускник ОЦКПиД Сивинский Станислав

      Дизайн: выпускник ОЦКПиД Марина Хренкова

      веб-дизайнов, тем, шаблонов и графических элементов для загрузки на Dribbble

      1. Посмотреть агентство / Дизайн веб-сайта

        Агентство / дизайн веб-сайта

      2. Просмотр веб-сайта цифрового агентства

        Сайт цифрового агентства

      3. Посмотреть концепцию дизайна домашней страницы Marketcapital

        Концепция дизайна домашней страницы Marketcapital

      4. Посмотреть дизайн целевой страницы недвижимости

        Дизайн целевой страницы недвижимости

      5. Концепция веб-дизайна Момату

      6. Посмотреть Chalatix — целевую страницу агентства креативного дизайна

        Chalatix — Целевая страница агентства креативного дизайна

      7. Посмотреть дизайн целевой страницы Smilewallet

        Дизайн целевой страницы Smilewallet

      8. View Trioli — Креативное цифровое агентство

        Trioli — Креативное цифровое агентство

      9. Посмотреть концепцию заголовка Hero

        Концепция заголовка героя

      10. Посмотреть целевую страницу цифрового агентства

        Целевая страница Digital Agency

      11. Посмотреть веб-дизайн: страница продукта

        Веб-дизайн: страница продукта

      12. Посмотреть целевую страницу — Паулини

        Целевая страница — Paulini

      13. Просмотр дизайна веб-сайта: целевая страница

        Дизайн веб-сайта: целевая страница

      14. Просмотреть Fintory — новый веб-сайт

        Финтори — Новый сайт

      15. Посмотреть сайт маркетингового агентства Growfast!

        Growfast- Сайт маркетингового агентства!

      16. Посмотреть 🥳 CommandBar

        🥳 CommandBar

      17. Посмотреть JustRun — Дизайн целевой страницы

        JustRun — Дизайн целевой страницы

      18. Посмотреть дизайн целевой страницы доставки еды

        Дизайн целевой страницы доставки еды

      19. Посмотреть домашнюю страницу Landify

        Домашняя страница Landify

      20. Посмотреть веб-дизайн: целевая страница

        веб-дизайн: целевая страница

      21. View Bijem — Веб-сайт цифрового агентства

        Bijem — Сайт цифрового агентства

      22. Посмотреть портфолио Design Exploration

        Разработка портфолио

      23. Просмотр дизайна веб-сайта: пользовательский интерфейс главной страницы целевой страницы

        Дизайн веб-сайта: целевая страница, домашняя страница, пользовательский интерфейс

      24. Посмотреть веб-сайт Релло

        Сайт Релло

      Зарегистрируйтесь, чтобы продолжить или войдите

      Идет загрузка еще…

      Веб-дизайн | Техническая степень

      Отпечатано 20. 10.2022

      • Доступность программы
      • Сметная стоимость
      • Прием
      • Результаты программы

      Доступность программы *

      Веб-дизайн

      Адреса Осень 2022 Весна 2023 Лето 2023 Осень 2023

      Эпплтон

      Онлайн

      Некоторые курсы могут быть доступны в нескольких местах.

      Ключ