Дизайн сайта уроки: Уроки веб-дизайна с нуля, основы хорошего дизайна в уроках по web-дизайну

Содержание

Шаблоны сайтов, обучающие уроки, видео, статьи по программе Figma онлайн (Figma online). Все материалы фигма на русском языке онлайн.

Шаблоны сайтов

Шаблоны для Figma

Шаблоны для Figma — Магазин медицинского оборудования

Шаблон сайта магазина медицинского оборудования для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — Корабельная компания

Шаблон сайта корабельной компания для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — Бар Петербурга

Шаблон сайта бара Петербурга для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — сайт школы иностранного языка

Шаблон сайта школы иностранного языка для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — сайт ресторана Петербурга

Шаблон сайта ресторана для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — теннисный клуб

Шаблон сайта теннисного клуба для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — Тюнинг ателье автомобилей

Шаблон сайта тюнинг ателье для Figma — скачайте прямо сейчас!

Шаблоны для Figma

Шаблоны для Figma — Премиум-Салон красоты

Шаблон сайта премиум-салона красоты для Figma — скачайте прямо сейчас!

Новое видео

Дизайн сайта в Figma
Дизайн и верстка сайта
Теория веб-дизайна
FAQ по Figma

На моем YouTube канале вы можете найти видео по веб-дизайну, а также по работе в программе Figma.

Абслютно все уроки Figma на русском языке, с пояснением всех функций. Вся работа близка к практике, и охватывает моменты, с которыми сталкиваются веб-дизайнеры.

Все тематические видео по веб-дизайну разбиты по плейстам и доступны в отдельном разделе на канале.

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

Курсы по веб-дизайну

Новичок в веб-дизайне?

Изучите работу программы Figma на практике. В серии видео я подробно показываю процесс создания дизайн-макета.

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

Перейти к видео

Веб-дизайн за 1 месяц

Знаете Figma, но процесс создания дизайн-макета вызывает сложности? Посмотрите плейлист, в котором я описываю процесс, по которому я создаю дизайн-макеты уже почти 6 лет.

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

Перейти к видео

Уроки

Уроки по Figma

Грамотная отрисовка шапки сайта

Видео по дизайну шапки сайта. Легко поддерживаемая, адаптивная.

Уроки по Figma

Создаем дизайн сайта в Figma по тематике недвижимости

Серия видео-уроков, в которых мы создаем дизайн многостраничного сайта в Фигма

Уроки по Figma

Создаем дизайн сайта в Figma и верстаем его при помощи HTML, CSS, JS, GULP

Полноценный плейлист по дизайну и верстке многостраничного сайта

Уроки по Figma

Создаем дизайн сайта в Figma для частной школы

Практический урок по дизайн сайта в Figma для частной школы

Уроки по Figma

Дизайн сайта автосалона в Figma (Дизайн-система)

Практический урок по дизайну сайта автосалона в Figma (Дизайн-система)

Уроки по Figma

Дизайн калькулятора в Figma

Практический урок по дизайну калькулятора в Фигма

Уроки по Figma

Улучшаем дизайн сайта клиники в Figma (уроки Figma)

Практический урок по улучшению сайта клиники в Фигма

Уроки по Figma

Анимация в Figma — Loader (иконка загрузки) в Фигме

Практический урок по созданию анимации лоадера в Figma

Полезные статьи

4 типа проектов, которые покажут навыки веб-дизайнера.

Типы проектов, реализовав которые вы сможете показать работодателю или клиенты свои навыки и компетенции.

Полезные статьи

Критерии качества дизайн-макетов в Figma. Основные правила

Основные правила, которых мы должны придерживаться, когда создаем макеты в Figma.

Полезные статьи

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

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

Полезные статьи

Работа с Figma Community. Как устанавливать плагины и шаблоны.

Обзор Figma Community. А также как скачивать референсы.

Полезные статьи

Веб-дизайн и другие навыки в кризис. Как развить навыки в неспокойный период?

Как развить навыки, а также сменить профессию в неспокойный период?

Полезные статьи

Отзыв о книге Остина Клеона «Кради как художник»

Насколько полезна и актуальна книга «Кради как художник».

Полезные статьи

Отзыв о книге «Аарон Уолтера Эмоциональный веб-дизайн — 2012»

