Верстка дизайна сайта. Виды дизайна сайтов

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

Виды дизайна сайтов

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

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

Сайт с двумя колонками - самая распространенная модель дизайна. Обычно, одна колонка занимает 1/3 страницы, вторая - оставшееся пространство. Бывает так что, меньшая колонка оказывается в левой части, но чаще всё же слева находится колонка побольше, а вот справа - вторая колонка, как дополнительный элемент страницы, в котором находится реклама, вспомогательное (или основное) меню, картинки или комментарии по теме и т.д.

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

Адаптивная верстка дизайна сайта

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

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

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

Переносной дизайн. Такой вариант верстки несколько более "заумный", но не менее удобный для пользователя. Перенос блоков с горизонтального на вертикальную ось на экранах с небольшим разрешением помогает сыграть на любви к браузерам автоматически убирать всё лишнее. Читателю не придется производить лишних манипуляций для того, чтобы приблизить или отдалить текст для удобства чтения. И он обратит внимание на все колонки, так как с удовольствием пролистает страницу сверху вниз, но никак не вбок.

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

Минимализм - простой дизайн сайта с одной колонкой. С ним без разницы на каком экране пользователь просматривает сайт, верстка не меняется. Даже несмотря на все усилия браузера.

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

Теперь, когда все карты раскрыты, вы можете создать свой уникальный дизайн.