Верстка сайтов что это: Какие бывают типы вёрстки сайта?

Какие бывают типы вёрстки сайта?

Приветствую Вас дорогой читатель!

Сегодня я хочу рассказать Вам о разных типах вёрстки для того чтобы Вы могли лучше ориентироваться в этом вопросе и не попали в неприятную ситуацию при заказе вёрстки либо её разработке.

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

На самом деле выбор типа вёрстки и согласование её с исполнителем – это один из важнейших этапов в разработке Вашего сайта.

Но прежде чем перейти к разбору типов вёрстки я хочу акцентировать Ваше внимание на одном очень важном требовании – кроссбраузерности.

Итак переходим к типам вёрстки:

Фиксированная.

Является одним из наиболее распространённых на сегодняшний день типов.

Вот скриншот отображения такой вёрстки на разных устройствах

Основная особенность: сайт имеет строго фиксированную ширину и высоту всех блоков и страницы в целом, и не зависит от диагонали монитора.

Достоинства:

• простота изготовления (а следовательно и меньшая цена)
• корректное и одинаковое отображение сайта на экранах с разной диагональю.

Недостатки:

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

Обычно данный тип вёрстки используют для создания Landing Page.

Резиновая (тянущаяся).

Пример отображения резиновой вёрстки на разных экранах

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

Достоинства:

• Хорошо смотрится на экранах разной величины.
• Изменяется при масштабировании страницы.

Недостатки:

• Более сложный в реализации (а следовательно и более дорогой)
• Так как блоки сайта растягиваются и сжимаются под ширину экрана – некоторые элементы выглядят не очень красиво на планшетах и телефонах.
• На мобильный устройствах некоторые элементы за счёт сжатия становятся очень неудобными в использовании. Особенно это касается меню и форм обратной связи.

Такая вёрстка подходит для макетов сайтов, элементы которых размещены в одну колонку. Или в сочетании с фиксированной вёрсткой.

Адаптивная.

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

Основная особенность:
Адаптивная вёрстка базируется на резиновой вёрстке + использует медиазапросы или специальные скрипты, которые позволяют определять размер экрана пользователя и в зависимости от этого приписывать конкретным элементам те или иные стили (ширина элементов и положение блоков, размер шрифтов и картинок и даже цвета).

Достоинства:

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

Недостатки:

• Очень трудоёмкий вид вёрстки, что отражается на его цене.
• Контроль качества выполнения такой вёрстки тоже требует не мало времени (особенно в том случае если сайт большой) так как нужно протестировать вёрстку на разных размерах экранов через онлайн сервисы либо через масштабирование и изменение размеров окна в браузере.

Также можно выделить табличную и блочную вёрстку, но это тема отдельной статьи.

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

Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.

До встречи в моих новых статьях.

С уважением Юлия Гусарь.

Верстка сайта – ее виды, особенности написания под CMS

От автора: в этой статье мы поговорим о верстке сайтов. Как начать верстать с нуля? Какие особенности верстки под CMS? Какие видео посмотреть, чтобы научиться? Будем обсуждать эти и другие вопросы.

Начинающим в верстке

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

Если вы читали предыдущую статью, то наверняка поняли, что странички создаются с помощью языков HTML, CSS и JavaScript. Там мы также вкратце рассмотрели процесс верстки. Но если вы новичок, как выполнить верстку сайта с нуля? В этом вам могут помочь видеоуроки и статьи по основам HTML и CSS на нашем сайте. Они действительно предназначены для новичков. То есть, даже если вы абсолютно ничего не понимаете в процессе создания сайта, пройдя пару уроков, у вас будет уже более ясное представление, а изучив все предоставленные материалы можно достичь первого впечатляющего результата – сделать верстку сайта своими руками.

Чтобы научиться верстать простые макеты, вам достаточно изучить основы. Например, этот видеокурс по верстке сайтов для начинающих, с использованием простых техник. Сколько времени на это может уйти? Конечно, за одну ночь вы не сможете научиться, но вполне реально за 1 месяц с нуля выйти на уровень, при которой вы сверстаете свой первый, пусть и очень простой, но все-таки сайт! Далее вам следует просто повышать свой уровень, если есть желание увеличивать свое мастерство.

Сегодня происходит революция веб-стандартов. Новые технологии HTML5 и CSS3 позволяет делать намного более красивые сайты, а иногда даже обходиться без JavaScript-кода. Именно их вам нужно будет изучить дальше, потому что все больше и больше макетов сегодня верстается именно с помощью этих технологий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как научиться верстать лучше?

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

