4 крутых совета по типографике от крупнейших мировых брендов

Содержание материала:

Шрифтовые студии, определяющие вид современной типографики

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

1. Классики

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

URW++ (Unternehmensberatung Rubow Weber)

Основано: 1972, Гамбург, Германия

Популярные гарнитуры: Futura, Neuzeit Grotesk, Nimbus Sans, URW DIN, Franklin Gothic, Eurostille, Microgramma, Antique Olive, Baskerville, URW Clarendon, Folio, URW Egyptienne, Jenson, Beton, Impact, Baloon, Memphis, Mistral, Glasr Stencil, Liberty, URW Erbar

Berthold Types

Основано: 1858, Берлин, Германия

Популярные гарнитуры: Akzidenz-Grotesk, Akzidenz-Grotesk Next, Block BE, Futura BQ, Berliner Grotesk, Berthold Walbaum, Berthold Bodoni, Gerstner Original, Berthold Garamond, Berthold Baskerville, AG Schoolbook

LinoType

Основано: 1886, США

Популярные гарнитуры: Helvetica, Helvetica Neue, Helvetica Neue Pro, Avenir, Avenir Next Pro, Univers, Univers Next, Futura, Trade Gothic, Frutiger, Frutiger Next, Neue Frutiger, DIN Next, Glypha, Neue Hass Grotesk, Neue Hass Unica, Sabon, Linotype Didot, Neue Kabel, Eurostile, Optima, Optima Nova, DIN Next, Sabon Next, Times, Times Ten, Zapfino

2. Пионеры цифровой типографики

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

FontFont

Erik Spiekermann, Neville Brody

Основано: 1990, Берлин, Германия

Популярные гарнитуры: FF DIN, FF Scala, FF Scala Sans, FF Meta, FF Meta Serif, FF Bau, FF Trixie

House Industries

Основано: 1990, Йорклин, США

Популярные гарнитуры: Chalet, Chalet Book, Neutraface, Eames, Shag

Emigre

Zuzana Licko, Rudy Vander Lans

Основано: 1984, Беркли, США

Популярные гарнитуры: Matrix, Priori Sans, Priori Serif, Priory Acute, Vendetta, Mason, Variex, Dogma, Mr Eves, Mr Eves Modern, Mr Eves Sans, Democratica, Triplex, Exocet

Canada Type

Rebecca Alaccari, Patrick Griffin

Основано: 2004, Торонто, Канада

Популярные гарнитуры: Trump Gothic Pro, Trump Soft Pro, Gibson, Clarendon Text, Sol Pro, Press Gothic, Dutch Medieval, Jupiter, Camdus Pro, Vox, Vox Round

3. Маленькие, но большие шрифтовики

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

Underware

Akiem Helmling, Bas Jacobs, Sami Kortemäki

Основано: 1999, Гаага, Нидерланды

Virus Fonts

Основано: 1997, Лондон, Великобритания

65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи

Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.

Безлимитная графика для ваших проектов

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Главные тренды веб-дизайна в 2020 году

1. Смелые, яркие цвета

В 2020 мы наблюдали восхождение смелых и ярких цветов, и они не собираются сдавать свои позиции, превращаясь в один из самых значимых трендов 2020.

Проект: Show Go Poster Collection 2020 / Автор: ∆ Studio—JQ ∆

Проект: Daily Posters / Автор: Magdiel Lopez

2. Яркие и насыщенные градиенты

Последние годы ознаменовались возвращением градиентов. Ожидается, что они снова войдут в тренды веб дизайна, претерпев изменения в 2020 году: в палитру добавятся насыщенные цвета в сочетании с разнообразием текстур. Градиенты в обновленной версии будут использовать двухцветные эффекты.

Проект: Magic.co / Автор: Ludmila Schevenko

Проект: Electric Objects / Автор: Rose Pilkington

Проект: Gradient Studies / Автор: Evgeniya Righini-Brand

3. Цвет года (Пантон)

PANTONE® 16-1546 Живой коралл (Living Coral)

Проект: Pantone Color of the Year 2020 | Living Coral / Автор: ∆ Studio—JQ ∆

4. Простота и удобство

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

Проект: Creative case / Автор: Nikita Mahaev

Проект: A propos du cancer / Автор: Extra

5. Больше дизайна с дополненной реальностью

Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.

Проект: DIA / Автор: DIA

6. Экстра глубина (и полуплоский дизайн)

В 2020 году имеет смысл немного оживить традиционный плоский дизайн: добавление теней поможет сделать элементы более объемными, сохранив основные концепции минимализма, которые сделали плоский дизайн популярным. Пространство и объем — элементы новой концепции глубины.

Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida

Проект: Flyknit Lunar 3 / Автор: Callum Notman

Проект: Made You Look�� 255 | Live a little more / Автор: STUDIOJQ

7. Геометрические элементы

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

Проект: Nike Le Quartier / Автор: Atelier Irradié

Проект: France Colombia cultural season Brand design / Автор: Graphéine

8. Больше творческой фотографии

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

Проект: Aizone / Автор: Sagmeister&Walsh

Проект: Monkifesto / Автор: Snask

Проект: Nike AMD Revolution / Автор: Happy Finish

9. Дуплекс

Дуплекс (репродукция изображения с использованием полутонов двух ведущих цветов) имеет все шансы попасть в ведущие тренды веб дизайна в этом году. Эта техника не является новой — она появилась несколько десятилетий назад, но благодаря Spotify вновь обрела популярность.

Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira

10. Брутализм

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

Проект: DoD Cyber Guide / Автор: Marçal Prats

Проект: Power A political party / Автор: Bruce Vansteenwinkel

11. Анимация, Gift-картинки и синемаграфика

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

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

Проект: RED / Автор: Kevin Hou

Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck

Проект: Strong Women / Автор: Andreea Robescu

12. Генеративный дизайн

Генеративный дизайн уже несколько лет используется при разработке айдентики. За счет смешения цвета и формы этот прием позволяет добиться совершенно уникальной айдентики и повысить узнаваемость бренда.

Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio

Проект: Sydney School of Entrepreneurship / Автор: For The People

Проект: Archdiploma Dynamic Identity / Автор: Process

13. Набор цветов и узоров из 80-90-х

Где мы это видели? Ну конечно же: это возвращение популярных в 80-90-е цветов с их кислотным розовым и дерзкой контрастностью. Можно ли назвать эти ностальгические настроения вернувшимся трендом? Или все объясняется тем, что молодые дизайнеры — это люди, чье детство прошло в окружении сумасшедших цветов тех лет?

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

Проект: Yes To All / Автор: Nick Liefhebber

Проект: LOGOFOLIO 2020 / Автор: 268 Estúdio Design

Проект: 80’s inspired Pattern / Автор: Rahul Das

14. Кастомные иллюстрации

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

Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes

Проект: Illustrations for Koypo Industries / Автор: Milo Themes

Проект: Lifecycle / Автор: Paperpillar Studio

15. Иллюстрации в миксе с фотографией

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

Проект: Magazine covers / Автор: Andreea Robescu

Проект: Insects Love / Автор: Andreea Robescu

16. Реальные фото

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

17. Изометрический дизайн и фотография

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

Проект: Ultraviolet Break of Day / Автор: Field.io

Проект: Abstractions Vol.1 / Автор: Mohamed Samir

Проект: Isometric House / Автор: Angela Chan

18. Сочетание 2D и 3D

