среда, 18 мая 2011 г.

Web-дизайн 2011: основные тренды и направления


Дизайн сайта не может быть выбран исходя из модных веяний, но эти новые тренды говорят нам о новых технических возможностях веб-дизайна, поэтому игнорировать эту информацию нельзя. Особенно дизайнерам, которые делают дизайн и вёрстку на заказ.
Web-дизайн 2011: основные тренды и направления
1. Торжество CSS3 и HTML5
В течение последних нескольких лет можно было наблюдать медленное, но верное внедрение CSS3 и HTML5 в работу многих сайтов. Теперь наконец-то можно с уверенностью сказать, что CSS3 и HTML5 — выбор современного прогрессивного дизайнера! Всё больше людей выбирают именно эти инструменты для создания современного, с технической точки зрения, дизайна. Постепенно flash-сайты уходят в небытие. И хотя ещё рано говорить о полном крахе flash, ведь HTML5 пока не в силах заменить отдельные элементы flash-дизайна. Однако всё к тому идёт.
2. Дизайн, адаптированный под мобильные устройства
На волне всеобщей популяризации яблочных гаджетов, телефонов и КПК, дизайн сайтов стали адаптировать под мобильные устройства. Всё больше пользователей выходят в Интернет через свои телефоны и коммуникаторы. Это значит, что информация должна помещаться на небольшом экране портативного мобильного устройства. Такие сайты отличает минималистичная и облегчённая графика, удобный шрифт, который легко можно масштабировать и т.д. Многие крупные порталы даже создают специальные версии своих сайтов, предназначенные для загрузки на сенсорных мобильных устройствах. Дизайн, адаптированный под touch screen экраны — ещё одна тенденция нового web-дизайна.
Web-дизайн адаптация под мобильные устройства
3. Чистый цвет
Можно наблюдать в новом 2011 году такую тенденцию, как чистые цвета в дизайне. Часто это бывают  сайты, фоном которых выступает тот или иной цвет, графика минимальна, удобно расположены блоки с информацией и выбран хороший шрифт. В некоторых случаях фоном выступает красивое сочетание двух-трёх цветов, в гамме которых выполнен весь сайт. Такой подход к созданию дизайна выглядит очень свежо и оригинально. Главное тут — угадать с цветом или выбрать гармоничную палитру из 2-3 цветов, играя с оттенками.
Веб-дизайн - чистый цвет
Веб-дизайн - чистый цвет
4. Дизайн в духе газет и журналов
Эта тенденция в моде уже несколько лет. Многие выбирают такой стиль для своих сайтов. Отличительная особенность такого дизайна — крупные кричащие заголовки, грамотное размещение информации на странице, привлекательные иллюстрации. При просмотре такого сайта создаётся впечатление, что вы листаете модный журнал или читаете газету со свежими новостями.
Web-дизайн в духе газет и журналов
Web-дизайн в духе газет и журналов
Web-дизайн в духе газет и журналов
Web-дизайн в духе газет и журналов
5. Использование эффекта paralax
Это так называемые глубинные, объёмные или трёхмерные эффекты. Например, если дизайн сайта выполнен в виде комнаты, то у пользователя создаётся ощущение присутствия в этой комнате, иллюзия объёмности предметов на картинке. Так же, как и в кино-индустрии, 3D-эффект популярен в веб-дизайне. Интересен и эффект paralax-прокрутки, когда создаётся ощущение едва уловимого движения бэкграунда сайта при прокрутке страницы. Все эти манипуляции достигаются путём умелого использования CSS или библиотек Jquery.
Web-дизайн 2011 - использование эффекта paralax
Web-дизайн 2011 - использование эффекта paralax прокрутки
6. Использование QR-кодов
Многим владельцам web-money кошельков, использующих e-num способ авторизации, знакома технология использования QR-кодов. Достаточно лишь сфотографировать такой код камерой своего мобильного телефона, как вам тут же покажется число-ответ, необходимое для авторизации. Зачем же использовать эту технологию в веб-дизайне? На фоне всеобщей адаптации интернета под мобильные устройства наблюдается и внедрение QR-кодов в web-дизайн. Его используют для отображения аватарок в комментариях, для перенаправления пользователя на мобильную версию сайта и т.д.
Web-дизайн 2011 - использование QR-кода
7. Дизайн, рассчитанный под миниатюру
Компания Google ввела в свой поиск новую дополнительную возможность, помогающую пользователю сориентироваться в выдаче. Это возможность просмотра миниатюра сайта, на который может быть совершён переход. Миниатюра загружается при клике по изображению лупы справа от заголовка сайта в выдаче. Соответственно, если дизайн очень тяжёлый или полностью основан на flash-анимации, то при загрузке миниатюры возникнут проблемы.

