взрывной старт / Бесплатный курс по веб-дизайну
Старт: 17 ноября
UX/UI
Бесплатно
UX/UI
Ты обучишься основам веб-дизайна и работе в Figma. Быстрый бесплатный курс поможет сделать первые работы для портфолио и научиться зарабатывать на полученных знаниях.
Программа обучения
Один автор курса – единый уровень и качество
Андрей Гаврилов
Основатель WAYUP и дизайнер интерфейсов
- Опыт работы в сфере веб – 10 лет
- Зарабатывает на фрилансе $3000-$5000/мес.
- Путешествует и ведет блог
Обучение в типичной онлайн-школе работает по принципу:
Смотришь видео
Делаешь задание
Получаешь фидбэк
Мы разработали онлайн-платформу, которой никогда не будет у других.
Обаятельные практики, с которыми не скучно
Люди – ключевой актив WAYUP. Все преподаватели являются нашими друзьями. Настоящих друзей не бывает много, поэтому у нас всего 5 авторов и 9 курсов. Наставники на обучении – это вторые преподаватели. Они проверяют твои работы и поддерживают тебя каждый день.
Ну, а менеджер «Службы заботы» всегда на связи по телефону или в мессенджере. Он узнает, почему ты задерживаешь сдачу очередной работы, или ответит на вопросы по новому курсу, который ты хочешь пройти.
- Преподаватель
- Наставник
- Куратор
- «Служба заботы»
01
Наставник
Он все знает.
02
Видеоразборы
Ты получишь подробный видеоразбор каждого сданного ДЗ. В WAYUP нет ограничений по количеству и длительности видеоразборов. Смотри, анализируй, исправляй.
03
Команда
Грандиозные изменения создаются в командах. Один в поле не воин. На каждом потоке мы разбиваем студентов на команды с наставником во главе. Поддержка, общение, новые друзья – все это в команде.
04
Мастермайнды
Лучший инструмент для работы над собой и решения любых вопросов. Регулярные созвоны в Google Meet с командой и наставником-модератором помогут ставить верные цели и брать от обучения максимум.
Регистрация на курс
Веб-дизайнер: взрывной старт
Длительность
3 дня
Старт
17 ноября
960
Пользователей зарегистрировались на курс за последние 7 дней
Ответы на твои вопросы
Этот курс действительно бесплатный?
Да. Никаких скрытых платежей или доплат в будущем. Бесплатные занятия и бесплатная проверка домашних заданий.
Какой уровень в веб-дизайне нужен для обучения на этом курсе?
Этот курс погружает в веб-дизайн с нуля. Никаких специальных знаний не требуется. Главная цель курса: научить делать несложный дизайн в Figma, дать понимание базовых принципов дизайна и помочь разобраться, хочешь ли ты сделать веб-дизайн своей будущей профессией.
Я смогу начать зарабатывать после этого курса?
Да, однако, важно понимать, что курс дает всего лишь основы и заработок после него будет соответствующим. Больше практики и опыта – больше возможностей получать интересные проекты.
В какое время проходят занятия и какой график обучения?
Все занятия заранее подготовлены и записаны. Доступ к ним открывается утром или вечером, однако смотреть их можно в любое время. Мы выпускаем около 4-х часов видеозанятий в неделю. В остальное время необходимо работать выполнять домашние задания, проходить тесты, общаться с участниками и консультироваться с наставником.
Я могу начать обучение в любой момент?
У курса всегда есть дата старта. Ее нужно дождаться. Даты, дедлайны, границы – это принципиальный аспект обучения в WAYUP. Студенты не предоставлены сами себе, а следуют четкому расписанию. Это позволит нашей команде быть уверенными, что мы не расходуем даром ни минуты твоего времени.
Смогу ли я совмещать курс с работой или учебой?
Да, так как занятия в среднем длятся по 30 минут, а на выполнение одного домашнего задания нужно около 30-60 минут.
Нет ответа на твой вопрос?
Почему выбирают нас
Бутиковый формат.Мы редко создаем новые курсы. Мы совершенствуем существующие.
Комьюнити.Сотни тысяч людей подписаны на нас в социальных сетях и учатся в нашей эко-системе.
А еще, мы
верим в тебя.
Лет на рынке
Проходят курсы на сайте
«Под капотом» – технологии и крутая команда
Выпускника платных курсов
А еще, мы
верим в тебя.
Бесплатный курс «Экспресс-курс по веб-дизайну. Создаём сайт за три дня»
Интенсив завершен, но вы можете посмотреть его в записи
Электронная почта
Заявка не отправлена! Похоже произошла ошибка.
Попробуйте отправить снова или перезагрузите страницу.
Вы познакомитесь с профессией веб-дизайнера, научитесь общаться с заказчиками и создавать сайты. Узнаете, как зарабатывать на веб-дизайне и сможете сделать первый шаг к новой востребованной профессии.
Кому подойдёт интенсив
Новичкам в веб-дизайне
Поймёте, чем хороший веб-дизайн отличается от плохого. Научитесь самостоятельно делать макеты сайтов в Figma и общаться с заказчиками. Узнаете, как зарабатывать с помощью веб-дизайна. Создадите первый проект для портфолио.
Дизайнерам из смежных областей
Узнаете, как применить свои знания в веб-дизайне. Научитесь создавать сайты в Figma, дополните портфолио крутым кейсом и сделаете первый шаг к карьере в перспективном направлении дизайна.
Вы научитесь
Делать дизайн-макеты сайта в Figma
Изучите популярный дизайнерский сервис Figma. Освоите панель инструментов, горячие клавиши и работу со слоями.
Создавать структуру сайта
Научитесь анализировать другие сайты и выбирать удачную структуру для своих проектов. Создадите основу своего дизайна.Подбирать референсы
Узнаете, где искать референсы и как использовать их в своей работе. Повысите уровень насмотренности.Разрабатывать дизайн-концепцию сайта
Научитесь делать крутой дизайн-макет на основе структуры и референсов.Работать с заказчиками
Узнаете, где искать клиентов и как понять, чего они хотят. Научитесь заключать договоры и избегать большого количества правок.
Инструменты, которые вам понадобятся
Чтобы сделать практическое задание интенсива, вам понадобится Figma. Вы можете установить десктопную версию или работать прямо в браузере. Просто создайте аккаунт в Figma и пользуйтесь бесплатным тарифом. Ссылку на официальный сайт Figma мы пришлём в письме после регистрации на интенсив.
Программа
Урок 1
Теория веб-дизайна.
Начинаем работать над проектом- Задачи и обязанности веб-дизайнера.
- Анализ конкурентов.
- Определяем структуру проекта.
- Создаём черновой прототип.
- Топ ресурсов по поиску референсов.
- Создаём дизайн-концепцию в Figma.
Урок 2
Дорабатываем проекты по веб-дизайну в Figma
- Продолжаем работать над макетом.
- Ошибки начинающих дизайнеров.
- Чем хороший дизайн отличается от плохого.
Урок 3
Подводим итоги интенсива «Веб-дизайн за 3 дня»
- Проводим ревью работ.
- Награждаем победителей.
Начинаем работать над проектомПреподаватель
Работы преподавателя
Получить доступ к записи бесплатного интенсива
Заявка не отправлена!
Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.
Электронная почта
Нажимая на кнопку, я соглашаюсь на обработку персональных данных и с правилами пользования Платформой
Спасибо!
Ваша заявка успешно отправлена
БЕСПЛАТНЫЕ Курсы и учебные курсы веб -дизайна
University
Try Webflow — это бесплатно
Учетная запись
Избранные курсы
New
Webflow 101 Crash Cours обзор основ и приступайте к созданию своего первого веб-сайта без изучения или написания кода.
NEW
Курс веб-дизайна для фрилансеров
Новичок
«Путешествие фрилансера» — это бесплатный всеобъемлющий курс, который поможет вам построить успешную карьеру фрилансера в веб-дизайне.
НОВИНКА
21-дневный курс по дизайну портфолио
Начинающий — Продвинутый
Создание и визуальный дизайн веб-сайта с полным портфолио в течение 21 дня.
НОВИНКА
Figma — Webflow
Начинающий — Продвинутый
Изучите весь процесс проектирования от идеи до конечного результата, пока мы познакомим вас с Figma, Cinema 4D, Octane и Webflow.
Получите сертификат Webflow
Проверьте свои знания на наших первых экзаменах в нашей программе сертификации *Примечание: сертификаты не требуются для путешествий во времени
Узнайте больше о сертификатах Webflow web
Начальный — средний
Узнайте о специальных возможностях в Интернете и о том, как создавать инклюзивные и доступные сайты без написания кода.
НОВИНКА
Перемещение вашего бизнеса в Интернет
Новичок
Бесплатный курс о том, как вывести свой бизнес в Интернет. Обслуживайте больше клиентов и получайте больше прибыли в этой новой среде.
НОВИНКА
Электронная торговля Webflow
Начинающий — средний уровень
Узнайте, как построить и спроектировать магазин электронной коммерции Webflow. Настройте каждую деталь и запустите полнофункциональный интернет-магазин — без написания кода.
NEW
Основы SEO
Новичок
Обзор основ поисковой оптимизации (SEO) и лучших практик — узнайте, как оптимизировать свой контент с самого начала.
НОВИНКА
Система управления контентом и динамический контент
Начальный — средний уровень
Узнайте, как использовать Webflow CMS для создания полностью настраиваемых веб-сайтов на основе динамического контента и определения структуры и стиля контента.
НОВИНКА
Полный курс веб-дизайна
Начальный — средний
От основ до продвинутых тем — научитесь создавать сайты в Webflow и станьте дизайнером, которым всегда хотели быть.
Продвинутые курсы
Сетка CSS в Webflow
Средний уровень
Обзор сетки CSS. Используйте макет сетки в Webflow, чтобы получить больше контроля над вашими проектами и быстрее создавать мощные адаптивные макеты.
Макет и позиционирование CSS
Средний — продвинутый
Погрузитесь в мир макетов HTML и CSS — узнайте, как они работают вместе, и получите обзор свойств отображения, таких как встроенный блок и flexbox.
Стилизация CSS
Промежуточный уровень
Познакомьтесь поближе со всеми творческими возможностями стилей, которые предлагает CSS. Узнайте, как визуально стилизовать элементы с помощью Webflow.
Руководство клиента по редактору
Промежуточный уровень
Это руководство клиента по редактору Webflow. Поделитесь этими уроками, чтобы ваши клиенты начали работать.
Полная сборка сайта
Промежуточный уровень
Узнайте, как спроектировать и разработать веб-сайт на основе CMS, созданный с учетом потребностей вашего клиента и его аудитории, и провести успешный запуск.
Курс «Взаимодействия и анимация»
Средний — продвинутый
Узнайте, как анимировать несколько элементов, управляемых на одной временной шкале, — воплотите свои проекты в жизнь с помощью богатых последовательностей взаимодействий и анимации.
Веб-анимация с помощью After Effects и Lottie
Средний уровень
Создавайте анимацию в Adobe After Effects — отраслевом стандарте анимированной графики. Встраивайте и анимируйте их на своем сайте Webflow.
Веб-элементы
Средний уровень
Подробный обзор строительных блоков и элементов, которые Webflow предлагает вам — начните уверенно создавать веб-сайты визуально.
Доступность в Интернете | Webflow University
Есть причина, по которой Apple, Википедия и MDN — есть причина, по которой они используют структуру CSS на своих производственных сайтах (за исключением закругленных кнопок Apple). Но когда вы применяете контур CSS к чему-либо, он создает контур вокруг этого элемента.
В этом уроке мы рассмотрим ВСЕ. Чем это отличается, как мы можем использовать состояние Focused (клавиатура), чтобы заставить его работать идеально, как мы можем добавить контур к ссылке. Мы рассмотрим некоторые передовые методы, когда дело доходит до оформления контуров на наших сайтах (и обходной путь, который Apple использует в Safari). В самом конце мы исправим поведение табуляции на Tiffany.com.
Часть 1. Почему контуры? Другими словами, почему бы не использовать рамки или тени? Границы (это стандартный CSS в Интернете) — границы могут влиять на размер элементов и смещать объекты. А тени даже не отображаются на многих системах с включенным режимом высокой контрастности. Как и в Windows, где появится другой контур по умолчанию (к которому мы вернемся чуть позже). Это несколько причин, по которым эти два свойства не похожи на контуры.
Контуры уникальны.
Поскольку контуры обтекают элемент. Поэтому, в отличие от границ, они не влияют на размер. И, в отличие от коробчатых теней, они не игнорируются в режиме высокой контрастности (за исключением цвета контура, который задается в настройках режима высокой контрастности). Но есть очень специфические соображения относительно того, когда использовать контуры, а когда не использовать контуры. И в качестве бонуса вы также можете добавить смещение к контурам. И предела смещению нет. Продолжайте увеличивать и увеличивать, пока оно не выйдет за пределы этого дисплея и не окажется на дисплее Гримура. Кого сегодня здесь нет, потому что он навещает свою семью в Исландии.
Где сейчас 00:48.
Но контуры важнее этого. Потому что без пользовательских контуров (это просто сайт, на котором еще не применены стили контуров). Без контуров, если мы используем клавиатуру для навигации по вкладкам, перемещая фокус по странице? Различные браузеры почти всегда дают противоречивые результаты.
Здесь фокус табуляции на Google Chrome. Вот он в Сафари. Вот он в Фаерфоксе. Вот он в Интернете Microsoft Edge. И, конечно же, на Arch Card от McDonald’s все иначе, когда перед съемкой не забываешь зарядить его аккумулятор.
Итак, основное замечание о контурах CSS заключается в том, что мы можем переопределить и действительно стандартизировать поведение контуров во всех браузерах, чтобы они были разборчивыми и последовательными. И это происходит в сфокусированном состоянии клавиатуры.
Итак, что произойдет, если мы пойдем и применим контур в состоянии None? (Другими словами, если мы просто добавим это свойство, потому что хотим, чтобы внешний вид вещей по умолчанию имел такой контур?) Невероятно высокий риск. Вот почему. Установка контура CSS в состояние по умолчанию (Нет)? Вот что произойдет, если мы пролистнем эту страницу сейчас. (Это действительно может привести к тому, что даже поведение контура по умолчанию в некоторых браузерах не очень ясно, что выделено.
)
Итак, давайте отменим это, и, честно говоря, мы должны поджечь его. Что мы и сделали бы, если бы не забыли зарядить аккумулятор нашей Arch Card перед съемкой.
Это приводит нас к использованию состояния Focused (клавиатура).
И, чтобы быть по-настоящему ясным: вместо того, чтобы применять контур в состоянии «Нет», мы собираемся перейти к этому раскрывающемуся меню здесь и убедиться, что мы используем стиль в состоянии «Фокус» (клавиатура).
Сейчас. Почему состояние Focused (клавиатура)? Что ж, мы знаем, что состояние «Сфокусировано» — это то, что появляется, когда кто-то щелкает (или нажимает) или перемещает вкладки с помощью клавиатуры, но в большинстве случаев дизайнеры и разработчики не хотят, чтобы этот контур отображался при каждом щелчке или касании. Здесь, когда мы нажимаем, вы можете видеть, прежде чем он дойдет до места назначения, мы видим контур даже по клику — не всегда идеально.
Итак, вот тут-то и появляется Focused (клавиатура) (или в CSS это фокус-видимый).
И стили здесь позволяют вам управлять тем, как будут выглядеть объекты при навигации с помощью клавиатуры. (Но это не повлияет на то, как это будет выглядеть, когда вы щелкнете мышью или нажмете пальцем.)
Здесь мы можем очень четко добавить контур к ссылке.
Итак, на этой кнопке ссылки (мы стилизуем этот класс кнопки), если мы войдем и выберем наше состояние Focused (Keyboard), мы можем перейти вниз и начать настраивать именно то, как мы хотим, чтобы наш контур выглядел. (Мы можем настроить значения, чтобы получить именно то, что нам нужно — принимая во внимание контраст не только с остальной частью кнопки, но и с содержимым за кнопкой.)
А если мы пойдем в Preview это? Мы можем щелкнуть и начать переходить по нашим ссылкам. (И это работает и на полностью опубликованном сайте для навигации с вкладками, но в Webflow в режиме предварительного просмотра мы хотим убедиться, что щелкнули на холсте.)
Мы начинаем здесь сверху (и очевидно, мы еще не стилизовали контуры CSS для навигационных ссылок).
Но когда мы переходим по нашим кнопкам, мы видим, что каждая кнопка, к которой применяется этот класс (у нее есть…)
Хорошо. Похоже, компьютер должен перезагрузиться, потому что мы обновили macOS.
Но если бы обновление не выполнялось, вы бы увидели, что каждая кнопка (с этим классом) — каждая из них отображает контур, который мы только что разработали — по мере того, как мы перемещаем курсор по каждой из них.
И не только здесь. Он есть в Chrome, Firefox, Microsoft Edge, Safari и так далее.
Но если мы нажмем кнопку (или если мы нажмем ее, например, на iPad)? Стили контура не видны. На самом деле вообще ничего. Потому что macOS все еще обновляется.
Но, к счастью, в macOS есть сочетание клавиш, которое полностью игнорирует установку, поэтому мы можем вернуться прямо в наш браузер. Команда, смена, клеверное поле.
И вот. А если мы нажмем на кнопку? (Или если бы мы постукивали по сенсорному устройству?) Не видны стили контура.
И это потому, что мы использовали состояние Focused (Keyboard), а не обычное состояние Focused.
И приводит нас к лучшим практикам и большому вопросу:
Означает ли все это, что мы не должны использовать контуры CSS в обычном состоянии Focused? Другими словами, должны ли мы использовать только состояние Focused (Keyboard) при применении контуров CSS? И ответ таков: это зависит от ваших дизайнерских предпочтений. Wikipedia, например, использует состояние фокуса для своих контуров, но MDN использует Focused (Keyboard) (или focus-visible в CSS). Как правильно? Что не так? Возможны ли путешествия во времени? Не всегда есть четкий ответ. И это нормально.
Независимо от ваших предпочтений в дизайне, процесс прост: хотите ли вы, чтобы ваши контуры были видны при любом щелчке, любом касании или любой вкладке? Используйте сфокусированное состояние. НО, если вы ДЕЙСТВИТЕЛЬНО хотите, чтобы ваши контуры были доступны для навигации с помощью клавиатуры, но вы предпочитаете, чтобы ваши ссылки не отображали контуры при щелчках или касаниях? Используйте состояние Focused (клавиатура).
Еще одна передовая практика, которую следует здесь рассмотреть, касается контраста. И здесь сияют очертания. Потому что еще одна причина, по которой стили контуров по умолчанию (по умолчанию в браузере) не идеальны? Поведение (на самом деле видимость) на разных фонах (например, это контур по умолчанию в Safari) не всегда идеально разборчиво, особенно если контур сливается с фоном.
Итак. Как мы можем решить эту проблему и сделать ее более единообразной? Другими словами, можем ли мы просто установить для всех наших ссылок один и тот же стиль контура CSS и забыть об этом? Мы абсолютно можем. Но причина, по которой мы поощряем тестирование, заключается в том, что мы часто выглядим по-разному. Может быть, нам нужен синий контур, как у Apple. Он отлично работает на светлом или темном фоне. Но если у нас есть синий фон? Это не работает так хорошо. Таким образом, в этом случае мы могли бы захотеть стилизовать класс или комбинированный класс для кнопки в синем разделе и в состоянии Focused (Keyboard), мы могли бы сделать его не синим.
Может быть, что-то вроде белого. И так, это намного заметнее. Гораздо больше контраста с фоном.
Сейчас. Вот интересное наблюдение. Ссылка в форме таблетки (это просто кнопка с закругленными углами). А в Safari (по крайней мере, в версии 15.1, которую мы здесь тестируем)? Если мы перейдем через табуляцию, 90-градусные края. Что творится? Некоторые браузеры (например, Safari здесь) могут игнорировать радиус границы при отображении контура.
Итак, на Apple.com это сходит с рук, добавляя ОТДЕЛЬНЫЙ стиль. Коробки в форме таблеток с закругленными углами вообще не используют контур; они используют тень блока для достижения этого эффекта. Но ранее мы узнали, что тени блоков ИГНОРИРУЮТСЯ в Windows при использовании высокой контрастности. Значит ли это, что Apple ошибается? Гугл? Например, в Windows, если вы начнете печатать в Документах Google с включенным высоким контрастом, где будет курсор? Высокая контрастность не всегда идеальна. Поэтому мы хотим сделать НАИЛУЧШЕЕ.
Вот почему может быть действительно хорошей идеей использовать структуру CSS для ВСЕХ элементов навигации пользователя. Ссылки, кнопки — все, на что можно нажать или нажать. Теперь: одно предостережение здесь. Windows позволит пользователям выбирать, в каком цвете будут отображаться контуры. Таким образом, несмотря на то, что он будет учитывать ваши значения контура CSS, он может переопределить сам цвет.
Таким образом, контуры очень хорошо подходят для четкого определения элемента, находящегося в данный момент в фокусе.
Опять же, ни одно из этих правил не является абсолютным. И в этом красота (гибкость) CSS. Мы можем сделать то, что хорошо подходит для нашего дизайна, а кто-то другой может сделать то, что хорошо подходит для его дизайна. Это означает, что будут разные мнения, разные разговоры и дебаты — и это хорошо. Пока мы учитываем видимость и доступность при проектировании и разработке, у нас будет бесконечно лучший пользовательский опыт, чем если бы мы не учитывали эти вещи.
И в тех случаях, когда у нас есть что-то среднее (или когда что-то немного не так), всегда есть Мэг.
[Мэг] Дорогая Тиффани,
Это снова Мэг. Две вещи. Во-первых, ваш сайт использует границы при табуляции. Контуры CSS сделают это менее дерганым. Во-вторых, Tiffany Blue вовсе не синий; это бирюза.
С уважением, Мэг
[МакГуайр] Так что здесь происходит? На этой странице, как сказала Мэг, они на самом деле используют границы, когда что-то сфокусировано. И по мере того, как мы переходим, изображения здесь немного изменяются. Итак, если мы войдем и проверим код, мы сможем не только проверить это (мы не только увидим, что здесь используется граница, когда она сфокусирована — и мы можем включать и выключать это), но мы просто отключаем ее. полностью. И мы можем добавить свой собственный стиль: «Контур CSS» — это не имя свойства. Его контур: 2px сплошной #00a4b7. И чтобы убедиться, что это становится приоритетным, !important. Теперь, если мы переключим это, мы увидим, что, в отличие от границ, это не влияет на размер.