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

дизайн

Знак платной парковки

44 минуты назад

Знаки должны быть такими:

Как они это сделали?

3 августа, 13:32

Легко определить качество любой вещи, будь это предмет, событие или гипотеза. Хорошие качественные вещи всегда вызывают вопрос: как они это сделали? Шоу, которое захватывает и которое хочется посоветовать посетить вызывает реакцию: как они это сделали? Дрессировщик, у которого собаки стоят за маленькими партами, а потом по команде садятся за них как на уроке, вызывает вопрос: как он, чёрт возьми, это сделал? Хороший дизайн чего угодно, от автомобиля до открытки, вызывает вопрос: как они это сделали? Как у них вышло получить такую гармонию линий и форм? Как получилось двумя цветами на плоскости показать столько смыслов?

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

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

Другой пример, тоже вентилируемый фасад:

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

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

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

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

Как культура влияет на остальных? Очень просто — люди видят, что их окружает, и думают: «так можно». Видят вокруг уродливые логотипы и заказывают себе уродливый. Видят вокруг унылые пластиковые коробки вместо зданий и заказывают себе такую. Или открывают фирму, которая из любого здания сделает унылую пластиковую коробку, потому что другие люди не прочь превратить своё здание в унылую пластиковую коробку. Ну потому что «так можно». Оно ведь, повсюду, значит, можно. В итоге, количество унылых коробок в городах увеличивается, культура меняется в худшую сторону, а у людей всё крепче оседает уверенность, что «так можно». Хотя ещё в Древней Греции люди знали, что так нельзя.

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

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

Фотографии с сайтов: archiproducts.com, альппро.рф

Горячие клавиши

16 марта 2017, 16:41

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

Бывают даже пасхалки с горячими клавишами. Например если в фотошопе (CS6) зажать пробел и нажимать F, то будет меняться цвет фона (то, что за пределами редактируемой области). А если зажать пробел и C, то включится антилупа — инструмент, который помогает передвигаться по большому документу. Это довольно полезные штуки. Но бывают и странные. Например есть комбинация ⌘+B, которая вызывает панель цветового баланса. Удивительно, но эту панель можно вызвать, если одновременно нажать ⌘+-+0 (команд, дефис, ноль).

Ненависть наступает, когда начинаешь привыкать к горячим клавишам в одной программе, а потом приходится работать в другой, а там всё по-другому. Вот казалось бы, у Адоби есть Фотошоп, Иллюстратор и Индизайн. Можно было бы сделать чтобы большинство горячих клавиш совпадало — переключение между программами было бы почти незаметным. Но производители компьютерных программ не ищут легких путей. Поэтому в Иллюстраторе и Индизайне можно сохранить редактируемый текст, нажав Esc. Но если нажать Esc при редактировании текста в Фотошопе, то всё пропадёт. Это сильно мешает, когда целый день работаешь в Индизайне, а потом переключаешься в Фотошоп. Первые разы всегда по привычке нажимаешь Esc и теряешь изменения в тексте, а иногда и весь текст. Другой пример. Инструмент рисования фигур в фотошопе — это клавиша U. При помощи Shift+U пролистываются все фигуры, которые можно рисовать. В иллюстраторе на разные фигуры своя клавиша: для круга L, для прямоугольника M. Shift+M не листает по фигурам, а включает ВНЕЗАПНО! Shape Builder. В Индизайне похоже на иллюстратор. Но Shift+M ничего не делает. В Фотошопе параметры сохраняются по ⌘+Enter. В Индизайне это сочетание вызывает панель быстрого присвоения стиля. Казалось бы, программы выпускаются под общим именем, но выглядят как совсем разные продукты и ничего друг о друге не знают.

Теперь буду ругать Скетч. Ребята фактически сделали урезанный фотошоп, заточенный под рисование приложений и сайтов. Но жутко накосячили с горячими клавишами. Аудитория — те, кому не нравится фотошоп, но приходится пользоваться для дизайна. Не было никакой причины не скопировать горячие клавиши с Фотошопа. Куча людей перешли бы на Скетч, если бы привычные инструменты были бы под рукой. Переход был бы плавным, не требующим формирования новых привычек. А насильное формирование новых привычек вызывает стресс, потому что в этом процессе постоянно допускаются ошибки. Мне требуется не меньше двух дней, чтобы перестроиться на новую программу со своими горячими клавишами. И я заранее знаю, что эти два дня будут адом.

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

