14 заметок с меткой вёрстка

📅 26 декабря 2015

Правильная настройка масштаба в браузере Firefox

Если сайты выглядят мелко и нечитаемо, можно настроить экранный масштаб в Винде, а в самом браузере использовать комбинацию клавиш CTRL и +, -, 0 (сброс), или колёсика мыши.

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

Сравнение двух картинок

Если я вставляю на сайт иконку 100×100 пикселей, то и на экране хочу видеть точно такую же, хотя бы на время вёрстки. Уже потом я прогоню тесты и посмотрю сайт в разных браузерах и т.п.

Только текст

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

Меню › Вид › Масштаб › Только текст

(если меню спряталось, его можно вернуть клавишей ALT)

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

Отменить системное масштабирование

В новых версиях Фаерфокс (и не только он) научился читать системные настройки и применять их без предупреждения. У меня в Винде стоял масштаб 125%, и сайты «замылились». Вот так можно вернуть масштаб 100%:

about:config (в адресной строке)
layout.css.devPixelsPerPx = 1 (по умолчанию этот параметр равен -1)

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

Увеличить интерфейс (вкладки, меню)

Чтобы не ломать глаза, системные меню и шрифты в браузере сделаем крупнее с помощью дополнения:

theme-font-size-changer

После установки его можно найти в Меню › Инструменты. Мои настройки: шрифт Segoe UI (оптимален для интерфейса), размер 19 пикселей (если установить больше, иконки и названия сайтов на вкладках «разъезжаются»).

Экраны с высоким DPI

Для таких экранов рецепт тот же, только нужно подобрать подходящие цифры. При вёрстке сайтов подойдёт, например, масштаб 2:1 — чтобы чётко понимать, что происходит с размерами блоков.

📅 30 октября 2015

Шаблоны месяцев для календаря на следующий год

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

Красивая и аккуратная сетка дней

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

Скачать шаблон календаря

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

📅 17 октября 2014

KFC исправили рекламу

Раньше на бумаге с подносов KFC была путаница с чашками кофе. Теперь названия кофе подтянуты ближе к чашкам, а их связь подчёркнута ярлычками, залезающими под чашки:

С уважением к теории близости

P.S. Ещё остались проблемы с типографикой:
— Текст очень близко к краям ярлычков.
— Большие дырки между словами из-за неоправданного выравнивания по ширине (оно не нужно для 2-3 строчек текста).

📅 28 мая 2014

Шантарам

Обложка Шантарам

Книга затронет до глубины души — так написано на обложке «Шантарама». Меня книга зацепила, но вовсе не историей любви, неожиданными трагедиями или философскими размышлениями. Сюжет затянут, а его вторая половина скомкана. Однако у книги есть вкус и самобытность, и я не жалею, что её прочитал. Несмотря на приличную толщину, такой слог хочется читать подольше, погружаясь в жизнь главных героев и атмосферу Бомбея.

В книге (как печатном продукте) нашёл три любопытных вещи.

▼ Читать дальше

📅 17 декабря 2013

Меню для ресторана «Наша аллея» v.2

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

Первый разворот

▼ Читать дальше

📅 4 июня 2013

Теория близости

В KFC нашёл отличный пример для понимания теории близости в вёрстке. Посмотрите на чашки кофе и их описания:

Не сразу понятно, что к чему относится

▼ Читать дальше

📅 17 мая 2013

Меню для кафе «Сквер»

Задача: быстро придумать несложный логотип и сделать редизайн меню.

Фотографии (почти все) предоставлены заказчиком.

▼ Читать дальше

📅 30 апреля 2013

Меню для ресторана «Наша аллея»

Люблю изучать меню ресторанов или кафе в ожидании заказа.

Это моё первое меню. В нём я постарался избежать основных ошибок оформления.

Новая версия смотрится логичнее и проще.

Формат меню — А3 (мелкий шрифт хорошо читается, мы проверяли).

Фотографии (почти все) предоставлены заказчиком, а стиль скопирован с вывески ресторана:

Вывеска ресторана Наша аллея

📅 29 января 2013

Вкладыши в упаковку для ковриков

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

Процесс

Упаковка (прозрачный пакет) меняться пока не будет:

Пакет со скруглёнными углами

Изучаем реальные упаковки, отмечаем плюсы (много разных фишечек: эмблемы, увеличенные фрагменты фотографий) и минусы (грубое и непоследовательное оформление):

Коврик Ultra Mat

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

▼ Читать дальше

📅 15 апреля 2012

Глюки со срезанными пальцами

Бывает так, что на макетах с неумелой вёрсткой вдруг что-нибудь «едет». Вот тут вышло забавно:

Пальцы-то срезались!

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

Бедные мои пальчики 😃

Как такое могло случиться? Это же просто фотка!

📅 13 апреля 2012

Сайт huberits.ru

Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.

Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.

huberits.ru

Страница продукции

Сайт живо реагирует на изменение ширины окошка: меняется шрифт, меняются размеры всех блоков. Сайт увеличивается до разумных пределов, а затем остаётся посередине окна:

Вид сайта на разных экранах

▼ Читать дальше

📅 13 марта 2012

Транспортная компания GPFT

~~gpft.ru~~

Небольшой сайт для транспортной комании GP FreightTruck:

Главная страница сайта

Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.

▼ Читать дальше

📅 26 ноября 2011