Сайт программы как это сделано

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

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

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

Что такое прототип сайта

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

Полная защита | Как это сделано? Спецвыпуск: турбо | Discovery

Прототип — это изображение результата. Прототипы могут отличаться по уровню детализации. Они могут быть нарисованы на 2–3 страницах А4 или иметь полноценную разветвленную структуру в Фигме с кликабельными элементами. Как бы не выглядел прототип, его задача — изобразить итоговый результат, который хочет увидеть заказчик и должен воплотить в жизнь исполнитель.

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

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

Зачем прототип заказчику

Будущий владелец сайта с помощью прототипа решает сразу несколько задач:

1. «На берегу» визуализирует свои идеи, формирует видение результата, показывает внешний вид, который его удовлетворит
2. Сокращает количество потенциальных правок в будущем. Обсуждает возможные изменения и структуру задолго до начала разработки и верстки
3. Демонстрирует «хотелки». Чем точнее и полнее вы определите структуру, тем точнее разработчик определит сроки и задаст бюджет
4. Помогает определить вектор развития. Вы сможете обсудить гипотезы, перспективы использования и развития портала

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

Как это сделано? | Компьютеры

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

OkoCRM для малого бизнеса

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

Зачем прототип команде разработчиков

С прототипом работать проще и продуктивнее:

1. Черновик фиксирует «хотелки» заказчика, а значит команда будет яснее понимать требования к интерфейсу и функционалу. Конечно, если они есть. Если нет — прототип поможет их определить
2. Команда сможет проверить идеи, протестировать расположение смысловых блоков, предварительно оценить визуальную композицию элементов интерфейса
3. Макет поможет разработать сценарии использования. Команда еще на этапе разработки покажет заказчику, как примерно будет работать сайт. А если что-то не понравится — исправит «малой кровью»

Прототип — часть технического задания. Разработчик может быть гуру верстки сайтов, но какой от этого смысл, если ТЗ составлено устно? Макет — схематическая визуализация технического задания. Утвержденный макет гарантирует, что заказчик не изменит резко своих требований. А если изменит, всегда можно показать ему макет и доказать свою правоту.

Какие бывают прототипы сайтов

Разные. Вы можете нарисовать примитивный эскиз на салфетке, а можете — интерактивный макет с высокой детализацией проработки и кликабельными элементами. Объем работы над прототипом зависит только от сложности проекта и бюджета. Чем сложнее и дороже сайт, тем детальнее и объемнее должен быть рабочий вариант макета.

Эскиз на бумаге

Подойдет «на берегу», чтобы найти наиболее удачную конструкцию. Берете карандаш, лист А4 и делаете схематичную разметку блоков. Вы сможете найти удачную компоновку элементов и создать общее видение без лишних деталей. Можно увидеть общую картину и нарисовать целую карту сайта. Размещайте на таком эскизе только ценные элементы, а детали опускайте.

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

Макет с низкой детализацией

Такой прототип страницы сайта еще называют LoFi Wireframe. Его рисуют на основе примерного эскиза. Помогает упаковать идею в цифровой документ и согласовать примерный объем работ.

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

Макет с низкой детализацией. Глубина проработки на этом этапе не так важна, как общая структура и каркас.

Макет с высокой детализацией

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

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

Статичный макет

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

Делать сходу интерактивный прототип нет смысла — потому что примерно в 100% случаев будут доработки. А проще перерисовать все в фотошопе, чем переделывать интерактивные элементы.

Статичный макет с детализацией. Кликнуть по элементам не получится, потому что по сути это картинка, а не сайт.

Интерактивный макет

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

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

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

Управляйте бизнесом в OkoCRM

Клиентская база и сделки, мессенджеры и соцсети, проекты и сотрудники — всё тут. OkoCRM наводит порядок в делах. 7 дней бесплатно.

Процесс разработки хорошего прототипа

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

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

1. Обсуждение и постановка целей

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

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

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

2. Формирование гипотез

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

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

Вот вам и гипотеза. При разработке прототипа мы можем проверить потенциальное количество касаний при наличии и отсутствии такого фильтра на главной. Другой пример.

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

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

3. Исследование

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

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

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

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

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

4. Прототипирование

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

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

5. Проработка деталей

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

Итерация с проработкой деталей — финал прототипирования. Теперь можно работать над дизайном. Но это уже совсем другая история…

Источник: okocrm.com

Как сделать Progressive Web Apps: руководство новичка

Светлана Шаповалова, редактор блога Нетологии, адаптировала статью пользователя uve, в которой рассказывается, как сделать Progressive Web Apps.

Уверен, вы слышали о Progressive Web Apps, или сокращенно PWA. Не буду вдаваться в подробности о том, что это и как работает. Для наших целей подойдет простое определение PWA — сайт, который можно добавить на главный экран телефона, и он будет работать в автономном режиме.

