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

дизайн

Корпоративный сайт и университет

Проект под тайной. Чтобы увидеть как работает сайт и университет, приходите работать Тритон.

Палитра всех элементов сайта продиктована фирменным стилем компании.

Задача
Задизайнить обновление корпоративного сайта.

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

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

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


Самое важное на главную страницу

Палитра всех элементов сайта продиктована фирменным стилем Компании

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


С заботой и вниманием
Пару абзацев выше я рассказал, что удалось выявить востребованные функции и правильно декомпозировать разработку. Помимо прочего, обновленную версию нужно было успеть запустить за месяц, к юбилею компании. Понятное дело, сделать весь функционал команда разработки не смогла бы, а с другой стороны я не мог допустить чтоб сайт был выпущен урезанным и обедненным. Поэтому я предложил заказчику применить «эффект Буратино». Это когда визуально огонь в очаге горит, а функционально тепла нет. Но есть полезное действие.
В нашем случае, сайт с пониманием и заботой рассказываете пользователю о том что будет после ремонта, подождать осталось совсем немного.
С одой стороны люди видят визуально полную версию сайта, понимают ради чего затевалось обновление и трата денег, а с другой могут дать комментарии и подсказать если что-то нужно добавить-убавить.
Вот так «эффект Буратино» выглядит в жизни

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

Картинки · Видео · Справочник
Так выглядит этажик с последним обновлением в альбомах, визуальным блоком контактов и мини опросом отдела персонала

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



Этаж университета
Учебные материалы наглядны и персонализированы для каждого пользователя

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

Завершает композицию главной страницы функциональный подвал тремя разделами корпоративного чата

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



Контакты

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



База знаний
Книги, журналы, выдержки из научных статей и докладов. Инструкции, регламенты и учебный план сотрудников



Календарь событий



Несколько шаблонов для редакторов сайта



Станьте сотрудником компании, чтобы воспользоваться сервисом.

2019   дизайн   Интранет   Сайт   Университет
Untitled Document

Ещё одна проверка

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

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

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

Стартовый экран выглядит так


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

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

Например, можно так


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

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

Резюме
Это базовый функционал для проверки разных сценариев. Прототип покрывает лишь небольшую часть пользовательской карты и её нужно расширять.

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

Ещё
Прочитать про концепт кассы для проверки множества разных идей.


Untitled Document

Батл в Контуре

Так было в Контуре, на дизайн апдейте 1.2 (третьем по счету)

Ребята рассказали про то как уже почти 9 лет пилят иконочный шрифт и очень хотят перестать это делать

Все присутствующие узнали кто такой Михаил Череда и какие проекты он дизайнит для Екатеринбурга

Показали Льва Либермана, а Лев показал других ребят, каллиграфов и леттеристов

Ещё, Контуровцы решили разнообразить митапчик, и провели Батл.
Дизайнерам, Максиму (Джетстаил) и Саше (Контур) дали задание — задизайнить этикетку для вина. Раздали библиотеку элементов в Фигме и дали попробовать вино.
Такие этикетки получились в результате

Пока ребята рисовали, все остальные поедали пиццулю

Остальные фото в альбоме Контура

Приходите на следующий дизайн апдейт, предлагайте свои темы и участвуйте в батлах.

Untitled Document

Книга

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

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

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

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


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

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

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

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

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

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

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

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

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

Untitled Document

Пиктограммы

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

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

2018   Бюро   Графический дизайн   дизайн
Untitled Document

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

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

2018   дизайн
Untitled Document

Дизайнеры

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

2016   дизайн
Untitled Document
Ранее Ctrl + ↓