Но, иногда бывает полезно усомниться в привычных вещах, давайте подумаем какие минусы могут нести в себе кнопки соц.сетей, так ли они необходимы любому сайту?
Большинство вебмастеров ошибочно уверены в том, что если предоставить людям возможность легко делиться контентом, то это поможет увеличить трафик. И именно поэтому в WordPress и других популярных CMS есть бесчисленное количество плагинов для .
Но действительно ли эти плагины несут такую ценность?
Скажу вам больше, у подобных виджетов есть даже существенные недостатки, особенно если помещать их на страницы, которыми никто вообще никогда бы не поделился (например, форма контактов или страница «О нас»). Так что, перед тем как поместить кнопки социальных сетей на свой сайт, вам стоит учитывать следующие аспекты:
1. Кнопки замедляют работу сайта
Мы живем в такое время, где никто не будет дожидаться долгой загрузки сайта.
Согласно недавним исследованиям около 79% посетителей будут ждать загрузки сайта не более 3 секунд.
Ситуация усложняется еще сильней, когда речь заходит о мобильных пользователях. Если страница не загрузилась в течение 1 секунды и меньше, то пользователь, скорее всего, покинет ваш сайт.
Как вы уже наверняка представили, внедрение сразу нескольких кнопок — приведет к существенному увеличению размера и веса страницы, а это серьезно скажется на скорости загрузки.
Еще больше беспокоит недавнее исследование, обнаружилось, что 99,8% мобильных пользователей на самом деле никогда не пользуются кнопками шэйринга. ()
Совет: используйте только кнопки самых приоритетных соц.сетей, а чтобы сократить время загрузки страниц установите единый виджет типа Uptolike , вместо отдельной вставки кодов.
Кстати, мне часто приходят вопрос на почту — Чьи социальные кнопки используются в моем блоге? Под статьями у меня стоит виджет от сервиса Shareaholic.com, на западе он очень известен, загружается быстро. Правда, сам счетчик слева от кнопок я отдельно заказывал у программиста, он не является частью их виджета.
2. Потеря вовлеченности посетителей
Предлагая кнопки шэйринга на страницах с ценным и интересным контентом, вы, сами того не подозревая, переносите фокус внимания и взаимодействия со своего сайта в те самые социальные сети. Вашу тему будут обсуждать в другом месте, даже не задумываясь о том, кто был автором.
Это означает потерю контроля над дискуссией, и, более того, потерю потенциальных посетителей сайта. Даже если рассматривать идеальный сценарий, в котором дебаты над вашей темой разворачиваются именно на вашей публичной странице в соцсети, то вы все равно теряете ценных посетителей, оставляя их в VK, FB или Twitter.
Естественно, это в значительной степени осложняет контроль над удержанием и вовлечением пользователей. Именно поэтому я рекомендую вам задуматься о том, чтобы внедрить платформы для общения и дискуссий в ваш сайт.
Совет: чаты или хорошая система комментирования (вроде De:comments , Сackle) помогут вам поддержать общение в рамках вашего основного сайта, но с возможностью авторизации через соц.сети. Таким образом, пользователи смогут получать общение не покидая ваш сайт.
3. Отвлечение от покупки товара/услуги
В принципе, данный пункт является продолжением предыдущего, просто с более острой проблемой — потерянными продажами. Когда речь идет о коммерческих сайтах, то потеря посетителя — прямой убыток, и социальные сети играют здесь не последнюю роль.
Несмотря на то, что это распространенная практика, размещение социальных кнопок в карточках товаров — очень сомнительная затея. Поистине забавно наблюдать такие кнопки в интернет-магазинах взрослой тематики, неужели кто-то рассчитывает что покупатели будут «это» репостить на свою стенку 😉 Да и вообще, вы сами хоть раз делились страницей товара в социальных сетях?
Более подробно о влиянии соц.кнопок на продажи можете прочитать в статье на Emagnat.ru , там авторы привели конкретные примеры изменения конверсии по этой причине.
4. Конфликты скриптов и ошибки
Причина здесь довольно проста: новые виджеты могут быть разработаны с ошибками и косяками, которые могут «сломать» ваш сайт. Даже если там не будет ошибок, при обновлении дизайна сайта может «поехать» разметка и код, если вы не проверили всё заранее.
Кнопки социальных сетей сделаны таким образом, что вы можете просто вставить готовый код в нужный элемент на сайте, в результате есть вероятность полностью испортить разметку страницы, и многие пользователи, скорее всего, успеют заметить это до того, как вы все исправите.
Может показаться, что я несколько преувеличиваю, видимо просто отношусь к тому поколению вебмастеров, которые с осторожностью относиться ко всем внешним скриптам на своем сайте и не хотят зависеть от чужих сервисов. А вообще, конечно, облачные технологии наступают..
5. Подумайте о безопасности
Как уже было отмечено ранее, многие кнопки шэйринга основываются на javascript.
Javascript – это достаточно уязвимый язык для хакеров, проблем от кнопок шэйринга может быть гораздо больше, чем пользы. Хакеры без особого труда могут внедрить вредоносный код на сайт посредством javascript, отслеживать поведение и привычки ваших посетителей или что еще хуже, заполучить доступ к личной информации.
Следовательно, если вы не можете обойтись без кнопок шеринга в социальные сети, то важно максимально позаботиться о безопасности сайта. Рекомендую почитать статью Используя эти инструменты, вы можете понизить уязвимость сайта, и исключить вероятность проблем, связанных с Javascript.
Выводы
Я вовсе не пытался убедить вас в том, что нужно избавиться от социальных кнопок, в большинстве случаев они очень полезны. сайт тоже не обделен ими 😉
Всего-навсего, старайтесь придерживаться следующих принципов:
- Избирательный подход — помещать соц.кнопки на тех страницах, где это имеет смысл.
- Измерять скорость загрузки — использовать не слишком перегруженные виджеты.
- В коммерческой тематике — избавиться от всего, что может отвлечь от покупки.
- Выбирать скрипты известных разработчиков, время от времени проверяйте их работу.
Преимущества кнопок шеринга очевидны, но также важно учитывать и все их недостатки.
Элементы - это части или компоненты, которые можно выделить и определить в любой визуальной композиции или произведении искусства. Они создают структуру произведения, и могут нести множество различных идей.
Элементами дизайна являются:
- Точка
- Линия
- Форма, фигура
- Движение
- Цвет
- Узор
- Текстура
- Текст, шрифт
Точка
Точка - простейший элемент визуального дизайна
Точка служит в качестве фокуса изображения, выделяя важную информацию или притягивая к ней внимание
Даже если на чистом листе бумаги присутствует только одна точка, одна метка, наш мозг непременно старается придать этому какое-то значение, пытается найти какую-нибудь связь или закономерность, либо использовать эту точку в качестве отправной. Если точек две, глаз немедленно пытается их "соединить" и создает воображаемую линию между ними. Если точек три, неизбежно наше сознание рисует треугольник; сознание достраивает то, чего нет. Это невольное соединение точек называется группировкой или гештальтом (gestalt).
Несколько точек в сочетании могут создавать более сложные объекты или идеи. Например, созвездия можно представить себе как точки в небе, которые изображают "невидимые" фигуры
Гештальт - основной инструмент дизайнера или художника, который он использует для построения связанной композиции. Вот например, автопортрет, выполненный студентом. Он демонстрирует как с помощью лишь точек, варьируя плотность их расположения, можно создавать изображения и иллюзию формы.
Невольное стремление к порядку, которое мы навязываем точкам, дает о себе знать, когда мы попытаемся рассмотреть следующую иллюстрацию (щелкните по рисунку мышкой). На каком этапе кажущаяся случайной комбинация точек превращается в лицо? На каком этапе мы понимаем, чье это лицо?
Последовательность точек может притягивать внимание, особенно если они расположены близко друг к другу
Точки или пятна можно эффективно использовать в изображениях:
Подчеркнуть ключевую идею
Привлечь внимание
Представить более сложный объект или идею, но при этом сохранить чистоту и упрощенность изображения
Линия
webmaster - Графика в веб-дизайне
Из рубрики:
Веб-дизайн глазами профессионалов, graphics web-design - виртуальная школа веб-мастерства, статьи по графике.
Линия - это черта создаваемая движущейся точкой, и соответственно она имеет определенное психологическое значение в зависимости от ее направления, толщины и изменения ее направлений и толщины.
Это очень полезное и разнообразное графическое средство, которое способно "говорить" как визуально, так и вербально. Оно может использоваться в языке символов, либо для передачи эмоций своим направлением и свойствами.
Линия
Линия вовсе не является искусственным изобретением художников или дизайнеров; она присутствует и в природе в виде части структуры (ветви деревьев), либо части поверхности (полоски на шкуре тигра, волны на раковине моллюска).
Линия может использоваться независимо, создавая формы даже в тех случаях, когда сами линии незамкнуты. Это можно проследить по иллюстрациям приведенным здесь, например по рисункам Сола Штайнберга (Saul Steinberg) (см. начало параграфа), либо по минималистским проволочным скульптурам Александра Кальдера (Alexander Calder). В о всех этих случаях несколькими линиями раскрывается огромная информация о предмете.
Линии можно сочетать с другими линиями и создавать текстуры и узоры. Этот прием часто используется в гравюрах, а также в рисунках тушью или карандашами (см. рис.). использование комбинаций линий позволяет создавать формы и фигуры, которые являются следующими элементами дизайна.
Тем не менее, линии не всегда позволяют точно передать смысл. Они могут подразумевать что-либо, являясь например краем какой-то фигуры. В детстве мы всегда рисовали пейзажи рисуя очертания земли, неба и других объектов, используя линии.
Постепенно мы узнали, что на самом деле объекты таких очертаний не имеют, и стали рисовать очертания объектов используя цвета, которые на границах создавали видимость линий. Так, мы можем говорить о "линии" горизонта, или "линиях" машины или силуэте человека, хотя мы и знаем, что на самом деле таких линий не существует.
Выразительные свойства линии
Определенные расположения линий несут в себе определенное значение.
Например, каллиграфия - это искусство представления слов. Оценить каллиграфическую работу можно даже в том случае, если вы не понимаете самих слов. Каллиграфические изображения часто используются современными художниками только просто потому, что они содержат в себе некие таинственные послания на неизвестном языке.
Планы помещений - это специфические карты, которые повсеместно используются для описания зданий. Этот язык линий понятен даже в тех случаях, когда строение само по себе необычно (см. рис.). Это строение планировалось создать с помощью пены и намеренно придать ему неправильную форму.
Графики - еще один распространенный метод использования линий. Они широко используются для передачи числовой информации и визуального отображения различных связей. Графики используются по всюду, мы знаем о них с первых уроков алгебры, и встречаем их в каждом номере газеты.
С помощью толщины и направления линий можно передавать настроение и состояние эмоций. Смысл, который несут различные линии, во многом зависит от нашего жизненного опыта - что чувствует наше тело в связи с различными направлениями.
Горизонтальные линии создают ощущение покоя или отдыха. Объекты, которые расположены параллельно земле, покоятся относительно линии силы притяжения. Следовательно композиции, где доминируют горизонтальные линии, несут в себе заряд спокойствия.
Одна из характерных черт архитектурного стиля Френка Ллойда Райта (Frank Lloyd Wright) - это использование сильных горизонтальных элементов, которые подчеркивают связь конструкции с землей.
Вертикальные линии создают ощущение высоты, полета и воздушности.
Вертикальные линии кажутся устремленными бесконечно в небо, за пределы сознания человека. Их часто используют в общественных зданиях, от соборов до офисов корпораций. Вытянутые перпендикулярные линии подразумевают подавляющее богатство, пышность, непостижимое простым человеческим сознанием.
Диагональные линии создают ощущение движения или направленности, оживляют изображение.
Поскольку объекты, расположенные диагонально, для человека кажутся нестабильными по отношению к линии силы притяжения (так как не расположены ни вертикально ни горизонтально), они как бы стремятся упасть, или уже находятся в движении падения, как например на рис. с танцорами.
В двухмерных композициях диагонали часто используются для создания глубины, иллюзии перспективы, которая затем вызывает у смотрящего иллюзию пространства, в котором можно двигаться. Таким образом, если необходимо создать ощущение движения, скорости, или активности, используйте диагональные линии.
Сочетание горизонтальных и вертикальных линий передает ощущение стабильности и прочности. Прямоугольные формы кажутся стабильными по отношению к силе притяжения, и не "стремятся" перевернуться. Эта стабильность создает чувство постоянности, надежности и безопасности. Например, папа на данном семейном рисунке кажется стабильным и очень тяжелым.
Глубокие, острые кривые, с другой стороны, предполагают смятение, волнение, и даже безумие. Мы их встречаем в волнах шторма, в запутанных нитях клубка, в беспорядочных потоках людской толпы. Сложные кривые, использованные в фигуре мамы на предыдущей семейной картинке, создают образ суетливого, легкомысленного персонажа.
Кривые линии имею и другие значения. Мягкие, неглубокие кривые предполагают комфорт, безопасность, понятность, расслабление. Они напоминают кривые лини человеческого тела, и следовательно приятны для глаз.
Качество линии само по себе тоже является визуальным языком. Причем в такой степени, что другие элементы и рядом не стояли. Использование качества линии настолько распространенный прием, что мы все очень тонко это чувствуем. Даже не имея художественного образования, мы можем почерпнуть многое по тому, какие линии используются в рисунке. Посмотрите на мягкие, неправильные линии на рисунке льва. Нам сразу ясно, что это быстрый набросок сделанный с натуры.
На Wix не нужен богатый опыт в работе с дизайном. Но разве вам не было бы интересно побывать в шкуре настоящего дизайнера? Если вы хотите говорить на одном языке с веб-дизайнерами, понимать смысл написанного в дизайнерских блогах или впечатлить друзей на вечеринке своими познаниями, вот 15 терминов из мира веб-дизайна, которые помогут вам сойти за своего.
Читаем и запоминаем:
векторная графика – это визуальные элементы, состоящие из геометрических форм в противоположность пиксельным точкам. Преимущество векторной графики над растровыми изображениями, состоящими из пикселей, заключается в том, что ее проще использовать в работе с изображениями больших размеров. Технически векторы состоят из растянутых линий, проведенных от точки до точки. Хотя на ум в первую очередь приходят квадраты и треугольники, в действительности из векторной графики можно создавать огромное множество изображений. Чаще всего ее используют при создании логотипов, иконок и в дизайне инфографики.
2. Растровые изображения: в отличие от векторов, растровые изображения состоят из пикселей – маленьких цветных точек, печально известными благодаря компьютерным играм 80-х. Растровые изображения всегда зависят от разрешения экрана. При сильном увеличении растрового изображения можно будет увидеть точки, из которых оно состоит. К слову, каждая сделанная вами фотография является растровым изображением.
3. CMYK: расшифровывается как название цветов «голубой, пурпурный, желтый и черный» и является самой распространенной цветовой схемой, используемой для печати. Из этих четырех цветов состоят чернила для принтеров. Их различные комбинации создают цветовой диапазон, который вы можете увидеть на печати.
4. RGB: цветовая модель «красный, зеленый, синий». Если CMYK используется для печати, то RGB – это самая распространенная модель в цифровой графике. В отличие от принтеров, компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре. Именно поэтому RGB является основной моделью, используемой веб-дизайнерами.
«К чему может адаптироваться дизайн?» - спросите вы. К виду используемого устройства, ответим мы. С увеличением использования мобильных устройств адаптивный дизайн – дизайн, который позволяет сайтам идеально вписываться в экраны любых устройств, - стал ключевым моментом в создании сайтов. Если вы задумались об адаптации вашего сайта под мобильные устройства (а об этом стоит задуматься), то передовое решение Wix для создания мобильной версии сайта вам обязательно пригодится. И да, это абсолютно бесплатно.
Философия дизайна, в основе которой лежит простота и функциональность. Говоря буквально, у элементов, созданных по принципу «плоского дизайна», нет объема. В нем отсутствуют техники, направленные на придание глубины и объемности: нет градиентов, теней, текстур и бликов, которые придают объекту реалистичный вид. Вместо придания объема, плоский дизайн обращается к основам графики – ярким цветам, простым формам, кнопкам и иконкам.
По сути, скевоморфизм является противоположностью плоского дизайна. Вспомните дизайн старых «осей» Apple, состоявший из приложений и иконок, которые выглядели так, будто были взяты из реальности (компас, киоск, календарь и т.д.). Вот в чем суть скевоморфизма. Но после нескольких лет широкой популярности скевоморфизму, похоже, приходит конец.
Также известный как «дизайнерский язык Microsoft», был разработан Microsoft и сегодня используется во многих продуктах компании. Вдохновением для его создания послужили дорожные знаки, и его задача – быть таким же простым и ясным. Главное здесь – думать о дизайне как о рабочем пространстве, а не как о произведении искусства.
9. Плитка: этот структурный стиль стал популярен благодаря успеху сети Pinterest. В его основе лежит структура, состоящая из колонн, и параллельная, но не симметричная подача материала в виде «плиток». В результате получаются разноразмерные сегменты, которые при этом сохраняют аккуратный, организованный вид. При помощи редактора Wix вы можете легко применить эту красивую структуру на вашем сайте. Просто нажмите Добавить > Галерея > Masonry.
10. Верхняя половина полосы: это очень важный термин для дизайнеров и маркетологов, которые работают с онлайн платформами. Он взят из лексикона старомодных печатных газет, в которых самые важные новости размещались в «верхней половине полосы», чтобы читатели замечали их в первую очередь. В дизайне «верхняя часть полосы» означает ту часть экрана, которая полностью видна без прокрутки вниз. В идеале самая важная часть вашего контента должна размещаться там.
Может это и звучит как название средневековой пытки, в действительности длинная прокрутка – это один из самых последних трендов в мире веб-дизайна. Термин в общем-то говорит сам за себя и означает структуру, где длинные страницы требуют постоянной прокрутки вниз. У такого типа дизайна есть много преимуществ, узнать о которых вы можете .
12. Cайт-визитка (или одностраничный сайт): большинство пользователей интернета уже привыкли к тому, что сайт состоит из нескольких страниц, между которыми можно легко перемещаться при помощи навигационного меню. Одностраничный сайт имеет буквально одну страницу. Существует много причин, по которым владелец сайта может предпочесть одностраничный дизайн многостраничному. Однако разработка одностраничного дизайна требует немало планирования и продумывания, чтобы добиться эффективного распределения контента. К счастью, в Wix можно найти много , где все было продуманно заранее.
13. Негативное пространство, или «белые пятна»: термин, обозначающий свободное пространство, образуемое между элементами на странице, внутри или вокруг них. «Белые пятна» НЕ используются как отдельный элемент, а лишь служат обрамлением в структуре сайта. Они хороши не только с эстетической точки зрения, но и помогают в улучшении удобства пользования сайтом.
