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

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

Для веб-дизайнера важно накапливать визуальный опыт: изучать крутые сайты, тренды, путешествовать и черпать идеи из всего-всего. Это важно, чтобы расширять свой арсенал решений и идей, соединять обыденные решения и создавать новый продукт.

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

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

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

Сайты

Первый. Первый. Сайт посвящен борьбе с болезнью Альцгеймера. Чтобы бороться с потерей памяти создатели ресурса придумали делиться воспоминаниями со всем миром. Но это не Твиттер, Инстаграм ил Вконтакте — здесь совсем иная, сакральная атмосфера. Ты летишь по планете воспоминаний, спускаясь ниже и читая небольшие отрывки из жизни других людей. Это потрясающе!

Второй — пятьдесят причин для путешествий от авиакомпании KLM. Для меня этот сайт стал одним из первых примеров крутого Digital. Тот случай, когда контент говорит сам за себя, использование крутых технологий излишне — фото и подходящая музыка заставляют планировать следующую поездку.

Третий — сайт французского digital-агентства Mutt. Крутая игра с типографикой на главной странице, интересные анимации в меню, быстрый и удобный слайдер проектов с бесшовными переходами.

Инсайд для дизайнеров: альтернатива составлению портрета ЦА — карта эмпатии.

Когда анализируешь будущих пользователей сайта, нужно встать на их место, почувствовать то же, что и они. Это позволит построить интерфейс под запросы пользователей. Создать то, что будет востребовано и удобно.

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

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

Чтобы понять чувства и ощущения пользователя можно использовать карту эмпатии. Это набор вопросов, отвечая на которые дизайнер ставит себя на место покупателя. Из зрителя фильма, который видит только изображение экрана, дизайнер превращается в главного героя. Теперь он может оглянуться по сторонам, увидеть то, что за экраном.

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

Инсайд для разработчиков: больше интерактива с независимой библиотекой create.js

Бывает так, что работаешь над решением какой-то задачи, пишешь код, строишь логику. И вроде все получается, но на этапе тестирования выявляешь баги, которые требуют переписать весь код с нуля. Возможно, я столкнулся с этим при написании фильтров для блога.

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

Готовые решения — не панацея. Перегружать сайт ненужными функциями значит увеличивать время загрузки страницы — это неудобно для пользователя. К тому же могут возникнуть конфликты между разными решениями. С этим нужно быть осторожным.

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

Одна независимых библиотек — create.js. Это даже несколько библиотек в одной. Она упрощает работу с Canvas, его анимацией, добавлением звуков и установкой прелоадера. Это удобно и быстро.

Написание «Сайтов и инсайдов» похоже на игру — легко наблюдать свой прогресс. Например, сегодня мой персонаж получил + 3 к известным сайтам, + 1 к способу анализа ЦА и + 4 к независимым JS-библиотекам = )

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