Здесь мы впервые затронули понятие “библиотека» в сайтостроении. Если объяснять простым языком, то это готовый набор определенных функций и сценариев, которые вам остается просто активировать. Конечно, это тоже не так просто, но, во всяком случае, проще, чем научиться писать сложные скрипты самому – на изучение этого могут потребоваться годы. Да, программисты на самом деле хорошие люди.

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

Рис. 1 Готовые стили, уже прописанные в Bootstrap. Вам остается только применять их в своих проектах

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

Виды верстки

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

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

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

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

Верстка под CMS

CMS – это системы управления сайтом. Что-то вроде двигателя, на котором находится ваш проект. Именно так их зачастую и называют – движки. Верстка сайтов под такие движки имеет свои особенности. Самыми популярными CMS являются WordPress и Joomla.

Благодаря этим движкам страницы сайта могут генерироваться динамически. Например, если у вас на сайте 3 страницы, и вы не планируете делать больше, то вам может и не понадобиться движок. Сделать такой проект можно на чистом HTML и CSS. Но представьте, что вы запускаете новостной сайт, на котором каждый день будут публиковаться новые посты. Для такого проекта абсолютно точно нужна CMS.

Верстка сайта под WordPress отличается от обычной только тем, что готовую верстку вам нужно интегрировать в движок. Своими силами это можно сделать только после изучения самого движка. Также неплохо будет хорошо знать PHP, потому что на этом языке написаны почти все CMS. Задачу по интеграции верстки можно поручить другому человеку, который разбирается в этом, если вы сами не компетентны в вопросе. Конечно, в таком случае вам придется заплатить определенные деньги за услуги.

Альтернативный вариант – можно использовать один из шаблонов WordPress (их тысячи) и переделать его дизайн, изменив стили. Для этого вам достаточно хорошо разбираться в CSS. Некоторые вещи в шаблоне можно поменять чисто с помощью визуальных настроек, а для некоторых придется лезть в дебри движка, изменяя PHP-код. Так что основы PHP вам все равно нужны, если вы хотите полноценно пользоваться движками.

Рис. 2 Выбирайте любой из сотен шаблонов, которые уже существуют для WordPress. С помощью CSS и PHP можно серьезно изменить дизайн темы.

Joomla – верстка сайта под этот движок тоже требует интеграции написанного вами ранее кода. Тут вам понадобятся примерно такие же знания, как и для интеграции в WordPress, но если говорить коротко, то в Joomla это немного более трудный процесс. Опять же, есть сотни готовых тем, и вы имеете полное право переделывать их на свой лад.

Заключение

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Блочная верстка или основы анатомии скелета сайтов

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

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

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

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

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

Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки (слои). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

Более подробно ознакомиться со всеми свойствами css можно из технической документации к языку.

Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style. css" />
</head>
 
<body>
 
<div>
	<div>
	<h3>Шапка</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Меню</h3>
	</div>
		 
	<div>
	<h3>Контент</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>Подвал сайта</h3>
	</div>
</div>
		 
</body>
</html>

Содержимое файла style.css:

body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background:#99CC99;
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            background: #66CCCC;
            height: 100px;
            width: 900px;
}
 
#navigation {
            background: #FF9999;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #99CC99;
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #0066FF;
            height: 80px;
            width: 900px;
}

Вот так наш пример блочной верстки сайта выглядит в окне браузера:

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

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

С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы «перемоете» собственными руками.

CSS Макет веб-сайта

Макет веб-сайта

Веб-сайт часто делится на заголовки, меню, контент и нижний колонтитул:

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

Заголовок

Заголовок обычно расположен вверху веб-сайта (или прямо под верхним меню навигации). Часто содержит логотип или название веб-сайта:

.

Пример

.заголовок {
цвет фона: # F1F1F1;
выравнивание текста:
центр;
отступ: 20 пикселей;
}

Результат

Попробуй сам »

Панель навигации

Панель навигации содержит список ссылок, которые помогут посетителям перемещаться по вашему веб-сайту:

Пример

/ * Контейнер навигационной панели * /
.topnav {
overflow: hidden;
цвет фона: # 333;
}

/ * Ссылки на навигационную панель * /
.topnav a {
float:
осталось;
дисплей: блок;
цвет:
# f2f2f2;
выравнивание текста: по центру;
отступ: 14 пикселей 16 пикселей;
текстовое оформление: нет;
}

