Введение

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

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Сегодня мы публикуем вторую часть перевода. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Мы говорили о правилах создания чистых и красивых интерфейсов.

Вот эти правила:

1. Свет падает сверху (Часть 1)
2. Сначала черное и белое (Часть 1)
3. Увеличьте белое пространство (Часть 1)
4. Научитесь накладывать текст на изображения
5. Научитесь выделять и утапливать текст
6. Используйте только хорошие шрифты
7. Крадите как художник

Мы продолжаем знакомить вас с лучшими статьями по веб-дизайну. Сегодня мы перевели свежую статью на Medium о создании эффективных посадочных страниц. Перевод выполнен «Я люблю ИП».

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

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

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

На дизайн бывает три реакции: да, нет и ОГО! К «ого» и нужно стремиться.

— Милтон Глейзер

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

Интуитивный процесс дизайна

Интуиция – это бессознательное восприятие

— Карл Юнг

Всегда есть люди, отметающие то, что нельзя измерить. Но многие мыслители отдавали должное интуиции. Альберт Эйнштейн, Ричард Бакминстер Фуллер, Карл Юнг, Рэй Бредбери, Стив Джобс и даже Алан Тьюринг, знаменитый логик и криптоаналист, понимали, что математические доказательства основываются на «интуиции и гениальности». Великие мыслители и футуристы отводят интуиции ключевую роль в процессе решения задач. Для дизайнеров интуиция – это не нечто чужеродное, это больше похоже на дыхание. В интуиции, как в воде, плавают многие творцы, в то время, как их интеллект диктует формулу для исполнения и оформления конечного продукта.

Моделирование целевой аудитории (персонажей) и написание «пользовательских историй» (user story) были эффективными, когда клиенты и разработчики продуктов находились далеко друг от друга. Теперь все по-другому. В этом посте говорится о том, как одна команда разработчиков применила метод Job Stories для создания страницы профиля пользователя.

Сегодня я расскажу как и зачем мы построили интерфейс нового сервиса Вирусдай на перекрывающихся слоях, как это сказалось на UX и как мы сформулировали принцип «Looks like an app. Works like an app».



За время, прошедшее с 2012 года мы несколько раз модернизировали как сам сервис, так и его интерфейс. Однако, всему однажды приходится сказать «прощай» и идти дальше. Настал момент, когда ни архитектура, ни интерфейс сервиса уже не отвечали нашим запросам. Нам предстояло превратить простой антивирус для сайтов в нечто большее – в целый набор связанных и удобных инструментов для лечения и защиты сайтов. Назревало только одно решение – делать новый сервис «с нуля». Архитектура, технологии, сценарии, интерфейсы – все должно было быть абсолютно новым. Нашей главной целью было достижение максимального уровня комфорта для пользователя при работе с новым сервисом.

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

Вы обладаете сильным или слабым логотипом?

В то время как танцор может спросить себя «Интересно, что Майкл Джексон подумал бы о моих танцевальных движениях?» или боксер может спросить себя: «Интересно, что Мухаммед Али подумал бы о моем правом хуке?», дизайнер задастся вопросом: «Что Пол Рэнд подумал бы о моем логотипе?»

К концу чтения вы будете точно знать, одобрил или не одобрил бы Пол Рэнд ваш логотип.

Люди склонны покупать. Поэтому не иссякает интерес ученых и исследователей к вопросам потребления в целом и процесса покупки в частности. Если раньше изучением этих процессов занимались экономисты и социологи, то теперь к исследованиям покупательского поведения присоединились психологи и нейрофизиологи. В зарубежных медицинских и научно-популярных изданиях даже появился такой термин — retail therapy. Дело в том, что во время покупки могут появляться ощущения, схожие со стрессом, может быть чувство тревоги, а может быть и состояние эйфории. И это относится ко всем видам покупок, в том числе и совершаемым онлайн. Так что нет разницы, продаете вы в реальном или виртуальном магазине – вам как продавцу важно сделать всё, чтобы покупатель получил реальное удовольствие от покупки и вернулся ещё раз.

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

Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

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

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

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

Краткое содержание

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

Настройки Abobe Illustrator

1. Edit > Preferences > Units > General → Pixels
   Edit > Preferences > Units > Stroke → Pixels
2. Edit > Preferences > Guides & Grid > Gridline every → 1px
   Edit > Preferences > Guides & Grid > Subdivisions → 1px
3. Edit > Preferences > General > Keyboard Increment → 1px
4. View > Snap to Grid
   View > Snap to Point
5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator

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

UPD: Продолжение статьи с примером техзадания

Не так давно на хабре были две статьи (Согласно техническому заданию и А зачем мне ТЗ? Я и так знаю!) посвященные техническим заданиям. У меня обе статьи вызвали, мягко говоря, недоумение, в особенности статья «Согласно техническому заданию». На мой взгляд, это вообще вредная статья, которая приводит к неверному понимаю сути ТЗ. В связи с этим хочу выразить свой взгляд на этот вопрос. Не буду говорить обо всех тех. заданиях, слишком широка тема, но думаю смогу рассказать о ТЗ на сайт.

То описание технического задания, о котором речь пойдет ниже, не является пересказом ГОСТа, но скорее является его творческой переработкой, хорошо сдобренной горьким опытом. Описанный ниже подход к ТЗ не охватывает все аспекты сайтостроения, но задает общее направление.

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

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит: «Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь». Что не ясно? Ничего необычного, всё обыденно и рутинно.

Разработчик отчетливо представляет, что нужно сделать, а сделать, в его понимании нужно вот так:

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

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

Ранее мы переводили и публиковали статью, в которой попытались раскрыть секреты успеха Dropbox. Судя по количеству просмотров, тема оказалась востребованной. Поэтому мы решили перевести еще одну статью о компании, которая для многих, и для нас в том числе, является эталоном в определенных сферах. Итак, у Amazon 237 миллионов активных клиентов. Если бы все они жили в одной стране, то она была бы четвертой в мире по населению. В США, например, Amazon владеет 30% рынка электронной коммерции, – такой рынок, даже при всем желании, не назовешь нишевым.

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

Продолжаем изучение опыта гиганта электронной коммерции, магазина Amazon. И, как и обещали, публикуем продолжение.

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



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

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

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

Давайте попробуем разобраться, как правильно подходить к постановке задач для сайта, в этой статье из четырёх частей:

1. Поведение потребителя в «цифровую эпоху» — чем отличается сегодняшний потребитель от вчерашнего, и как это влияет на бизнес.
2. Сайт как инструмент влияния — чем отличается сегодняшний сайт от вчерашнего, и о чём нужно помнить, решив создать новый сайт.
3. Как ставить задачи для сайта? — конкретные рекомендации для заказчиков и студий. За рецептами — пролистывайте до сюда.
4. Пример блока «Назначение сайта» — демонстрация того, что должно получиться в итоге.

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

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

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

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

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

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

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

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

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

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



«Вот те раз!» — подумал я. Ни в одном реестре запрещенных сайтов данный ресурс не присутствовал и, с чего билайн его заблокировал — непонятно. Естественно после таких вот «заявочек» в голову полезли страшные мысли: «а что если завтра любимого „кина“ не будет!». Данные мысли тут же подвигли меня начать искать способы борьбы с данной ситуацией, и написать, для тех кому будет интересно, маленький обзор нескольких решений по обходу блокировки сайтов. (под катом скрины)