@egrch ещё указывает, что сам термин «регистр» не так прост: в отечественной типографике для обозначения ящика с разделителями параллельно существовало слово «касса», но во время компьютеризации заменилось «регистром» – то ли из-за сильной финансовой коннотации «кассы», то ли из-за волны заимствований англоязычных терминов, связанной с разрывом преемственности между традиционными типографиями и цифровыми.
Транспортная микро-схема
Есть строящийся микрорайон, в котором уже живёт тыщи четыре человек, и у которого есть неприятная слава находящегося в транспортной недоступности: мол, ни троллейбусов, ни автобусов. Это нехорошо сказывается на продажах, поэтому мы разработали схему общественного транспорта, на которой показали, что в принципе уехать можно и из самого микрорайона, а если пройти метров 400 – то появляется совсем нормальный ассортимент маршрутов. Плакат размещён на остановке в микрорайоне.
Делать схемы сложно. Нужно обработать много информации, отсечь несущественное (на каких-то этапах маршруты были отрисованы почти на всю свою длину, и подробности собственно перехода между двумя остановками просто терялись) и аккуратно всё сверстать по формату.
Кажется, тут получилось.
#сделал
Есть строящийся микрорайон, в котором уже живёт тыщи четыре человек, и у которого есть неприятная слава находящегося в транспортной недоступности: мол, ни троллейбусов, ни автобусов. Это нехорошо сказывается на продажах, поэтому мы разработали схему общественного транспорта, на которой показали, что в принципе уехать можно и из самого микрорайона, а если пройти метров 400 – то появляется совсем нормальный ассортимент маршрутов. Плакат размещён на остановке в микрорайоне.
Делать схемы сложно. Нужно обработать много информации, отсечь несущественное (на каких-то этапах маршруты были отрисованы почти на всю свою длину, и подробности собственно перехода между двумя остановками просто терялись) и аккуратно всё сверстать по формату.
Кажется, тут получилось.
#сделал
Обработка ошибок
Каждый раз, когда в приложении или на сайте вы видите сообщение «ой, что-то пошло не так» – знайте, что что-то пошло не так не у вас и не у программы, а у команды разработки: кто-то промял этап тестирования.
Главная проблема этих ситуаций – я, как пользователь, не понимаю, что мне делать дальше. «Ой, что-то пошло не так». И?
Я ожидаю, что люди, которые понимают архитектуру приложения, укажут мне, где ошибка и как мне с ней быть. Например: «Ваша сессия истекла, нажмите на эту кнопку, чтобы перезайти». Или на 404-й: «Мы забыли поменять адрес, на который вы хотели перейти, извините. Вот карта сайта, покажите, куда вам было нужно». Мою проблему хотя бы попытались решить.
Казалось бы – пусть разрабы разбираются, где у них там ошибки происходят. Но разработчики решают проблемы архитектуры и абстрактные задачи по обработке данных. О пользователе они думать не обязаны – это работа дизайнера.
Каждый раз, когда в приложении или на сайте вы видите сообщение «ой, что-то пошло не так» – знайте, что что-то пошло не так не у вас и не у программы, а у команды разработки: кто-то промял этап тестирования.
Главная проблема этих ситуаций – я, как пользователь, не понимаю, что мне делать дальше. «Ой, что-то пошло не так». И?
Я ожидаю, что люди, которые понимают архитектуру приложения, укажут мне, где ошибка и как мне с ней быть. Например: «Ваша сессия истекла, нажмите на эту кнопку, чтобы перезайти». Или на 404-й: «Мы забыли поменять адрес, на который вы хотели перейти, извините. Вот карта сайта, покажите, куда вам было нужно». Мою проблему хотя бы попытались решить.
Казалось бы – пусть разрабы разбираются, где у них там ошибки происходят. Но разработчики решают проблемы архитектуры и абстрактные задачи по обработке данных. О пользователе они думать не обязаны – это работа дизайнера.
А ещё встречаются сообщения об ошибках вроде «Упси, такой страницы не существует» или «Хьюстон, у нас проблемы» – чтобы перевести неловкость в шутку и разрядить ситуацию. Но, как и любая шутка, этот приём кажется смешным только в первый раз. А когда эти шоты с дриббла уже пять лет растекаются по всему интернету, это начинает бесить, как батины кулстори.
Тут низапне выяснилось, что на днях исполнилось пять лет одной из самых драйвовых моих работ – логотипу для тату-студии Black Ring.
#сделал
#сделал
Сам по себе логотип, возразите вы, не выглядит драйвовым. Но был ещё логобук. Сейчас бы его назвали пост-ироничным, а тогда ещё и слов-то таких не было.
Тон для него задало требование заказчика написать на визитках «Бью татухи. Мне всё похуй».
Я так же по-хулигански и с изрядным апломбом описал ключевые правила использования логотипа.
Смотрите сами, ссылка ниже. Там есть опечатки, но я принципиально исправлять ничего не буду :)
Один из описанных там принципов, кажется, я позже открыл для себя заново: полные, «парадные» версии логотипов стоит использовать, когда они являются основной коммуникацией: на визитках и вывесках, например.
В целом эта работа помогла мне сделать шаг в сторону не просто делания-что-просят, а решения глубже лежащих проблем заказчика. Меня попросили сделать логотип, но ребятам на самом деле нужно было идентифицировать себя в визитках и в соцсетях. Поэтому я подготовил материалы и руководство по их использованию для того, чтобы фоточки со штампиками выглядели как задумано, а не как у записываемсянаноготочков.
Тон для него задало требование заказчика написать на визитках «Бью татухи. Мне всё похуй».
Я так же по-хулигански и с изрядным апломбом описал ключевые правила использования логотипа.
Смотрите сами, ссылка ниже. Там есть опечатки, но я принципиально исправлять ничего не буду :)
Один из описанных там принципов, кажется, я позже открыл для себя заново: полные, «парадные» версии логотипов стоит использовать, когда они являются основной коммуникацией: на визитках и вывесках, например.
В целом эта работа помогла мне сделать шаг в сторону не просто делания-что-просят, а решения глубже лежащих проблем заказчика. Меня попросили сделать логотип, но ребятам на самом деле нужно было идентифицировать себя в визитках и в соцсетях. Поэтому я подготовил материалы и руководство по их использованию для того, чтобы фоточки со штампиками выглядели как задумано, а не как у записываемсянаноготочков.
UI и UX
Под UI/UX многие понимают что-то абстрактное, а некоторые и вовсе просто приписывают эти магические буквы к слову «дизайнер» на хедхантере и сразу умножают сумму желаемой зарплаты на 2. Отвечая на вопрос на Яндекс Знатоках, попытался разобраться, что я сам вкладываю в эти понятия.
UI – user interface, пользовательский интерфейс.
В широком смысле это совокупность способов передачи информации между пользователем и системой (ввод и вывод). В узком, современном понимании – это графический интерфейс приложений с элементами управления.
UX – user experience, пользовательский опыт, опыт взаимодействия.
Это восприятие и ответные действия пользователя в процессе использования системы. В более прикладном смысле UX определяет, какие задачи сможет решать пользователь с помощью приложения и какими способами он сможет достичь их решения.
Таким образом, можно сказать, UX определяет все механики работы приложения (динамическая, «отзывчивая» часть), а UI представляет собой органы управления этими механиками (статическая, «оформительская» часть).
Под UI/UX многие понимают что-то абстрактное, а некоторые и вовсе просто приписывают эти магические буквы к слову «дизайнер» на хедхантере и сразу умножают сумму желаемой зарплаты на 2. Отвечая на вопрос на Яндекс Знатоках, попытался разобраться, что я сам вкладываю в эти понятия.
UI – user interface, пользовательский интерфейс.
В широком смысле это совокупность способов передачи информации между пользователем и системой (ввод и вывод). В узком, современном понимании – это графический интерфейс приложений с элементами управления.
UX – user experience, пользовательский опыт, опыт взаимодействия.
Это восприятие и ответные действия пользователя в процессе использования системы. В более прикладном смысле UX определяет, какие задачи сможет решать пользователь с помощью приложения и какими способами он сможет достичь их решения.
Таким образом, можно сказать, UX определяет все механики работы приложения (динамическая, «отзывчивая» часть), а UI представляет собой органы управления этими механиками (статическая, «оформительская» часть).
Яндекс
«Насколько важно UI / UX в разработке пользовательских мобильных приложений?» – Яндекс.Знатоки
18 августа 2019 Константин Щербина ответил: Нужно спрашивать не насколько это важно, а почему без этого не обходится любое проектирование интерфейса.
Проектирование мобильного приложения — это уже процесс UX, а придумывание, как оно будет выглядит — UI.…
Проектирование мобильного приложения — это уже процесс UX, а придумывание, как оно будет выглядит — UI.…
Вертикальная адаптивность
Когда заходит речь об адаптивной вёрстке, все обычно говорят о ширине экрана, но часто забывают про высоту. Или ещё хуже – помнят, но исходят из размеров экрана, а не вьюпорта.
В итоге получается так, что захожу я с ноутбука с экраном 1366×768 на сайт молодёжного фестиваля и у меня абзац текста в духе модной КРУПНОЙ ТИПОГРАФИКИ не влезает целиком на экран, а подпись в слайдере вообще режется своим фреймом.
Когда заходит речь об адаптивной вёрстке, все обычно говорят о ширине экрана, но часто забывают про высоту. Или ещё хуже – помнят, но исходят из размеров экрана, а не вьюпорта.
В итоге получается так, что захожу я с ноутбука с экраном 1366×768 на сайт молодёжного фестиваля и у меня абзац текста в духе модной КРУПНОЙ ТИПОГРАФИКИ не влезает целиком на экран, а подпись в слайдере вообще режется своим фреймом.
А самое интересное – что этот дизайн-паттерн поощряется самим софтом для разработки интерфейсов. И фотошоп, и иллюстратор, и фигма, и скетч – все предлагают не браузерные, а «экранные» разрешения, никто даже не напоминает о том, что «эй, ребят, не забудьте, что там ещё браузер и ОС отожрут 200 пикселей, не надо дизайнить десктоп в 16:9».
Не поддавайтесь: дизайн под FullHD – это где-то 1900×800, а под ноутбук – 1340×600.
Не поддавайтесь: дизайн под FullHD – это где-то 1900×800, а под ноутбук – 1340×600.
Не шуметь
Начитавшись Дорофеева и других сенсеев эффективности, я выпилил себе все звуковые уведомления на телефоне и постоянно отстреливаю все источники всплывающих карточек и непрошенных свистопердений.
И мне кажется, что это нормально и так делают все.
Но выходя на улицу и общаясь с другими людьми, я вижу, что очень и очень многие не понимают, что внимание – такой же ценный ресурс, как, например, время или деньги.
Они получают по 180 уведомлений в час и в потоковом режиме их обрабатывают – а потом жалуются, что у них нет ни сил, ни возможности сосредоточиться на чём-то сложнее одноклеточных трудовых операций и одноклеточных же развлечений.
Шаг первый: надо отнять у приложений и сайтов возможность инициировать взаимодействие с ними. Кто-то поставил лайк твоему посту в инстаграме, кто-то подписался на тебя вконтакте, кто-то написал в канальчик в тележке – не повод для сервиса начать разговор со мной. Не заблуждайтесь: это не человек с вами пытается заговорить, это приложение тянет вас в пучину бесконечного скролла.
Цените своё внимание и концентрацию.
Шаг второй: надо делать меньше шума. Не выходите из старых чатов, не создавайте новых без нужды, не подходите к коллеге, не договорившись предварительно о разговоре. И отключите звуки на телефоне – если не для себя, то хотя бы для других.
Цените внимание и концентрацию окружающих.
Давайте, пожалуйста, не шуметь.
Начитавшись Дорофеева и других сенсеев эффективности, я выпилил себе все звуковые уведомления на телефоне и постоянно отстреливаю все источники всплывающих карточек и непрошенных свистопердений.
И мне кажется, что это нормально и так делают все.
Но выходя на улицу и общаясь с другими людьми, я вижу, что очень и очень многие не понимают, что внимание – такой же ценный ресурс, как, например, время или деньги.
Они получают по 180 уведомлений в час и в потоковом режиме их обрабатывают – а потом жалуются, что у них нет ни сил, ни возможности сосредоточиться на чём-то сложнее одноклеточных трудовых операций и одноклеточных же развлечений.
Шаг первый: надо отнять у приложений и сайтов возможность инициировать взаимодействие с ними. Кто-то поставил лайк твоему посту в инстаграме, кто-то подписался на тебя вконтакте, кто-то написал в канальчик в тележке – не повод для сервиса начать разговор со мной. Не заблуждайтесь: это не человек с вами пытается заговорить, это приложение тянет вас в пучину бесконечного скролла.
Цените своё внимание и концентрацию.
Шаг второй: надо делать меньше шума. Не выходите из старых чатов, не создавайте новых без нужды, не подходите к коллеге, не договорившись предварительно о разговоре. И отключите звуки на телефоне – если не для себя, то хотя бы для других.
Цените внимание и концентрацию окружающих.
Давайте, пожалуйста, не шуметь.
Увеличить в два раза
Дизайнер сверстал буклет с текстом размером восемь пунктов. Заказчик сказал: мелко, увеличьте текст в два раза. Дизайнер переверстал всё шрифтом в 16 пунктов. Буклет как был нечитаемым, так и остался: теперь чтобы что-то прочесть, надо отойти на полтора метра.
Почему так вышло?
Заказчик говорит про количественные характеристики: увеличить в два раза, – хотя имеет в виду качественные: сделайте, чтобы не надо было блин глаза ломать! Но неправильная формулировка требований не делает заказчика виноватым: он и не обязан представлять себе, чем восьмой кегль отличается от шестнадцатого. Заказчик подал дизайнеру на вход ошибку, а тот не отфильтровал её.
Джуниор и не обязан: до него не должно доходить коммуникационных ошибок, у него для этого есть старшие и менеджеры.
Мид чувствует, что тут что-то не так, делает одну страницу 16 кеглем и отправляет её обратно для согласования: вы точно вот этого хотите?
Старший диз ничего не переспрашивает, печатает себе на пробу макет с 8 кеглем, с 10 и 11, смотрит на них и переверстывает макет одиннадцатым, потому что он читается в два раза лучше.
Заказчик не враг: он просто не дизайнер, и выражает свои мысли как может. Понять, что он имеет в виду – часть работы дизайнера.
Дизайнер сверстал буклет с текстом размером восемь пунктов. Заказчик сказал: мелко, увеличьте текст в два раза. Дизайнер переверстал всё шрифтом в 16 пунктов. Буклет как был нечитаемым, так и остался: теперь чтобы что-то прочесть, надо отойти на полтора метра.
Почему так вышло?
Заказчик говорит про количественные характеристики: увеличить в два раза, – хотя имеет в виду качественные: сделайте, чтобы не надо было блин глаза ломать! Но неправильная формулировка требований не делает заказчика виноватым: он и не обязан представлять себе, чем восьмой кегль отличается от шестнадцатого. Заказчик подал дизайнеру на вход ошибку, а тот не отфильтровал её.
Джуниор и не обязан: до него не должно доходить коммуникационных ошибок, у него для этого есть старшие и менеджеры.
Мид чувствует, что тут что-то не так, делает одну страницу 16 кеглем и отправляет её обратно для согласования: вы точно вот этого хотите?
Старший диз ничего не переспрашивает, печатает себе на пробу макет с 8 кеглем, с 10 и 11, смотрит на них и переверстывает макет одиннадцатым, потому что он читается в два раза лучше.
Заказчик не враг: он просто не дизайнер, и выражает свои мысли как может. Понять, что он имеет в виду – часть работы дизайнера.
Отдельный человек
Только начав принимать и комментировать чужие макеты, я понял, насколько важно самому не трогать исходники. Оценивать результат должен отдельный, отвлечённый от непосредственного производства человек.
Когда не закапываешься в инструмент и не думаешь о технической реализации, видишь общую картину и можешь её корректировать, не задумываясь о том, как эти изменения будут реализованы технически.
Как только открываешь исходник и начинаешь самостоятельно в нем копаться – сразу же рискуешь стать заложником принятых технических решений. При этом чем дольше работаешь с макетом, тем сильнее симпатия к нему, каким бы ужасным он на самом деле ни был – прямо как при стокгольмском синдроме.
Если вы дизайнер и у вас есть падаваны – не доделывайте макеты за них. Во-первых, так они будут становиться самостоятельнее, а во-вторых, вы не разменяете общее видение на структуру стилей абзацев в индизайне. Но обращайте внимание, если ваши комментарии встречают большое сопротивление – возможно, со структурой макета что-то неладно, и простые правки займут неоправданно много времени. В этом случае надо смотреть, что экономически выгоднее: а) забить на правки и сдать макет как есть, б) внести правки «грязно» или в) сесть рядом и помочь навести порядок в структуре макета. Но только при третьем варианте технический долг не создаётся, а сокращается.
Если вы дизайнер и вам приходят правки – пересиливайте себя и вносите (я не говорю здесь про объективно неадекватные правки, это отдельная тема). Знакомая ситуация: смотришь макет, который сделал месяц назад, и всё там не так? Вот: со стороны реально виднее. Но если при обработке комментов чувствуется, как что-то идёт не так, что начинается перерасход рабочего времени или для внесения правок придется сильно менять макет или вообще переделывать его – сообщайте об этом наверх и решайте проблему.
Для принятия макетов нужен отдельный человек, потому что в клинче с макетом общая картина выходит из поля зрения.
Только начав принимать и комментировать чужие макеты, я понял, насколько важно самому не трогать исходники. Оценивать результат должен отдельный, отвлечённый от непосредственного производства человек.
Когда не закапываешься в инструмент и не думаешь о технической реализации, видишь общую картину и можешь её корректировать, не задумываясь о том, как эти изменения будут реализованы технически.
Как только открываешь исходник и начинаешь самостоятельно в нем копаться – сразу же рискуешь стать заложником принятых технических решений. При этом чем дольше работаешь с макетом, тем сильнее симпатия к нему, каким бы ужасным он на самом деле ни был – прямо как при стокгольмском синдроме.
Если вы дизайнер и у вас есть падаваны – не доделывайте макеты за них. Во-первых, так они будут становиться самостоятельнее, а во-вторых, вы не разменяете общее видение на структуру стилей абзацев в индизайне. Но обращайте внимание, если ваши комментарии встречают большое сопротивление – возможно, со структурой макета что-то неладно, и простые правки займут неоправданно много времени. В этом случае надо смотреть, что экономически выгоднее: а) забить на правки и сдать макет как есть, б) внести правки «грязно» или в) сесть рядом и помочь навести порядок в структуре макета. Но только при третьем варианте технический долг не создаётся, а сокращается.
Если вы дизайнер и вам приходят правки – пересиливайте себя и вносите (я не говорю здесь про объективно неадекватные правки, это отдельная тема). Знакомая ситуация: смотришь макет, который сделал месяц назад, и всё там не так? Вот: со стороны реально виднее. Но если при обработке комментов чувствуется, как что-то идёт не так, что начинается перерасход рабочего времени или для внесения правок придется сильно менять макет или вообще переделывать его – сообщайте об этом наверх и решайте проблему.
Для принятия макетов нужен отдельный человек, потому что в клинче с макетом общая картина выходит из поля зрения.
Перечитал предыдущий пост и обратил внимание, что у меня смешались обращения на «ты» и на «вы». Начал править – но всё не так становится сразу. Начал разбираться, выяснил: обращаюсь к читателю я на «вы», а всякие там «видишь, открываешь» – это повествование во втором лице, как будто я встаю на место читателя. И тут уже уместно обращение на «ты»: к себе же никто на «вы» не обращается.
Во как.
Во как.
Файловый хостинг на Dropbox
В небольших проектах на Тильде или Редимаге, когда нет возможности залить файлы на сервер и получить прямую ссылку, можно использовать в качестве хостинга дропбокс. Для того, чтобы он отправил по запросу чистый файл, а не пользовательский html-интерфейс, в конце ссылки надо дописать
UPD
В чате Ne_znal_talk подсказали, что для достижения такого же результата можно ещё заменить в адресе ссылки домен с
В небольших проектах на Тильде или Редимаге, когда нет возможности залить файлы на сервер и получить прямую ссылку, можно использовать в качестве хостинга дропбокс. Для того, чтобы он отправил по запросу чистый файл, а не пользовательский html-интерфейс, в конце ссылки надо дописать
?raw=1. Например:https://www.dropbox.com/s/sltez4uqjv1bdqx/TicksAndTrips-03.jpg?raw=1
Так можно обойти ограничения по размеру изображений (Тильда, например, режет всё до 1680px) или вставить видео безо всяких ютьюбовских/вимеовских обёрток/сжатий.UPD
В чате Ne_znal_talk подсказали, что для достижения такого же результата можно ещё заменить в адресе ссылки домен с
www.dropbox.com на dl.dropboxusercontent.com – и ничего в конце не дописывать:https://dl.dropboxusercontent.com/s/sltez4uqjv1bdqx/TicksAndTrips-03.jpgBetter web typography
Перевёл замечательную памятку Матежа Латина (Matej Latin), создателя сайта betterwebtype.com и автора книги Better Web Typography For Better Web.
В ней собраны все основы работы со шрифтами, базовые понятия типографики и правила набора, описаны самые часто используемые фичи OpenType.
При переводе расширены некоторые пункты, добавлены иллюстрации к классификации шрифтов и локализованы региональные особенности набора. Все изменения и публикация одобрены автором.
Качайте, печатайте, держите под рукой :)
UPD
Памятка обновлена и теперь содержит актуальный набор настроек типографики из фигмы.
Перевёл замечательную памятку Матежа Латина (Matej Latin), создателя сайта betterwebtype.com и автора книги Better Web Typography For Better Web.
В ней собраны все основы работы со шрифтами, базовые понятия типографики и правила набора, описаны самые часто используемые фичи OpenType.
При переводе расширены некоторые пункты, добавлены иллюстрации к классификации шрифтов и локализованы региональные особенности набора. Все изменения и публикация одобрены автором.
Качайте, печатайте, держите под рукой :)
UPD
Памятка обновлена и теперь содержит актуальный набор настроек типографики из фигмы.
Dropbox
[RU] BetterWebTypeCheatsheet.pdf
Shared with Dropbox
Фигма переработала и расширила инструментарий работы с типографикой! Поиграть с новыми опциями можно по ссылке: https://www.figma.com/file/I7aquUJskPWwudWatNjfkC/Figma-OpenType-playground/duplicate
UPD
Памятка обновлена. Теперь она рассказывет об актуальных настройках шрифтов в фигме.
UPD
Памятка обновлена. Теперь она рассказывет об актуальных настройках шрифтов в фигме.
Вычисление оптимального DPI
Когда-то давно наткнулся на такую формулу для определения разрешения растровых макетов:
Несколько дней назад задался вопросом, откуда взялось 180 – и решил посчитать. Что там сложного – базовая тригонометрия, да пропорцию решить. Остроту зрения я помнил из «Занимательной Геометрии» Перельмана, тангенс одной угловой минуты я посчитал... а дальше аж теорема про дискретизацию аналоговых сигналов вылезла. В общем, если кому-то интересно, почему там именно 180 – читайте на Оди :)
Когда-то давно наткнулся на такую формулу для определения разрешения растровых макетов:
dpi = 180/D
где D – минимальное расстояние в метрах, на котором будет рассматриваться готовый материал.Несколько дней назад задался вопросом, откуда взялось 180 – и решил посчитать. Что там сложного – базовая тригонометрия, да пропорцию решить. Остроту зрения я помнил из «Занимательной Геометрии» Перельмана, тангенс одной угловой минуты я посчитал... а дальше аж теорема про дискретизацию аналоговых сигналов вылезла. В общем, если кому-то интересно, почему там именно 180 – читайте на Оди :)