/ * Ссылки — меняют цвет при наведении * /
.topnav a: hover {
цвет фона: #ddd;
цвет: черный;
}

Результат

Попробуй сам »

Содержание

Макет в этом разделе часто зависит от целевых пользователей. Самый распространенный макет — это
одно (или их сочетание) из следующих:

• 1 столбец (часто используется для мобильных браузеров)
• 2-колонка (часто используется для планшетов и ноутбуков)
• Макет с 3 столбцами (используется только для настольных компьютеров)

Мы создадим макет с 3 столбцами и изменим его на макет с 1 столбцом на экранах меньшего размера:

Пример

/ * Создаем три равных столбца, плавающих рядом друг с другом * /
.колонна {
плыть налево;
ширина: 33,33%;
}

/ * Очистить поплавки после
columns * /
.row: после {
content: «»;
дисплей: таблица;
ясно: оба;
}

/ * Адаптивный
макет — заставляет три столбца располагаться друг над другом, а не рядом
друг к другу на экранах меньшего размера (шириной 600 пикселей или меньше) * /
@media screen и (max-width:
600px) {
. column
{
& nbsp

14 направлений проектирования компоновки | Блог Webflow

Не так давно было время, когда веб-дизайн был отражением печати.Столбцы и ряды следовали за жесткими линиями, с содержанием и изображениями, привязанными к фиксированным пространствам. Но по мере развития таких инструментов, как HTML, CSS и JavaScript, менялись и возможности дизайна макета. Вот 20 техник и практик, которые дизайнеры используют для создания уникальных макетов страниц и продвижения веб-дизайна в новых направлениях.

1. Добавьте глубины с помощью эффекта параллакса

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

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

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

2. Используйте перекрывающиеся элементы

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

WebINTENSIVE, компания-разработчик программного обеспечения, применяет трехуровневый подход на странице своих проектов, помещая карточку поверх изображения поверх цветного блока, который выдвигает контент на передний план:

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

Плавающие заголовки над изображениями героев — еще один способ, которым дизайнеры играют с перекрывающимися элементами. Это знакомая практика дизайна, но некоторые сайты используют уникальные подходы, которые действительно выделяются ».

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

3. Разделите содержимое на смещения заголовков, подзаголовков и столбцов

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

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

Фармацевтическая компания Alvogen использует этот поэтапный подход к дизайну для более интересной компоновки:

4. Раскладываем контент горизонтальными карточками

Горизонтальная компоновка — это простой способ уберечь дизайн от переполнения. Он также отлично подходит для небольших мобильных экранов, где макет переводится в вертикальную прокрутку для связанного контента.‍

Hypergiant, компания, предлагающая передовые программные решения для компаний, использует горизонтальные карты для наиболее важного контента:

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

5. Разделенные экраны

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

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

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

Разделение экранов — еще один практический способ связать связанные блоки контента вместе.Вместо одной веб-страницы с переполненным контентом он аккуратно делит все на две части. Это еще одна тенденция веб-дизайна, направленная на упрощение потребления контента.

6. Покажите свою сетку

In Style Novels — это дизайн, демонстрирующий мебель модной итальянской компании Creazioni, видимая сетка создает прочную основу для парящих предметов мебели и других анимированных визуальных элементов, составляющих этот художественный макет.В театре есть что-то под названием «прорыв четвертой стены», когда актер напрямую обращается к публике. Показывать сетку — это все равно что ломать четвертую стену дизайна — снимать макет и открывать то, что находится под ним.

Отображение сетки — это напоминание о том, что страница — это не что иное, как аккуратно расположенные пиксели. Делая эти руководящие принципы видимыми, элементы цементируются на месте, делая их более связанными с пустым пространством, которое они занимают.

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

7. Заголовки перенесены на задний план

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

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

8. Набросок типографики

В портфолио Ланса Барреры используется шрифт с желтым контуром на темном фоне, чтобы сделать его сообщение ярким.

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

9. Большой рост с гигантской копией

Название этого агентства ОК. Этот гигантский заголовок и стрелка вниз на их домашней странице сразу вызывают желание прокрутить вниз.

Зачем говорить маленькое — когда можно громко кричать. И мы имеем в виду на самом деле большой.

Гигантская копия, если все сделано правильно, привлекает внимание.Это не работает, когда каждое слово огромно, но в сочетании с разными размерами и стилями типографики оно может сделать громкое заявление.

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

Сочетание разных шрифтов создает интересный макет для портфолио исландского дизайнера Gummisig.

10. Известные бренды, использующие искусство тонкости

Toyota — один из крупнейших автомобильных брендов в мире, но его веб-дизайн граничит с минимализмом, с простой цветовой палитрой и простой типографикой.

Почему какой-либо крупный бренд, особенно Toyota, должен использовать заниженный подход к дизайну страниц своего макета?

Есть компании, которым не нужно удивлять нас своими веб-сайтами.За годы создания своей репутации бренды стали неотъемлемой частью нашей коллективной души. Подобно тому, как эти компании смягчили свои корпоративные логотипы, они также меньше сосредотачиваются на том, чтобы привлекать внимание людей в Интернете.

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

11. Выберите боковую прокрутку

Хорошо, это не практика макета как таковая — но она влияет на то, как контент должен быть организован. Чтобы добиться этого, необходимо тщательно спланировать текст, изображения и другие элементы, а также управлять ими, чтобы правильно разместить сообщения в жестко ограниченном пространстве ».

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

И в этом примере Keus, компания по производству рюкзаков, все хорошо разнесена в дизайне с боковой прокруткой, который кажется лаконичным.

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

12. Вставные слайдеры

Ползунки-вкладыши выходят за рамки протокола проектирования и дают веб-дизайнеру больше творческой свободы за счет экономии места.

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

Здесь, на сайте энергетического напитка Mr. X, ползунки занимают ограниченное место на экране, но не теряются в макете:

13. CSS-сетка

Сетка CSS

, как и этот смайлик, созданный в Webflow, позволяет легко выравнивать элементы по горизонтальной и вертикальной оси.

Приятно видеть прогресс, достигнутый сетками. От темных веков таблиц до просвещения, которое принес flexbox, CSS grid открывает новый ренессанс. Это позволяет дизайнерам управлять расположением элементов по горизонтали и по вертикали, давая им более точный контроль над визуальными элементами и контентом.

Сетка

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

14. Продолжающийся рост жестокости

Персональный веб-сайт Бежамина Ретора с намеренно дрянным винтажным макетом и язвительным текстом подрывает нормы и штампы хорошего веб-дизайна таким образом, что ни один неспециалист не может сделать этого.

Оглядываясь на недавний дизайн, пять лет назад, можно увидеть, как далеко продвинулся веб-дизайн. Адаптивный дизайн, лучше организованный контент и более совершенная навигация сделали путешествие по сети более совершенным.

Но, как и всему, где технологии сделали что-то проще, всегда найдутся те, кто возьмется за дело. Тех, кто хочет взять все стандартизованное и ниспровергнуть.

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

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

Где вы хотите видеть развитие веб-дизайна?

Дизайнеры становятся настолько креативными, что трудно угнаться за разными подходами к уникальным макетам. Какие тенденции вы заметили? Что бы вы хотели, чтобы дизайнеры делали больше? Расскажите нам в комментариях ниже!

Что содержат обычные веб-макеты? — Изучите веб-разработку

При разработке страниц для вашего веб-сайта полезно иметь представление о наиболее распространенных макетах.

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

Сводка

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

Даже сейчас, с новым акцентом на мобильный Интернет, почти все основные веб-страницы состоят из этих частей:

Заголовок

Отображается вверху каждой страницы сайта. Содержит информацию, относящуюся ко всем страницам (например, название сайта или логотип), и простую в использовании систему навигации.

Основное содержание

Самый большой регион, содержащий контент, уникальный для текущей страницы.

Вещи сбоку

1) Информация, дополняющая основное содержание; 2) информация, совместно используемая подмножеством страниц; 3) альтернативная система навигации. Фактически, все, что не обязательно для основного контента страницы.