Насколько полезна и актуальна книга Эмоциональный веб-дизайн.

Полезные статьи

Шрифты в Фигме. Работа со шрифтами в Figma, как добавить шрифт в фигму.

Можно использовать свои шрифты? Как их добавить в Figma?

Полезные статьи

Плагины Фигма

Использование плагинов, ускоряющих работу в программе Figma

Полезные статьи

Работа с компонентами в Figma.

В этой статье я рассмотрю работу с компонентами. Что это и для чего они нужны?

Полезные статьи

Экспорт в Figma (Как в фигме сохранить проект в FIG, PDF, JPG, PNG, SVG,)

Все способы и методы экспорта в Figma

Полезные статьи

Эффект стекла в фигме (глассморфизм)

Делаем красивый эффект стекла glassmorphism

Посмотреть все посты

Верстка дизайна сайта, уроки html и css верстки :: Дизайн Мания

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

В частности речь идет о процессе «перевода» нарисованного шаблона в html и css код, который называется верстка сайта. Верстка дизайна сайта имеет некоторые свои особенности, правила и нюансы, о которых мы и будем рассказывать в данном разделе блога. Здесь вы найдете как теоретические сведения о языке разметки веб страницы HTML и стилях CSS, так и практические уроки по верстке. В статьях будут рассмотрены некоторые ситуации, возникающие при верстке шаблона, на конкретных примерах с подробным пояснением.

Также в разделе верстка сайта вы найдете посты с советами и рекомендациями для будущих или начинающих верстальщиков, заметки с полезными хаками и секретами при HTML и CSS верстке, а также обзоры программного обеспечение, которое используется для верстки.

Верстка

Чтобы как-то разбавить дизайнерскую тематику посмотрим сегодня еще один урок по верстке – после предыдущего поста о CSS hover эффектах прошло уже немало времени.

Данная заметка будет посвящена вопросу создания ссылки на почту в html. Все это реализуется с помощью обычного тега A, который не смотря на всю свою простоту, может использоваться не только для оформления гиперссылкок, но и имеет несколько интересных нюансов. Базовый синтаксис выглядит…

Верстка

Реализацию данной задачи вы наверняка встречали на крупных порталах, так как подобный рекламный брендинг привлекает максимум внимания посетителей и является более эффективным чем обычные баннеры. Сегодня рассмотрим как сделать фон ссылкой на сайте с помощью HTML, CSS, Javascript и некоторых других «подручных средств». Ранее в блоге уже публиковались статьи по схожей тематике, например, про большую фоновую картинку у веб-страниц или создание изображения на весь экран но все…

Верстка

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на: Эфекты для кнопок и ссылок. Hover в изображениях. CSS библиотеки (подключаются отдельно). Данные группы весьма условны, т.к. многие примеры…

Верстка

В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент. Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна…

Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится. Данный элемент был разработан почти 30 лет назад…

Верстка

Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка стильных меню в PSD, а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто…

Верстка

Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3. Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia, который является прекрасным примером профессионального использования всех возможностей CSS3. Правда, мы не будем повторять…

Online сервисы Верстка

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

Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий. В общем, пришлось…

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

При оформлении сайтов принято использовать CSS (CascadingStyleSheets), то есть каскадные таблицы стили. Это набор тегов, задающих основные параметры оформления страницы (отступы, шрифты, цвета), позволяющие создавать ключевые элементы веб-сайта, выдерживая их в определенном стиле. Для каждого элемента HTML можно определять свой стиль, это удобно, CSS обеспечивает экономию времени и усилий. Существует ряд интернет-ресурсов, являющихся своего рода CSS конструкторами и облегчающих работу вебмастера. Мы уже как-то публиковали…

Обучение веб-разработке — тема достаточно обширная, и начинать ее нужно с самых азов — HTML и CSS. Сейчас в интернете существует масса разных курсов, отсканированных книг и самоучителей для получения знаний. Однако ничего из этого не будет изучать также интересно как проект HTML Academy. Этот полезный ресурс поможет вам качественно и в короткие сроки изучить основы веб-разработки / верстки. Ресурс сделан в формате интернет школы,…

