Переверстал

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

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

Объявление об отмене троллейбусов

Вчера возле музея валунов, на остановке увидел такое объявление.

Рядом, справа висело еще одно.

Внезапно, повернув голову налево, я увидел еще 3 объявления.

Изучив все, сделал вывод — информацию об отмене трех троллейбусов,
замене их на автобусы + изменение маршрута троллейбуса №61 раскидали
на 5 макетов, повесив их в разных частях остановки.

Кстати, прочитав про отмену троллейбуса 41, я не сразу понял,
что другие троллейбусы на эту остановку 15-16 июня также не придут.

Но пока я это понял, прошло минуты 3. Также осталось непонятным,
что делать тем, кто заранее купил проездной на троллейбус —
раскошеливаться на талон, идти пешком или может быть их проездной
будет действовать в автобусах, которые заменяют отмененные троллейбусы?

И зачем в макеты поместили троллейбус №3? Он ведь здесь никогда не ходил.
Подозреваю, что ответ такой — всем насрать.

Тогда я понял, что пора снова сучить рукава.

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

Готово

Померяем

Сразу бы так.

Доставка аллергии на дом

Аллергия, налет на зубах, запах из пасти, плохой аппетит, расстройство желудка,
тусклая шерсть. Бесплатная доставка. Удобная упаковка.

2019   идиоты

Рост в глубину

Человек любой профессии в процессе развития вначале растет в ширину,
потому растет в глубину.

Объясню на примере дизайнера.

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

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

Так дизайнер превращается в арт-директора, арт-директор в хозяина крутой студии,
а хозяин крутой студии в просветленного гуру и объект поклонения множества коллег.

Недавно увидел в сторис вот такой макет

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

Хороший дизайнер должен всегда быть жестким критиком и уметь
четко ответить — что в макете хорошо, и главное, что в нем плохо.
Учиться здраво оценивать работу на уровне четких критериев, а не на уровне
«нравится — не нравится». Такой подход помогает расти в глубину.

Итак, главная проблема тут — это не последовательная подача информации.
Ее части тут перемешаны и находятся не на своих местах.

1) Адрес разорван

Вверху стоит Москва, внизу стоит более подробный адрес

2) «Читай-город» продублирован два раза

3) Заголовок оторван от изображения фотками людей

4) Подписи фоток и сами фотки также оторваны друг от друга

5) «Вокалист группы...» «Гитарист группы», Достаточно «вокалист», «гитарист»

6) По визуальной массе эти блоки спорят друг с другом. Нет контраста.

Вот мой вариант.

Он хорош тем, что вся информация составлена последовательно,
по направлению чтения — слева-направо, сверху-вниз.

Принцип такой

Когда — Что (заголовок) — Замануха (вход свободный) —
Фотка книги сразу после заголовка, причем форма связана с содержанием —
книги подпрыгивают вместе с людьми на обложке — Ценное дополнение (на презентации
будут два музыканта и автор книги) — Где будет проходить мероприятие — Во сколько.

У меня все.

Вагонное меню

Привет, сегодня я переверстаю это вагонное меню.

1.

Любую юридическую, справочную и иную инфу, не имеющую отношения к главному
контенту лучше всегда скидывать в подвал, используя при этом мелкий кегль.
Да и только в тех случаях, когда без нее никак нельзя (ГОСТ, постановление министров,
настойчивый клиент и т. п.). В остальных случаях от нее лучше избавляться

2.

Робот детектед

3.

Кстати, если продается Nescafe 3 в 1, то лучше так и писать, предупредив, что кофе будет
в другой упаковке

4.

Whaat?

5.

Робот детектед

Поехали переверстывать.
Кондитерские изделия заменим на классное слово «Сладости».
Отделим сладости от еды.

Надо постель отделить от меню. Все-таки или поесть или поспать.

Рисую картинки

Верстаю дальше

Готово!

Картинка по-больше

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Идем дальше.

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

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

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

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

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

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

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

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

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

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

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

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

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

Ранее Ctrl + ↓