Нижний колонтитул

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

Эти элементы встречаются довольно часто во всех форм-факторах, но их можно расположить по-разному.Вот несколько примеров ( 1 представляет заголовок, 2 нижний колонтитул; A основное содержимое; B1, B2 элементы сбоку):

макет в 1 столбец. Особенно важно для мобильных браузеров, чтобы не загромождать маленький экран.

2-х колоночная компоновка. Часто используется для нацеливания на планшеты, так как у них экран среднего размера.

Трехколонная раскладка . Подходит только для настольных компьютеров с большими экранами.(Даже многие пользователи настольных компьютеров предпочитают просматривать объекты в маленьких окнах, а не в полноэкранном режиме. )

Настоящее веселье начинается, когда вы начинаете смешивать их все вместе:

…

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

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

Активное обучение

Активного обучения пока нет. Пожалуйста, рассмотрите возможность участия.

Более глубокое погружение

Рассмотрим еще несколько конкретных примеров, взятых с известных сайтов.

Компоновка в одну колонку

Приложение Invision . Типичный макет с одним столбцом, отображающий всю информацию линейно на одной странице.

Довольно просто. Просто помните, что многие люди по-прежнему будут просматривать ваш сайт с компьютеров, так что сделайте свой контент пригодным для использования / чтения и там.

