19 впечатляющих примеров использования текста в веб дизайне


Содержание

20 впечатляющих CSS3 примеров, техник и библиотек

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

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

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

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

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

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

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

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

10 основных ошибок веб-дизайнера при работе с текстом


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

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

Направление дизайна, описывающее правила и закономерности работы с текстовой информацией, принято называть «типографикой».

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

В этой статье я собрал 10 наиболее распространенных ошибок веб-дизайнеров в работе с текстом. Рассмотрим их более подробно.

1. Не шрифтом единым

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

Сайт http://www.ronoslund.com – пример, сочетающий в себе все 10 ошибок из этой статьи ��

На мой взгляд, отлично подобранные шрифты – http://www.transitplus.ru.

2. Когда размер имеет значение

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

Основной текст не должен быть слишком мелким или слишком крупным, иначе затрудняется его восприятие и усвоение, особенно в течение длительного времени. Размер шрифта для основного текста – вопрос очень субъективный. Во времена, когда самым популярным разрешением экранов для ПК было 1024х768, наиболее оптимальным считалось делать 11-12 px. Сейчас приоритеты сменились и основной текст чаще всего делают размером 17-20 px. Само собой разумеется, многое здесь еще зависит от выбранного шрифта, ведь иногда один и тот же размер, набранный различными шрифтами, выглядит по-разному.

Текст размером 30 px, набранный разными шрифтами (сверху вниз): Gabriola Regular, Garamond Regular, PT Sans Regular и Exo 2 Regular.

Заголовки всегда должны быть крупнее и заметнее основного содержания. Это – здравый смысл. Заголовок первого уровня не должен быть мельче заголовка третьего уровня. Это – аксиома, подкрепленная спецификацией HTML.

Фрагмент № 1 является подзаголовком и не может быть в данном контексте мельче фрагмента № 2 (основного текста).

Полная чехарда с заголовками. № 1 и 2 – это по логике и , соответственно, однако, под № 4 мы видим стиль заголовка, аналогичный (автор дизайна явно не в курсе, что на одной странице не может быть более одного заголовка первого уровня). № 3 – это

, которым в лендинге было бы целесообразно озаглавливать отдельные блоки данных, однако, ниже мы видим № 5, что по стилю соответствует


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

3. На вкус и цвет

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

И главный заголовок слева, и неактивные подзаголовки слайдера справа нечитабельны: темно-коричневый цвет на темном фоне не может быть выигрышным.

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

4. Кто во что горазд

Существует ряд простейших способов визуального выделения текста (без применения эффектов и фильтров в графическом редакторе): жирное начертание, курсив, подчеркивание, зачеркивание, верхний регистр (Caps Lock) и др. Как и где нужно (и можно) применять такое форматирование?

  • Жирное начертание. Обычно используется для визуального и логического выделения одного текстового фрагмента относительно других (заголовки, ключевые места в слоганах и пр.). Часто взаимосвязано с SEO.
  • Курсив. Не очень хорошо воспринимается в больших объемах. Оптимален для коротких текстовых блоков второстепенной важности (например, для подписей к заголовкам). Также широко используется в SEO.
  • Подчеркивание. Предназначено для обозначения гиперссылок. Огромное количество пользователей Интернета привыкло к тому, что ссылка – подчеркнута. Использовать подчеркивание для визуального выделения обычного текста – не совсем уместно.
  • Зачеркивание. Идеально подходит для визуализации старых данных (особенно на фоне новых, как правило, – более выгодных для целевой аудитории). Самый распространенный пример – старая цена на товар.
  • ВЕРХНИЙ РЕГИСТР. Использовать нужно с осторожностью, соблюдая чувство меры. Подходит для не длинных слоганов, заголовков и надписей на кнопках. Противопоказан для больших объемов текста.

Капслок в длинных текстах – залог затрудненного восприятия и плохого усвоения текстового материала.

5. Равняйсь!

Проблемы с выравниванием (выключкой) текста наблюдаются чуть ли не у каждого второго дизайнера. Кто-то прибивает нумерованные и маркированные списки к правому краю. Другие размещают целые абзацы текста по центру. Третьи – согласно моде 90-х годов ХХ века – делают выключку по ширине.

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

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

Могу озвучить следующие простые рекомендации по выбору типа выравнивания:

  • По левому краю: в любых ситуациях (длинные и короткие фрагменты текстов, любые списки, подписи к рисункам и пр.).
  • По правому краю: в редких случаях, когда такое расположение продиктовано особенностями композиции. Делать нумерованные и маркированные списки, прижатые вправо, – это моветон. Понять и усвоить подобное расположение информации способны носители тех языков, в которых принято читать справа налево.
  • По центру: оптимально для подрисуночных подписей, тезисных описаний к пиктограммам и других текстовых фрагментов небольшой длины.
  • По ширине: НИКОГДА в веб-дизайне!

Я перестал использовать выключку по ширине в макетах лет пятнадцать назад. Присоединяйтесь!

6. Шаг влево, шаг вправо

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

