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

Дизайн - это решение бизнес-задач. Дизайн - это про деньги

Дизайн — это не дар и не талант. В дизайне нет места «Я» и субъективной оценке. Дизайн — это знания в области истории, психологии, нейробиологии, математических принципов и технических ограничений сегодняшнего дня. Все остальное «мне нравится» или «мне не нравится» — это детский сад.

Дизайн — это борьба с предубеждениями. С предубеждениями общества и самого себя. И для этого в совершенстве стоит владеть кунг-фу.

Индивидуальность и творчество

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

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

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

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

У всего есть причина. Последовательность связанных вещей приводит к закономерности.

Швейцарский дизайн — это не направление в дизайне, это просто образованные люди

В 1924 году Чихольд отправился в Веймар на выставку Баухауса — Школы искусств и ремёсел, основанную архитектором Вальтером Гропиусом в 1919 году. В каталоге выставки, который сам по себе был ещё и манифестом, венгерский художник, дизайнер и фотограф Ласло Мохой-Надь писал: «Типографика — это коммуникация через печать». Иными словами, текстовое сообщение не должно подчиняться эстетике.

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

История. Главная дисциплина хорошего дизайнера

Разрешение iPhone с первой модели по пятую по ширине не менялось и было равно 320px, не смотря на то, что в четвертой модели появилась Retina и количество физических пикселей увеличилось вдвое, а между выходом устройств прошло 6 лет.

Разрешение iPhone с первой модели по пятую по ширине не менялось и было равно 320px, не смотря на то, что в четвертой модели появилась Retina и количество физических пикселей увеличилось вдвое, а между выходом устройств прошло 6 лет.

У моделей, начиная с шестерки и вплоть до актуального ныне iPhone 13 mini тоже одинаковое разрешение по ширине — 375px. А при увеличении читаемости в настройках OS — те же 320px. Все это есть в документации Apple и на сайте ios-resolution.com.

Здесь начинается путаница, но с ней мы разберемся чуть позже. Отмечу, что это связано с масштабированием интерфейса и «пикселей» на уровне операционной системы. А началось все с компании Palm и противостояния форматов матриц с разрешением QVGA 320x240 и 320x320. Последний позволял отображать больше символов в строке и его модификация с соотношением сторон 3:4 — 320x480 и стал разрешением для первого iPhone. А вот разрешение VGA 640x480, хоть по пикселям больше, по факту давало то же количество символов в строке, просто на каждую линию приходилось теперь 2 физических пикселя.

Разрешению 320x320 предшествовало разрешение 160x160 и целая линейка мобильных устройств компании Palm, выпускаемая с 1996 года.

Так. Уже 30 лет дизайнеры работают с одним и тем же ограничением по количеству символов в строке на мобильных устройствах. И в 2022 мы проектируем интерфейсы под «абстрактные» 320 пикселей по ширине, несмотря на то, что физических может быть аж 1080.

А последние 1,5 тысячи лет мы эксплуатируем наследие Римской Империи, от безграмотности игнорируя культурную революцию, случившуюся после Второй мировой войны. Я о шрифтах и выравнивании текста по центру вторю Яну Чихольду.

Я осуществляю типографическую революцию, направленную главным образом против идиотских тошнотворных книг пассеистических• стихов, с бумагой XVI столетия, украшенной галерами, Минервами, Аполлонами, заглавными буквами и вензелями, мифологическими овощами, эпиграфами и римскими цифрами. Моя книга должна быть футуристическим выражением нашей футуристической мысли. Еще лучше: моя революция направлена и против так называемой типографской гармонии, противной приливу и отливу стиля, разворачивающегося на странице. Мы будем употреблять на одной странице три или четыре разных цвета, а в случае необходимости двадцать разных шрифтов.

Форматы. GIF / JPG / PNG / APNG / WEBP / SVG

Пиксели - квантовая теория в мире дизайна

Изрядную долю неразберихи в этот вопрос внесли технари. Одни из компании Adobe, трактуя «resolution» как плотность пикселей на дюйм, другие со стороны IBM, определяя «разрешение» как размер — значения по ширине и высоте.

Конечно, IBM держит пальму первенства со своей стандартизацией цифровых протоколов, которые в частности и описывают разрешения, так как стандартизация предполагает технологическую реализацию, на основе которой Adobe уже писала ПО. Но дизайнеры не читают техническую литературу, поэтому получаем спин-оф распространение трактовки термина «resolution» как обозначения плотности пикселей. Что в последствии будет стандартизовано Гуглом в понятие «Dencity» и «Dencity independent Pixel»

А что с простыми смертными? Что с народом — разрешение то — FullHD?

Принято считать, что аббревиатуры VGA, QVGA, HD, FullHD и прочие отписывают стандарты разрешений экранов, а не количество точек на дюйм. И отчасти это справедливо, поскольку IBM стандартизация описывает «resolution» как количество пикселей по высоте и ширине. Но, помимо размера, стандарты описывают еще и техническую сторону, такую как физические интерфейсы, пропускную возможность шины, алгоритмы развертки изображения и тд., то есть буквально всё, чтобы данное изображение могло появится.