Двухколонный макет.

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

В этом примере посмотрите на изображение (B1) прямо под заголовком. Он связан с основным контентом, но основной контент имеет смысл и без него, поэтому вы можете рассматривать изображение либо как основное, либо как побочное содержимое. Это не имеет значения. Важно то, что если вы поместите что-то прямо под заголовок, это должно быть либо основное содержимое, либо , непосредственно связанное с основным содержимым.

Это ловушка

MICA .Это немного сложнее. Похоже на трехколоночную раскладку …

… но это не так. B1 и B2 плавают вокруг основного контента. Запомните слово «float» — оно станет сигналом, когда вы начнете изучать CSS.

Почему вы думаете, что это макет из трех столбцов? Потому что изображение в правом верхнем углу имеет L-образную форму, потому что B1 выглядит как столбец, поддерживающий смещенное основное содержание, и потому что буквы «M» и «I» логотипа MICA создают вертикальную силовую линию.

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

Более сложная компоновка

Парижская опера.

В основном макет из двух столбцов, но вы заметите много настроек, которые визуально разбивают макет. В частности, заголовок перекрывает изображение основного контента. То, как изгиб меню заголовка совпадает с кривой внизу изображения, заголовок и основное содержимое выглядят как одно, хотя технически они совершенно разные.Пример Opera выглядит более сложным, чем пример MICA, но на самом деле его легче реализовать (хорошо, «легкий» — это относительная концепция).

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

8 типов веб-сайтов и способы их создания

Внимание к дизайну веб-сайтов имеет решающее значение для построения вашего бизнеса.В настоящее время в сети насчитывается около 1,7 миллиарда веб-сайтов, которые предоставляют множество различных типов веб-сайтов для изучения, но также много путаницы в отношении того, какой тип и дизайн на самом деле подойдут вам лучше всего.

Иллюстрация OrangeCrush

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

Вот 8 различных типов веб-сайтов:

1. Домашние страницы
—

Домашняя страница — это главный центр вашего сайта и лицо бренда.

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

Домашняя страница может принимать самые разные формы, но при разработке важно помнить о назначении домашней страницы в качестве основной навигации и объекта интереса для посетителей сайта.Дайте понять, что это за бизнес, и заранее предложите уникальное ценностное предложение (UVP). Установите иерархию сайта и структуру навигации на главной странице. Используйте цветовую палитру, логотип и изображения вашего бренда, наиболее актуальные для вашего бизнеса. Домашняя страница задает тон имиджу компании, поэтому она должна рассказывать историю о вас с помощью изображений и слов.

Via Matcha Kari

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

2. Сайты журналов
—

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

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

Via Urban Omnibus

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

3. Сайты электронной торговли
—

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

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

Via Flipkart

Легкий способ начать — использовать полнофункциональную платформу электронной коммерции, такую ​​как Shopify или Squarespace. Ваша команда может легко обновить онлайн-инвентарь и перечислить новые продукты. Кроме того, поскольку система взаимосвязана, продажи, логистика и маркетинг постоянно находятся в курсе того, что работает хорошо. Что касается дизайна, платформы электронной коммерции предлагают несколько шаблонов, которые соответствуют потребностям практически любого типа бизнеса.

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

4. Блоги
–

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

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

Via Nourish Eats

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

5. Сайты-портфолио
—

Сайт-портфолио позволяет творческим профессионалам продемонстрировать свои лучшие работы. Это идеально подходит для художников, писателей, дизайнеров, кинорежиссеров, производителей мебели — что угодно.

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

Via Gautier Maillard

Интернет-портфолио дизайнера Gautier Maillard — это идеальное сочетание творчества и лучших проектов. Когда пользователь прокручивает страницу вниз, выделяются разные изображения.Нажмите на любое изображение, и вы увидите рекламные кампании из проекта. Если вы хотите узнать больше о дизайнере, нажмите кнопку навигации в правом верхнем углу и узнайте, что он живет в Париже, где учился и над какими проектами работал. Этот макет и стратегия работают, потому что основное внимание уделяется его реальной работе, а текст ограничен. Пользователи обрабатывают и запоминают изображения лучше, чем текст.

