27
Design for People Alexandra Miracle Проектирование. Шаблон страницы

Проектирование. Шаблон страницы

Embed Size (px)

Citation preview

Designfor

People

Alexandra Miracle

Проектирование.Шаблон страницы

ПРИЕМЫ ФОРМАЛЬНОЙ КОМПОЗИЦИИ

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

Мозг устроен таким образом, что группирует сходные элементы.

Родченко, 1917 Рудольф Васильевич Паранюшкин

Признаки композиции: целостность, подчиненность главному второстепенного,уравновешенность. (визуальная иерархия)

http://www.merciame.ic24.net/Merciame.html

http://www.brakebillsu.com/lessons/00

http://www.wloks.com

http://www.adidas.co.uk

СКЕЛЕТ САЙТА

ШАПКА/HEADER

ТЕЛО/BODY

ПОДВАЛ/FOOTER

КОПИРАЙТ/COPYRIGHT

ПРИНЦИПЫ ГЕШТАЛЬТА

БЛИЗОСТЬПредметы, расположенные ближе друг к другу воспринимаются более как целостное,нежели чем удаленные.

http://www.apollo-magazine.com

СХОЖЕСТЬПредметы, имеющие схожие характеристики, воспринимаются более связанными, чем таковые,не имеющие данных характеристик.

www.themoscowtimes.com/news/

ПАРАЛЛЕЛИЗМПредметы, параллельные друг другу, более связанные, чем те, которые не параллельны.

http://www.doudoublues.com/histoire

ПРОДОЛЖЕНИЕТе элементы, которые находятся на одной прямой, воспринимаются как одно целое, чем элементы,которые вовне.

http://www.ulisiggmovie.com/en

СИНХРОННОСТЬПредметы, движущиеся в одном направлении воспринимаются более связанные, чем те,которые двигаются в ином или противоположном направлениях.

http://poc-sculpture.com/

ОБЩИЕ ОБЛАСТИОбъекты воспринимаются как единое целое, если они находятся в рамках одной замкнутой области.

http://www.rjsmith.co.uk/

ФОКУСНЫЕ ТОЧКИОбъекты с акцентом или отличием захватывают и удерживают внимание зрителя.

http://shft.run/

ОПЫТОбъекты воспринимаются на основе прошлого опыта наблюдателя.

http://www.gitman.com/

ЗАКОН ПРОСТОТЫЛюди воспринимают и интерпретируют неоднозначные или сложные изображения в самой простойиз возможных форм.

http://www.awwwards.com/sites/slay-your-next-giant/

ЗАМЫКАНИЕДостраивание объекта до цельного образа.

http://www.apple.com/

КОНТРАСТ

http://creogram.com/

АКЦЕНТ

http://www.brakebillsu.com/

Объекты располагаются в соответствии со значимостью.

БАЛАНС

http://www.apple.com/

РИТМ

http://mindful.com.sg/

СИММЕТРИЯ И ПОРЯДОК

http://mindful.com.sg/

Симметричные объекты создают ощущение плотности и порядка

http://sendthanks.to/

ВИЗУАЛЬНАЯ ИЕРАРХИЯ

Заголовок 1-го уровняЗаголовок 2-го уровня

Заголовок 3-го уровняЗаголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 1-го уровняЗаголовок 2-го уровняЗаголовок 3-го уровняЗаголовок 4-го уровняЗаголовок 5-го уровня

Why not?Les kiosques pour l'Édition 2016 du Suprême Laitier sont maintenant en vente ! Ne manquez pas la chance de faire connaître votre entreprise lors de cet événe-ment laitier d'envergure ! Contactez Jenny Henchoz pour plus d'informations, [email protected]

Why not?

Les kiosques pour l'Édition 2016 du Suprême Laitier sont maintenant en vente ! Ne manquez pas la chance de faire connaître votre entreprise lors de cet événe-ment laitier d'envergure ! Contactez Jenny Henchoz pour plus d'informations, [email protected]

Основной шрифт

Акцидентный

Corbel A a B b C c D d E e F f G g H h I i J j K k L l M m

MagistralC A a B b C c D d E e F f G g H h I i J j K k L l M m

Bold

Corbel A a B b C c D d E e F f G g H h I i J j K k L l M mRegular

Bold

MagistralC A a B b C c D d E e F f G g H h I i J j K k L l M m

Regular

ШРИФТОВАЯ ПАРА

http://fonts2u.comhttp://www.allfont.nethttps://www.1001fonts.comhttps://myfontscom

http://www.awwwards.comhttp://www.templatemonsters.comhttps://www.thebestdesigns.comhttps://creately.com

ДЕЛАЕМ САЙТ КИНОТЕАТРА

ДОМАШНЕЕ ЗАДАНИЕ

Сделать эскиз страницы сайта (свой и кинотеатра)Шрифтовая пара для 2-х заголовков (см. пример “Why not?”)Выбираем 2 примера со страницы http://www.awwwards.com/