Конспект курса «Дизайн в цифровой среде» от Тильды

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

Задача и идея

Дизайн мышление

При создании дизайна надо ориентировться на пользователя: погружаться в его опыт, фокусироваться на проблемах.
Этапы: Эмпатия → Фокусировка → Генерация идей → Выбор идеи → Прототипирование → Тест — Начать заново

  • Эмпатия — найти проблему, узнать боль, понаблюдать, взять интервью, понять потребности.
  • Фокусировка — сформулировать вопрос «Как мы можем помочь конкретному человеку сделать что-то с помощью сервиса?».
  • Генерация идей — важно не опираться толкьо на свой опыт.
  • Выбор идеи — составить критерии выбора или проголосовать.
  • Сделать прототип и оттестировать его.

Эмпатия

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

Для развития эмпатии есть навык «Да, и» — надо принимать любую идею и развивать ее дальше.

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

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

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

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

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

Маиндмеппинг

mindmap2

Используя карты ума можно быстро набросать идеи, разобраться в новой сфере, сделать план работ.

Принципы создании маиндмепа:

  • В центре — идея
  • Первые ветви — основные идеи или проблемы
  • Каждая последующая ветвь конкретизирует предыдущую
  • 1-3 слова на надпись
  • Можно ставить знаки вопроса
  • Печатные буквы

Скетчбук

В этой главе все пестрит классными словами: скетчкбук, мудборд, дизайн-среда и прочие референсы.

По факту скетчбук — это блокнот, куда нужно заносить все идеи, картинки, вырезки.

1 проект = 1 скетчбук.

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

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

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

Дизайн исследование

Виды исследований

Часто бывает, что дизайнер после получения задачи исчезает на 2 недели, потом приходит и приносит нечто. Что происходило в это время и откуда что взялось — непонятно, какая-то магия. Возникает две проблемы: решение зависит от опыта дизайнера и невозможно спланировать работу. Чтобы убрать магию, надо формализовать процесс.

Первичное исследование — непосредственное взаимодействие. Могут быть качественные (интервью,  наблюдение) и количественные (статистика, опросы, аналитика).

Вторичное исследование — поиск по интернету: конкуренты, аналоги, тренды, контент. Работа с информацией, которая позволяет быстро начать ориентироваться в теме, о который вы не знали раньше ничего.

Восемь этапов вторичного исследования:

  1. Веб-исследование — анализ сайтов-конкурентов и похожего бизнеса.
    Цель — найти источник информации, разобраться  в теме. Понять как группируется информация, выявить закономерности, описать структуру.
  2. Поиск вдохновляющих примеров. Не надо прямо красть, но вдохновляться и заимствовать идеи можно.
  3. Выбор паттернов интерфейса.
  4. Микроанимация в интерфейсах. Пригодиться чтобы сделать актуальный сайт. Сохранять лучше в движении, чтобы объяснить верстальщику.
  5. Исследование рекламных материалов (баннеры, буклеты, брошюры, плакаты, журналы, визитки, одежда, игрушки и т.д.)
  6. Исследование контекста — составляем набор изображений, который покажет тиль жизни клиента. Это поможет нам подать идею заказчику. Даже если сейчас у заказчика полный треш и угар, то всегда можно подобрать интересный набор.
    Качественные изображения подходящие к друг другу по смыслу, цветам и размерам, основные образы сразу бросаются в глаза.
  7. Исследование графических стилей — фирменные стили, айдентики, типографика.
  8. Аналитика текущего состояния — разобраться что есть сейчас, что в этом хорошо, что плохо.

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

Показывать ли исследование заказчику?

Можно, если ему интересно и он вникает в процесс. Но рекомендуется показать эффектную презентацию концепции и продать идею.

