Найкращий список найкращих безкоштовних інструментів та ресурсів для розробників Front-End

автор: Bradley Nice, менеджер контенту на ClickHelp.com - інструмент програмної документації

Передня розробка - це розробка тих елементів веб-сайту, які клієнт бачить та взаємодіє безпосередньо. Це поєднання навичок програмування та естетики.

Проблеми, пов’язані з розробниками передньої частини, полягають у тому, що інструменти та методи, які використовуються для створення переднього кінця веб-сайту, постійно змінюються, і тому розробнику потрібно постійно знати про те, як розвивається поле.

Тому я зібрав перелік інструментів та ресурсів для розробників, які підпадають під кілька категорій: кольори, генератори CSS, калькулятори та конвертери, типографія та шрифти, піктограми, аналіз стилю веб-сайту, редактори, інструменти для розробників, тестування, продуктивність, Оптимізація, зворотній зв'язок, натхнення, MOOC, каркаси, макети та прототипи, дизайнерські новини та спільноти, портфоліо, ресурси.

Кольори

Кольоровий шістнадцятковий: безкоштовний інструмент кольорів, що надає інформацію про будь-який колір

Вибір кольорів матеріалу

Простий селектор кольорів: Виберіть формат, у якому ви бажаєте скопіювати, у буфер обміну, із селектором у верхній частині. Клацніть колір, який потрібно скопіювати, і він буде доданий до буфера обміну у вибраному форматі.

ColorDrop: інструмент відповідності кольорів, який дозволяє зберегти улюблені поєднання кольорів.

Palettable: Створюйте красиві кольорові палітри без попередніх знань про дизайн.

ColorFavs: це чудовий інструмент, за допомогою якого ви можете легко створити кольорову палітру, перетягуючи зображення, вставляючи URL-адресу або вибираючи випадкові значення.

Колір безпечний: красиві та доступні кольорові палітри, засновані на Керівних принципах WCAG щодо контрасту тексту та фону.

КОЛІРИ: Проста кольорова палітра для Інтернету.

SwatchMatic: підбір кольорів для об'єктів реального світу. Це дозволить вам швидко створити палітри на льоту, використовуючи насінні кольори, надані самою Матінкою Природою. Наведіть камеру свого мобільного на колір, який вам подобається, і SwatchMatic повідомляє вам ім'я кольору (на декількох мовах) та всі значення, необхідні для його відтворення, плюс він надає вам п’ять інших кольорів, які добре відповідають йому.

uiGradients: красиві кольорові градієнти.

Дані про кольори в Інтернеті: Цей проект має на меті відповісти на запитання на зразок: Який найпоширеніший колір / відтінок або відтінок / і в Інтернеті? Чи певні галузі віддають перевагу певним кольорам перед іншими? Які кольори зазвичай зустрічаються разом?

Кольори дизайну матеріалів: Цей невеликий веб-додаток допомагає візуалізувати кольори дизайну матеріалу, а також легко копіювати кольори в різні формати.

Кольори інтерфейсу матеріалу: кольорова палітра інтерфейсу користувача Google включає основні та акцентні кольори, які можна використовувати для ілюстрації чи розробки кольорів вашої марки. Вони створені для гармонійної роботи один з одним.

BADA55.io: BADA55.io - це пошук самих недобрих слів для ваших шестигранних кольорів CSS.

Кольорова гекса: це безкоштовний кольоровий інструмент, що надає інформацію про будь-який колір. Просто введіть будь-які значення кольорів у полі пошуку, і він запропонує детальний опис і автоматично перетворить його в його еквівалентне значення в шістнадцятковий, двійковий, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE -LCH, XYZ і xyY.

Контрастність: Легко обчислити коефіцієнти контрастності кольорів

П'ятдесят відтінків сірого для веб-дизайнерів:

COLOURlovers: Натхнення створено користувачем та спільне використання палітри кольорів

Colllor: Генератор палітри кольорів

Paletton: Інструмент для створення кольорових комбінацій

Дальтонізація Chrome!: Дальтонізація - це техніка викриття деталей сліпим кольоровим користувачам, що дозволяє їм бачити те, що вони інакше пропустили б

CSS Генератори