По-прежнему пользуются популярностью, как и в прошлом году, огромные изображения и большие логотипы в шапке сайтов, а также использование больших фото в качестве бэкграундов. Можно отметить также тенденцию ухода от традиционных форм web-дизайна, таких как шапка, заголовок, меню, основное содержимое страницы. Всё больше дизайнеров выбирают новые формы отображения информации, ориентированные в первую очередь на изменяющееся разрешение экрана пользователя.

Памятка дизайнеру сайтов. Правила веб-дизайна.


Отличная статья Павла Колодяжного об основных правилах веб-дизайна.

Памятка дизайнеру сайтов

К сожалению огромная армия даже опытных, «модных» и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не только«супер-скриншот» годный только для портфолио.
Первоначально эта памятка писалась мною для внутреннего пользования но, обрастая материалами, выросла в самостоятельную статью. Америку я не открыл, а просто собрал воедино и сформулировал ряд требований, которые должен учитывать дизайнер в процессе проектирования и оформления сайта.

Вначале думаем, потом делаем

Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами.
Я настоятельно рекомендую всем и каждому: возьмите карандаш и бумагу. Подумайте над задачами и идеей сайта. Сделайте быстрые черновые эскизы, найдите композицию, приблизительную сетку, расположение блоков и элементов, почеркушки требуемых иллюстраций. И только после этого садитесь за компьютер.
Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.
Вначале думаем, потом делаем
Пример быстрого наброска и полученного результата

От большего к меньшему, от общего к частному

Это второе простое правило. И оно также часто нарушается.
Классическое преподавание рисунка и живописи учит: «Двигайтесь от большего к меньшему, от общего к частному. Вначале проработайте общую композицию, самые большие массы и объемы, самые крупные пятна, а потом дорабатывайте, уточняйте, насыщайте деталями.»
Это правило целиком применимо ко всем аспектам и жанрам дизайна.
Продумайте свой проект, найдите идею и композицию, нарисуйте серию эскизов. И потом, планомерно, эти эскизы воплощайте, начиная с сетки, компоновки блоков, элементов, крупных цветовых пятен. И последовательно насыщайте их деталями.
Пример пошагового уточнения и доработки макета
Пример пошагового уточнения и доработки макета от общего к частному.
Надо признать, что я часто видел, как художники-самоучки-самородки начинали писать портрет человека с глаза, или с пальца левой ноги. И не раз видел, как некоторые дизайнеры начинают рисовать сайт с какой-то одной-частной иконки. И в обоих случаях, к моему удивлению, получался интересный результат.
Но это долгий путь, часто требующий больших корректировок и переделок в процессе дизайна. Возможно, он применим для творчества, но в дизайне-профессии, когда в определенный срок нужно получить хороший результат, я считаю, что подобный подход недопустим. Нужны гарантированные технологии процесса, чтобы получать гаранитрованные результаты в четкие сроки. А не просто «получится-неполучится».
Итак, подытожим: «От большего к меньшему, от общего к частному».

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

Одно из первых решений в процессе создания дизайна — это модульная сетка. Единый каркас и схема расположения всех основных блоков и элементов, проходящий через все страницы сайта.
Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию.
Следование единой модульной сетке в рамках проекта не только увеличит цельность и логичность восприятия сайта, но и многократно упростит труд разработчикам.
Пример использования модульной сетки
Пример использования модульной сетки
Пример использования модульной сетки
Пример использования модульной сетки

