Уроки по веб дизайну для начинающих

Веб-дизайн с нуля: что читать и где учиться?

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

История веб-дизайна

История веб-дизайна начиналась в 1990 году, когда британский ученый Тим Бернерс-Ли разработал язык HTML (англ. HyperText Markup Language) — язык гипертекстовой разметки. С его помощью6 августа1991 года команда Бернерса-Ли сделала первый в мире сайт — http://info.cern.ch.

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

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

В 1994 году появился Консорциум Всемирной паутины, известный как W3C. Эта организация и сегодня разрабатывает и утверждает технологические стандарты интернета.

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

Настоящий веб-дизайн, близкий к тому, который мы знаем сегодня, появился в период с 1994 по1998 год. Тогда интернет-технологии совершили бешеный рывок вперед.

Первая версия браузера Opera.

Появились Internet Explorer 1, JavaScript и PHP.

CSS и запуск технологии Flash, которую стали использовать для векторной графики, игр и мультимедиа.

Релиз Internet Explorer3 и HTML 4.0 — в мире уже100 млн пользователей.

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

• Разрешение мониторов увеличилось до 800×600 px.
• Мониторы стали отображать256 цветов и оттенков, что привело к появлению сайтов с салатовым текстом на синем фоне.
• Первая типографика: на сайтах появились веб-шрифты Times New Roman и Courier New.
• Первая баннерная реклама, видеоплееры, анимированные GIF-изображения и цветные кнопки с 3D-эффектом.

Что такое веб-дизайн

В начале 2000-х веб-дизайн и веб-разработка часто шли нераздельно. Но технически веб-дизайн — это подкатегория веб-разработки, которая в первую очередь относится к frontend, то есть клиентской стороне сайтов, приложений и онлайн-сервисов.

Веб-дизайн (англ. web design) — процесс проектирования и визуализации веб-сайтов, их макетов и прототипов.

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

Чем занимается веб-дизайнер

Веб-дизайнер сочетает в себе два навыка: он всегда в курсе новейших технологий, знает, куда двигается индустрия, обладает хорошим эстетическим вкусом и постоянно его развивает.

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

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

Веб-дизайнер — специалист, который проектирует сайты, интерфейс онлайн-сервисов и приложений.

В отличие от графического или UX-/UI-дизайнера, веб-дизайнер совмещает функции менеджера и дизайнера. Работа веб-дизайнера состоит из нескольких этапов, о которых мы рассказали ниже и дополнили ссылками на наши статьи.

Где учиться на веб-дизайнера

По запросу «веб-дизайнер» на сайте hh.ru открыто869 вакансий, из которых604 вакансии в сфере IT и диджитал. В Telegram-канале «Охотник за головами» только за первую неделю октября опубликовали семь вакансий для дизайнеров. Это говорит о том, что спрос есть и продолжает расти.

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

Научиться веб-дизайну с нуля можно за год в онлайн-университете Skillbox. На курсе «Веб-дизайн с 0 до PRO» вы научитесь решать задачи реального бизнеса, создавать сильные дизайн-решения для продуктов и брендов, работать с типографикой, верстать контент по сетке, а также соберете и оформите убедительное портфолио на Behance или вашем сайте. Обучение состоит из двух блоков «Веб-дизайн с нуля» и «Веб-дизайн PRO» и длится12 месяцев.

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Что почитать о веб-дизайне на старте

Чтобы познакомиться с профессией и понять, с чего начать свой путь в веб-дизайне, советуем прочитать эти книги.

Кстати, на сайте издательства «МИФ» можно получить скидку 15% на любой товар, если ввести промокод SKILLBOX.

Уроки веб-дизайна с нуля. Основы хорошего дизайна

Дата публикации: 2016-05-09

От автора: приветствую Вас, дорогой читатель. Начиная свой путь веб-дизайнера, Вы наверняка в огромном количестве встречаете различные семинары, курсы, справочники, книги и уроки веб-дизайна. Однако не каждый может позволить себе обучение стоимостью несколько тысяч рублей. Тем более, что действительно полезные и качественные уроки web-дизайна проводятся только в крупных городах. Какой выход?

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Что такое веб-дизайн?

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

