Фигачим 7. Табличка.

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


Верстка приятная, но есть недочеты.

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

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

Сочетание зеленого и коричневого сейчас как из продуктового магазина. Рядом с таким стильным лифтом я бы делал табличку поспокойнее.

Табличку лучше повесить слева от лифта, чтобы вызывающие лифт не мешали читающим табличку.


Стрелки унаследовали форматирование этажности, хотя ею не являются.

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

Если края жпега показывают границы таблички, то много неиспользованного пространства и лишние затраты на изготовление.


Нравится, что автор постарался и придумал дополнительную пользу таблички.

Не нравится, что таблички разделены.

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

Слишком сильный контраст между кириллицей и латиницей. Лучше успокоить.

Жирные вертикали чересчур отделяют этажность и список, а они должны дружить.

Если есть инглиш в списках, то должен быть и в этажах.

Дополнительные направления должны быть на той же табличке, что и основные.


Табличка должна состоять из одной сущности.

UPD 1:

Сейчас белой пустоты много, а важная информация скучковалась в центре. Я бы рациональнее использовал пространство.

С иконками непонятно: то ли они своим положением указывают направление, то ли в Рекламном отделе туалет, комната отдыха и стенд для презентаций.

UPD 2:

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

UPD 3:

Сейчас стрелки не показывают направление, а просто уперлись каждая в свою иконку.

Этажность слишком близко расположена к блоку текста.

Смущает нарочитая центральная композиция, которая не несет никакой пользы.


Сейчас непонятно, на каком я этаже.

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

Слишком мелкий кегль.

Непонятно назначение гуглоточки.

UPD 1:

Я не понимаю, где я нахожусь. Метка и ее удаленность от тройки сбивают с толку.

Стрелки указывают на пять направлений, а к первым трем куда идти?

UPD 2:

Совместила метку с номером этажа и добавила стрелки повсеместно.
Если вы повесите табличку на фотку с лифтом, увидите баг. Подсказка: первая стрелка ведет в стену.

Метка вообще не нужна. Мы ж не на карте.

Избыточно делать по два раза → → ← ←.


Стрелки и шрифт не дружат.

Непонятно, почему часть направлений набрана капсом, часть — со строчными.

Правая выключка смотрится плохо, трудно начало строки уловить.

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


Очень сложно прочесть и понять, где что.

Такие длинные стрелки воспринимаются как разделители, а не указатели.

Смещение этажности по центру сбивает с толку. Лучше иначе дать понять «вы здесь».

Много случайных дыр в верстке. Лучше подсобрать.

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

Добавили инглиш — это гут. Переделали названия направлений — лайк.

UPD 1:

Можно попробовать все в два раза крупнее сверстать.

Следите за правилом близости. Тройка и левая колонка образуют отдельный от правой колонки блок.

UPD 2:

Уже теплее.

Давайте еще крупнее кегль набора.

В английском достаточно либо цвета, либо наклонного начертания. Сейчас шумно.

Попробуйте стрелки ближе по стилистике к шрифту этажей. Сейчас они из другой истории.

Можно сократить место, если написать «Отделы продаж и рекламы» одним пунктом. Они ж в одной стороне.

Все английские существительные пишутся с заглавной буквы.

Крупности кегля тройки недостаточно, чтобы понять, что я здесь. Ощущение, что она просто про важный этаж.

UPD 3:

Сейчас все посвящено тройке. Очен активна и перегружает пространство. Тень лишняя (грязь).

Имеет смысл деликатнее выделить и подписать «Вы здесь», например.

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

Текст крупнее еще нужно.

UPD 4:

Вот здесь очень шумно, путаешься, что к чему относится.

«Этаж» можно под цифру снести. «Вы здесь» не должно по кеглю путаться с направлениями.

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

UPD 5:

Для упражнения норм. Теперь можно сравнить первый и последний варианты.


Очень декоративная табличка. Следует успокоить душевный порыв и попробовать сверстать понятный и удобный указатель :-)

Дополнительные направления сейчас находятся на первом этаже, а должны на третьем.

