Студия TrofotoDesign разработала гайдлайн для сайта «Allterra Education». Гайдлайн (набор правил оформления веб-страниц) включает в себя следующие элементы: модульная сетка, зонирование, блоки, цветовая схема, графика, типографика, подача текстовой информации, отступы, ховеры, анимация, фотография.

 

Сайт компании Allterra Education разработан в студии TrofotoDesign

Модульная сетка 

В основе дизайна лежит 24-х колонная модульная сетка с разделителями в 20 пикселей.

 

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Модульная сетка

Зонирование | Типовые страницы 1

На главной странице под имиджевым изображением находятся 4 кнопки – основные разделы сайта (на главной странице отсутсвует навигационная цепочка). На страницах раздела на имиджевом изображении появляется название раздела, описание и кнопка «Посмотреть программы». На странице новости на имиджевом изображении появляются заголовок и дата. Подвал отчеркивается серыми линиями в 1px, доходящими до краев монитора/дисплея/окна браузера.

 

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Зонирование

Типовые страницы 1 | Главная страница, страница раздела, страницы новостей
 

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Зонирование

Типовые страница 1 | Главная страница 

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Зонирование

Типовые страницы 1 | 1. Страница раздела, 2. Страница новости

Зонирование | Типовые страницы 2

В левом сайд-баре находится информация разного типа («Страна», «Программы», «Полезная информация», дополнительные навигационные кнопки «Наверх», «Назад» и т. д.) Информацию можно добавлять/убавлять. В правом сайд-баре находятся только «Новости», «Статьи» и «Call-to-action buttons». Правый сайд-бар можно скрывать, если он не нужен. 

В обоих сайд-барах предусмотрена прокрутка. Подвал отчеркивается серыми линиями
в 1px, доходящими до сайд-баров.

 

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Зонирование

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела

allterra guideline 06

Типовые страница 2 | Страница учебного заведения

Блоки | Типовые страницы 1

На мониторах с разрешением экранов «1680px +» поле контента и подвал остаются фиксированной ширины – 780px. Высота имиджевого изображения – 600px (если высота окна браузера больше 1220px), 500px (если высота окна браузера меньше 1220px), 400px (если высота окна браузера меньше 960px). Высота имиджевого изображения на странице новости – 455px и 400px (если высота окна браузера меньше 960px).

 

Разработка гайдлайна для сайта «Allterra Education» выполнена в студии Trofotodesign

Типовые страницы 1 | Главная страница, страница раздела, страницы новостей

На мониторах с разрешением экранов «1366px–1024px» поле контента и подвал остаются фиксированной ширины (780px). Высота имиджевого изображения уменьшается до 500px. При высоте окна браузера меньше 960px высота имиджиевого изображения – 400px.

 

allterra guideline 08

Типовые страницы 1 | Главная страница, страница раздела, страницы новостей

На планшетах и смартфонах (разрешение дисплеев «768px–320px») вся информация верстается в одну колонку, меню сворачивается в «бургер». Высота имиджевого изображения – 300px. На смартфонах изображение становится квадратным. Некоторые элементы переносятся под изображение (описание раздела, кнопка «Каталог программ»). На странице новости заголовок и дата идут перед имиджевым изображением.

 

Разработка гайдлайна для сайта «Allterra Education» выполнена в студии Trofotodesign. Типовые страницы 1 | Главная страница, страница раздела, страницы новостейТиповые страницы 1 | Главная страница, страница раздела, страницы новостей

Типовые страницы 1 | Главная страница, страница раздела, страницы новостей

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Блоки

Типовые страницы 1 | Главная страница, страница раздела, страницы новостей | 1. Ширина 1920px, 2. Ширина 1280px, 3. Ширина 768px, 4. Ширина 320px

Блоки | Типовые страницы 2

На мониторах с разрешением экранов «1680px +» сайд-бары, поле контента и подвал остаются фиксированной ширины (сайд-бары – 310px, контент и подвал – 780px). На странице подраздела нет правого сайд-бара, компоновка остается такой же.

 

allterra guideline 11

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела

На мониторах с разрешением экранов «1366px–1280px» левый сайд-бар, поле контента
и подвал остаются фиксированной ширины (310px – сайд-бары, 780px – контент и подвал). Правый сайд-бар сворачивается до 100px (раскрывается до 310px при наведении курсора).

 

allterra guideline 12

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела

На мониторах с разрешением экранов «1024px» левый сайд-бар остается фиксированной ширины – 310px. Поле контента и подвал становится уже – 674px. Информация из правого сайд-бара перемещается под поле контента.

 

allterra guideline 13

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела

На планшетах и смартфонах (разрешения дисплеев «768px–320px») сайд-бары исчезают, вся информация верстается в одну колонку, меню сворачивается в «бургер». Информация из левого сайд-бара, в зависимости от важности, может появляться до/после контента или разделяться.

 

allterra guideline 14

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Блоки

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела | 1. Ширина 1920px, 2. Ширина 1280px, 3. Ширина 1024px

В студии TrofotoDesign разработан гайдлайн для сайта «Allterra Education». Блоки

Типовые страницы 2 | Страница страны, страница учебного заведения, страница подраздела | 1. Ширина 768px, 2. Ширина 320px

Цветовая схема

 

allterra guideline 17

1. Основные цвета | 2. Цвета разделов: «Каникулы с изучением языков», «Поступление в среднюю школу», «Поступление в университет», «Искусство и дизайн»

allterra guideline 18

Дополнительные цвета: 1. Цвет основного текста | 2. Цвет заголовков | 3. Цвет обводки форм, новостей, разделителей в сайд-барах и подвале | 4. Цвет разделительных линий на страницах

Графика

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

 

allterra guideline 19

Типографика

