SlideShare a Scribd company logo
1 of 57
Download to read offline
Принципы композиции и модульные сетки при
          проектировании сайтов




  October, 7 2011
  Мария Чайкина
  Usabilitylab
Почему одни сайты кажутся
приятными и гармоничными,
а другие нет?
ЗОЛОТОЕ
    СЕЧЕНИЕ
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
1,618…
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
по горизонтали   1,618…
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
Числа и спираль Фибоначчи




 1 1 2 3 5 8 13 21
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
Закон направления движения

   От темного к светлому

   Сохранение начатого направления движения
   взгляда

   Движение вдоль линий и по указателям

   Взгляд идет туда, куда смотрит человек на
   фотографии
   Движение от более контарстных объектов к
   менее контрастным
Чего ты хочешь?
   Кушать
   Домой
   Чтобы докладчик не мешал спать
МАСШТАБ

 &

  РАЗМЕР  имеет значение
Понятно ли какого размера эти устройства?
КАКОЕ УСТРОЙСТВО БОЛЬШЕ?
           А теперь?
Почему же мы это не показываем?
КАКОЕ УСТРОЙСТВО БОЛЬШЕ?
Используйте указатели масштаба

              В данном случае –
              человек, держащий
              устройство, работает
              как Указатель масштаба
Исправляем
ЗАКОН
   О
БЛИЗ СТИ
С кем эта девушка?
С кем эта девушка?




Объекты, расположенные близко друг
к другу, воспринимаются связанно.
                           *ководство
Что запостил
polotra_bora?
К чему относится ссылка
   Драма “Близость”?
КОНТРАСТ
Контраст нужен, чтобы

обратить
внимание
Способы достижения контраста

   Размер

   Форма

   Цвет


   Расположение

   Фактура и текстура
Форма




Цвет



       Фактура и текстура
Вы можете прочитать текст?
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
МОДУЛЬНЫЕ
    СЕТКИ
В удаве 38 попугаев. Попугай –
это модуль сетки!
*статья Алексея Черенкевича
Задачи сетки


   Ускорение работы


   Сбалансированность и пропорциональность


   Ускорение и шаблонирование


   Единообразность элементов
Колончатая сетка
Модульная сетка с одинаковыми модулями
Модульная сетка с разными модулями
Берем «холст» шириной 980 px
Определяем микромодуль
текст
Определяем микромодуль
Создаем композицию
Создаем композицию
Создаем композицию
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов
Thank you
   Спасибо за внимание


     Чайкина Мария
m.chaikina@usabilitylab.net

More Related Content

Viewers also liked

Viewers also liked (10)

днз №34 на сайт
днз №34 на сайтднз №34 на сайт
днз №34 на сайт
 
SEOGuardian - Lencería Online - Informe SEO y SEM
SEOGuardian - Lencería Online - Informe SEO y SEMSEOGuardian - Lencería Online - Informe SEO y SEM
SEOGuardian - Lencería Online - Informe SEO y SEM
 
Pizza do amor
Pizza do amorPizza do amor
Pizza do amor
 
Glenthorne Media Academy
Glenthorne Media AcademyGlenthorne Media Academy
Glenthorne Media Academy
 
Quy chế quản lý chất lượng thuốc tt09
Quy chế quản lý chất lượng thuốc tt09Quy chế quản lý chất lượng thuốc tt09
Quy chế quản lý chất lượng thuốc tt09
 
Mevoyalacama
MevoyalacamaMevoyalacama
Mevoyalacama
 
Programma dettagliato corso chirurgia orale sicoi cfco 2013
Programma dettagliato corso chirurgia orale sicoi cfco 2013Programma dettagliato corso chirurgia orale sicoi cfco 2013
Programma dettagliato corso chirurgia orale sicoi cfco 2013
 
Carta de Referencia Miguel Merino Gil
Carta de Referencia Miguel Merino GilCarta de Referencia Miguel Merino Gil
Carta de Referencia Miguel Merino Gil
 
