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

дизайн

Электронные письма

Эрик Шпикерманн в своей книге написал очень важную мысль, которую я хочу отметить. Речь об электронных письмах:

Еще один важный момент касается кнопки «Ответить». Любая фраза, которую вы выделите в письме, автоматически повторяется в ответе. Но, даже если вы хотите процитировать больше одного предложения из письма собеседника, совсем не обязательно отправлять ему все письмо. Нажмите кнопку «Ответить», напишите сообщение под текстом, на который вы отвечаете, и удалите все ненужное. Разве друзья, с которыми вы обмениваетесь рукописными письмами, отправляют вам ответ вместе с вашим же письмом? Подумайте о получателе!

Эрику сейчас 69 лет и он понимает это! 90% людей с которыми я переписываюсь при помощи электронной почты не задумываются об этом. Это грустно.

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

А еще есть жанр с многострочными регалиями и логотипами в подписи. Если многострочную подпись пережить можно, то логотип мешается. Когда пытаешь скачать все вложения логотип тоже попадает в папку со скачанным, это бесит.

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

В догонку пост Ильи Бирмана об уродских и опрятных письмах (http://ilyabirman.ru/meanwhile/all/neat-mail/) и история Николая Товеровского о подписи в письмах Додо (http://ksoftware.livejournal.com/318907.html).

Увидели себя? Исправляйтесь.

3 мая   дизайн   котел в аду   цитата

О шрифте, Эрик Шпикерманн

Титул книги

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

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

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

28 апреля   дизайн   книга

Поиграйтесь со шрифтами

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

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

24 апреля   дизайн

С помощью дизайна, Ральф Каплан

Титул книги, фото с сайта издательства

Прочитал книжку и выписал пару цитат.

Про уменьшение неожиданности. Тех. задания, понимания задачи, прототипы, встречи, итерации. Вот это всё.

Помните, что дизайнеры — не специалисты в вашем деле. Это очень хорошо, они и не должны ими быть, у них совершенно другие задачи. Одна из наиболее частых и типичных ошибок при выборе дизайнера — доверить проектирование, например, швейной машинки человеку, который уже проектировал швейную машинку для другого клиента. Если оставить в стороне вопросы конкуренции, первым и главным критерием в выборе должен быть не прошлый опыт дизайнера, а его подход к вашей проблеме. Поинтересуйтесь у дизайнера или у представителя дизайнерского бюро, что они думают о задаче, совпадает ли то, что вы услышали, с вашим собственным видением будущего вашего продукта. При этом имейте в виду, вы услышите чисто тео­ретические рассуждения — что получится на самом деле, не известно никому. Хорошая фирма будет стараться сводить к минимуму сюрпризы в процессе работы, но что такое дизайн и вся наша жизнь без сюрпризов?

Про взаимоотношение незнакомых людей:

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

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

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

21 апреля   дизайн   книга   цитата

Закрыть эскейпом

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

6 апреля   дизайн

Перевод

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

31 марта   дизайн   цензура

Иероглифы

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

31 марта   дизайн   иероглиф

Конспект «Типографики и верстки» Артема Горбунова

Титул книги

Книга Артема Горбунова — наиболее полный справочник для дизайнеров-верстальщиков. В ней все принципы доступно объяснены и снабжены примерами. Каждый дизайнер должен прочитать эту книгу и понимать написанное там.

У «Типографики и верстки» интересный формат, она представляет собой страницу в интернете. По-сути, вся книга — высокотехнологичный лонгрид с навигацией, закладками и интерактивом. Плюс такого формата — возможность показать вещи, которые сложно показать на бумаге. К сожалению, такую книгу можно читать только с компьютера или планшета с интернетом. Еще я пробовал читать с телефона. Текст мелковат, конечно, но при желании читать можно.

Пример интерактива с сайта книги:

Чтобы время от времени освежать память не перечитывая книгу и лучше усвоить информацию я написал конспект.

Стоит купить

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

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

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

Указатель шаблонов верстки. Скриншот с сайта книги.

Основы верстки

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

Прямоугольник — наше всё: плакат, экран монитора, газета или любой другой носитель. Основной прямоугольник (формат) делится на меньшие прямоугольники (модули) и это помогает структурировать информацию. При этом не обязательно заполнять все модули. Пустота и контр­про­стран­ство тоже части верстки.

Якорные объекты — самые визуально яркие объекты. Их стоит размещать по углам, краям или в центре прямоугольника, тогда макет не развалится. Хорошая вёрст­ка исполь­зу­ет силу углов и сто­рон формата.

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

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

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

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

Базовые элементы

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

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

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

Иллюстрация заметнее заголовка, она должна быть заметна и осмысленна. Хорошая практика — обрезать с иллюстрации все лишнее и акцентироваться на важном.

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

Ссылка должна быть:

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

Подпись помогает читателю «втянуться» в основной текст. Она не обязательна, если без нее все очевидно.

Выносные линии не выделены в отдельную главу, но про них сказано много важного. Часть из этого я не знал. Процитирую полностью:

Выносные линии должны быть тонкими: не более 20% чёрного на экране или 0,25 п. на бумаге. Они не должны пересекаться между собой и должны как можно меньше пересекать изображение. Выносные линии не должны втыкаться в указываемую деталь. Не должны совпадать или идти параллельно с ближайшими линиями самой иллюстрации. Выносные линии должны иметь достаточную длину, чтобы их было легко заметить.

Модули

Текст без иллюстрации

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

Лента

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

Текст с иллюстрациями

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

Форма текста и прорядок чтения

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

Доминирующие и вспомогательные иллюстрации

Иллюстрации должны подчиняться иерархии. Главная иллюстрация «мощнее» второстепенных, у второстепенных тоже есть иерархия. Вспомогательной иллюстрации очень хорошо живется в (правой!) подмышке.

Вертикальные иллюстрации

Вертикальные иллюстрации менее естественны и их сложнее использовать в макетах, но порой динамичные фотографии динамичнее, а не которые вещи проще показывать в вертикальном формате.

Скриншот из главы «Форма текста и порядок чтения»

Страницы

С модульной сеткой

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

Без иллюстраций

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

С иллюстрациями

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

Текстовая страница

  • Основной текст занимает 60-70% ширины (на больших экранах — еще меньше) и делиться на абзацы, разделенные «пустой строкой» (это только про веб).
  • Подзаголовки должны быть, чем глубже уровень — тем невзрачней подзаголовок, использование четвертого уровня подзаголовков считается моветоном.
  • Перед списком всегда есть обобщающий текст или заголовок, но нет дополнительного отступа сверху.
  • В таблицах должно быть минимум повторов, порядок строк должен упрощать поиск, числовые значения выравниваются по разрядам и пол левому краю.
  • Ссылки — подчеркнутые и синие, при наведении цвет меняется, а посещенные ссылки «выцветают». Если это файл, то рядом нужно указать размер.
  • Иллюстрации верстают слева или по центру.

Главная страница

Дизайн главной страницы подчиняется вышеописанным принципам. Самые частые виды страниц — «лента», «плитка», «фоторама», «рубрикатор».

Ушки, цитаты, фактоиды, врезки

Цепляют взгляды и делают страницу интереснее.

Выход из прямоугольника

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

Культурные традиции

В погоне за формой нельзя опираться только на Дрибл. Автор предлагает опираться на культуру и на европейские и швейцарские традиции верстки.


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

Мой результат теста после главы «Страницы»

Ссылки

На протяжении всей книги есть ссылки на разные книги и статьи. Я выписал некоторые:

15 декабря 2016   дизайн   книга   цитата

Облик книги

Титульный лист, фото с сайта издательства

Сегодня дочитал «Облик книги» Яна Чихольда. Хорошая книжка, но поднимать ее тяжело из-за того что мне не приходилось сталкивался с металлическим набором. Все эти цицеро и шпации понятны очень слабо. В довесок я никогда не верстал книг. Но если пробуриться через все сложные моменты и уцепиться за понятное, то открывается кладезь полезных знаний. Очень рекомендую.

Книга — сборник статей, которые автор писал на протяжении жизни (он умер в 1984 году). Меня поразило, что большинство проблем, о которых говорит Чихольд актуальны до сих пор (по крайней мере в России).

Хороший пример — мнение о ляссе:

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

В сознательном возрасте я встречал ляссе только у книг двух издательств — Студии Лебедева и Манна, Иванова и Фербера. А, казалось бы, чего стоит прилепить веревку к книжке.

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

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

15 декабря 2016   дизайн   книга   цитата

Фокус с затемнением

Мне нравится как устроено фокус-состояние на сайте Эппла и Фейсбука. Во время фокуса остальной контент затемняется. Такой трюк помогает сфокусироваться на действии и, кроме этого, выглядит великолепно и легко реализуется. Возьму на вооружение.

7 июля 2016   дизайн
Ctrl + ↓ Ранее