Создавать 3D объекты и помещать их в 2D проекты стало очень модно. Это сочетание дает уникальную внешнюю эстетику, соединяя глубину и плоскость. Технику можно применить в разных направлениях дизайна: от создания логотипов до веб-сайтов и рекламного видео. Конечный результат представляет собой сложную визуальную презентацию, которую невозможно забыть.

Проект: Daily Posters / Автор: Baugasm

19. Монохром

За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.

Что произойдет, если 3D пойдет дальше в создании объема для объектов одного оттенка? Использование одноцветного 3D позволяет дизайнерам добиться иллюзии объема с помощью глубины цвета и теней.

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

Проект: Magrela Popcorn / Автор: Hugo Aranha

Проект: Amazonia Beverages / Автор: Hugo Aranha

Проект: Nespresso Expertise / Автор: JVG ™

20. Дудлы (иллюстрации, нарисованные вручную)

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

Проект: Toasted Pets! / Автор: Brosmind ®

Проект: Awake Festival Proposal / Автор: Milo Themes

Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan

21. Смешение и пересечение стилей

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

Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly

Дизайн логотипа

22. Адаптивные лого

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

Адаптация логотипа стала топовой задачей для дизайнеров: бренд должен быть эффектно представлен вне зависимости от пространства и измерений. Бросая вызов дизайнерам, адаптивные логотипы становятся маст-хевом в 2020 году.

Проект: Responsive Logos / Автор: Joe Harrison

Автор: Design Studio

23. Логотипы с анимацией

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

Проект: Type With Pride Gilbert font / Автор: Fontself Team

Проект: Logo Visual identity / Автор: Mariusz Mitkow

24. Яркие и забавные лого

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

Проекты: Axel Flores , Vladimir Lifanov , Silvestri Thierry , Vadim Carazan , Onrepeat Studio , Serafim Mendes

25. Негативное пространство

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

Проекты: SeisTrece Studio , Vadim Carazan , Quim Marin , Bureau Rabensteiner , Andrei Traista

26. Геометрические фигуры и узоры

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

Проекты: islam biko , Quim Marin , Silvestri Thierry , Vadim Carazan

27. Монограммы

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

Проекты: Milo Themes , Romain Billaud

28. Градиенты

Градиенты — один из главных трендов, унаследованных от 2020-2020 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?

Проекты: MICHAEL SPITZ , Nicholas Slater , Jeroen van Eerden , Vadim Carazan

29. Наложения

В связи с восхождением тренда дуплекс эффект наложения элементов друг на друга невероятно популярен в дизайне логотипов. Взгляните на нашу подборку.

Проекты: CaveLantern , Fontself Team , Rosie Manning

Веб-дизайн (Ui/Ux)

30. Концепция Mobile First

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

Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .

31. Микровзаимодействия

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

Элементы становятся текучими: кнопки могут менять форму, и все поверхности скрывают анимированные сценарии, ожидающие прикосновения и активации. Готовы спорить, что они не покинут пьедестал и в 2020 году.

Проект: Brewskies v2 / Автор: Kevin Yang

Проект: Gesichtspunkt / Автор: Alim Maasoglu

32. Встроенная анимация

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

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

Проект: inturn website / Автор: INTURN

33. Креативные экраны загрузки

Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.

Проект: Awwwards Conference / Автор: Adoratorio

34. Раскладка с ломаной «сеткой»

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

Проект: The Refugee Nation Web Design Branding / Автор: Justin Au

Проект: Ueno Concepts / Автор: Ben Mingo

35. Разбивка страницы

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

Проект: Product Landing Page UI / Автор: Dinesh Shrestha

Проект: Design Thinking / Автор: Radowan Nakif Rehan

36. Больше (интерактивного) 3D в оформлении

Главный тренд, который признает современный веб дизайн 2020 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.

Проект: Atacac 2020 Yearbook

Проект: The Artery

37. Закругленные углы и плавные формы

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

Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow

Проект: Landing page project design / Автор: Mariusz Mitkow

38. Фоны с движущимися элементами

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

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

Проект: Wibicom / Автор: Wibicom Agency

39. Футуристические узоры

В начале 2000-х будущее виделось похожим на показанное в «Матрице»: бегущие по экрану цифры, технологии, робототехника, пульсирующий свет.

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

Проект: Crown Tech / Автор: Jan Wolinger

Проект: SpaceShip / Автор: Arif Rachman Hakim

Проект: Data Visualization Concept / Автор: Mario Šimić

40. Монохромные иконки

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

Проект: Icon Design / Автор: Eaton

41. Иконки, частично заполненные цветом

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

Топ-пост этого месяца:  Программа SocialKit отзывы и инструкция по работе

Проект: Alfred icons / Автор: Andrea O

Проект: Icons / Автор: Alisa_

42. Скроллинг с Parallax

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

Parallax — бессменный тренд веб-дизайна, продолжающий делать сайты оригинальными и запоминающимися. Создавая 3D эффект между движущимися передним планом и фоном, Parallax придает неуловимую глубину странице и плавность пролистывания контенту.

Проект: Dex Multi-Layer Parallax / Автор: Milo Themes

43. Мондрианизм

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

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

Проект: Mondrian / Автор: Stugbear

Проект: Guernica / Автор: Shota

Типографика

44. 3D — моделирование

3D — многообещающий тренд, охвативший все сферы дизайна. Объемный текст добавляет реалистичности общей композиции.

Проект: Atypical / Автор: Pawel Nolbert

Проект: Alphabet Project / Автор: Serafim Mendes

Проект: RE NEON vI / Автор: Omar. Aqil

45. Жирная типографика

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

Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes

Проект: TEDxGroningen / Автор: Rudmer van Hulzen

46. Serif шрифты

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

Проект: Custom Type Design / Автор: Moshik Nadav Typography

Проект: Lux Naturalis Gala Invitation

47. Геометрический шрифт

Геометрические шрифты были востребованы последние несколько лет и остаются важным трендом и в 2020 году.

Проект: VitrineMedia / Автор: Graphéine

Проект: Sydney School of Entrepreneurship / Автор: For The People

48. Кастомные шрифты

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

Проект: Lingerie XO The Sexiest Most Powerful Typeface Yet / Автор: Moshik Nadav Typography

Автор: Jeanne Bataille

49. Эксперименты с выравниванием и кернинг

Хаотичность в типографике была одним из главных трендов 2020 и остается на вершине в 2020 году. Забудьте о правилах и дайте простор фантазии!

Проект: Studio Studio / Автор: Rudmer van Hulzen

Проект: nyMusikk annual report 2020 / Автор: Non-Format

50. Экспериментальная типографика

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

Проект: Experimental Chinese Typography / Автор: Letitia Lin

51. Типографика в миксе реальными фото

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

52. Креативная типографика

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

Проект: ILOVEDUST — 3D TYPE COLLECTION 1 / Автор: ILOVEDUST

Проект: Typography 3D — 9 / Автор: Alexis Persani

Дизайн упаковки

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

Плоский дизайн до сих пор остается востребован в оформлении лейблов и упаковок. Плоские фигуры, узоры и кастомные иллюстрации — верный выбор в 2020 году.

Проект: Cheddar-Cheese-Melt-Mcdonalds-Packaging / Автор: Mostafa Abdelmawla

Проект: The-Gang / Автор: MARKA NETWORK

Проект: Melio / Автор: Rachael Batley

54. Минималистский дизайн

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

Проект: Sarta-Milano / Автор: MARKA NETWORK

Проект: Gyalmo / Автор: Łobzowska Studio

55. Узоры и фигуры

Геометрические

Геометрические формы будут присутствовать во всех сферах дизайна. Выбирайте орнаменты, которые отражают суть продукта.