Буквы в блоке контактных данных прилипли к краям прямоугольной плашки.

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

Здесь обратная ситуация: отступы между новостями больше, чем расстояние от заголовка до первой новости (противоречит логике). Здесь просится какой-то разделитель между новостями, либо просто уменьшение отступа.

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

7. Семь раз отмерь


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

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

Реже встречаются ошибки с трекингом – межсимвольным интервалом. Я категорически не рекомендую делать этот параметр больше или меньше 0 в больших фрагментах текста. Подобные значения допустимы в каких-то ключевых заголовках или кнопках (и то – далеко не всегда).

Сверху – различный трекинг для текста (0,50, 150). Отчетливо видно, как ухудшается восприятие с ростом межсимвольного интервала. Снизу – кнопки с текстом, набранным с различным трекингом: 0, –75 и 250.

8. Я не волшебник, я просто учусь

Я очень рад, что прошли те времена, когда использование таких текстовых эффектов, как Bevel&Emboss (тиснение) или Stroke (обводка), считалось верхом современности и мастерства дизайнера. Сейчас подобные «изыски» встречаются все реже и, в основном, у новичков, которые только недавно в совершенстве освоили MS Word и готовы перейти к более серьезным инструментам.

Цукерберг рекомендует:  Перспективы - Факультет ИИ или Аналитик Big Data

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

Одна из самых распространенных ошибок – использование огромной тени в тексте для контраста с фоновой картинкой.

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

9. Рыба ищет, где глубже, а человек — где лучше

Lorem ipsum… Наверное, не найдется пользователя Интернета, которому оказались бы не знакомы эти слова. Ведь так начинаются в макетах многие «тексты для примера» (именуемые в среде дизайнеров «рыбой»).

Lorem ipsum — классическая панграмма, условный, зачастую бессмысленный текст-заполнитель, вставляемый в макет страницы. Используется в качестве заполнителя по крайней мере с XVI века. Является искаженным отрывком из философского трактата Марка Туллия Цицерона «О пределах добра и зла», написанного в 45 году до н. э. на латинском языке.

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

Отзывы никогда не бывают одинакового объема. Как будет выглядеть блок отзыва с меньшей или большей длиной?

А если название товара будет в две строки? А если в три? Хорошо, если верстальщик попадется думающий и сможет самостоятельно ответить на эти вопросы. А если нет?

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

10. Чукча не писатель, чукча – читатель

Мне как человеку образованному всегда очень неприятно видеть орфографические ошибки в дизайне. Это коробит, вызывает негативные эмоции, и (на мой взгляд) не добавляет плюсов в копилку дизайнера.

Ну, хорошо – допустим, в школе вы прогуливали уроки русского языка и литературы, но ведь проверку правописания в том же Word’е никто не отменял, неужели так сложно прогонять все тексты через умную программу?

Самые заезженные ошибки, которые давно перешли из разряда досадных «очепяток» в категорию эталонов безграмотности:

Казалось бы – такая мелочь, а осадочек, как говорится, остался.

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

Заключение

Как видите, промахи веб-дизайнеров в работе с текстом – не самое редкое явление. И необходимо регулярно проводить работу над ошибками, стараясь уделять оформлению текста гораздо больше внимания.

45 креативных примеров использования шрифтов в веб-дизайне

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

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

Сейчас же, мы предлагаем вам ознакомиться с нашей подборкой, которая направит вас в правильном направлении. Наслаждайтесь!

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

20 бесплатных шрифтов для минималистского дизайна

35 самых лучших и удобных шрифтов с русским алфавитом

45 грязных и грубых бесплатных шрифтов для ваших дизайнов

21 пример использования красивых цветов в веб-дизайне

KreativeFont – именно здесь следует искать креативные шрифты

Adobe Edge Web Fonts: новый сервис веб-шрифтов

Цветная подборка красивого и креативного использования шрифтов в дизайне

30 роскошных новых бесплатных шрифтов для Вашего дизайна

24 высококачественных и бесплатных символьных шрифтов

25 превосходных рукописных шрифтов

  • 26.10 | 18:00 —


Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

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

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

30 ярких примеров использования типографики в дизайне

20 июля 2012 | Опубликовано в Веб-дизайн | 7 Комментариев »

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

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

Примеры хорошего веб-дизайна

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

Советы по дизайну для успешного сайта

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

Например, вот сайт магазина Tessemae’s, который продает приправы:

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

А вот пример из сферы услуг — современный сайт архитектурно-строительной компании Kephart:

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

2. Удобство использования. Юзабилити охватывает множество параметров, от скорости загрузки до удобства навигации и наличия поиска. Мы уже писали о принципах веб-дизайна интерфейса пользователя, но вот короткая выжимка:

  1. Знайте уровень своего пользователя (сайт, с помощью которого можно строить математические модели будет сильно отличаться по интерфейсу от онлайн-магазина с одеждой).
  2. Используйте уже известные модели (если пользователь не поймет, как пользоваться меню сайта, то он вряд ли уделит время его содержимому).
  3. Создавайте визуальную иерархию (покажите пользователю, что самое важное и четко разделяйте блоки текста, чтобы упростить просмотр).
  4. Не усложняйте (если что-то можно сделать еще проще — делайте).

