Уличная типографика теней

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

DAKU типографика

“The work is changing, the wall is changing. Everything around us is changing constantly. That’s the law of the universe”

DAKU

DAKU

В тарелке — рецепты вкусных блюд

В тарелке

Помидоры с кинзой

Я наконец запустил собственный кулинарный проект: vtarelke.ru

Идея сайта зародилась в те далёкие времена, когда появился vkontakte и были модными домены на букву «v». Готовить я люблю и делаю это достаточно часто. Некоторые даже говорят, что достаточно неплохо. Хотелось записать и сохранить домашние рецепты для детей и внуков в одном месте. Чтобы не искать случайные записи в старом блокноте или не звонить маме, а достать телефон и быстро вспомнить сколько ложек муки класть в блинчики.

Втарелке

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

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

Втарелке Втарелке

Работа в портфолио:
http://sadesign.ru/portfolio/vtarelke/

Добавляйтесь в соцсетях, где вам удобно следить за новыми рецептами:
instagram.com/vtarelke/
vk.com/vtarelkeru
facebook.com/vtarelkeru
twitter.com/vtarelkeru

Мобильная версия ★ unicode-table.com на всех прилавках страны

Почему нужна мобильная версия

В последнее время Google всё настойчивей стал присылать уведомления: 

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

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

Стали выбирать решение:

  1. Мобильное приложение;
  2. Отдельная мобильная версия на поддомене;
  3. Адаптивная вёрстка, подстраивающаяся под разрешение любого устройства.

Создавать мобильное приложение дорого и долго. А, главное, никак не решает проблему отсутствия мобильной версии сайта (а следовательно, низких показателей в поиске). Третий вариант рекомендуется Google как оптимальный.

Что делать с главной страницей

Пользоваться unicode-table.com на телефоне действительно было затруднительно. Мелко. Неудобно. Зависает. Мы решили отказаться от полной таблицы в мобильной версии. И сосредоточиться на удобном поиске. Функционал мобильной версии получался другим, поэтому адаптив бы нас не спас и мы сделали отдельный сайт на поддомене.

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

Главная страница unicode-table в телефонеМобильная версия unicode-table.com

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

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

  1. Лого (для идентификации ресурса и возможности перейти на главную);
  2. Поле поиска. От кнопки «Найти» решено было отказаться;
  3. Основное меню в виде иконки гамбургера.

Технические моменты

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

Первая проблема с которой мы столкнулись на айфоне — никак получалось выделить ячейку с нужным символом. При удержании пальца на экране, выделение работало как угодно, только не так как нужно. Чаще всего выделялся целый блок (родительский <div>), а иногда произвольный набор символов. И лишь изредка выделялся тот самый, в который жмёшь. Помучившись несколько дней и попробовав разные варианты вёрстки вплоть до табличной, мы вспомнили, как работает выделение на сайтах с большими текстами: телефон стремится выделить абзац. Так родилось решение — заключить каждый символ в отдельный тег <p>. Телефон стал думать, что каждый символ — это самодостаточный абзац и выделять только его.

Выделение на телефонеВыделение на айфоне

Во-вторых, нужно было как-то объяснить Google, что m.unicode-table.com — это не новый сайт на поддомене, а всего лишь мобильная версия уже существующего сайта. Чтобы Google склеил новые мобильные страницы с уже существующими. Решение обнаружилось в справке Google.Developers