into the full blooming of objects
into the full blooming of objectsinto the full blooming of objects
into the full blooming of objects
 
Athletic Business 2013 - San Diego - Technology's Approaching Impact on the ...
Athletic Business 2013 - San Diego -  Technology's Approaching Impact on the ...Athletic Business 2013 - San Diego -  Technology's Approaching Impact on the ...
Athletic Business 2013 - San Diego - Technology's Approaching Impact on the ...
 

Similar to User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов

Егор Стремоусов. Модульная сетка: Что? Где? Когда?
Егор Стремоусов. Модульная сетка: Что? Где? Когда?Егор Стремоусов. Модульная сетка: Что? Где? Когда?
Егор Стремоусов. Модульная сетка: Что? Где? Когда?Egor Stremousov
 
Проектирование графических интерфейсов лекция 8
Проектирование графических интерфейсов лекция 8Проектирование графических интерфейсов лекция 8
Проектирование графических интерфейсов лекция 8Technopark
 
Тема 3. Модели и закономерности систем
Тема 3. Модели и закономерности системТема 3. Модели и закономерности систем
Тема 3. Модели и закономерности системСергей Солнечный
 
Иду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. МоскваИду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. МоскваMaxim Gaponov
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайнеEkaterina Andreeva
 
Гештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиковГештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиковRinat Shaikhutdinov
 
Майнд-карты: как меньше отвлекаться
Майнд-карты: как меньше отвлекатьсяМайнд-карты: как меньше отвлекаться
Майнд-карты: как меньше отвлекатьсяAlexei Burba
 

Similar to User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов (8)

Grids
GridsGrids
Grids
 
Егор Стремоусов. Модульная сетка: Что? Где? Когда?
Егор Стремоусов. Модульная сетка: Что? Где? Когда?Егор Стремоусов. Модульная сетка: Что? Где? Когда?
Егор Стремоусов. Модульная сетка: Что? Где? Когда?
 
Проектирование графических интерфейсов лекция 8
Проектирование графических интерфейсов лекция 8Проектирование графических интерфейсов лекция 8
Проектирование графических интерфейсов лекция 8
 
Тема 3. Модели и закономерности систем
Тема 3. Модели и закономерности системТема 3. Модели и закономерности систем
Тема 3. Модели и закономерности систем
 
Иду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. МоскваИду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. Москва
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайне
 
Гештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиковГештальт-принципы дизайна для разработчиков
Гештальт-принципы дизайна для разработчиков
 
Майнд-карты: как меньше отвлекаться
Майнд-карты: как меньше отвлекатьсяМайнд-карты: как меньше отвлекаться
Майнд-карты: как меньше отвлекаться
 

More from Maria Chaykina

Мастер-класс по юзабилити-тестированию
Мастер-класс по юзабилити-тестированиюМастер-класс по юзабилити-тестированию
Мастер-класс по юзабилити-тестированиюMaria Chaykina
 
РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...
РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...
РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...Maria Chaykina
 
The Eye Tribe – первый бюджетный eye tracker
The Eye Tribe – первый бюджетный eye trackerThe Eye Tribe – первый бюджетный eye tracker
The Eye Tribe – первый бюджетный eye trackerMaria Chaykina
 
Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...
Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...
Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...Maria Chaykina
 
Photo history: Travel of Mini Maria and Knedlik
Photo history: Travel of Mini Maria and KnedlikPhoto history: Travel of Mini Maria and Knedlik
Photo history: Travel of Mini Maria and KnedlikMaria Chaykina
 
Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)
Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)
Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)Maria Chaykina
 
Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...
Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...
Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...Maria Chaykina
 
Новые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазинов
Новые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазиновНовые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазинов
Новые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазиновMaria Chaykina
 
