Сайты и инсайды # 5

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

Продолжаю искать интересные решения в мире Digital. На этот раз сконцентрировался на креативных сайтах, которые больше про красоту, чем про бизнес. Для начинающих UX-аналитиков и маркетологов нашли материалы по критериям для составления портретов ЦА, а для разработчиков — три сервиса, помогающие проверить устойчивость верстки в разных браузерах и на разных устройствах.

Сайты

Первый — сайт фотографа Otto van der Toorn. Сайты для творческий людей или для fashion — отличная ниша для креатива. Если команда хочет сделать что-то уникальное, стоит искать клиента из этой сферы. Тогда у команды будет много качественного контента: фотографий, видео и т. п., с которым можно работать.

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

Второй — погружение в 50 лет истории музыки, популярной в Швейцарии. Помните, в одной из прошлых заметок был сайт, где ты бродишь по карте воспоминаний? Здесь похожий концепт — тебе предстоит погружаться в разные музыкальные эпохи. Начиная с 60-х, ты год от года двигаешься по сети музыкального чарта и видишь популярные композиции того времени. Можно посмотреть какие места в чартах занимала композиция, а также услышать ее отрывок. Погружение потрясающее! Ощущаешь себя в машине времени, пересекая десятилетия за считанные секунды.

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

UX-инсайд: критерии для анализа целевой аудитории

Сейчас в Khorito составляем портреты ЦА для ИТ-компании. Поставили цели, зачем мы его проводим и обозначили результат, что хотим получить в итоге.

Но определение цели — не гарантия успеха. Ты можешь не знать, как прийти к результату, каким образом описать целевую аудиторию. Для этого нужна теоретическая подготовка. Она поможет структурировать выводы и не сойти с верного пути. Например, если бизнес работает в B2B, то подход к анализу потенциальных клиентов будет отличаться от B2C-сегмента.

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

1. Демографическом портрете;
2. Психографическом портрете;
3. Географическом портрете;
4. Поведенческом портрете;
5. Подходе к анализу ЦА в B2B.

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

Недавно со мной произошла история. Я увидел анонс конференции Design Trend и подумал, что хочу попасть туда. Платить 5 000 рублей за билет мне не хотелось, поэтому стал искать альтернативы.

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

Решил зайти через блог: показать свой интерес к Digital и к погружению в тусовку. Написал организаторам и скинул ссылку на свой сайт.

Ответ пришел быстро. И первым делом мне скинули скрин главной страницы, на которой поехала первая картинка.

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

Чтобы впредь это не повторилось нашел три сервиса, которые помогут все проверить. Первый — Screenfly. В нем куча разных шаблонов устройств: от телевизоров до смартфонов, это удобно. Еще можно задавать свои размеры экрана.

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

Третий — Sauce Labs. Это самый продвинутый сервис из всех. Ты можешь выбирать не только разрешение экрана, но и браузер, в котором запускается сайт. В наличии старые версии Safari, IE и прочих. Это полезно, через него я исправлял баг на главной странице блога.

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

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