global edtech conference 6.0
Как техническому специалисту избежать ошибок при оформлении лендингов
- Я не дизайнер — как выбрать дизайн? Ищем идеи
- «Глазам больно»: что может убить вашу страницу
- Универсальные приёмы, которые помогут, если «всё сложно»
Анна
Седунова
в онлайн
учеников в школе
- Практикующий сертифицированный специалист GetCourse
- Сотрудничество с крупными проектами:
RedSMM, Сила в мысли, Елена Вайс, Академия сметного дела, Инстафабрика, Школа дизайна N1 в Instagram и тд.
- Высшее педагогическое образование
- Автор профильных курсов «Лендинги на GetCourse», «Процессы GetStart» и по оформлению аккаунтов — «Личный кабинет GetCourse»
- Закончила Базовый курс от GetCourse «От А до Я» (1й поток), «Космический курс по процессам» (1й поток), курс «Лендинги» (1й поток)
Анна
Седунова
в онлайн
учеников в школе
- Практикующий сертифицированный специалист GetCourse
- Сотрудничество с крупными проектами:
RedSMM, Сила в мысли, Елена Вайс, Академия сметного дела, Инстафабрика, Школа дизайна N1 в Instagram и тд.
- Высшее педагогическое образование
- Автор профильных курсов «Лендинги на GetCourse», «Процессы GetStart» и по оформлению аккаунтов — «Личный кабинет GetCourse»
- Закончила Базовый курс от GetCourse «От А до Я» (1й поток), «Космический курс по процессам» (1й поток), курс «Лендинги» (1й поток)
/ этапы разработки /
сайта, лендинга
Идея сайта, структура
— сайт, лендинг или интернет-магазин. Структура, основные блоки. Проработка крючков,
с помощью которых цепляют пользователя (УТП, тарифы и плюшки для потребителя)
Анализ конкурентов
и исследование
— страницы конкурентов — содержание (какие разделы используют, какую информацию добавили на страницу).
Проработка эскиза, подготовка прототипа
— схематичное расположение блоков или элементов страницы, то что хотим увидеть на выходе
Проработка дизайна — визуальная часть сайта
— последняя стадия в работе
над дизайном. Макет заполняется изображениями, цветами, шрифтами — веб-продукт приобретает финальный облик
Какие из этапов разработки сайта
ложатся на техспециалиста?
/ задачи /
техспециалиста
Как должно быть:
Подготовить текстыПодготовить прототип лендингаРазработать дизайнНайти/ подготовить изображения- Сверстать страницу
- Подключить функционал (оплаты, рассылки)
- Установить необходимые метрики, скрипты и тд
- Поддержка страницы
На самом деле:
Подготовить тексты- Подготовить прототип лендинга
- Разработать дизайн
- Найти/ подготовить изображения
- Сверстать страницу
- Подключить функционал (оплаты, рассылки)
- Установить необходимые метрики, скрипты и тд
- Поддержка страницы
Предлагайте добавить в прототип информацию, которую считаете нужной:
— наличие рассрочек
— отзывы, в том числе видео-отзывы (если нет отзывов — собрать)
— фотографий с онлайн или оффлайн мероприятий
— контактная информация
— страница благодарности
Я не дизайнер.
С чего начать? Где и как искать идеи для оформления?
/ визуальная часть /
этапы разработки
Стиль дизайна
Есть множество стилей, которые не имеют четкой градации, то есть сайт может содержать в себе микс из нескольких стилей
Поиск референсов
Подборки из нескольких сайтов смежных тематик, оформление которых вам понравилось (блоки, иконки, обработка изображений, цвета, элементы, шрифты). Moodboard
Цветовая палитра
Выбор цвета настроения,
цвета эмоции, которые вызывают соответсвующую ассоциацию у посетителей. Основные и дополнительные цвета
Типографика
Работа со шрифтами. Правильно подобранные шрифты создают необходимую атмосферу сайта. Это часть дизайна
/ стили дизайна /
Нет чёткой характеристики типов и стилей в дизайне.
Сайт может содержать в себе микс из нескольких стилей
Классический стиль
Никогда не выходит из моды, поэтому является одним из наиболее популярных. Демонстрирует серьёзность, стабильность и надёжность.
- чистый дизайн
- сдержанная цветовая гамма, обычно в светлых оттенках. Могут присутствовать фирменные цвета и элементы проекта
- простые лаконичные решения
- понятная типографика
- понятные шрифты — без излишеств
- графика, анимация либо совсем отсутствуют, либо присутствуют незначительно
Минимализм
Упор на визуал, где есть эстетически приятные
и хорошо обработанные фотографии. Упрощает интерфейс веб-сайта, удаляя ненужные элементы и сосредотачивая внимание на продукте.
- минимум контента
- максимум воздуха
- простые чистые цвета, преобладание белого
- пустота и простота
- грамотная работа с пространством
- акцент на контент и фотографии
Иллюстративный стиль (рисованый)
Использование иллюстраций, нарисованных художником или иллюстратором. Сайты в данном стиле выглядят, как будто только нарисованы. Они интересные, запоминающиеся.
- использование рисунков или иллюстраций
- индивидуальность проекта
- яркие цвета и сбалансированная гамма
- широкое применение
- может плохо комбинироваться с фотографиями
Ретро (винтаж)
Используются какие-либо элементы, имевшие распространение в прошлом: яркая графика поп-арта второй половины 20 века, старинные «летописные» буквицы, королевские вензеля или геральдические символы.
- стилизованные сайты
- особая цветовая гамма
- обработанные фотографии
- уникальная типография, большое внимание шрифтам
- паттерны и текстура (газетные, книжные страницы)
- не забывать про юзабилити
Реализм
В основном, сайты, которые используют фотографии в качестве основного фокуса: люди, еда, производство продуктов или даже мода. Используется для передачи прозрачности их предложений, как бы говоря: «вы получаете то, что видите».
- акцент на визуальные элементы
- грамотная работа с фотографиями
- максимально объёмные и реалистичные объекты
Стилистика проекта выбирается исходя из ЦА проекта, пожеланий заказчика и взглядов дизайнера. Сайт должен вызывать правильные эмоции, те, которые мы хотим вызвать посетителю.
Если сайт рассчитан на широкую аудиторию, на простого обывателя, то не нужно пытаться изобразить что-то трендовое или сложное. Если вы выберите классическое решения, то оно всегда будет в тренде, как говорится, классика — вне времени. Трендовые решения оставьте для креативных и творческих проектов.
совет #1
Если вы новичок, вам будет трудно поддержать какой-то сложный стиль дизайна страницы, поэтому ориентируйтесь на классический стиль.
Классика — это хорошие сайты, с аккуратной типографикой, хорошо подобранными изображениями. И такие сайты будут актуальны и через пару-тройку, пусть и с какими-то доработками.
Такой сайт живет дольше, в сравнении с трендовыми и модными тенденциями, которые могут быть уже неактуальны через год.
/ дизайн /
где черпать идеи
Референсы — готовые сайты
Примеры сайтов, которые вам нравятся, либо предложил заказчик, чтобы перенять некоторые идеи: стиль, отдельные экраны, отдельные элементы (иконки, шрифты, цветовая палитра и тд).
Крупнейшие сообщества и источники вдохновения для людей творческих профессий:
Референсы — иллюстрации, открытки, фото
Помогают найти идеи, в том числе через ассоциации.
База «Вдохновение»
Примеры оформления различных блоков учениками курсов «Лендинги на GetCourse» и «Личный кабинет GetCourse».
Референсы - готовые сайты #Behance, Dribbble
совет #2
Выделите основные элементы оформления страницы:
- цветовую палитру (обычно дизайнеры прилагают к своей работе палитру)
- шрифты (если шрифты выбранного макета платные, попробуйте найти альтернативные бесплатные шрифты)
- оформление заголовков и текстов
- оформление форм и кнопок
- оформление теней
- фон
- иконки
- обработка фотографий
Выделенные элементы сайта вы можете использовать как основу для оформления ваших страниц.
Соберите 2-3 варианта первого экрана, далее дизайн уже стройте на основе выбранного варианта — сэкономите время на переделках страницы.
/ цветовая палитра /
как выбрать
несёт эмоциональный посыл и создаёт атмосферу. Способен «убить» сайт
Пожелания заказчика
необходимо прислушиваться. Хочет ли яркий сайт, либо приглушённые цвета
Тематика проекта
Ассоциации (зелёный — медицина). Каждый цвет имеет своё настроение и несёт определённый посыл
Фирменный стиль.
Брендовые цвета. Узнаваемость. Цвета, которые ассоциируются с проектом, дублируются в соцсетях.
Визуал от заказчика
Логотип, иллюстрации, фотографии, иконки
Цвет — важная часть дизайна, имеет своё настроение,
несёт эмоциональный посыл и создаёт атмосферу. Способен «убить» сайт
Человек может за доли секунды понять, что хочет купить товар только потому что ему нравится его цвет, их красивое сочетание, выбранная палитра. Вряд ли вы решитесь купить желто-сиреневые брюки в красный горошек.
Моментально подсознательно пользователь принимает решение останется ли он на странице или закроет её, нравится ли ему цвета сайта, вызывают ли они у него приятные и правильные ассоциации или же, наоборот, отталкивают и формируют негативные эмоции.
совет #3
Правила использования цветов:
- цвет проявляется в иконках, иллюстрациях, кнопках, фоне, тексте
- основной цвет — используется в большей мере (заголовки, важная информация)
- дополнительный цвет — второстепенная по важности информация;
- акцентирующий цвет — самый важный инструмент для привлечения внимания посетителя. Он должен быть контрастным, выделяющемся и на основном, и на фоновом цвете;
- фоновый — цвет, который преобладает на сайте, заполняя свободное пространство. Должен взаимодействовать со всеми выбранными оттенками, не отвлекая внимание
- не более 3-5 цветов
- избегайте «чистых» цветов
- чёрный цвет в чистом виде (#000000) практически не используют, а обычно используются его оттенки
- используйте генераторы цветовой палитры
Разбор ошибок в оформлении #Цвета
/ типографика /
Правильно подобранные шрифты создают нужное настроение и атмосферу на сайте
Антиква (с засечками)
Элегантность. Эксклюзивность Статусность. Люксовость
Гротеск (без засечек)
Простота. Стабильность.
Устойчивость. Современность
Акцидентный (атмосферный)
Эмоции. Атмосфера.
Эксклюзивность. Творчество
Рукописный
Ощущение человеческого присутствия. Это создает эмоциональную привязанность.
Шрифт это не просто буквы, а часть вашего дизайна. Правильно подобранные шрифты создают нужное настроение и атмосферу на сайте
совет #4
Придерживайтесь следующих правил типографики:
- заголовки и акценты: любой из видов шрифтов (антиква, акцидентный, рукописный), основной текст — гротеск
- не более 1-2 шрифтов на лендинге
- соблюдение визуальной иерархии текстовых элементов (размер шрифта, толщина написания)
- не более 3 начертаний одного на экран (начертание — размер или толщина), не более 4-5 начертаний на лендинг
- единство стиля заголовков, подзаголовков и основного текста на всей странице
- капслок — для заголовков или акцентных фраз
- текст не должен сливаться с фоном (цвет или изображение), оставаться читабельным
Разбор ошибок в оформлении #Типографика
совет #5
Айдентика сайта.
Сохранение единства стиля в выбранном макете.
Соблюдение ритма композиции и стилистики по всему сайту.
Это касается всех элементов страницы:
- шрифт
- цвет
- кнопки
- ссылки
- стили текста
- элементы навигации
- фоны
- подложки
- формы
- обработка фотографий
- иконки
- графические элементы
Разбор ошибок в оформлении #Айдентика сайта и другие