Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

Так на какие стандарты веб-дизайнеры посмотрели по-новому и как преобразовали?

Открытые лица

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

Если прокутить страницу сайта вниз, то можно увидеть секцию «We've got your back», где и рассказывается о реальных людях,  работающих в компании. Например, дизайнеры разместили  большую фотографию одного из своих сотрудников.

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

Синемаграф

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

Пользователям они нравятся и, соответственно, происходит увеличение популярности бренда и конверсии сайта. Посетители ощущают интригу в движении, им интересно: «А будет ли что-то дальше?». А если и не будет, то изящество и утончённость самой анимации вызывает восхищение работой дизайнера. Обычно такая анимация неожиданная; анимация того, что меньше всего ждешь увидеть в движении. Например, анимации обуви, перьев на голове, напитка в бокале.

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

Карусель

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

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

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

Интерактивная карта

Размещение карты города внизу страницы, с указанием, где именно находится та или иная компания, стало уже нормой и для Landing Page, и для сайтов. Но проект Ted Todd подошел к этому чуть креативнее. Они поместили общую карту штата Флорида и отметили точками на ней филиалы своей компании. И есть несколько причин, почему такой вариант считается удивительным.

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

Если масштаб страницы увеличен, то вместо карты будут плитки-меню с названиями и адресами филиалов. И да, заметьте, они тоже представляют миру своих сотрудников.

Такой вариант работы с картой интересен и подходит, даже если компания имеет один офис. Почему? Из-за идеи, из-за того, как в целом это выглядит.

Нарушение модульной сетки

При посещении проекта TRA  становится очевидно, что веб-дизайнеры использовали нетрадиционную модульную сетку. Здесь минималистический дизайн в целом, ограниченная палитра цветов. Но что же в нем такого уникального? Текстовые блоки на главной станице перекрывают центральный блок, который представляет собой видео. Это отлично, это бросается в глаза, это привлекает внимание и к тексту, и к самому видео, которое притягивает к себе эффектом ожидания. Девушка живая, естественная на нем и хочется дождаться, а сделает ли она движение какое-либо или нет.

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

Фотографии по всей странице

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

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

Быстрая анимация

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

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

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

Оригинальный подход использовался и у Hannah Purmort, где сначала представлена анимация бренда, а затем при прокрутке колёсика мышки, странички меняются. Но не сразу, а после того, как полоска прогресса заполнится. Весьма интересный эффект и очень изящный. Скриншотами передать трудно.

Белая рамка

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

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

Это сообразная глубина сосредоточения, позволяющая посетителям на подсознании внимательно изучить все, что есть внутри данной рамки, то есть контент данного сайта. Посмотрите, как использовали рамку Camden Town Brewery, HillSide.

Заключение

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

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

Веб-дизайн не просто так называют и искусством, и творчеством, и наукой одновременно. 

Как вам материал?