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

дизайн

Ctrl + ↑ Позднее
16 сентября 2011, 1:38

Табы, вкладки, адрес, поиск

Грубо говоря, вот как устроены табы, вкладки, адресная строка и поиск в нынешних браузерах.

Хром, молодец:
Табы и вкладки в Хроме

Фаерфокс и Опера, заголовку сайта отведена куча места, адрес и поиск разделены:
Табы и вкладки в Фаерфоксе

Сафари, табы визуально переключают верхнюю панель, а не сайты, плюсик «новая вкладка» убежал от самих вкладок, грехи ФФ и Оперы:
Табы и вкладки в Сафари

ИЕ, табы — ни пришей ни пристегни, толстый поребрик, но зато поиск с адресом живут в одном омнибоксе:
Табы и вкладки в Эксплорере
vs.браузерыдизайн
31 июля 2011, 0:45

Аква-кнопки и ещё

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

Чуваки, которые так делают, вы почему это делаете? Потому что не знаете, как выглядят элементы интерфейса на Маке и думаете, что это дизайнер такую спец. кнопочку изобрёл? Или вам кажется, что этой красотой надо поделиться и с пользователями Виндоус Экспи? Или вас кто-то заставляет?

Зря скруглённые поля
Зря скруглённые поля

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

Аква-кнопки и ещё
ИЕ 6, Виндоус Экспи

Аква-кнопки и ещё
Опера 9.64, ФриБСД 7.0

Аква-кнопки и ещё
Сафари 5.1, Мак ОС Лев

Спасибо, Капитан Очевидность

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

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

С «Боровичами-мебелью» же шанс не собрать очень высокий. Вот так я сегодня скручивал обычный стол:
Сборка стола «Боровичи-мебель»

Вместо привычного мебельного шестигранника или крестовой отвёртки, тут пришлось работать гаечным ключом на 13. Во-первых, это очень не удобно в углу орудовать таким ключом, для него нужна возможность делать 360- или хотя бы 180-градусный поворот. А во-вторых, чтобы я делал если бы у меня не нашлось гаечного ключа в сарае?
Если вы не холите и не лелеете привычки пользователя, вы — плохонький дизайнер. Однажды вы сделаете какашку, вроде этих:
Календарь в Сбербанке
Где какой день недели понять невозможно

Русская раскладка Гармина
Попробуйте мысленно набрать «Ленинский проспект» на этой раскладке
Смотрите, красота какая:
Пиктограммы советского магнитофона

В импортных кассетниках всё было не так: раз, два.

В комментариях предлагаю угадывать смысл иконок тем, кто забыл.
дизайнСССР
14 июля 2011, 22:52

Тюнинг Эгеи

Валера написал, как он зафигачил свой дизайн для Эгеи. Я вслед за ним тоже решил что-нибудь поменять, кроме цвета шрифтов и плашечек.

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

P. S. Каскадность в шаблонах Эгеи — всё, чего нет в твоей теме, берётся из родительской — очень клёвая штука.
P. S. S. Непонятно только, почему файлы движка в кодировке windows-1251, а не UTF-8.


Добавлено через 2 часа: Ну и самое главное — в рамках операции «чтоб не как у Бирмана» левый сайдбар стал правым.
e2дизайн
Мне часто приходится встречать и провожать гостей на Окуловском вокзале. Чуть реже я сажусь на поезд сам. Окуловка в получасе езды от Боровичей и очень удобна тем, что находится на железной дороге Москва—Питер. Из Окуловки можно уехать куда угодно, тут даже один из Сапсанов делает остановку.

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

Если бы были табло, показывающие место остановки каждого вагона, таких проблем бы не было. Время стоянки виртуально увеличивалось бы.
Номера вагонов в Окуловке

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

Правда, нужно признать, что такой функционал не нужен на большинстве вокзалов, так как поезда стоят там дольше 1-й минуты, и функцию таких табло прекрасно заменяют трафареты за стёклами вагонов.
20 июня 2011, 15:28

Про кредиты

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

Попробовал сделать визуализацию идеи (визуализаторы, покритикуйте, пожалуйста):

Про кредиты
В роли чего-то камешек, нарисованый Валерой Поповым, для теста Инвесткафе
деньгидизайнидеи
Артемий Лебедев написал в Ководстве:
В экранных интерфейсах любые элементы управления не должны быть по площади меньше площади курсора (16×16 пикселей).
Главное правило экранных интерфейсов в вёрстке
Я не знаю, главное ли это правило, но мне оно нравится, и я хочу рассказать, как недавно его применил в своей вёрстке.

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

Размер точки — 6×6 пикселей. Явное нарушение правила! Но предположим, что дизайнер решил использовать эти точечки только для индикации, поэтому греха за ним, предположительно, нет. Я же подумал, а почему бы не сделать точки тыкабельными. И сделал. Но пока тестировал их, меня не оставляло чувство дискомфорта от прицеливания курсора к таким мелким элементам. И тут я вспомнил о ледебевском правиле.

Конечно, увеличить диаметр точки до 16 пикселей я не мог, но изменить внутренние поля мне никто не мешал:


После такой нехитрой манипуляции пользоваться точками стало удобно и приятно. Чтобы не быть голословным я сделал небольшой пример.
15 марта 2011, 20:28

Я в Стокгольме

Тут солнечно и пиксельно.
Одна из станций метро в Стокгольме
Ctrl + ↓ Ранее