Переверстал

Привет, меня зовут Вова.

Тут я критикую, выношу на обсуждение и переделываю (переверстываю) макеты, которые, с высоты моего опыта, кажутся мне непрофессиональными, кривыми, неудобными и глупыми.

Режим работы. Правила верстки

99% табличек с режимом работы как правило полное говно.

Вот типичные представители. Такие вы часто можете увидеть повсюду.

Обычно их делают дизайнеры-новички-любители или ипешники, которые хотят
сэкономить на хорошем дизайнере.

Ну так, а че тут? Бомбануть «Режим работы», пару временных интервалов ну и для
красоты каких-нибудь вензелечков и рамочек добавить. Делов-то.

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

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

В макете не нужно писать «Режим работы» или «График работы».

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

Если заведение работает без выходных, то макет может выглядеть вот так

Не всегда есть лого, но всегда есть название

А бывает есть то и другое

Бывают еще и сандни

А еще порой обязывают писать юридическую информацию.
Ее обычно любят делать такой крупной, как-будто она на что-то влияет
или кому-нибудь действительно упала. Нужно вот так.

Неплохо поместить номер телефона на всякий случай.
Дверь закрыта в рабочее время или вам нужно пообщаться с кем-то
из компании. Или еще зачем-то.

Идем дальше.

Не все работают без выходных.

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

Можно будни-выходные показать простой схемой.

Обратите внимание, что я не пишу понедельник—пятница 9-21
или понедельник—воскресенье 9-21. Правило простое — если на макете
стоит просто интервал времени без подписи, значит заведение работает
все дни в это время. Если сб-вс выходные, то это указывается ниже, если в третий
четверг иной график, то пишется этот график, а сверху уточняется
«каждый третий четверг месяца» и так далее.

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

А вот уже все дни рабочие, но с такими отличиями.

#Не нужно дублировать дни c одинаковым графиком, достаточно
перечислить нужные дни через дефис или запятую

Ок. Как-то так. Теперь поговорим про нюансы типографики.

1) Не писать минуты в верхнем индексе,
2) Не писать «с» и «до»,
3) Между числами ставить среднее тире (Alt+0150) без пробелов, а не дефис,
4) Разделять числа знаком «:», а не «.»,
5) Не добавлять знак «0» перед единственной цифрой часа,
6) Не все шрифты идеальны, поэтому иногда нужно править расстояние
между некоторыми цифрами

Пожалуйста, не используйте рамочки!

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

Теперь я переверстаю три примера режима работы,
чтобы показать мои правила в действии. Цвета, шрифты и весь дизайн
оставлю без изменений.

Фразу про обед я убрал, как бесполезную.

Не кормите голубей

Сухое, канцелярское обращение, ужасная верстка и композиция

Простое, человеческое обращение, средняя верстка, плохая композиция

Простое, человеческое обращение, хорошая верстка, хорошая композиция

Простое, человеческое обращение, хорошая верстка, хорошая композиция
и отличный мотиватор

Шаурма-стиль

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

13 января   шаурма-стиль

Прокат великов

Всем привет! Всех с Новым годом!

Первым макетом, который я переверстал в этом году стал вот этот
ценник/режим/работы/рекламный макет пункта проката великов.

Да, это не сайт, не интерфейс, не большой пребольшой билборд, а скромный макет
из велопроката, который расположен на первом этаже 20-ти летней панельки. Для настоящего
дизайнера не бывает неинтересной и скучной задачи.

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

Поехали.

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

Надо его переделать.

Как-то так.

Начнем переверстывать.

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

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

Потом, когда конструкция будет готова, можно будет верстать.

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

Продолжаю поиск нужной композиции.

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

Получается, если велик нужен от 7 часов и более, то выгоднее брать
сразу на сутки. Но в макете об этом ни слова. Встану на сторону владельца
пункта проката и не стану ничего менять — невнимательность должна быть наказуема.

Вот, кажется нашел нужную конструкцию для основного блока.

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

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

Теперь нужно разобраться с арендой сиденья для ребенка
и услугой ТО. Это две неосновные услуги, их можно сделать особнячком.

В итоге вот что у меня получилось

Конструкцию основного блока все же поменял — композиционно так гораздо
лучше, крепче и понятнее.

Сделал отдельный блок с информацией, где скромно встали логотип,
инфа про доставку великов по Минску, телефоны и сайт.

Получилось просто охрюнительно.

2 января   veloprokat   велопрокат

График работы в поликлинике

Привет! Мой отец недавно прислал фотку вот такого графика работы

Мда, понять что-то сложновато, но можно.

Отец понял вот так

Пришел в пятницу в 6 вечера и увидел, что кабинет закрыт.
Оказалось, что нужно было понимать вот так

Вот серьезно. Тот, кто это верстал будет пиздеть в оправдание «я же не дизайнер!»?

Нужно быть дизайнером, чтобы поставить лишний вертикальный отступ?
Просто один вертикальный отступ, одно нажатие по клавише «Enter» и моему отцу
не пришлось бы повторно тащиться в поликлинику.

Маленькое движение для человека и огромный прыжок для всего UX!

График я переверстал. Вот мой вариант

16 декабря   поликлиника
Ранее Ctrl + ↓