Если Вы от рождения не обладаете художественным вкусом, не стоит переживать. Главное — знать основы веб-дизайна, а вкус появится с опытом.

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

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

Принципы цветового круга

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

контрастные цвета являются взаимно исключающими. То есть, если вы увеличите уровень голубого цвета, это автоматически уменьшит уровень красного. И наоборот;

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

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

Небольшой лайфхак: чтобы быстро подобрать контрастный цвет, можно инвертировать цвет любого растрового элемента с помощью команды Ctrl+I.

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

Форма.

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

Линия может выполнять две функции: соединение и разделение других объектов. Пример соединения:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Прямоугольник. В нем важно подобрать пропорции. Наверняка вы слышали про «золотое сечение» — деление отрезка на части таким образом, чтобы отношение меньшей части к большей было таким же, как отношение большей ко всей длине отрезка. Ниже представлен пример, в котором точка C делит отрезок AB так, что AC_AB= CB:AC.

Так вот, принцип «золотого сечения» соблюдается не только на картинах Леонардо да Винчи, но и во всех областях науки и искусства, в том числе, и веб-дизайне. Считается, что «золотое сечение» порождает гармонию. Например, на фотографии важные объекты должны располагаться на расстоянии 3/8 и 5/8 от края, то есть, в важных зрительных центрах.

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

Круг. Как и треугольник, эта фигура хороша в логотипах, иконках и других небольших объектах. В крупных объектах и экранном дизайне круг применяется редко.

Типографика.

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

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

Кроме этого, в оформлении сайта не рекомендуется использовать более трех шрифтов:

базовый — для основных материалов сайта. Используйте читабельные, простые шрифты с удобным межстрочным интервалом (примерно в 1,5 раза больше высоты символов);

акцидентный — для заголовков. Этот шрифт можно выделить не только размером, но и цветом;

дополнительный — для навигации, важной информации, логотипа меню, цитат и т. д.

На этом пока все. Следующий урок по веб-дизайну будет касаться основ работы с Photoshop.

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Всем привет. Сегодня я хотела бы поделиться с вами полезной информацией, а именно, ссылками на ресурсы с крутыми уроками и курсами для самостоятельного обучения дизайну. Это будет особенно полезно для новичков и людей, которые хотят быть в курсе последних новинок в мире дизайна. Я расскажу о тех сайтах, которые оказались полезными для меня и будут интересны не только веб-дизайнерам, но и графическим, 3d дизайнерам и т.д. Естественно, список можно продолжать до бесконечности и будет здорово, если вы поделитесь своими источниками в комментариях.

Виртуальная школа графического дизайнера Creativshik. com – есть бесплатные и платные курсы.

Автор блога – Боб Поташник. Самоучка. Дизайнер, построивший свою карьеру совершенно самостоятельно. В своих курсах он не только креативно и доходчиво рассказывает о том, как стать профессиональным дизайнером, не закачивая учебного заведения, но и дает конкретные практические советы сам и с помощью своих партнеров.

• БЕСПЛАТНЫЙ Трехнедельныйemail-курс “Как Самоучка Может Стать Отличным Дизайнером”
  Вы узнаете что делать тем, кто по каким-либо причинам не может себе позволить изучать графический дизайн в ВУЗе. И как в этом случае стать успешным дизайнером и что для этого необходимо.–в принципе это набор из его статей на блоге, но удобно, то, что они будут приходить на почту и постепенно.

• БЕСПЛАТНЫЙ курс «AdobePhotoshopдля дизайна полиграфии и рекламы.» Вводная часть
  Вводная часть тренинга состоит из шести видеоуроков: * Вводный урок. Интерфейс программы. * Понятие пикселя. Растровая и векторная графика. * Цветовые модели CMYK и RGB. * Работа с Adobe Bridge. * Навигация по документу. Палитры «История» и «Навигатор». * Типы файлов, используемых в Photoshop. – Здесь самые основы Photoshop, курс будет интересен тем, кто осваивает программу или хочет систематизировать свои знания.

