Где мы ищем примеры референсы и изображения для составления мудборда и проекта в целом
Behance - бесплатный сервис, на котором дизайнеры размещают свои работы
#MADEONTILDA - Галерея лучших проектов пользователей
Tilda и наглядные примеры современного веб-дизайна.
Pinterest - место для поиска вдохновения.
Из брифирования/анкеты клиента
Смотрим топ запросов Яндекс Гугл по этой нише, а также на 2Гис , Яндекс карты
Можем посмотреть форумы клиента, что бы понять основные боли
Многие путают moodboard и референс. Первое — более широкое понятие, чем второе.
Мудборд (или доска настроения) – это коллаж из фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем, цитат, логотипов, текстур, они должны передавать общее настроение и стилистику. К примеру, необходимо создать макет сайта для спортклуба. Перед тем, как приступить к работе, важно понять, с чем это заведение должно ассоциироваться (релакс, движение, легкость или сила и т.д. )
На начальном этапе нужно понять, что именно требуется и каким должен быть результат.
Для этого нужно
собрать все вводные данные по проекту:
- информацию о компании,
- каковы цели и идеи проекта,
- кто является целевой аудиторией;
- есть ли фирменный стиль;
- какое настроение должен вызывать проект;
- какие проекты нравятся и не нравятся.
- какие преимущества у продукта или услуги клиента перед другими его уникальность,
- пожелания по дизайну и структуре, примеры конкурентов
РЕФЕРЕНС И МУДБОРД В ЧЕМ РАЗНИЦА?
Анализируя референсы, старайтесь понять:- как передается информация и настроение
- почему именно такие цвета , сочетания цветов
- как взаимодействуют элементы между собой, анимацию элементов
- как расположены объекты, как распределено пространство, расстояние между элементами и между разделами ,
- какие изображения и ассоциаци и используются , стиль изображений, как обработаны изображения (скругления , обесцвечивание, коллажи, вырезание объектов)
- какие шрифты , толшина шрифтов, иерархия и размеры шрифтов
- примененные фильтры, наложения, тени , подложки
- с помощью чего автор акцентирует внимание , увеличение объектов , тени подсветки , жирность
Составите таблицу конкурентов , где вы сможете выписать сильные и слабые стороны , удобство использования , какие маркетинговые фишки используют (тесты , квизы , акционные предложения), как завлекают пользователя.
Есть три пути: найти бесплатно, купить или сделать.
Нельзя просто так взять нужную картинку в Google (или любом другом поисковике) и использовать ее, указав источник. Это нарушение авторского права, которое может стать основанием для судебного иска. Все картинки кому-то принадлежат.
Можно бесплатно использовать изображения по лицензиям Creative Commons. Они делятся на две крупные категории: разрешенные или запрещенные к коммерческому использованию. (Если ваша страница подразумевает извлечение прибыли даже косвенными путями, то это соответствует категории коммерческого использования.)
1 Google Images Во вкладке «Права на использование» можно выбрать лицензию, разрешающую бесплатное использование изображения.
2 Бесплатные фотобанкиЛицензия CC0 (Creative Commons Zero) приравнивается к общественному достоянию. Автор полностью отказывается от своих прав на изображение.
2.1 Изображения и видеоhttps://ru.freepik.com/https://unsplash.com2.2 Векторные картинкиhttps://www.pngegg.com/ru
https://www.flaticon.com/ru/
2.3 GIF-анимацииhttps://giphy.com/
https://usagif.com/
3 МОКАПЫ psdmockup.ru Какую бы платформу вы не выбрали, поиск изображения всегда начинается с подбора ключевых слов, которые бы описывали идею вашего фото или вектора. Самая распространенная ошибка поиска картинки для сайта: использовать ключевые слова статьи или проекта, вместо того чтобы продумать отдельное описание для изображения.
Нужно сконцентрироваться на ассоциациях к основной мысли или объекту проекта. Например, если вы ищете заглавную иллюстрацию для лонгрида о том, как правильно перевозить домашних животных, скорее всего вы будете использовать ключевые слова «собака, машина, дорога»
На этапе анализа откройте более 5 сайтов конкурентов. Узнайте ассортимент конкурентов, условия работы, оцените удобство сайта для пользователя. Опишите сильные и слабые стороны САЙТОВ (не самих конкурентов) оценивайте удобство пользования и дизайн.
Выпишите эмоции и ассоциации, которые будущий сайт должен вызывать у пользователя.
Какими могут быть эмоции?
Лёгкость, воздушность, сексуальность, простота, восхищение, комфорт и другие.
Какими могут быть ассоциации?
Здоровье, семья, любовь, отдых, вкусная
еда, уютная квартира и др.?
НАСМОТРЕННОСТЬ ИЛИ КАК НЕ КОПИРОВАТЬ ЧУЖОЙ ДИЗАЙН
Насмотренность — это накопленный визуальный опыт. Насмотренность означает способность оценивать примеры работ и создавать привлекательные, современные и функциональные сайты.
Стараемся запоминать и повторять тенденции и тренды , а не копировать дизайн.
Насмотренность складывается из крупиц из ежедневного просмотра примеров
М ы можем скопировать чужую работу только в рамках обучения, для отработки навыка работы с инструментами программ.
Интересная статья про от Тильда - Декоративные элементы
- Неяркая палитра
- Атмосферные фотографии
- Тонкие линии
Референсы - это примеры сайтов в конкурентной нише , они помогают разобраться в современных тенденциях развития дизайна и определить стратегию создания проекта сайта именно в этой нише