В этом обзоре вы познакомитесь с каждой тенденцией и прекрасными примерами, которые вдохновят вас на создание следующего проекта.
1. Необычная планировка
Рисунок 1
2. Одностраничный макет
Рисунок 2
3. Многоколоночный макет
Рисунок 3
4. Огромные иллюстрации и яркая графика.
Рисунок 4
5. Больше пустого пространства, чем раньше
Рисунок 5
6. Элементы социального дизайна
Рисунок 6
7. Диалоговая навигация
Рисунок 7
8. Вкладка «Динамический»
Рисунок 8
9. Большое окно поиска.
Рисунок 9
10. Добавление визуальных эффектов к классификации
Рисунок 10
11. Аватар автора
Рисунок 11
12. Значки и визуальные подсказки
Рисунок 12
13. Индекс тегов (замена облака тегов)
Рисунок 13
14. Использование иллюстраций в блогах
Рисунок 14
15. Картина акварелью.
Рисунок 15
16. Рукописный ввод
Рисунок 16
17. Ретро
Рисунок 17
18. Используйте органические материалы, кирпичи и фотографии в качестве фона.
Рисунок 18
19. Маркировочная пломба
Рисунок 19
20. Ценник
Рисунок 20
21. Лента
Рис. 21.
Необычный макет.
Как было продемонстрировано в статье «40 инновационных дизайнерских макетов: необычный макет», опубликованной несколько месяцев назад, мы наблюдаем сильную тенденцию к более персонализированным и инновационным макетам. Вместо использования традиционных макетов, похожих на квадратные коробки, дизайнеры экспериментируют с новыми способами структурирования, представления и выражения информации.
В этих необычных макетах общий творческий подход зачастую более важен и запоминается, чем конкретное содержание. Тем не менее, удобство использования, типографику и визуальный дизайн редко упускаются из виду и выполняются с осторожностью. Инновационная верстка особенно популярна в крупных проектах, агентствах по дизайну веб-сайтов и рекламных сайтах (например, коммерческой деятельности крупных компаний), но она также популярна в блогах.
Рисунок 22.
Когда дело доходит до творчества, грань между полезным и непригодным дизайном очень размыта, поэтому тестирование юзабилити особенно важно, поскольку новая идея может сломать существующие вещи на веб-сайте; Часто хорошей идеей является баланс между креативным, классическим и традиционным дизайном, что означает попытку найти баланс между «неразрушимым» (или даже в конечном итоге скучным) удобным дизайном и креативным, но непригодным для использования дизайном. Помните, что идеям нужно время, чтобы вырасти: их переосмысливают, пересматривают, корректируют, уточняют и, в конечном итоге, интегрируют в ваш дизайн.
Дизайнерам настоятельно рекомендуется отойти от условностей традиционных макетов коробок и попробовать новые подходы и собственные смелые и сумасшедшие идеи. Продемонстрируйте свои таланты!
Рисунок 23
Рисунок 24
Рисунок 25
Рисунок 26
Рисунок 27
Рисунок 28.
Одностраничный макет
. Еще один способ, который дизайнеры часто используют, чтобы произвести впечатление на посетителей, — это так называемый одностраничный макет: в этом макете для представления содержимого веб-сайта используется одна страница. Это не обязательно означает, что эти проекты минималистичны (следуют принципу «лучше меньше, да лучше»). Напротив, такой дизайн зачастую очень сложен, содержит насыщенные изображения и яркие анимационные эффекты, поэтому загрузка занимает некоторое время.
Рисунок 32.
Когда пользователь нажимает на опцию навигации, страница изменяется (частично меняется), и новое содержимое http://www.knowsky.com появляется в области, где отображается предыдущее содержимое. Эффекты скольжения и прокрутки навигации в этом макете поддерживаются общедоступными библиотеками JavaScript.
Основное преимущество для пользователей заключается в том простом факте, что для получения нужной информации требуется меньше движений мыши и щелчков. Поскольку этот подход настолько нов, это отличная возможность для пользователей, которые могут запутаться при использовании нетрадиционной навигации. В некоторых ситуациях «статическая» версия может пригодиться или даже быть необходимой, например, вам придется предоставить другую версию для поисковых систем и пользователей, у которых отключен JavaScript;
Рисунок 33
Рисунок 34
Рис. 35.
Макет с несколькими столбцами.
Несколько столбцов (более трех столбцов) не обязательно означают сложный дизайн. С другой стороны, если они спроектированы правильно, несколько столбцов могут быть очень полезны для посетителей, поскольку они обеспечивают лучший обзор видимых параметров навигации, позволяя пользователям быстро находить нужную информацию.
За последние несколько лет мы стали свидетелями резкого роста содержания веб-сайтов, что привело к снижению внимания и времени, которые пользователи тратят на веб-сайт (подробности см. в ReadWriteWeb). Поэтому неудивительно, что дизайнеры пытаются найти более лаконичные способы подачи информации, чтобы посетители могли оставаться на сайте как можно дольше и легче находить контент.
Рисунок 36.
Один из способов добиться этого — использовать макет с несколькими соседними столбцами. Эта идея имеет смысл. За последние годы разрешение экрана увеличилось (однако ситуация может измениться, если такие нетбуки, как Asus Eee PC, станут широко доступными), что дает пользователям больше горизонтального пространства и дает дизайнерам дополнительное пространство для заполнения контента.
Результаты показывают, что все больше и больше дизайнеров используют в своих проектах все больше и больше столбцов. Наше исследование выявило сильную тенденцию к так называемым многоколоночным макетам, обычно с фиксированной шириной 850 пикселей на экране с разрешением 1000 пикселей. Несколько колонок часто используются в макетах журналов и крупных проектах. В этих макетах сетки часто используются для обеспечения структурного баланса, иерархии и порядка.
При использовании макета с несколькими столбцами важность активного белого пространства и между отдельными столбцами невозможно переоценить. (Активное пустое пространство намеренно оставлено пустым, чтобы лучше представить структуру страницы и подчеркнуть различные области контента.)
С этой целью дизайнеры часто используют «мантру Шнейдермана» («Сначала покажи общую картину, потом покажи детали»). Сначала дайте пользователю обзор функциональности, а затем предоставьте подробную информацию по запросу — позже, при нажатии на ссылку (яркий пример — Mozilla Labs).
Рисунок 37
Рисунок 38
Рисунок 39
Рисунок 29
Рисунок 30
Рисунок 31