Image for post
Image for post

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

Людям оказался нужен хаос, а дизайну — пространство для экспрессии, драматизма и продуктового роста.

История отечественных дизай-систем

Рост интереса к дизайн-системам на нашем рынке начался где-то с середины десятых. Точкой отсчета, наверное, можно считать выступление Антона Виноградова на PiterCSS с рассказом об архитектуре дизайн-системы Альфа-Банка в марте 2016. Хотя корни, конечно, стоит искать раньше.

В 2013 Бред Фрост презентует Atomic Design (книга будет опубликована в 2016) и впервые целостно описывает концепцию построения дизайн-системы. В это же время у дизайнеров набирает популярность Sketch как более быстрая, удобная и заточенная под интерфейсы альтернатива фотошопу. И в этот же году на конференции JSConf US Facebook раскрывает исходны код React, который популяризирует компонентный подход. …


Image for post
Image for post

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

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

Основы дизайна

1. Мобильный дизайн

Самый простой путь попасть в продуктовый дизайн — через дизайн мобильных приложений. Так как это востребовано, а Эппл и Гугл уже всё за всех придумали.

Более того, благодаря тренду последних лет не делать различные версии дизайна под разные мобильные платформы, все становится еще проще — собираем дизайн под iOS, а затем немного адаптируем его под особенности Андроида. …


Image for post
Image for post

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

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

Так и в дизайне — неопытный дизайнер, только открыл Фигму и уже переживает, что что-то пойдет не так: сложно будет разрабатывать, метрики упадут, менеджеры будут сопротивляться и т. д. И чем дальше он продвигаеться, тем больше переживаний. В итоге, суетясь рисует усредненный вариант, в котором пробует учесть все те возможные «но» и тратит на это драгоценное время. …


Выделяем объекты → объединяем как Union → скругляем углы.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Поиграться можно тут: figma.com/file/Ao0EHmkW1R37UVWQ40AkxS/metaball

Подписывайтесь на мой канал в Телеграме. Буду рад ответить на вопросы и помочь.

Серёжа Плащинский


Привет, меня зовут Серёжа. Я дизайнер. И в прошлом году я много учился.

Image for post
Image for post

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

Топ-3

Основы композиции (офлайн)

Дима Барбанель
campus.designworkout.ru/composition

Длится три дня. Много заданий и много практики. И сам Дима очень хороший и заряжает своей добротой. С курса возвращаешься новым человеком и с увесистой папкой выполненных заданий.

Image for post
Image for post
Стопка моих работ за три дня (при том, что я ленился вовсю)

Шрифтовые практики (офлайн)

Вова Коломейцев
campus.designworkout.ru/playtype

Курс тоже проходит в кампусе Барбанеля, но ведет его Вова — не менее крутой и харизматичный человек. Заданий меньше, но они объемнее. Если «Основы композиции» можно сравнить с Iron Man, то курс Вовы по медитативности больше похож на Tour de France. …


Если спросить любого дизайнера: «Что такое оптическая компенсация?» — он ответит, что это когда круг делают больше, чем квадрат, чтобы выглядело так, будто они одинакового размера.

Image for post
Image for post
Оптическая компенсация круга

Это базовое знание, с него начинается любой курс для начинающих.

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

Но что если этот принцип применить шире? Там, где нет ничего круглого, но один элемент так же может терять вес относительно другого равноценного ему. …


Чтобы твоими файлами могли пользоваться и другие.

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

Прошло время. Появились новые инструменты. Любой объект на макете теперь легко выбирается мышкой. На структуру слоев перестали смотреть. Можно не заморачиваться, если не мучает чувство прекрасного. Главное — следить за глубиной вложенности.

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


Image for post
Image for post
Ководство. §143. Знаки препинания в нестандартных ситуациях
Image for post
Image for post
Илья Бирман. Правильный способ брать ссылки в кавычки
Image for post
Image for post
Как можно

Кавычки обрамляют имя собственное, а синий цвет — ссылку. Если имя и ссылка совпадают, то зачем использовать и то и другое? Цвет хорошо справится с обеими задачами.

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

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

По теме

Всего четыре книги, с которых стоит начать изучать дизайн. Кратко
Всего восемь полезных советов Горбунова. Кратко #2

Подписывайтесь на мой канал в Телеграме. Буду рад ответить на вопросы и помочь.

Серёжа Плащинский


Image for post
Image for post
Никогда не видел Артема улыбающимся. На помощь пришло FaceApp.

Текст как базовый элемент

Якорные объекты

Точка, линия, прямоугольник

Внутреннее и внешнее

Отступы

Чередование ритма

Гомогенезация

Модульность

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

Далеко ходить не надо. Открываешь Дипломные проекты Школы бюро и видишь, что все работы как будто сделаны одним человеком и очень напоминают сайт самого Бюро. …


Шесть лет назад я решил, что не хочу быть кодером, а хочу быть дизайнером. А чтобы стать кем угодно, в том числе дизайнером, для начала хорошо бы что-нибудь почитать. Я загуглил и слегка прихуел от количества рекомендуемой литературы. Мне понадобилось еще несколько месяцев, чтобы пройти все стадии принятия и начать хоть что-то читать.

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

Я не понимаю, зачем рекомендовать откровенно задротские книги про визуальное представление больших объемов информации, модульные сетки в графическом дизайне, облик изданий и современную типографику, дизайн мышления или ТРИЗ еще совсем невинным ребятам, которые только-только решили понять для себя, что же такое дизайн вообще. …

About

Серёжа Плащинский

Ведущий дизайнер Авито | t.me/planktonchallenge

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store