Подборка
Полезные инструменты для создания сайта
Рассказываем об инструментах, которые помогут вам красиво оформить сайт
Полезные инструменты для создания сайта
В июне 2021 года мы провели вебинар «Как сделать сайт, который поможет повысить продажи». На вебинаре рассказали, как анализировать страницы сайта, адаптировать у себя дизайнерские приемы и избегать опасных формулировок в тексте. Ссылка на вебинар — в конце списка.
Это небольшая бонусная статья к вебинару — здесь вы найдете инструменты, которые помогут вам красиво оформить сайт. Выбирайте любые инструменты, которые понравятся.
Это небольшая бонусная статья к вебинару — здесь вы найдете инструменты, которые помогут вам красиво оформить сайт. Выбирайте любые инструменты, которые понравятся.
Проверяйте правила пользования сервисами
У каждого сервиса есть правила пользования, даже если он бесплатный. В одном сервисе может быть требование указывать автора, в другом — покупать подписку, в третьем — запрет на перепродажу изображений. Если предприниматель нарушит правило, может прийти претензия или штраф.
Мы для удобства расписали некоторые правила пользования, но не можем за них отвечать. Сервисы могут изменять их в любой момент, иногда без предупреждения.
Чтобы избежать проблем, рекомендуем перечитывать условия пользования каждым сервисом. Если не уверены в правилах пользования, попросите юриста помочь вам или выберите другой сервис.
Мы для удобства расписали некоторые правила пользования, но не можем за них отвечать. Сервисы могут изменять их в любой момент, иногда без предупреждения.
Чтобы избежать проблем, рекомендуем перечитывать условия пользования каждым сервисом. Если не уверены в правилах пользования, попросите юриста помочь вам или выберите другой сервис.
Улучшить изображения
Удалить фон
Работает просто: загружаете фотографию в сервис, ждете пару секунд и скачиваете результат без фона. Чем качественнее исходная фотография, тем лучше удалится фон.
Например, вы сможете получить фотографию для портфолио — без фона и лишних элементов:
До
После
До
После
Сервис бесплатный. По умолчанию вы можете вырезать фон на трех изображениях. Чтобы преодолеть ограничение, просто зарегистрируйтесь в сервисе.
Подобрать фон
Colorful gradients
На этом сайте вы найдете 43 000 разных градиентов — цветовых сочетаний для фона. Вы можете выбрать любой градиент и использовать его на сайте.
Перейти 
Представим, что вы не хотите проводить фотосессию, но вам нужны снимки сотрудников в едином стиле. Получить их несложно.
Чем меньше фон привлекает внимание, тем лучше. Вставить новый фон можно в любом графическом редакторе — например, в «Фигме» или «Фотошопе.
Увеличить изображение
AI Smart Upscaler
Помогает увеличить маленькое изображение в несколько раз и сохранить качество. Хорошо подходит для того, чтобы дать второй шанс старым фотографиям.
Перейти 
Чем качественнее фотография, тем больше шансов ее увеличить без потери качества. В этом примере мы увеличили исходное изображение в четыре раза.
Размер до обработки: 250 × 250 px
После обработки: 1000 × 1000 px
Размер до обработки: 250 × 250 px
После обработки: 1000 × 1000 px
В бесплатной версии AI Smart Upscaler вы можете увеличить только три изображения. Дальше придется купить подписку или платить за увеличение каждого изображения.
Уменьшить вес изображения
Tinyjpg
Сервис работает просто: он уменьшает вес изображения, сохраняя его качество. Чем меньше весят изображения, тем быстрее клиенты загрузят сайт и смогут на нем работать.
Перейти 
Просто загрузите изображение и скачайте облегченную копию. В этом примере изображение удалось уменьшить в три раза, качество не пострадало.
В бесплатной версии программы вы можете одновременно обрабатывать 20 изображений весом 5 Мб.
Улучшить текст
Удалить языковой мусор
Сервис «Главред»
Помогает улучшить текст: он подсвечивает штампы, канцелярит, языковой мусор. Чем меньше лишних слов, тем проще клиенту вас понять.
Перейти 
Работает просто: вставляете текст в сервис и следуете рекомендациям. Необязательно стремиться к 10 баллам, достаточно 8—9.
Проверить грамотность
Сервис «Орфограммка»
«Орфограммка» сосредотачивается на смысловых и речевых ошибках, следит за стилем и пунктуацией, обращает внимание на удобочитаемость.
Перейти 
Используйте «Орфограммку» после того, как пропустите текст через «Главреда». Принцип тот же самый: вставляете текст и следуете инструкциям.
Использовать правильные символы
Типографская раскладка Ильи Бирмана
Помогает удобно использовать правильные тире, знаки минуса, красивые кавычки и другие знаки.
Перейти 
С обычной клавиатуры неудобно вводить правильные символы. Чтобы написать тире, нужно зажать Alt и ввести код 0151. Чтобы открыть кавычку-елочку, приходится вводить код 0171. Проще использовать дефис и обычные системные кавычки.
Типографская раскладка помогает удобно использовать правильные тире, знаки минуса, красивые кавычки и другие знаки. Коды запоминать не нужно: просто зажимаете Alt и жмете на нужную кнопку.
Правильные символы не повысят продажи, но сделают сайт красивее. Например, знаки минуса и умножения выровнены по высоте и смотрятся аккуратно. А неразрывные пробелы склеивают цифры и не дают им съезжать на разные строки. Правильные символы повышают шанс того, что клиенту будет приятнее находиться на сайте.
Найти интересное для сайта
Подобрать иконки
Flaticons.net
Здесь вы найдете 2400 разных иконок. Иконки бесплатные: скачиваете и пользуетесь на сайте.
Перейти 
Еще есть встроенный редактор иконок. Выбираете любую иконку в сервисе, изменяете на свой вкус и скачиваете:
Подобрать изображения и видеоролики
Pixabay.com
Здесь вы найдете огромную библиотеку красивых изображений, фотографий и видеороликов. Есть даже бесплатная музыка.
Перейти 
«Пиксабей» — бесплатный сервис, но есть некоторые правила, которым нужно следовать.
В конструкторе сайтов Тинькофф удобно загружать картинки и ролики напрямую из «Пиксабея»:
Сделать схему
Допустим, вам нужно проиллюстрировать идею или преимущество. Например, вы продаете электронные компоненты для специалистов и хотите объяснить, как они работают. Вместо того чтобы расписать каждый шаг текстом, вы можете сделать схему — она поможет клиентам быстро понять, о чем идет речь.
Чтобы сделать схему, выбираете готовый шаблон, добавляете нужные блоки и вписываете текст. Небольшие схемы можно сделать за пару минут:
Сервис diagrams.net бесплатный: после того как создали схему, сохраните ее картинкой и опубликуйте на сайте.
Визуализировать имеющиеся данные
Если у вас есть таблицы с данными, вы можете сделать из этих данных красивый график. Этот сервис подходит, если вы хотите показать клиенту какую-нибудь важную статистику, например, динамику цен на товар или рост посещаемости музеев. Работает просто: загружаете таблицу с данными, выбираете оформление и получаете результат.
Важный нюанс: после того как вы сделаете график, данные попадут в общий доступ. Не используйте Datawrapper для того, чтобы оформлять конфиденциальную информацию.
Узнать цвета известных брендов
Brandcolors.net
На этом сайте вы найдете примеры и точные коды цветов, которыми пользуются известные бренды.
Перейти 
У каждого цвета есть свой код: вы можете его скопировать и использовать на своем сайте. Вы можете не только копировать цвета вручную, но и скачивать их в формате палитры фотошопа и CSS-файла.
Посмотреть примеры сайтов
Land-book.com
Здесь вы найдете разные примеры сайтов — они помогут вам вдохновиться и найти свой стиль.
Перейти 
Выберите любой пример сайта, посмотрите, что вам больше всего нравится, и попробуйте интересные решения использовать у себя.