Визуальные раздражители

15 марта 2017, 17:12

У лягушек есть одна интересная особенность. По долгу своей легушачьей жизни они сидят в засадах и выжидают. А когда мимо пролетает насекомое, язык лягушки (или вся лягушка целиком) выстреливает ровно в то место, где находится жертва. В процессе эволюции у лягушки сформировался участок мозга, который способен вычленять в поле зрения движущийся объект на однородном фоне. Простая мысль — лягушка устроена так, что не может не заметить раздражитель.

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

Наведите, чтобы проверить, что вы тоже лягушка

Хотите ли вы этого или нет, а мозг, пользуясь зрением, сразу замечает, где появились движущиеся кружки, даже если они возникли на периферии — вне локуса внимания. И новый появившийся объект в тот же момент овладевает вашим вниманием. Поэтому любые «неспокойные» изображения и состояния нужно использовать с особой осторожностью. Многие это уже поняли и чтобы привлечь внимание к определенному месту, например, в интерфейсе слегка пошатывают кнопку или пару раз мигнут элементом, на который нужно обратить внимание.

Примеры хорошего применения с учетом рефлекса:
— иконка программы в Маке начинает выпрыгивать из дока, если в ней что-то случилось;
— редактор codepen.io в несохранённом проекте трясёт кнопкой Save;
— бета Яндекс.Браузера проигрывает анимацию на вкладке, в которой что-то произошло;
— «поворотники» в автомобиле мигают, чтобы их было заметно среди остальных огней;
— стоп-сигналы в некоторых автомобилях мигают, если срабатывает антиблокировочная система при торможении.

Не все ещё понимают, что мигание нужно использовать только в определенный момент времени, когда оно необходимо. Из-за этого получаются нерабочие, но популярные решения:
— Мигающие знаки пешеходного перехода. Призванные обезопасить пешехода, обращают внимание водителя на себя и отвлекают от пешехода.
— Анимированные светодиодные табло. Обращают внимание на себя, но переключаются на следующее состояние и сразу прячут то, на что человек обратил внимание.
— Повсюду на сайтах второстепенные элементы оказываются раздражителями, а важные остаются статичными. Например, анимированный баннер против статичного сообщения об ошибке заполнения формы.

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

Дискретность в тач-интерфейсах

14 марта 2017, 16:17

Есть два типа элементов управления: дискретные и непрерывные. Изменение громкости — это непрерывный параметр, даже если шаг изменения будет 1 децибел, то всё равно ухо практически не уловит такую малую разницу и изменение на несколько децибел будет слышиться как плавное. По тем же причинам, можно считать непрерывным изменение температуры. А смена между несколькими возможными режимами — дискретный параметр. Переключение песни в плеере — тоже.

А теперь посмотрите на этот концепт тач-интерфейса для автомобиля:

Мало того, что им невозможно пользоваться, пока не выучишь все жесты и их вариации, так ещё есть проблема несовпадения контролирующего элемента и параметра. В случае с громкостью и температурой всё хорошо — значения меняются плавно, по мере движения руки. А вот со сменой источника звука и переключением треков большая беда. Пальцы на тач-интерфейсе приходится вести плавно, а значения меняются ступенями. Интерфейс не приводит никакой обратной связи, поэтому переключение на 5-й или на 6-й трек одинаково вероятно. «Железными» кнопкам обычной магнитолы можно переключать песни не глядя. С таким тач-интерфейсом придётся всё время контролировать процесс переключения, а ошибка может случиться из-за ямки на дороге. Вместо того, чтобы повысить безопасность на дороге, такой интерфейс будет больше отвлекать водителя на себя.

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

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

Напряжение в дизайне. Что дальше?

29 декабря 2016, 22:18

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

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

Наденем резиновые перчатки и усилим ещё.

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

А можно и черным по черному написать:

Внезапный поп-ап

12 сентября 2016, 18:28

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

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

