+38 (057) 780-56-32 +38 (067) 537-58-28
Перезвонить вам?

Дизайн без навыков и Фотошопа: 23 бесплатных инструмента для настройки шаблона Allzap CMS


Одна двадцатая секунды необходима человеку, чтобы сформировать впечатление о сайте, и 90 секунд, чтобы принять решение о покупке, - утверждают исследования канадцев, опубликованные в журнале Behaviour & Information Technology. Выходит, всего 90,2 секунды есть у нас, чтобы продать запчасти. Поторопимся!

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

Если вы умеете работать с графическими редакторами, обладаете тонким дизайнерским чувством прекрасного и не испытываете трудностей в настройке шаблона, то это пожалуй все, что вам стоит знать о важности дизайна. Для остальных - пошаговая инструкция и 23 бесплатных инструмента для качественной настройки дизайна на Allzap CMS 2.0.

Favicon

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

Чтобы сделать красивый и правильный значок используйте онлайн-сервисы:

  • http://pr-cy.ru/favicon/ - достаточно загрузить картинку с ПК, запустить генерацию и скачать полученный файл;
  • http://www.favicon.by/ - здесь вы можете нарисовать свой фавикон самостоятельно или создать, используя картинку со своего компьютера.
  • http://favicon.ru/ - аналогично предыдущему сервису помогает создать как уникальный значок, так и сгенерировать его из имеющегося файла.

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

Логотип

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

  • https://www.logaster.com.ua/ - сервис позволяет создать и скачать небольшой логотип бесплатно, а полноразмерный – купить за $9.99. Для создания достаточно ввести название своего магазина и указать сферу деятельности. Сложнее всего – выбрать из сотни вариантов один;
  • http://logoservis.ru/ - работает аналогично первому сервису. Позволяет подобрать иконки, связанные по смыслу с названием или видом деятельности. Интерфейс простой, а регистрация не требуется. Полученное изображение можно редактировать прямо внутри конструктора;
  • https://www.canva.com/ru_ru/sozdat/logotip/ - удобный сервис для создания не только логотипов, но других графических материалов: коллажей, инфографик, плакатов, листовок, визиток и т.д. Бесплатных базовых возможностей для создания логотипа достаточно, однако сервис требует регистрации;

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

Цвет

Все оттенки, которые способен воспроизводить монитор и видеть человеческий глаз,  состоят из трех цветов: красного, зеленого, синего. Первые буквы основных цветов стали названием цветовой модели RGB, где red – красный, green - зеленый, blue – синий. RGB описывает способ кодирования цвета, используя значения через запятую, например 215,73,51. Порядок цветов не меняется: красный всегда первый, за ним следуют зеленый и синий.

ргб

Также существует другой вариант представления цветов в вебе – HEX, например - #970515. Такой вариант кодирования подразумевает использование трех групп знаков, где каждая пара отвечает за свой цвет. HEX легко перевести в RGB и наоборот. Например, #970515 это: 151 – красный, 5 - зеленый, 21 – синий.

hex

Изменяя значения каждого из цветов легко получать новые оттенки. При настройке дизайна на Allzap CMS используется HEX.

Для работы с цветом подойдет:

  • http://www.color-hex.com/ - бесплатный англоязычный сервис, который позволяет увидеть, как выглядит цвет, какие оттенки с ним сочетаются, предоставляет информацию о более темных, более светлых, родственных и аналогичных цветах. Помогает подобрать цветовые сочетания и увидеть, как цвет смотрится на белом и черном фоне;
  • http://paletton.com/ - англоязычный бесплатный сервис, который помогает подобрать цветовую гамму и даже посмотреть, как цветовые комбинации будут выглядеть в дизайне сайта.

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

  • https://ru.inettools.net/image/opredelit-tsvet-piksela-na-kartinke-onlayn - достаточно загрузить изображение, цвет которого вас интересует, навести курсор на интересующий оттенок, и получить его цифровое значение.
  • https://sanstv.ru/color - помогает не только определить нужный цвет на картинке, но и выбрать из палитры, с последующим редактированием.

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

цвет html

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

психология цвета

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

