https://pereverstal.by/tags/kofe/ E2 (v3254; Aegea) 136 https://pereverstal.by/all/menyu-dlya-kofeyni-perspektiva/ https://pereverstal.by/all/menyu-dlya-kofeyni-perspektiva/ <p>Всеобщий хай, я принес вам свежей переверстки.</p> <p>Готовый вариант в карусели, если лень читать пост до конца.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="750" data-ratio="0.75"> <img src="https://pereverstal.by/pictures/Main.jpg" width="750" height="1000" alt="" /> <img src="https://pereverstal.by/pictures/IMG_202tyjdety10912_1349031.jpg" width="750" height="1000" alt="" /> </div> <div class="e2-text-caption">Посмотрите на этот унылый макет, болеющий всеми возможными болезнями верстки.</div> </div> <h2>Для удобства кропну изображение</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/234.jpg" width="750" height="1049" alt="" /> </div> <h2>Первое, что мне бросилось в глаза это неверная иерархия заголовков.</h2> <p>Заголовок «Кофе», судя по размеру, общий для всего макета. Это как название книги —<br /> если на ней написано «Морское путешествие за тридевять земель»,<br /> мы не ожидаем, что внутри будет руководство о том, как доить коров.</p> <p>Т. е. по логике получается, что весь макет посвящен ценам на кофе.<br /> Но хуй там. В середине мы узнаем, что в тыл пробрались какой-то<br /> «чай с любой полки» вместе с ротой взваров и несквиков.</p> <p>Но это полбеды. Самая распространенная болезнь верстки — неверные<br /> вертикальный отступы — так же не дремлет. Она опутала своими щупальцами заголовки,<br /> приставила к их горлу 2 тонкие линии, отделив их от содержимого, к которому они относятся.<br /> А еще «Добавить» прилип к молочному коктейлю. А еще после таких огромных заголовков двоеточие не нужно.</p> <p>Про набор сплошными прописными и конские расстояния до мелких цен, сбившихся в кучу как стая пугливых антилог-гну, думаю, можно не говорить.</p> <h2>Попробую сделать надрез по еще теплому макету.</h2> <p>Верну логику в структуру заголовков, уберу лишние линии, восстановлю вертикальные связи, допишу там где не дописано.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/IMG_20210912_134903.jpg" width="750" height="1049" alt="" /> </div> <p>Стало гораздо лучше, но не будем останавливаться на достигнутом.</p> <h2>Для начала наберу все меню.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_4.jpg" width="750" height="1050" alt="" /> </div> <h2>Затем, не спеша, начну искать подходящую конструкцию.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_42.jpg" width="750" height="1050" alt="" /> </div> <h2>Нашел прекрасный вариант:</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_43.jpg" width="750" height="1050" alt="" /> </div> <p>Т. к. у нас здесь три блока — «кофе», «не кофе», «добавки»,<br /> их стоит визуально отделить, а для этого я воспользовался чередованием колонок.</p> <p>«Не кофе» и «добавки» сверстаю двумя колонками, «кофе» тремя.<br /> Кстати, обратите внимание, что раздел с кофе я поместил в центр макета.</p> <p>Почему? А вы вспомните <b>как высоко висит меню:</b></p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Main.jpg" width="750" height="1000" alt="" /> </div> <p>Чаще всего в Перспективе продается кофе, поэтому приблизим этот раздел к глазам клиента.</p> <p>Далее украшаем макет. Пробуем играться со шрифтом и кеглем заголовка,<br /> добавим 5 грамм иконок.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_44.jpg" width="750" height="1050" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_45.jpg" width="750" height="1050" alt="" /> </div> <h2>Вот этот вариант нравится больше всего</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_647.jpg" width="750" height="1050" alt="" /> </div> <p>Померяем.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/IMG_20210dsg912_321349031.jpg" width="750" height="1000" alt="" /> <div class="e2-text-caption">Отлично</div> </div> <h2>Внезапно приходит идея сделать черный фон.</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Menu-coffee_72.jpg" width="750" height="1050" alt="" /> </div> <p>Мммм выглядит вполне неплохо.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/IMG_202tyjdety10912_1349031.jpg" width="750" height="1000" alt="" /> <div class="e2-text-caption">Меню в кафешках часто пишут белым мелом по черной доске!</div> </div> <p>Конечно, неплохо бы напечатать оба варианта и протестить<br /> в бою, но на этом этапе я передаю эстафету кофейне Перспектива.</p> Sun, 03 Oct 2021 01:41:06 +0300