Например, Wunderlist использует значки и принципы, которые знакомы пользователям по почтовым (перетаскивание дел в списке, inbox, чат) и офисным приложениям и календарям (оповещения, сортировка), а также стандартное для бумажных списков вычеркивание выполненных дел:

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

Например, на сайте Starbucks использован фирменный оттенок зеленого и черный — цвет основного напитка, который компания продает в 67 странах мира:

4. Качество контента. Оно состоит из двух показателей: читабельности полезности. Если полезный контент будет нечитабельным, то пользователь никогда не узнает, насколько он был ценным. В то же время неинтересное наполнение, которое не несет пользы, не спасет даже самый лучший дизайн.

5. Можно ли доверять этому сайту? Корпоративный сайт, где в качестве средства связи указан только адрес электронной почты, вызывает недоверие у пользователей. Блоги, об авторах которых ничего не известно, кажутся ненадежными. Магазины, которые не рассказывают ничего о способах оплаты и доставки не получают заказов. Поэтому проверьте:

  1. Понятно ли, кому принадлежит сайт?
  2. Заметен ли логотип компании?
  3. Предоставляются ли подробные контактные данные: почтовый адрес, карта проезда, время работы, номера телефонов, адрес электронной почты.
  4. Есть ли на сайте раздел, посвященный сотрудникам компании? Наличие такого раздела создает ощущение уже состоявшегося знакомства.
  5. Имеются ли на сайте отзывы клиентов и портфолио?
  6. Что известно об истории компании? Как давно она существует? Кто основатель? Кто инвесторы? Какие у компании цели?
  7. Есть ли сведения о гарантийном возврате и обслуживании? Условиях использования и политике конфиденциальности?

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

Также пользователю сразу показывают стоимость техники — это вызывает доверие.

Последние тенденции в дизайне сайтов

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

Адаптивность

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

Плоский дизайн

Плоский дизайн сохранит позиции, поскольку ориентируется на конечного пользователя. Для него характерны простота, отсутствие лишних эффектов и несложная типографика:

Использование анимации и видео

Фоновые видео и анимация используются с целью сделать сайт более живым и интерактивным. Вот пример на странице нашего IT-ивента:

Распространение UI-паттернов

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

Чтобы понять, можно ли следовать той или иной тенденции, спросите себя:

  1. Повлияет ли она понимание цели сайта?
  2. Усложнит ли новый дизайн навигацию?
  3. Помешает ли она пользователям выполнять действия с сайтом? (Например, регистрироваться или оставлять отзывы.)
  4. Способна ли она исказить имидж бренда?


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

15 важных терминов в веб-дизайне

Хотите говорить на одном языке с профессиональными веб-дизайнерами, понимать смысл терминов, которые встречаете в блогах и знать их в первую очередь для себя? Листайте ниже! Мы подготовили для вас 15 основных терминов в веб-дизайне.

1. Vector graphics

Vector graphics – векторная графика – это визуальные элементы, состоящие из геометрических форм. Ее преимущество над растровой графикой в том, что ее проще использовать в работе с изображениями больших размеров.

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

2. Bitmapped graphics

Bitmapped graphics – растровая графика. Уже описана выше. Стоит добавить, что растровые изображения всегда зависят от разрешения экрана. При сильном увеличении растрового изображения можно будет увидеть точки, из которых оно состоит. К слову, каждая сделанная вами фотография является растровым изображением.

3. CMYK

CMYK: Cyan, Magenta, Yellow, Key color. Четырёхцветная палитра расшифровывается как название цветов «голубой, пурпурный, желтый и черный» и является самой распространенной цветовой схемой, используемой для печати.

Цвет компьютерного экрана изменяется от черного (отсутствие цвета) до белого (максимальная яркость всех составляющих цвета: красного, зеленого и синего). На бумаге, напротив, отсутствию цвета соответствует белый, а смешению максимального количества красок – темно-бурый, который воспринимается как черный.
Поэтому при подготовке к печати изображение должно быть переведено из аддитивной модели цветов RGB в субтрактивную модель CMYK. Модель CMYK использует противоположные исходным цвета – противоположный красному голубой, противоположный зеленому пурпурный и противоположный синему желтый.

4. RGB

RGB: Red, Green, Blue. Цветовая модель «красный, зеленый, синий». Если CMYK используется для печати, то RGB – это самая распространенная модель в цифровой графике. В отличие от принтеров, компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре. Именно поэтому RGB является основной моделью, используемой веб-дизайнерами.

5. Responsive web design

Responsive web design – адаптивный дизайн: “К чему может адаптироваться дизайн?” – спросите вы. “К виду используемого устройства,” ответим мы. Это дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключенных к Интернету.

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

6. Flat design