Проект: NICHE-Tea / Автор: IWANT design

Кастомные фигуры и элементы

Персонализированный дизайн — обязательная составляющая в построении идентичности бренда.

Проект: aleFanty / Автор: less

Проект: Nature Organic Chocolates / Автор: Mike Karolos

Дудлы

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

Проект: Zoe-Juices / Автор: Beetroot Design

Винтаж

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

Проект: Mutti Special Edition for FICO Eataly World / Автор: Auge Design

56. Смелая типографика

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

Проект: Amilk & Adidas / Автор: Duy Dao

57. Цвета

Дерзкие цвета

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

Проект: Deker-rebranding / Автор: less

Проект: Mochila / Автор: Sweety & Co.

Пастельные цвета

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

Проект: Freshly Baked / Автор: Design Happy

Проект: Ela cosmetics / Автор: ChocoToy cute

58. Необычные текстуры и формы

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

Проект: Sprout Green Paulownia Wooden Box / Автор: Yinjue

Проект: Eco bamboo tooth brush / Автор: Margas Family

59. Голографический эффект

Голографический эффект — вернувшийся тренд. Металлические текстуры позволяют достичь футуристического эффекта и создать магически притягательный дизайн.

Проект: EAT ME / Автор: PACKVISION AGENCY

Проект: Sphynx / Автор: Anagrama Studio

60. Градиенты на упаковке

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

Проект: YOU & OIL natural cosmetics / Автор: Irmantas Savulionis

61. 3D натюрморты

Последние годы был заметен рост числа проектов с 3D дизайном. Наблюдая работы некоторых 3D художников из топа, например MVSM или Питера Тарка, можно предсказать, что в 2020 году популярность 3D натюмортов возрастет. Для корпоративных коллабораций тренд окажется на одном уровне важности с разработкой лого и размещением продукции.

Проект: Squarespace stillife / Автор: MVSM

Проект: Adobe Government / Автор: Peter Tarka

Проект: Audi Q-Riosity / Автор: Peter Tarka

62. Абстрактные фигуры

Абстрактные 3D фигуры и яркие цвета — микс года. Это определенно один из самых влиятельных трендов, так что не упускайте его из вида.

Проект: Logitech CRAFT / Автор: Pawel Nolbert

Проект: SWEET SPIRALS / Автор: Kirill Maksimchuk

63. 3D отрисовка в стиле металлик

3D отрисовка в стиле металлик смотрится эффектно и несомненно относится к трендам, которые интересно отслеживать в 2020.

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

Проект: Grand Spectacular 2020 / Автор: Mustaali Raj

Проект: Various Concepts / Автор: Oleg Morozov

Проект: NIKE FC 3D Golden balls in the real world / Автор: T A V O .

64. 3D графика с анимацией

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

Проект: NIKOPICTO SHOWREEL 2020 / Автор: Nikopicto

65. Очень реалистичное 3D

3D всегда вызывает восторг и будет возглавлять современные тенденции веб дизайна 2020. Этот эффект способен обыграть реальность и вымысел так тонко, что их практически невозможно отличить. Картинка это или отрисовка? Грани продолжают стираться…

Проект: YOOX: Make a Wish / Автор: JVG ™

Проект: Air Max ’17 / Автор: Berd .

Статья собрана из источников:

Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

4 крутых совета по типографике от крупнейших мировых брендов

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

Неудивительно, что рейтинг включает в себя довольно много технологических компаний, большинство из которых к тому же находятся в первой десятке. Почетные лавры лидера достались в этом году компании Apple, чей прирост в стоимости бренда составил целых 43%, с такими цифрами нелегко тягаться даже нашему любимому поисковому гиганту — Google за прошедший год прибавила в стоимости только 12%.

Если отбросить абстрактные проценты и говорить о деньгах, то Apple оценивается в 170 миллиардов долларов, Google — в 120 миллиардов долларов, а Coca-Cola — в 78 миллиардов долларов. Так выглядит первая тройка.

Примечательно, что в рейтинг впервые не вошли финская телекоммуникационная компания Nokia и японская компания Nintendo, занимающаяся бизнесом в сфере видеоигр. Хотя они и остаются до сих пор на слуху, конкурировать с 4-миллиардной Lenovo, занимающей сотую позицию рейтинга, им уже, очевидно, не под силу. Lenovo, к слову, как и PayPal (97-е место), оказалась в данном рейтинге также впервые.

Помимо технологических компаний, рейтинг включает немецких, японских и южнокорейских автопроизводителей, американских газировочных гигантов Pepsi и Coca-Cola, McDonald’s, конечно же, Disney, Nike и многих-многих других. Вообще американские бренды среди прочих заметно преобладают. А вот ни один из российских брендов в топ-100 Interbrand, к сожалению, не попал.

Топ-100 лучших брендов мира

Американская организация Interbrand опубликовала список из ста крупнейших брендов мира, сведя в него самые успешные компании со всей планеты.

В ходе своей работы аналитики Interbrand оценивали саму торговую марку. В то же время рыночная капитализация корпораций не рассматривалась. Стоит обратить внимание на то, что 4 из 5 ведущих брендов относятся к сектору высоких технологий, да и вообще концентрация представителей IT-бизнеса указывает на растущую роль этого сектора на мировой арене. В руководстве Interbrand неслучайно указывают, что мир стоит на пороге нового мира глобальных связей и сетей, потребитель неизбежно полностью перейдет из обычной плоскости в цифровую.