6. Целевые страницы
—

Целевая страница — это страница определенного типа, созданная для маркетинговой кампании, которая побуждает посетителей совершить определенное действие.

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

Через Shopify

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

7. Социальные сети
—

Около 2,77 миллиарда человек пользуются социальными сетями с десятками различных платформ. Независимо от того, кто ваша целевая аудитория, вы, вероятно, найдете их в Facebook, Twitter, Instagram, Snapchat или LinkedIn. Хотя вы не можете изменить дизайн самих платформ, у вас есть некоторый контроль над внешним видом своей страницы и вы можете создавать контент, который стимулирует публикации в социальных сетях.

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

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

Через Nutella в Facebook

На странице Nutella в Facebook показано интересное сочетание контента, который соответствует общей цветовой палитре и внешнему виду бренда.В них есть мемы, созданные специально для социальных сетей, например «Сегодня я поделюсь своей Nutella с…». Однако они также предлагают видео и идеи о том, как использовать свой продукт уникальным образом. Обратите внимание, что на их веб-сайтах есть кнопки социальных сетей, чтобы пользователи могли легко находить их на разных платформах.

8. Справочник и контактные страницы
—

Каталог или страница контактов — это место, где пользователи могут связаться с вами или другими людьми.

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

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

Via Manta

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

Выберите подходящий тип сайта для своей аудитории
—

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

Адаптивность и макет — Визуальный дизайн — iOS — Руководство по человеческому интерфейсу

Адаптивность и макет

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

Размеры и ориентация экрана устройства

Устройства

iOS имеют различные размеры экрана и могут использоваться как в портретной, так и в альбомной ориентации. В устройствах с диагональю от края до края, таких как iPhone X и iPad Pro, дисплей имеет закругленные углы, которые точно соответствуют габаритным размерам устройства. Другие устройства, такие как iPhone SE и iPad Air, имеют прямоугольный дисплей.

Если ваше приложение работает на определенном устройстве, убедитесь, что оно работает на экране любого размера для этого устройства. Другими словами, приложение только для iPhone должно запускаться на экране iPhone любого размера, а приложение только для iPad должно работать на экране iPad любого размера.

, 4 дюйма

Устройство	Размеры (книжные)
iPad Pro 12,9 дюйма	1024×1366 pt (2048×2732 пикселей @ 2x)
iPad Pro 11 дюймов	834×1194 pt (1668×2388 пикселей @ 2x)
iPad Pro 10,5 дюйма	834×1194 pt (1668×2388 пикселей @ 2x)
9.7-дюймовый iPad Pro	768×1024 pt (1536×2048 пикселей @ 2x)
iPad mini, 7,9 дюйма	768×1024 pt (1536×2048 пикселей @ 2x)
iPad Air 10,5 дюйма	834×1112 pt (1668×2224 px @ 2x)
iPad Air, 9,7 дюйма	768×1024 pt (1536×2048 пикселей @ 2x)
iPad 10,2 дюйма	810×1080 pt (1620×2160 пикселей @ 2x)
iPad 9,7 дюйма	768×1024 pt (1536×2048 пикселей @ 2x)
iPhone 12 Pro Max	428×926 pt (1284×2778 пикселей @ 3x)
iPhone 12 Pro	390×844 pt (1170×2532 пикселей @ 3x)
iPhone 12	390×844 pt (1170×2532 пикселей @ 3x)
iPhone 12 mini	375×812 pt (1125×2436 пикселей @ 3x)
iPhone 11 Pro Max	414×896 pt (1242×2688 пикселей @ 3x)
iPhone 11 Pro	375×812 pt (1125×2436 пикселей @ 3x)
iPhone 11	414×896 pt (828×1792 пикселей @ 2x)
iPhone XS Max	414×896 pt (1242×2688 пикселей @ 3x)
iPhone XS	375×812 pt (1125×2436 пикселей @ 3x)
iPhone XR	414×896 pt (828×1792 пикселей @ 2x)
iPhone X	375×812 pt (1125×2436 пикселей @ 3x)
iPhone 8 Plus	414×736 pt (1080×1920 пикселей @ 3x)
iPhone 8	375×667 pt (750×1334 пикселей @ 2x)
iPhone 7 Plus	414×736 pt (1080×1920 пикселей @ 3x)
iPhone 7	375×667 pt (750×1334 пикселей @ 2x)
iPhone 6s Plus	414×736 pt (1080×1920 пикселей @ 3x)
iPhone 6s	375×667 pt (750×1334 пикселей @ 2x)
iPhone 6 Plus	414×736 pt (1080×1920 пикселей @ 3x)
iPhone 6	375×667 pt (750×1334 пикселей @ 2x)
4. 7-дюймовый iPhone SE	375×667 pt (750×1334 пикселей @ 2x)
iPhone SE	320×568 pt (640×1136 пикселей @ 2x)
iPod touch 5-го поколения и новее	320×568 pt (640×1136 пикселей @ 2x)