Чего не учитывали специалисты из IBM — так это технологического прогресса и возможности «тратить» на вертикальную линию в букве «i» не один столбец физических пикселей, а два или даже три.

Проблема появилась в 2010х, когда HD и FullHD матрицы стали ставить на ноутбуки с 13" диагональю. Весть интерфейс и текст на таких устройствах казался очень мелким, так как система не могла еще масштабировать интерфейсы самостоятельно.

Изначально проблему решили на мобильных устройствах. Первым вопросом задалась Apple, увеличив плотность пикселей в iPhone4 вдвое и обозначив это Retina Display. Решение простое — всё, что под Ретину просто масштабируется, пусть и с эффектом «мыло».

Гугл подхватила тренд и в первой документации на Android 4 имела длинный список возможных ресайзов одного и того же изображения от x1 до x4.

Далее очередь дошла до операционных систем, в которых Apple так же выступила пионером, вставив ретину в 13" ноутбук и с тем же решением по масштабированию чужих программ, не заточенных под неё. А далее последовала и Microsoft c масштабированием в Windows 10.

Последние, кто противился прогрессу — профессиональное по— Photoshop и Figma. Проблему решили только в 2022 году. И сегодня, открывая принтскрин, сделанный на ретина устройстве, программы покажут его в логических, а не физических пикселях.

DP — виртуальные пиксели и излучение Хокинга

Проблему с масштабированием, разрешением и плотностью для профессиональных инструментов и web'а описал Артемий Лебедев еще в 2001 году в Ководстве «§ 71. Смерть пиксельной графики»

Другая иллюстрация той же проблемы описана компанией Adobe

Еще одна иллюстрация — пример из современной дизайн документации Material Design компании Google, иллюстрация той же проблемы реального отображения объектов, заданных точно в пикселях на устройствах с разной плотностью/density

Двадцать лет спустя, мы дождались. Сейчас все «как должно быть», так и отображается. Но это не «разрешение» 72, 144 и 288 ppi — это Density — плотность. Да, да — ошибка которую нам навязал Photoshop.

Что это за «разрешение» и «плотность такая» — откуда ноги растут.Перепащиваю с исправлениями параграфы из Ководства Лебедева.

DP — Density-Independent Pixels

Density-independent pixels, пишется «dp» / произносится "dips" — это гибкие единицы измерения, которые масштабируются для получения одинаковых размеров на экранах с любой плотностью физических пикселей.

Если мы нарисуем векторный круг с размером 10x10 ds, то на матрицах с низкой плотностью пикселей он будет занимать 10x10 физических пикселя, а на High-density экранах — 20x20, или 30x30 — в зависимости от плотности.

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

Принтскин это не принтскрин. ЭНИМО

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

Рендерить изображение больше чем оно есть на мониторах никому не приходило в голову, тк это — не оптимальное использование ресурсов процессора или видеокарты. Если у монитора было разрешение 1024x764, то и операционная система рендерила картинку в 1024x764.

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

Большим толчком стало развитие мобильных устройств и конкуренция за качество экранов у разных вендеров на платформе Android.

Смотрим простую математику на примере разрешений MacBook 13" с retina экраном.

Операционная система предлагает четыре варианта ресайза изображения: large text, без названия, Default и More Space. им соответствуют разрешения: 1024x640, 1280x800, 1440x900 и 1680x1050.

Эти разрешения — разрешения Looks like, то есть логических пикселей.
Поскольку экран retina, операционная система рендерит каждое изображение в двукратном размере. Если мы сделаем скриншот, то увидим, что для каждого разрешения получится картинка с размерами: 2048x1280, 2560x1600, 2880x1800 и 3360x2100.

Последние рендеры избыточны, ведь физическое разрешение 2560x1600, что соответствует только двукратному увеличению от неназванного разрешения в 1280x800. Причём, одна вертикальная линия, нарисованная в 1 пиксель, будет занимать ровно 2 физических. А в остальных случаях картинка будет сжиматься и линия будет занимать не ровно 2 пикселя, но глаз этого уже не увидит.

2020/22 — да здравствует стандартизация EXIF или зачем нужны метаданные

Стандарт метаданных Exif в частности описывает плотность физических пикселей для корректного вывода изображений на печать. Поскольку версия 2.2 вводилась в 2002 году и касалась печати уже под влиянием неверной терминологии Adobe, параметр «resolution» определяет плотность — те по факту Density.

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

Только в 2020м скриншот сделанный в iOS и заброшенный в фигму корректно отобразится 1к1 как вы его и видите на экране монитора.

Этот большой шаг для человечества позволяет сегодня дизайнерам не задумываться каждый раз над тем какой DPI выставлен у картинки при сохранении из фотошопа. Ибо условные 72dpi и их двукратное увеличение в 144 с 2014 года не являются каноном, им на смену пришла спецификация Google со своими 160.

