Практический online-курс

Преследование новых традиций веб-дизайна, не забывая о старых

Традиции веб-дизайна,

Люди создают веб-сайты по многим причинам: чтобы охватить более широкую аудиторию, продать, продвинуть, или превзойти конкурентов. В нынешнее время, у нас всех есть электронная почта, Facebook , Twitter, LinkedIn, или Pinterest, а если у нас своя компания или бизнес, то мы начнем задумываться о создании своего личного веб-сайта.

Веб-дизайн использует HTML и CSS – это два языка, на котором свободно между собой могут общаться разработчики веб-браузеров и веб-дизайнеры. Но многие веб-дизайнеры могут создать уникальное разнообразие правил к одному языку, спрашивая, «что если» вместо «конечно».

Существуют веб-дизайнеры, которые придерживаются обычной мудрости в языках, предложениях, и веб-терминах, используя HTML / CSS, Arial и Georgia, 960-пикселей ширину макетов, и подчеркнутые синим ссылки. Использование таких конвенций практично. А вот веб-дизайнеры, которые не хотят использовать общепринятые модели, и не интересуются «почему», – рискуют потерять много бизнес-возможностей.

Стандартная структура

Стандартная, одноуровневая структура имеет практическую пользу. Такая структура является простой, а просто – это хорошо. Что еще важней, она хорошо знакома всем веб-дизайнерам. У веб-дизайнеров и посетителей веб-страниц существует негласное соглашение о том, как должны работать веб-сайты. Придерживаясь «Главная / Услуги / О нас / Контакты» шаблона, публика остается удовлетворенной что нашла, то что искала.

Примеры «моментов», которые считаются очевидными для посетителей веб-сайтов, и те, что мы – веб-дизайнеры иногда упускаем из виду:

  • Посетители ожидают, что нажав на слово “контакты”, им представится электронная почта или/и номера телефонов.
  • Они знают, что найдут ссылку на «главную» в верхнем левом углу страницы, или нажав на логотип.
  • Они смогут найти авторские права в футере (обычно слева, и с указанным годом).
  • Они рефлекторно будут прокручивать веб-сайт с вверху и вниз, а не из стороны в сторону.

Однако не все конвенции(обычаи) являются безусловными. Большинство веб-сайтов придерживаются правил со своими собственными стилистическими различиями. Не каждая ссылка на веб-сайте подчеркнута синим текстом. Не каждая фотография одного и того же размера. Не в каждом макете расположение колонок одинаковое. Веб-посетители склонны к адаптации, и не надеются увидеть шаблонные веб-сайты. Наоборот, мы все ожидаем, открывая веб-страницу увидеть что-то уникальное.

В таком случае, как нетрадиционные дизайны веб-сайтов влюбляют в себя посетителей?! Веб-дизайнеры диктуют новые «традиции», которые легко усваиваются всеми.

Адаптация к Новому

Старая пословица гласит: “не ломайте то, что не сломано”. Это сказание будет хорошим советом, до того, как кто-то не изменит понятие слово “сломанный”.

В начале существования веб-мира, веб-дизайнеры могли рассчитывать на экраны не менее 640 пикселей в ширину. Совсем недавно 1024 пикселей и больше стали обычным делом. Начиная с 2007 года крошечные устройства положили веб-сайты в руки людей. И тут, откуда ни возьмись, вошел в моду веб-дизайн на 320 пикселей. Есть разница между «вынужден изменить» и «решить изменить» подходу к ситуации. Творчество не боится следовать путем большего сопротивления.

happy_smile

Как Можно Отличиться

Не каждый риск окупается. Большинство нетрадиционных веб-дизайнов терпят неудачу не потому, что они нарушили правила, а потому, что они не сдержали свои обещания. Хитрость заключается в том, чтобы определить, какие конвенции стоит применить.

1. Поставьте ссылку на главную страницу вместе с логотипом в левом верхнем углу

Проблема: посетители комплексного веб-сайта могут потеряться в нем. Потому первой рукой помощи, всегда будет являться возврат на «главную страницу», своего рода перезагрузка сайта в глазах посетителя.

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

Нетрадиционное мышление:

  • Зафиксировать кнопку «главная» на каждой странице.
  • Поощрять веб-посетителей прокрутить контент веб-сайта вниз и найти ссылку на «главную» там.
  • Удалить главную страницу, с целью пользы для панели навигации.

2. Сделайте название статей, их изображения, или “читать далее” интерактивными

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

Традиционное мышление: названия и эскизы (thumbnails) должны давать четкое определение о том, что будет содержаться в контенте. Самое простое решение – это сделать “Читать далее” активной ссылкой.

Нетрадиционное мышление:

  • Сделайте изображение, название и описание активными ссылками. Ссылки с большей площадью поверхности хороши для мобильных устройств и легко создаются с помощью CSS.
  • Сделайте все наоборот: сначала напишите одно/два заманчивых предложения с основного текста, затем, под низом, укажите название статьи, которое будет являться интерактивной ссылкой на полный текст.
  • Дайте возможность пользователям поставить желаемый текст «в очередь», и прочтение его позже.

3. Сделайте дизайн шаблона, прежде чем писать его содержание

Проблема: эстетика создает первое впечатление о веб-сайте, а не его контент и код написания

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

Нетрадиционное мышление:

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

Руководство к правилам

Конвенции являются синонимом доверия. Лучший способ сломать установленные правила – это придумать на их смену другие.

1. Меняйте, но не нарушайте правила

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

  • Старым веб-браузерам нужно было делать ссылки очевидными, поэтому они подчеркивали интерактивный текст (активные ссылки).
  • Строки с текстом шире, чем 400 пикселей, являются сложными для чтения.
  • Веб-сайты богатые контентом, создают организационную головную боль. Поисковые инструменты позволяют пользователям охотиться за конкретной фразой, а не копаться во всех категориях.

2. Соблюдайте собственные правила

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

3. Используйте цели

Конвенции работают как для веб-дизайнеров, так и для веб-посетителей. Нарушение конвенций (традиций) никому ничего хорошего не сделает, только заставит обдумывать новые проблемы, которые могли бы возникнуть.

  • У нас есть меньше пяти секунд понравиться посетителю.
  • Мы хотим показать более 200 фотографий на веб-сайте. Как мы можем упростить процес их навигации?
  • У нас слишком много избыточной продукции. Торговли нет. Как можно обратить этот процес в свою пользу?

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

15-03-2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".