CSS3.me: Цей дуже мінімальний і стильний, але також дуже функціональний. Це дає можливість змінювати та встановлювати радіус межі, тіні, градієнта та непрозорості.

Генератор CSS3: Це і функціональний, і добре розроблений генератор. Я думаю, що це один із моїх улюблених, тому що дизайн та інтерфейс користувачі такі чисті.

CSS3-Tricks Button Maker: Цей майже повністю керований за допомогою повзунка перетягування.

CSS3 Button.net: Дизайну цього може не вистачати, але він пропонує набагато більше вибору, ніж попередній. Він пропонує можливість додавати декілька текстових тіней, внутрішніх тіней, рамки та кольорів шрифту. Спочатку це може бути важко зрозуміти, але ви отримаєте це, якщо просто пограєте з ним кілька хвилин.

Кінцевий генератор градієнтів CSS: генератор градієнтів CSS

CSS3 Генератор кнопок: Ця кнопка дає вам одну велику кнопку для маніпулювання тінню, облямівкою, кольором та поверх того, що дає можливість редагувати курсор.

Бордюр-радіус: Це мінімально невеликий інструмент, який дуже практичний і простий. Все, що ви робите, - просто встановити, яку кількість закругленого краю потрібно на кожному куті. Тоді ви просто перевірте, який саме префікс браузера ви хочете включити, і це все.

Генератор барвистих фонових кольорів CSS: Створення фону CSS

EnjoyCSS: все в одному генераторі CSS

CSS MenuMaker: Створення чуйної навігації по веб-сайту

Перемикач увімкнення / вимкнення: генерування перемикачів перемикача CSS3

CSSmatic: градієнт, радіус облямування, генератор текстури тіні та шуму

Ui Parade Live Tool: кнопка, форма, значок, конструктор стрічок

CSS стрілка Будь ласка: генератор стрілок CSS

Галерея шаблонів CSS3: Галерея шаблонів CSS3

Генератор макетів: Створення CSS макета

Tridiv: Веб-редактор для створення 3D фігур у CSS

Калькулятори та перетворювачі

DPI Love: Знайдіть DPI / PPI будь-якого екрана

CSS Inliner: Автоматично вбудовуйте CSS вашої електронної пошти

Код прикрасити: прикрашати, перевіряти, мінімізувати, аналізувати та конвертувати JSON, XML, JavaScript, CSS, HTML, Excel

PXtoEM: Перетворення пікселів в EM

Відра щільності: перетворювач щільності екрану для Android та iOS

Перетворювач щільності: Перетворювач щільності пікселів

Це сітківка ?: Дисплей калькулятор DPI / PPI

NTH-тест: тестування n-ї дитини та n-го типу

Типографія та шрифти

Google Fonts: веб-шрифти з відкритим кодом

Fontspiration: будівельний інструмент для створення веселих, анімованих друкарських шедеврів.

Gridlover: інструмент для створення типографічної системи з модульним масштабом і вертикальним ритмом.

Введіть Genius: знайдіть ідеальну комбінацію шрифтів для наступного проекту.

Тип Nugget: Type Nugget - це онлайн-інструмент для набору тексту, який дає вам тонкий контроль над надійною базою для тонкого веб-типу hella - все через приємний інтерфейс користувача.

TypeWonder: тестуйте веб-шрифти на будь-якому веб-сайті, що живе в реальному часі

Fit Text: плагін jQuery для надуття веб-типу

TypographyEditor: редактор типографіки - це безкоштовний та онлайн-інструмент для виготовлення друкарських плакатів та зображень.

Тільки мій тип:

Typecast: Додаток на основі браузера для створення красивих, реалістичних та послідовних конструкцій на основі типографії.

Білка шрифту: Безкоштовні веб-шрифти

Dafont: Архів вільно завантажуваних шрифтів

Простір шрифтів: Завантажте безкоштовні шрифти

Введіть Genius: знайдіть ідеальне поєднання шрифту

Що таке шрифт: ідентифікуйте шрифт із зображення

FontStruct: FontStruct - це безкоштовний інструмент для створення шрифтів, який фінансується провідним світовим роздрібним торговцем цифрового типу, FontShop. FontStruct дозволяє швидко та легко створювати шрифти, побудовані з геометричних фігур, розташованих у сітчастому малюнку, як плитка чи цегла.

