29 заметок с тегом

дизайн

«Мыльные» иконки

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

Вроде бы всё хорошо

Но стоит включить в настройках «Просмотр в виде пикселов», как «мыло» сразу вылезет наружу. Это происходит по причине того, что контурные линии идут вразрез с пиксельной сеткой:

Эффект «мыла» будет присутствовать как при сохранении в jpg, так и в png.

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

Когда сделал хорошо.
2018   дизайн   Рабочие моменты

3D-модели и плакат для «Пермалко»

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

лирическое отступление:
АО «Пермалко» — один из старейших производителей крепкого алкоголя на Урале. Компания входит в ТОП-20 крупнейших производителей водки и ликероводочных изделий в России.
по информации с сайта компании

Итак! Был дан технический чертёж бутылки с формой «осло» и Т-образной пробкой по типу «камю», готовая этикетка, информация для оборотной стороны плаката и короткое, но ёмкое ТЗ:

придумать идею и разработать плакат формата А2 к ЧМ-2018.

Для начала из чертежа получились вполне миловидные рендеры:

Затем был поиск идеи, куда и как поместить эти бутылки. Все они дружно разбивались о ФЗ «О рекламе» от 13.03.2006 N 38-ФЗ, а именно 21 статью — «Реклама алкогольной продукции».
После продолжительных поисков маркетингового и визуального решения пришла идея, в основу которой легли знаменитые камни из стеатита для охлаждения виски. Хорошая теплоёмкость этих “whiskey stones” обеспечивает долговременное поддержание оптимальной температуры для виски, а благодаря тому, что нигде ничего не растворяется — вкус и крепость напитка остаются неизменными.

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

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

Добавили рендеры стопок и мячей. Вариант получился достаточно тёмным, а бутылки «металлизироваными».

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

Окончательный вариант лицевой стороны
 

А вот и оборотная сторона:

 

Пост не является рекламой АО «Пермалко».
Друзья, помните! Чрезмерное употребление алкоголя вредит вашему здоровью!

2018   3D   дизайн   Рабочие моменты

Настенная инфографика

Вчера перебирал фотографии 2011 года и наткнулся вот на такую занимательную настенную инфографику:

Фотография сделана в г. Глазове, Республика Удмуртия
2018   дизайн   жизнь
2018   дизайн

Баннер в «шапке».

Не сомневаюсь, что BMW безразлично, как смотрится их баннер (но это не точно) — машины всё равно крутые, их купят. Но, почему-то, веб-мастеру сайта пофиг, что на их сайте баннер не вписывается по ширине в контейнер — 960px против 1140px — и от этого смотрится убого. Не надо так.

скриншот с сайта business-class.
2017   дизайн

Дизайн пожарного ведра.

Смотрел ролики про работу пожарных и задумался: «почему пожарные вёдра конусообразные?» На то, как оказалось, множество причин.

Историческая (UI):

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

Житейские (UX):

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

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

2017   дизайн   жизнь

Авто-агитки.

Для одного проекта собрал много агитационных плакатов на тему ПДД и решил поделиться самыми запоминающимися (imho).

2017   авто   дизайн

Типографика в интернет-газете.

В большинстве региональных интернет-изданий всё плохо с дизайном.

  1. нет штатного дизайнера (тут_привет_пикчеру_Лентача), который бы делал иллюстрации к статьям на сайте и различные мемасики для соцсетей;
  2. нет понимания у руководства: зачем нужен дизайнер, его дизайн и вообще для чего необходима единая визуальная коммуникация с читателями/подписчиками;
  3. внутри этих СМИ нет человека, который бы объяснил руководству, для чего это всё нужно.

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

Наглядный пример:

Шрифт: Roboto Condensed

Здесь видно использование конденсного (с уменьшенной шириной знаков) шрифта для основного текста.

Теперь возьмём и поменяем шрифт на первый попавшийся и классический — Arial.

Сразу легче для восприятия?
А что, если приложить немного усилий да выбрать крутой и современный web-шрифт? :-)
 
 
пример взят скриншотом статьи www.business-class.su

2017   дизайн

UX: Цифровая клавиатура.

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

 

А ведь в HTML5 есть замечательная возможность задать полю type=«number», чтобы сразу появлялась цифровая клавиатура (или полная цифровая клавиатура). Например, вот так мы с ребятами сделали для одного из наших заказчиков:
 

 

Интересно, что в приложении «Сбербанк-ОнЛайн» всё спроектировано нормально. Почему тогда в мобильной версии странички не сделали по-человечески?..
 

2017   UX   дизайн   Рабочие моменты

UX: ввод данных

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

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

И если для поколения Z это обычная практика, автоматика, то для более взрослой части поколения Y (1981-1985 г.р.) такие манипуляции уже сложны, нужно вырабатывать совершенно ненужную привычку. Для поколения X (1961-1981 г.р.) ввод данных в режиме «бланк — контроллер (мышь/клавиатура) — монитор» вообще является адовой штукой, от которой они спешат отказаться.

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

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

P.S. вот думаю, что стоит отказаться от использования «00» в цифровой клавиатуре. Может быть заменить знаком ← (Backspace)? Надо понаблюдать.
 

2017   UX   дизайн   Рабочие моменты
Ранее Ctrl + ↓