Мне знакомы HTML, CSS, JavaScript и я умею пользоваться GitHub. Однако я все еще новичок в веб-разработке и мне не всегда охота глубоко вникать в принципы работы того или иного явления. Чаще всего мне просто нужен понятный способ сделать нужную вещь, не просматривая при этом тонны статей. Поэтому я надеюсь, что этот пост даст вам все необходимое для создания собственного PWA.

Итак, чтобы сделать PWA, нужен сайт. Здесь предполагается, что вы умеете делать хорошо масштабируемые на всех экранах и устройствах сайты. К счастью, если не умеете, можно взять шаблон. Мне нравятся те, что на HTML5 UP и Start Bootstrap. Выберите и загрузите тему, заменив весь контент своим собственным в index.html.

Можно даже изменить цвета, если хватит смелости влезть в CSS.

Для своего проекта я сделал лендинг Web Community Leads UK and IE. Большинству пользователей он не нужен в формате PWA, и я не ожидаю, что кто-то добавит его себе. Просто мне для примера нужен был какой-то небольшой и несложный сайт.

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

Теперь, когда есть сайт, можно превращать его в PWA. Что для этого нужно, расскажу далее.

Протестировать PWA

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

После установки откройте сайт и нажмите значок маяка в верхнем правом углу браузера, а затем «Generate Report». Через несколько секунд откроется новая вкладка с информацией о сайте: её можно прочесть целиком, а можно сосредоточиться на числах сверху и проигнорировать остальное:

Результаты Lighthouse 36/100 еще до начала работы — это не так уж плохо, учитывая, что я еще ничего не сделал с сайтом

Сделать иконку приложения

Сайт будет располагаться на экране, а значит, нужна иконка. Не надо быть дизайнером, чтобы сделать хороший логотип. Для большинства небольших проектов я иду на the noun project и подыскиваю парочку значков, которые мне нравятся. Затем совмещаю их с помощью GIMP и добавляю фон. Вы, конечно, можете использовать любой другой способ, главное, убедитесь, что иконка вышла квадратная.

Моя иконка. Задним умом понимаю, что надо было скруглить углы

Теперь у вас есть значок приложения. Самое время прикрепить его к сайту. Я сделал это с помощью онлайн-генератора иконок. Скормите ему значок, и он выплюнет кучу разноразмерных версий, приправленных HTML-кодом. Далее:

из файла index.html

• скачайте файл, который вам предложит генератор, и разархивируйте его.
• поместите иконки в папку с остальной частью вашего сайта.
• добавьте код, выданный генератором, в
• убедитесь, что путь к значкам работает. Я поместил их все в подпапку, поэтому пришлось дописать «icons/» в каждую строку.

Прописать манифест

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

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

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

Данные Lighthouse после добавления манифеста и иконок

Добавить service worker

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

Service worker — довольно сложная штука. К счастью, мне порекомендовали попробовать sw-toolbox и дали ссылку на код. Я скопировал код и слегка упростил его, удалив один из дополнительных файлов JavaScript, вместо этого прописав все в service worker.

Создать service worker можно в три этапа.

1. Зарегистрировать service worker, добавив этот код в head вашего index.html:

if (‘serviceWorker’ in navigator)

// Registration was successful

console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); >,

console.log(‘ServiceWorker registration failed: ‘, err);

2. Добавить sw-toolbox в свой проект — просто закинуть этот файл в корневую папку.

3. Создать новый файл, назвать «sw.js» и вставить в него это:

Проверьте, чтобы все пути к файлам выглядел правильно, отредактируйте исходную документацию и перечислите все файлы, которые хотите сохранить в автономном режиме. Я использую для своего сайта только index.html и style.css, но у вас могут быть и другие.

Теперь снова протестируем сайт с помощью Lighthouse:

После добавления service worker — протестировано на localhost

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

Размещение на GitHub

Теперь у вас есть PWA, пришло время поделиться им с миром. Я нашел самый простой способ сделать это бесплатно и безопасно — через GitHub Pages. GitHub GUI поможет вам разместить свой код в Github, создать репозиторий и поместить в него код. После этого найдите свой репозиторий на сайте, перейдите в настройки, прокрутите вниз и включите GitHub Pages, выбрав ветку master. Должен предоставиться живой URL-адрес вашего PWA.

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

Результаты Lighthouse после размещения сайта на страницах GitHub Pages

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Средняя оценка 3 / 5. Всего проголосовало 2

Источник: netology.ru

Обзор сервиса Canva

. мощного и доступного инструмента для графического дизайна.

Редакция SMMplanner

Read more posts by this author.

Анна Зорина

Автор информационных и коммерческих текстов с 2015 года. Соавтор публикаций в местные СМИ с 2009 года. Автор нескольких рубрик для блога эко-товаров в Инстаграме. More posts by Анна Зорина.

Редакция SMMplanner, Анна Зорина

8 Oct 2021 • 9 МИН

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

С 2022 года сервис Canva не работает в РФ. Новый раздел «Холст» в SMMplanner – бесплатный аналог Canva, в нем вы можете создавать яркие креативы за несколько минут без сторонних сервисов. А привычный интерфейс поможет легко освоиться с инструментом.

