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

Доступные, бесплатные и простые в использовании

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

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

  1. Color Supply

Color Supply

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

2. Coolors

Coolors

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

3. ColorBlender

Color Blender

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

4. Color Palette Generator

Color Palette Generator

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

5) ColorKuler

Color Kuler

ColorKuler — сервис, анализирующий цветовую палитру профиля в Instagram. Чтобы найти цветовую палитру на ColorKuler, введите имя пользователя Instagram в поле вверху страницы. При поиске цветовой палитры ColorKuler.com выполняет поиск Instagram-профиля для анализа учетной записи с введенным вами именем пользователя.

6. Material Palette

Material Palette

Material Palette – не просто генератор цветовых палитр. Его используют для проверки сочетаемости цветов в материальном дизайне.

7. Adobe Color CC

Adobe Color Themes

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

8. Sip

Sip

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

9. Color Hunt

Color HuntЭто открытая коллекция красивых цветовых палитр. Color Hunt начинался как  частный проект. Он был созда, чтобы дизайнеры делились личными цветовыми палитрами. Сегодня это популярный ресурс, ежедневно используемый тысячами дизайнеров во всем мире. Коллекция состоит из огромного количества цветовых палитр. Каждая палитра создается пользователями Color Hunt, и лучшие из них могут быть показаны на домашней странице проекта. Все палитры можно использовать бесплатно. Можно установить как расширение в Google Chrom.

10) Color — Method of Action

Color – Method of Action

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

Boost your English: 6 подкастов на английском языке

Эффективный способ подтянуть и продвинуть уровень своего английского

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

Что такое подкасты?

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

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

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

Rachel’s English

Rachel's English

Rachel’s English – один из лучших подкастов для изучения английского языка. Ведущая проекта Рейчел рассказывает об особенностях британского и американского произношения: ритме, интонации, ударении в словах. Она подробно разбирает наиболее частые грамматические ошибки и неточности в употреблении слов, рассказывает интересные истории и регулярно публикует аудиофайлы с объяснением слов и терминов.

Кому будет полезно?

Всем, начиная с нулевого уровня английского и заканчивая свободным владением.

Где найти этот подкаст?

Его можно скачать в AppStore.  Также у Рейчел есть свои сайт и канал на Youtube.

BBC Podcasts

Логотип BBC

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

Кому будет полезно?

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

Где найти?

В AppStore, Google Play или можно послушать онлайн.

Serial

Логотип подкаста Serial

Этот подкаст напоминает детективный сериал: главная героиня, журналистка Сара Кёнинг, ведёт расследование реального преступления – убийства американки корейского происхождения. Более того, к аудиофайлам прикреплены фотографии улик и настоящих вещественных доказательств, связанных с этой историей.

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

Кому будет полезно?

Тем, кто увлечён детективами и неплохо знает английский.

Где найти?

На сайте, в AppStore или Google Play.

S-Town

Логотип подкаста S-Town

S-Town – второй проект компании Serial. Это роман с элементами детективного жанра. Всё начинается с убийства подростка в городе штата Алабама, в округе Бибб. Приезжий журналист Рид начинает расследовать его, чтобы узнать, что же случилось на самом деле и кто виновен в этом преступлении.

Продолжительность серий – от 20  до 57 минут. Как и для подкаста Serial,  в Интернете есть расшифровки каждого выпуска.

Кому будет полезно?

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

Где найти?

На сайте, в AppStore или Google Play.

EnglishClass101

EnglishClass101

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

Кому будет полезно?

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

Где найти?

Сайт

AppStore

English as a Second Language

Логотип ESL

Подкасты English as a Second Language разделены по тематикам из повседневной жизни, например, есть выпуски, посвященные разговорам о фильмах, о свободном времяпрепровождении, о кафе и многие другие. 

Кому будет полезно?

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

Где найти?

На сайте, в AppStore или Google Play.

Типографика: секреты оформления текста

Гарнитуры, кегель, интерлиньяж, кернинг - как в этом не запутаться?

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

Некоторые древние книги - непревзойдённый образец гармоничного оформления
Некоторые древние книги — непревзойдённый образец гармоничного оформления
  • Шрифт (гарнитура, font-family)