• БЕСПЛАТНЫЙ видео-курс «Узнайте как на самом деле создается креативный дизайн»Вы узнаете как быстро продумать концепцию дизайна и воплотить ее в полноценном эскизе с помощью Adobe Photoshop. Поймете тонкости взаимоотношений между идейным вдохновителем (арт-руководителем) и кропотливым исполнителем (фотошопером).–здесь рассказывается о внутренней кухне всего процесса разработки дизайна, что очень полезно для людей которые не работали в профессиональной команде, но собираются в нее вступить, например, устроившись на работу в офис. Ведь многие дизайнеры, насколько бы креативными они ни были, зачастую оказываются неготовыми к сложностям общения не то, что с заказчиком, но и с коллективом внутри команды.

В свое время Боб Поташник мне очень помог с пониманием азов дизайна. Композиция, колористика, типографика – все это было для меня, как лес дремучий. Я считала, что все это очень сложно. Мудреные книги больше запутывали, чем объясняли. А вот Боб, являющийся самоучкой, сумел построить и объяснить в своем 6-часовом курсе все так, что многое стало понятным и простым. Сегодня автор модернизировал курс и включил в него много нового и интересного. Он называется…

Курс «Интенсив по графическому дизайну 2.0» , и стоит всего 1390 р. Описание на странице курса.

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

25 советов начинающим веб-дизайнерам

Никита Обухов, основатель сервиса Tilda Publishing и креативный директор студии FunkyPunky, выпустил теоретический курс по веб-дизайну «Дизайн в цифровой среде». Специально для Лайфхакера он сформулировал несколько тезисов курса, которые помогут начинающим дизайнерам понять, как делать сайты для себя или для клиентов.

Это учебник нового формата, в котором знания и опыт, накопленные за 15 лет работы в вебе, систематизированы и упакованы в 20 увлекательных лонгридов, написанных простым языком.

Создание сайта — это технология

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

Нельзя работать над проектом, который ты ненавидишь

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

Любая разработка начинается с боли и неудовлетворённости

Если исходить из того, что дизайн — это решение проблем, то дизайнеры — это «проблеморешатели». Чтобы устранить проблему и найти эффективное решение, нужно сначала провести исследование и точно определить проблему, затем сфокусироваться на конкретных «болевых точках». Для этого нужно понять, что делают люди, для которых вы создаёте сайт, зачем они это делают, как они видят окружающий мир, какие у них ценности и потребности.

Умение слушать — первое, чему следует научиться дизайнеру

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

Нужно понять мир, в котором существует человек. У каждого из нас есть уникальный опыт (события, которые мы пережили), который детерминирует наше отношение к миру. Часто мы говорим: «Да, я это знаю, мне всё понятно». Но оказывается, что разница кроется в деталях и она может быть принципиальной. Поэтому, когда мы слушаем человека, нужно постараться вжиться в его образ, как это делают актёры. Почувствовать себя на его месте.

Иллюстрация из лекции об эмпатии курса «Дизайн в цифровой среде». Автор: Юлия Засс

Идея требует времени

После того как вы сформулировали задачу, не терзайте свой мозг, дайте время подсознанию найти решение.

Переключитесь на другую задачу, а ещё лучше возьмите паузу: займитесь спортом, погуляйте по городу, пообщайтесь с друзьями. Совет не новый, но он действительно работает — через какое-то время идея обязательно появится.

Используйте майндмэппинг для генерации идей

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

Проводите исследования

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

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

Смотреть картинки — это работа

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

Фото: Tilda Publishing

Следите за трендами

Дизайнер — это проводник развития визуальной культуры, поэтому важно находиться в современном контексте.

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

Хороший дизайн — это результат вашего саморазвития и самообразования

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

Учитесь не только веб-дизайну

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

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

Направляйте критику в конструктивное русло

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

Найдите вдохновляющих людей

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

Скриншот Twitter-аккаунта Стефана Загмайстера

Не жалейте времени на хорошую композицию

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