Топ-100 самых дорогих брендов в мире:

    Coca-Cola
  • место: 1
  • стоимость бренда: $77,839 млрд
  • динамика стоимости за год: +8%

    Apple
  • место: 2
  • стоимость бренда: $76,568 млрд
  • динамика стоимости за год: +129%

    IBM
  • место: 3
  • стоимость бренда: $75,532 млрд
  • динамика стоимости за год: +8%

    Google
  • место: 4
  • стоимость бренда: $69,726 млрд
  • динамика стоимости за год: +26%

    Microsoft
  • место: 5
  • стоимость бренда: $57,839 млрд
  • динамика стоимости за год: -2%

    General Electric
  • место: 6
  • стоимость бренда: $43,682 млрд
  • динамика стоимости за год: +2%

    McDonald’s
  • место: 7
  • стоимость бренда: $40,062 млрд
  • динамика стоимости за год: +13%

    Intel
  • место: 8
  • стоимость бренда: $39,385 млрд
  • динамика стоимости за год: +12%

    Samsung
  • место: 9
  • стоимость бренда: $32,893 млрд
  • динамика стоимости за год: +40%

    Toyota
  • место: 10
  • стоимость бренда: $30,28 млрд
  • динамика стоимости за год: +9%

    Mercedes-Benz
  • место: 11
  • стоимость бренда: $30,097 млрд
  • динамика стоимости за год: +10%

    BMW
  • место: 12
  • стоимость бренда: $29,052 млрд
  • динамика стоимости за год: +18%

    Disney
  • место: 13
  • стоимость бренда: $27,438 млрд
  • динамика стоимости за год: -5%

    Cisco
  • место: 14
  • стоимость бренда: $27,197 млрд
  • динамика стоимости за год: +7%

    HP
  • место: 15
  • стоимость бренда: $26,087 млрд
  • динамика стоимости за год: -8%

    Gillette
  • место: 16
  • стоимость бренда: $24,898 млрд
  • динамика стоимости за год: +4%

    Louis Vuitton
  • место: 17
  • стоимость бренда: $23,577 млрд
  • динамика стоимости за год: +2%

    Oracle
  • место: 18
  • стоимость бренда: $22,126 млрд
  • динамика стоимости за год: +28%

    Nokia
  • место: 19
  • стоимость бренда: $21,009 млрд
  • динамика стоимости за год: -16%

    Amazon
  • место: 20
  • стоимость бренда: $18,625 млрд
  • динамика стоимости за год: +46%

    Honda
  • место: 21
  • стоимость бренда: $17,28 млрд
  • динамика стоимости за год: -11%

    Pepsi
  • место: 22
  • стоимость бренда: $16,594 млрд
  • динамика стоимости за год: +14%

    H&M
  • место: 23
  • стоимость бренда: $16,571 млрд
  • динамика стоимости за год: +1%

    American Express
  • место: 24
  • стоимость бренда: $15,702 млрд
  • динамика стоимости за год: +8%

    SAP
  • место: 25
  • стоимость бренда: $15,641 млрд
  • динамика стоимости за год: +8%

    Nike
  • место: 26
  • стоимость бренда: $15,126 млрд
  • динамика стоимости за год: +4%

    UPS
  • место: 27
  • стоимость бренда: $13,088 млрд
  • динамика стоимости за год: +4%

    IKEA
  • место: 28
  • стоимость бренда: $12,808 млрд
  • динамика стоимости за год: +8%

    Kellogg’s
  • место: 29
  • стоимость бренда: $12,068 млрд
  • динамика стоимости за год: +6%

    Canon
  • место: 30
  • стоимость бренда: $12,029 млрд
  • динамика стоимости за год: +3%

    Budweiser
  • место: 31
  • стоимость бренда: $11,872 млрд
  • динамика стоимости за год: -3%

    JPMorgan
  • место: 32
  • стоимость бренда: $11,471 млрд
  • динамика стоимости за год: -8%

    HSBC
  • место: 33
  • стоимость бренда: $11,378 млрд
  • динамика стоимости за год: -4%

    Pampers
  • место: 34
  • стоимость бренда: $11,296 млрд
  • динамика стоимости за год: раньше не оценивался

    Nescafe
  • место: 35
  • стоимость бренда: $11,089 млрд
  • динамика стоимости за год: -8%

    Ebay
  • место: 36
  • стоимость бренда: $10,947 млрд
  • динамика стоимости за год: +12%

    Zara
  • место: 37
  • стоимость бренда: $9,488 млрд
  • динамика стоимости за год: +18%

    Gucci
  • место: 38
  • стоимость бренда: $9,446 млрд
  • динамика стоимости за год: +8%

    Volkswagen
  • место: 39
  • стоимость бренда: $9,252 млрд
  • динамика стоимости за год: +18%

    Sony
  • место: 40
  • стоимость бренда: $9,111 млрд
  • динамика стоимости за год: -8%

    Philips
  • место: 41
  • стоимость бренда: $9,066 млрд
  • динамика стоимости за год: +5%

    L’Oreal
  • место: 42
  • стоимость бренда: $8,821 млрд
  • динамика стоимости за год: +1%

    Accenture
  • место: 43
  • стоимость бренда: $8,745 млрд
  • динамика стоимости за год: +9%

    Thomson Reuters
  • место: 44
  • стоимость бренда: $8,444 млрд
  • динамика стоимости за год: -11%

    Ford
  • место: 45
  • стоимость бренда: $7,958 млрд
  • динамика стоимости за год: +6%

    Heinz
  • место: 46
  • стоимость бренда: $7,722 млрд
  • динамика стоимости за год: +1%

    Colgate
  • место: 47
  • стоимость бренда: $7,643 млрд
  • динамика стоимости за год: +7%

    Goldman Sachs
  • место: 48
  • стоимость бренда: $7,599 млрд
  • динамика стоимости за год: -16%

    Dell
  • место: 49
  • стоимость бренда: $7,591 млрд
  • динамика стоимости за год: -9%

    Citibank
  • место: 50
  • стоимость бренда: $7,570 млрд
  • динамика стоимости за год: -12%

    Siemens
  • место: 51
  • стоимость бренда: $7,534 млрд
  • динамика стоимости за год: -5%

    Danone
  • место: 52
  • стоимость бренда: $7,498 млрд
  • динамика стоимости за год: +8%

    Hyundai
  • место: 53
  • стоимость бренда: $7,473 млрд
  • динамика стоимости за год: +24%

    Morgan Stanley
  • место: 54
  • стоимость бренда: $7,218 млрд
  • динамика стоимости за год: +9%

    Audi
  • место: 55
  • стоимость бренда: $7,196 млрд
  • динамика стоимости за год: +17%

    Nintendo
  • место: 56
  • стоимость бренда: $7,082 млрд
  • динамика стоимости за год: -8%

    Nestle
  • место: 57
  • стоимость бренда: $6,916 млрд
  • динамика стоимости за год: +5%

    AXA
  • место: 58
  • стоимость бренда: $6,748 млрд
  • динамика стоимости за год: +1%

    Xerox
  • место: 59
  • стоимость бренда: $6,714 млрд
  • динамика стоимости за год: +5%

    Adidas
  • место: 60
  • стоимость бренда: $6,699 млрд
  • динамика стоимости за год: +9%

    Caterpillar
  • место: 61
  • стоимость бренда: $6,306 млрд
  • динамика стоимости за год: +13%

    Allianz
  • место: 62
  • стоимость бренда: $6,184 млрд
  • динамика стоимости за год: +16%

    Hermes
  • место: 63
  • стоимость бренда: $6,182 млрд
  • динамика стоимости за год: +15%

    KFC
  • место: 64
  • стоимость бренда: $5,994 млрд
  • динамика стоимости за год: +2%

    Panasonic
  • место: 65
  • стоимость бренда: $5,765 млрд
  • динамика стоимости за год: +14%

    Sprite
  • место: 66
  • стоимость бренда: $5,709 млрд
  • динамика стоимости за год: +2%

    MTV
  • место: 67
  • стоимость бренда: $5,648 млрд
  • динамика стоимости за год: -12%

    Cartier
  • место: 68
  • стоимость бренда: $5,495 млрд
  • динамика стоимости за год: +15%

    Facebook
  • место: 69
  • стоимость бренда: $5,421 млрд
  • динамика стоимости за год: раньше не оценивался

    Tiffany& Co.
  • место: 70
  • стоимость бренда: $5,159 млрд
  • динамика стоимости за год: +15%

    Avon
  • место: 71
  • стоимость бренда: $5,151 млрд
  • динамика стоимости за год: -4%

    Porsche
  • место: 72
  • стоимость бренда: $5,149 млрд
  • динамика стоимости за год: +12%

    Nissan
  • место: 73
  • стоимость бренда: $4,969 млрд
  • динамика стоимости за год: +30%

    Visa
  • место: 74
  • стоимость бренда: $4,944 млрд
  • динамика стоимости за год: +10%

    Shell
  • место: 75
  • стоимость бренда: $4,788 млрд
  • динамика стоимости за год: +7%

    Santander
  • место: 76
  • стоимость бренда: $4,771 млрд
  • динамика стоимости за год: -6%

    3M
  • место: 77
  • стоимость бренда: $4,656 млрд
  • динамика стоимости за год: +18%

    Adobe
  • место: 78
  • стоимость бренда: $4,557 млрд
  • динамика стоимости за год: +9%

    Johnson & Johnson
  • место: 79
  • стоимость бренда: $4,378 млрд
  • динамика стоимости за год: +8%

    Kleenex
  • место: 80
  • стоимость бренда: $4,36 млрд
  • динамика стоимости за год: -7%

    Jack Daniels
  • место: 81
  • стоимость бренда: $4,352 млрд
  • динамика стоимости за год: +1%

    Burberry
  • место: 82
  • стоимость бренда: $4,342 млрд
  • динамика стоимости за год: +16%

    Johnnie Walker
  • место: 83
  • стоимость бренда: $4,301 млрд
  • динамика стоимости за год: +12%

    Prada
  • место: 84
  • стоимость бренда: $4,271 млрд
  • динамика стоимости за год: раньше не оценивался

    John Deere
  • место: 85
  • стоимость бренда: $4,221 млрд
  • динамика стоимости за год: +16%

    Pizza Hut
  • место: 86
  • стоимость бренда: $4,193 млрд
  • динамика стоимости за год: +2%

    KIA
  • место: 87
  • стоимость бренда: $4,089 млрд
  • динамика стоимости за год: раньше не оценивался

    Starbucks
  • место: 88
  • стоимость бренда: $4,062 млрд
  • динамика стоимости за год: +11%

    Corona Extra
  • место: 89
  • стоимость бренда: $4,061 млрд
  • динамика стоимости за год: +3%

    Smirnoff
  • место: 90
  • стоимость бренда: $4,05 млрд
  • динамика стоимости за год: +5%

    Ralph Lauren
  • место: 91
  • стоимость бренда: $4,038 млрд
  • динамика стоимости за год: раньше не оценивался

    Heineken
  • место: 92
  • стоимость бренда: $3,939 млрд
  • динамика стоимости за год: +3%

    BlackBerry
  • место: 93
  • стоимость бренда: $3,922 млрд
  • динамика стоимости за год: -39%

    MasterCard
  • место: 94
  • стоимость бренда: $3,896 млрд
  • динамика стоимости за год: раньше не оценивался

    Credit Suisse
  • место: 95
  • стоимость бренда: $3,866 млрд
  • динамика стоимости за год: -5%

    Harley-Davidson
  • место: 96
  • стоимость бренда: $3,857 млрд
  • динамика стоимости за год: +10%

    Yahoo!
  • место: 97
  • стоимость бренда: $3,851 млрд
  • динамика стоимости за год: -13%

    Moёt & Chandon
  • место: 98
  • стоимость бренда: $3,824 млрд
  • динамика стоимости за год: -13%

    Ferrari
  • место: 99
  • стоимость бренда: $3,770 млрд
  • динамика стоимости за год: +5%

    GAP
  • место: 100
  • стоимость бренда: $3,731 млрд
  • динамика стоимости за год: -8%

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

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

