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

Радует то, что именно на Dizkon.ru большая часть представленных на конкурс работ в области разработки дизайна интерфейсов выполнена по мировым стандартам юзабилити, лаконично и профессионально. Например, работа Роженцовой Елены, вышедшая в финал конкурса на разработку дизайна сайта нефтехимической компании.

Другие  примеры  работ в европейском стиле и с лаконичным юзабилити,  в конкурсе на создание интерфейсов  Интернет-магазина капсулированного кофе.

Это работа Ивановой Натальи

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

Работа Шемовцова Анатолия  в европейском стиле, приятное сочетание бирюзового и коричневых кофейных оттенков.

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

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

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

          1. Темные оттенки. 

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

          2. Большое количество анимации.

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

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

         3. Уникальные элементы интерфейса и нестандартные форм-факторы. 

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

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

     4. Музыкальное оформление при загрузке страницы. 

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

     5. Приветствие в виде заставки. 

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

Приведу несколько примеров реализации люксовых концептов.

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

А вот реализация на светлом фоне, в работе Зозука Александры, смотрится  не менее респектабельно.

А вот конкурс на люксовый дизайн наклейки и листовки в финале которого равное количество работ в светлых и темных оттенках. Работа Пыхтиной Любви  в темных тонах

и работа Бондаренко Максима в светлых.

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

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

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

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

Рассмотрим конкурс на создание логотипа и дизайна упаковки для бренда одежды.  Хорошо сформулировано позиционирование и четко поставлена задача. В финале работа Елены Козловской

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

А вот задание на создание логотипа для бренда одежды (без ФС) тоже ясно отражающее суть пожелания заказчика. Отмечу, что присутствующая в результатах конкурса некая однотипность работ, свидетельствует о детальном описании, т.е. когда дизайнер не является создателем и творцом, но исполнителем уже придуманного концепта. В конкурсе победила работа Маслий Юлии.

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

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

1. Допустимые цвета логотипа и фона.
   
2. Варианты использования шрифтов с учетом цветовой гаммы.

   

3. Способы размещения логотипа на промо-материалах.
4. Формулировки «как делать нельзя», чтобы не разрушить концепт бренда.

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

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

Главная страница интернет-магазина, на которой пользователь ожидает увидеть цену и кнопку «Купить», собственно, два элемента, ассоциирующиеся у пользователя с торговлей.

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

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

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

Приведу работы дизайнеров, в которых совмещен интернет-магазин и информационный ресурс.  Работа Бомко Илоны в конкурсе на создание Интернет-магазина «Сила жизни»

и работа Энджел Алексея

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

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

Например, в ходе проекта по созданию интерфейса для кассы самообслуживнаия ветвление выбора решения было такое — интерфейс с объемными кнопками (Apple) или интерфейс с кнопками плоскими (Microsoft), вторая часть — цветовое решение, яркое или в сдержанных тонах.  Вот несколько примеров.

Вариант в стилистике ориентированной на Windows 8.

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

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

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

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

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

Правило первое: определите границы доверия.

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

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

А вот аскетичный дизайн  интерфейса  Чумаркова Андрея.

Боровской Александр  предложил красочный и яркий вариант.

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

 Правило второе: определите позиционирование.

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

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

                 Правило третье: определитесь, копировать или создавать 

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

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

В категории «Разработка фирменного стиля» отмечаем работу Смолина Дениса по созданию лого и фирменного стиля для турагентства. В работе представлен полноценный концепт, выбрано оригинальное цветовое решение в сегменте туризма.

Работа Грдзелидзе Майи как пример лаконичного, выдержанного стиля в разработке дизайна интерфейсов  нумизматического интернет-аукциона.

Отлично передана технологичность при создании фирменного стиля и логотипа для ИТ-компаниии в работе Заплавского Михаила. Удалось отлично передать свечение, оригинально представлен логотип.

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

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

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

Интересные работы по конкурсу на создание логотипа для M4 АГРО — российские фрукты  Сырова Антона

и Кулыгиной Юлии.

Обе работы являются отличным примером экологичного дизайна.  Лаконично, свежо и аппетитно.

Логотип для СТО «Ягуар» отлично смотрится на майке девушки. Оригинальное представление в сегменте техсервиса.  Работа  Черняк Андрея.

Стильный логотип  для интернет-проекта «КОНФЕТКИ» Лопатина Виталия.

Работа обыгрывает тему знакомств и общения, тонкий намек, отличная узнаваемость.

Удачи в марте, интересных конкурсов вам и вдохновения.

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

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

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

Есть сильные концепты, акцентирующие эмоциональную составляющую, например работа дизайнера Бомко Илоны 

или дизайнера Губаренко Максима 

А вот работа с качественно проработанным торговым функционалом Чичиной Надежды

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

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

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

Качественный «федеральный дизайн» с использованием цветов триколора дизайнера Москвич Елены

или демократичный лаконичный дизайн Поздеева Алексея в несколько западном стиле

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

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