WDI, день 11, Вебинар 4. Интерфейс и элементы

Кратко: выводы и полезная ссылка.

  1. Интерфейс — лишь верхушка айсберга всего продукта.
  2. С помощью интерфейса пользователь должен достигать своей цели.
  3. Все стремятся к zero ui, но непонятно, достижим ли абсолютный ноль (просыпаешься, а на все письма уже ответил ИИ, нейронная сеть дизайны нарисовала). На тему упрощения интерфейсов есть крутая статья Make me think!
  4. Есть правила создания интерфейсов, в основе которых лежит принцип «пусть потеет машина».
  5. UI-кит — продукт сам по себе, должен быть качественным.

WDI. Дни 9−10. Moodboard.

Я, кажется, упоролся.

Прошел уже 17-ый (как минимум) день интенсива, а с восьмого дня — ни одной записи.

Попробуем наверстать. Не обещаю.

Мы остановились на том, что сделали исследование и текстовый прототип сайта моего вымышленного книжного магазина.

Теперь нужно составить мудборд. Алгоритм составления мудборда:

1. Выписываем основные смыслы, которые мы хотим донести визуальной коммуникацией.

2. К каждому смыслу подбираем ассоциации из предметной области (что-то более-менее осязаемое).

3. К каждой ассоциации подбираем эмоцию (что-то из области чувств).

4. Думаем, каким инструментом визуальной коммуникации будем доносить тот или иной смысл.

5. Подбираем в интернете картинки, которые доносят примерно такой же смысл через наши ассоциации и эмоции.

Например:

6. Теперь начинаем работу по каждой из 5 частей мудборда: образы, цвет, композиция, типографика, геометрия и формы.

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

WDI. День 8. Анализ визуальной коммуникации. Бекапы

Сегодня было задание: найти 3 сайта уровня нормы и проанализировать, насколько хорошо инструменты визуальной коммуникации справляются со своей задачей.

Покажу один свой разбор.

Купил бекап на Backblaze. Безлимит, поддержка внешних дисков, доступ через приложение для телефона, 5 баксов в месяц, быстрые ответы в Твиттере — что еще надо?

WDI. День 7. Вебинар по визуальной коммуникации

Ну, довольно с текстами. Мы ж теперь дизайнеры, а не какие-то, хм, филологи. Мда.

Выводы по вебинару про визуальную коммуникацию.

  1. Визуальная коммуникация = невербальная коммуникация. Передача ассоциаций, эмоций, смыслов без слов.
  2. Как именно? При помощи инструментов:
  • изображения
  • типографика
  • геометрия
  • цвет
  • композиция
  1. Мудборд должен быть хорошо читаем и понятен клиенту (ну и видимо не называть его муд-борд) — иначе это сродни техническому чертежу
  2. Каждый инструмент визуальной коммуникации должен применяться осмысленно к данному проекту. Задавай себе вопрос: а не херню ли я делаю? (этого в вебинаре не было, но пусть будет тут 😃)
  3. Инструменты визуальной коммуникации формируют ассоциации и эмоции. Возможно, даже быстрее, чем текст.
  4. Решения средств визуальной коммуникации зависят от культуры, к которой относится ЦА: одни и те же цвета, формы, символы и т. п. имеют разные коннотации в разных культурах.

WDI. День 7. Переделка смыслов

Забавное было задание.

Взять вырвиглазный сайт какого-то новосибирского застройщика и сделать для него нормальный текстовый прототип с человеческими смыслами.

Сайт выглядит так

.

.

.

.

сейчас будет страшно

.

.

.

.

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

Image result for what meme

Я, блин, хочу первый раз в жизни квартиру купить!

Провел исследование, понял, что главное тут — честно рассказать о поселке и провести за руку через весь процесс покупки. Набросал тексты.

Может, теперь продать им этот результат?

WDI, день 5, очередное практическое

Очередное практическое задание. Снова делал в скетче. Понравилось выстраивать геометрию фигур, понимать их взаимосвязь.

Ну и это, если че — please note that the images above are rough copies of original works that I created as a part of student assignment. These works are not my portfolio, just an exercise in Photoshop and Sketch skills.

День 5−6: создание текстового прототипа

Времени писать в блог не остается. И вот, ночь, тишина, только кнопочки тук-тук-клац.

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

Сюда включается исследование задачи, целевой аудитории, нахождение нужных смыслов и упаковка их в текст.

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

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

Определяться с темами мне всегда тяжело. У меня получился вот такой шорт-лист тем:

Клиника по пересадке электронных глаз и других киберпанк имплантов
Издательство маленькое
Что-то про самолеты
Что-то про фото — Прокат фототехники?
магазин юрт
Школа для взрослых
Путешествие на машине по России
заморозка чтобы проснуться в будущем
книжный магазин карт и путеводителей
переезды по россии
аренда грузовика
старьевщик
adopt a whale
яйца по подписке (или что-то похожее)

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

Написал огромное исследование про то, как устроен этот магазин, взял воображаемые интервью, составил mindmaps…

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