Масштабируемость

В наше время, когда у всех пользователей самые различные мониторы, есть смысл делать преимущественно «резиновые» сайты. Т.е.  сайты, которые масштабируются под разрешение монитора пользователя.
Отображение эластичного сайта на различных мониторах
Отображение эластичного сайта на различных мониторах
Итак, делая «резиновый» дизайн не забываем, что:
  • Общая композиция не должна нарушаться ни при каком разрешении монитора у посетителя.
  • Все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта.
  • Вся модульная сетка, блоки и прочие горизонтали масштабируются в процентах.
  • Все шрифты, отступы, почти все вертикали масштабируются в em. Во многих случаях, это касается даже рамок (border).
  • Исключение могут составлять лишь картинки. И то, жесткий размер в pxдля многих изображений — ограничение лишь по вертикали.

«Сжатие-растяжение»

Оптимальна для использования так называемая «полу-резина», т.е. сайт растягивается и сжимается до определенного предела.

min

Первое, с чего нужно начать — это найти минимальное сжатие сайта.
Минимальная ширина сайта, безусловно, определяется задачами сайта и его целевой аудиторией. Фактически сейчас есть только два минимальных параметра: 760 px и 990 px. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т.п.). Второй подходит для сайтов имиджевого и промоушен назначения.
Проверяем, и если требуется корректируем, каждый элемент модульной сетки, чтобы не возникало наездов/нахлестов элементов друг на друга при минимальном сжатии сайта.

max

Максимальная ширина сайта может быть разной, но, как правило, рекомендуется диапазон для растяжения не выше, чем в полтора-два раза от размера минимального сжатия. Это обусловлено тем, что при растягивании сайта более, чем в полтора раза композиция, обычно, рушится.
Нужно определить, что произойдет со всем сайтом, при размере монитора пользователя свыше максимальной ширины. Решаем, куда он будет выравниваться. Вправо? Влево? По центру?
Добиваемся завершенного вида сайта и его естественного перехода в окружение при разрешении свыше максимального. Недопустимо, чтобы сайт на большом мониторе выглядел как «обрезанный».
Рисуем все иллюстрации и неповторяющиеся фоны из принципа «у кого больше монитор, тот больше увидит». Обычно, ширина иллюстраций обусловлена шириной отведенных под них блоков модульной сетки в состоянии max.

Запас на рост сайта

В большей сфере задач, если речь идет не о сайте-визитке или промо-сайте, нужно учесть, что количество страниц и разделов сайта может расти и меняться.
Поэтому:
Навигация должна строиться так, чтобы добавление новых пунктов меню, а уж тем более изменение названия пунктов происходило безболезненно. Недопустимо, чтобы добавление нового раздела приводило к пересмотрению навигации.
Пример «безболезненного» изменения/добавления древовидной навигации первого и второго уровня
Пример «безболезненного» изменения/добавления  древовидной навигации первого и второго уровня

В некоторых случаях нужно предусматривать безболезненное для внешнего вида добавление/скрытие информационных/функциональных блоков на сайте.
Пример «безболезненного» перемещения, изменения/удаления блоков сайта
Пример «безболезненного» перемещения,
изменения/удаления блоков сайта

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

Шрифтовая схема

Большая часть сайтов смотрится цельно и завершенно при построении дизайна на основе одного-трех шрифтов.
Базовый шрифт  — основной шрифт материалов сайта.
Акцидентный — шрифт для заголовков.
В некоторых случаях вводятся дополнительные шрифты для:
  • меню и навигации;
  • блоков выделения (важной информации, цитат, выносок);
  • для мелкого текста, с целью повысить читабельность.
Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иерархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна быть цельной и использоваться на всех страницах сайта.
Всё последующее оформление информации на сайте должно строится на базе общей схемы.
Шрифтовая схема
Шрифтовая схема простого корпоративного сайта

Реакция на пользователя