Типове перегортання: інструмент для друку, введіть слово, яке ви хочете побачити, і миттєво перегляньте його, встановлене у шрифтах на вашому комп’ютері.

Зміна шрифту: перегляньте, як виглядатимуть веб-сайти зі шрифтами від Webtype.

tinytype: таблиця сумісності, що показує доступні системні шрифти за замовчуванням на різних мобільних платформах.

Typetester: Порівняйте веб-шрифти від Adobe Edge, Google та Typekit

Tiff. Дізнайтеся різницю між шрифтами Google

Кращі безкоштовні шрифти 2016: Моя колекція цього року безкоштовних шрифтів

Значки

Іконки Дизайн матеріалу: 750 гліфів Комплект системних іконок Material Design від Google Design

Іконоген: створюйте фаворити, плитки Windows 8, піктограми Apple Touch, піктограми Android та iOS

Марка: Красиві перетворювані іконки

Awesome Font: масштабовані векторні іконки, які можна миттєво налаштувати

Макі: Набір іконок для веб-картографії

Пакет: 300 ікон для веб-дизайну та інтерфейсу користувача

Fontello: Генератор шрифтів значків

Fontastic: Створіть власний шрифт значка

Iconmonstr: Велика колекція гліфових ікон німецького художника

Octicons: шрифт Icon, запущений GitHub

GlyphSearch: пошук іконок із шрифту Awesome, Glyphicons, IcoMoon, Ionicons та Octicons

Диня іконок: бібліотека іконок SVG для Інтернету

Ентіпо: Набір з 411 ретельно складених піктограм преміум класу від Daniel Bruce

Gemicon: 600+ Безкоштовний набір іконок, постачається в 3-х різних розмірах (16 пікселів, 32 пікселів, 64 пікселів)

Типові типи: безкоштовні у користуванні векторні іконки, вбудовані у веб-шрифт, для зручного використання у ваших користувальницьких інтерфейсах

Проаналізуйте стиль веб-сайту

Стиліфікувати мене: Огляд керівництва по стилю сайту, включаючи кольори, шрифти, розміри та інтервали

StyleStats: простий інструмент для збору статистики CSS веб-сайту

Кольори: Дізнайтеся про найпоширеніший колір або відтінок веб-сайту

Type-o-matic: розширення браузера, яке знаходить усі шрифти на сторінці

SnappySnippet: Легко витягуйте CSS та HTML з вибраного елемента

Редактори

CodePen: демонстрація передових методів з редагованим вихідним кодом

JS Bin: Жива пастіна для HTML, CSS та JavaScript та безліч процесорів

CSSDeck: Колекція Awesome CSS і JS Creations для допомоги розробникам та дизайнерам

Dabblet: інтерактивний ігровий майданчик для CSS та обмін кодом

Liveweave: Liveweave - це майданчик для HTML5, CSS3 та JavaScript для веб-дизайнерів та розробників

Adobe Edge Reflow: Інструмент дизайну, який доповнює ваш робочий процес дизайну, щоб допомогти вам створити красиві чуйні конструкції для всіх розмірів екрана

webflow: конструктор веб-сайтів із перетягуванням і створення для створення професійних веб-сайтів, що реагують на них

Macaw: забезпечує таку ж гнучкість, як і ваш улюблений редактор зображень, але також пише семантичний HTML і надзвичайно лаконічний CSS

Інструменти для розробників

Chrome DevTools: Набір інструментів веб-створення та налагодження, вбудованих у Google Chrome

Grunt: Запуск завдань JavaScript для автоматизації завдань

LiveReload: Правки CSS та зміни зображення застосовуються в прямому ефірі, не потрібно натискати кнопку оновлення

Бауер: вирішення проблеми управління переднім пакетом

Yeoman: екосистема генератора, в основному плагін, який можна запускати за допомогою команди `yo`, щоб обробляти проекти або корисні частини

Чи можу я використовувати: сучасні таблиці підтримки браузера для підтримки передових веб-технологій

HTML5 Будь ласка: Знайдіть HTML5, CSS3 та з’ясуйте, чи готові вони до використання

CSS Values: CSS Reference, Properties and Values

Тригери CSS: Неоціненний довідник про те, як CSS впливає на продуктивність

Тестування