Людей давно соблазняет мысль рассчитать идеальные пропорции математически (канон Виллара де Оннекура, ряд Фибоначчи и так далее). Но никакие цифры не позволят создать такую композицию, которую вы почувствуете, раз за разом меняя положение объектов. Это непросто, требует навыков и опыта, но это самый интресный и плодотворный способ.

Ограничьте цветовую палитру

Цвет — это просто. Это такая супербазовая единица, как буква. Но это не значит, что нужно покрасить всё в разные цвета. Наоборот, используйте один цвет, который займёт 80–90%, и дополнительный цвет в качестве акцента. Один — лучший вариант. Три использовать нельзя. Два — очень аккуратно.

Подключите фирменный шрифт

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

Используйте сетку как вспомогательный инструмент

Модульная сетка — универсальный инструмент организации визуального пространства, который используют и графические, и веб-дизайнеры. Тем не менее сетка не должна диктовать, а только помогать в дизайне. От сетки можно и нужно отступать. Не стоит фанатично всё выравнивать по сетке. Сетка — это не догма.

Используйте прототип, чтобы договориться с заказчиком

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

Фото: Tilda Publishing

Итерации — основа хорошего дизайна

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

Главный навык дизайнера — уметь рассказать историю

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

В веб-дизайне под сторителлингом мы понимаем способ подачи информации. Цифровой сторителлинг — сочетание контента и интерфейса.

Рисуйте каждую страницу как Landing Page

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

Добавьте «воздуха»

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

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

Не перегружайте меню

Один из признаков хорошего сайта — понятная навигация. Меню поможет её организовать. Добавив меню, убедитесь, что оно визуально хорошее: не слишком большое, не перегружает всю страницу. Пунктов меню не должно быть много, лучше всего не больше пяти. Смело укрупняйте разделы. Названия делайте короткими. Три слова как пункт меню явно не годятся. Они должны считываться с первого взгляда.

Скриншот сайта дизайн-студии Surf

Продавайте себя, а не портфолио работ

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

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

Контент должен быть хорошо оформлен. Недостаточно просто выложить кусок текста — нате, читайте! Вниманием читателя нужно управлять. Используйте приёмы из графического дизайна.

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

25 онлайн-курсов
по веб и UX дизайну

Автор теоретического курса «Дизайн в цифровой среде» — Никита Обухов, основатель Tilda Publishing.

Курс — результат 15 лет практики в веб-дизайне, которая накопилась в работе над заказами для Альфа-Банка, Британской высшей школы дизайна, Bazelevs и курированию курса по веб-дизайну в БВШД.

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

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

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

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

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

Авторский курс Ярослава Шуваева, известного по оффлайн-курсу в британской школе дизайна, а также по онлайн-курсам на популярных образовательных онлайн-платформах.

Курс практический, студенты работают над реальными брифами от реальных компаний.

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

Работа над дизайном продукта производится на пяти уровнях:

На курсе студенты учатся выявлять сегменты и потребности пользователей, разрабатывать Customer Journey Map, проектировать удобные интерфейсы: тестировать гипотезы и создавать прототипы, проводить юзабилити-тестирование и формировать Lean-UX стратегию.

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

Плата за знания — 44 900 рублей, в дни промоакций — 42 900 рублей.

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

Максим Десятых, лидер факультета дизайна, говорит, что «обучение построено таким образом, чтобы студенты получили профессиональные навыки как можно скорее».

Среди преподавателей школы лидеры дизайн-индустрии: Александр Ковальский, Сергей
Мосякин, Максим Десятых , Александра Ермоленко и другие.

По окончании студенты получают диплом о дополнительном профессиональном образовании.

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

Школа Артема Горбунова имеет четкую цель: «Выпускать классных коммерческих дизайнеров, заточенных на решение проблемы и способных аргументировать принятые решения».

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

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

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

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

Курс Skillbox совместно с AIC, которые разработали дизайн для МТС Банка, Тинькофф Банка, Ростелекома, Битрикс-24.

Обучение длится 16 недель, авторы программы советуют уделять 3−4 часа в день на занятия. Всего в курсе 14 тем и бонусных блоков. В каждой теме по несколько видеоуроков с домашними заданиями. Нельзя перейти к следующей теме, пока не выполнено предыдущее домашнее задание.