Прислали тут мне на почту пресс-релиз по поводу запуска нового интересного сервиса для дизайнеров под названием Ahoba. Повозился с ним полчасика, посмотрел что к чему и решил поделиться с вами впечатлением. Данный проект, как говорят сами разработчики, будет полезен дизайнерам при создании разных дизайн макетов с последующим сохранением их в различные форматы. В частности планируется работа с: обычными статическими веб-страницами; cms шаблонами для сайтов (WordPress, Joomla…

Страница 1 из 3123»

10 лучших бесплатных курсов и учебных пособий по веб-дизайну

Домашняя страница / Веб-дизайн / 10 лучших бесплатных курсов и учебных пособий по веб-дизайну

Веб-дизайн

Поднимите свои навыки на новый уровень с помощью этого удобного списка лучших онлайн-курсов по веб-дизайну.

Автор: Эндрю Блэкман

Опубликовано 7 октября 2022 г.

Хотите освежить свои навыки веб-дизайна? Вот список бесплатных курсов и руководств по веб-дизайну, которые научат вас всему, что вам нужно знать об Adobe XD, Figma, дизайне пользовательского интерфейса и многом другом. Также не стесняйтесь загружать бесплатный набор пользовательского интерфейса Figma!

1. Изучите веб-дизайн для начинающих

В этом посте мы собираемся выделить множество бесплатных руководств по веб-дизайну по ряду конкретных тем, но давайте начнем с чего-то более общего. Полностью всеобъемлющий курс веб-дизайна для начинающих поможет вам быстро освоить основы веб-дизайна за пять часов бесплатного обучения. Набрав более миллиона просмотров, он быстро становится популярным ресурсом для всех, кто только начинает заниматься веб-дизайном. Присоединяйтесь и посмотрите, чему вы можете научиться:

2. Создайте генератор случайных паролей на JavaScript

Если посетители вашего веб-сайта не используют достаточно надежные пароли, почему бы не помочь им генерировать пароли из случайных символов? Вы можете позволить им настроить длину пароля и типы символов для включения, а затем скопировать пароль для отправки в форму. Прочтите этот бесплатный учебник по веб-дизайну, чтобы узнать, как создать генератор случайных паролей на JavaScript.

3. Понимание эвристик удобства использования

Если вы хотите создать удобный пользовательский интерфейс, вам нужно, чтобы ваше приложение или веб-сайт было простым в использовании. В этом видео Мэдди Бирд объясняет восемь правил, которым нужно следовать, чтобы добиться максимального удобства использования. Она разбивает все на части, чтобы упростить задачу, на примере тостеров!

4. Создайте веб-сайт с помощью Squarespace

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

5. Создайте таймер обратного отсчета JavaScript

Обратные отсчеты есть во всем Интернете. Вы можете использовать их, чтобы создать ожидание продажи, обратный отсчет до запуска продукта или бизнеса и многое другое. Но как его построить? Узнайте, присоединившись к Джемайме Абу, которая проведет вас через весь процесс создания таймера обратного отсчета в JavaScript со всем предоставленным исходным кодом.

6. Изучите Figma Auto Layout

Figma — отличное приложение для дизайна UX и пользовательского интерфейса, но знаете ли вы, что можете использовать функцию Auto Layout, чтобы сделать вашу жизнь веб-дизайнера намного проще? Если нет, расслабьтесь и посмотрите это видео, в котором Ади Пурдила все объясняет.

7. Узнайте о гештальт-принципах веб-дизайна

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

8. Изучите Sketch

Мы рассмотрели Figma ранее, и Sketch — еще одно приложение, которое штурмом покорило мир веб-дизайна. С ним так легко разрабатывать веб-сайты, приложения и значки, создавать прототипы, сотрудничать с другими дизайнерами и многое другое. Вот бесплатный 2,5-часовой курс, который научит вас Sketch с нуля. Наслаждаться!

9. Общайтесь более эффективно

Быть успешным веб-дизайнером — это не только владеть технологиями и создавать красивые, высокофункциональные веб-сайты и приложения. Это также касается эффективного взаимодействия с клиентами. Поэтому стоит ознакомиться с этим руководством, в котором Крис Годби делится тем, чему он научился, управляя двумя дизайнерскими агентствами более 12 лет.

10. Создайте адаптивный слайдер изображений

Слайдеры существуют уже много лет, и они всегда популярны для обзоров продуктов, постов в блогах и других элементов в визуально интересном виде. Однако некоторые из старых не так хорошо работают на мобильных устройствах, что является большой проблемой. Так что посмотрите это видео об использовании Swiper.js для создания адаптивного слайдера изображений, который отлично выглядит и отлично работает на любом устройстве!

Эти 10 новых курсов и учебных пособий по веб-дизайну должны помочь вам некоторое время, но в полной библиотеке Envato Tuts+, насчитывающей более 1250 курсов и 28000 учебных пособий, есть еще много чего. Там обязательно найдется что-то для вас. Взгляните на эти рекомендации лучших онлайн-курсов по веб-дизайну за предыдущие месяцы, чтобы получить больше вдохновения.

Улучшите UX с помощью моушн-дизайна

Моушн-дизайн может открыть новое измерение взаимодействия с пользователем (UX) ваших приложений и веб-сайтов. Но это должно быть использовано по причине. Вот три отличных способа использования моушн-дизайна для улучшения взаимодействия с пользователем.

Создание адаптивного мегаменю с помощью UIkit

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

Мастер информационной архитектуры

Вы не построите дом без чертежа архитектора, так зачем создавать веб-сайты без надежной информационной архитектуры? В этом руководстве от дизайнера Apple UX Андреа Эппи объясняется, что означает информационная архитектура (IA) и как вы можете использовать ее для достижения лучших результатов в своих проектах веб-дизайна.

Соответствовать рекомендациям по доступности

Рекомендации по доступности веб-контента (WCAG) дают отличные советы по созданию веб-сайтов и приложений, доступных для всех. Но как насчет электронных писем? Их часто упускают из виду, но есть важные последствия доступности для кампаний по электронной почте. Узнайте, как сделать вашу электронную почту доступной.

Создайте адаптивную типографику

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

Изучите Sketch от А до Я

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

Обновите Bootstrap 5

Мы все уже знаем о Bootstrap, верно? Этот популярный фреймворк уже много лет используется веб-дизайнерами, которые хотят создавать адаптивные фреймворки для мобильных устройств. Но знаете ли вы о новых функциях последней версии Bootstrap 5? Если нет, посмотрите этот бесплатный курс. И если вам нужно освежить в памяти Bootstrap в целом, курс подойдет и для этого.

Создайте свой первый плагин Figma

Плагины Figma — отличный способ предоставить вам больше гибкости. Но что, если вы хотите сделать что-то совершенно новое, для чего еще никто не делал плагинов? Ну, вы можете написать свой код, конечно! Это не так сложно, как кажется. В этом бесплатном курсе веб-дизайна Ади Пурдила разбивает весь процесс на простые и понятные шаги.

Понимание UX-дизайна

Все это очень хорошо — научиться пользоваться такими приложениями, как Sketch и Figma, но иногда веб-дизайнеру нужно сделать шаг назад и подумать о принципах. Что такое дизайн пользовательского опыта (UX)? Какие навыки вам нужны, чтобы стать успешным дизайнером UX? Посмотрите это видео для быстрого и ясного объяснения.

Изучите новую функцию CSS: «Контейнерные запросы»

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

Создание макетов Masonry CSS

Макеты Masonry в стиле Pinterest часто создаются с использованием JavaScript, но это не обязательно. Вы можете собрать их вместе, используя чистый CSS, если знаете как. В этом бесплатном получасовом видеокурсе Ади Пурдила покажет вам, как именно это делается.

Понимание области просмотра SVG и области просмотра

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

Откройте для себя интересные советы и рекомендации по Figma

Когда вы только начинаете работать с таким приложением, как Figma, у вас есть два варианта. Вы можете погрузиться в всеобъемлющий курс, такой как наш популярный Введение в Figma, или вы можете посмотреть более быстрое видео, которое поможет вам сразу начать работу с пятью полезными советами и рекомендациями для начинающих. Или, конечно, вы можете сделать и то, и другое!

Изучите WooCommerce с нуля

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

Создайте индикатор выполнения чтения

Мы все их видели, не так ли? Эти удобные маленькие анимированные индикаторы выполнения, которые появляются в верхней части статьи, чтобы показать вам, как далеко вы продвинулись в статье. Узнайте, как добавить их на свои страницы с помощью CSS и JavaScript, из этого руководства по веб-дизайну.

Создание приложения с погодой

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

Делайте отличные скриншоты для App Store

Разработка приложения — это одно, а создание привлекательного внешнего вида в конкурентной среде магазина приложений — совсем другое. В этом видео на YouTube показано, как сделать более качественные скриншоты приложений с помощью простого онлайн-инструмента.

Изучение Adobe XD от А до Я

Что может быть лучше, чем изучить программное обеспечение от А до Я? Изучите классный совет или трюк для каждой буквы алфавита в этом уроке.

Создание плавных анимаций страниц с помощью Highway

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

Мастер 3D-преобразований в Adobe XD

Слышали ли вы о совершенно новой функции Adobe XD под названием 3D-преобразования? Они были представлены на Adobe MAX в октябре 2020 года и предлагают очень мощный и простой способ создания 3D-эффектов. Посмотрите видео ниже или прочитайте бесплатный письменный учебник, чтобы узнать, как именно они работают и как вы можете использовать их в своих проектах веб-дизайна.

Знайте, какой шрифт использовать

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

Узнайте, как использовать Figma

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

Дизайн для дальтоников

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

Начните использовать системы проектирования

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

Анимируйте свои прототипы с помощью Adobe XD

Каждый веб-дизайнер знает, что прототип — это отличный способ показать клиентам свои дизайнерские идеи и получить одобрение перед созданием полноценного сайта. Но большинство прототипов статичны, тогда как сегодня многие сайты включают анимацию. Исправьте это с помощью мощной функции автоматической анимации Adobe XD, которая подробно описана в этом бесплатном курсе веб-дизайна с Дэном Уайтом.

Обновление SEO

Зачем тратить время на разработку идеального сайта, если его никто никогда не посещает? В наши дни оптимизация сайта для поисковых систем является необходимостью, но правила SEO постоянно меняются. Получите последние обновления на 2020 год в этом бесплатном руководстве.

Изучите Sketch с нуля

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

Мастер адаптивного дизайна в Adobe XD

Это второй курс веб-дизайна, посвященный Adobe XD. Ранее мы рассматривали создание анимированных прототипов, а теперь этот бесплатный курс веб-дизайна научит вас создавать адаптивные прототипы, чтобы показать клиентам, как ваш дизайн будет выглядеть на различных устройствах.

Создание дизайна пользовательского интерфейса для музыкального приложения

Хотели бы вы добавить красивое музыкальное приложение в свое портфолио веб-дизайнеров? Этот бесплатный учебник покажет вам, как это сделать, шаг за шагом проведя вас через этот проект дизайна пользовательского интерфейса в Adobe XD. Что еще более важно, это даст вам некоторые ценные навыки и методы веб-дизайна, которые вы сможете использовать во многих проектах по разработке приложений в будущем.

Встроить видео в WordPress

Большинство этих онлайн-курсов по веб-дизайну охватывают обширные темы, но иногда вам просто нужна помощь в решении простой, но надоедливой проблемы. Например, как встроить видео в WordPress? Это руководство шаг за шагом проведет вас через весь процесс, независимо от того, используете ли вы YouTube или собственное видео.

Откройте для себя некоторые основные плагины WordPress

Существуют тысячи плагинов WordPress, охватывающие почти все ниши, о которых вы только можете подумать. Но хотя многие из них классные или полезные, не многие из них действительно необходимы. Этот бесплатный курс познакомит вас с серией плагинов, которые веб-дизайнеры должны использовать на любом сайте, который они запускают, охватывая важные функции, такие как резервное копирование, безопасность, кэширование и SEO. Узнайте, как обеспечить бесперебойную и безопасную работу ваших сайтов в этом бесплатном курсе.

Изучение Adobe XD

Этот подробный 2,5-часовой курс проведет вас через все, что вам нужно знать, чтобы освоить Adobe XD. Присоединяйтесь к Ади Пурдиле и узнайте об артбордах, компонентах, адаптивном дизайне и многом другом.

Используйте руководства по стилю для специальных возможностей

Поддержание ваших навыков на современном уровне — это не только изучение новых технологий. Это также касается таких важных понятий, как доступность. Сделать ваши сайты доступными как можно большему количеству людей — это не просто правильно; это также имеет смысл для бизнеса. Вы упорно трудитесь, чтобы привлечь посетителей, так зачем отказывать некоторым из них, потому что вы не внесли простые изменения, которые позволили бы им просматривать ваш сайт? Мне нравится этот краткий учебник по веб-дизайну, потому что он показывает вам, как создать руководство по стилю для доступности, а также знакомит вас с некоторыми важными концепциями и методами доступности.

Дизайн для людей с нарушением зрения

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

Создание доступных тем WordPress

Доступность имеет решающее значение при разработке тем WordPress в 2018 году. Но как сделать так, чтобы ваша тема была полностью доступна для всех? Этот учебник проведет вас через основные этапы, от использования семантического HTML до проверки цветового контраста и предотвращения повторяющегося текста ссылок и многого другого. Прочитайте учебник, чтобы ускориться.

Сделайте свой сайт доступным для пользователей, использующих только клавиатуру

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

Создайте классные CSS-эффекты при наведении курсора

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

Откройте для себя новые единицы измерения CSS

Все мы знаем о пикселях, и если вы регулярно используете CSS, вы, вероятно, также знаете о em и rem. Но как насчет некоторых более эзотерических единиц измерения, таких как vh, vmax или ch? Откройте для себя семь различных единиц измерения CSS и узнайте, как они работают и когда они могут быть полезны в этом превосходном бесплатном руководстве.

Создайте лучший пользовательский опыт для глобальной аудитории

Создание привлекательного пользовательского интерфейса (UX) в любом случае достаточно сложно, и это становится еще сложнее, когда вам приходится учитывать различные культурные контексты людей по всему миру. Этот краткий учебник знакомит вас с некоторыми важными рекомендациями. Также стоит прочитать о темных паттернах пользовательского интерфейса и почему их следует избегать.

Преодолевайте свои когнитивные искажения и создавайте лучшие веб-сайты

Если вы хотите стать отличным веб-дизайнером, вы, вероятно, думаете, что вам нужно изучить все последние приемы CSS и JavaScript и освоить новейшие фреймворки. Хотя все это полезно, вам также нужно будет сделать что-то более важное и часто более сложное: узнать свои собственные когнитивные предубеждения и работать над их преодолением. Этот увлекательный учебник по веб-дизайну раскрывает некоторые странные предубеждения, скрывающиеся в нашем мозгу, и показывает, как они могут повлиять на вашу работу веб-дизайнера. Прочтите руководство, чтобы узнать о своих предубеждениях и справиться с ними, чтобы создавать лучшие веб-сайты.

Анимация SVG

Все мы знаем об анимированных GIF-файлах, но знаете ли вы, что анимированные SVG — отличная альтернатива? Вы даже можете использовать их для других вещей, кроме милых кошачьих мемов. Узнайте, как анимировать SVG в этом удивительном руководстве по веб-дизайну от Ади Пурдила.

Master Figma

Figma штурмует мир веб-дизайна. Узнайте, как использовать Figma для таких вещей, как дизайн пользовательского интерфейса, дизайн UX, дизайн приложений и даже векторная иллюстрация, в этом недавно выпущенном учебном пособии, которое связывает вас с огромным количеством бесплатных руководств и классов по веб-дизайну, чтобы узнать больше. Начните изучать Figma сегодня. Также вы можете ознакомиться с нашим новым курсом Advanced Typography Design in Figma.

Узнать больше

В этом посте представлены лучшие онлайн-курсы и учебные пособия по веб-дизайну, недавно опубликованные Tuts+, но вы найдете гораздо больше в полных архивах, которые насчитывают более десяти лет. Поэтому, если вы все еще жаждете узнать больше, вы можете выполнить поиск по полной библиотеке Tuts+, содержащей более 1250 курсов и 28 000 учебных пособий, чтобы найти именно то, что вам нужно для создания лучших веб-сайтов.

Envato TutsWeb DesignWordPress

Считаете ли вы эту статью полезной?

Похожие посты

Envato Elements: Миллионы творческих ресурсов. Неограниченное количество загрузок. Одна низкая стоимость.

Получите неограниченное количество загрузок

WebD2: уроки для студентов

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

Модуль 1: Базовая оценка сайта и рубрика Создание

Урок 1: Исследование возможностей
Урок 2. Разработка инструмента оценки веб-сайта

Модуль 2: Теория цвета

Урок 1: Теория цвета в веб-дизайне

Модуль 3.

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

Урок 1. Веб-стандарты
Урок 2. Как люди с ограниченными возможностями получают доступ в Интернет

Модуль 4: Планирование веб-сайта

Урок 1: Организация веб-сайта

Модуль 1: Предварительное кодирование (Модуль 1)

Урок 1: Предварительное кодирование (Урок 1)

Модуль 2. Базовая разметка HTML

Урок 1. Синтаксис HTML
Урок 2. Основные теги
Урок 3. Общие теги

Модуль 3: HTML-списки

Урок 1: Списки
Урок 2: Создание меню навигации

Модуль 4: Создание ссылок

Урок 1: Создание ссылок на внешние интернет-сайты
Урок 2. Ссылки на страницы вашего веб-сайта
Урок 3. Специальные типы ссылок

Модуль 5: Создание таблицы данных (Модуль 5)

Урок 1: Создание таблицы данных (Урок 1)

Модуль 6: HTML-видео

Урок 1. Добавление видео на веб-страницы
Урок 2. Добавление субтитров к видео

Модуль 7: Отражения модуля 2

Модуль 1: Введение в каскадные таблицы стилей

Урок 1: Анатомия стиля
Урок 2. Применение стилей
Урок 3: Связывание с внешней таблицей стилей

Модуль 2: Цвет в CSS

Урок 1: Понимание цвета в CSS
Урок 2. Применение цвета в CSS

Модуль 3. Типографика в CSS

Урок 1. Понимание типографики в CSS
Урок 2. Применение типографики в CSS

Модуль 4: Блочная модель в CSS

Урок 1. Понимание блочной модели в CSS
Урок 2. Применение блочной модели в CSS

Модуль 5. Роль идентификатора и класса в CSS

Урок 1. Понимание идентификатора и класса в CSS
Урок 2. Применение идентификатора и класса в CSS
Урок 3. Селекторы псевдоклассов в CSS

Модуль 6: Методы макета страницы

Урок 1: Макет страницы с помощью CSS
Урок 2. Стилизация меню навигации с помощью CSS

Модуль 7: Часть 3 Размышления

Модуль 1: Введение в веб-графику (модуль 1)

Урок 1: Введение в веб-графику (урок 1)
Урок 2. Закон об авторском праве и графика в Интернете

Модуль 2: Создание веб-фотоальбома

Урок 1: Общие сведения о веб-графике
Урок 2. Получение изображений для Интернета Графика
Урок 3. Обрезка и изменение размера
Урок 4. Добавление изображений на веб-страницу

Модуль 3. Создание кнопки

Урок 1. Основные формы и цвета
Урок 2: Работа со слоями
Урок 3: Оптимизация изображений GIF
Урок 4. Создание фавикона

Модуль 4: Создание баннера веб-страницы

Урок 1: Инструменты выбора
Урок 2: Эффекты слоя и смешивание
Урок 3. Фоновые изображения

Модуль 5: Размышления о Разделе 4

Модуль 1: Обзор сценариев в Интернете

Урок 1: Клиентские и серверные сценарии

Модуль 2: JavaScript

Урок 1. Использование JavaScript для отображения предупреждений
Урок 2. Ошибки JavaScript и отладка
Урок 3. Создание часов JavaScript, часть 1
Урок 4. Создание часов JavaScript, часть 2
Урок 5. Использование JavaScript для скрытия и отображения содержимого
Урок 6. Создание пользовательского видеоплеера

Модуль 3: Размышления, Часть 5

Модуль 1: Проверка веб-сайтов

Урок 1: Проверка HTML
Урок 2. Проверка CSS
Урок 3. Проверка доступности

Модуль 2. Тестирование удобства использования

Урок 1. Проведение теста удобства использования

Модуль 3: Модуль 6 Reflections

Модуль 1: Программное обеспечение для веб-разработки

Урок 1.