Перевірка розмітки W3C: перевірка дійсності розмітки веб-документів у HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: перевіряє вихідний код HTML та виявляє порушення визначеного стандарту кодування

Перевірка CSS W3C: Перевірте (CSS) та (X) HTML-документи із таблицями стилів

CSS Lint: вказує на проблеми з вашим CSS-кодом

JS Lint: програма JavaScript, яка шукає проблеми в програмах JavaScript

Пестицид: налагодження макета CSS

PhantomCSS: Тестування регресії Visual / CSS за допомогою PhantomJS

QUnit: Рамка тестування блоку JavaScript

Browsershots: тест браузера на платформі

Відповідач: Перевірте, як виглядатиме ваш сайт на найпопулярніших пристроях

Емулятор Opera Mobile Classic: Використовуйте селектор профілю для нерестування декількох екземплярів Opera Mobile Classic з визначеною роздільною здатністю, щільністю пікселів, користувацьким інтерфейсом

Продуктивність

Тест швидкості веб-сайту Pingdom: випробування та аналіз часу завантаження живої сторінки

Веб-сторінка: Тест на швидкість веб-сайту з різних локацій по всьому світу

Статистика сторінок: аналізує веб-сайт та пропонує шляхи його швидшого завантаження

GTmetrix: Оцінка ефективності сайту та надання рекомендацій щодо усунення цих проблем

YSlow: аналізує та пропонує пропозиції щодо покращення продуктивності сторінки

Perfmap: Теплова карта продуктивності ресурсів, завантажених у браузері

Оптимізація

CSSCSS: Повідомте, у яких наборах правил дублюються декларації

Гелій: інструмент javascript для сканування вашого сайту та показу невикористаного CSS

CSS Tidy: Відкрийте аналізатор CSS та оптимізатор

CSS Compressor: Стисніть CSS, щоб збільшити швидкість завантаження

CSS Dig: Перегляньте всі ваші властивості CSS, їх частоту та зміни

JavaScript Minifier: мінімізуйте свій JavaScript

Підмножина FF: зменшення розміру файлу шрифту для оптимізації використання смуги пропускання

Compressor.io: зменшуйте розмір зображень, зберігаючи високу якість

Префікс безкоштовно: додайте поточний префікс браузера до будь-якого CSS-коду лише тоді, коли це потрібно

Sprite Cow: Створення CSS для спрайтів

TinyPNG: Розширене стиснення втрат для зображень PNG

Адаптивні зображення: Визначає розмір екрана відвідувача і автоматично створює, кешує та надає пристрою відповідні зміни масштабів версій зображень

Відгуки

Відмов: додайте відгуки про дизайн та діліться ним з іншими людьми

Падіння дизайну: інструмент для збору відгуків про дизайн

Загляньте: перегляньте та почуйте 5-хвилинне відео справжньої людини, яка користується вашим сайтом

Натхнення

CoDrops: CoDrops має надзвичайно популярний тижневий (або близько того) колектив, який, по суті, є сукупністю великих ресурсів та надихаючих елементів для веб-дизайнерів та інших творців. Дуже популярний і надзвичайно корисний.

Designrfix - Натхнення для графічного дизайну - Підручники та ресурси веб-дизайну: Ще один важливий блог з графічним та веб-дизайном.

OneXtraPixel - Інтернет-журнал веб-дизайну та розробки

Інтернет-журнал для дизайнерів та розробників, OXP ділиться порадами, навчальними посібниками, інструментами, ресурсами та іншими статтями про дизайн та розробку.

MonsterPost: TemplateMonster - це здебільшого компанія шаблонів, але у них також є чудовий блог. Справа не лише у їхніх власних речах - вони впевнені, що вони пропонують велику кількість чудових веб-дизайну.

FromUpNorth - високоякісне натхнення для дизайну

DesignShack: Знову багатство ресурсів ділиться з дизайнерською спільнотою.

Ванделей Дизайн: багато і чудових ресурсів, халяв, статей, угод, речей WordPress та багато іншого.

DesignM.ag: DesignM.ag - це спільнота для дизайнерів, веб-дизайнерів та розробників.

Reddit Web_design

Це насправді не щоденник, це підредагування.

