100 лучших бесплатных и платных инструментов веб-дизайнера
Сто платных и бесплатных инструментов для веб-дизайнера, значительно упрощающих работу.
Содержание:
- Типографика.
- Стоковые фото.
- Стоковая графика.
- Инфографика.
- Совместная работа.
- Цвета.
- Вдохновение.
- Редакторы графики.
- Дизайн логотипа.
- Прототипирование.
Типографика
1. Fontspace – 93к бесплатных шрифтов.
2. Google Fonts – бесплатные высококачественные шрифты для своего веб-сайта.
3.
Typekit – наборы премиальных шрифтов.
4. Fontstruct – создавайте свои собственные шрифты с нуля, пиксель за пикселем.
5. Typecast – создавайте визуальные и семантические дизайны, которые ставят шрифт на первое место.
6. Font Squirrel – база бесплатных шрифтов.
7. 1001 Fonts – библиотека шрифтов для личного и коммерческого использования.
8. What Font is – определитель шрифтов.
9. Typelight – редактор шрифтов.
10. Fontfabric – наборы бесплатных шрифтов.
Стоковые фото
1. Pixabay – просматривайте и загружайте высококачественные изображения (доступно через VPN).
2. Unsplash – стоковые изображения.
3. Stocksy – скачивайте красивые и оригинальные стоковые фотографии без лицензионных отчислений.
4. Pexels – лучшие бесплатные стоковые фотографии.
5. Gratisography – Райан Макгуайр делает тысячи изысканных снимков. Получите их все бесплатно.
6. Adobe Stock – идеальный ресурс для своего творческого проекта.
7. Zoommy – бесплатные стоковые фотографии из разных источников, собранные в одном настольном приложении.
8. New Old Stock – старинные фотографии из общедоступных архивов.
9. SplitShire – веб-дизайнер Даниэль Нанеску делится сотнями великолепных фотографий.
10. Death to the Stock Photo – получайте оригинальные фотографии по электронной почте каждый месяц.
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»
Интересно, перейти к каналу
Стоковая графика
1. Vecteezy – лучшее место для поиска векторных изображений.
2. The Noun Project – найдите простые черно-белые значки и глифы.
3. Flaticons – большая база иконок, созданная дизайнерами.
4. Roundicons – крутые наборы круглых иконок.
5. illustrio – настраиваемые значки и иллюстрации.
6. The ispot – покупайте красивые иллюстрации великих художников.
7. Webalys – Vincent le Moign создал одну из самых замечательных онлайн-библиотек иконок.
8. Iconfinder – мощный поисковик бесплатных иконок.
9. Brusheezy – бесплатные кисти Photoshop и файлы PSD.
10. Iconjar – приложение для хранения всех ваших значков в одном месте. Только для Mac.
Инфографика
1. Canva – удивительно простое графическое программное обеспечение для создания любого контента, который вам нужен (доступно через VPN).
2. Easel – выберите среди сотен шаблонов и создайте собственную инфографику.
3. Infogram – позволяет генерировать качественные диаграммы.
4. Visage – создавайте все виды визуального контента.
5. Vizualize – ваше резюме скучное? Превратите его в оригинальную инфографику.
6. Venngage – создавайте сотни инфографиков, постов в СМИ и отчетов с помощью этого простого инструмента.
7. Draw.io – полное средство для создания блок-схем, подходящее как для внутренних, так и для внешних проектов.
8. Piktochart – простой в использовании инструмент для создания инфографики, даже если вы не дизайнер.
9. Visme – превратите свои идеи в привлекательный контент с помощью этого мощного инструмента.
10. Gliffy – превосходный онлайн-инструмент для создания диаграмм (доступно через VPN).
Совместная работа
1. Invision – простой инструмент для создания прототипов и совместной работы для проектных групп.
2. GoVisually – один из лучших способов собрать отзывы клиентов о ваших проектах.
3. Red Pen – самый быстрый инструмент обратной связи.
4. Mural – инструмент для совместной работы дизайнеров и разработчиков.
5. Asana – делитесь, просматривайте и обсуждайте проекты в своей команде
6. Design Drop – делайте пометки на изображениях и делитесь ими с коллегами.
7. Cage – панель инструментов для совместной работы с командами и клиентами.
8. Bounce – веселый и простой способ поделиться идеями на любом веб-сайте.
9. Proofhub – эффективно управляйте своими проектами.
10. Lingo – создавайте библиотеки визуальных ресурсов и делитесь ими с командой. Только для Mac
Цвета
1. Color Hunt – просмотрите тысячи комбинаций четырех цветов, пока не найдете подходящую.
2. Adobe Color – сгенерируйте и сохраните различные цветовые схемы.
3. Coolors – прокрутите страницу и сохраните свои любимые палитры.
4. TinEye – определите свои цвета и найдите изображения с идеальной цветовой комбинацией.
5.
ColorZilla – суперудобное расширение для выбора цветов с веб-страницы.
6. Сolorscheme – создайте новое цветовое сочетание.
7. PaletteGenerator – создает цветовую палитру для любого изображения, которое вы найдете в интернете.
8. Colorspark – генератор случайного цвета и градиента.
9. The Color App – благодаря этой большой сетке поиск цветов становится намного проще.
10. ColorPick Eyedropper – позволяет выбирать значения цветов на веб-страницах (Chrome).
Вдохновение
1. Dribbble – место, где дизайнеры делятся своими самыми яркими работами.
2. Muzli – вдохновение для дизайнера, подобранное для вас (расширение браузера).
3. Design You Trust – коллективный блог, полный дизайнерских портфолио и архитектурных вдохновений.
4. Really Good Emails – каталог хорошо продуманных электронных писем, которые вдохновят вас на создание новостной рассылки.
5. Awwwards – отмечает талант и усилия лучших дизайнеров, разработчиков и агентств.
6. One Page Love – оригинальная витрина одностраничных сайтов.
7. Mobbin – библиотека из 50 000+ скриншотов мобильных приложений с возможностью поиска.
8. Designspiration – доска вдохновения в стиле Pinterest, которой можно поделиться.
9. Material Up – ежедневно отбирает лучшие дизайнерские материалы, доступные онлайн.
10. Mobile Patterns – узнайте больше об UX для вашего мобильного приложения.
Редакторы графики
1. Illustrator – создавайте удивительные векторные изображения с помощью этого незаменимого инструмента.
2. Photoshop – создавайте и улучшайте свои фотографии.
3. Daz Studio – создавайте невероятно реалистичных людей или животных в 3D (доступно через VPN)
4. DrawPlus – рисуйте красивые векторные изображения по разумной цене.
5. Pixir – получите доступ к 600 эффектам для ретуши фотографий бесплатно.
6. Inkscape – лучшая альтернатива Illustrator с открытым исходным кодом.
7.
Vectr – онлайн-редактор векторной графики. Хватит для решения повседневных задач.
8. Blender – полностью бесплатное программное обеспечение с открытым исходным кодом для создания 3D.
9. Gimp – бесплатный редактор с открытым исходным кодом для редактирования и ретуши изображений.
10. Affinity Photo – профессиональное программное обеспечение для редактирования фотографий.
Дизайн логотипа
1. SquareSpace – этот инструмент для создания классного логотипа.
2. Desugnmantic – введите название своей компании, выберите свою отрасль и создайте редактируемый логотип.
3. Graphic Springs – выберите шаблон логотипа, отредактируйте его и загрузите свой логотип.
4. Logo Genie – делает разработку логотипа легкой и увлекательной.
5. Logo Makr – создайте простой логотип с материалами Flaticons.
6. Logo Type Makr – случайная генерация логотипов для вашей компании.
7. Logo Garden – выберите отрасль, в которой вы работаете, и выберите один из сгенерированных логотипов
8. Logoshi – нарисуйте набросок и получите чистый и современный логотип.
9. Logaster – сделайте достойный логотип без каких-либо дизайнерских навыков.
10. Logo Maker – создавайте сотни потенциальных логотипов и изменяйте их онлайн.
Прототипирование
1.
Sketch – инструмент векторного дизайна, удобный для разрпаботки UI и UX. Совместим только с Mac.
2. Napkin – создавайте быстрые мокапы на своем устройстве iOS.
3. Flinto – нарисуйте интерактивные прототипы из статических изображений.
4. Proto – создавайте ультрареалистичные прототипы приложений. Программирование не требуется.
5. Weld – нарисуйте свой веб-сайт в Интернете так, как вы этого хотите.
6. Balsamiq – инструмент Quick Wireframing, позволяющий создавать макеты.
7. App Cooker – работайте с макетами и прототипами с вашего iPad.
8. Atomic – создавайте реалистичные прототипы, которыми вы можете поделиться со своей командой.
9. HTML5 Up – создавайте стильные, настраиваемые и адаптивные шаблоны HTML5.
10. Axure – быстро создавайте прототипы со своего компьютера и делитесь ими.
***
Материалы по теме
- 🛠 ТОП-10 инструментов дизайнера UX/UI, актуальных в 2021 году
- 🎥 30 лучших YouTube-каналов по UX/UI
- 🎨 40 лучших веб-сайтов и телеграм-каналов по UX/UI для дизайнеров интерфейса в 2021 году
- 🎨 50 онлайн-инструментов для дизайна: веб-сайты и мобильные приложения
🔎 Проверка CMS сайта — проверить движок сайта онлайн
🔎 Проверка CMS сайта — проверить движок сайта онлайнИнструмент для проверки CMS позволяет определить движок сайта и другие используемые на ресурсе технологии: набор шрифтов, системы статистики, CDN, JavaScript фреймворки и прочее. С помощью этого инструмента вы можете проверить сайт конкурента или клиента на продвижение.
Зачем нужно проверять CMS?
Этот инструмент поможет, если вам нужно определить, на чем сделан сайт конкурента или клиента, а также оценить понравившийся сайт, если вы хотите скопировать его или использовать некоторые идеи у себя. Перед созданием собственного сайта стоит найти несколько вариантов, которые вы можете взять за основу, и посмотреть, на чем они сделаны. Помимо движка может понадобиться информация о различных технологиях сайта, не принадлежащего вам.
Почему проверка показывает несколько CMS на одном сайте?
Может быть так, что на сайте используется несколько систем управления для разных разделов — например, для каталога и блога. Этот вариант подходит в случае, если функциональность одной CMS не справляется со всеми специфическими задачами компании, а создать собственную систему управления, которая учитывала бы все особенности бизнеса, невозможно.
Почему сервис не определяет ЦМС на моем сайте?
Сервис может не показывать CMS сайта в случае, если он находится на самописном движке или движок непопулярный и его еще нет в нашей базе.
Также причинами могут быть: настроенный редирект на другой сайт, отсутствие ответа от сервера сайта или некорректный ввод URL.
Рейтинг CMS
По данным Ruward Track, ТОП-10 самых популярных в России CMS выглядит так:
| # | CMS | Процент |
|---|---|---|
| 1 | WordPress | 44% |
| 2 | 1С-Битрикс | 13% |
| 3 | Joomla | 11% |
| 4 | OpenCart | 3% |
| 5 | Drupal | 3% |
| 6 | MODX Revolution | 2% |
| 7 | DataLife Engine | 2% |
| 8 | Nethouse | 1% |
| 9 | Shop-Script | 1% |
| 10 | Другие | 20% |
Интересные инструменты
Массовая проверка доменов
Проверка трафика и SEO параметров для списка доменов.
Узнать ключевые слова конкурентов
Видимость сайта в поисковых системах.
Анализ сайта
Контроль за сайтом: анализ, проверка позиций и аудит сайта.
SEO анализ страницы сайта
Вхождения страницы по ключевым словам.
Антиплагиат проверка уникальности текста
Мощная антиплагиат проверка через поисковые системы.
Проверка посещаемости
Анализ посещаемости и источников трафика.
Проверка IP-адреса сайта
Быстрая проверка IP домена.
Найти похожие сайты
Поиск сайтов с похожим трафиком.
Узнать хостинг сайта
Проверяем дата-центр и хостера по IP.
Узнать возраст сайта
Определяем возраст по дате whois.
Проверка доверия к сайту
Подскажем можно ли покупать на сайте
Эмодзи иконки
Удобный поиск и список иконок.
Проверка заголовков h2
Покажет структуру заголовков на странице.
Проверка SSL сертификата
Работоспособность и дата окончания SSL.
Калькулятор размера шрифта
Расстояние в см
Острота зрения
Отношение высоты x к размеру шрифта
Виртуальное разрешение в ppi
Типы текста
Чтение текстаТекст консультацииТекст сигнализации
Освещение
хорошееадекватное/среднееплохое
Минимальный размер
х-высота
Размер шрифта
Угол обзора
(Увеличенное изображение угла обзора)
Общие примечания
Калькулятор размера шрифта предназначен для облегчения определения включающих размеров шрифта в соответствии с немецким стандартом DIN 1450 по удобочитаемости. В зависимости от важности соответствия конкретным стандартам может потребоваться дополнительная проверка на основе всех критериев DIN 1450 и, возможно, других стандартов.
Сводную информацию по этой теме можно найти в главе о размерах шрифта (на немецком языке), а более подробную информацию можно найти в DIN 1450 (на немецком языке).
Рекомендации по размеру шрифта в DIN 1450 основаны на нормально остром зрении не менее 70% (острота зрения ≥ 0,7). Размер шрифта можно умножить на коэффициент, соответствующий остроте зрения людей с менее острым зрением, чтобы обеспечить им адекватный размер шрифта. Однако размер шрифта не может быть увеличен произвольно из-за ограничений, установленных полем зрения читателя, шириной столбцов, форматами и техническими средствами чтения. Было показано, что применимы коэффициенты от 1,4 (острота зрения ≥ 0,5) до максимума 1,75 (острота зрения ≥ 0,4). Используя эти факторы, можно увеличить размер шрифта для текстов, специально предназначенных для читателей с нарушениями зрения. Стандартные размеры шрифта, рекомендованные в DIN 1450, достаточны для всех других приложений.
Основа расчета
Расчет размера шрифта согласно DIN 1450 основан на высоте по оси x.
Размер шрифта (здесь x-высота) обычно устанавливается в зависимости от расстояния до него зрителя. Чем меньше расстояние зрителя от текста, тем мельче может быть его шрифт, и наоборот. DIN 1450 основывает свои рекомендации по высоте по оси x, которые не зависят от расстояния до зрителя и угла обзора.
Угол зрения – это угол, под которым воспринимается рассматриваемый объект. Минимальные значения x-height для трех типов текста в DIN 1450: текст для чтения, консультационный текст и сигнальный текст выражаются через угол обзора в единице 9.0043 угловых минуты . Для получения дополнительной информации см. также статьи Википедии об угловом диаметре и остроте зрения.
На основе минимальных значений, предусмотренных в DIN 1450 для предписанного угла обзора α , можно определить высоту по оси x M , принимая во внимание расстояние до зрителя D , посредством расчета с использованием равнобедренного треугольника.
M=2D×tanα2
DIN 1450 также позволяет учитывать в расчетах остроту зрения зрителя (остроту зрения) и адаптивную яркость (или проще «освещение») означающего, включая эти два аспекта в качестве коэффициента коррекции яркости/остроты зрения K LV в расчетах следующим образом:
M=2D×tanα×KLV2
Поправочный коэффициент яркости/остроты зрения K LV можно получить из таблицы A.
1 в DIN 1450 следующим образом:
KLV=LfV1V
Lf V1 соответствует поправочному коэффициенту яркости, показанному в столбце 1 для остроты зрения 1. V представляет остроту зрения зрителя.
Почти в каждой компьютерной программе можно настроить размер шрифта (на самом деле высоту тела), но не высоту x. Чтобы вычислить размер шрифта по вычисленной высоте x, соотношение x-height-font size равно 9.0043 M S шрифта, который будет использоваться, должен быть известен. Это может варьироваться от шрифта к шрифту и сильно различаться в некоторых случаях. Его можно определить, измерив высоту x известного размера шрифта, чтобы определить соотношение между высотой x M и размером шрифта S :
MS=MS
Если в поле не введено отдельно определенное значение заданное поле, Калькулятор размера шрифта в качестве стандарта предполагает соотношение x-высота-размер шрифта 0,47.
Это можно получить из DIN 1450. Спецификация рекомендуемого размера шрифта в пунктах в этом случае является лишь приблизительным значением. Напротив, вычисление x-высоты в миллиметрах всегда точно.
Специальные функции расчета размеров шрифтов для экранов
Некоторые специальные функции применяются для расчета размеров шрифтов для экранных изображений (см. также Цифровые медиа). Здесь виртуальное разрешение устройства должно быть указано в пикселях на дюйм (ppi) в дополнительном поле.
12 полезных инструментов, которые помогут вам определить любой шрифт
Мы все сталкивались с этим потрясающим веб-сайтом или красивым логотипом бренда и говорили: «Интересно, как называется этот шрифт?»
Обычно вы запускаете Google, чтобы узнать название этого шрифта, или, может быть, открываете Microsoft Word и смотрите, есть ли он в вашей библиотеке шрифтов.
Возможно, вы сможете получить ответ таким образом, но в конечном итоге вы потратите на это слишком много времени.
К счастью, есть несколько инструментов, которые помогут вам легко идентифицировать шрифты. В этой статье мы собрали лучшие из них. Давайте углубимся.
Этот инструмент прост и понятен. Инструмент идентификации шрифта Font Squirrel позволяет перетаскивать изображение нужного шрифта. Выберите 1 или несколько букв, и он сделает все остальное. Вы получаете не только название шрифта, но и ссылку для покупки или загрузки шрифта, который вы искали.
Загрузите чистое изображение текста, содержащего шрифт, который необходимо идентифицировать. Система использует продвинутый ИИ для поиска шрифта в 90% случаев. Остальные 10% «промахов» обычно связаны с изображениями низкого качества (низкое разрешение, искаженный текст и т. д.).
Инструмент покажет более 60 шрифтов, очень похожих на тот, что на изображении, которое вы загрузили, и со ссылками на страницы, где их можно скачать или купить.
Вы также можете разблокировать более простые способы поиска шрифта, который хотите использовать, перейдя на пожизненную или годовую подписку.
У вас есть изображение с шрифтом, но вы не знаете, что это за шрифт? Загрузите его, и они найдут подходящие шрифты. Инструмент также дает вам похожие рекомендации шрифтов.
Что отличает этот идентификатор от других идентификаторов шрифтов, так это то, что вы видите загруженное изображение и буквы, которые программа взяла за основу результатов. Разница между этим и другими инструментами шрифтов заключается в том, что вы можете проконсультироваться с сообществом на тот случай, если рекомендации не соответствуют вашим ожиданиям.
Если ни один из инструментов не может найти шрифт, Quora может стать вашей последней надеждой. У них есть сильное сообщество или знающие графические дизайнеры, дизайнеры шрифтов и веб-разработчики, которые ответят на ваш запрос.
Identifont — специализированная поисковая система шрифтов, помогающая идентифицировать шрифты по пяти категориям;
Инструмент, позволяющий задать ряд вопросов, чтобы сузить круг и найти наиболее близкие совпадения.
Название точно отражает назначение этого инструмента. Чтобы получить наилучшие результаты, вам нужно описать шрифт, сопоставив засечки, перекладины и так далее.
WhatFont — это расширение браузера Chrome или Safari, которое идентифицирует шрифты, используемые на веб-сайте. Возможные шрифты или семейства шрифтов будут показаны, как только вы наведете указатель мыши на шрифт, который хотите идентифицировать. Чтобы начать использовать WhatFont, скачайте расширение или сохраните букмарклет.
Подобно WhatFont, Font Finder — это подключаемый модуль Firefox, который идентифицирует шрифты. Чтобы узнать, какой шрифт используется в текстах веб-сайта, выделите буквы, щелкните правой кнопкой мыши и выберите «Анализ выделения» из вариантов, найденных в меню FontFinder.
Этот подход, основанный на сообществе, немного отличается, когда речь идет о решении вопросов, связанных со шрифтами. Это группа, в которой другие участники будут показывать разные изображения, соответствующие данному шрифту или семейству шрифтов.