Flat design – плоский дизайн: философия дизайна, в основе которой лежит простота и функциональность. У элементов, созданных по принципу «плоского дизайна», нет объема. В нем отсутствуют техники, направленные на придание глубины и объемности: нет градиентов, теней, текстур и бликов, которые придают объекту реалистичный вид. Вместо придания объема, плоский дизайн обращается к основам графики – ярким цветам, простым формам, кнопкам и иконкам.

7. Skeuomorph

Skeuomorph – скевоморфизм — это принцип, который подразумевает заимствование облика элементов дизайна из физически существующих прототипов.

Стив Джобс считал, что именно этот принцип идеально подходит для воплощения своих амбиций: сделать пользование компьютером и другим электронным устройством максимально простым. Настолько, чтобы даже человек, никогда в жизни не державший ни iPhone, ни iPad и не работавший на Mac, смог за пару минут освоиться и понять, что здесь и как работает.

Цукерберг рекомендует:  Node js - Помогите c nodejs

Вспомните дизайн старых «осей» Apple, состоявший из приложений и иконок, которые выглядели так, будто были взяты из реальности (компас, киоск, календарь и т.д.). Вот в чем суть скевоморфизма. Но после нескольких лет широкой популярности скевоморфизму, похоже, приходит конец.

8. Metro

Metro – метро-интерфейс, также известный как «дизайнерский язык Microsoft», был разработан Microsoft и сегодня используется во многих продуктах компании.

Стиль Metro основан на принципах дизайна швейцарского стиля. Основными принципами Metro являются акцент на хорошей типографике и крупный текст, который сразу бросается в глаза. Microsoft называет Metro «простым, чистым, современным», а также «обновлением» по сравнению с основанными на значках интерфейсам Android и iOS.

Вдохновением для его создания послужили дорожные знаки, и его задача – быть таким же простым и ясным. Главное здесь – думать о дизайне как о рабочем пространстве, а не как о произведении искусства.
Вот вам наглядный пример, скриншот моего второго меню Windows 8.

9. Style Tiles

Style Tiles – плитка: этот структурный стиль стал популярен благодаря успеху сети Pinterest. В его основе лежит структура, состоящая из колонн, и параллельная, но не симметричная подача материала в виде «плиток». В результате получаются разноразмерные сегменты, которые при этом сохраняют аккуратный, организованный вид.

10. Above the fold

Above the fold – верхняя половина полосы – это очень важный термин для людей, которые работают с онлайн платформами. Он взят из лексикона старомодных печатных газет, в которых самые важные новости размещались в «верхней половине полосы», чтобы их замечали в первую очередь. В дизайне «верхняя часть полосы» означает ту часть экрана, которая полностью видна без прокрутки вниз и основной контент должен размещаться именно здесь.

11. Long scrolling

Long scrolling – длинная прокрутка– это один из самых последних трендов в мире веб-дизайна. Термин, в общем-то, говорит сам за себя и означает структуру, где длинные страницы требуют постоянной прокрутки вниз.

Если вы активно пользуетесь социальными сетями, то вероятно, вы уже встречались с длинной прокруткой. Сайты вроде Facebook, Вконтакте, Twitter (и многие другие) славятся невероятно длинными новостными лентами, для просмотра которых нужно листать и листать страницу вниз. Концепция такого дизайна основана на том, что посетители не хотят тратить драгоценное время на загрузку контента и им проще «проскролить» страницу.

12. Negative space

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

Одним из первых негативное пространство начал использовать в своих работах американский художник-оформитель Чарли Гослин. Многие дизайнеры до сих пор черпают вдохновение и приводят в пример его работы.

Негативное пространство» может становиться самодостаточным в композиции, конкурировать с «позитивным пространством» или поддерживать его. Однако в грамотном дизайне оно не должно отвлекать внимание от основного предмета композиции.

13. Тexture

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

14. Mockup

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

15. Promo website


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

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

7 смертных грехов веб-дизайна

Веб-дизайн — непростая сфера, провоцирующая постоянные споры. Кто-то скажет, что для привлечения внимания вашему лендингу просто необходим современный дизайн, включающий последние тенденции. Другие считают, что работающая посадочная страница, на которой посетители получают то, зачем пришли, гораздо важнее.

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

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

Содержание

1. Слишком мелкий шрифт

Многие допускают первую ошибку, делая слишком мелкий шрифт текста на ресурсе. На заре интернета большинство сайтов использовали шрифт размером в 12 пикселей, это был своего рода стандарт, которому следовали практически все. Однако со временем стало понятно, что такой мелкий шрифт тяжело читать. К тому же, оказалось, что привлечь и заинтересовать посетителя нужно практически сразу.

По данным маркетинговых исследований, средняя продолжительность концентрации внимания интернет-пользователей в 2013 году упала до 8 секунд, что на секунду меньше, чем у золотой рыбки. В том же исследовании сообщается, что посетители сайта читают в среднем только 28% слов.

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

