Принято считать, что для того, чтобы получить значительную отдачу от изменений на сайте, нужно провести глубокий редизайн, изменить концепцию, сделать ребрендинг и т.д. Но на самом деле иногда даже небольшие изменения могут привести к огромному эффекту. Иногда вы можете добиться конверсии благодаря изменению или перемещению элементов вашего сайта. Когда мы писали статью про А/В анализ, мы наткнулись на подборку примеров, которая демонстрировала результаты тех или иных тестов. Мы выбрали несколько из них, опираясь на два основных параметра: простота и эффективность.

Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-январь 2014.

За последние несколько лет веб-дизайнеры постепенно пришли к тому, что «захламление» сайтов несущественными элементами — плохая идея. Такие элементы веб-дизайна, как бессмысленные изображения, запутанные навигационные системы, бесчисленные кнопки социального обмена и прочее уводят пользователей от основных целей веб-страницы.

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

Несколько примеров минимализма целевых страниц

Давайте рассмотрим минимализм landing page некоторых успешных веб-приложений:

Заметил, что здесь много сложных и интересных статей про Win cmd и Regex, но гораздо меньше чего-то простого, с чего можно начать знакомство с этими мощными инструментами.
Идея написания этого урока возникла, когда я понял, что наверняка такие же задачи пытается решить еще кто-то и возможно такая статейка поможет кому-нибудь поменять рутинный копи-паст на гораздо более интересный и технологичный метод написания кода.

Итак, вводная:

Первая часть про прототипы.



Описание процесса у меня очень длинным получается, поэтому двумя частями не ограничимся.
Итак, продолжаем с нашими наушниками. Для начала давайте разберемся, как в Скетче делать сетку...

В прошлый раз мы написали довольно популярную статью: «Серьезное проектирование серьезного магазина. Часть 1. Исследования», эта статья её логическое продолжение. В этой статье и в последующих мы опишем почти 60 функциональных модулей топовых интернет-магазинов мира, а также подробно разберем интерфейс многих страниц.

Рады представить первый выпуск «Самого интересного из мира веб-дизайна». Мы постараемся делать такие выпуски регулярно. В сегодняшнем выпуске мы поговорим про дизайн как таковой: 1) Что должен знать дизайнер об отступах в заголовках; 2) Как иконка прелоадера влияет на наше отношение к сервису; 3) Азы адаптивного дизайна; 4) Использование «Photoshop Generator» для создания прототипов; 5) Руководство по стилю от Yelp. Расскажем о новых интересных и красивых сервисах: 1) Генератор случайных пользователей; 2) Сервис Peek. Видео-отзыв о сайте от реального человека; 3) Recordit.co. Сервис для записи скринкастов; 4) Peekcalendar. Карманный календарь. Покажем, что нового, у всем известных ребят: 1) Iconfinder. Версия 5.0; 2) Новый Ted.com 2.0

---

Что должен знать дизайнер об отступах в заголовках

В своей статье Артём Гобунов раскрывает простое «правило внутреннего и внешнего», которое является частным случаем теории близости. На конкретном примере демонстрируется, как нужно рассчитывать вертикальные расстояния между заголовком и подзаголовком, а также между ними и контентом страницы, чтобы все элементы не «смешивались в кашу».

http://artgorbunov.ru/bb/soviet/20140224/

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

На типичных сайтах изображения могут появляться тремя способами.

1. Быть элементами дизайна сайта (бекграунды, кнопки и т.д.).
2. Загружаться через специальные модули (например, изображения в фотоальбом).
3. Вставляться через WYSIWYG-редактор CMS (например, в текст статьи).

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

Сначала на помощь приходит реализация Adaptive Images…

Дизайнер

Дизайнер — это, в первую очередь, создатель.

— А ты кем работаешь?
— Дизайнером.
— О! Круто!

Сколько раз я слышал подобный диалог. А смысл примерно такой же, как «— Менеджером». Тоже такая общая фраза, которая под собой может подразумевать десятки вариаций. В России (наверное, и во всем мире, но за него я не ручаюсь) почему-то принято считать дизайнером всех, кто умеет (или думает, что умеет) подбирать картинки к статьям, рисовать кнопочки на сайтах и придумывать иллюстрации для футболок (последний вообще иллюстратор, а не дизайнер). Дизайнер футболок… Фу! Дизайнер футболок — это тот, кто, скажем так, проектирует футболку. Рисунок на ней — дело энцатое. А у нас нет! У нас это тот, кто нарисовал смайлик и напечатал его на футболке. Я местами утрирую, конечно, но смысл именно такой.

Введение

