Правила создания шаблона сайта - Web дизайн студия Gixan

Перейти к контенту

Главное меню:

Правила создания шаблона сайта

Статьи

Десять правил для создания хорошего HTML шаблона сайта

Продуманная цветовая гамма

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

Правильное расположение текста

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

Понятный заголовок

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

Красивые шрифты

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

Умеренное количество картинок

Еще одно правило хорошего html шаблона использование небольшого количества иллюстраций. Картинки обязательно должны присутствовать, если вы не хотите, чтобы пользователи Интернета зевали от скуки, но достаточно, например, просто большого изображения на заднем фоне и нескольких ярких цветовых пятен, чтобы придать вашему сайту «остроты». Ни в коем случае не громоздите картинку на картинку.

Сетка для верстки

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

Качественные иконки

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

Css и jquery эффекты

Сейчас большинство шаблонов сайтов имеют некоторое количество css или jquery эффектов, проявляющихся при каких-либо действиях пользователей. Например, при наведении курсора картинки могут менять свою прозрачность. Часто используются слайдеры, анимация иконок, эффекты параллакса для фона. Большое количество дополнительного кода будет тормозить работу сайта, а вот пара анимационных трюков оживит его визуально.

Один стиль

Весь сайт должен быть выполнен в одном стиле. Если, например, в одной части вы используете тени для придания объема элементам, а в другой делаете дизайн плоским, это может вызвать определенные вопросы у посетителей. Старайтесь выполнить шаблон так, чтобы и заголовки, и куски текста, и кнопки, и прочие элементы из каждой части шаблона смотрелись стилистически одинаково.

Правильно написанный «хэдер»

И немного о программной части вашего html шаблона: «хэдер» сайта (код, написанный в начале любой html странички до тэга <body>) играет решающую роль в том, как Интернет-браузер будет читать веб-страницы. Не забудьте правильно указать спецификацию HTML (html 4 или html 5). Помимо знакомых <title></title> и прочих атрибутов в «хэдере» необходимо обязательно прописать информацию о кодировке текста и основном языке документа. Также в заголовок сайта включают все ссылки на таблицы стилей и подключенные скрипты.

Более подробную информацию можете узнать по телефону  +7(8412)228-288 или написать нам письмо на наш email: admin@gixan.ru

 
Яндекс.Метрика
Рейтинг@Mail.ru
Авторское право © 2013, Design by Gixan. Все Права Защищены.
Назад к содержимому | Назад к главному меню