ПРИМЕЧАНИЕ Все масштабные коэффициенты в таблице выше являются масштабными коэффициентами UIKit, которые могут отличаться от собственных масштабных коэффициентов. Рекомендации для разработчиков см. В разделах scale и nativeScale.

Чтобы узнать, как разрешение экрана влияет на оформление вашего приложения, см. Размер и разрешение изображения.

Автоматическая компоновка

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

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

См. Руководство для разработчиков в Auto Layout Guide и UITraitCollection.

Руководства по расположению и безопасная зона

Направляющие макета

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

Соблюдайте безопасную область и поля макета, определенные UIKit. Эти руководства по макету обеспечивают правильную вставку в зависимости от устройства и контекста. Безопасная область также предотвращает перекрытие содержимым строки состояния, панели навигации, панели инструментов и панели вкладок. Стандартные виды, предоставляемые системой, автоматически принимают руководство по компоновке безопасной зоны.

Для руководства разработчика см. UILayoutGuide, layoutMarginsGuide, readableContentGuide и safeAreaLayoutGuide.

Классы размеров

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

Вид может иметь любую комбинацию классов размеров:

• Стандартная ширина, стандартная высота
• Компактная ширина, компактная высота
• Стандартная ширина, компактная высота
• Компактная ширина, стандартная высота

Как и в случае с другими вариантами среды, iOS динамически корректирует макет в зависимости от классов размера области содержимого.Например, когда класс вертикального размера изменяется с компактной высоты на обычную — возможно, из-за того, что пользователь повернул устройство с альбомной на портретную ориентацию — панели вкладок могут стать выше.

Классы размеров устройства

Различные комбинации классов размера применяются к полноэкранному режиму на разных устройствах в зависимости от размера экрана.

, 9 дюймов

Классы размеров для многозадачности

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

Вид с разделением на 2/3

Вид в разрезе 1/2

1/3 окна

Общие сведения о компоновке

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

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

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

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

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

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

Обеспечивает достаточное количество сенсорных элементов для интерактивных элементов. Старайтесь поддерживать минимальную область касания 44 x 44 пункта для всех элементов управления.

iPhone 4,7 дюйма

5,8-дюймовый iPhone

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

ПРИМЕЧАНИЕ. По умолчанию контроллеры представлений поддерживают все ориентации на iPad и все ориентации, кроме перевернутой книжной ориентации на iPhone (руководство разработчика см. В разделе supportedInterfaceOrientations). Некоторые устройства, например iPhone X, не поддерживают перевернутый портретный режим, независимо от того, поддерживает ли его ваше приложение.

Применяйте поля для удобочитаемости при отображении текста на больших устройствах. Эти поля сохраняют текстовые строки достаточно короткими, чтобы обеспечить удобство чтения.

Адаптация к изменениям контекста

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

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

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

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

Стремитесь поддерживать iPad и iPhone. Люди ценят гибкость для запуска вашего приложения на любом типе устройства iOS. Если для определенных функций вашего приложения требуется оборудование для iPhone, например телефония, рассмотрите возможность скрытия или отключения этих функций на iPad и предоставления людям возможности использовать другие функции вашего приложения.

Полноэкранное изображение устройства 4,7 дюйма

Обрезка на устройстве 5,8 «

Леттербоксинг на 5,8-дюймовом аппарате

Полноэкранное изображение устройства 5,8 дюйма

Обрезка на 4,7-дюймовом устройстве

Пилларбоксинг на устройстве 4,7 дюйма

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

Создание полноэкранного режима

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

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

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

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

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

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

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

Разрешить автоматическое скрытие индикатора для экономного доступа к главному экрану. Когда включено автоматическое скрытие, индикатор гаснет, если пользователь не касался экрана в течение нескольких секунд. Он появляется снова, когда люди снова касаются экрана. Это поведение следует включать только для пассивного просмотра, такого как воспроизведение видео или слайд-шоу фотографий.

Дополнительные рекомендации по компоновке