Подробнее об обновлении рассказываем в статье «Аналог Canva в SMMplanner: бесплатно для всех».

Сегодня поговорим о лучшем из них, о сервисе-конструкторе Canva.

Что такое Canva и что умеет

Canva позволяет работать с шаблонами, которые заранее скомбинированы под разные требования. Звучит скучно и просто, но если познакомиться с сервисом поближе, разнообразие шаблонов поражает.

Список того, что можно делать на сайте Canva, внушает уважение.

Во-первых, это графика для социальных сетей:

• картинки для постов в linkedin, Pinterest, Фейсбук*, Twitter, и Инстаграм*;
• шапки для Twitter, Фейсбука*, YouTube, Google Classroom;
• История ВКонтакте, WhatsApp, Инстаграм*;
• статус WhatsApp;
• анимация для соцсетей; видеоколлажи, видеореклама YouTube и т. д.

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

И даже создание лендинга, но пока beta-версия.

Нужно ли уметь рисовать?

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

Как работать в Canva по шаблонам

Зарегистрируйтесь в сервисе.

Например, вы работаете в Инстаграме* и нужен пост, визуал для которого создан в Canva. Кликните на нужное изображение.

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

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

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

Чтобы изменить один из них: рамочку или текст, нажмите «Разгруппировать» в верхнем меню, а после нажмите на тот объект, который хотите изменить или удалить.

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

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

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

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

Уточню: при выборе анимации это уже будет видео, а не фото.

Как создавать анимацию для поста в Инстаграм* читайте в нашем блоге в статье: «Алгоритм и примеры создания роликов».

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

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

Интересно, что Canva сохранит файл с изображением не под своим «кодовым» зубодробительным именем, а по верхним строчкам текста. Например, наша картинка сохранилась как «Лето не отступает, но…» 🙂

Как пользоваться Canva, если не нравится ни один из шаблонов

Маловероятно, но такое может случиться. Не беда, сервис позволяет творить самостоятельно. Для этого вернитесь в первое окно (каждая работа открывается в новом окне) и выберите «Публикация в Инстаграм*», но готовый шаблон не выбирайте.

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

Вкладки в левом меню:

• элементы: выберите фон, нарисуйте фигуру, диаграмму или рамку, добавьте картинку, фото или видео, а также сетку, чтобы красиво расположить два или несколько изображений;
• загрузки: добавьте свои изображение, видео или музыку;
• текст: добавьте надписи;
• стили: если у вас планируется несколько слайдов на видео, и вы не хотите для фона использовать один и тот же цвет, воспользуйтесь готовыми наборами;
• фон: воспользуйтесь библиотекой фонов, чтобы подобрать подходящий. Здесь есть как платные, так и бесплатные варианты – наведите на понравившийся и посмотрите, появится ни на нем надпись «Бесплатно».

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

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

Если изображение слишком яркое, или наоборот, тусклое, или вы хотите изменить оттенок, при нажатии на изображение выберите вверху «Редактировать изображение».

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

Теперь перейдите во вкладку «Текст», добавьте его в нужное место на фоне – в нашем случае на подложку.

Так как наша картинка преобладает коричневыми и оранжевыми тонами, выбрали подходящий оттенок коричневого для надписи

Ровно расставляем объекты

Если вам требуется украсить фон фигурами, обратите внимание на то, что все изображения сервиса Canva будет центровать

• относительно фона;
• относительно других элементов.

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

Когда работаете не с одним листом, а с несколькими, удобно смотреть их все сразу.

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

Красиво пишем текст

Во вкладке «Текст» собраны шаблоны для красивого расположения текста.

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

Успеть за 60 секунд: объединяем все навыки и создаем изображение для социальной сети

Как пользоваться приложением Canva при работе в команде

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

Как работать в приложении Canva на смартфоне

Если публиковать с компьютера вы не любите – есть возможность пользоваться приложением Canva на смартфоне. Отметим сразу, что принцип работы – тот же.

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

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

Как подготовить заранее посты для публикации в соцсети, создавая их в Canva

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

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

Для тех, кто не любит «мух — отдельно, а котлеты – отдельно» существует SMMplanner с интегрированным сервисом Canva.

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

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

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

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

Можно ли вообще не платить за Canva

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

Если вы уверены в том, что:

• будете пользоваться сервисом;
• вам нужна графика;
• оценили его бесплатные возможности;

вводите данные о карточке и начните 30-дневное тестирование платного аккаунта.

Подытожим

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

Если потренироваться, вы обязательно набьете руку и будете быстро и легко делать стильные изображения — тогда можно обойтись без дополнительных расходов на сотрудника-дизайнера. А самый удобный способ добавить макеты Canva в Инстаграм* – воспользоваться сервисом отложенного постинга SMMplanner. И не забудьте о красивых шрифтах. Удачи!

Статья обновлена. Первая публикация: 28 декабря 2016 года

Источник: smmplanner.com