Более 95% процентов информации в Интернете представлено в виде письменного языка.

Хорошая типографика делает чтение непринужденным, в то время как плохая типографика отталкивает пользователей. Как утверждает Оливер Райхенштейн в своей статье “Веб-дизайн – это 95% типографики”:

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

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

1. Сведите число используемых шрифтов к минимуму

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

Чтобы предотвратить подобную ситуацию, попробуйте ограничить количество семейств шрифтов до минимума

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

Топ-пост этого месяца:  Изменить название кнопок Сохранить, Опубликовать

Убедитесь, что семейства шрифтов дополняют друг друга, основываясь на ширине их символов

2. Попробуйте использовать стандартные шрифты

В сервисах внедрения шрифтов (например, Google Web Fonts или Typekit) есть много интересных шрифтов, которые могут придать вашим проектам что-то новое, свежее и неожиданное. Они также очень просты в использовании. Возьмем, например, Google:

  1. Выберите любой шрифт, например, Open Sans.
  2. Сгенерируйте код и вставьте в своего HTML-документа.
  3. Готово!

Так что может пойти не так?

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

Если на вашем веб-сайте нет особой необходимости в использовании специального шрифта, например, для целей брендинга или создания впечатляющего опыта, обычно, лучше всего использовать системные шрифты. Беспроигрышный вариант – использовать системные шрифты: Arial, Calibri, Trebuchet и т.д. Имейте в виду, что хорошая типографика привлекает читателя к контенту, а не к самому шрифту.

3. Ограничивайте длину строки

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

“У вас должно быть около 60 символов на строку, если вы хотите получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к читабельности вашего текста”.

Для мобильных устройств вы должны использовать 30–40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первый использует 50-75 символов в строке (оптимальное количество символов в строке для печати и для компьютера), а второй использует оптимальные 30-40 символов.

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

4. Выберите шрифт, который хорошо работает в разных размерах

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

Шрифт Roboto от Google

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

Шрифт Vivaldi будет трудно читать на небольшом экране

5. Используйте шрифты с различимыми буквами

Во многих шрифтах слишком легко перепутать аналогичные формы букв, в частности “i” и “L” (как видно на изображении ниже), и маленькие расстояния между буквами, например, когда “r” и “n” выглядят как “m”. Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблем у ваших пользователей.

6. Избегайте печатать все прописными буквами

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

7. Не уменьшайте расстояние между строчками

В типографике у нас есть специальный термин для расстояния между двумя строками текста – лидинг (leading) или межстрочный интервал. Увеличивая межстрочное расстояние, вы увеличиваете вертикальный пробел между строками текста, как правило, улучшая читаемость в обмен на ценное пространство экрана. Как правило, для хорошей читаемости межстрочный интервал должен быть на 30% больше, чем высота символов.

Хорошо подобранное межстрочное расстояние улучшает читабельность. Изображение: Microsoft

Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%, как отметил Дмитрий Фадеев. Умение использовать пустое пространство заключается в том, чтобы предоставить пользователям легко усваиваемое количество контента, а затем удалять посторонние детали.

Слева: Текст, строчки которого почти перекрывают друг друга. Справа: Хорошо подобранные интервалы способствуют читабельности. Изображение: Apple

8. Убедитесь, что у вас достаточный цветовой контраст

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

  • Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
  • Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.

Эти строки текста не соответствуют рекомендациям цветового контрастности и их трудно отличить от цветов фона. Эти строки текста соответствуют рекомендациям цветового контрастности и легко читаются на цветах фона.

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

9. Избегайте окрашивания текста в красный или зеленый цвета

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

10. Избегайте использования мигающего текста

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

Избегайте мигающего текста!

Вывод

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

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

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

У вас есть собственные советы по типографике в веб-дизайне? Или вы хотите получить более подробную информацию о упомянутых выше вопросах? Дайте мне знать в комментариях ниже!

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

Переводчик, историк, меломан. Люблю кофе, книги и классический рок. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

10 лучших дизайнеров со всего мира

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

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

01.

Tobias van Schneider

Тобиас ван Шнайдер – немецкий производитель полезных и красивых вещей (просто ему не нравится слово «предприниматель»). Сейчас Тобиас живет и работает в Нью-Йорке, где расположена его дизайн-студия. За свою деятельность дизайнер сотрудничал с Red Bull, NASA, Sony, Google, Toyota, BMW и другими мировыми компаниями.

Тобиас ван Шнайдер получил большое количество наград, среди которых: Designer of the Year и Art Director of the Year awards. Имя дизайнера не раз появлялось в известных газетах, журналах и электронных изданиях.

В свободное время дизайнер любит фотографировать. Посмотреть его снимки можно в аккаунте в Instagram @vanschneider. Из профессиональных работ дизайнера можно отметить пользовательский интерфейс микшера Audient, на изображении ниже.