Чтобы сразу привлечь внимание посетителей, нужно:

  • Создать сильные, вызывающие интерес заголовки.
  • Писать интересно, чтобы хотелось прочитать больше 28% контента.
  • Использовать для заголовков достаточно большой шрифт.
  • Убедиться, что основной текст написан удобным для чтения шрифтом.

Для всех вышеперечисленных пунктов актуально следующее: за последние несколько лет размер шрифта увеличился. Теперь минимальный стандарт составляет 14 пикселей, но многие сайты используют шрифт не меньше 18 пикселей, особенно если речь идет о больших текстах.

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

Ниже мы приводим несколько примеров отличного веб-дизайна со шрифтами идеального размера.

Совесть

Заголовок: 50 пикселей
Подзаголовок: 36 пикселей
Основной текст: 21 пиксель

Geekbrains

Заголовок: 80 пикселей
Подзаголовок: 24 пикселя
Основной текст: 15 пикселей

Evernote

Заголовок: 60 пикселей
Подзаголовки: 35 пикселя
Основной текст: 18 пикселей

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

Также следует помнить, что разные виды шрифтов различаются в размерах — 16-пиксельный Arial может быть меньше 16 аналогичной версии другого шрифта. Выбирайте размер и тип шрифта, подходящие именно для вашего сайта.

Шрифт текста в футере может быть небольшим, но если вы хотите, чтобы посетители прочитали написанное там, выбирайте шрифт не менее 16 пикселей.

Совет от профессионалов: Чтобы правильно подобрать тип и размер шрифта, скачайте приложение WhatFont. Это плагин для Google Chrome, который определяет параметры шрифта по клику на него. Открывайте сайты, дизайн которых вам понравился, и собирайте информацию.

2. Слайдеры

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

В большинстве случаев ответ будет отрицательным.

Пип Лайя (Peep Laja), основатель одного из самых известных блогов по оптимизации конверсии ConversionXL, в статье «Игнорируйте моду на слайдеры и карусели (Don’t Use Automatic Image Carousels or Sliders)» приводит цитаты экспертов в сфере интернете-маркетинга:

«Мы неоднократно тестировали динамические блоки и убедились в том, что это малоэффективный способ позиционирования контента» — Крис Говард, CEO WiderFunnel.

«Динамические баннеры — абсолютное зло, и они должны быть немедленно удалены» — Тим Эш, CEO SiteTuners

Также Лайя упоминает два исследования, доказавших неэффективность динамических слайдеров.

Первое исследование проводил юзабилити-гуру Джекоб Нильсен (Jakob Nielsen). Он провел опрос посетителей сайта Siemens о специальном оффере про стиральные машины на главной странице. Сообщение о скидках было написано 98-пиксельным шрифтом , но, к сожалению, посетители его не заметили — оффер затерялся в переключающихся блоках слайдера.

Этот эксперимент подтверждает мнение авторитетных маркетологов о том, что слайдеры снижают восприимчивость аудитории к офферу и контенту. Люди привыкли к баннерам в сайдбаре и перестали обращать на них внимание — тот же принцип работает и в отношении динамических слайдеров.

Второе исследование проводилось в Университете Нотр-Дам (Индиана, США). Исследователи выяснили, что на слайдер кликает около 1% посетителей сайта, причем 84% кликов приходится на первый слайд.

Зачем размещать слайдер, который займет ценную площадь главной страницы и получит лишь 1% CTR? Зачем досаждать посетителям мелькающими картинками, за которыми непросто уследить? Возможно, стоит предложить им один вариант, если большинство и так выберет первую картинку слайдера?

Так почему же, будучи такими неэффективными, слайдеры так популярны?

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

Но именно владелец лендинга/сайта должен отдавать себе отчет, будет ли этот слайдер эффективным и действительно ли это лучший способ донесения информации. Пип Лайя, Крис Говард (Chris Goward, Тим Эш (Tim Ash)) и многие другие известные интернет-маркетологи больше не верят в это.

Решением проблемы должно стать не копирование понравившегося макета в деталях, включая слайдер на главной странице, но попытка самостоятельно ответить на вопрос: «Как должна преподноситься именно ваш оффер?».


Ярким примером этого подхода может послужить веб-сайт агентства по найму репетиторов Genesis Tutoring — точнее, процесс его разработки. Основатели компании поначалу рекламировали сервис, распространяя флаеры в школах, затем они решили создать свой сайт и обратились к дизайнеру. Они хотели установить на главной странице слайдер с копией рекламного флаера. Дизайнеру удалось убедить заказчиков отказаться от слайдера и установить на главной странице просто копию флаера, добавив контакты и СТА-кнопку для обратной связи. Вот, что получилось.

Лаконичная страница с отличным дизайном и высокой конверсией вполне обошлась без слайдера. Превосходная работа, не так ли?