Дизайнер должен спланировать, что будет происходить с элементами, реагирующими на действия пользователя.
Рассмотрим типичные элементы.

Навигация

Фрагмент макета сайта, на котором показаны три состояния навигации
Фрагмент макета сайта, на котором показаны три состояния навигации: обычный вид меню, пункт меню при наведенном курсоре, выделение текущего раздела.
В зависимости от типа и масштабности сайта, нужно показать ряд состояний пункта навигации.
Типичный набор:
  • Нормальный вид.
  • Мы навели курсор.
  • Мы находимся в этом разделе.
  • Мы находимся в этом разделе, но прошли глубже.
  • Мы навели курсор на пункт родительского раздела.
При этом минимальный набор для всех элементов навигации, включая переключатели и элементы управления — это нормальный и активный вид. Т.е. минимум, для всех управляющих и навигационных элементов это — «вкл./выкл.».
Различные состояния элемента навигации
Различные состояния элемента навигации

Ссылки

Ссылки, расположенные в тексте, всегда подчеркнуты и должны отличаться по цвету от основного текста.
Желательно, а в навигации обязательно, предусмотреть внешний вид ссылки, при наведении курсора.
В больших объемах текста и при выдаче разнородной информации (например, оглавлении статей, карты сайта и т.п.), обязательно нужно предусмотреть внешний вид для посещенных ссылок. И они также требуют своего внешнего вида при наведении курсора.

Ссылки с дополнтельными свойствами

Для ссылок, которые предусматривают дополнительные возможности, особенно при использовании в тексте, рекомендуется предусмотреть небольшую иконку, которая подскажет пользователю о дополнительных свойствах ссылки.
Таких иконок требуют ссылки:
  • альтернативное получение данных (RSS, PDA, версия для печати)
  • скачивание файлов, расположенных на сервере
  • обращение к популярным ресурсам (Яндекс, Google, Flickr, LJ, картографические сервисы, Википедия и т.п.)
  • e-mail адресов
  • открытие форм
  • открытие ссылки в новом окне
Примеры использования дополнительных иконок в жизни
Примеры использования дополнительных иконок «в жизни».

Псевдо-ссылки

Псевдоссылки, т.е. ссылки, которые не ведут на другую страницу, а открывают/скрывают информацию на текущей, без ее перезагрузки, обозначаем пунктирным подчеркиванием. Во всем остальном, на них распространяется все, что указано для обычных ссылок.
Пример использования псевдоссылок
Один из примеров использования псевдоссылок.

Табы

Табы — это некоторая смесь элемента навигации и элемента управления.
Для них учитываем состояния:
  • таб неактивен
  • наведен курсор (opt)
  • загрузчик содержания (opt)
  • таб активен
Фрагмент сайта, на котором видны сразу три состояния табов.
Фрагмент сайта, на котором видны сразу три состояния табов: активный таб, наведен курсор и обычное, неактивное, состояние.

Курсор

Предусматриваем реакцию курсора при наведении. Особенно, если речь идет о нестандартных элементах управления, таких как навигация, псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.

Оформление содержания

В интернете правит информация. Сайт — всего лишь способ её доставки. Внешнее оформление сайта — лишь рамка, задающая эмоциональный настрой и подкрепляющая бренд.
Именно изучая информацию пользователь проводит самую большую часть своего времени на сайте. И именно по этой причине нужно уделить оформлению содержания должное внимание.
Задачи сайта и его содержание всегда разное. Поэтому оформлять это содержание также всегда нужно по разному.
Фрагмент новостного сайта, на котором дизайнер показал большую часть типичных элементов для оформления содержания.
Фрагмент новостного сайта, на котором дизайнер показал большую часть типичных элементов для оформления содержания.

Элементы содержания