Тобиас ван Шнайдер также разработал дизайн цифрового зеркала memomi, платформы электронной коммерции Wacom, огромного количества сайтов, приложений и даже обуви. В портфолио дизайнера можно заметить последние тренды графического дизайна: пользовательский интерфейс, трехмерная графика, яркие цвета, игра с типографикой и другие.

02.

Aurélien SALOMON

Орельен Саломон – дизайнер с мировым именем. Родом из Франции, но на данный момент проживает в городе Монреаль, Канада. Образование – компьютерная инженерия. Как утверждает Aurélien, он родился со страстью к дизайну. Сейчас занимается UI/UX дизайном: мобильные и десктопные приложения, веб-сайты, моушн дизайн, AR/VR.

За свою карьеру дизайнер разрабатывал продукты для Apple, Google, Uber, Tinder, Watson, Universal Studios, Metalab и других мировых брендов.

Одна из гордостей Орельена – редизайн Apple OS / MacOS 2020 на Macbook под названием «Edge to edge» на примере ниже.

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

Орельен также любит разрабатывать концепты будущих или выдуманных продуктов. Это могут быть приложения, операционные системы, концепт-кары или AR голограмма ассистента Siri на примере ниже.

Дизайнер разработал огромное количество мобильных и десктопных версий веб-сайтов. Мобильные приложения Aurélien разрабатывал для iOS и Android.

03.

Michal Parulski

Михал Парульски – это дизайнер с 9-тилетним опытом проектирования самых различных продуктов. Родился и проживает в Польше, город Гданьск. По профессии – UI/UX дизайнер, веб-дизайнер, аниматор, иллюстратор и графический дизайнер.

Профессиональные навыки Михала впечатляют. Он владеет навыками программам Adobe Photoshop, Adobe Illustrator, Corel Draw, Macromedia FreeHand, Macromedia Flash, а также владеет языками XHTML, HTML и CSS.

Michal обожает смотреть фильмы и играть в теннис. Помимо этого, он является энтузиастом фотографии. Посмотреть фото можно в его профиле в Instagram @mparulski. Одну из профессиональных работ дизайнера вы можете увидеть ниже: брендинг компании CLOUD JET.

Michal Parulski

  • Michal Parulski
  • Michal Parulski

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

Michal Parulski Michal Parulski Michal Parulski

04.

Leo Natsume

Leo Natsume – креативный дизайнер и иллюстратор из Бразилии. Также Лео является мастером моушн дизайна. В портфолио дизайнера можно увидеть большое количество его работ для компаний Google и Uber. Но кроме них, Лео сотрудничал с такими мировыми брендами: Nike, Coca-Cola, McDonald’s, Disney, The New York Times, Maybelline NY, Rede Globo и другие.

За свою профессиональную деятельность Leo Natsume удостоился получить множество наград. Он занял 1 место в двух категориях на Grupo RBS Award 2020. Также дизайнер победил на премиях Best of Design Digital 2020 и 2020, LATAM Digital Media 2020, Сайт года – обзор Behance 2020, Дизайнер года – Zero Hora, Grupo RBS 2015.

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

Также можно заметить проекты, посвященные футбольным событиям. Это оформление информативного ресурса о ЧМ 2020 и новостной игры Mano a Mano.

Leo Natsume Leo Natsume

  • Leo Natsume
  • Leo Natsume

05.

Rolf Jensen

Rolf Jensen – дизайнер-фрилансер родом из Норвегии. Сейчас проживает и работает в Нижнем Манхэттене. Свою деятельность Рольф ведет от имени личного ООО, и сотрудничает с самыми крупными брендами и агентствами в США. Он разрабатывал проекты для Google, Microsoft, WatsonDG, Basic и других мировых компаний.

За свою карьеру Rolf Jensen успел выступить в качестве дизайнера, фотографа, креативного и арт-директора, а также партнера для крупных проектов. Дизайнер издал большое количество журнальных публикаций и интервью. Его работы побеждали в номинациях таких премий, как Awwwards Site of the day, The Webby Awards, The FWA Award, Hive Awards.

Автор создал несколько проектов для компьютерных и мобильных игр. Прекрасный пример мастерства Рольфа в графическом дизайне и анимации – создание навигации и персонажей для игры от студии Disney – Big Hero 6.

Rolf Jensen Rolf Jensen

Также дизайнер разработал немало дизайнерских проектов для мобильных приложений, как Frontier, Fair и другие.

Rolf Jensen

  • Rolf Jensen
  • Rolf Jensen

Веб-сайты, дизайн которых разработал Rolf Jensen, поражают своим ультрасовременным стилем. Прекрасные примеры тому проекты Diva и Enso.

Rolf Jensen Rolf Jensen

06.

Jason Little

Jason Little – дизайнер с огромным опытом. На данный момент Джейсон проживает в Сиднее, Австралия, где является креативным директором нескольких компаний. До этого дизайнер работал креативным директором в Париже.

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

Сейчас Джейсон является председателем Австралийской ассоциации графического дизайна. Поэтому ему было поручено ребрендинг города Мельбурн, Австралийского фонда исследования рака, ресторана Sydney Pavilion и других проектов в Австралии. Помимо того, дизайнер преобразовал такие компании, как Optus, Seat, One Degree и другие.

Jason Little Jason Little

В 2014 году Jason Little со своим коллегой основали агентство For The People. Агентство помогает творческим компаниям переосмыслить их деятельность, сосредоточив внимание на развитии корпоративной культуры. Поэтому основная работа Джейсона посвящена крупным проектам по брендингу, ребрендингу и идентификации компаний.

Jason Little Jason Little

Jason Little много работает не только с графическим дизайном, а и с фотографиями. Одна из последних его работ – идентификация театра Queensland Theatre.

Jason Little

  • Jason Little
  • Jason Little

07.

Sergey Gurov

Сергей Гуров – арт-директор, дизайнер из России, открыт для удаленного сотрудничества и постоянной работы в студии/агентстве. Проживает в городе Санкт-Петербург. Владеет навыками разработки UI/UX дизайна адаптивных веб-сайтов и мобильных приложений для Android и iOS.

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

В своих работах дизайнер часто использует приемы игры с типографикой. Его портфолио вдохновит вас на минимализм и простоту форм. Каждый проект по брендингу и UI/UX дизайну представлен в портфолио со всеми деталями и этапами разработки.

Сергей Гуров участвовал в разработке приложения BrickFinder, которое предназначено для детей в возрасте 5-12 лет. Приложение помогает находить нужные детали конструктора Lego при помощи камеры смартфона.

Сергей Гуров Сергей Гуров

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

08.

Alexander Laguta

Александр Лагута занимается цифровым UI/UX дизайном и брендингом. Опыт работы дизайнера превышает 17 лет, что позволило ему установить почасовую ставку в 80$. Как утверждает сам Александр, он «любит делать вещи простыми и прямолинейными».

За свою карьеру Александр Лагута вывел вперед немало проектов, будучи арт-директором. Также он владеет навыками CSS проектирования. Это позволило стать автором огромного количества веб-дизайн, цифрового UI и брендинг проектов.

Александр Лагута вместе с женой Екатериной создали небольшое агентство Fuge. Они создают дизайн интерфейсов и анимацию, как самодостаточная творческая группа. Их совместные и авторские проекты не раз удостаивались наград от Website of the day, Honorable mention, Kudos и др.

Одним из проектов, который получил награду Website of the day, является их личный веб-сайт fuge.ru.

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

09.

Slava Kornilov

Слава Корнилов – еще один талантливый дизайнер из России. Он является креативным директором Geex Arts. Это digital-агентство полного цикла, которое занимается разработкой веб-сайтов, приложений и «космическим дизайном».