Exif позволяет сегодня работать с кратностью: x1 x2 ... Что очень удобно, однако проблема старых изображений без корректных метаданных остается актуальной, а так же новые стандарты и математика мобильных экранов дают о себе знать. Ждем следующего шага в стандартизации, пусть и через 20 лет.

Субпиксели и даунскелинг. Всё бы ничего, если бы всё было кратно как в теории. Но нет

Иначе обстоят дела с шрифтами. Если в «примитивах» параметры по высоте и ширине задаются четко, то в комплексных формах, которыми являются иконки и шрифты, всё сложнее.

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

Пропорции линий, просветов и отступов в шрифтах не кратны друг другу из-за специфики визуального обмана. Поэтому даже вертикальные линии в буквах «i» «l» «t» будут расторизоваться так же, как и скругления у примитивов.

Даже если найти шрифт и кегль, при которых отдельно стоящие «i» или «l» отрисовывается чётко по пикселям, стоящая рядом «l» уже будет отрисовываться с полупрозрачностью, тк кернинг в шрифтах не выстаивается по принципу кратности пикселям.

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

Сегодня пиксельную растеризацию шрифтов можно встретить на кнопочных телефонах и как системный шрифт операционных систем Simbian 30+ и KaiOS, которые кстати поддерживают YouTube и WhatsApp, а так же беспроводную гарнитуру.

Montserrat — это новая Helvetica

Дизайнеры, горланящие на каждом шагу, что использование шрифта Montserrat — это «Mauvais ton» обречены в аду вечность играться со шрифтами.

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

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

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

Дизайнер полон когнитивных искажений, тк он «Just a human after all»

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

Кстати, Гельветика Нью вышла в 2019 году.

Fonts

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

Шрифты, созданные до Roboto — морально, нравственно и технически устарели, за некоторым исключением классики, а-ля Didot — но это исключение.

Простые геометрические формы гротеска выражают ясность и сосредоточенность на главном, — это суть нашего времени.

В интерфейсах шрифты носят исключительно утилитарную функцию. Это чистая математика — как сами шрифты, так и их используемые характеристики (интрлиньяжи и леттеринги) и сочетания в заголовках и кнопках.

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

Анатомия шрифта

ROBOTO

Висячие предлоги. Правила отменяются

Сенечка Шабанов у нас Арт-директор , как и многие другие прилежные арт-директора и поборники морали и нравственности (зазубренных книжек) даёт рекомендации по висячим предлогам. В тексте автора все предлоги висячие, тк платформа не позволяет этот момент скорректировать.

Но Сенечка, не лыком шит и предупреждает об этом ограничении, недоумевая и сетуя на платформу vc.ru, где и опубликована его статья.

Нас не проведешь Сеня, отговорки не принимаем. Дело в том, что люди в 99,999999999% случаем сталкиваются с текстом на платформах, где скорректировать висячие предлоги невозможно: соц сети, мессенджеры, стиминговые сервисы. И это — новая визуальная эстетикаки. Оставьте в покое прошлое как и батл-рэп.

Web-дизайнер отличается от дизайнера мобильных приложений степенью компетенции HR'а

Разделение на web-дизайнера и дизайнера мобильных приложений так же абсурдно, как если бы мы делили дизайнеров приложений на дизайнеров под iOS 14 и iOS 15, или дизайнеров под телефоны и отдельно дизайнеров под планшеты. Но так исторически сложилось.

На заре становления интернета нужно было отделить тех, кто знаком с технической стороной вопроса и тех, кто нет. А именно: шрифты нужно использовать системные, резолюция должна быть 72 или 96 px а не 300, как для печати, разрешение под 1024х768 и прочее, палитра не CMYC а RGB.

Никакими иными «дизайнерскими» штуками полиграфист от веб-дизайнера не отличался. А еще, в то время не было арт-директоров, которые могли бы передать быстро свой digital опыт.

То же касается и дизайнеров мобильных приложений — понимание основных принципов и знание гайдлайнов Material Design и Human IU: какие бывают системные компоненты, какие допустимы размерности, какие рекомендации по стилям задают платформодержатели.

Все это — проектировщик интерфейсов —UI-специалист. И ему все равно какой интерфейс проектировать — для web'а, для iOS, для планшета, часов или Nokia на KaiOS.

Брендинг с Андреем Кожановым

Насмотренность

Проблема тестовых заданий — отсутствие объективной оценки

Суть тестового задания — определить уровень скила у исполнителей. Сегодня для этого есть 1000 иных возможностей — портфолио, блог, кейсы, онлайн интервью и т.д.

Если работодатель не способен оценить исполнителя по уже наработанному материалу — он вряд ли объективно оценит и по тестовому.

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

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

А если арт-дир не может оценить человека по портфолио — говно он, а не директор и нужно понижать до штатного дизайнера.

Кроме боли и ненависти к рекрутерам и потенциальному работодателю, тестовые никакой полезной нагрузки не несут. А еще вызывают отторжение Бренда и его продукции.

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

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

А для этого достаточно посмотреть просто её портфолио, ролик и прособеседовать.

Творчество требует праздности