Использование социальных медиа-ссылок на веб-сайте может быть очень важным этапом в придании ему профессионального облика. Во многих случаях полезно бывает знать число людей, отслеживающих все ваши профили, то, как часто они обмениваются ссылками на ваши работы, и объем трафика. Если эти ссылки гармонично вписываются в дизайн, они могут подчеркнуть профессиональный облик вашего сайта и являть собой самостоятельные произведения искусства, радующие глаз.
В этот раз мы решили подойти к делу серьезно и просмотрели сотни веб-сайтов (для начала), чтобы найти среди них образцы удачной, по нашему мнению, интеграции оригинальных и красивых социальных ссылок.
Мы покажем вам как сами веб-сайты, так и социальные ссылки, чтобы рассмотреть их получше.
Коричневый веб-сайт Мэтта Бритта, выполненный в духе современного стиля гранж, имеет все необходимые ссылки в самой шапке.
Дизайн Rockatee отличает действительно оригинальный стиль. Дизайнер Малика Эстер Аттевел расположила иконки в правом верхнем углу, закруглив их и придав шероховатости текстуре.
Этот веб-сайт отличает весьма необычный облик. Заходя в первый раз на главную страницу, вы видите лишь облака, будто бы вырезанные из мятой бумаги. Отмотав страницу вниз, вы обнаружите море с парусниками и фирменным китом из Twitter. Сами ссылки на Twitter и Facebook расположены под одной из лодок.
Этот сайт попал в нашу коллекцию благодаря классной, хотя и замаскированной, тропинке, ведущей на Twitter. Веб-сайт насыщен множеством отличных элементов, выполненных в стиле карандашного рисунка, хорошо продуманных и реализованных. Что нам больше всего понравилось, так эта синяя птичка, сидящая на горлышке колбы, оказавшаяся ссылкой на профиль в Twitter.
Сайт шведского дизайнера Эрика Иггмарка выполнен в палитре тонких полутонов, красной нитью проходящей через весь дизайн и заметной глазу вне зависимости от того, на какой странице вы находитесь и куда смотрите. Отмотав страницу вниз, вы обнаружите удобно расположенные социальные ссылки и плотно сбитый раздел обратной связи, отлично сочетающиеся с остальными элементами сайта.
Этот веб-сайт выполнен в стиле ретро, реализуя палитру размытых цветов. В подвале вы найдете аккуратно уложенную область контактов и социальных ссылок.
Этот типографически стилизованный веб-сайт выделяется своей ясностью, которая придется по вкусу всем любителям простого и продуманного дизайна. Здесь всё приятно центрировано. Проследуйте вниз и вы обнаружите раздел социальных ссылок, позволяющих связаться с каждым из дизайнеров. Красиво и просто!
На этом притяном, нарисованном от руки сайте, социальные ссылки расположены в самом центре. Великолепная интеграция.
Сайт Ribena со вполне ординарным дизайном заслужил свои баллы благодаря ссылкам на Twitter, Facebook и YouTube, аккуратно расположившимся на деревянной вывеске, помещающейся в правом верхнем углу.
Этот веб-сайт определенно прост и опрятен, благодаря стилю «впечатанного» текста, в нём же выполнены ссылки, которые видны внизу. Дополнительные очки сайт получает за доступность ссылок — не нужно прокручивать экран.
Этот сайт имеет целый набор красивых элементов. Социальные ссылки выполнены (конечно же) в розовом цвете, а их частично рисованный стиль позволяет иконкам выглядеть гармонично и, вместе с тем, выделяться на общем фоне.
Еще один сайт, где все выровнено по центру. Опрятный дизайн дополняют социальные ссылки в верхней его части. Они небольшие и напоминают прозрачные наклейки на стене, вместе с тем их легко заметить. Отлично вписываются в общий дизайн.
Ссылки на Facebook и Twitter этого сайта выполнены в симпатичном рисованном стиле, отлично сочетающемся с используемыми иллюстрациями.
На этом чудаковатом сайте поселилась стая монстриков, задающих тон всему дизайну. Социальные ссылки и раздел для обратной связи выполнены в том же уникальном игривом стиле и в той же палитре.
Птичка из Twitter здесь обрела новый облик, а еще здесь есть овечка, висящая на воздушном шарике Facebook. Оригинальная и веселая реализация, демонстрирующая креативность и мастерство создателей.
Этот веб-сайт отличает приятный клетчатый фон, просвечивающий сквозь все элементы. Социальные ссылки «прячутся» в центре раздела «О нас», но смотрятся хорошо и отлично вписываются в облик сайта.
Сайт с весьма оригинальным обликом. Он шероховат и, вместе с тем, отполирован до блеска. Соцмедиа ссылки найти не так-то просто, однако выполнены они изящно и гармонично вписываются в область нижнего колонтитула. «F», означающая Facebook, и «T», отвечающая за Twitter, меняют свой цвет на классический синий при наведении на них курсора.
На веб-сайте самопровозглашенного веб-ниндзи Марчелло Бривио, делающего образ ниндзя не таким пугающим, вы найдете целый набор соцмедиа ссылок и сможете убедиться, что веб- ниндзя окружают нас повсюду. Простые и изящные ссылки отлично вписываются в дизайн.
Кликните мышью на упаковке в центре для получения доступа к действительно потрясающим элементам этого сайта. Щелкнув по появившейся «чёрной книжке», вы получите доступ к одному из самых оригинальных списков социальных ссылок и реквизитов для обратной связи среди тех, что вы когда-либо видели. Смотрится красиво, необычно и надолго врезается в память. Прогулявшись по сайту, вы легко поймете, как ему удалось завоевать столько наград. Превосходная работа!
Сайт Me in Motion выполнен в приятном стиле гранж. Социальные ссылки располагаются в левом верхнем углу, черный шрифт помогает им выделяться на фоне белой «краски». Смотрится органично и не требует лишних поисков.
Искусно вписанные соцмедиа ссылки можно найти чуть ниже шапки. Мастерское использование цветовой схемы и карандашный стиль придают им индивидуальность.
Это сайт в классном стиле вестерн насыщен живым действием. Социальные медиа ссылки можно найти в правом нижнем углу на деревянной вывеске, являющейся элементом композиции.
Сайт отличает минималистичная главная страница, на которой под каждый раздел выделен свой прямоугольник. Нам очень понравилось, как ссылки на Twitter и Facebook выделяются на общем фоне, вместе с тем являясь частью дизайна.
Соцмедиа ссылки удачно интегрированы в шапку сайта. Незаметные, они почти сливаются с фоном, однако найти их не проблема.
Социальные медиа ссылки размещены в правом верхнем углу и выделяются за счет цвета, используемого также в логотипе сайта и некоторых других его элементах.
Отмотав вниз страницу этого сайта, вы обнаружите контактную информацию + Twitter в левом нижнем её углу.
Иконки здесь чуть крупнее обычных, однако всё равно хорошо вписываются. Вы найдете их в правом верхнем углу, они помещены в отдельный блок.
На Minervity гранж дополняется рисованным стилем и, вместе с глянцем, они смешиваются в единый неповторимый облик. Иконки легко найти в правом верхнем углу, сразу за логотипом/заголовком.
Робби Мэнсон добавил соцмедиа ссылки (названные им социальной слежкой), аккуратно расположив их в левом нижнем углу подвала сайта. Опрятно и профессионально.
Слева на странице вы найдете закладку, содержащую социальные медиа ссылки. Отлично сочетается с гранж стилем сайта.
У Кэрол Ривелло есть веб-сайт с иллюстрациями в ретро-стиле, расположенными в шапке и подвале. Подвал также содержит иконки соцмедиа ссылок и меню навигации.
Веб-сайт Limpfish выделяется насыщенным рисованным стилем, использованным также и в соцмедиа ссылках, располагающихся справа по центру. Оригинально и свежо.
Ссылкам социальных медиа на этом сайте уделено особое место. Их иконки просто «бросаются в глаза», располагаясь на верхней полке навигационного шкафчика. Креативное решение и смотрится опрятно.
На Freshlime Soda придумали свой трюк с иконками. Они располагаются по центру подвала сайта и выглядят как банки с газировкой. Забавно и креативно!
Work at Play создали свою версию, состоящую лишь из слов. Ссылки, похожие на длинные фразы, можно найти в подвале справа. Они хорошо выделяются, доказывая, что простота часто является лучшим решением.
А что думаете вы?
Насколько важно придавать вещам индивидуальность, когда речь заходит об иконках социальных медиа? Какой из образцов понравился вам больше всего? Не хотите ли поделиться своими примерами? Мы будем рады услышать ваше мнение в комментариях к статье. И не забывайте делиться с друзьями ссылками на этот материал!
Оригинал: http://www.onextrapixel.com/2011/05/06/35-examples-of-well-integrated-social-media-links-in-web-design/