Для достижения аналогичных результатов на собственном лендинге следуйте этим правилам:

  • Не размещайте слайдер только потому, что остальные тоже так делают (даже если это рекомендует ваш дизайнер).
  • Вместо копирования страниц конкурентов найдите собственный вариант подачи информации, наиболее подходящий для ваших целей.
  • Выберите одно, самое привлекательное предложение, и разместите его выше линии сгиба. Можно продвигать и остальные, добавив специальную кнопку сверху или отдельными блоками ниже на странице — бросаться в глаза должен один оффер, остальное сделает лендинг.
  • Следующий этот пункт можно повесить в рамке на стене: определите основную цель посадочной страницы. Все CTA-кнопки должны следовать принципу «одна страница — одна цель».

3. Неконтрастные шрифты

Еще одна большая ошибка — использование низкоконтрастных шрифтов.

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

Содержимое посадочной страницы должно быть максимально читабельным. Согласно исследованиям, с возрастом роговица глаза пропускает все меньше света: в 40 лет через нее проходит в два раза меньше света, чем в 20, к 60 годам количество поступающего в глаз света сокращается еще на 20%. А теперь п рибавьте к этому людей с более серьезными проблемами со зрением.

Принимая во внимание эти цифры, вы действительно хотите усложнить восприятие контента, особенно после потраченных на привлечение посетителей сил и средств?

Всегда используйте контрастные шрифты: светлые на темном фоне и наоборот. Изредка возникает необходимость использовать цветной шрифт помимо черного или белого. Иногда дизайнеры используют светло-серый шрифт на белом фоне и светло-синий — на темно-синем. Зачем? Неужели так удобнее читать? Или внешние эффекты стали важнее содержания текста? Книги печатаются черными чернилами на белой бумаге по одной простой причине — так удобнее читать. Лендинги и сайты должны следовать этому правилу.

Ниже представлены примеры лендингов с низкой контрастностью текста:

Винни Пух

Каргомарт

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

Запомните: все тексты должны быть контрастными по отношению к фону, на котором они размещены. Если текст кажется трудноразличимым или недостаточно контрастным, не теряя времени, попросите дизайнера это исправить. Ваш лендинг — не площадка для упражнений в цвете, это инструмент продаж и конверсии.

Дополнительный совет: важна не только контрастность текста. Также будьте аккуратны с использованием реверсивного шрифта. Реверсивный шрифт — это белый текст на черном (или цветном) фоне вместо черного на белом.

Дэвид Огилви, величайший маркетолог современности, утверждал, что в рекламном тексте никогда не следует использовать реверсивный шрифт. Колин Уилдон, редактор крупнейшего в Австралии автомобильного ресурса, решил проверить эту теорию. Полученные им результаты поразительны:

  • черный текст на белом фоне: 70% хорошо, 19% удовлетворительно, 11% плохо
  • белый текст на черном фоне: 0% хорошо, 12% удовлетворительно, 88% плохо
  • белый текст на фиолетовом фоне: 2% хорошо, 16% удовлетворительно, 82% плохо
  • белый текст на синем фоне: 0% хорошо, 4% удовлетворительно, 96% плохо

Удивительно: результаты черного текста на белом фоне практически противоположны обратному сочетанию!

4. Неправильная высота строки

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

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

Хорошая новость: у опытного веб-дизайнера рука набита на многих прошлых проектах, и он сможет подобрать подходящую высоту строки «на глаз».

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

Крис Пирсон (Chris Pearson), дизайнер проекта DIYThemes, серьезно озаботившись этой проблемой, создал калькулятор, который вычисляет высоту строки по принципу «золотого сечения». Достаточно ввести размер шрифта и ширину строки, а калькулятор сам подсчитает идеальную высоту.

Вы можете не осознавать, почему вам нравится определенный дизайн (или шрифт). Талантливые дизайнеры сами находят пропорции «золотого сечения», остальным поможет калькулятор Криса Пирсона.

5. Слишком длинная строка

Еще одна возможная ошибка — слишком большая ширина текста.

Существует ли оптимальная длина строки?

В опубликованной исследовательским институтом Бэймард статье сообщается, что оптимальная длина строки составляет 50-60 символов, однако увеличение вплоть до 75 символов считается приемлемым решением.

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

Слишком короткие — нагружают глаза, что быстро утомляет.

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

Цукерберг рекомендует:  Тест по Ruby on Rails. Средний уровень

Для решения этой проблемы институт Бэймард рекомендует выставить максимальную ширину текста в 516 пикселей, что при использовании шрифта 18 пикселей составляет 65 символов в строке. Эти наиболее комфортные параметры текста для чтения онлайн приведены на картинке ниже

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

6. Отсутствие цветовых акцентов на СТА кнопках

Следующий в списке грехов веб-дизайна — пренебрежение цветовыми акцентами.

Опытные интернет-маркетологи знают, что для привлечения внимания кнопка призыва к действию должна быть яркой. Если вы побуждаете «Купить» или «Попробовать бесплатно», эти кнопки должны привлекать внимание, чтобы посетители кликали и выполняли ожидаемые действия.

Кажется, все просто. Но нередко дизайнеры не используют яркий акцент на самых основных СТА-кнопках, вместо этого они выбирая один из основных цветов лендинга.

