«Я не злюсь, я просто разочарован.»
— PM
Иногда приложение кажется простым, минималистичным и лаконичным, но легко упустить из виду то, сколько экранов, формочек, кнопочек, окошек и прочих мелочей приводит к такому восприятию легкости и простоты использования.
Представляем вам чеклист из 50 пунктов для самопроверки. Вот примерные подразделы:
Два года назад Яндекс представила новый дизайн Кинопоиска. Однако пользователи обновление не оценили. Вместо привычной киноэнциклопедии, аудитории был представлен онлайн-кинотеатр. Хейтеров оказалось такое количество, что компании пришлось откатиться до старой версии сайта.
Сегодня мы все еще можем видеть морально устаревший дизайн Кинопоиска, который действительно требует изменений. В этой статье мы рассмотрим наше виденье и подход к редизайну сервиса.
Читать полностью »
Еще лет 30 назад работа веб-дизайнера требовала не только фантазии и сноровки, но и телесных затрат. Да-да, со зрением и осанкой дизайнер мог попрощаться. Скукожившись в позе эмбриона, при тусклом свете лампадки, художник без помощи компьютера создавал свои шедевры. Советские мультипликаторы, например, вручную прорисовывали всех персонажей мультфильма «Двенадцать месяцев» со всеми телодвижениями.
«Двенадцать месяцев» — кадр из советского мультфильма по мотивам пьесы С.Я. Маршака, 1942—43 г.
Читать полностью »
Представьте себе: вы разработчик ПО. Вас включили в команду, работающую над редизайном одной из центральных функций приложения, созданного компанией. Вы несколько месяцев собирали информацию о пользователях, делали прототипы, тестировали их на контрольной группе (всем понравилось!) и переделывали приложение. И вот сегодня обновленная версия вышла в публичный доступ.
Теперь представьте, что тысячи людей выступили против обновления. Они стали создавать веб-страницы для противников новой функции. Они решили объявить массовый бойкот продукту. В «Тайм» появилась статья с подробным разбором вашего провала.
В такой ситуации вы бы, вероятно, подумали, что пора освежить свой профиль на LinkedIn (разумеется, умолчав там об этом фиаско): как только директор разгребет то, что вы натворили, он немедленно вас уволит.
А теперь представьте, что все эти люди были неправы. Вы провели исследование. Вы протестировали приложение на контрольной группе (всем понравилось!). Представьте, что пока сотни или даже тысячи пользователей протестовали, все остальные продолжали пользоваться продуктом и прибыль возросла в разы. Представьте, что на самом деле ваш редизайн изменил мир и то, как люди общаются друг с другом.
Читать полностью »
Сетка 8pt — это мощная система для создания последовательных и визуально привлекательных пользовательских интерфейсов. Этот пост о том, как установить вертикальный ритм и типографию в сетке 8pt. Чтобы лучше понимать материал, зацените статью "Введение в систему 8pt сеток" и "Сетка на основе 8pt: обводка и разметка".
Ритм достигается тогда, когда элементы вашего дизайна состоят из повторяющихся шаблонов. Это позволяет вашему окончательному дизайну выглядеть преднамеренно, профессионально и последовательно.
Читать полностью »
Настало время бессонных ночей во имя прокачки дизайнерских навыков и майнинга призовых айфонов — мы запускаем шестой конкурс Russian Design Cup 2017.
Глубока ли кроличья нора?
Сколько минут вам потребуется, чтобы понять в чем фишка?
Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).
Под катом — наглядная демонстрация уязвимости нашего мозга к атакам через визуальный ввод. Представляю вам перевод статьи продуктового дизайнера и фронтэнд-разработчика Balraj Chana, про то как можно использовать/нейтрализовать эффект оптических иллюзий.
*Статья предназначена для начинающих дизайнеров интернет-магазинов, а также frontend разработчикам способных как-то повлиять на оных. Если Вы не относитесь к этим категориям, можете не тратить свое время. Я предупредил.
“ Все ошибки которые допустил frontend разработчик ему вернутся при сборке сайта, все недоработки которые поленился прорисовать дизайнер будет додумывать верстальщик ”
Доброго времени суток, уважаемые читатели! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в CSS3 — давно не новинка. Однако, иногда можно сделать что-то простое эффектным. Сегодня мы по этому принципу создадим небольшую анимацию загрузки.
Шаг 1. Плавное появление самого экрана загрузки
Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.
body {
-webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
-moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
opacity: 0;
background-color: transparent;
}
/* WebKit (Safari и Chrome) */
@-webkit-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Mozilla Firefox */
@-moz-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Общий синтаксис */
@keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
Сталкивались ли вы с ситуацией, когда не смогли вспомнить пароль для входа в интернет-магазин? Часто ли вас утомляла необходимость заполнять не нужные, на ваш взгляд, поля? Раздражали звонки оператора, который звонит не вовремя или наоборот, страх пропустить звонок? Меня вот часто.
Это привело меня к мысли, что формы регистрации в онлайн-магазинах и дальнейшее взаимодействие с ними, это зло в чистом виде. Я решила придумать способ, который, как мне кажется, намного облегчил бы жизнь интернет-шопера.
Мое мини-исследование и рацпредложения, посвященные этой теме, подкатом.
Читать полностью »