Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Дизайн в стиле web 2.0

No description
by

Annie Khlyzova

on 4 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Дизайн в стиле web 2.0

Welcome to web 2.0!
Рассмотрим основные черты дизайна в стиле web 2.0 Дизайн в стиле web 2.0 Простота Небольшое количество колонок Отдельная шапка Отказ от дополнительных декоративных элементов радикально упрощает и концентрирует внимание пользователя на чем-то важном. Центральное выравнивание Чем меньше колонок, тем проще дизайн, мы передаем меньше информации, но более надежным способом. На каждом сайте, брендинг и навигация должны быть очевидными, четкими и ясными. Всегда следует размещать логотип вверху страницы, а основную навигацию сразу после него. Верхняя часть страницы как бы говорит «Это верхняя часть страницы», это и так очевидно, но всегда приятно точно знать, где начинается страница. Вот пример дизайна, который страдает от излишнего усложнения Интерфейс Yaxay использует много графики, но в основном в качестве декораций как часть фона. Сравнительно немного элементов предназначены для пользователя, чтобы он мог найти и понять информацию или взаимодействовать с сайтом. Теперь на подавляющем большинстве сайтов основной объем информации расположен по центру экрана. Это не только позволяет видеть привычное размещение в любом браузере, но и упрощает восприятие за счет визуальной легкости. 37Signals использует две колонки, хороший пример простого дизайна. Apple это другой лидер в простоте и элегантности. Рекомендовано не использовать больше 3 колонок, но всегда есть исключения. Вот пример, где более трех колонок используются очень удачно. Popurls.com содержит много информации. В нижней части, показаны эскизы популярных изображений с сайта Flickr и видео с Youtube. Здесь используется множество колонок, но это не доставляет неудобств. А на этом примере шапка просто находится за пределами блока с основным содержанием. Выделение областей цветом Многие сайты используют цвет, чтобы обозначить свои функциональные зоны. Дизайн должен быть разработан так, чтобы эти области четко различались. Опасность использования ярких цветов в том, что они могут отвлечь внимание от других важных элементов сайта, в то же время, размещение контента на белом фоне делает его более читабельным и упрощает просмотр. Простая навигация Постоянная навигация — это глобальная навигация по сайту, которая доступна на каждой его странице, она должна быть заметной и простой в использовании. Навигация должна давать пользователю полезную информацию (где он, куда он может перейти, какие сервисы ему доступны). Четкие логотипы Чтобы сайт запомнился, у него должен быть яркий и четкий логотип. эти логотипы стремятся быть большими в соответствии с главными принципами дизайна в стиле 2.0 Крупный текст Масса сайтов в стиле 2.0 используют крупные шрифты, похожие на те, что были в сайтах старого стиля. Крупные элементы более заметны, этот эффект используется на протяжении всей истории печатного дизайна, в названиях, титульных страницах и заголовках. Крупный текст не только хорошо выделяется, он еще и доступен для большего количества пользователей (для тех, у кого проблемы со зрением). Крупный вводный текст Множество сайтов начинают использовать крупные вводные тексты. Часто они сделаны графикой, а не текстом, это делается с целью более полного контроля над визуальной работой страницы, особенно при беглом просмотре. Яркие цвета Яркие цвета привлекают внимание, поэтому их можно использовать, чтобы выделить основные области и обратить внимание посетителя на наиболее важные элементы. Colorschemer разделяет страницу с помощью лент интенсивного, веселого цвета на нейтральном фоне. На этом сайте продается верхняя одежда исключительно для женщин, и мягкие цвета подчеркивают такую направленность бренда. Нужно быть осторожным при использовании ярких цветов! Приятный дизайн скомпрометирован использованием больших пространств интенсивного цвета за пределами основной зоны страницы. В результате взгляд отвлекается от контента. 3D эффекты Большинство сайтов в стиле Web 2.0 используют легкие 3d эффекты, чтобы придать дизайну более качественный вид.
Реалистичные эффекты, такие как тени, градиенты и отражения помогают сделать интерфейс более реальным, солидным и законченным. 3D эффекты, очень сильно привлекающие внимание пользователей, должны использоваться обдуманно и преимущественно, чтобы подчеркнуть основные элементы страницы. Градиенты Градиенты смягчают области, которые иначе пришлось бы сделать однотонными. Они могут создать иллюзию объемной поверхности. Градиенты могут быть использованы, чтобы сделать цвет ярче или темнее, что может быть полезно для передачи настроения. При применении в фоне страницы они могут создать иллюзию пространства. Оражения Иллюзия отражения - одно из наиболее распространенных применений градиентов (самые распространенные: блики и эффект полированного стола). Бликов можно добиться разными способами. Например, эта блестящая кнопка из cafepress.com использует закругленное отражение, объем придается с помощью постепенного затухания блика. Первым этот эффект применил Apple. Оригинальные иконки Иконки играют важную роль в Web 2.0 дизайне. Иконки могут быть полезны, если они легко узнаваемы и их смысл однозначен. Во всех остальных случаях просто текст гораздо эффективнее. Вот некоторые примеры различных стилей иконок: Аккуратные и опрятные Причудливые Высокодетализированные Вспышки звездочки Это ярлычки или бирки в виде звездочек, которые приклеены к странице, чтобы предупредить посетителя о чем-то важном, часто они используются в ценниках, если нужно подчеркнуть низкую цену товара. Рекомендовано использовать одну на страничку. Конец! Мы рассмотрели основные черты дизайна web 2.0.
Спасибо за просмотр!
Full transcript