Шрифт – это набор символов одного стиля. Чаще всего используются гарнитуры Arial, Times New Roman, Helvetiica и Verdana.

Виды шрифтов

  • Размер шрифта (font-size)

Размер шрифта определяется его высотой. В типографике используют две системы: систему Дидо и англо-американскую. Единицей размера литеры выступает пункт. В системе Дидо 1 пункт равен 0,37 мм, а в англо-американской – 0,35 мм.

Для обозначения размера шрифта был введен термин «кегль». Он обозначает количество пунктов. Например, если кегль набранного текста равен 12, то его размер составляет 12 пунктов. В интернет-технологии размер шрифта (font-size) чаще указывают в пикселах (px).

Размеры шрифта

  • Жирность (font-weight) и другие параметры начертания

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

  • Насыщенность шрифта
  • Промежутки между буквами: трекинг и кернинг

Расстояние между крайними точками соседних букв устанавливается в зависимости от формы штрихов этих букв. Например, «Ш» и «Н» всегда стоят дальше друг от друга, чем «С» и «О». Расстановка букв с учётом их формы называется кернингом и обеспечивает визуальную равномерность текста. Зазоры для каждой пары букв в каждом шрифте задаются специальной таблицей ширин. А с помощью трекинга – одновременного изменения всех межбуквенных промежутков – текст делают более или менее разреженным. В полиграфии за счёт этого «выгоняют» или «вгоняют» строки.

10 постулатов типографики

  1. 12 кегль – самый удобный для восприятия размер шрифта на бумажной странице. А для чтения на веб-странице оптимален другой показатель – от 15 до 20 пикселей.
  2. Отбивки между абзацами улучшают восприятие текста.
  3. Громоздкие, с завитушками или другими декоративными элементами шрифты вынуждают глаза сильно напрягаться, поэтому они используются только в плакатах и (редко) в заголовках. В основном тексте применяют только простые по рисунку гарнитуры.
  4. Между словами всегда ставится только один пробел.
  5. Подчеркивание – не лучший способ выделения, а интернет-тексте вообще не допустимый. Для акцентирования внимания на важной информации больше подойдёт изменение насыщенности шрифта.
  6. Не перебарщивайте с количеством жирного или наклонного шрифта и не совмещайте разные способы выделения информации, потому что читатель не сможет сконцентрироваться на сообщении.
  7. Не забывайте включать перенос слов (если он предусмотрен).
  8. Не путайте дефисы и тире и не используйте несколько дефисов в качестве тире.
  9. Используйте правильные символы товарного знака и авторского права, а не алфавитные аппроксимации.
  10. Создавайте абзацный отступ (красную строку), только используя специальную настройку в интерфейсе редактора или меняя свойство text-indent, а не добавляя пробелы в начало строки.

Азбука современного веб-дизайна

Что такое материальный дизайн, скроллы, синемаграфы и лендинги

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

Материальный дизайн

Компания Google создала «material design» в 2014 году, он встречается и на совсем свежих сайтах. Особенность материального дизайна заключается в  элементах, визуально близких к материальным предметам, которые нас окружают. От плоского дизайна материальный отличается:

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

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

Более того, cочетание контрастных цветов и минималистичного дизайна — одно из самых распространённых дизайнерских решений. Его пустила в ход и компания Google, когда работала над  главной поисковой страницей браузера Google Chrome.

Актуальный дизайн логотипа Instagram
Актуальный дизайн логотипа Instagram
Активный бэкграунд

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

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

Иллюстрации и графические элементы

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

Узоры, геометрические фигуры и абстракция

Узоры, геометрические фигуры и абстрактные элементы подчёркивают минимализм дизайна и работают на привлекательность сайта. 

Анимации, гифки и скроллы

Чем больше визуальной информации и меньше текста — тем меньше вероятность угасания интереса у читателя. 

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

Синемаграфы

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

Лендинги

Лендинг — одностраничный сайт, направленный на точное и быстрое донесение информации. В основном он играет роль медиа-кита или страницы для привлечения внимания аудитории. 

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

 

3D (3 dimensions или 3 измерения)

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

Типографика

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

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

Нестандартная сетка

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

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