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

Правильная настройка масштаба в браузере 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 — чтобы чётко понимать, что происходит с размерами блоков.

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

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

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

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

Скачать шаблон на 2016 год

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

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

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

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

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

Шантарам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Страница меню 1Страница меню 2Страница меню 3Страница меню 4Страница меню 5Страница меню 6Страница меню 7Страница меню 8

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

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

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

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

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

Апдейт: Однако, тут ещё есть, что поправить :) Новая версия смотрится логичнее и проще.

Страница меню 1Страница меню 2Страница меню 3Страница меню 4Страница меню 5Страница меню 6Страница меню 7Страница меню 8

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

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

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

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

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

Процесс

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

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

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

Коврик Ultra MatКоврик Ultra Mat

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

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

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

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

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

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

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

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

Сайт huberits.ru

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

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

huberits.ru

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

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

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

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

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

gpft.ru

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

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

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

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

Фитнес в Марфино

Подруга моей жены Лилия ведёт занятия по фитнесу в районе Марфино. Для привлечения желающих заниматься ей потребовались в том числе мои услуги. Всё началось с листовок, а теперь уже готовы сайт, визитки, уличный баннер и пр.

Сайт

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

fitnes-marfino.ru

— тем более, что в нашем районе нет других фитнес-залов.

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

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

Эко-упаковка от EKOFRIEND

ekofriend.com

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

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

Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.

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

Сайт по ремонту квартир

Сделал сайт по дизайну интерьеров, ремонту квартир и офисов.

invest-s.ru

Девушка-консультант — настоящаяДевушка-консультант — настоящая

Шапка сайта сделана на флеше (день-ночь, огонь в камине).

  • Квартира с видом на Москва-рекуКвартира с видом на Москва-реку
Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017