«Налево» и «направо» избыточны при наличие стрелок.


Очень много шума из-за разделителей. Становится непонятно, где и что они разделяют.

Стрелки сейчас относятся к третьему этажу так же, как и ко второму, и первому.

Если цветом выделен весь третий этаж, то все его направления + стрелки должны быть выделены. Сейчас цвет стрелок и блоков текста под ними относится к первым двум этажам.

Текст мелкий, размещен в ногах.

Белым по белой стене — сомневаюсь в успехе такого решения :-)


3-й этаж получился между 1-м и 2-м.

Справа три направления выглядят как заголовок.

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

Правая флаговая выключка на темном фоне затрудняет чтение начала каждой строки. Стрелки, врезающиеся в блок текста, избыточны.

UPD 1:

...жирное начертание первых двух этажей- перебор с весом или нет?
Да, шумно выглядит.

У вас по-прежнему третий этаж между вторым и первым.

По-прежнему главные три направления выглядят как заголовок.

Нужно делать одну общую стрелку для группы направлений, чтобы не повторять.


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

«Этаж» слишком сильно прижат к цифре и спорит с ней по размеру.

Много шума и контраста в кегле, начертаниях, цвете. Стоит что-то одно выбрать.

Непонятно, на каком этаже сейчас я.


Много бесполезного черного пространства. На светлом фоне стены лучше сделать белую табличку.

Крупный кегль тройки говорит лишь, что это какой-то важный этаж. А нужно you are here.

Правая выключка смотрится неряшливо.

Кегль очень мелкий.

UPD 1:

Лучше.

Сейчас стрелки относятся к 5 пунктам, но верхние три тоже ж где-то есть.

Цифры сползли относительно верхней границы блока.

Сверху отступ до серой плашки больше, чем по бокам. Лучше одинаково.

Слишком длинная табличка, в ногах читать не ок.

UPD 2:

Все слиплось.

Если инглиш под строкой кириллицы, лучше так ставить везде.

UPD 3:

Better.

Лучше уберем серый фон, а после 3 этажа поставим тонкую полоску-разделитель.

Стрелки сейчас выглядят как пункт меню.

UPD 4:

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

Стрелки бы в 1,5—2 раза крупнее. Они сейчас мельче кегля смотрятся.

Полоса слишком активная. Легкой серой б. Расстояния от полосы до верха и низа текста должно быть одинаковым.

Нужно чуть больше полей носителю, сейчас вся инфа прижата.

Убираем синий цвет. Разницы в кегле достаточно.

Хочется большего интерлиньяжа внутри кириллицы. И отодвинуть латиницу от кириллицы еще на 1,5 этого интерлиньяжа.

UPD 5:

Там еще можно сделать 33 улучшения, но для блиц-упражнения сойдет :-)





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

Поделиться
Отправить
Запинить
7 августа   комментарии   фигачим
5 комментариев
Анатолий

Я бы еще доверстывал сто раз) Как бы вы сделали? Очень интересно!

Сергей Стеблина

Как я обычно делаю можно посмотреть на сайте студии. Например, в проекте «Навигации СБС»
https://img.artlebedev.ru/everything/sbs/navigation/sbs-navigation-elevators.jpg

Анатолий

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

Сергей Стеблина

Если дизайнер не предлагает более понятного способа указать YRH, тогда словами.

Интуитивность — самый важный параметр в работоспособности навигации, я на него всегда рассчитываю.

Оксана

Добрый день!
Подскажите, почему в вашем варианте этаж не выровнен с навигацией по нему?

Сергей Стеблина

Что имеется в виду?

Оксана

Номера этажей не выровнены с текстовой информацией. На телефоне плохо видно, но, вроде, даже по верхнему краю информация не стыкуется.

Сергей Стеблина

Тройку на волосок выше б. Остальные норм.

Оксана

С верхом понятно, а почему по нижним краям не делали выравнивание? Например, чуть растянуть цифры или уменьшить интерлиньяж.

Сергей Стеблина

Потому что количество строк не всегда будет одинаковым. И потому что это выглядит некрасиво.

Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное