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

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

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

Так как же Google видит наши с вами сайты? Чего ждет он от веб-дизайнеров и от качества их работ? Сегодня мы рассмотрим это подробнее и с примерами, несмотря на то, что некоторые вещи давно стали «прописными истинами». В то же время важно сознать, что при всех этих истинах почему-то не все сайты попадают в поиск Google или напротив, исчезают по причине некорректного дизайна или программирования. Так в чем секрет и почему из повторения в сотый раз канонов можно почерпнуть невероятные вдохновляющие идеи? Думаете это невозможно? Возможно. Как?

Давайте посмотрим …

Имя проекта

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

На примерах Ria, MSI, Nvidia заголовок находится близ логотипа или является часть логотипа, имеет цветовую палитру самого бренда и передаёт ощущение вовлеченности в деятельность компании.

Отличным решением является вариант Brand Village и Awwwards с плавающей строкой меню и логотипом. Так посетитель всегда помнит, где он находится и что изучает.

Навигация и заголовки

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

Общая структура большого сайта и правильная навигация позволяют в результатах поиска представлять не просто страницу проекта, но также и иные внутренние ссылки ниже основной. Вы такое видели не раз. Разумеется, это способствует будущей работе SEO. И чтобы такое отображение было у нашего проекта, нельзя просто подать некое заявление в компанию или задать их (ссылки структуры) в сервисе Google Webmaster Tools. Робот поисковика сам оценивает большие сайты на такое представление и зависит это как раз от структуры, большой, развернутой.

Секрет в том, что навигация может быть неявной и в непривычном нам виде. Проекты Neil Patel, Curse, Газпром как раз и показывают такую разницу. На первом – меню внизу и небольшое, на последнем – оно просто создано ссылками, но в поисковике имеет общее отображение, ибо создана структурность.

Читабельность и типографика

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

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

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

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

Видео и изображения

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

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

Philips также решил рассказать о направлениях своей деятельности и линейках товаров с помощью видео и фотографий. Рекомендуем также обратить внимание на их меню.

 Красив дизайн компании Золотая семерка, которые не просто предоставляют услуги по окнам, но создают, тем самым, уют в любом доме или офисе. Данный проект интересен во многих отношениях, да и Google он тоже нравится.

Нижний колонтитул

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

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

Проекты Engage Interactive, Off Radio имеют больше верхнее меню, но и внизу оно есть. Поскольку повторяться дизайнеры не захотели, то разместили то, что способствует логическому завершению изучения страницы в целом: контакты, правовую информацию, авторство дизайна, ссылку на карту сайта.

 Box, Evernote, наоборот, сделали внизу большое меню ссылками, когда верхнее не слишком насыщенное и древовидное.

Какой он – тортик Google

Так как же робот Google смотрит на сайт?

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

Именно поэтому аксиома «простота – залог успеха» в веб-дизайне важна как никогда.

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

Побуждение к действиям

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

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

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

Еще один пример побуждения – Ubisoft. Они не просто сделали анимированный значок мышки со стрелкой вниз, чтобы сообщить о необходимости прокрутки страницы. Дизайнеры решили привлечь посетителей с помощь фраз и отношения. Не «вот мы какие и что имеем», а «все это – для вас». Другая позиция, мотивирующая позиция: «а что же там еще для меня хорошего есть?».

Социальные сети

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

Крупнейшие медиа порталы Buzz Feed, Ria используют иконки соцсетей везде, где это удобно. У фотографий, в конце статей или в начале. При этом их наличие нив коей мере не мешает изучению информации.

Но весьма оригинально к идее использования иконок соцсетей подошли в компании MSI. Если на странице их продуктов можно увидеть только три основных значка Facebook, Twitter, Google+, то в нижнем меню в колонтитуле есть ссылка «социальные сети». На ней не просто перечислены все соцсети, где есть представительства компании, но и в каких  странах (на каких языках) они доступны. VK – только в России, Twitter – на 14 языках. Причем некоторые соцсети имеют поддержку разных стран и языков.

Результат

Все, что мы рассказали выше, несомненно, стандарт и многие подумают: «ничего нового». Но мы подобрали несколько работ веб-дизайнеров, которые использовали все эти каноны и нюансы и создали потрясающие проекты, от изучения которых сложно оторваться. Описывать их непросто, ибо все нужно своими глазами. Речь идет о tram-house, Airman Challenge, Qantas Dreamliner (полная версия), Porsche Panamera

Выводы

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

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

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