Я работаю веб-дизайнером. Какое-то время назад я подрабатывала фрилансером, сейчас работаю в небольшой студии. У нас нет менеджера проектов, поэтому, зачастую, я сама выступаю этим самым менеджером, по совместительству. Опыт общения с самыми разными заказчиками у меня достаточно большой. Статья «Краткая инструкция по работе с web-дизайнером (для менеджера проекта)» вызвала у меня шквал эмоций и бурю негодования, потому что именно таких заказчиков я всегда старалась избегать. В этой статье я попробую описать, как в идеале должна проходить работа заказчика и дизайнера.

С удовольствием приму критику и выслушаю мнения «другой стороны».

В статье будут даны рекомендации по работе с WEB-дизайнерами. Исполнение этих рекомендаций даст значительное повышение качества работы, увеличение производительности труда и сохранит нервные клетки.

В каждом из пунктов будут живые примеры и ссылки на полезные, бесплатные инструменты.

В идеале, в комментариях вы оставите свои советы, замечания к статье, ссылки и примеры.

Покончим с устаревшим подходом к контенту

На протяжении всей истории интернета мы работали с контентом двумя способами:

1. Создавали «один шаблон на все случаи жизни»
2. Создавали для каждого случая свой уникальный шаблон

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

Уже три года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-ноябрь 2013.

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

Команда разработчиков PayPal некоторое время работала над решением ряда проблем доступности в Bootstrap 3, итогом чего стало появление accessibility плагина, который недавно был выложен в открытый доступ. Фактически он позволяет реализовать доступность интерфейса на базовом уровне без каких-либо особых знаний в этой области.

Все началось с этого поста и продолжилось вот этим. Их краткое содержание:

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

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

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

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

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

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

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

AutoCAD начала 80-х

Зум появился очень давно, на заре эры графических интефейсов, с первыми векторными редакторами.
Но с тех пор он не был использован почти нигде, кроме САПР и программ для работы с графикой. Про него вспомнили только когда появились мобильные устройства — на маленьком экране не умещались большие фотки и веб-страницы.
В мобильных интерфейсах зум стал вполне привычным и естественным и продолжает эволюционировать. Но на десктопе зум заброшен и, на мой взгляд, совершенно напрасно. Zoomable user interface (ZUI) даёт ряд преимуществ, позволяющих лучше решить актуальные задачи. Я решил описать эти преимущества по типам зума, с примерами.

Введение

«Нужно больше золота»
Непризнанный экономический гений

Всё началось с вот этого разговора в комментах. Если вкратце, содержание можно свести к следующему: заказчик хочет «красиво», дизайнер хочет сделать красиво (без кавычек); заказчик фонтанирует идеями, зачастую вредными для юзабилити и продаж, дизайнер знает, как действовать в рамках типовых решений по юзабилити и стилю.

И тут на сцене появляется рекламщик/продажник. У него тоже есть свое мнение. И мнение это такое: к лешему красоту истинную и крикливый кич, выбросите на помойку споры по поводу идей; сайт должен работать, приносить прибыль: инициировать продажи, служить для брендинга, привлекать звонки — то, что требуется заказчику. Нужно исследовать целевую аудиторию — и выяснить, какой дизайн поможет добиться от неё нужной реакции. И создать с нуля именно то, что требуется для достижения цели. Типовые решения не годятся — они не продуманы для конкретного сочетания заказчик/целевуха. Хуже того, они примелькались.

«Хорошо», — согласятся с ним. Даже здорово. Но как сделать оригинальное решение там, где оригинальности быть в принципе не может (приведу пример из той дискуссии — «интернет-магазин по продаже букетов для новобрачных»)? И как понять, что именно хочет аудитория?

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

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

Вы более 9000 раз заказывали дизайн, и ни разу не разочаровались? Творческие люди понимают вас с полуслова, а результат их работы непременно радует ваш глаз и кошелек? Может быть, вы дизайнер-профессионал, отточивший мастерство общения с закачиком до мастерского уровня?

Тогда этот пост не для вас. Вы и так все знаете.

Но если письма от дизайнера, который занимается вашим проектом, начинаются заголовком «правки ver_3_b_часть II», а общаться с каждым днем все сложнее — попробуйте почитать. Может быть, здесь найдется полезный совет, который облегчит вам жизнь и сэкономит деньги.
Я предлагаю вашему вниманию несколько заметок-соображений, которые накопились за время моей работы в этой области.

Разработка целевых страниц или landing page в России стремительно набирает обороты. Это вполне естественно, учитывая более высокие показатели конверсии целевых страниц, по сравнению с обычными страницами сайта.

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

Предыдущий перевод (Landing page, которая работает), посвященный дизайну качественных посадочных страниц набрал больше 150 000 просмотров. С тех пор прошло уже много времени и подход к дизайну изменился – все больше становится минималистичных страниц, о которых и пойдет речь в статье.