Несколько рекомендаций по оформлению кнопок призыва к действию:


  • Кнопка должна быть достаточно яркой, чтобы привлекать внимание.
  • Кнопка должна быть дополнительного (комплементарного) цвета к цветовой гамме лендинга — это нужно для того, чтобы цвета не конфликтовали. Комплементарные цвета расположены на цветовом круге друг напротив друга. Если поместить их рядом, кажется, что они выглядят ярче.
  • Кнопка должна выделяться на фоне сайта. Синяя кнопка на синем фоне — плохая идея.
  • Кнопка должна использоваться для самых главных призывов к действию. Не используйте этот элемент слишком часто на странице.

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

7. Нарушение привычных принципов дизайна

И последний, самый тяжкий грех — отказ от стандартов дизайна.

Стив Круг (Steve Krug) пишет об этом в своей книге «Не заставляйте меня думать». Он особо подчеркивает, что посетители сайтов и лендингов привыкли к определенным функциям в определенных местах. Например к тому, что логотип и слоган находятся в левом верхнем углу сайта, а меню — в правом верхнем. Также посетители привыкли обращаться к странице «О нас», если хотят узнать подробнее о компании, и открывать страницу «Контакты», если нужно узнать адрес, телефон или представительства в социальных медиа. Это означает, что все перечисленные «привычные» функции стоит реализовать на своем ресурсе. Или дважды подумать перед тем, как нарушить основные принципы дизайна.

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

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

Заключение

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

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

Типографика, основы веб типографики

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

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

Вертикальное направление текста в веб-дизайне — хорошие примеры использования

Обыденные стандартные и шаблонные веб-проекты мало кого впечатляют, поэтому многие желают создать что-то действительно неповторимое. Некоторые интересные идеи найдете в подборке красочных дизайнов сайтов. Кто-то использует для этой цели пестрые изображения на главной, анимацию или какие-то оригинальные подходы к компоновке элементов. Один из таких методов — вертикальное расположение текста на экране. На самом деле подобную ориентацию надписей/контента в веб-дизайне не часто встретишь, здесь «балом правит» горизонтальный ритм….

7 популярных трендов типографики в веб-дизайне сайтов

Типографика – это стиль, расположение и внешний вид печатных букв/текстов на странице. В настоящее время она уже стала неотъемлемым элементом веб-дизайна. Множество интересных статей по теме найдете в соответствующем разделе нашего блога, который пополнился сегодня еще одной публикацией. Рассмотрим актуальные для данного направления тенденции дизайна, что появились и закрепились в 2020 году. Материал будет отличным дополнением записи о веб-типографике. Пост является переводом этой заметки. Цель любого сайта – привлечь…

50 красивых обоев на рабочий стол со словами и типографикой

Продолжаем обновлять старые заметки блога, наполняя их новым содержимым — сегодня рассмотрим оригинальные картинки на рабочий стол со словами и текстами. Обои однозначно понравятся всем, кто любит красивую типографику в различных ее проявлениях. Чем-то они отдаленно напоминают абстрактную тематику, однако по стилистике здесь встречаются абсолютно разные реализации: тут вам и демонстрация необычных шрифтов, и креативные текстовые композиции из трехмерных объектов; светлые, яркие, темные изображения; минималистичные…

Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip

После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники. Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает…

10 лучших Google шрифтов для заголовков

Google Fonts — один из самых крупных архивов реально бесплатных шрифтов с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию. С помощью сервиса вы сможете реализовать разные нестандартные примеры типографики. В данной статье найдете подборку из 10-ти бесплатных шрифтов Google Fonts, которые идеально подойдут для оформления заголовков сайта. Они установлены во многих веб-проектах по всему миру. Материал…

Оригинальные стили для текста в Photoshop

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

Красивая типографика для сайта

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

Оформление текста с помощью CSS3 на практике

CSS3 дарит просто удивительные возможности оформления текста. Теперь в арсенале веб-мастера (или веб-дизайнера) появляются такие типографские приемы и уровень контроля о которых раньше можно было только мечтать. Все это как нельзя лучше демонстрирует руководство с блога EchoEnduring перевод которого я вам и предлагаю. В итоге получается просто нереально интересное оформление текста и даже не верится, что все это сделано посредством CSS стилей, воистину сейчас интернет…

Подбираем шрифт для сайта с помощью онлайн сервисов

Это пост будет интересен тем кто в данный момент думает над типографикой сайта. Если разрабатываете какой-то новый проект с нуля или затеяли редизайн, вам могут пригодится два интересных сервиса с которыми я хочу вас познакомить. Первый сервис поможет вам заполнить макет подстановочным текстом (он же «рыба»), второй — определиться с его стилем. Когда «колдуешь» над новым макетом обычно содержимого еще нет, в то время как…

9 советов по типографике сайта

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

Типографика для веб