В свое время дизайнер работал на компании Rambler & Co и Комсомольская Правда. До того, как Слава стал креативным директором в Geex Arts, он 3 года занимал должность арт-директора в португальской компании Flatstudio.

Чаще всего Слава занимается проектированием приложений на Android и iOS, а также веб-дизайном новостных порталов. В своих работах автор отдает важную роль типографике, которая нередко появляется в центре внимания. Также он увлекается анимацией, которую любит сочетать с типографикой.

Слава Корнилов Слава Корнилов Слава Корнилов

Студия Geex Arts не зря упоминает о «космическом дизайне». В качестве примера можно посмотреть их концепцию редизайна веб-портала USA Today на видео ниже.

Довольно интересным является редизайн самой известной газеты США – The New York Times. В создании веб-страниц автор также использовал моушн эффекты и традиционную для газеты типографику.

10.

Carlos Pariente A.

Carlos Pariente – UI/UX дизайнер с опытом работы более 8 лет. Проживает в Мадриде, Испания. На данный момент является ведущим дизайнером в компании BBVA. За свою карьеру ему удалось сотрудничать с такими крупными клиентами, как Vodafone, Mango, Roca, Grupo Prisa, OHL и др.

Carlos Pariente владаеет навыками работы в Photoshop, Illustrator, Invision, Sketch, Smartsheet, Principle, Basecamp. Более того, дизайнер ведет образовательную деятельность – преподает курсы по Sketch, Invision и Principle. Профессиональные навыки Карлоса позволили ему работать в роли визуального и интерфейс дизайнера, ведущего дизайнера и креативного директора.

В свободное время Карлос любит творить концепты воображаемых продуктов, создавая удобство их использования. За словами автора: «это дает возможность попробовать новые инструменты дизайна, как прототипирование, управление временем, анимация (…), а потом применить их к рабочим проектам».

Карлос занимался разработкой приложений на iOS и Android для крупных клиентов, таких как Netflix, Daily Ace, The Forties, Cadena Ser, BBVA. Особо интересными являются проекты SendMoney – банковское приложение и сервис от Adobe, который помогает определить и найти нужный шрифт для типографики.

Carlos Pariente Carlos Pariente

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

10 бесплатных и крутых шрифтов

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

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

1. Open Sans

Дизайнер: Стив Мэттэсон – увлеченный дизайнер из штата Колорадо. Более 25 лет Мэттисон разрабатывает шрифты, самыми крупными проектами стали дизайны для Android, Citrix, Microsoft, Nextel и Xbox.

Типы: Light; Light Italic; Regular; Regular Italic; Semi-Bold; Semi-Bold Italic; Bold; Bold Italic; Extra-Bold; Extra-Bold Italic.

Open Sans – приятный для чтения шрифт с простыми формами без засечек. Начертание буквы плавное и широкое. Благодаря своему нейтральному виду шрифт отлично подойдет как для заголовков, так и для основного текста. Шрифт сдержит полный набор символов: латинские, греческие и кириллические. Приятным дополнением станет то, что пакет оптимизирован для печатных, веб и мобильных интерфейсов.

2. Droid Sans

Дизайнер: Еще один популярный шрифт от Стива Мэттэсона.

Типы: Regular; Bold.

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

3. Source Sans Pro

Дизайнер: Пол Д. Хант

Типы: Extra-Light; Extra-Light Italic; Light; Light Italic; Regular; Regular Italic; Semi-Bold; Semi-Bold Italic; Bold; Bold Italic; Black; Black Italic.

Source Sans Pro – семейство шрифтов, которое Пол Д. Хант разработал для Adobe Systems.
Шрифт класса гротеск, относится к стилю «без засечек». Дизайнер сделал рисунок букв плавным и широким. Символы подойдут для заголовков, выделения интересных моментов в основном тексте. Гарнитура призвана работать в пользовательских интерфейсах и имеет открытую лицензию. Из плюсов: проработаны символы для латиницы, кириллицы и некоторых азиатских языков.

4. Lato

Дизайнер: Лукас Дзедзич – дизайнер из Варшавы, который работал над созданием шрифтов для крупнейшей розничной сети в Польше, а в 2010 году начал работу над семейством шрифтов с открытым кодом Lato.

Типы: Thin, Thin Italic, Light, Light Italic, Regular, Regular Italic, Bold, Bold Italic, Black, Black Italic.

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

5. Montserrat

Дизайнер: Джульетта Улановская – графический дизайнер и владелец студии, которая существует около 30 лет. Женщина проживает в Монтсеррате, Буэнос-Айрес.

Топ-пост этого месяца:  Google Doc научится понимать файлы MS Office без конвертации

Типы: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, Black Italic.

Montserrat – это не коммерческий заказ, а проект с душой и историей. Старые вывески и плакаты в городе Монсератте вдохновили Джульетту Улановскую на создание этого текстового стиля. По словам дизайнера, новые тенденции в мире типографии не смогут сделать городской вид таким же красивым и особенным. Целью Джульетты стало – сохранить культурное наследие, поэтому, шрифт распространяется бесплатно. Буквы широкие и простые по начертанию, и имеют дружелюбный для чтения вид. Гарнитура хорошо сочетается с другими шрифтами классического вида. Семейство имеет две сестры Alternates и Subrayada, которые отличаются необычными формами.

6. Numans

Дизайнер: Джованни Лемоннад – российских дизайнер Иван Гладких с необычным псевдонимом работает не только над коммерческими проектами, но и создает бесплатные семейства шрифтов.

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

7. Nunito Sans

Дизайнер: Вернон Адамс, Жак Ле Байл

Типы: Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, Black Italic

Nunito Sans – семейство без засечек, которое имеет две версии. Вначале над проектом работал Вернон Адамс, который создал округлые формы без засечек для типографии. Жак Ле Байли расширил шрифт до полного набора весов. Невысокие буквы имеют классические пропорции и хорошо смотрятся в основном тексте.

8. Roboto

Дизайнер: Кристиан Робертсон – дизайнер интерфейсов в Google.

Типы: Thin, Thin Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Bold, Bold Italic, Black, Black Italic

Roboto шрифт по умолчанию в операционной системе Android, а с 2013 года – сервисов Google, имеет геометрические формы и механический скелет. Его можно назвать шрифтом-дуалистом. Буквы имеют привычные пропорции, не искажены. Это упрощает процесс чтения, делает шрифт приятным для глаз. Семейство удобно использовать совместно с другими гарнитурами Roboto. Шрифт представлен в различных языках, в том числе и русском.

9. Roboto Slab

Дизайнер: Кристиан Робертсон

Типы: Thin, Light, Regular, Bold.

Roboto Slab – шрифт с брусковыми засечками. Дизайнер разработал его как более строгий и официальный. В отличии от своего собрата не имеет наклонной версии. Засечки делают буквы более узнаваемыми и читабельными. Roboto Slab удобно использовать в качестве основного текстового шрифта, комбинируя с остальными семействами Roboto.

10. Raleway

Дизайнер: Мэтт макинерни, Пабло Импаллари и Родриго Фуэнзалид.

Типы: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black, Black Italic.

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

Подборку подготовила копирайтер Логомашины — Алена Коваленко.

ТОП-10 трендов типографики в 2020 году, которые вы не должны пропустить

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

Но начнём со статистики – перед вами 10 самых популярных шрифтов в 2020 году:

1. Serif доминирует

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

2. Ретро возвращается