Хозяева сайта обычно стараются, чтобы читателю было интересно. Разыскивают новые темы, о которых рассказать, подготавливают статьи. И вот читатель сидит, вчитываешься в текст, разглядывает картинки, как вдруг в середине абзаца его прерывает внезапный поп-ап! Первые секунды читатель обескуражен: «что произошло? Почему я читал черный текст по белому и вдруг всё стало тёмным и появилось что-то новое. Я же ничего не нажимал». Единственное желание в такой момент — побыстрее закрыть поп-ап и продолжить чтение. Но так как внезапный поп-ап прервал читателя на полуслове, то придётся сначала найти, где он остановился. Казалось бы, читатель проявил интерес к вашему сайту, а вы, мало того, что не даёте ему спокойно ознакомиться с содержанием страницы, так ещё и предлагаете неинтересные ему вещи.

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

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

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

Я не против поп-апов в целом. Они хорошо справляются, когда нужно привлечь внимание на конкретном: полях ввода или главном действии. Поп-ап воспримется нормально, если пользователь сам инициировал его появление — нажал кнопку, например.

Вывеска ДК «Протон». Часть 2

27 октября 2015, 19:41

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

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

Ещё раз посмотрим, что висит сейчас:

Оглядываясь на примеры, попробуем разные шрифты.

Вариант с полным написанием:

Можно сократить «дом культуры»:

А лучше всего — сделать леттеринг:

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

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

Вывеска ДК «Протон». Часть 1

26 октября 2015, 18:12

В 2014 году на протви́нском доме культуры сменили вывеску. Фактически, это самая главная вывеска в городе.

Раньше это были металлические объемные буквы, заготовленные под неоновое освещение.

Была и полная надпись «дом культуры». Буквы составляли с оформлением фасада единую стилистическую картину.

Установили вот такое:

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

Настало время отделить надпись от фона и посмотреть на неё детально.

Кажется, что шрифт растянут в ширину. Уберем жуткие обводки, чтобы посмотреть на настоящую форму букв:

Если сжать надпись, то проступят истинные пропорции (за исключением испорченных Д и К):

Шрифты нельзя растягивать в одну сторону. Пропорции буквы священны.

Есть проблемы со знаками, рассмотрим подробно:

Такое небрежное отношение к формам наводит на мысль, что автор этой работы не интересуется буквами и не понимает их строения. Это подтверждает и непонятно зачем нужное подчеркивание, которое ломает буквы ДК и не согласуется с толщиной штрихов. «Шахматное» раскрашивание ничем не оправдано и выглядит несерьёзно. Букву К стошнило и всё это потекло под надпись. А разные характерами слово и аббревиатура набраны одинаковым размером и начертанием.

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

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

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

Маркерная графика

14 мая 2014, 16:30

Сейчас я покажу, как с помощью фотошопа и других средств сделать так:

Рисунок и фотография

Первым делом надо нарисовать что-нибудь маркером на бумаге. Можно экспериментировать с маркерами, водные обычно дают интересную текстуру.

Далее, фотографируем это на то, что под рукой попадётся. Здесь действительно не важно качество, даже фотография с более или менее современного смартфона подойдёт. Для веба большой рамзер не нужен, главное — хорошо сфокусировать.

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

Фотошоп

Кратко — берём нужный кусок фотографии и, работая уровнями, делаем из него маску на новом цветном слое. Это всё. Подробно ниже.

Фотография отправляется в фотошоп. Кадрируем (C):

Удерживая ⌘/Ctrl + Shift, нажимаем U, L — так картинка обесцветится и выровняются уровни.

Далее теми же уровнями (⌘ + L) надо добиться такого результата:

Фон вытравился, стало контрастней

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

Дальше, имея такую черно-белую картинку с ровным фоном, инвертируем — сейчас она станет маской.
Если фон ещё не ровный, потрите белой кистью или стёркой, потом инвертируйте.

Дальше
⌘ + A
⌘ + C — выделяем всё и копируем
⌘ + Alt + Shift + N — новый слой

Заливаем его каким-нибудь цветом. Создаём на этом новом слое маску и кликаем в панели слоёв по ней с альтом.

⌘ + V

Жмём на нижний слой и заливаем его белым, он нам уже не нужен. И получается вот так:

Это уже слой с хорошей прозрачностью и настоящей текстурой. Надо только его раскрасить. Любыми
цветами водим кистью по слою с маской и получается вот так:

Или так:

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

Ctrl +  Ранее