Идет загрузка

А вы хотите сделать свой дизайн сайта лучше?

Фишки Next Generation CMS / 29 сентября 2011

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

Типографика это целая наука и в нее надо или вникать с головой или хотя бы вычленить несколько правил, которые выведут ваш дизайн сайта на новый уровень. Конечно, вы не станете МЕГА дизайнером, но поверьте, ваши дизайны и сайты будут на голову выше тех, что были до этого.

Выбор шрифтов
Я обычно использую 2 разных шрифта, при создании дизайна сайта. Один для заголовков, второй для контента. Можно использовать и три и четыре, но я бы не рекомендовал, а так как этой мой пост :)), то шрифтов будет два!

Заголовки. Про важность заголовков я писать не буду, это и так понятно. Заострю внимание на размерах заголовков h1, h2, h3, h4
Я пользуюсь вот такой простой схемой для градации размеров заголовков.
up_1.jpg (60. Kb)
Это, как вы поняли пример и размеры я указал тоже только для примера. Уловите суть :)

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

Финт. Я практически всегда, помимо рамера шрифта для заголовков сайта. Дополнительно экспериментирую с letter-spacing
up_2.jpg (54.34 Kb)

letter-spacing: normal;
letter-spacing: -1px;
letter-spacing: 2px;


Пробуйте!

Основной шрифт
Очень часто мне встречаются сайты с большим количеством текста, которые просто невозможно читать. Это как правило или по незнанию или это галимые ГС. Про вторые вообще писать не хочется ибо я на молекулярном уровне ненавижу всю эту ГС ху..ту.

В нашем случае я использую шрифт Tahoma с размером в 12px.
up_3.jpg (98.77 Kb)
Как видите простое добавление line-height: 20px; делает текст, доступным и читабельным. А, то, как это важно, чтобы ваши тексты люди читали, а не ломали глаза или вообще сваливали с вашего сайта, вы я думаю понимаете сами.

Пробуйте! Поиграйтесь с line-height посмотрите на результаты, уверен, что все будет ОК

Финт. Вы все наверное знаете, что человеку не очень удобно читать с монитора, особенно массивные текстовые портянки на 3-4 прокрутки и 80% ширины экрана :)) Так вот, установлено, что человек в легкую читает, по 6-8 слов в строке оО Вот так то )) Так, что перед созданием дизайна, особенно если вы хотите, чтобы люди читали. Старайтесь держать этот параметр.
Решается это или размером колонки с текстом или размером шрифта.

PS/ В планах закончить эту серию постов, их кстати будет 3. Следующий пост будет о ссылках и правилах, как они должны выглядеть и т.д. А последний, третий пост будет о самом важном в создании дизайна сайта, особенно информационного типа - это СЕТКА.

    • А вы хотите сделать свой дизайн сайта лучше?
    • А вы хотите сделать свой дизайн сайта лучше?
    • А вы хотите сделать свой дизайн сайта лучше?
    • А вы хотите сделать свой дизайн сайта лучше?
    • А вы хотите сделать свой дизайн сайта лучше?
    • А вы хотите сделать свой дизайн сайта лучше?
    RocketBoy
    Вот кстати в тему _http://web-advice.ru/about.html попробуйте прочитать.
    Лечится увеличением line-height
    PS/ Евгений без обид

    29.09.2011 - 18:23   RocketBoy   

    Облако тэгов
    Бесплатные шаблоны Next Generation CMS
     
    Архивчик
    Привет!
    Этот блог я сделал, чтобы выкладывать новые шаблоны для Next Generation CMS (ngcms), поделиться моими трюками, возможно секретами по созданию сайтов, но по прошествии времени, я решил делиться всем, что мне понравилось за последние дни в сети. RocketVIP