Основным и единственным шрифтом, используемым на сайте является «Gotham Pro» в трех начертаниях (light, regular, medium). Начертание «regular» используется только в пунктах меню и в тексте на кнопках, залитых цветом.

 

allterra guideline 20

 

allterra guideline 21

Подача текстовой информации

 

allterra guideline 22

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

allterra guideline 23

Пример подачи разнообразной текстовой информации: списки/пункты/таблицы.

allterra guideline 24

Пример подачи разнообразной текстовой информации: списки/пункты/таблицы.

allterra guideline 25

Пример подачи текстовой информации в таблице (расписание дня учащегося).

allterra guideline 26

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

allterra guideline 27

Пример свернутой/развернутой текстовой информации.

allterra guideline 28

Пример подачи текстовой информации в таблице – на десктпоной/планшетной версии и на версии для смартфонов.

Отступы

 

allterra guideline 29

1. 12px | 2/5/6. 35px | 3/4. 50px (такой же отступ у блоков новостей/статей/отзывов/задайте нам вопрос)

allterra guideline 30

1/4. 35px | Для версии для смартфонов – 16px | 2. 15px | 3/7. 16px | 5. 35px, для версии для смартфонов – 25px | 6. 6px

allterra guideline 31

Страница новости/статьи. 1. 40px | 2. 50px, на версии для планшетов навигационной цепочки нет, отступ от картинки – 40px, на версии для смартфонов отступ от картинки – 25px

allterra guideline 32

Страница новости/статьи. 1. 50px, на версии для смартфонов отступ – 25px | 2/5/6/7. 100px, на версии для смартфонов отступ – 60px | 3/4. 70px, на версии для смартфонов отступ – 40px

Ховеры

Ховер (hover) определяет стиль элемента при наведении на него курсора мыши.

 

allterra guideline 33

Изменение элементов интерфейса при наведении курсора | 1. #282828 | 2/8.  #2DBFCA | 3/7. #36A8B3 | 4/6. #EC243B | 5. #808080

allterra guideline 34

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

allterra guideline 35

Изменение элементов интерфейса при наведении курсора | 1/2. #EC243B, фотография увеличивается | 3. #B4B4B4

allterra guideline 36

Изменение элементов интерфейса при наведении курсора | 1/2/3. #EC243B | 4. #F0F0F0_multiply_100% | 5. #F5F5F5 | 6. #36A8B3 | 7. #282828

 allterra guideline 37

Изменение элементов интерфейса при наведении курсора | 1. #2DBFCA | 2. #EC243B

allterra guideline 38

Изменение элементов интерфейса при наведении курсора | 1. #B4B4B4 | 2. #EEEEEE | 3. #EC243B | 4. #3CBAC6

allterra guideline 39

Изменение элементов интерфейса при наведении курсора | 1. #EC243B | 2. #F5F5F5

allterra guideline 40

Изменение элементов интерфейса при наведении курсора | 1/2/3/5. #EC243B | 4. #B4B4B4 | 6. Градиент #FAFAFA–#FEFEFE по краям

allterra guideline 41

Изменение элементов интерфейса при наведении курсора | 1. #1E1E1E | 2. #232323

allterra guideline 42

Изменение элементов интерфейса при наведении курсора | 1. #1E1E1E | 2. #232323

Анимация интерфейса

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

 

allterra guideline 43

Выпадающее окно поиска | Параметры.

allterra guideline 44

Взаимодействие с карточками разделов | Параметры

allterra guideline 45

Выдвигающийся каталог | Параметры

allterra guideline 46
Выдвигающийся правый сайд-бар | Параметры

allterra guideline 47

«Бургер» меню, версия для планшетов | Параметры

allterra guideline 48

«Бургер» меню, версия для смартфонов | Параметры

Фотографии

Фотографии на сайте должны быть с цельной композицией. У фотографий, которые растянуты во всю ширину колонки – фиксированный размер 780x455 пикселей. С уменьшением ширины колонки на разных разрешениях фотографии уменьшаются, сохраняя пропорции.

 

allterra guideline 49

 

В центральной колонке допускается использование двух вертикальных фотографий. При ширине колонки 780px у фотографий фиксированный размер 380x515 пикселей. Расстояние между фотографиями – 20px. С уменьшением ширины колонки на разных разрешениях фотографии уменьшаются, сохраняя пропорции. 

 

allterra guideline 50

 

В центральной колонке допускается использование двух горизонтальных фотографий. При ширине колонки 780px у фотографий фиксированный размер 380x254 пикселей. Расстояние между фотографиями – 20px. С уменьшением ширины колонки на разных разрешениях фотографии уменьшаются, сохраняя пропорции. 

 

allterra guideline 51

 

В центральной колонке допускается использование одной вертикальной фотографии слева и сопроводительного текста справа. При ширине колонки 780px у фотографий фиксированный размер – 380x515 пикселей. Расстояние между фотографией и текстом – 80px. Ширина текстового блока 320px.

 

allterra guideline 52

 

На страницах новости/статьи допускается использование панорамной фотографии (до краев монитра/окна браузера), если она подходит по качеству. На разрешениях 1680px + высота у фотографии 455px. На меньших разрешениях высота фотографии равна высоте имиджевого изображения.

 

allterra guideline 53

 

На страницах новости/статьи для заголовка и даты используется фотография-подложка. Лучше использовать фотографии с равномерной композицией (1), чтобы было легче адаптировать изображение под разное разрешение. В зависимости от контраста шрифт может быть белым, либо #3C3C3C. Обработка картинок должна быть в одном стиле – на изображение накладывается слой темно-серого цвета с режимом наложения «Exclusion». Серый цвет подбирается индивидуально.

 

allterra guideline 54 

 


com_content-option
article-view
-layout
-task
129-itemid
Трофотодизайн-sitename