Сразу нужно сказать, что предусмотреть заранее все возможные варианты оформления нельзя. Мы рассмотрим лишь типичные.
Например, для корпоративного сайта:
  • абзац текста;
  • иерархия заголовков трех-четырех уровней;
  • ссылки, псевдо-ссылки;
  • элемент выделения важной информации;
  • цитата;
  • ненумерованный список;
  • нумерованный список;
  • вложенные списки;
  • иллюстрация на полосу, в текст;
  • таблица или несколько их типов;
  • файлы для скачивания;
  • выноски;
  • оформление маргиналий, если такие используются;
  • подача информации в 2–3 колонки (зависит от сетки);
  • простая форма.

Рыба

Рыба
В идеале, нужно оперировать реальным содержанием. Если такого нет, то как минимум, «рыба» должна быть максимально-типичная для оформляемой страницы по своему типу и объему. Это позволит избежать пробелов в оформлении и досадного вида сайта после сдачи в эксплуатацию.
Полностью недопустимо использование «рыбы» из другого языка, т.к. объемы текста и средняя длина слов различаются. Например в английском и русском это очень заметно.
Различный рисунок идентичных по содержанию блоков текста на разных языках.
Различный рисунок идентичных по содержанию блоков текста на разных языках.

P.S.

Приведенные требования не являются догмой. От любых правил иногда можно отступать. Только делать это нужно не по незнанию, а осознанно.

Об авторе

Павел Колодяжный. Арт-директор и основатель дизайн-бюро «make».
Специализируется на разработке интернет-сайтов и проектировании интерфейсов. Общий стаж в дизайне — 9 лет. Как автор и со-автор причастен к появлению на свет более сотни сайтов и около трех десятков интерфейсов. Среди работ есть проекты для таких компаний, как Sunbay Software, Space Andventures, Pulsar Software Systems, Canon Inc., Yandex, Yamaha Motors. Не смотря на прежние достижения считает, что самые интересные проекты еще впереди.

источник —  iderins.livejournal.com/91239.html

понедельник, 16 мая 2011 г.

Разработка слогана

Как писать рекламные слоганы? Пять простых советов для копирайтеров.


1. Соответствие задачам
Да, мы очень креативные копирайтеры, творческие личности и все такое. А цели у клиента совершенно меркантильные и банальные. Но! Не стоит слишком отрываться от земли, целевой аудитории и маркетинговых задач. Любое рекламное творчество должно, прежде всего, работать на клиента.


2. Есть идея
Выделите главную идею. О чем нужно сказать в слогане? Что мы хотим донести до потребителя? Теперь попытайтесь сформулировать эту идею в нескольких словах. И это не всегда так просто, как кажется.


Nike. Just Do It.


3. Креативность
Экспериментируйте, ищите разные формы, пробуйте новые подходы. У нас есть идея (см. пункт 2) и теперь нам нужно интересно и оригинально выразить ее. Развивайте ассоциации, создавайте неологизмы, необычные сочетания слов.




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


Sprite. Имидж ничто — жажда все!


Snikers. Не тормози — сникерсни.


4. Рифма и форма
Форма слогана имеет большое значение. Вы можете выбрать прозу или рифму. Афоризмы, цитаты или народные мудрости. Доказано, что зарифмованные слоганы запоминаются лучше. Однако, рифма далеко не всегда уместна.


Coldrex. Семь бед — один ответ.


Икея. Есть идея - есть Икея.


5. Простота – спасет копирайтера
Потребитель не любит напрягаться и размышлять над тем, что Вы хотели сказать этим слоганом. Если информация не считывается с первого раза, значит слоган неэффективен, он не работает. Покупатель просто пройдет мимо.


Конечно, есть небольшой сегмент интеллектуальной и имиджевой рекламы. Где можно говорить по-умному или загадками. Но это скорее исключение.


Нам же нужно напрячься и сделать слоган простым и понятным. Чтобы до всех дошло с первого раза.
И еще в тексте должно быть одно ключевое сообщение. Потребитель – нормальный человек, который не желает запоминать кучу цифр, дат и лозунгов. Одна реклама – одна идея.


Opel. Движение к лучшему.


Nike. Just Do It.


Indesit. Мы работаем - вы отдыхаете!




источник - http://reclamaniya.ru