Позднее Ctrl + ↑

Оффер

Сделал конструктор для унифицированной верстки документов проектного бюро R1

Статью скоро (или не скоро) напишу.

Untitled Document

Альбом

Проектное бюро R1 занимается архитектурным проектированием полного цикла.
Сделал конструктор для упрощения процесса сборки альбомов проектной документации и приведению их к единому визуальному стандарту проектного бюро R1


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


Статью скоро (или не скоро) допишу.

Untitled Document

Пиктограммы

Почти скоро здесь будет рассказ о том какой набор пиктограмм я сделал для рабочей документации и интерьеров бюро

Статью скоро (или не скоро) напишу.

Untitled Document
Untitled Document

Хороший дизайнер не спорит

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

2018   дизайн
Untitled Document
Untitled Document

О пользовательском опыте

В Тинькофф-банке появился новый пункт — Операции за границей.
Выглядит это так

Речь пойдёт не про бесполезную белую дыру в разделе и не про иконку, напоминающую браузер, а про полезное действие¹.

¹Его отсутствие.

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

Что я должен был понять из этой функции?
Спрошу у банка:




Почему-то Артём поспешил покинуть беседу и на помощь пришла, коллега, Ирина

Так я выяснил, что банку наплевать на безопасность средств клиентов и ребята решили просить пользователей напоминать банку о его обязательствах. Знатоки умеют формировать «правильный» ЙуИкс сервиса.

2017   банк
Untitled Document
2017   Радио   Эфир
Untitled Document Untitled Document

Случилось чудо

В Меркате произошло невероятное — ко мне подошли разработчики, Гриша Луговых и Ирина Григорьева, и говорят: «Мы захотели сделать круто. Только покажи нам, как?». Это очень клёва. Хорошо когда разработчик начинает думать о пользователях и осознаёт, что дизайн это не про картинки, а про то как это работает.
У ребят возникла потребность как-то закрыть временную паузу в загрузке данных с сервера, при этом не блокировать страницу для возможных действий и развлечь пользователя в момент ожидания подгрузки информации.

Вот так выглядит реализация

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

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

В итоге получилось хорошо

Теперь нужно также хорошо переделать анимацию для карточек.

Посмотреть всё это можно зайдя в сервис, но для этого нужно быть клиентом Меркаты.

Отдельное спасибо Насте Полозовой.

Untitled Document

Календарь


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

Untitled Document

Кафе

Задача
Обновить страницу заказа блюд в кафе

Решение

Это ↑ скорее черновик идеи, в нём ещё много чего нужно проработать.
Ещё покажу эскизы с описанием работы.

Эскизы

Верх страницы занимает полоска навигации, она всегда видна и подсказывает текущее местоположение.

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

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

Календарь

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

По умолчанию выбирается текущий день календаря.
Например, представим, что сегодня 27 декабря — вторник

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

Ещё в карточке дня есть общая стоимость заказа, прелоадер-галочка обратной связи, адрес доставки и шкала «сытости», обозначающая сколько ещё можно заказать еды.
Замену блюд в заказе можно сделать двумя способами, удалив ненужное и добавив вместо него новое блюдо, либо просто выбрав новый, например, суп в меню и нажать кнопку «Купить»

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

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

Untitled Document
Ранее Ctrl + ↓