В процессе у слушателя накопится пять работ для портфолио по UX аналитике. После прохождения курса выдают диплом и обещают стажировку у партнеров курса — AIC, Grape и Moksell.

В отличие от большинства онлайн-академий с подписками, пользователи Udemy платят за каждый выбранный курс по отдельности. На сайте выложены 40 тысяч программ по дизайну, маркетингу, бизнесу и IT. Дэвид Тревис, UX консультант Skype и eBay, ведет самый популярный курс по UX. На Udemy у него 8 тысяч выпускников и полторы тысячи отзывов с оценкой выше 4.

Успех программы — в ее объеме и практических знаниях. Программа рассчитана на дизайнеров, начинающих свой путь в UX. Она стартует с введения в опыт взаимодействия, проводит через архитектуру и визуальный дизайн и завершается на методиках тестирования удобства пользования.

Курс состоит из 12 часов видео, а с домашними заданиями студенты, как правило, выделяют 2−3 недели на его завершение. Стоимость курса — 195 долларов, по праздникам Udemy делает скидки до 75%.

На Skillshare можно найти много онлайн курсов по UX дизайну и фронтенд разработке. Удобно оформить подписку (первый месяц бесплатно) и пройти сразу несколько коротких курсов. На SkillShare популярны короткие обучающие видео (как научиться пользоваться Adobe Illustrator за час), так и более длительные учебные программы на 3 и 6 часов — как создать дизайн сайта или научиться основам CSS.

Отдельно стоит упомянуть курс Виталия Фридмана, основателя онлайн-журнала Smashing Magazine для профессионалов в веб-дизайне и разработке. Курс рассчитан на UX и UI дизайнеров, разработчиков и IT предпринимателей, которые хотят улучшить то, что уже делают. Поэтому, вместо основ дизайна и теории, Виталий разбирает практические UX трюки и техники, которые помогли повысить конверсию, продажи или доставили пользователю удовольствие. Или не помогли, в этом случае Виталий объяснит, почему.

Весь курс строится на личном опыте Фридмана и кейсах компаний, с которыми он работал, и длится 1,5 часа. За эту лекцию и доступ ко всей базе обучающих видео Skillshare пользователь платит 8 долларов в месяц. И хотя школа не выдает сертификаты, полученные практические знания быстро окупят символическую стоимость подписки.

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

Начинающий дизайнер, маркетолог или предприниматель может выбрать курс дизайн-стратегии и общения с клиентом через интерфейс. Занятия ведет Кристофер Ирланд, профессор Калифорнийского колледжа искусств и консультант Intel, Apple и Pepsi. 8 недель студенты будут смотреть на процесс создания бизнеса вокруг дизайна, как это делали в Airbnb и Netflix.

Два месяца обучения в Стэнфорде, хоть и в интернете, будут стоить 555 долларов. Диплом и сертификат программа не предусматривает, но администраторы могут прислать подтверждение прохождения курса по запросу.

Школа Design Lab предлагает краткосрочный четырехнедельный курс. Это второй курс из серии, первый посвящен UX стратегии и исследованиям. Кроме основ веб-дизайна, ученики получают практические рекомендации, разбирают паттерны и учатся прорабатывать каждый шаг на пути пользователя.

За учеником закрепляется ментор, с которым он будет созваниваться каждую неделю для проверки домашнего задания и получения рекомендаций. Ментора не выбирают. И хотя в проекте участвуют дизайнеры Hubspot, Basecamp, Uber и Shopify, учеников и менторов объединяют просто — по временной зоне.

Стоимость курса — 399 долларов. За эти деньги ученик получает 4 недели занятий по 10 часов, 4 персональные консультации ментора и 6 проектов в портфолио. Для учащихся в университетах организаторы предлагают скидки.

Если после завершения курса UX-дизайна студент хочет продолжить обучение, он может пойти в UX академию — длительный курс обучения за $ 5999. В академии он идет 26 недель по 20 часов в неделю. Если студент не планирует работать параллельно с обучением, он может заниматься 40 часов в неделю и завершить обучение за 16 недель.

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