Дмитрий Сатин: Доклад об удобстве туристических сайтов
Дмитрий Сатин: Доклад об удобстве туристических сайтовДмитрий Сатин: Доклад об удобстве туристических сайтов
Дмитрий Сатин: Доклад об удобстве туристических сайтовMaria Chaykina
 
Mitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтва
Mitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтваMitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтва
Mitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтваMaria Chaykina
 
Интурмаркет 2013 Как сделать сайт туристической компании удобнее
Интурмаркет 2013 Как сделать сайт туристической компании удобнееИнтурмаркет 2013 Как сделать сайт туристической компании удобнее
Интурмаркет 2013 Как сделать сайт туристической компании удобнееMaria Chaykina
 
Как передать свои идеи через диаграммы
Как передать свои идеи через диаграммыКак передать свои идеи через диаграммы
Как передать свои идеи через диаграммыMaria Chaykina
 
Кто знает пользователей лучше их самих?
Кто знает пользователей лучше их самих?Кто знает пользователей лучше их самих?
Кто знает пользователей лучше их самих?Maria Chaykina
 
Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...
Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...
Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...Maria Chaykina
 
User Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетов
User Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетовUser Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетов
User Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетовMaria Chaykina
 
User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...
User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...
User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...Maria Chaykina
 

More from Maria Chaykina (16)

Мастер-класс по юзабилити-тестированию
Мастер-класс по юзабилити-тестированиюМастер-класс по юзабилити-тестированию
Мастер-класс по юзабилити-тестированию
 
РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...
РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...
РИФ+КИБ2015: Юзабилити кунг фу - Секретные техники улучшения поведенческих фа...
 
The Eye Tribe – первый бюджетный eye tracker
The Eye Tribe – первый бюджетный eye trackerThe Eye Tribe – первый бюджетный eye tracker
The Eye Tribe – первый бюджетный eye tracker
 
Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...
Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...
Сравнительное юзабилити-тестирование. Доклад на SQADays-2014: "Выбирай или пр...
 
Photo history: Travel of Mini Maria and Knedlik
Photo history: Travel of Mini Maria and KnedlikPhoto history: Travel of Mini Maria and Knedlik
Photo history: Travel of Mini Maria and Knedlik
 
Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)
Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)
Сайт турагентства, удобный для пользователей (tourplace сентябрь 2013)
 
Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...
Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...
Tourplace2013: Как самостоятельно провести юзабилити-тестирование (на примере...
 
Новые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазинов
Новые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазиновНовые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазинов
Новые аудитории - завоевать и удержать. Удобство (юзабилити) интернет-магазинов
 
Дмитрий Сатин: Доклад об удобстве туристических сайтов
Дмитрий Сатин: Доклад об удобстве туристических сайтовДмитрий Сатин: Доклад об удобстве туристических сайтов
Дмитрий Сатин: Доклад об удобстве туристических сайтов
 
Mitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтва
Mitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтваMitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтва
Mitt 2013: Влияние usability на взаимодействие с посетителями сайта турагентcтва
 
Интурмаркет 2013 Как сделать сайт туристической компании удобнее
Интурмаркет 2013 Как сделать сайт туристической компании удобнееИнтурмаркет 2013 Как сделать сайт туристической компании удобнее
Интурмаркет 2013 Как сделать сайт туристической компании удобнее
 
Как передать свои идеи через диаграммы
Как передать свои идеи через диаграммыКак передать свои идеи через диаграммы
Как передать свои идеи через диаграммы
 
Кто знает пользователей лучше их самих?
Кто знает пользователей лучше их самих?Кто знает пользователей лучше их самих?
Кто знает пользователей лучше их самих?
 
Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...
Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...
Доклад для конференции Маркетинг Недвижимости 2012 Eye tracking на примере са...
 
User Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетов
User Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетовUser Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетов
User Experience 2012, Удобство (юзабилити) сайтов по продаже авиабилетов
 
User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...
User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...
User Experience 2010: Где купить фоторужье, или как с помощью карточной сорти...
 

User Experience 2011: Принципы композиции и модульные сетки при проектировании сайтов