04

03

02

01

Исследование проекта

Где мы ищем примеры референсы и изображения для составления мудборда и проекта в целом

Behance - бесплатный сервис, на котором дизайнеры размещают свои работы
#MADEONTILDA - Галерея лучших проектов пользователей Tilda и наглядные примеры современного веб-дизайна.
Pinterest - место для поиска вдохновения.

Из брифирования/анкеты клиента

Смотрим топ запросов Яндекс Гугл по этой нише, а также на 2Гис , Яндекс карты

Можем посмотреть форумы клиента, что бы понять основные боли

Многие путают moodboard и референс. Первое — более широкое понятие, чем второе.
Мудборд (или доска настроения) – это коллаж из фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем, цитат, логотипов, текстур, они должны передавать общее настроение и стилистику. К примеру, необходимо создать макет сайта для спортклуба. Перед тем, как приступить к работе, важно понять, с чем это заведение должно ассоциироваться (релакс, движение, легкость или сила и т.д. )

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

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

РЕФЕРЕНС И МУДБОРД В ЧЕМ РАЗНИЦА?

Пример Мудборда

05

ФОТОБАНКИ

Анализируя референсы, старайтесь понять:

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

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

Есть три пути: найти бесплатно, купить или сделать.
Нельзя просто так взять нужную картинку в Google (или любом другом поисковике) и использовать ее, указав источник. Это нарушение авторского права, которое может стать основанием для судебного иска. Все картинки кому-то принадлежат.

Можно бесплатно использовать изображения по лицензиям Creative Commons. Они делятся на две крупные категории: разрешенные или запрещенные к коммерческому использованию. (Если ваша страница подразумевает извлечение прибыли даже косвенными путями, то это соответствует категории коммерческого использования.)

1 Google Images
Во вкладке «Права на использование» можно выбрать лицензию, разрешающую бесплатное использование изображения.

2 Бесплатные фотобанки
Лицензия CC0 (Creative Commons Zero) приравнивается к общественному достоянию. Автор полностью отказывается от своих прав на изображение.
2.1 Изображения и видео
https://ru.freepik.com/
https://unsplash.com

2.2 Векторные картинки
https://www.pngegg.com/ru
https://www.flaticon.com/ru/

2.3 GIF-анимации
https://giphy.com/
https://usagif.com/

3 МОКАПЫ
psdmockup.ru

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

На этапе анализа откройте более 5 сайтов конкурентов. Узнайте ассортимент конкурентов, условия работы, оцените удобство сайта для пользователя. Опишите сильные и слабые стороны САЙТОВ (не самих конкурентов) оценивайте удобство пользования и дизайн.
Выпишите эмоции и ассоциации, которые будущий сайт должен вызывать у пользователя.

Какими могут быть эмоции?
Лёгкость, воздушность, сексуальность, простота, восхищение, комфорт и другие.
Какими могут быть ассоциации?
Здоровье, семья, любовь, отдых, вкусная
еда, уютная квартира и др.?

НАСМОТРЕННОСТЬ ИЛИ КАК НЕ КОПИРОВАТЬ ЧУЖОЙ ДИЗАЙН

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

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

Интересная статья про от Тильда

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

пример таблицы