Убедитесь, что ваш веб-сайт отлично смотрится на безрамочном просмотре. См. Раздел «Создание веб-сайтов для iPhone X» на веб-сайте webkit.org.

Размер и макет веб-страницы

Высота, ширина и выравнивание страницы

До того, как смартфоны и планшеты стали популярными, веб-дизайнеры создавали страницы фиксированной ширины, которые работали на экранах наиболее распространенных размеров — обычно 1024 пикселей в ширину и 768 пикселей в высоту. Все изменилось примерно в 2013 году с резким увеличением использования iPhone для просмотра веб-страниц. Сейчас нет однозначного ответа на вопрос «какого размера должен быть мой сайт?» — все веб-сайты должны быть отзывчивыми.

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

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

Проблемы мобильного дизайна

Большинство планшетов могут без проблем отображать неотвечающие веб-страницы, но у мобильных устройств есть несколько проблем:

• Форма экрана — большинство пользователей смартфонов держат телефон вертикально, в портретном режиме . Это означает, что экран выше ширины, в отличие от настольного компьютера или ноутбука.
• Размер экрана — смартфоны имеют очень маленькие экраны по сравнению с настольными компьютерами, поэтому дизайнерам необходимо упростить страницы. Разные модели имеют разные размеры экрана, но, как правило, стремитесь к максимальной ширине 340 пикселей для мобильного портретного дизайна.
• Взаимодействие с пользователем — в мобильных телефонах нет мыши, поэтому эффекты, появляющиеся «при наведении» или «размытии», не работают.
• Navigation — большинство веб-сайтов, как правило, имеют полноразмерную верхнюю панель навигации, которая вообще не работает на смартфоне в портретном режиме.
• Более низкая пропускная способность — это зависит от того, находитесь ли вы в центре города или в сельской местности, но мобильные пользователи, использующие сотовую связь (подключающиеся к Интернету с использованием «данных»), могут иметь более низкую скорость Интернета. Вы можете заменить полноэкранное фоновое видео в мобильной версии своего сайта.

Реагирует на помощь

Адаптивный дизайн решает эти задачи, позволяя дизайнерам адаптировать свои веб-страницы к различным устройствам. Мы используем два основных понятия:

• Гибкие макеты — эти веб-страницы легко масштабируются от размера настольного компьютера до мобильного браузера.Это технически более сложно, поскольку требует, чтобы страница хорошо смотрелась при любом мыслимом размере
• Несколько макетов — это более простая версия, в которой создаются разные дизайны для наиболее распространенных размеров экрана, например большие настольные компьютеры, небольшие ноутбуки и iPad, а также мобильные устройства в портретном режиме. Для iPad в портретном режиме может быть промежуточный размер.

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

Нет складки

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

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

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

Изменение моды и удобство использования

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

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

Чтобы понять, для чего нужны отдельные элементы страницы и зачем они вам нужны, прочтите нашу анатомию веб-страницы.

Наш адаптивный дизайн

Мы предпочитаем несколько макетов из соображений стоимости.Наши адаптивные веб-сайты обычно бывают трех размеров, которые подробно описаны ниже на примере школ Корнуолла.

Большие настольные компьютеры

Макет рабочего стола имеет ширину 1200 пикселей и поэтому подходит для экранов настольных компьютеров (обычно 1366 на 768 пикселей или больше), а также для ноутбуков большего размера. Дизайн находится посередине страницы, с пустым пространством слева и справа.

Ноутбуки и iPad

Макет iPad имеет ширину 970 пикселей, что хорошо помещается на экране iPad в альбомной ориентации с небольшим белым пространством слева и справа.Этот дизайн также подходит для небольших ноутбуков и старых компьютеров с размером экрана 1024 на 768 пикселей. Он также отображается на смартфонах в альбомной ориентации.

Этот макет имеет точно такую ​​же функциональность, что и макет рабочего стола, но все уменьшено, чтобы соответствовать меньшему экрану.

Мобильные устройства

Макет для мобильных устройств подходит для iPhone и других смартфонов в портретном режиме при ширине 340 пикселей. Как видите, есть некоторые различия в макете, и функциональность часто упрощается, чтобы пользователи могли взаимодействовать с веб-сайтом с помощью пальцев — кнопки обычно больше.На веб-сайте часто есть всплывающая гамбургерная навигация, которая заменяет основную панель навигации вверху, хотя на этой нет.

Сводка

Итак, на вопрос «какого размера должен быть мой веб-сайт?» Не существует однозначного ответа.