Блог

Книга

Сделал книгу проектного бюро «R1»

Задача: разработать книгу и дополнить фирменный стиль.

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

Из исходников был только логотип, достаточно лаконичный и хорошо подчеркивал архитектурный профиль компании. Я лишь немного поправил форму и вес линий. В качестве основного шрифта был принят ОсноваПРО.


Композиция на листе

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

Каждый раздел в книге выделяет специальный разворот

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

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

Географию объектов бюро сделал в виде стилизованной карты.

Эта стилизация сначала была принята в качестве фирменного паттерна. Было решено использовать его в оформления интерьеров, предметов мебели и на различных носителях фирменного стиля.

Книга получилась хорошей, ребята остались довольны.

Спасибо Валерии Белкиной, Дмитрию Реуту и всем сотрудникам бюро за доверие и оргподдержку.

Untitled Document

Оффер

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

Статья пополняется…

Untitled Document

Альбом

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


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


Статья пополняется…

Untitled Document
Untitled Document

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

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

17 января   дизайн
Untitled Document
28 декабря   Гайд   Мерката
Untitled Document

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

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

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

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

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

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




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

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

18 декабря   банк
Untitled Document
18 декабря   Радио   Эфир
Untitled Document Untitled Document

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

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

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

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

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

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

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

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

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

11 декабря   Мерката
Untitled Document

Календарь


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

7 декабря   Мерката
Untitled Document

Кафе

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

Решение

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

Эскизы

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

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

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

Календарь

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

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

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

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

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

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

4 декабря   интерфейс
Untitled Document
Ранее Ctrl + ↓