Тим не менш, оновлення механіки reddit гарантують, що все, що піднімається до вершини, є важливим для читання веб-дизайнерів. Це дуже популярний, один з найбільших субредактивів.

Abduzeedo - дизайнерське натхнення та навчальні посібники: Abduzeedo - це ще одне з тих, де ви знайдете накрутки дизайнерського натхнення, які обов'язково повинні побачити дизайнер, який хоче бути в курсі тенденцій і знати, що є найновішим і найкращим.

tutorialZine - єдине місце для високоякісних підручників веб-розробок: це підручник здебільшого для навчальних посібників з веб-розробки. Підручники добре написані та прості у виконанні.

eWebDesign: eWebDesign - ще одне джерело останніх та найкращих статей експертів з веб-дизайну. Розповіді про веб-дизайн, веб-розробки та навчальні посібники. Це насправді інформаційний бюлетень, тому ви можете отримувати речі прямо у свою поштову скриньку!

WebAppers: безліч відкритих та безкоштовних веб-ресурсів.

WebNeel - дизайн натхнення, мистецтва, фотографії та анімації

CSS Mania - Галереї CSS: Цей найпопулярніший сайт вітрин CSS. Знову ж таки, дуже хороший сайт, щоб слідкувати за інноваційними веб-дизайнами.

9 найважливіших блогів веб-дизайну, які вам потрібно дотримуватися

MOOC

Вступ до дизайну повсякденних речей: Інформативно для тих, хто цікавиться дизайном: повсякденні люди, технічні люди, дизайнери та недизайнери.

Взаємодія з прототипуванням: вивчіть різні методи складання прототипів шляхом начерки, побудови та тестування

Вступ до графічного дизайну: вивчіть основоположні принципи графічного дизайну (шрифти, кольори, зображення, фони та макети) та способи їх застосування.

Вступ до HTML та CSS: Дізнайтеся, як перетворити макети цифрового дизайну на статичні веб-сторінки

Веб-розробка: вивчіть основні концепції веб-розробки від співзасновника Reddit & Hipmunk Стіва Хаффмана.

Основи чуйного веб-дизайну: вивчіть основи адаптивного веб-дизайну за допомогою Pete LePage від Google

Чуйні зображення: Дізнайтеся, як працювати із зображеннями в сучасному Інтернеті, щоб ваші зображення виглядали чудово та швидко завантажувалися на будь-який пристрій

Полотно HTML5: Дізнайтеся, як використовувати полотно; як складати композиції, використовуючи форми, зображення та текст; як створити ефекти та фільтри для зображень та як створити анімацію.

Розробка програм для Android: Дізнайтеся, як створити додаток для Android

Основи JavaScript: вивчіть основи програмування JavaScript

Об'єктно-орієнтований JavaScript: Дізнайтеся, як використовувати різні об’єктно-орієнтовані функції програмування в JavaScript, і що ще важливіше, як писати багаторазові бібліотеки для багаторазового використання.

Шаблони дизайну JavaScript: дізнайтеся важливість розділення проблем при написанні JavaScript, здобувши практичний досвід на цьому шляху

Тестування JavaScript: Дізнайтеся, як писати програми Java з упевненістю, використовуючи робочий процес червоно-зеленого рефактора

Створення мобільного веб-досвіду. Дізнайтеся, як створити чудовий веб-досвід для мобільних пристроїв.

UX Design для мобільних розробників: зануріться в методи, які чудові дизайнери використовують для планування та прототипу дивовижних додатків, перш ніж писати будь-який код

Основи UIKit: Створіть низку простих додатків, щоб стати зручнішими для системи UIKit та освоїти її найбільш широко використовувані компоненти

Вступ до jQuery: Дізнайтеся, як читати та розуміти документацію jQuery.

Вступ до AJAX: Дізнайтеся, як робити асинхронні запити за допомогою JavaScript (використовуючи функцію AJAX jQuery), і краще зрозуміти, що відбувається насправді, коли ви це зробите

Оптимізація продуктивності веб-сайту: Дізнайтеся, як оптимізувати будь-який веб-сайт для швидкості, заглибившись у деталі про те, як мобільні та настільні браузери відображають сторінки.

Дизайн ґаміфікацій: вивчіть основи Gamification з високо практичним підходом

Каркаси, макети та прототипи