Фон главной страницы

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

  • https://pixabay.com/ru/ - бесплатный, регулярно обновляемый фотосток с русскоязычным (!) интерфейсом. Регистрация не требуется;
  • https://www.dreamstime.com – огромный фотосток, в котором можно заблудиться, так и не подобрав подходящую картинку. Используйте для поиска ключевое слово «auto». Купить авторское фото можно от $0,2 или скачать бесплатно в разделе Free Images;
  • http://newimages.ru/ – доступно множество размеров для скачивания и вариант подбора по цвету. Все картинки – бесплатные, меню – на русском языке;
  • http://ru.freeimages.com/ - лидер среди бесплатных фотостоков. В 26 категориях каталога насчитывается около 400 тыс. изображений. Регистрация обязательна, но бесплатна.
  • https://freerangestock.com/ - небольшой, но хороший фотосток, который позволяет использовать изображения в коммерческих и некоммерческих  целях. Иными словами, изображения, скачанные здесь, можно использовать как угодно. Интерфейс на английском, регистрация бесплатна. Для поиска используйте ключевое слово «auto».

Вряд ли у вас получится найти картинку, исходный размер которой соответствовал бы требуемым 1920*620px. Старайтесь подобрать подходящее по ширине изображение, а подкорректировать высоту – не проблема.

Самый простой и доступный способ – использовать детскую рисовалку растровый графический редактор Paint компании Microsoft, входящий в состав всех операционных систем Windows. Откройте изображения, используя программу, и выделите нужную часть. Скопируйте выделенный фрагмент (ctrl+C), вставьте в новое окно (ctrl+V) и сохраните (F12) полученное изображение в нужном формате (.jpg).

Наравне с ним, можно прибегнуть к помощи онлайн сервисов:

  • http://croper.ru/crop - позволяет кадрировать изображения и менять их размер быстро и бесплатно
  • https://online-fotoshop.ru/obrezat-photo-online-besplatno/ - достаточно загрузить картинку и выбрать область нужного размера. В центре поля отображается размер изображения, которое вы получите в результате кадрирования;
  • http://ru.photofacefun.com/crop/ - работает аналогично, однако не показывает размер выделенной области, поэтому придется угадывать;

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

Фон блоков

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

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

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

скриншот-2 paint

Затем выбираем подходящий цвет. Нажимаем «Изменение цвета», и задаем нужный оттенок, используя информацию о цвете, которую мы получили на сайте www.color-hex.com. Например, для цвета #DB3125: красный – 219, зеленый – 49, синий - 37

скриншот-3 paint

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

скриншот-4 paint

Сохраните изображение (F12), выбрав нужный формат (.png или .jpg), и загрузите его на свой сайт.

Слайдер

Слайдер на вашем сайте состоит из трех элементов – текста, изображения и кнопки. Текст может содержать информацию о преимуществах вашего интернет-магазина, действующих акциях, скидках и т.д. Его задача – привлечь внимание пользователя и увеличить вероятность конверсии. Изображение дополняет ваше предложение и помогает понять его суть. Если в вашем магазине по пятницам действуют скидки на тормозные колодки, так и пишите: «Каждую пятницу -5% на тормозные колодки» и добавляйте под кнопку ссылку на соответствующую категорию каталога. Совершенно логично, что картинкой, сопровождающей это предложение, будет изображение тормозных колодок. Где взять фото вы уже знаете – фотостоки к вашим услугам. Однако, чтобы баннер смотрелся красиво, фон изображения должен быть прозрачным, а размер соответствовать указанным в админке 380x280 px.

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

  • https://www.imgonline.com.ua/resize-image.php;
  • http://resizepiconline.com/
  • https://ru.inettools.net/image/umenshit-i-uvelichit-foto-onlayn;

Если картинку нужно предварительно кадрировать, то есть убрать ненужные части, используйте Paint или уже знакомый сайт - http://croper.ru/crop.

Сделать прозрачный фон помогут:

  • http://watermark.algid.net/ru/create-transparent-png.php;
  • https://www.imgonline.com.ua/replace-white-background-with-transparent.php;

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

Если к настройке дизайна подойти творчески и ответственно, на выходе можно получить отличный результат!


Настройка оформления сайта входит в комплекс работ по базовой SEO-оптимизации, которая проводится в рамках тарифного плана «Оптимальный»

Напишите нам
Менеджер свяжется с Вами и проведет бесплатную
консультацию по вопросам SEO-оптимизации сайта


Популярные материалы

Позвонить