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

дизайн

Плавность в дизайне интерфейсов

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

Хороший пример — указатели поворота на новых премиальных автомобилях. Вот, например, как они выглядят на Lexus LX:

 

Аналогичная ситуация прослеживается во всех хороших дизайн-системах и интерфейсах.
Например, посмотрите вот эту демо-страницу и понаблюдайте, как плавно изменяются иконки: https://tympanus.net/Tutorials/CustomCursors/index3.html#

А на днях вышел перевод подробного материала моушн-дизайнера Йонаса Наймарка из команды Google Material Design.

27 февраля   дизайн

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

При подготовке иконок к размещению на сайте большинство дизайнеров не замечает, что отрисованные в 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   дизайн   Рабочие моменты
Ранее Ctrl + ↓