Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.

Вот случайная фотка с моего телефона — какая-то питерская табличка:

Почему она такая уродская? Потому что в ней всё выровнено по центру.

Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:

Если кроме стола есть ещё диван, то поставить их оба посередине уже будет трудно. Может, только в очень большой комнате. В вёрстке с этим чуть проще из-за того, что текст обычно имеет форму полосок. Две полоски посередине — нормально:

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

Но всё, пора остановиться. На питерской табличке по центру стоит всё, и это ад:

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

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

Или вот книжка из инстаграма «Носков поэта»:

Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.

Выравнивайте всё по левому краю:

Так форма текста уже начинает хоть чуть-чуть дружить с форматом.

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

Теперь у нас два прямоугольника.

Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:

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

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

Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.

А ещё можно так:

Задействован правый верхний угол прямоугольника. Линейки тут используются по прямому назначению — объединять, а не разделять.

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

Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:

Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:

Или кладёт контрастную плашку:

Или делает полупрозрачную плашку, но размывает фотографию под ней:

Это всё костыли: в результате хуже видно и фотку, и текст.

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

Здесь почти весь текст читается нормально без костылей (много других проблем, но сейчас не о них речь):

Здесь нормально читается всё, что выше горизонта в зоне расфокуса:

Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:

Правило: если фотография не подходит для размещения текста на ней, то размещать текст на ней не стоит. Поставьте текст под фотографией. Следствие: если вы не контролируете фотографию (скажем, её загружают пользователи вашего сайта), то ставить на ней текст — плохое решение.

Читайте также секрет дизайнерских правил.

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

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

Сделайте блог на Эгее частью сайта своей компании.

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

После того, как Эгею установишь, пользователю не нужно ничего знать про серверы, базы данных и ХТМЛ. Нет даже никакой «админки» — всё управление происходит прямо на сайте. Просто тот, кому можно, видит иконки «плюсик» (добавить заметку), «карандашик» (отредактировать заметку) и ещё несколько.

Сейчас, когда я пишу эту заметку, у меня верх страницы выглядит так:

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

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

К разделу блога легко прикрутить аналитику — просто вставляете код в настройке:

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

Напишите мне, если хотите начать пользоваться, но не знаете, как начать.

Расскажите компаниям об Эгее, а мне — о компаниях, которым она, на ваш взгляд, будет полезна.

У некоторых людей есть личная и рабочая почта. Ты им пишешь письмо, а они говорят: «Что-то мне не приходит. Может, ты на рабочую скинул?» Может и на рабочую, чувак. Сходи на работу да проверь. Вот мне делать больше нехрен, как в сложностях твоей жизни разбираться.

Но многие так живут и даже не замечают всего абсурда этой ситуации.

Продолжаю учить вас пользоваться вашими компьютерами.

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

Запускаете программу Keychain Access и находите в ней нужную сеть:

Кликаете два раза, чтобы открыть такое окошко:

Включаете чекбокс Show password (у вас спросят администраторский пароль от компьютера), и смотрите пароль:

На здоровье.

Вот интересно. Есть всякие торгово-развлекательные комплексы, которые называют себя ТРК. ТРК «Радуга», ТРК «Кольцо». Но потом среди ТРК появляется ТРЦ. Это значит не комплекс, а центр. А потом ТДК. Ты начинаешь думать, что это? Торгово-деловой комплекс? Или, наверное, торгово-досуговый?

При этом каждый из таких ХЗК считает, что его аббревиатура не нуждается в расшифровке. Вот КРК «Уралец»:

Это какой комплекс? Конно-развлекательный? Кино-развлекательный? Концертно-развлекательный? Я не знаю, но забавно, что это не имеет никакого значения, просто есть такой привычный формат «три любые буквы плюс название».

Например:

У меня даже нет предположений насчёт ККТ. Какой-то комплекс такой. Ясно же, что имеется в виду место проведения мероприятий (МПМ) «Космос».

Иногда контекст помогает придумать, что значат буквы:

Мозг как-то сразу придумывает «детский оздоровительный лагерь».

И вот, с одной стороны, очевидна бессмысленность и бесчеловечность этих аббревиатур, а с другой неясно, что без них делать. Нельзя же написать просто «Солнышко». Что солнышко? А если написано ОЦК «Солнышко», то уже нормально.

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

Лапшичник поднимает палец вверх и убегает куда-то со словами «(Что-то) ахат!». Ахат — это «одна», а что он сказал перед этим? Одну минуту, одну секунду, один момент? Или, может, спросил, одну ли мне порцию?

Возвращается, я у него спрашиваю, что он там сказал. Он отвечает:
— Шния ахат. One second.

Ух ты. Шней — это «два», шнайм — «две», шани — «второй». А шния — это «секунда»! А вдруг это однокоренные слова? Second в английском — это тоже и второй, и секунда.

И вот на следующий день знакомая везёт меня в аэропорт, я делюсь с ней наблюдением и спрашиваю, как думаешь, эти слова как-нибудь связаны? И тут выясняется, что шния — это «вторая» (сорян, такого слова я до этого не знал). То есть слова не просто похожи, а «секунда» и «вторая» — это ровно одно и то же слово, то есть прямо как в английском.

