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

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

Наследство

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

На примере профиля видно, как было «до» и что стало «после».

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

Принцип номер один. Делать свою работу хорошо

Понятие «хорошо» очень субъективное, поэтому расскажу о своих критериях.

Продолжаем модернизировать приложение, которое мы создали в прошлой статье.

Сегодня мы разберем как создавать плитки (Tile) для Windows 8.1 приложений и каким образом можно реализовать динамическое изменение контента на них.

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

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

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

Через неделю на всей территории России вступит в действие национальный стандарт по юзабитили ГОСТ Р ИСО 9241-210-2012 «Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем».

Хочу вкратце рассказать, почему этот документ — не пустой звук. Пойдём по порядку.

1. Задачи документа

Кому он нужен?

• Руководителям — показать место человеческого фактора и эргономики в процессе проектирования.
• UX-специалистам — рассказать, как происходит проектирование, и каково их участие в этом процессе.

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

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

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

Поэтому любой уважающий себя клиентский программист давно должен прочитать Тафти, Чихольда, Раскина и Мильчина. Даже если у вас есть дизайнер и редактор в компании. Потому что и он иногда может нести чушь (всё зависит от квалификации). Или, наоборот, чтобы правильно следовать гайдлайнам и продолжать развивать приложение в едином стиле.

Поговорим сегодня о внимании к деталям на одном практическом примере (будет много картинок).

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

Это первая статья. Всего их будет 3.

В нашей реальности мы никогда не имеем полных исходных данных для задач, которые на бумаге кажутся чисто математическими. Вот пример из практики одного из регионов с магазином. В июне вам звонят с радио и говорят, что готовы повторить размещение рекламы со скидкой 40%. Это 192 ролика за две недели. Прошлый раз вы заказывали эту рекламу «на попробовать», поскольку матожидание прибыли превышало затраты на рекламу.

Проблема в том, что за период размещения случились две большие вещи:

• Из-за праздников был сезонный спад, и продажи по городам падали.
• Реклама должна была дать дополнительные продажи.

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

^{Исходный город, продажи в штуках по вертикали к неделям по горизонтали}

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

Недавно наткнулся в сети на баннер с рекламой конкурса по дизайну блога юкоза. Приз – iMac 27”. Честно хотел пройти мимо, но заманило то, что оценивать работы будет профессиональное жюри без влияния социальных лайков. Как же я был наивен.

Продолжаем публиковать e-Lectures — небольшие видеолекции от наших мобильных разработчиков.



Ссылки на исходники из видео:
github.com/stepango/metroTheme
github.com/stepango/DownloadableThemes

В этом видео Степан stepango Гончаров расскажет об одном из возможных способов добавления поддержки внешних тем в Android приложения.

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

Подписывайтесь на наш Хабра-блог (и на youtube-канал), чтобы не пропустить следующие видеолекции о мобильной разработке.

Всем добрый день!

Бывало ли у вас такое, что вы долго думали над какой-то рабочей (или личной ситуацией), а потом вдруг раз! и все как будто раскладывалось по полочкам? У нас такое бывало неоднократно.

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

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

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

Все инструменты, о которых мы будем писать, очень простые. Либо это матрицы 2 на 2, либо 4 вопроса, либо что-то в таком же духе. Поскольку мы много работаем с менеджерами, то обнаружили, что матрицы 3 на 3 некоторым менеджерам уже сложновато воспринимать (хей, мы сами были менеджерами, знаем о чем говорим :)), а 2 на 2 — в самый раз, отлично заходят.

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

Являются ли эти инструменты серебряными пулями? Ясен пясен, нет. Но они совершенно точно помогают прояснить ситуацию, навести дистинкции и понять, в какую сторону думать. А решения все равно придется придумывать вам. До тех пор, пока не появится, наконец, справочник юных сурков по менеджменту.

Итак, довольно лишних слов, давайте перейдем к первому инструменту (всего мы планируем разобрать около 15 разных полезных концептов):

Гарри Бринул (Harry Brignull) — независимый дизайнер пользовательских интерфейсов из Лондона с кандидатской по когнитивной науке. Он также известен как создатель сайта Тёмных паттернов, предназначенного, по его словам, «перечислению и осмеянию веб-сайтов, использующих обманчивые интерфейсы пользователя». Данная статья основана на презентации, которую он показывал в Мюнхене в апреле на Search Marketing Expo.

Статья переведена и опубликована с согласия автора.

Когда Apple выпустила iOS 6, одной из новых фич была не слишком анонсируемая компанией система рекламного отслеживания Identifier for Advertisers (IDFA). Она присваивает каждому устройству уникальный идентификатор, использующийся для слежения за активностью браузера и создания таргетированной рекламы. IDFA анонимен, но неприемлем для людей, заботящихся о приватности.

К счастью, Apple реализовала возможность отключения фичи.

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

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

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

В жопу спецификации!

(Дата оригинала — 7.10.2013. У оригинала — очень оживлённая дискуссия в комментариях)

Фронтенд-разработчики имеют довольно долгую и сложную историю в программировании. Долгое время отправляемое в браузер было так легко отобразить, что не было настоящей потребности в этой специализации. Многие считали, что они были просто графическими дизайнерами с немного другими выразительными средствами. Мысль о том, что они могли в один прекрасный день специализироваться в веб-технологиях, HTML, CSS, Javascript — была смехотворной; в лучшем случае — пользовательский интерфейс их удел или, в конце концов, кто-то мог специализироваться на том и другом и иметь эту работу.

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

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

Но начну с самого начала.

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

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

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

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