Тренды веб-дизайна

  • Сайт это не творчество, сайт —информация.
  • Сейчас принято рассказывать о себе больше, там где раньше хватало формального текста. В портфолио сейчас рассказывают истории, а не только показывают результат.
  • Контент должен быть хорошо оформлен: типографика, заголовоки, отступы.
  • Простота и ясность. Пользователи более восприимчивые и менее терпеливые. Не нужно перегружать экран.
  • Внимание к цвету.
  • Измеряемость дизайна. Переход от творческого видения к аналитике.
  • Адаптивный дизайн
  • Плоский дизайн
  • Морфинг элементов
  • Микроанимация https://dribbble.com/shots/2088943-Deals
  • Обложка на главном экране
  • Плитка
  • Разбиение сайта на блоки\этажи
  • Реакция на скролл
  • Сначала скроллинг, потом клики

Развитие визуального вкуса и получение нового опыта

Самая плохая глава — очень похоже на сборник 10 дел, которые делают миллионеры и прочую ерунду.

  • Воруйте
  • Убивайте
  • Будьте актуальны
  • Смотрите новые сайты
  • Хорошо одевайтесь
  • Будьте в курсе всего
  • Смотрите работы других студий
  • Путешествуйте
  • Критикуйте себя
  • Представьте, что ваш заказ получла бы крутая студия
  • Сделайте хорошее рабочее место
  • Красивые девушки и пейзажи
  • Не жалуйтесь на заказчиков
  • Получите новый опыт
  • Делайте новое каждый день
  • Слушайте музыку

 

Флэт-иллюстрация

material

Сейчас флэт везде, в айфоне, андроиде, онлайн-сервисах и веб-интерфейсах.

Простота, практичность, минимализм, типографика и цвета.

Основы графического дизайна

Композиция

Композицию сложно оценивать. Нравится – не нравится — плохой вариант. Ее можно почувствовать или рассчитать математически.

Здесь я понимаю плоховато, поэтому рекомендую почитать курс или спец книжки на эту тему.

kartina

  • Составляющие объекта на плоскости: форма, цвет, композиция, перспектива.
  • Упругость линии.
  • Вертикальный или горзионтальный формат.
  • Положение обьекта на лист.
  • Устойчивость
  • Едиснтво и контраст
  • Акцент
  • Ритм
  • Соотношение большого и малого (большое может быть не проработано, а малое наоборот!)
  • Наложение структур
  • Рамочность

Очень сложно изобразить случайность.

Цвет

Можно долго читать теорию и париться, но на самом деле все просто. Есть два варианта:

Я самый крутой

krutoi

С этим вариантом дизайнер работает чаще всего. Это услуги, товары.

Используйте «Правило бутика» — 85% одного цвета + 1-2 дополнительных. Вспомните стильные дорогие магазины. При этом те обязтельно уходить в темноту, золотое на черном и вот это всё.

Я самый веселый

veselui

Дизайн событий, афиш, мероприятий.

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

Пример супер классного оттенка ассоциируемым с брендом — Тиффани.

Используйте готовый палитры от профессионалов, не забывайте про читаемость текста.

Шрифт

shrift

Я записал очень мало, потому что шрифты это не моё.

Гарнитура это название шрифтовой семьи, где может быть много начертаний.

Антиква — с засечками, гротеск — без засечек.

Типографика

Верстка работа над типографикой.

Свойство хорошо сверстанного текста — лаконичность, незаметность. В тексте должна быть структура, рубрики.

16-22 px для основного текста, 55-75 символов в строке.

В печатных изданиях размер шрифта измеряется в пунктах (pt), а на экране в пикселях (px). Формула перевода: 12 pt * (96/72) = 16 px

Длина строки / интерлиньяж = 28

Интерлиньяж / размер основного текста = 1.5

Абзацный отступ / интерлиньяж = 0.8

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

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

Интерлиньяж — расстояние между базовыми строками соседних строк.

Сервис для расчета: http://www.pearsonified.com/typography/

Используйте правильный кавычки. В русском языке это ёлочки «».

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

Дефис — самая короткая черта: переносы в тексте, соединение сокращенных слов.

Короткое тире — интервалы времени и дат.

Длинное тире — все остальное. Нужно отбивать пробелами с двух стороны.