Приветствую всех, сегодня в Дизайн Мании гостевой пост про Типографику, представлен Лежневым Дмитрием (aka meekman), который по совместительству является генеральным директором компании Cifronet. По типографике существует множество книг и статей, однако лишь в некоторых из них раскрываются вопросы выбора и сочетания шрифтов. Ввиду открывающихся возможностей и перспективы бесплатного использования многих шрифтов в Интернет, дизайнерам придется овладеть еще одним важным навыком – умением выбирать подходящие шрифты,…

Логотипы и типографика

На одно из западных блогов из Канады наткнулся на интересную подборку логотипов олимпийских игр с 1924 по 2012 года. Автор проекта по случаю будущей в 2010 году зимней олимпиады в Ванкувере, решил собрать все предыдущие варианты для сравнения. Достаточно интересно глянуть на разницу между старыми и современными вариантами лого. Вот как выглядел логотип первой в истории олимпиады в Париже, лето 1924 год: Вторая и третья олимпиады…

20 великолепных примера типографики в веб-дизайне

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

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

В этой статье собраны 20 примеров великолепных концепций типографики. Давайте их рассмотрим.


Rusability

Кинетическая типографика позволяет дизайнерам с помощью формы обыгрывать содержание. Наблюдать за воплощением этой творческой игры – настоящий праздник для глаз.

Хотите погрузиться в креатив и вдохновиться отличными примерами смелой дизайнерской мысли?

Тогда вперёд! Мы выбрали для вас блестящие ролики с кинетической типографикой.

1. Coconut woman

Эта живая типографика от Motion Surfing заряжает энергией, передаёт стиль и радует яркостью красок.

2. С бумаги на экран

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

3. Язык

Дизайнер Мэтью Роджерс – человек, стоящий за этой кинетической типографической анимацией. Будучи фанатом языка в общем, Роджерс решил сделать его основой для проекта кинетической типографики, используя комбинацию After Effects, Flash и Illustrator.

4. 10 заповедей

Менее чем за две минуты эта анимация раскрывает 10 заповедей. Человек, создавший такой серьезный видеоряд – дизайнер Вит Рызнар.

5. Shine a light

Поп-мелодия от DJ Takuma при участии Angella Guistini довольно легко забывается и воспринимается как ненавязчивый фон. И это при том, что она была переведена с японского. Но яркое типографическое видео делает песню более контрастной и запоминающейся.

6. Childline: First Step

Рекламное агентство YCN Studio в сотрудничестве с продюсерской компанией Buck создали эту мощную анимацию, которая призывает детей рассказывать о сексуальном насилии.

В видеоролике предлагаются услуги конфиденциального бесплатного круглосуточного консультационного приёма детей Childline в Великобритании. Четырехминутная анимация использует кинетическую типографику и абстрактное искусство, чтобы донести смысл сообщения. Задача не из лёгких, и YCN Studio и Buck проделали колоссальную работу.

7. Breaking Bad

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

8. The Hush Sound – Lions Roar

Дизайнер Mig Reyes, один из двух создателей этого видео, работал над графической частью клипа «Lions Roar». Вдохновленный сильной графикой студии MK12, дуэт использовал After Effects для того, чтобы перенести текст песни на яркую типографику.

9. Procrastination

Это трейлер к бестселлеру Дэвида Макрэни «You’re Not So Smart», где анимированная типографика радует исключительным остроумием.

Спроектированная и выпущенная продукцией Plus3 анимация – это все о прокрастинации. Мы уверены в том, что вы будете кивать в знак согласия и улыбаться на протяжении всего видео ��

10. The Edge

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

11. Apocalypse Rhyme

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

Оливер Харрисон написал стихотворение, сочинил музыку и организовал все это в кинетическую типографику для Channel 4’s Random Acts. Наградой стал приз «Best Motion Graphics» на British Animation Awards 2014.

12. Bob

Оливер Смит – 3D аниматор и композитор, который может создать интересные и очень забавные эффекты.

13. Anonymous

Эта супер-крутая типографическая анимация рассказывает о том, как в 2007 году несколько людей создали группу Anonymous, а затем продолжили различные акции протеста.

14. Shop Vac

Художник Джарретт Хизер сделал это типографическое музыкальное видео для магазина Джонатана Култона «Vac». Юмористическая анимация заняла у Хизер где-то от 500 до 1000 часов. Всего чуть менее трех с половиной минут блестящего видео содержит несколько разных шрифтов, все они идеально подходят к повествованию.

15. Rolling Stones – Doom and Gloom

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

16. Karloff

Еще один перл от графического дизайнера Тибо де Фурнаса, который объединил современные шрифты Bodoni и Didot в этом прекрасном анимационном видео, размышляя о том, как две крайности можно объединить в единое целое.

17. Mad as Hell

Ключевая речь Питера Финча «Я сумасшедший, и я больше не собираюсь это слушать» по-прежнему актуальна 40 лет спустя.

18. Alphabet

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

19. Conan O’Brien

Этот кинетический видеоролик воссоздает диалог из заключительного эпизода «The Tonight Show» NBC, представленного Конаном О’Брайеном. Сочетание типографики и современных 3D букв отражает контраст между старым и новым.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих