Вредоносное ПО (malware) - это назойливые или опасные программы,...
Скачать красивый кириллический (русский) шрифт бесплатно - это проблема каждого дизайнера. Чтобы вы не тратили несколько часов на поиск подходящего шрифта для нового проекта, мы сделали для вас подборку. 21 лучших кириллических шрифтов с бесплатной загрузкой доступны для использования в персональных и коммерческих целях. Но мы настойчиво рекомендуем проверять лицензию на официальной странице...
50+ премиум мокапов (скачать бесплатно). Обновлено в 2019 году
100+ ГБ звуковых эффектов от Sonniss (скачать бесплатно)
Ежегодно для разработчиков игр проводится конференция GameAudioGDC. На масштабном мероприятии тысячи саунд-дизайнеров представляют свои шедевры звукозаписи и обработки. В честь этого компания Sonniss регулярно выпускает набор бесплатных звуковых эффектов от участников конференции. Мы сделали для вас подборку из паков The Sonniss GDC Bundle за последние 5 лет. Скачайте 100+ ГБ высококачественных...
100+ лучших рекламных видео роликов в перерыве Суперкубка (Super Bowl с 2017 по 2019)
4 сайта с бесплатными премиум иллюстрациями для статей
Надоело малое разнообразие бесплатных иллюстраций в интернете для ваших проектов? А если покупать премиум работы для каждого проекта, то выгоду найти трудно. Поэтому представляем вам 4 крутых сайта, с которых вы можете бесплатно скачать иллюстрации для статей, веб и графического дизайна. В каталоге вы найдете множество иллюстраций и дизайна персонажей в едином стиле и цвете. Или можете лично...
600+ бесплатных спецэффектов для монтажа видео: VFX и SFX эффекты, анимации, текстуры, футажи, пресеты
Видеоролик со спецэффектами, созданный профессионалами, видно сразу. Теперь и вы можете выделиться среди других видеомонтажеров и моушн дизайнеров. Мы подобрали для вас подборку из 600+ бесплатных эффектов для монтажа видео. Большинство представленных эффектов разработаны профессионалами Premium Beat, поэтому позволяют значительно поднять уровень ваших работ. Воспользовавшись бесплатными...
«Супер DaVinci Resolve» – 14 уроков по обучению в программе DaVinci Resolve
Название: «Супер DaVinci Resolve» Тип: запись вебинаровДлительность: более 10 часовДомашние задания: естьАвтор: Олег Шарабанов Перейти на официальную страницу курса Перейти на официальную страницу курса Что научит курс DaVinci Resolve – это удобный, мощный и функциональный инструментарий, который предназначен для обработки видеороликов. В программу заложен широкий функционал, который позволит вам...
12 блогов о дизайне, чтобы быть в курсе
Сфера дизайна развивается слишком быстро. Самый эффективный способ отслеживать важные изменения – через призму чужого восприятия. Поэтому мы представляем вам подборку из 12 электронных ресурсов, посвященных дизайну в разных областях. Это лучшие сайты о дизайне, которые позволят вам следить за последними тенденциями. Чтобы всегда оставаться в тренде, смотрите также: 33 тренда в графическом дизайне...
10 лучших дизайнеров со всего мира
Сфера дизайна развивается слишком быстро, а тренды меняются один за другим. Профессиональный дизайнер всегда следит за более успешными представителями профессии, чтобы набираться опыта, вдохновения, идей и следовать мировым трендам. Поэтому мы подготовили для вас подборку из 10 крутых дизайнеров, на страницах которых вы точно найдете что-то полезное для себя. Ни в коем случае не нужно копировать...
40 уникальных экземпляров кинетической типографики
10 лучших книг о дизайне для дизайнера
Какими полезными бы не были видео-курсы и веб-статьи, книга может рассказать больше. Авторы вкладывают душу в свои книги, поэтому вы можете быть уверенными в качестве поданной информации. Мы решили продемонстрировать вам 10 книг, которые должен прочесть каждый дизайнер. С ними вы полностью окунетесь в мир диджитал дизайна и станете настоящим профессионалом своего дела. Смотрите также: 20 трендов...
4 лучших партнёрских программ онлайн школ и курсов для заработка в интернете в 2019
В этой статье пойдет речь о партнерских программах. Я расскажу: что такое партнерские программы;как на них зарабатывать;как обезопасить себя и свои доходы;какие особенности у лучших партнёрок в сфере фото, видео и графики. Партнёрские программы – это способ продвижения продуктов онлайн. Владелец/производитель платит вебмастерам, блоггерам, лидерам мнений и другим людям, которые помогают...
Топ 10 лучших примеров титров из кино и сериалов 2018 года
А вот и пятый ежегодный список лучших титров от редакции сайта Art of the Title. Как всегда, 10 лучших позиций выбрали по таким критериям: оригинальность;инновации;влияние на индустрию;актуальность предмету;техника исполнения. Более 200 претендентов вошли в длинный список на этот раз, но специалисты Art of the Title смогли выбрать лучшие из них. Эти титры были тщательно обработаны, выполнены...
Топ 10 лучших титров из кино и сериалов 2017 года
В четвертый ежегодный список лучших титров от редакции сайта Art of the Title попали представители полнометражного кино, веб-сериалов, конференций и видеоигр. Как всегда, при выборе позиций в топе специалисты пользовались такими критериями: оригинальность;инновации;влияние на индустрию;актуальность предмету;техника исполнения. В этот раз длинный список состоял из 142 претендентов. Сократить такое...
Все Вы слышали о таком интересном инструменте продаж, как Landing Page (одностраничный сайт), может даже и используете его. А Вы знали, что имеет место быть такое явление, как SEO продвижение лендинга?
Многим кажется, что продвинуть одностраничники хотя бы в ТОП-10 невозможно. Ведь они направлены исключительно на работу в связке с контекстной рекламой. Формы обратной связи в каждом блоке, видео, большие кнопки «Купить», огромное количество картинок и минимальное количество текста — все это является обязательными атрибутами одностраничного сайта, из-за чего его продвижение в поиске кажется пустой тратой времени.
Однако, нередко в поисковой выдаче можно наблюдать как раз эти самые LP. Но как они туда попали? Что нужно предпринять, чтобы сайт начал показываться хотя бы в ТОП-10? Давайте попробуем разобраться со всем этим.
Особенности landing page
Одностраничный сайт имеет ряд своих особенностей, которые заточены исключительно под работу с «горячим» трафиком из контекстной рекламы. Первая особенность — одна единственная страница, на которой размещается вся информация о товаре или услуге и другие элементы взаимодействия с посетителями: формы обратной связи, видео, большое количество картинок.
Второй основной особенностью является то, что информация представлена в на столько минималистичном виде, что понять поисковый робот попросту не в силах. В этом и заключается основная проблема при SEO продвижении сайтов подобного рода, что и делает это действо практически невозможным.
Однако, есть шанс на попадание в выдачу — это внутренняя SEO-оптимизация лендинг пейджа. Благодаря тому, что одна единственная страница будет оптимизирована под один или несколько запросов (помним правило: каждому запросу своя страница), робот сможет проиндексировать ее. А это может значить только одно: какая-то позиция нам гарантирована.
Дальнейшее продвижение к ТОП-10 возможно только при оптимизации других важных факторов:
- Поведенческие факторы ();
- Коммерческие факторы;
В рамках этого урока, я буду говорить только о внутренней оптимизации Landing page и коммерческих факторах.
Оптимизация Landing Page
Для того, чтобы робот мог определить под какой запрос заточен одностраничник, нужно провести работу с несколькими элементами:
- Составление правильно семантического ядра. Для LP целесообразно использовать 1-3 запроса близких по смыслу, иначе занять более-менее высокие места попросту не получится;
- Правильное заполнение мета тега Description и тега Title. Подробнее ;
- Правильное использование заголовков H1-H6. На странице должен быть один заголовок первого уровня (H1) — это главное правило. При чем в H1 обязательно нужно употребить ключевую фразу в прямом вхождении. Более подробным образом расписано ;
- Заполнение атрибута alt у картинок. Каждое изображение на сайте должно иметь уникальный атрибут alt. Рекомендуется использовать в нем ключевую фразу;
- SEO-текст на 1500 — 3000 символов без пробела. Как написать хороший SEO-текст узнаете .
Все это поможет поисковому роботу в определении релевантности страницы, за что и попадете в индекс. Но на этом еще не все: важно помнить и о коммерческих факторах, которые играют значительную роль в SEO продвижении коммерческих сайтов, коим и является одностраничник.
- . Так посетители смогут наглядно посмотреть, где находится Ваш офис;
- Добавляем различные сертификаты, повышающие доверие посетителей;
- Добавляем блок с отзывами. Отзывы всегда помогали поднять доверие, поэтому используем их по максимуму. Желательно видео-отзывы;
- Добавляем на лендинг видео по Вашей услуге или товару.
Поработав в этих направлениях, Вы здорово поднимите уровень доверия посетителей к Вам, что заметят и ПС.
Также обязательным образом:
- Адаптируем сайт под мобильные устройства. Все-таки поисковые системы учитывают данный фактор и за наличие мобильной версии сайта ранжируют его выше, в особенности Google;
Landing Page – сайт-одностраничник – очень действенный инструмент продаж. Но многие не знают, как его можно продвигать, ведь, по сути, он по всем SEO-параметрам уступает полноценным сайтам с боˊльшим количеством информации и страниц. Как же можно «показать» лэндинг в результатах поиска и обойти по некоторым запросам конкурентов в поисковой выдаче?
Трудности при продвижении лэндинга
Landing Page – это посадочная страница. Ее цель – продажи товаров и услуг. На одной странице сразу указываются все выгоды и преимущества товара, закрываются возражения пользователя и оформляется покупка. Есть второй вариант, когда Landing Page входит в структуру сайта как обычная страница, в этом случае его продвижение проще. Мы разберем первый вариант, когда Landing Page – это одностраничник.
Основные проблемы, с которыми сталкиваются владельцы сайтов при продвижении Landing Page:
- Маленькое семантическое ядро (СЯ). Просто невозможно продвигать большое количество запросов, ведь страница-то одна.
- Низкий охват аудитории, причина указана пунктом выше.
- При увеличении количества запросов невозможна правильная текстовая оптимизация.
- Не сделать внутреннюю перелинковку.
- Внешние ссылки. Сейчас и с полноценным сайтом нужно действовать аккуратно, а здесь все ссылки будут сконцентрированы на один URL, поэтому надо очень осмотрительно обходиться с SEO-ссылками. Естественные ссылки обязательны.
- Поведенческие факторы (ПФ) хуже, чем у полноценного сайта.
Но у лэндингов есть плюс – конверсия одностраничника выше, чем у обычного сайта.
Для грамотного продвижения Landing Page нужна своя стратегия.
Стратегия продвижения Landing Page
Стратегия продвижения одностраничных сайтов мало отличается от обычных. Те же этапы работы:
- Сбор ключевых запросов
- Текстовая оптимизация
- Оптимизация коммерческих факторов
- Оптимизация поведенческих факторов
- Работа с внешними ссылками
- Анализ конкурентов
- Технический аудит
Самое важное – это подбор запросов. Об этом можно почитать . Как правило, запросов немного, от 5 до 50. Главная трудность – подобрать наиболее точные.
Следующий этап – текстовая оптимизация.
Обратите внимание на ПФ. Нужно найти якоря, которые зацепят пользователя и заставят его как можно дольше находиться на странице.
Дальнейшие шаги – это расширение СЯ. Задача: охватить как можно больше смежных запросов и увеличить количество страниц. Для этого придется создавать базовую структуру сайта из лэндинга – добавлять новые страницы, чтобы охватить все запросы в тематике и выйти на полноценную структуру сайта.
Если лэндинг продвигается успешно, то он плавно превращается в хороший сайт с хорошей структурой.
Важные факторы при продвижении лэндинга, которые надо учесть
- Технический аудит Landing Page. Много всего на одностраничном сайте не проверить, но сделать надо. Не должно быть поехавшей верстки, ошибок, обрезанных картинок, текстов и т.д. Проверьте 10 раз, как работают кнопки заказа и форма обратной связи.
- Точная текстовая оптимизация. Права на ошибку просто нет – у вас одна страница и она должна быть хорошо оптимизирована.
- Семантика. Если в ТОПе по вашему запросу нет лэндингов, то задача усложняется. Старайтесь подбирать СЯ и продвигаться по тем запросам, по которым в ТОПе есть либо лэнды, либо страницы с похожим на него контентом.
Почему так: специфика продвижения на текущий момент такова, что, продвигая интернет-магазины, нужно выбирать запросы, где в ТОПе есть сайты со списками товаров и возможностью их купить. При попытке продвинуться по запросу, где в ТОП находятся информационные сайты или статьи, ничего не получится (на 99%). Следовательно, собираясь продвигать сайт-лэндинг, желательно убедиться, есть ли такие сайты в ТОПе. Конечно, есть 1% успеха, и примеры этому тоже есть. НО все же вероятность мала.
5. Взаимодействие с пользователем (внутренние ПФ). Нужно на единственной странице вовлечь клиента по максимуму. Используйте видео, фотографии, калькуляторы, акции, предлагайте скидки – все, что возможно, чтобы пользователь остался на странице и заинтересовался предложением.
6. Коммерческие факторы. Их придется сосредоточить на одной странице либо создавать новые, чтобы более полно получить вклад в ранжирование.
7. Моральная подготовка к расширению структуры. Если лэндинг затрагивает только часть необходимых запросов, а ваша цель – продвижение по большому пулу КС, то заранее настраивайте себя на то, что расширяться придется.
Покажем, как продвигать Landing Page на примере компании, реализующей БАДы.
Кейс
Исходные данные: Компания, которая занимается продажей БАДов. Сайта нет, трафика нет, ссылок нет.
Задача – продвинуть в ТОП поисковых систем Landing Page.
Семантическое ядро с одним ВЧ-ключом, 5 СЧ и остальные 44 – это НЧ-запросы.
Срок продвижения лэндинга – 4 месяца.
О том, как собирать запросы, рассказали выше. Учитывайте, что для лэндинга не нужно собирать большое СЯ, тут главное правильно подобрать запросы и сформировать из получившегося списка группы – кластеризовать.
Для кластеризации мы использовали сервис engine.seointellect.ru, есть и другие сервисы, можете пользоваться ими. Но помните, что ни один сервис не заменяет специалистов. Он помогает им в работе, но не более того.
Итак, мы собрали СЯ и сделали кластеризацию.
После автоматической кластеризации вручную перенесли некоторые запросы из одной группы в другую, некоторые объединили вместе и в итоге сформировали единую группу запросов, по которым и будет продвигаться наш лэндинг. Для проведения этой работы использовали логику, рекомендации заказчика и анализ поисковой выдачи.
Всего получилось 6 групп. Самая большая группа предназначена для продвигаемого лэнда, на остальные нужно делать новые страницы.
Технический аудит
Уделите ему достаточное внимание, хоть и кажется, что делать особо нечего. Для нашего лэндинга мы провели полный аудит, небольшие ошибки устранили.
Коммерческие факторы
Коммерческий Rank увеличивает релевантность не только страницы, но и сайта в целом.
При проведении коммерческого аудита появляется ряд проблем, связанных с тем, что нужно все уместить на одной странице. Мы проводили масштабные исследования по этой теме для специализированной конференции Baltic Digital Days в 2016 . Основные выводы:
Для разных тематик важны различные коммерческие факторы.
В примере после проведения аудита коммерческих факторов были подготовлены следующие изменения:
- Создание страниц: «Контакты», «О компании», «Акции».
- Новый раздел «Новости» с планом публикаций минимум 2 раза в месяц.
- Дополнительные страницы для охвата тематики: о пользе продукта, как пользоваться, инструкции, вопрос-ответ.
- Различные способы связи для клиентов: обратный звонок, онлайн-консультант, различные мессенджеры.
- Кнопки «шаринга» в социальных сетях , чтобы пользователи могли делиться страничкой.
- Покупка выделенного ip-адреса. При проверке сервисом 2ip.ru оказалось, что у сайта более 200 «соседей», большая часть очень сомнительного качества. Есть много мифов по этому поводу, есть исследования и доклады. Решили купить «выделенку», чтобы избежать возможных проблем.
Контент
На Landing Page контент располагается блоками. Важный момент: контент должен не только объяснять выгоды и стимулировать на заказ. В нем должны обязательно присутствовать все запросы, которые нам удалось собрать.
Для проведения текстовой оптимизации используем текстовый анализатор (тот же). Отмечаем свой регион и указываем продвигаемую страницу.
Возможные проблемы для лэндингов: вхождения и объем текстов придется распределять по фрагментам текстовых блоков. Это немного будет нарушать текстовый анализ, но в допустимых пределах.
При написании текстовых блоков важно использовать тематические слова (LSI), они описывают тематику и сделают контент более оптимизированным, а с учетом алгоритма «Палех» помогут в будущем собрать больше трафика.
Тексты должны быть отформатированы! Обязательно использовать в них списки, перечисления, таблицы с ценами, выноски, изображения, инфографику и ссылки.
Ссылки
- Первые ссылки из «джентльменского набора» – все, что можно получить быстро и бесплатно: сайты отзывов, вакансий, желтых страниц. Проставлять постепенно, без фанатизма. В среднем удается получить 50–100 штук.
- Далее биржи: для более естественного профиля распределили входящие ссылки между всеми страницами, с акцентом на главной. Всего около 150 ссылок за 3 месяца.
- Анкор-лист с большим количеством «безанкорных» ссылок и малым количеством прямых. Спамных конструкций старались избегать, чтобы не попасть под санкции Google.
Результаты
С момента старта работ до получения заметных результатов прошло около 2,5 месяцев – все запросы в ТОП 50, часть – в ТОП 10-20.
В итоге: через 4 месяца в ПС Яндекс все запросы были в ТОП 10, в Google – около 50%.
Но далеко не всегда получается достигнуть такой отработки, очень много факторов влияет на конечный результат: правильно подобранные запросы, группировка, текстовая оптимизация и другие работы. И главное – не получить санкции. В данном примере нужно «дожать» Google, для этого из решений можно попробовать нарастить ссылочную массу на 30% и увеличить объем контента.
Дальнейшие действия для достижения лучших результатов – это пересмотр СЯ, создание расширенной структуры и продвижение уже полноценного сайта, но это совсем другая история.
Выводы
Этот кейс является примером того, что продвижение Landing Page возможно. Нужно только правильно выстроить стратегию и планомерно над ней работать.
Итак, чтобы продвинуть Landing Page:
- Практически всегда приходится расширять его структуру.
- Нужно помнить, что подход к текстовой оптимизация ничем не отличается от стандартной. Только более затратно по времени, потому что нужно оптимизировать каждый текстовый блок.
- Лучше сконцентрироваться на СЧ и НЧ. ВЧ-запросы продвигать проблематично.
- Musthave – анализ конкурентов. Изучаем, кто в ТОПе, какой контент, какие коммерческие факторы, ссылки, содержание и т.д.
- Анализировать, анализировать и еще раз анализировать поведение пользователей.
При тщательном анализе и последовательной работе ваш лэндинг окажется в ТОПе и, вполне вероятно, обойдет конкурентов с полноценными сайтами.
Статья поможет разобраться с основными терминами в типографике. А чтобы информация лучше и легче воспринималась, скучные тексты проиллюстрированы веселыми картинками. Так же в статье собраны самые распространенные ошибки, которые допускаются веб-дизайнерами при работе с текстом и даны рекомендации как их избежать.
Типографика - сильнейший инструмент для выражения посыла в веб-дизайне. С его помощью вы можете объединить текстовую и визуальную составляющие, что поможет вам достучаться до посетителя. Правильное использование типографики поможет избежать типичных ошибок, допускаемых дизайнерами при создании очередного шедевра. Постараемся понять, что же мы делаем не так, и как избежать ошибок в будущем.
Для начала давайте разберемся с терминологией. Наверняка большинство терминов вам знакомы, но еще разок ознакомиться с определениями не будет лишним. Возможно, это дополнит ту информацию, которой вы уже обладаете.
Типографика
- свод законов, правил и норм оформления текста, основанных на изучении восприятия набора читателем. Знание и понимание типографики превращают текст в инструмент построения композиции, делают его живым, придают характер и способность передать идею не только при помощи содержания, но и графически.
Гарнитура - шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт - это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.
Гарнитуры можно разделить на две основные категории:
- Антиква - шрифты с засечками.
- Гротеск , соответственно, - шрифт без засечек.
Шрифт с засечками, как бы держит строку, а соответственно повышается удобочитаемость. Часто шрифты с засечками создают ощущение профессионализма и авторитетности предоставляемой информации, выражают уважение, подчеркивают стабильность и консерватизм в лучшем понимании этого слова. Шрифты без засечек, как правило, акцентируют рациональность, следование стилю, молодость и современность. Помогают создать пространство между буквами, а также отделить один знак от другого.
Кегль - высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.
Интерлиньяж - межстрочный интервал. Расстояние между базовыми линиями соседних строк.
Кернинг - расстояние между буквами. Основная суть кернинга - подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.
Есть замечательная игра-тренажер - Kern Type . Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.
Что мы делаем не так?
Используем большое количество шрифтов
Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.
Не знаем какого размера должен быть шрифт
Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор - в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.
Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование - Установки - Основные. Далее - Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».
Длина строки - разве это важно?
Длина строки не должна превышать 600 px. Это оптимальный размер для комфортного перемещения взгляда с одной строчки на другую. Очень широкую контентную часть тяжело читать - часто просто теряешь ту строчку, на которую собирался перейти после прочтения длинной предыдущей строки. Если все-таки необходимо растянуть текстовый блок на 1000 px и более по ширине, можно попробовать разбить текст на две или более колонок. Другой вариант - сделать межстрочное расстояние чуть больше обычного, чтобы визуально сильнее отделить строки друг от друга. Не забывайте разделять текст абзацами, это также поможет сделать его легко читаемым.
Интерлиньяж соответствует размеру шрифта
Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж - 21 px. 14 / 2 = 7 + 14 = 21.
Выбираем любой понравившийся шрифт
Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru , если, конечно, заказчик не предоставил вам свой шрифт.
O Lorem, lorem...
Совершенно естественно, что при разработке сайта почти никогда не используется тот контент, который там будет - зачастую, это контента ещё просто не существует. Поэтому дизайнеры (да и верстальщики тоже) используют «рыбу» - произвольный текст, который вписывается в контентные блоки. Это довольно удобно, особенно для дизайнеров, ведь теперь пресловутый «Lorem Ipsum...» можно вставить прямо из фотошопа (Меню: Текст - Вставить Lorem Ipsum). Но для русскоязычных сайтов делать это не рекомендуется - латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.
Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, - перед нами хороший сайт. Поэтому необходимо заранее продумать, как будут выглядеть все ссылки на сайте. Допустим, все кликабельные элементы - одного цвета, например красные, а не кликабельные другого - черного. Тогда никто не будет путаться.
Часто встречается такое: заголовок выделен красным цветом (ведь надо его как-то выделить), дальше еще несколько очень важных фраз УТП синего цвета и все это вперемешку с обычным текстом черного цвета. В конце текста кнопочка, тоже красная. Понятно, что надо кликать на кнопку, но, оказывается, кликабельным был еще и текст, окрашенный в синий (он открывал дополнительную информацию). Но кто знал, кто знал…
Выравнивание
Есть текстовые блоки, которые очень часто выравниваются неправильно - это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется - композиционно должно быть именно так) - это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.
Контраст
Контраст - это одно из основных средств выразительности в дизайне. Не нужно бояться больших форм и пустых пространств! Нарочито крупная типографика становится самостоятельным элементом, не требующим дополнительных графических средств оформления.
Статья поможет разобраться с основными терминами в типографике. А чтобы информация лучше и легче воспринималась, скучные тексты проиллюстрированы веселыми картинками. Так же в статье собраны самые распространенные ошибки, которые допускаются веб-дизайнерами при работе с текстом и даны рекомендации как их избежать.
Типографика - сильнейший инструмент для выражения посыла в веб-дизайне. С его помощью вы можете объединить текстовую и визуальную составляющие, что поможет вам достучаться до посетителя. Правильное использование типографики поможет избежать типичных ошибок, допускаемых дизайнерами при создании очередного шедевра. Постараемся понять, что же мы делаем не так, и как избежать ошибок в будущем.
Для начала давайте разберемся с терминологией. Наверняка большинство терминов вам знакомы, но еще разок ознакомиться с определениями не будет лишним. Возможно, это дополнит ту информацию, которой вы уже обладаете.
Типографика
- свод законов, правил и норм оформления текста, основанных на изучении восприятия набора читателем. Знание и понимание типографики превращают текст в инструмент построения композиции, делают его живым, придают характер и способность передать идею не только при помощи содержания, но и графически.
Гарнитура - шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт - это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.
Гарнитуры можно разделить на две основные категории:
- Антиква - шрифты с засечками.
- Гротеск , соответственно, - шрифт без засечек.
Шрифт с засечками, как бы держит строку, а соответственно повышается удобочитаемость. Часто шрифты с засечками создают ощущение профессионализма и авторитетности предоставляемой информации, выражают уважение, подчеркивают стабильность и консерватизм в лучшем понимании этого слова. Шрифты без засечек, как правило, акцентируют рациональность, следование стилю, молодость и современность. Помогают создать пространство между буквами, а также отделить один знак от другого.
Кегль - высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.
Интерлиньяж - межстрочный интервал. Расстояние между базовыми линиями соседних строк.
Кернинг - расстояние между буквами. Основная суть кернинга - подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.
Есть замечательная игра-тренажер - Kern Type . Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.
Что мы делаем не так?
Используем большое количество шрифтов
Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.
Не знаем какого размера должен быть шрифт
Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор - в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.
Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование - Установки - Основные. Далее - Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».
Длина строки - разве это важно?
Длина строки не должна превышать 600 px. Это оптимальный размер для комфортного перемещения взгляда с одной строчки на другую. Очень широкую контентную часть тяжело читать - часто просто теряешь ту строчку, на которую собирался перейти после прочтения длинной предыдущей строки. Если все-таки необходимо растянуть текстовый блок на 1000 px и более по ширине, можно попробовать разбить текст на две или более колонок. Другой вариант - сделать межстрочное расстояние чуть больше обычного, чтобы визуально сильнее отделить строки друг от друга. Не забывайте разделять текст абзацами, это также поможет сделать его легко читаемым.
Интерлиньяж соответствует размеру шрифта
Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж - 21 px. 14 / 2 = 7 + 14 = 21.
Выбираем любой понравившийся шрифт
Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru , если, конечно, заказчик не предоставил вам свой шрифт.
O Lorem, lorem...
Совершенно естественно, что при разработке сайта почти никогда не используется тот контент, который там будет - зачастую, это контента ещё просто не существует. Поэтому дизайнеры (да и верстальщики тоже) используют «рыбу» - произвольный текст, который вписывается в контентные блоки. Это довольно удобно, особенно для дизайнеров, ведь теперь пресловутый «Lorem Ipsum...» можно вставить прямо из фотошопа (Меню: Текст - Вставить Lorem Ipsum). Но для русскоязычных сайтов делать это не рекомендуется - латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.
Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, - перед нами хороший сайт. Поэтому необходимо заранее продумать, как будут выглядеть все ссылки на сайте. Допустим, все кликабельные элементы - одного цвета, например красные, а не кликабельные другого - черного. Тогда никто не будет путаться.
Часто встречается такое: заголовок выделен красным цветом (ведь надо его как-то выделить), дальше еще несколько очень важных фраз УТП синего цвета и все это вперемешку с обычным текстом черного цвета. В конце текста кнопочка, тоже красная. Понятно, что надо кликать на кнопку, но, оказывается, кликабельным был еще и текст, окрашенный в синий (он открывал дополнительную информацию). Но кто знал, кто знал…
Выравнивание
Есть текстовые блоки, которые очень часто выравниваются неправильно - это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется - композиционно должно быть именно так) - это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.
Контраст
Контраст - это одно из основных средств выразительности в дизайне. Не нужно бояться больших форм и пустых пространств! Нарочито крупная типографика становится самостоятельным элементом, не требующим дополнительных графических средств оформления.