Ну не кайф ли?

А в венгерском секунда — másodperc, а вторая — második.

Ещё про спонтанное изучение языков:

• Как выучить иврит
• Финский и венгерский
• Шведское чтение
• Как я узнал, что domenica — это воскресенье

Сделал дизайн знака о штрафе за парковку на газонах Москвы:

Графдизайнер Серёга Чикин помог с травушкой и айфончиком.

Началось с того, что ко мне пришёл Максим Кац и сказал, что есть риск, что кругом понаставят такое:

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

В одном месте уже успели поставить адский знак по макету с картинки выше:

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

Поэтому на новом знаке мы нарисовали айфончик вместо фотокамеры с дорожных знаков.

Я очень люблю гостовский шрифт русских дорожных знаков и грущу, что на многих знаках в Москве вместо него используют Ариал. У букв есть некая приятная корявость. Для этого знака мне пришлось из разных огрызков собрать нужные буквы и цифры, в том числе из заброшенной оцифровки Александра Сапожникова. Почти всё пришлось допиливать — спасибо Ане Даниловой за советы. Гостовские кратки у „й“ я не смог терпеть и нарисовал другие.

Депутат Настя Брюханова убедила совет депутатов Щукина официально принять этот знак, и сегодня его утвердили. Скоро он начнёт появляться в щукинских дворах. Будет как-то так:

Мы призываем и другие районы использовать этот знак — на его странице можно скачать ПДФ. Макет знака без изменений можно свободно использовать во всех дворах Москвы — пишите.

Я пил кофе в Берлине в трёх местах: в Барне и двух Бонанзах (см. также кофейные места).

Это «Барн» (Auguststraße 58):

Эспрессо, флетвайт и капучино (моё только посередине):

Сахарница и сахар (рука не моя):

Это «Бонанза» у Мауэрпарка (Oderberger Straße 35). Офигенная вывеска:

Внутри:

Флетвайт и вода:

Это «Бонанза», спрятанная во дворах Фридрихсхайна (Adalbertstraße 70):

Крутое здание и столы во дворе. Тут у них центральный офис и обжарка. Внутри (меню на зеркале):

Миндальная штука, вода и флетвайт:

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

А это не кофе, а врэп и смузи в веганской кафешке «Гудис» (Warschauer Str. 69):

Фотографии из поездки в мае 2016.

Ещё Берлин:

• Уличные таблички
• Магазин «Планета Модулор»
• Названия на станциях метро Берлина
• Рассказы в «Мире»

В Сейви 1.3 мы добавили фичу с отображением беджа с количеством неразобранных аудиозаписей:

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

Это длинная скучная заметка.

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

Мы уже просим два разрешения при первом запуске: микрофон и распознавание речи (это разные вещи, к сожалению). Перед тем, как спрашивать, мы показываем такой экран::

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

Распознавание речи:

Заметьте, что тут мы ещё можем добавить отсебятины в текст, чтобы лучше объяснить, почему это окно появилось.

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

И тогда что дальше, если человек нажмёт Don’t Allow? Разрешения можно спросить только один раз.

Если человек откажет нам в микрофоне или распознавании речи, то всё просто — без них мы вообще не можем ничего делать, поэтому показываем такую заглушку:

Но с беджем мы так сделать не можем, потому что бедж необязателен. Кому-то нужен, кому-то нет. Так что если человек нажмёт Don’t Allow, нам надо будет где-то объяснить, как включить его позже. А у нас ни эбаута нет, ни настройки.

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

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

Так тоже не вышло. Оказалось, что нельзя добавить пункт Notifications в список разрешений приложения, не спросив разрешения сперва. То есть даже чтобы получить ответ «Нет», нужно спросить разрешения! Бесит ещё, что сам текст окна начинается со слов «Sayve Would Like to Send You Notifications», не соответствующих действительности:

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

Но на это всё мы не можем влиять — вопросы задаёт Ай-ОС, а не мы.

Поэтому мы добавили в правый верхний угол иконочку:

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

Это, конечно, снова не сработало. Что если пользователь откажется уже в первом окне? Нам придётся не показывать второе, а тогда мы не сможем добавить саму возможность включить уведомления, как я уже объяснял выше. Выходит, нам нельзя спрашивать, хочет ли человек бедж, а нужно просто сказать, мол, «сейчас система спросит про уведомления, а ты ответь, не хочешь ли ты бедж» (жесть).

В итоге в вышедшей недавно 1.3 если нажать в правый верхний угол, вы увидите такое:

И когда вы нажмёте «OK» (мы его ещё и написали неправильно), тогда уже вы увидите системный диалог про уведомления.

Уже после релиза мы поняли, что лучше было написать что-то вроде Continue вместо «OK», а то кажется, будто мы вынуждаем человека согласиться.

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

Мы — это я и разработчик Сейви — Михаил Рубанов.

Кнопка:

Скачать в Апсторе