Не надо использовать вместо математических знаков похожие буквы или знаки:

0 ≠ О, х ≠ ×, — ≠ −.

Модульные сетки

setka

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

Модульная сетка — вертикальные и горизонтальные линии, разделяющие страницу на прямоугольники.

Сетка:

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

Самая распостраненная сетка: 960px – 12 колонок по 60px, 20px межколоночное расстояние.

Ширина межколонника не может быть меньше размера базового шрифта.

Есть такое понятие как «резиновая сетка» (Fluid Grid), расстояние задается не в пикселях, а в процентах.

Не начинайте поиск дизайн решения с потроения сетки — иначе в итоге получите сетку, а не дизайн.

Эскиз → единообразие боков → построение сетки → доработка оставшихся блоков.

Психофизиология

Правило 7+-2 пункта не верно, но имеет смысл.

Люди хорошо запоминают цифры, цвета, буквы.

Мы ищем элементы интерфейса в привычных местах. Середина и края самые запоминаемые места.

Хорошо фокусируемся на сложном объекте и на лицах.

Нужно правильно группировать элементы следую правилу ближнего.

Можно выделить цветом, размером и анимацией.

Прототипы

Прототип нужен для фокусировки на смысле и продумывании интерфейса.

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

Прототип помогает:

  • получить контент,
  • понять какие информационные блоки буду на сайте,
  • быстро отработать гипотезы.

Прототип должен быть аккуратный, не состоять олько из рыбы, слишком разукрашенным.

Дизайнер может отходить от прототипа.

Сторителлинг

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

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

Сейчас информация доступна, ее очень много. Новое поколение привыкло жить с информационными потоками с девства.

Информации много, часть плохо оформлена, часть низкокачественная,

Первая известная интерактивной цифровая история — рассказ про снегопад в США.

Сейчас это не выглядит супер, но в 2012 было прорывом.

10 правил:

  1. хороший контент
  2. глубокая проработка темы
  3. красивые картинки
  4. говорящие заголовки: цитаты, заголовки с цифрой, заголовки вопросы, каламбуры. Поменьше желтизны.
  5. Несколько слоев чтения: все подряд, только заголовки
  6. Используйте дизайн-паттерны
  7. Избегайте монотонности
  8. Не переборщите с дизайном и цветом
  9. Выберите подходящий шрифт
  10. Добавьте возможность поделиться в социалках

Веб типографика

Обложка

Бывает полноэкранная, в половину экрана, вписанная в сетку сайта. Обязательно должен читаться текст. Часто содержиться картинка, но может быть и фон.

Заголовок (см выше)

Лид — одно-два предложения в начале статьи. Прочитав это читатель примет решение.

В абзаце должна содержаться одна мысль.

Лучше н использовать колонки в вебе.

Размер шрифта лучше менять в зависимости от размера устройства.

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

Разделитель — элемент, который отделяет смысловые элементы текста: линия, декоративный элемент, цвет фона, цифра.

Фотографии надо подписывать. Не надо описывать содержание фотографии в ее подписи.

Хороший тон — указывать источник и автора фотографии.

Функциональные элементы лендинга

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

Блоки:

Обложка → описание продукта или услуги → Фишки → Сценарии использования и выгода → Целевая аудитория → Цены → Формы для регистрации и подписки → Отзывы → Клиенты и партнеры → Как это работает → Галерея → Видео → Призывы к действию

Примеры лендов: onepagelove.comland-book.com.

Портфолио

Структура демонстрации работы:

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

Надо определится зачем делаем портфолио.

Показывайте только лучшие макеты. Не обязательно финальные.

Показывайте не очень много работ (5-7).

Не будьте монотонными.

Помещайте дизайн на носители (ноутбуки, планшеты, футболки и т.д.).

Покажите детали (в том числе акцентом в виде лупы).

Видео интерфейса в зацикленной ГИФки.

Классно показывать процесс работы, бекстейдж.

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

На своем сайте продумайте заголовок, описание и картинку при шере в соц сетях.

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

 

 

comments powered by HyperComments