Дизайн

поиск изображений
подбор цвета

должны сочетаться цвета фото и изхображения

В дизайне существуют три вида оттенков:

1. Основной — цвет, с которым вас будут ассоциировать. Им нужно оформлять главные элементы страницы, которые несут основной, самый важный посыл.

Где лучше всего применить основной цвет?

• Логотип;
• Раздел меню;
• Главная кнопка, призывающая к действию;
• Название
• Важные факты.

2 Акцентный — оттенок, работающий на контрасте с основным. С его помощью можно выделить важные объекты, например, кнопки, шапку, подвал, названия разделов или заголовки.
Где можно употребить акцентные цвета?

• Кнопки
• Подзаголовки;
• Дополнительная информация важного характера;
• Кнопка перехода в раздел меню.

3 Фоновый — фон страницы. Чаще всего вы можете встретить белый фон, потому что он не отвлекает внимание посетителей от продуктов и хорошо выделяет содержание. А вот творческие проекты могут использовать самые необычные и креативные решения.
Чтобы будущий сайт смотрелся стильно, используйте пропорцию 60/30/10.

• 60 — для основного цвета,
• 30 — для фонового,
• 10 — для акцентного.

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

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

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

На что опираемся???

Как выбрать идеальный цвет

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

01

Где брать картинки для сайта?

Есть три пути: найти бесплатно, купить или сделать.
Нельзя просто так взять нужную картинку в Google (или любом другом поисковике) и использовать ее, указав источник. Это нарушение авторского права, которое может стать основанием для судебного иска. Все картинки кому-то принадлежат.

Можно бесплатно использовать изображения по лицензиям Creative Commons. Они делятся на две крупные категории: разрешенные или запрещенные к коммерческому использованию. (Если ваша страница подразумевает извлечение прибыли даже косвенными путями, то это соответствует категории коммерческого использования.)

Где взять бесплатные картинки?

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

2 Бесплатные фотобанки
Лицензия CC0 (Creative Commons Zero) приравнивается к общественному достоянию. Автор полностью отказывается от своих прав на изображение.
2.1 Изображения и видео
https://ru.freepik.com/
https://unsplash.com
https://freestocks.org/
https://www.everypixel.com/free
https://www.lifeofpix.com/
https://www.pexels.com/ (нужен впн)
https://pixabay.com/ru/ (нужен впн)
2.2 Векторные картинки
https://www.pngegg.com/ru
https://freevector.com/
https://www.vectorstock.com/
https://www.flaticon.com/ru/
2.3 GIF-анимации
https://giphy.com/
https://usagif.com/

Как искать изображения на стоке?

По ключевым словам опять метод ассоциаций

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

04

Каким должно быть изображение ?

Размер фото
Что касается размеров, то на мой взгляд оптимальными размерами являются:
Ширина 1600 px; Высота 1067 px;
Но скачанные картинки с разных фотобанков почти всегда требуют редактирования. Их размер может достигать в несколько мегабайт.

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

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

Оптимальные параметры изображения для веба:

• Размер: в среднем 300 кБ.
• Разрешение: до 1000 пикселей по каждой стороне.
• Формат: JPEG — для любых изображений, PNG — если нужен прозрачный фон, GIF — для анимации или небольших знаков, WEBP — если браузеры ваших клиентов его поддерживают.

В своей работе я использую TinyPNG – способен обрабатывать большинство типов изображений в реальном времени и с хорошей скоростью.

Как проверить нужна ли вообще какая-то оптимизация сайту?

Сервисов по оказанию таких услуг довольно много, но лично мне нравится pagespeed insights от гугла, поскольку не только делает анализ, но и дает рекомендации.

Доп материалы для ознакомления

Очень подробный гайд по психологии цвета и соответствующей нише

Цвета для повышения продаж

Сервисы и книги по подбору и теории цвета

10 принципов использования цвета в дизайне

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

18 сервисов для подбора цвета

Доп материалы для ознакомления

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

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

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