Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Дизайн

Профессия

Принципы и методы

Как правильно

Наблюдения

Что-то там

Ворчание

Ещё теги

Интерфейс Мимика 2.0

Веб-приложения состоят из фронтенда (того, что работает у пользователя в браузере) и бэкенда (того, что происходит на сервере). Эти части разрабатывают с разной скоростью. Если при создании браузерной части сервер недоступен, разработчик обычно сильно ограничен.

Я сделал интерфейс для второй версии Мимика — инструмента веб-разработчика для имитации ответов сервера. Можно работать, как будто сервер доступен. Настроить поддельный ответ («мок») очень легко. Например, вы хотите сделать вид, что сервер ответил строчкой джейсона:

Можно настроить навороченные моки, с хитрыми ХТТП-заголовками, задержкой и чем угодно ещё:

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

Подробнее об интерфейсе — на странице проекта.

13 марта   дизайн

Поддельный интерфейс не катит

Это в первую очередь для студентов Школы стажёров, но вообще для всех.

Начинающие дизайнеры интерфейса порой рисуют подделки:

Вот что это за батарейка в ПВУ? Что за поле поиска такое невозможное? В нём всё не настоящее: размеры, углы, тень, расположение иконки и текста.

Или мишень в центре. Откуда она такая? Зачем?

Ещё и от самого телефона тень куда-то вбок падает.

Другой вариант:

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

Тут сам телефон поддельный:

Откуда с правой стороны три фигулины торчат? Неужели трудно найти фотографию Айфона и вспомнить, с какой стороны у него что? Что творится с бликами по всему периметру?

Андроид:

В Андроиде я меньше понимаю, но шрифт точно поддельный, да ещё и порендерен чуть ли не на Виндоусе с «Клиртайпом». И поиск на Андроидах выглядит не так.

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

Ещё студентам:

Что почитать на выходных — 146

Айфону 10 лет:

  1. Ten years of iPhone. Марко Армент: «I don’t expect it to be surpassed in my lifetime».
  2. The Moment of Awe. Дастин Кертис: «The moment of awe occurred when he placed his finger on the screen and flicked it upward».

А также:

  1. Кто здесь главный. Про ругань в дизайнерской среде.
  2. Why violin makers adopted the f-shaped hole.
  3. Павел Кац заказывает цветы. Интересная тема. Все же сейчас думают про разных умных чатботов. А ведь в чате могут быть просто живые люди.
  4. This Russian city says: «Don’t call us Siberia».

Спасибо спонсору рубрики — рассылке «Дизайнерский дайджест».

11 февраля   Айфон   дизайн   чтиво
17 января   видео   дизайн

Новости сайта: январь 2017

За последний месяц на моём сайте случилось два важных обновления.

Новый дизайн

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

Новости сайта — 2017

А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:

Новости сайта — 2017

Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:

Новости сайта — 2017

Туда же идут всякие подразделы с общим заголовком.

Всякие такие провязки делаются автоматически — см. как работает мой сайт.

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

Новости сайта — 2017

Картинки в рассказах о поездках, в блоге и в некоторых работах и раньше умели резиниться. Но меню всё время мешало: распирало и ломало страницу. Новое меню заставило меня прошерстить остальной сайт, поэтому теперь весь «Мир», почти весь блог и большинство проектов влезают на телефоне. Я сделал себе всяких инструментов для быстрого обеспечения влезаемости чего угодно. Некоторые страницы, конечно, выглядят не так, как выглядели бы, если бы их изначально верстали для телефона, но, по крайней мере, влезают.

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

Раздел проектов стал лучше. Раньше там проекты выводились бессмысленной матрицей, отсортированной по времени добавления. А сейчас проекты разделены на смысловые кучки:

Новости сайта — 2017

Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».

А ещё я прикрутил новые шрифты. Ну, вы видели.

Новый поиск по блогу

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

Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:

Новости сайта — 2017

Выдача поиска тоже переделалась: теперь вместо полных заметок там кусочки найденного текста и картинки пачкой, потому что по ним заметку легко узнать. Как видите по заметке «Трезор и Бергхайн», оно умеет вытаскивать и кадры видосов, и обозначать, что в заметке есть аудио.

Круче всего, когда в заметке много картинок. «Автобан германия»:

Новости сайта — 2017

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

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

5 января   веб-дизайн   дизайн   проекты   этот сайт

Что почитать на выходных — 142

Вот:

  1. We’ve updated the radios and checkboxes on GOV.UK. С ума сойти. У дизайнеров британских государственных сайтов есть блог о дизайне британских государственных сайтов.
  2. Переверстка № 14. Кейсы консалтинговой компании.
  3. Активный балласт: Для чего в гонке Vendee Globe используют качающийся киль.
  4. The 100% correct way to do CSS breakpoints.
  5. Рынок. На «Словомании» про рынок, маркет, торг, базар и ярмарку.

Спасибо спонсору рубрики — брокерской компании Нэттрэйдер. Компания открывает индивидуальные инвестиционные счета, по которым государство даёт налоговый вычет. Инвестируйте деньги в акции и облигации, а потом получайте в налоговой 13% от вложений.

Вселенная знает

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

Выражение «вселенная знает» означает, что где-то в мире уже есть необходимая информация, и нужно её взять, а не спрашивать пользователя.

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

Теорема: вселенная знает, какой оператор у какого номера. Доказательство: когда я звоню по телефону, я попадаю к нужному человеку, и никогда не нужно выбирать оператора! Вместо того, чтобы держать какую-то левую устаревающую базу соответствия номеров и операторов, нужно использовать ту же базу, которые используется при маршрутизации звонков в реальном времени.

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

Многочисленные айпадные приложения с рецептами будут намного умнее, когда смогут предложить мне блюдо с учётом того, что есть в магазине за углом (вселенная и это знает). И если я выберу блюдо, приготовление которого занимает час, а у меня через час скайп, приложение подскажет мне это и предложит похожее блюдо, которое можно успеть приготовить и съесть.

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

«Вселенная знает» в таких случаях работает как стартовый толчок для размышлений.

2016   веб-дизайн   дизайн   чтиво   шрифты

Дизайнерам: как присылать картинки

Две просьбы тем, кто шлёт мне картинки.

Во-первых, не присылайте большие картинки атачами к письму. На такие мегабайты никаких облаков не хватает. Присылайте ссылки на картинки.

Во-вторых, присылайте нормальные ссылки.

Дропбокс не катит. Дропбокс — самое плохое средство шаринга картинок в мире:

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

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

В итоге единственный способ мне просмотреть макет — нажать Даунлоад, скачать и открыть на компьютере.

Гугль-Драйв — такое же говно.

Я больше всего люблю Дроплер и пользуюсь только им. Ещё хорошо себя ведёт Кибако. В крайнем случае можно Гязу — она хоть и с рекламой, но картинку даёт увидеть.

А идеальный вариант — когда по ссылке открывается сама картинка, безо всякой обёртки вообще.

2016   дизайн   студентам
Ctrl + ↓ Ранее