Орігамі: безкоштовний інструмент для проектування сучасних інтерфейсів користувача, створений Facebook

Какао: Створіть діаграми, мапу сайту, блок-схему, карту розуму, дротяну рамку, діаграму UML та мережеву діаграму

Marvel: перетворіть свої зображення Dropbox або настільних ПК в прототипи веб- і мобільних додатків для будь-якого пристрою та отримуйте зворотній зв’язок

Розміщення: Створення макетів iPhone та макетів iPad

MockFlow: Інтернет-сервіси планування, створення та спільної роботи для дизайнерів

Justinmind: Інтерактивні рамки для Інтернету та мобільних пристроїв

Wireframe.cc: Безкоштовний мінімальний інструмент для проводки кадрів

Новини дизайну та спільноти

/ r / web_design: підредагування веб-дизайну

/ r / дизайн: Дизайн subreddit

/ r / юзабіліті: досвід користувачів, дизайн інтерфейсу або підредагування людських факторів

/ r / userexperience: subreddit дизайну досвіду користувача

Обмін стеками: Графічний дизайн: Питання та відповіді для професіоналів, студентів та любителів графічного дизайну

Обмін стеками: Досвід користувачів: Питання та відповіді для дослідників та експертів із користувацького досвіду

Фронт-фронт: Місце, де розробники інтерфейсів можуть задавати питання, обмінюватися цікавими посиланнями та показувати свою роботу іншій громаді

Ананас: Центр навчальних посібників, інструменти та засоби для розробників та дизайнерів

Lockerdome: соціальна мережа на основі інтересів

Новини дизайнерів: Спільнота людей у ​​дизайні та технологіях

DesignFloat: новини та поради щодо веб-дизайну

Веб-суміш: спільнота для дизайнерів, розробників та технологічних наркоманів

Новини дизайну: Сайт, на якому розміщені новини, ресурси та підручники, написані дизайнерами та розробниками

Портфоліо

Behance: провідна онлайн-платформа для демонстрації та відкриття творчих робіт

Dribbble: місце для показу та розповіді, реклами, виявлення та дослідження дизайну

Вантаж: Персональна видавнича платформа, спрямована на створення доступних інструментів та мережевого контексту для покращення експозиції талановитих людей у ​​мережі Інтернет

DeviantArt: Інтернет-спільнота, що демонструє різні форми художньої роботи, виготовленої користувачем

Ресурси

Вектор відкритий запас: Безкоштовна векторна графіка

Кнопки: бібліотека кнопок CSS, побудована за допомогою Sass & Compass

Bootflat: Відкритий вихідний інтерфейс KIT з відкритим кодом на основі Bootstrap 3.3.0 CSS

Animate.css: Бібліотека крос-браузерних анімацій CSS

CSS Shake: CSS струшування графіки та піктограм для вашої сторінки чи програми

Тонкі візерунки: вільні текстуровані візерунки

Placehold.it: заповнювачі зображень

Holder.js: заповнювачі зображень на стороні клієнта

Hammer.js: додайте жести на кілька дотиків до своєї веб-сторінки

Textillate: простий плагін для анімації тексту CSS3

Хронологія JS: Чудово складені строки, які прості та інтуїтивні у використанні

Modernizr: бібліотека JavaScript, яка виявляє функції HTML5 та CSS3 у веб-переглядачі користувача

Ізотоп: Створіть портфоліо, який можна змінити, для вашого веб-сайту

Полімер: полегшує та швидше створювати що-небудь від кнопки до повної програми на робочому столі, мобільному пристрої тощо

CodyHouse: безкоштовна бібліотека самородок HTML, CSS, JS

Cheetyr: Колекція шпаргалок та ярликів для дизайнерів та розробників

Листовка: Бібліотека JavaScript з відкритим кодом для мобільних інтерактивних карт

Скромні карти: Безкоштовна бібліотека для інтерактивних карт

Шаблон: Колекція 846 безкоштовних шаблонів сайтів CSS та HTML5, розроблена та побудована Cherry + AJ

GraphicBurger: Дизайнерські ресурси, пропоновані громаді безкоштовно

Гарного дня!

Бредлі Ніцца,
Content Manager на ClickHelp.com - найкращий інструмент онлайн-документації для постачальників SaaS