10 заповедей типографики в веб-дизайне

blog-greatpro-digital

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

1. Соблюдай правило двух шрифтов

Максимум трех. Если больше, сайт будет выглядеть по-дилетантски.

2. Возлюби стандартные шрифты

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

3. Почитай контраст

Чтобы текст был читабельным, важно обращать внимание на его контраст с фоном. Считается, что соотношение контрастов для мелкого шрифта должно быть на уровне 4.5:1, для крупного – 3:1.

4. Воздержись от вдов и сирот в абзацах своих

Верхняя (англ. widow – вдова) и нижняя висячая строка (англ. orphan – сирота) точно не украсят собой текстовые блоки на вашем сайте. Выравнивайте их с помощью уменьшения межбуквенного интервала, изменения размера шрифта или переноса строки.

5. Не повышай голос на читателя своего

ПИСАТЬ КАПСОМ – худший способ расставить акценты. Лучше попробовать сделать это с помощью жирного текста.

6. Ограничивай себя в длине строк

Нормальная длина строки для десктопной версии – 45-75 символов, совсем идеальная – 60. Постарайтесь соответствовать.

7. Не сотвори десктоп-кумира

Давайте смиримся, что мобильных пользователей в интернете давно больше, чем ПК-шных. Поэтому пилить мобильную версию сайта нужно, не просто уменьшая в размерах десктоп, а создавая отдельный адаптированный дизайн. И некоторые правила типографики для сайта здесь тоже свои. Так, например, идеальная длина строк для мобильной версии не такая, как для десктопа, а 30-40 символов

8. Уважай расстояние между строками

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

9. Не возжелай переносов

Если знаков переноса слишком много, это мешает нормальному восприятию текста читателем. Поэтому, если есть возможность, лучше вообще от них отказаться.

10. Забудь о Comic Sans

Навсегда.

Аминь.

 

Похожие материалы:

Секреты веб-дизайнера: как добавить сайту солидности

Что нужно знать о геймификации сайта?

Форма входа и регистрации на сайте: советы веб-дизайнеру

Анатомия landing page: что такое надзаг, заг и подзаг?

6 признаков того, что ваш сайт устарел

4 ошибки, которые с головой выдают слабого веб-дизайнера

Анатомия landing page: аргументация цены

digital-blog-landing

Совершая покупку, тем более недешевую, покупатель, как правило, сомневается, стоит ли тратить такие деньги. Поэтому просто указать цену на сайте, поставить под ней СТА «Купить» и оставить клиента один на один с этим всем – не вариант. В сегодняшнем материале разбираем приемы, которые помогут аргументировать цену на товар и мягко подвести покупателя к оформлению заказа.

Доказательство качества

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

Гарантии

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

Дополнительная выгода

Если ваши цены не особо отличаются от рыночных, не стоит демпинговать или поливать грязью конкурентов. Лучше предложите покупателю дополнительные изюмки, включенные в заявленную стоимость. Бесплатная доставка, установка, поддержка, инструктаж, членство в клубе и т. д. Задача – показать клиенту, что за те же деньги он получит у вас больше, чем у конкурентов.

А если нет фиксированной цены?

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

1. Тарифная сетка. Классическая модель – три тарифа с тремя вариантами цены. Но можно и больше. Только поработайте над неймингом и придумайте интересные названия для тарифов.

2. Диапазон цен. Если не можете указать в тарифной сетке точные цены, попытайтесь сформулировать хотя бы минимальный порог. Например, «от $300». При этом напишите, от чего именно будет зависеть итоговая цена.

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

4. СТА «Узнать цену». Не самый удачный вариант. Есть исследования, которые говорят, что около 60% пользователей, не увидев на сайте цену, отказываются от дальнейшего взаимодействия. Поэтому такой способ рекомендуем оставить только на крайний случай.

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

Итого

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

А если у вас нет времени или человеческого ресурса, чтобы делать все это самостоятельно, можете заказать сайт «под ключ», позвонив в наше агентство по номеру +38-063-454-71-54 или написав на hello@greatpro.com.ua. Рады вам 24/7.

 

Похожие материалы:

Анатомия landing page: блок аргументов

Анатомия landing page: что такое надзаг, заг и подзаг?

Что нужно знать о геймификации сайта?

Секреты веб-дизайнера: как добавить сайту солидности

Как прикрутить SSL-сертификат?

SSL-digital-blog

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

Полезная штука, правда? Вот и Google так думает, поэтому еще с 2014 года, распределяя поисковые позиции, отдает предпочтение сайтам с https-соединением, отодвигая http на вторые роли. А с 2017 года и вовсе клеймит последние в своем браузере Google Chrome пометкой «Ненадежно».

Самоподписанный SSL

