Блог Игоря Штанга

Nail пишет:

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

Самое сложное для меня — блок покупки с ценами:

Спасибо, что написали. Сравнительные таблицы в переверстке уже были, но жанр настолько востребованный, что я не прочь переверстать еще одну.

( Collapse )

Переделываю обложку журнала, показываю разные варианты.

Следующая «Большая переверстка» начнется 5 октября: vk.com/pereverstka_online

Следующий мастер-класс пройдет с 5 по 24 октября. Подробности и запись в группе: vk.com/pereverstka_online




Марианна Ушакова о «Большой переверстке» в августе:

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

Если и есть мнение по улучшению курса, то единственное, что я бы добавила, это сделала комментарии по работам чуть более жесткими. Если есть очевидно грубые ошибки, говорить, почему это плохо, чтобы не возникало желания их повторять :–)

В целом очень довольна!

Другие отзывы

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

Вкратце:
1. Не оставляйте меньше трех строк текста под заголовком и над ним.
2. Не начинайте колонку с заголовка. Потому что: «такое расположение привлекает внимание, и читатель может пропустить целую колонку, подумав, что это заголовок другого материала».




3. Не помещайте заголовок непосредственно под иллюстрацией и над ней.






4. Не помещайте заголовок по бокам от иллюстрации, заверстанной в оборку.




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

Грифон Арсений возвращается: vk.com/typeschool_msk

Переверстываю пять макетов в режиме реального времени.

0:01:18 — Вступление
0:03:40 — Таблица «Допустимое рабочее давление»
0:24:55 — Календарь цен авиакомпании «Победа»
0:40:55 — Вклад «Восточного банка»
0:47:58 — Интерфейс выписки по счету «Бинбанка»
1:02:58 — Лицензии словолитни CJ Type
1:11:57 — Вывод
1:15:10 — Вопросы

Коротко о методе:

1. Убираю все линейки и плашки.


2. Если что-то ломается, пробую решить проблему с помощью отступов, выравнивания, оформления.


3. Если не получается, возвращаю часть линеек или плашек.

Прием очень простой и очень эффективный — набрать текст крупно.

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

На этой странице текст достаточно крупный, но он всё еще воспринимается как серый прямоугольник:


Каталог «Икеи», 2008


Если увеличить сильнее, на первый план начинают выходить строки:

( Collapse )

В прошлом году нарисовал сайт для «Веб-стандартов».

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

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



Если картинки нет совсем, ее место занимает один из фирменных паттернов ↓

Для верстки статей разработан полный набор стилей: заголовки, выноски, цитаты, списки, иллюстрации, фрагменты кода и т. д.:

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

К сожалению, разработчики сверстали сайт без моего участия, поэтому я показываю свои макеты, а не скриншоты. Найдите сто отличий :–)

—
Иконки и паттерны: Алексей Грабилин
В эпизодах: Сергей Мусаилов
Шрифты: RF Dewi и RF Rostin

1. The essence of space in design — статья о важности воздуха. Автор дает определение активной и пассивной пустоты. Вроде очевидная штука, но раньше я такого не встречал и сам так не думал:

Active White Space:
This is the space that you make a conscious effort to add to your design for emphasis and structure. Active white space is often asymmetrical, which makes the design look more dynamic and active. It draws a user’s attention and to emphasize certain elements like a headline, logo or graphic inside our design.

Passive White Space:
The space between small objects that goes unnoticed. The designers use it to create texts or arrange paragraphs or icons. It generally occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element. Though it goes without being noticed, this white space is intentionally added there in a very subtle way, to allow the eye to easily read the design/text.

2. Таблица пробелов и символов нулевой ширины от Кирилла Беляева.

3. Бар о пай — тест на знание основ визуализации данных от Парка Интуиции.