Благодаря целой линейке фильмов и сериалов (“Стражи галактики”, “Странные вещи”) 70-е и 80-е снова в моде. В 2020 году этот тренд станет ещё популярнее.

3. Больше – лучше

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

4. Высечки и оверлеи

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

5. Выделение цветом и подчёркивание

Ещё один способ привлечения внимания к важным словам и фразам станет популярен в этом году.

6. “Рукописные” шрифты

Благодаря популярности всего “натурального” и eco-friendly всё большую популярность набирают шрифты, имитирующие рукопись.

7. Градиенты в деле

Готовьтесь к разноцветным версиям ваших логотипов.

8. Появление кастомных шрифтов

San Francisco от Apple и другие кастомные шрифты создали модный прецедент – в 2020 году таких станет ещё больше.

9. Цветной шрифт – новый хит

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

10. Прозрачные шрифты

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

Типографика веб-дизайна: основные понятия и современные тренды

“Веб-дизайн — это 95% типографики”, — сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

Основные правила типографики

  1. Чем проще — тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций — не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
  2. Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя — любой веб-дизайнер не раздумывая выберет второе.
  3. Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать — значит, типографика хромает.
  4. Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко — это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
  5. Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки — а значит, графика должна быть на службе у контента, а не наоборот.
  6. Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты — мир!

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

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

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

Например, хорошо сочетаются шрифты Georgia и Verdana — они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер — не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

Внимание! Этот способ могут не применять те, кто хочет сразу громко заявить о себе или создать фирменный стиль сайта. Вот тут можно экспериментировать вволю — конечно, заручившись помощью хорошего дизайнера. С осторожностью обращайтесь с готическим, старославянским шрифтами, Comic Sans — они, как нам кажется, давно себя изжили и не всегда уместны. Хотя на многих ресурсах до сих пор популярны.

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” — в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

1. Играйте на контрасте. Цвет текста и фона для него должны различаться. Серый на сереньком — так себе тренд. Чем больше бросается в глаза контраст — тем гарантированнее он привлечет внимание пользователей. Чем меньше шрифт, тем более он должен быть контрастным, и наоборот.

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

2. Смелее, детка! В моде техники градиента, дуплекс — использование двух цветов и их полутонов, трехмерные объемные изображения, картинки, нарисованные вручную и другие тренды веб-дизайна 2020 — ограничений практически нет. Все зависит от вкуса и чувства стиля вашего дизайнера.

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

Оформление текста

“Крылья, ноги, главное — хвост!” — если перефразировать фразу из культового мультика, то же самое можно сказать и о тексте. Цвет и шрифты, конечно, важны, но оформление текста все же играет главную роль в восприятии сайта посетителем. Рассмотрим современные тенденции оформления текста:

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

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню — ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы — сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

3. Забудьте про капслок! Тренд выделять главное капсом давно умер: сейчас большие буквы воспринимаются как крик и вызывают у читателя лишь негатив. Большие буквы уместны лишь в заголовках, да и то не всегда. Привлекать внимание с помощью капса уж точно не рекомендуется.

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

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

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов — больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн — наше все.

5. Следите за межстрочным интервалом. Чем он больше — тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

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

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

Большие шрифты

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

Сломанные сетки

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

Больше движения!

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

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

ТОП-10 самых сильных мировых брендов

Согласно ежегодному рейтингу компаний от консультационной компании Brand Finance, Walt Disney обогнал Lego и стал самым сильным брендом.

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

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

10. Google

Оценка: 89,5

Стоимость: $94, 2 млрд.

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

9. NBC

Оценка: 89.7

Стоимость: $16, 1 млрд.

Популярность NBC объясняется растущей популярностью таких нелинейных сервисов как Netflix и Amazon Prime. Похвальбы руководителя канала Алан Вутцеля звучали следующим образом: «Все возвращаются к просмотру телевизора, как и планировал Господь». Слова Вутцеля основываются на данных Symphony Advanced Media о том, что шоу, идущие онлайн, имеют меньшую публику нежели транслирующиеся на традиционном телевидении.

8. Coca Cola

Оценка: 90,4

Стоимость: $34,2 млрд.

Coca Cola все еще невероятно популярна, но ее славу пошатнула прослойка потребителей, отказывающихся от напитков, содержащих сахар. Выпуск Coca Cola Light с низким содержанием сахара серьезно ударил по прибыли компании, особенно в Великобритании, которая упала на 71%, как сообщает Brand Finance. Недавно компания запустила новую кампанию под названием «Попробуй Почувствуй» с целью объединить различные варианты колы, появлявшиеся в разные годы под одним девизом.

7. Johnson’s

Оценка: 90,7

Стоимость: $15, 1 млрд.

Удивительно, однако Johnson’s остается ведущим брендом, производящим товары по уходу за детьми. Несмотря на неуклонно падающую в течение года прибыль, головная компания Johnson & Johnson сумела в четвертом квартале поднять прибыль на 27,6 %. Однако планы компании в отношении производства лекарственных препаратов и медицинского оборудования (они будут объединены в отдельную отрасль) могут повлиять на ее положение в рейтинге в следующем году.

6. Nike

Оценка: 90,7

Стоимость: $28 млрд.

Бренд Nike считался крутым в течение 40 лет и его популярность не падает, о чем свидетельствует постоянно повышающаяся прибыль, которая поднялась на 4,1% с последнего опубликованного отчета. Это объясняется спросом на обувь и одежду в Северной Америке. Популярности бренду прибавил и аккаунт в Instagram, где у него более 31 млн. подписчиков.

5. McKinsey

Оценка: 91,4

Стоимость: $4,8 млрд.

Консультационная фирма McKinsey имеет развитую сеть, состоящую из 1400 партнеров и 185000 работников. Компания постоянно адаптируется к изменяющимся условиям рынка, ее консультанты часто внедряются в компанию для того, чтобы руководить большими изменениями в бизнесе. Как сказал генеральный директор компании Доминик Бартон: «Если не продумать изменения в компании на два года вперед, через два года вас может уже не быть».

4. PwC

Оценка: 91,5

Стоимость: $18,6 млрд.

PricewaterhouseCoopers является одной из четырех крупнейших аудиторских компаний вместе с KPMG, EY и Deloitte. В этом году PwC вытеснил McKinsey с места самого сильного бренда в финансовой сфере. 2015 год был для компании удачным, что было отмечено прибылью, увеличившейся на 10% по сравнению с предыдущим годом.

3. L’Oreal

Оценка: 91,5

Стоимость: $14,9 млрд.

L’Oreal удалось сохранить свою эксклюзивность, не говоря уже об огромном числе преданных ему потребителей. Brand Finance объясняет это серьезными инвестициями и «непревзойденным мастерством в искусстве маркетинга». Продажи выросли на 5,3 % уже в первые 6 месяцев предыдущего года. Несмотря на потерю бразильского рынка в сфере ухода за волосами и красотой, L’Oreal нашел другие перспективные пути развития, такие как Китай.

2. Lego

Оценка: 91,6

Стоимость: $4, 5 млрд.

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

1. Walt Disney

Оценка: 91.8

Стоимость: $31.7 млрд.

Приобретение Звездных войн, ESPN, Pixar, The Muppets and Marvel сделало Disney самым сильным брендом в мире. Звездные войны принесли Disney довольно приличную прибыль с тех пор как он приобрели Lucasfilm в 2012 всего за $4 млрд. Сейчас Brand Finance оценивает Звездные войны в $10 млрд. Однако успех Disney складывается не только из удачных недавних приобретений, но из его долгой, всем хорошо известной истории.

Добавить комментарий