Хотите разобраться с установкой сертификата очень быстро и совершенно бесплатно? Есть вариант прикрутить так называемый self-signed или самоподписанный сертификат сразу на сервере. По крайней мере, в ISPmanager, Directadmin и Cpanel такая опция есть. Но этот способ годится только для сайтов внутреннего пользования. Все дело в предупреждении, которое выдают браузеры, заходя на сайты с самоподписанными сертификатами.

SSL-digital-greatpro

Понятно, что незнакомых пользователей эта надпись отпугнет, поэтому если посредством сайта вы собираетесь напрямую общаться с клиентами, self-signed – не вариант.

Какой сертификат выбрать?

Есть несколько видов SSL. Выбор зависит от специфики и потребностей бизнеса.

• Domain Validation SSL. Здорово подойдет для не слишком масштабных сайтов, на которых нет функции оплаты товара.

• Business Validatoin SSL. Это сертификат для интернет-магазинов, почтовых сервисов и других проектов, где важна надежна защита личных данных.

• Extended Validation SSL. Такую защиту используют банки и платежные системы. Помните характерный зеленый замок в адресной строке браузера? Он появляется, если ресурс использует сертификат данного типа.

• Wildcard SSL. Подходит для защиты большого количества субдоменов на нескольких серверах.

• CodeSigning SSL. Сертификаты для разработчиков ПО, защищающие пользователей при скачивании программного кода.

Выбирайте. 🙂

Устанавливаем сертификат

А сейчас непосредственно к инструкции по установке.

1. Первым делом нужно подготовить данные для подтверждения: цветную скан-копию свидетельства о внесении в Единый государственный реестр юридических лиц и ФЛП, а также документа, подтверждающего существование вашей компании.

2. Второй шаг – сгенерировать ключ и CSR (Certificate Signing Request). Для этого используем утилиту OpenSSL.

Сначала генерируем закрытый ключ командой: $ openssl genrsa -out mydomain.ua.key 2048

Затем генерируем CSR: $ openssl req -new -key mydomain.ua.key -out mydomain.ua.csr

3. Высылаем отсканированные документы и CSR на email Сертификационного центра или компании, у которой собираемся купить сертификат. В ответном письме нам пришлют счет. Оплачиваем его и через какое-то время получаем готовый SSL-сертификат.

4. Осталось его прикрутить. Заходим в настройки управления сайтом и находим раздел «Настройки SSL», заполняем необходимые поля и сохраняем. Готово.

5. Через какое-то время (от 1 до 3 лет – смотря на сколько вы купили сертификат) нужно будет его продлить. Тут все еще проще – генерируем новый CSR и пишем компании, у которой покупали сертификат. Подтверждающие документы и новый ключ при этом не нужны.

Вроде все более-менее понятно, не так ли? Но если у вас нет времени или человеческого ресурса, чтобы заниматься этим и другими веб-вопросами самостоятельно, обращайтесь к нам по номеру +38-063-454-71-54 или пишите на hello@greatpro.com.ua. Поможем.

 

Похожие материалы:

6 признаков того, что ваш сайт устарел

Выбираем домен для сайта: неочевидные секреты

С поисковиком на «ты»: гид по индексации сайта

Форма входа и регистрации на сайте: советы веб-дизайнеру

Выбираем домен для сайта: неочевидные секреты

web-blog-digital

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

Что по длине?

Максимальная длина доменного имени – 63 символа. Но использовать весь лимит, конечно, не рекомендуем. 🙂 Оптимально – 6-8 символов.

Если вы решили зарегистрировать имя, состоящее из двух слов, нужно решить, каким образом они будут писаться: слитно или через дефис. Например, «dorogaperemen» или «doroga-peremen». Такая неочевидность может помешать пользователю быстро найти нужный ресурс, поэтому лучше ее избегать и выбирать имя, состоящее всего из одного слова.

Латиница vs. Кириллица

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

Как быть с цифрами?

Их тоже можно использовать, главное, чтобы это не привело к неочевидности. Например, ваша компания называется «Один на один», поэтому сайт вы решили назвать так же. Получается, что в случае использования цифр к вариантам написания «odinnaodin» и «odin-na-odin» добавляется еще и «1na1», что опять же может здорово запутать пользователя. Поэтому рекомендуем воздержаться от цифр в доменном имени, если, конечно, вы не условный «Приват 24» и правильное написание вашего названия известно едва ли не каждому жителю страны.

На что ориентироваться?

При выборе доменного имени есть два пути. Первый – ориентироваться на название бренда. Если клиенты и так неплохо знают вашу компанию, не стоит ничего выдумывать – назовите сайт так же. Если же ваш бренд не слишком раскручен, можно ориентироваться на тематику вашего бизнеса, например, используя фразы типа «fotoohota», «poplavok» или «hachapuri».

