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

Жил-был на свете дизайнер. И все-то у него было хорошо: и руки прямые, и планшет вакомовский, и образование дизайнерское. Да только преследовала его напасть – боялся он свои работы показывать людям, а начальнику в особенности. Начнет работать над очередной задачей – радуется, фонтанирует идеями, вдохновение переполняет его дизайнерскую душу. Но чем ближе к дедлайну, тем все больше и больше его одолевают грустные мысли, тем сильнее трясутся руки и тем меньше ему нравится собственная работа.

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

Оглядываясь на 2014, можно отметить некоторые впечатляющие тенденции, появившиеся в веб-дизайне: платформы для проектирования «без кода», параллакс, одностраничные веб-сайты и многое другое.

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

Чтобы узнать, какие тенденции будут процветать в течение следующего года, я обратился к членам проектной команды Webydo, разработчикам веб-дизайн платформы, чтобы они рассказали, какими будут по их мнению топ 7 главных трендов в веб-дизайне на 2015 год.

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

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

Прим. перев.: В рамках нашего блога на Хабре мы решили начать публикацию серии переводов материалов, подготовленных создателями британского госпортала Gov UK. Команда Gov UK знаменита тем, что очень подробно описывает весь ход своей работы – поэтому ее материалы могут быть полезны с практической точки зрения (разумеется, не только для создания масштабных госсервисов), ведь все, о чем пишут создатели проекта, было реализовано на практике. Мы решили начать серию переводов с блока, посвященного гибким методологиям проектирования, и его важной части – создания так называемого user-centered design.

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

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

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

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

Настало время наконец-то найти ответы на два главных вопроса: “Кто виноват?” и “Что делать?” в вечной борьбе дизайна и верстки…

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

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

Ниже представлены несколько примеров того, как этот эффект используется в современном веб-дизайне:

Сегодня обратимся к теме прототипов. Сразу хочу попросить 32% читателей, которые уже в курсе этой темы, не мешать остальным 49%, которые не пробовали работать с сервисами по созданию прототипов, разбираться в этом вопросе (по данным опроса «Знаете ли вы о существовании сервисов для создания прототипов» часть 2).

Тема «прототипирование»

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

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

От переводчика

Решила сделать перевод одной интересной статьи по упрощению навигационной системы сайта. Это только первая часть про структурирование контента на сайте. Она достаточно объемная, но от этого не менее интересная, надеюсь Вы не устанете читать. Здесь содержаться достаточно подробные пояснения как сделать информационную архитектуру проще и понятней, особенно для крупных сайтов с большим количеством контента, вроде интернет-магазинов.
Если найдете какие-то ошибки, пожалуйста, напишите в лс, я исправлю.
Поехали!

Какой цвет лучше – бирюзовый или оливковый, а кнопки – глянцевые или плоские, а шрифт – антиква или гротеск, а вёрстка – фиксированная, резиновая, или адаптивная… и еще 100500 подобных вопросов. Добро пожаловать в голову дизайнера. Попробуем разобраться, что здесь лишнее, а чего не хватает.

Итак, речь пойдет о дизайнерах в маленьких компаниях. Но не о тех, кто рисует одноразовые художественные промо-сайты (где часто работает подход «чем оригинальнее, тем лучше»), а о тех, кто создает функциональные, полезные приложения и веб-интерфейсы, рассчитанные на долгосрочное использование. Вроде бы, какая разница, что рисовать – везде кнопки, странички, картинки, текст… А вот и нет. Это совершенно разные задачи и решать их должны люди с совершенно разными навыками и талантами. Но, обо всем по порядку.

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

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

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

Тема сегодня «Постановка задачи»

Я бы с тобой согласился, но тогда мы оба будем неправы.

Напомню суть проблемы. У вас есть подписанный договор. В голове у вас мысли, напоминающие взбаламученную бурей воду. Много идей, что можно нарисовать. Множество мыслей, как удивить будущего посетителя нового ресурса, чтобы он зашел и сказал «WOW, its cool», и разослал знакомым или поставил лайк. У вас уже пошли мысли, как вам вручат награду thefwa, awwwards или cssdesignawards (.com). Иногда видится даже такой момент, когда выходишь с договором в руке и предоплатой на банковском счету: звучит музыка, светит солнце, тебе все вокруг улыбаются.

Многие из вас, кто хоть сколько интересуется играми для iOS/Android, наверняка слышали про Monument Valley. Возможно, вы знаете, что игру разработала компания ustwo — опытная digital студия. Но вряд ли вам известно о руководстве под названием Pixel Perfect Precision, которое на данный момент разрослось до двухсот страниц и получило порядковый номер 3.

Pixel Perfect Precision — особое отношение и взгляд на то, как компания подходит к работе. От общих советов по командному взаимодействию, до конкретных руководств по Adobe Photoshop и Illustrator.

Pixel Perfect Precision — своеобразный справочник по digital дизайну, в котором авторы постарались поделиться своим опытом. Под катом небольшой обзор изменений третьей редакции и ссылки на скачивание русской версии.

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

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

Мы вступили в новую эру оптимизации посадочных страниц. Дизайнеры, профессиональные маркетологи, SЕО-оптимизаторы, CRO, UX-эксперты и другие специалисты объединили свою коллективную мудрость для разработки нового типа посадочных страниц, которые выходят за стандартные рамки и не поддаются традиционной логике. Это будут посадочные страницы будущего.

Вот некоторые из иновационных элементов в оптимизации посадочных страниц, которые, как я считаю, сигнализируют о начале новой эры в дизайне посадочных страниц.

В предыдущей статье мы рассмотрели проблемы повседневности. Сегодня давайте рассмотрим решение одной из них.

Сегодняшняя тема «Встреча»

Идеальная встреча: та — которая не состоялась

Нет-нет, конечно же, я вас не отговариваю от прямых встреч. Но, поймите, их число должно быть равно трем. Презентация, подписание документов (тут конечно от договора зависит, но...), получение рекомендательного письма (конечно, если вы не разрабатываете ЦРМ, интранет … где, конечно, требуется внедрение, обучение и т.д.). Смысл в том, что когда вы приходите на встречу, то 70-80% времени уходит на обсуждение всего, кроме самого проекта.

Боль

Как не странно, но по самому процессу разработки визуальной части мы в компании отстаем как минимум на года 2-3. Во-первых, классическая, изолированная, универсальная модель: Проектирование — Дизайн — Верстка. Во-вторых, один и тот же подход остается как для страниц мелких акций (заглушек), так и для масштабных сервисов вроде, где трудно предугадать сценарий развития. Но мы метем все под одну гребенку. Я лично не знаю в нашей компании персонажа, который глобально бьется над улучшением процесса и самой системы разработки визуальной части. В основном звучат умелые фразы, по поводу сроков и складывается впечатление, что все мастера по тайм менеджменту. Многие из резких фраз, как «Процент времени», напрочь убивают всю логику, и наивно полагаться на сохранение продуктивности на том же уровне. Когда разрабатываешь крупный проект, 5-7 глобальных переключений в день на другие задачи, полностью парализуется и сбивает весь процесс разработки основного проекта. Ну, впрочем, это менеджерская магия с выгодой в одну сторону.

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

Теперь о вытекающее из этого «боли»…. Ситуация, которая сейчас выглядит так:

Давайте сперва определимся, для кого эта статья (далее исполнитель), и с какими проблемами вы сталкиваетесь каждый день.

• дизайнер-фрилансер;
• дизайнер, работающий в web-студии / web-агенстве;
• web-студия / web-агенство;
• посредник между перечисленными выше и клиентом.

Привет, username!

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