Вернулся обратно к книжкам… название придумал для магазина: дОроги дорОги. Вполне по-пермски, тут все так называется: Театр-театр, Каток-каток.

Получились довольно внушительные документы с многоэкранными схемами и прописанными текстами.

Тексты предстоит еще, все-таки, доработать, когда станет понятнее с визуальной частью.

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

WDI: День 4. Разбор нормы и вебинар

Критерии уровня нормы
Вебинар

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

Image result for это норма малышева

После разбора стало намного понятнее, что же скрывается за словом «норма». Сделал небольшой конспект из главного.

Критерии уровня нормы

Композиция
  • Важные элементы должны располагаться в якорных зонах:
    • углы
    • стороны (горизонтали и вертикали вдоль краев)
    • центр
  • Группировка объектов отступами важна. Внутренние отступы должны быть меньше, чем внешние.
  • Должно быть понятно, куда смотреть — визуальная иерархия.
  • Избегать этажности. Создает дробную структуру, не воспринимается единым сайтом. Контент лучше отделять с помощью отступов, а не контрастными фонами.
  • Этаж с одним только заголовком — зло.
Типографика
  • Большое количество цвета в типографике смотрится дешево.
  • Расческа текста — плохо. Если больше 3 строк — не делать центральную выключку.
  • Разрядка заголовка делается только если он заглавными буквами.
  • Достаточно двух шрифтов (для заголовка и набора).
Графические элементы
  • Черные полупрозрачные плашки — дешевое решение.
  • Плашка на плашке — не ок.
  • Для десктопного сайта лучше не использовать бургер, т.к. есть место для всех пунктов меню.
  • У логотипа должно быть охранное поле.

Надеюсь, это поможет вам делать более лучшие сайты 🙂

Вечерний вебинар

Был посвящен исследованию и упаковке смыслов.

Цель исследования — выявить суть:

  • кто и зачем задумал проект, какие у него цели
  • что хочется донести
  • кто ЦА, чего она хочет и к чему привыкла
    и т. д.

Есть много методов сбора информации:

  • Метод 6 вопросов
  • Многоэкранная схема (например, у Горбунова)
  • Анализ процессов (хорошо подходит для набрасывания блоков контента)

И много других. Сайт с методами исследования в дизайне (в широком смысле этого смысла).

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

Собирать информацию лучше всего как изнутри (у сотрудников), так и извне (у клиентов). Если клиенты по какой-то причине недоступны — есть отзывы в интернете.

В результате должны появиться user stories в формате «юзер такой-то хочет … чтобы …» и логика сайта, которая будет соответствовать тому, как пользователь ведет себя в реальной жизни.

Также в конце получаем сценарии поведения пользователей и ассоциации 1−3 порядков.

Этого должно хватить для формирования структуры сайта и написания заголовков и подзаголовков.

WDI. День 3

Тема третьего дня: механика первых 5 секунд. Теоретическая часть про создание доверия и понимания. Было бы здорово попрактиковаться. Например, один студент придумывает по шаблону продукт, ЦА и фичи, делает прототип сайта. Другой студент говорит ему, что он понял. На стыке разницы возникает понимание, чего не хватило.

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

Начал переносить все заметки и тексты из ВК в ноутбук в Evernote, потому что через неделю ничего в ВК найти будет нельзя. Думал сначала использовать Notion, но после того, как не смог из него скопировать текст полностью, отказался от этой мысли.

Evernote, кстати, не так уж и плох оказался. Вложенные теги сделали.

Новые ссылки для чтения:

A conversation about how public transport really works (в РФ через VPN)

Заметка о кни­ге Юрия Гор­до­на «О язы­ке ком­по­зи­ции».

Да, еще обнаружил в Перми крутой книжный с кучей книжек по дизайну — Uniqstore.

WDI. День 2

Сегодняшнее задание было посвящено понятию нормы.

Что такое норма? На мой взгляд, норма бывает двух типов.

1. Визуальная. Хорошо подобранные цвета, иллюстрации, шрифты, композиция, все выровнено и написано без ошибок. На продукт приятно смотреть. Визуально нормальные работы представлены в основном на:

2. Функциональная. Насколько продукт решает задачу бизнеса и/или пользователя. Это бывает сложно оценить по внешнему виду, так как мы, как правило, не знаем показателей.

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

Мы искали примеры нормы визуальной, я также попробовал оценить дизайнерские решения с точки зрения маркетинга (один из аспектов функциональной нормы).

Для разбора взял два сайта.

Первый — сайт по продаже матрасов и прочего для сна — Tomorrow.

Второй — лендинг Squarespace, хотя он для такого разбора подходит плохо. Его дизайн диктуется A/B тестами и он полностью заточен на регистрацию хоть какого-то юзера.

Приятно, что WDI работает с Realtimeboard, ребята в RTB делают офигенный продукт и строят настоящую команду.

А вот ВКонтакте как платформа для обучения и общения почти 80 человек не подходит абсолютно. Скучаю по Слаку.