avatar

Типографика и оформление сайтов для начинающих

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Типографика – это графическое оформление текста посредством набора и последующей верстки, а также проектирование внешнего вида печатного или электронного издания или произведения.

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



Дальнейшие примеры показывают, как не нужно делать.


Цвета

Кислотные цвета, невозможность или неприятность чтения, чрезмерное количество цветов текста, использование цветового выделения вместо заголовков/курсива/жирного, анимированный фон под текстом и т.д.





Размеры

Сверхбольшие и сверхмалые, несоразмерность заголовков и основного текста



Выравнивание

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


Использование нижнего подчеркивания

Эдакие псевдо-ссылки, по которым хочется нажать, да нельзя.


Отсутствие подчеркивания у ссылок

Особенно, если это не ссылки в главном меню сайта


Отступы

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


Пробелы

Лишние или их отсутствие



CAPS

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


Анимированный текст, в частности взятый с зарубежных сайтов



Art-текст из Ворда



Текст на фоновой картинке



Банальные ссылки:

Полезная книжка.
Дорога к высшему пилотажу.
Для тех, кому маловато.
И чуток от меня

Почему такое происходит?

1. Виноваты люди-реадкторы, которые не задумываются, как это будет смотреться на сайте, можно ли это прочитать без вреда для глаз и оперируют лишь стереотипами по восприятию рекламных текстов.
2. Виноваты WYSIWYG-редакторы, особенно если их ставить безо всяких настроек. К примеру, TinyMCE (и многие другие) — нерадивому редактору в руки попадает инструмент, позволяющий творить с текстом всякую гадость. Одного изменения цвета текста иной раз бывает достаточно, а тут еще таблицы, размеры, куча заголовков, зачеркивание, подчеркивание и т.д.
3. Виноваты разработчики CMS, которые не настраивают WYSIWYG-редакторы должным образом, ибо думают — чем больше возможностей, тем лучше. Хороший пример — Imperavi редактор.
8 комментариев RSS
avatar
Вообще статья полезна, но не нова.
Пробелы
Лишние или их отсутствие

А вы не думали, что тут возможно, не лишние пробелы, а просто выравнивание по ширине (обеим сторонам)?
avatar
Я это сразу понял, но правильно делать такое выравнивание без добавления лишнего пробела — пропорциональным увеличением всей строки.
avatar
Кроме того, имхо, почти нет информации, как делать надо.
Комментарий отредактирован 2016-03-15 10:09:27 пользователем 13i
avatar
1. даны ссылки
2. считаю, что для того, чтобы делать правильно, надо включать логику, здравомыслие и «чувство прекрасного». Представить себя на месте читателя, вспомнить на каких сайтах было «уютно».
Комментарий отредактирован 2016-03-15 10:09:40 пользователем 13i
комментарий был удален
комментарий был удален
avatar
А кто-то еще делает такие сайты? о_О
avatar
да ими весь интернет загажен, куда ни плюнь.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.