На обычной странице (http://www.example.com/page-1) нужно добавить следующий код:
<br />
&lt;link rel=&quot;alternate&quot; media=&quot;only screen and (max-width: 640px)&quot;<br />
      href=&quot;http://m.example.com/page-1&quot; &gt;<br />
а на странице для мобильных устройств (http://m.example.com/page-1) такие атрибуты:
<br />
&lt;link rel=&quot;canonical&quot; href=&quot;http://www.example.com/page-1&quot; &gt;<br />

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

При первом заходе на сайт с мобильного устройства, пользователь переадресуется на мобильную версию. Если после этого он возвращается по ссылке «Перейти к полной версии», это запоминается и автоматический переход больше не происходит. Определение устройства производится с помощью HTTP-заголовка User-Agent. Примеры определения устройства по этому заголовку для разных языков программирования можно увидеть на сайте: http://detectmobilebrowsers.com/

У нас получился отдельный домен для основной версии сайта, отдельный для мобильной версии и ещё один для статических файлов, таких как CSS и JS. Из-за политики безопасности браузеров это может нести некоторые проблемы, когда, например, не отображаются некоторые шрифты, подключаемые с соседнего поддомена. Это решается с помощью специального HTTP-заголовка, в котором перечисляются «доверяемые» домены:
Access-Control-Allow-Origin: http://one.example.com, http://two.example.comp

Почему unicode-table.com лучше, чем стандартные символьные клавиатуры на телефоне

1. Стандартные клавиатуры есть не у всех. На айфонах они появились только с iOS версии 8.3.
2. В стандартные клавиатуры входят только значки Emoji. А у нас в поиске все 70 000 символов.
3. UT — это отечественный продукт. Не содержит красителей, консервантов и ГМО.

m.unicode-table.com

 

Про кнопки в лифте

Кнопки лифта

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

Так, мне нужна одна из этих двух кнопок →
Палочка, треугольнички смотрят на палочку →
Это означает что двери закрываются →
А мне надо, чтобы двери открывались →
Мне нужна другая кнопка...

Бац! Двери захлопнулись. Опять не успел.

А ведь всё очень просто. Нужно выкинуть кнопку закрывания дверей. Каждый, кто заходит в лифт, выбирает нужный этаж, а последний нажимает на свой этаж двойным тапом (или держит кнопку одну секунду). Двери закрываются и лифт едет.

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

Про ответственность дизайнера

Московский, 111

Московский проспект, 111. Редкое по уродливости здание в центре города, завешенное отвратительными логотипами и вывесками.

Если знакомый попросил тебя помочь с визиткой и набросать логотипчик за полчаса и бутылку пива, помни, что рано или поздно твой логотип обязательно станет вывеской. Его повесят в самом центре города, где-нибудь на главной улице. Прохожие, спеша на работу, будут морщиться при виде твоего шедевра. Туристы из Англии и Германии будут недовольно качать головами. И только бабушки в трамвае будут молча смотреть вдаль, потому что у них всё равно плохое зрение. 

Твой логотип станет лицом города, его иконой. Как Крейсер Аврора, Игорь Корнелюк и рыба корюшка. Про тебя напишут на Хабре, и малолетние гики будут ехидно высмеивать тебя в комментариях. В завершение всего, к тебе прямо домой придёт Артемий Лебедев, удалит твои аккаунты на фрилансе и бехансе и навсегда запретит заниматься дизайном. А уходя, для верности, разобьёт об стену твой макбук. 

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

MyStupidDay или чем заняться на работе

Пришёл такой Олег и говорит: надо делать бомбу для офисного планктона. Фишкинет приелись, Вконтакте уже не тот, юпорн закрыт админом, башорг в печёнках сидит. Люди в офисах скучают, засыпают. Чем заняться нормальному человеку? Сколько там ещё до конца рабочего дня? А до пятницы?

Встречайте «Мой любимый день». Даст ответы на все ваши вопросы. Сайт создан с нуля за 2 дня.

MyStupidDay —  Следи за временем

От себя только добавлю, что сайт свёрстан на html5 практически без картинок: все тенюшки и градиенты сделаны на css. А если вы их не видите, то удалите ваш браузер и поставьте Файрфокс. В скором будущем: переводы на все мировые языки. Возможность отслеживать, сколько дней осталось до весны, до лета, до дня рождения, до отпуска, до зарплаты... Ждём ваших идей.

Новый дизайн piter.fm

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

Новый интерфейс плейра питер.фм

Вообще гениальный сайт. Пользуюсь много лет. Если бы его не было, его обязательно стоило бы придумать.

Новый дизайн Яндекс Погоды

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

 

Как вдруг Яндекс одумался и сделал иконки цветными. Хотя всё равно они какие-то странные.

 

И чем им не нравились старые красивые иконки? Может ещё раз одумаются и всё вернут?

Как правильно писать почтовый адрес

Не все знают, как правильно писать почтовый адрес. Достаточно соблюдать несколько несложных правил:
1. Всё что отправляется внутри России, подписывается по-русски. Для международных отправлений необходимо использовать латиницу.
2. Адресат пишется в правой нижней части. Отправитель — в левой верхней части.
3. Последовательность написания адреса:
  а) Кому (ФИО, организация);
  б) Улица, дом, квартира;
  в) Город, район, область, край;
  г) Страна (если в другую страну);
  д) Индекс.