Еще несколько лет назад довольно действенным был третий путь – ключевой запрос в доменном имени. Сейчас поисковики совсем не обращают на это внимания, так что такой вариант неактуален.

Доменная история

Регистрируя доменное имя, важно понимать, что вы не получаете его в вечное пользование. Раз в год аренду имени нужно продлевать. Не продлите – через какое-то время этот же домен может забрать себе другая компания. При этом вы и сами можете стать обладателем домена «с пробегом», причем как с хорошей историей, так и с сомнительной. Чтобы не унаследовать репутационные проблемы предыдущих владельцев домена, перед регистрацией обязательно проверьте его историю. Для этого есть море удобных ресурсов, например, Whois History или Web Archive.

Тест

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

На этом давайте закругляться. Возможно, прогнозировано было бы закончить этот материал фразой типа «Как лодку назовете, так она и поплывет», но в вебе это не всегда так. Даже самое сильное и уместное доменное имя не спасет продажи, если сам продукт, мягко говоря, не дотягивает. Поэтому первым делом уместно позаботиться о качестве товара, а уже потом о его подаче.

 

Похожие материалы:

6 признаков того, что ваш сайт устарел

Форма входа и регистрации на сайте: советы веб-дизайнеру

С поисковиком на «ты»: гид по индексации сайта

Страница 404: яркие идеи по оформлению

Анатомия landing page: что такое надзаг, заг и подзаг?

great-pro-blog-digital

Главная страница landing page – это как первое знакомство: для любви до гроба еще рановато, но искра проскочить обязана. В этом материале собираем контентное огниво, которое поможет зажечь. Разумеется, если держать его в ровных руках. 😉

А что, 4U уже не работает?

Конечно работает. Как и другие похожие формулы. Речь не о том. Просто чтобы вместить уникальность, полезность, специфичность и срочность (Uniqueness, Usefulness, Ultra-Specificity, Urgency) в один заголовок, нужно сделать его довольно громоздким, а это порядком ограничивает пространство для творческих идей автора, правда? Поэтому на главной странице landing page уместнее отказаться от единого заголовка, разбавив его вспомогательными текстовыми элементами.

Например?

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

1. Надзаголовок. Первое, что видит пользователь, перейдя на сайт. Короткая и интригующая фраза сразу над заголовком, призванная зацепить одну из струн в душе клиента и выиграть первые несколько секунд его внимания. Максимальная длина – 5-7 слов.

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

2. Заголовок. Если надзаголовок только цепляет струну, то задача заголовка – взять аккорд и окончательно зажечь пользователя, вызвать у него желание открыть следующую страницу и узнать о предложении подробнее. Здесь можно смело включить весь свой креатив и вволю «поиграться» со словами.

3. Подзаголовок. Самый длинный элемент стартовой страницы. Здесь важно подать те элементы из 4U, которые никак не были отображены в надзаге и заге. Подзаголовок можно сформулировать в несколько предложений и даже разбить на пункты-тезисы, если они действительно без воды и по делу. Сильный и емкий подзаголовок оставляет место для творчества в двух предыдущих элементах страницы.

ВАЖНО! Если в надзаголовке и заголовке допускаются игры с формой и содержанием, то в подзаголовке следует акцентировать внимание на результате и выгодах, которые получит клиент от пользования услугой.

landing-digital-gretpro

Нужен ли CTA уже на главной странице?

Как бы хороша ни была главная страница, она (*барабанная дробь) не является ключевым элементом landing page (*полетели помидоры). Потому что ее задача – только заинтересовать потенциального клиента и плавно подвести его к странице с аргументами. И именно там, после аргументов, уместно переходить к обсуждению цены и к продаже.

Вернемся к примеру с чат-ботами. Разве кто-нибудь станет нажимать условную кнопку «Заказать» уже после подзаголовка? Сначала хотелось бы узнать, что умеет этот бот, как конкретно его можно использовать, сколько он стоит, есть ли какие-то примеры его успешного внедрения в бизнес или хотя бы отзывы довольных клиентов. Поэтому на главной странице, если очень хочется, можно использовать СТА, но только не продающий, а, более нейтральный, например, «Узнать подробнее», «Посмотреть примеры», «Заказать консультацию» или «Протестировать».

Итого

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

Поэтому если вам нужна помощь в разработке landing page или интересуют любые другие веб-услуги, обращайтесь к нам по номеру +38-063-454-71-54 или пишите на hello@greatpro.com.ua. Проконсультируем и поможем 24/7.

 

Похожие материалы:

Анатомия landing page: блок аргументов

Оффер, который реально продает: формула 4U

Продающий текст своими руками: гид для «неписателя»

Секреты веб-дизайнера: как добавить сайту солидности