Анализ аналогов №2

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

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

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

Анализируем:

1. Тексты - содержание, какой посыл в первую очередь транслирует сайт. Количество текстов, это информационный блок или продающий. Шрифт и размер шрифта. Собираем свой идеальный вариант - Франкенштейна.
2. Изображения - стилистику рисунков или фото. Содержание, что изображено и какой эмоциональный посыл. Вы можете в будущем комбинировать стиль и содержание разных аналогов, если не будет идей.
3. Кнопки - размер кнопок, цвет, содержание, количество. Какой вариант используется чаще остальных.
4. Цвет - фон, яркий сайт или нейтральный, какой эмоциональный окрас несет сайт. Определите какие чаще сайты встречаются: яркие или спокойные / темные или светлые / какой цвет чаще всего повторяется.
5. Сетку сайта - простая или сложная сетка у конкурентов встречается чаще? Если сетка у всех примерно одинаковая, например, простая из 4х полос и вся информация довольно крупно изображена, то скорее всего лучше придерживаться той же идеи. Если же у конкурентов солянка, то отталкиваться от других факторов.
6. Особенности навигации и структуры.
7. Стилистика - важно определить цель сайта: выделиться и быть бунтарем новатором или все же это классический подход. В зависимости от выбора вы сможете отталкиваться от стандартов конкурентов или же делать вопреки.
8. История сайта - воспользуйтесь онлайн сервисом web.archive.org просто вбив в строку домен конкурента. Теперь вы можете видеть историю сайта, подгружая его за разные года чтобы увидеть, как он менялся и что именно изменил. Возможно вы наступаете на чужие грабли. Нажмите на время, чтобы открылась история
9. Порядок блоков - попробуйте создать краткие карты сайтов из перечиленных блоков. Проанализируйте - есть ли одинаковые сценарии? Насколько успешны эти сценарии? Это первая попытка дизайна или к этому пришли со временем. Высокий ли трафик у страницы с таким сценарием?

Собираем Франкенштейна.

Определите лучшие из решений по следующим критериям:

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

Пример выводов:

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

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

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

Лучше использовать сразу чистовые тексты и во всех вариантах. То есть прорисовывать в дизайне, как самый короткий текстовый вариант, так и средний и самый длинный. Это следует учитывать не только в заголовках, но и вообще всем контенте. Особенно в коммерческих блоках, которые заполняет контент-менеджер. Такие как: карточка товара / первый экран с H1 и H2 / текстовые блоки под замену ..

Как подобрать стилистический референс:

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

Используйте все факторы по-очереди.

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

Попробуйте искать не по теме, а по блокам. Например: баннер / карточка товара / контакты. Для этого вбивайте соотвествующие слова в поиск dribbble, pinterest или ресурса, который вы используете.

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

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

Например: для магазина мебели может быть запрос "лампы ui / дом web / инструменты ui / часы / телефон ... "

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