Правильное написание адреса на примере одной из последних работ — фирменного стиля интернет-магазина женских аксессуаров:

Интернет-магазин женских аксессуаров

Поимённо

И только потом, по прошествии немалого времени, начинаешь ценить какие-то этапы своей жизни, которые тогда казались совсем неважными и мимолётными. Спасибо Любе и Оле за то, что когда-то заставили меня принять участие в благотворительном проекте «поимённо».
http://sadesign.ru/portfolio/poimenno/ — страница диска «Поимённо» в моём портфолио.

Как рисовать пунктирную линию в Фотошопе

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

1. Выберите инструмент «Pencil Tool» (карандаш).

2. Откройте палитру кистей (F5). Выберите пункт «Brush Tip Shape» (форма кончика кисти) и выберите размер 1 px.

3. Настройте интервалы для линии. «Spacing» 200%.

4. Зажимите Shift и нарисуйте горизонтальную линию — получится линия с пунктиром.

Приложения под Айфон: ФК «Зенит» и «Фонтанка.ру»

За последние две недели вышли сразу два приложения под Айфон, рассчитанные на питерскую аудиторию.

ФК Зенит

iPhone-приложение ФК «Зенит»
«Зенит», несомненно, порадовал. Выход приложения, учитывая амбиции Газпрома, давно назрел. И надо сказать, оно удалось на славу. Если зачастую такие приложения являются лишь бледной копией сайта, то испытав его в деле, можно с уверенностью сказать, что пользоваться приложением даже удобнее, чем сайтом. Всё самое нужное (составы, матчи, время трансляций, игроки, турнирная таблица) — всегда под рукой.

ФК Зенит

Фонтанка

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

Видимо, посчитав, что крутой дизайн в питерском стиле — это «оригинальные» абсолютно нечитаемые шрифты и грязный фон, «Фонтанка» решила выделиться среди прочих новостных приложений. Решительно забыв, что они делают его прежде всего для пользователей, которые будут эти самые новости читать. И счастлив тот, кто догадается зайти в Настройки и сменить шрифт (см. изображение справа), а не сразу удалит «Фонтанку» с Айфона. Впрочем, поменять шрифт для дат, изменить фон, а также как-то выровнить даты относительно заголовков, мне так и не удалось. Что ужасно раздражает.

Фонтанка.ру

Если брать новости, то отличное приложение есть, например, у «Вестей».

Символ тонкого пробела в html для разбиения разрядов чисел

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

Разделение разрядов чисел полупробелом

В интернете с этим делом казалось бы сложнее — раньше мы всегда для этих целей использовали неразрывный пробел &nbsp;. Но, как выяснилось, в html есть замечательный символ &thinsp; — тонкий пробел, решающий разом все проблемы.

10000000
10 000 000
10 000 000

upd. Может не работать в старых версиях некоторых браузеров. Но во всех последних версиях — работает, проверено.

upd2. Целая батарея различных символов пробелов (и тонких и толстых), которые есть в Юникоде. Спасибо Никите Иванову