90. Сетки в вебе

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

Сетки в вебе

Наталья Хродская написала о работе с сетками в вебе.

Преимущества сетки:

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

Сначала дизайнер определяет структуру макета и уже потом создаёт под неё сетку.

Виды сеток:

  1. Блочная или манускриптная — стандартизированный прямоугольник, который содержит контент. Например, страница книги или статья блога;
  2. Колоночная — имеет в своей структуре колонки;
  3. Модульная — имеет как вертикальное членение, так и горизонтальное. Модуль — блок размером с заданное количество столбцов и строк;
  4. Иерархическая — интуитивное размещение блоков с фокусом на пропорциях и визуальном весе элементов.

Также в статье:

  • Что такое базовая сетка. Преимущества 8-пиксельной базовой сетки;
  • Понятия hard и soft сеток;
  • Вертикальный ритм и разделение макета на строки;
  • Преимущества 12-колоночной сетки и работа с ней в адаптивном дизайне.

Сетка должна помогать в дизайне. Не надо всё беспрекословно по ней выравнивать. Если какой-то блок никак не помещается в сетку, его можно не подстраивать.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в UX Notes ВКонтакте.)

Профессиональное выгорание

Инесса Шилло написала о профессиональном выгорании дизайнера.

Лёгкая усталость и опустошённость по будним дням. Проблемы со сном. Сложнее попадать в состояние потока. Неохотнее встречаться с друзьями.

Предпосылки к выгоранию в дизайнерской работе:

  1. Работа под NDA;
  2. Ощущение, что вы — чьи-то руки. Например, когда артдиректор (или в запущенном случае — клиент) говорит, как делать;
  3. Работа над чужими концепциями. Опять же, когда артдиректор задаёт идею, а дизайнер её прорабатывает;
  4. Проекты в стол;
  5. Переработки;
  6. Мысль о несерьёзности работы. Когда студия дизайна кажется менее серьёзным бизнесом, чем завод или заправка;
  7. Финансовый потолок. Чтобы каждый год удваивать или утраивать доход, надо становиться управленцем в виде артдиректора или создавать своё агентство;
  8. Отчуждённость труда. Ваш дизайн — деталь для машины, которая состоит из кучи других деталей и на которой зарабатывает другой человек (заказчик).

Если перечисленное выше есть в вашей работе, будьте внимательны.

Заботливые продукты

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

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

Боль порождена продуктом:

  • При медленной загрузке приложение «Кухня на районе» показывает заботливые сообщения о том, что происходит;
  • Каршеринг BelkaCar присылает уведомление о том, что пользователь не довёл процесс завершения аренды до конца.

Примеры заботы, вызывающей вау-эффект:

  • Лондонский убер ViaVan  за 2 минуты до конца поездки напоминает, что скоро выходить. Боль: поездка заканчивается для пассажиров внезапно, и они покидают такси в спешке, забывая свои вещи;
  • Магазин «Лабиринт» сообщает, что покупатель выбрал доставку на праздничный день. Боль: покупатели забывают, что будет выходной, и не могут получить заказ, так как куда-нибудь уезжают;
  • Ещё примеры смотрите в статье.

Из фриланса в бизнес

Графдизайнер Мэрилин Во написала, как фриланс превратить в бизнес.

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

2. Собирайте клиентскую базу. Возможно, сначала придётся делать всё от логотипов до упаковки и иллюстраций или даже работать бесплатно.

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

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

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

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

4. Упакуйте предложение: опишите процесс, итоговые артефакты, насколько вы готовы менять это по желанию клиентов.

5. Поймите, сколько вам стоит оказание типовой услуги (ваше время, расходные материалы и т.п.). Старайтесь назначать цену от возможностей клиента. Закладывайте в оценку инвестиции в автоматизацию и новые инструменты.

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

7. Систематизируйте процессы, готовьте чеклисты.

Рассылка Проектората × UX Notes

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.