50 Безкоштовних веб-інструментів для фрілансера. Частина 3 - інструменти дизайну, svg і інші
Гарного завжди мало! Ось і безкоштовних високоякісних інструментів для веб-розробки та дизайну завжди не вистачає. Технології стрімко йдуть вперед, а разом з ними ростуть потреби Інтернет-користувачів. Саме тому ми вирішили вам представити добірку з 50 безкоштовних веб-інструментів, які обов`язково вам знадобляться. Ми вже познайомили вас з інструментами HTML, CSS і Sass, а також javascript. Тепер настав час інструментів веб-дизайну та інших.
Інструменти дизайну
1. CSSketch
CSSketch є загальнодоступним плагіном CSS для Sketch - популярним Mac-орієнтованим додатком для дизайну і прототипування. З його допомогою ви можете написати CSS всередині Sketch, застосовуючи стилі до елементів на сторінці в поточному Sketch файлі.
2. Fluid для Sketch
Ще один плагін Sketch: він допомагає розробляти чуйні макети в Sketch. У цього інструменту безліч особливостей, серед яких зміщення, централізація і визначає відстань до об`єкта, а також використання математичних виразів.
3. AllTheFreeStock
Це величезний єдиний ресурс, де можна знайти безкоштовні фотографії зі безлічі різних сайтів. Він включає в себе такі популярні безкоштовні джерела, як Unsplash, поряд з іншими, менш відомими сайтами, щоб дати вам багато варіантів заповнення вашого дизайну.
4. Octicons
Існує безліч варіантів для іконок, і GitHub випустила свій власний красиво оформлений набір. Octicons доступний як іконочние шрифт (або шрифт для веб-сторінок), який зазвичай вставляється на сторінку за допомогою CSS псевдо-елементів.
5. Transformicons
Transformicons - це інший набір іконок. Це SVG і CSS значки, які містять CSS-переходи для анімованого ефекту, якими можна керувати за допомогою javascript.
6. Icono
Один останній варіант іконок: на цей раз на чистому CSS, створений за допомогою CSS псевдо-елементів.
7. 0to255
Колірної онлайн-інструмент, який допомагає дизайнерам знайти варіанти обраного кольору (наприклад, для вибору кольору при наведенні курсору, контрастів, градієнта кольору, країв і т. Д.). Він позбавляє від необхідності ворожіння з hex-кодами і відмінно підходить для тих, хто проектує в браузері.
RWD і мобільні інструменти
1. Picturefill
Популярний чуйний поліфілл зображень дозволяє використовувати вам нові HTML
2. ish
Є безліч інструментів для тестування чуйних макетів, але хотілося б виділити один, тому що це все, що вам потрібно. Ish робить те, що повинен робити, без зайвої уваги на розміри пристрою.
3. Ionic
Одне з найбільших мобільних додатків на основі HTML5 для розробки фреймворк, побудоване з мобільно-оптимізованими CSS і javascript компонентами. Ionic може похвалитися дуже серйозним співтовариством, яке ідеально підходить для тих, хто шукає хороший довгостроковий варіант.
4. Embed Responsively
Простий онлайн-інструмент, який дозволяє захоплювати чуйні вбудовуються коди для всіх видів популярних медіа-джерел. Він підтримує YouTube, Vimeo, Карти Google, Instagram, Vine і багато іншого.
5. Tablesaw
Чуйні таблиці є одним з найбільш складних аспектів розмітки. Tablesaw - це набір плагінів jQuery, щоб допомогти в цій галузі, за допомогою таких функцій, як стек, перемикання, міні-карта та багато іншого.
6. QAid
Букмарклет, що надає панель інструментів, з якою ви можете виконати накладення зображення дизайну (з альфа-налаштуванням), щоб порівняти його з вашою роботою в браузері. Ви також можете перевірити контрольні точки.
Відео: Сайт-портфоліо для веб-дизайнера # 28
7. Grunt-respimg
Плагін Grunt для автоматизації завдань, пов`язаних з адаптивними зображеннями: зміна розмірів зображень, растрирование з SVG і PDF-файлів і оптимізації без втрат.
8. Email Framework
Фреймворк HTML електронної пошти, щоб допомогти побудувати чуйні макети електронної пошти та шаблони. Він пропонує добре перевірені модулі, сітки, типографіку, кнопки і багато іншого.
SVG-інструменти
1. Snap.svg
Велика бібліотека javascript від команди Adobe Web Platform. Інструмент забезпечує простий API для створення, анімації і будь-який інший маніпуляція з файлами SVG в інтернеті.
2. Vivus
Щодо безкоштовна бібліотека javascript, яка оживляє ваш SVG, створюючи видимість креслення. Сторінка демо-версії варто того, щоб її перевірили.
3. Circulus.svg
Онлайн-інструмент, який дозволяє створювати SVG-код для меню пирога. Як повідомляється на сайті, меню пиріг (на подив) виявився більш зручним у багатьох випадках, ніж стандартна навігація.
4. Paths
Інтерактивний інтерфейс, що допомагає пояснити траєкторію синтаксису елементу для побудови SVG. Редактор дозволяє завантажити заповнену форму в форматі SVG.
5. SVG Editor
За допомогою цього інструменту ви можете завантажити файл у форматі SVG або вставити в код SVG, і він буде оптимізувати його шляхом видалення пробілів, непотрібних атрибутів, просторів імен і так далі, щоб зменшити розмір файлу.
Кращі серед інших інструментів
1. Atom
Текстовий редактор зламати дев-команди GitHub для сучасного програмування. Atom поставляється повнофункціональним, з пакетами, темами, розумним автокомплітом, декількома панелями і багатьом іншим. Кращий з усіх, він може бути повністю налаштований за допомогою HTML, CSS і JS.
2. Browsersync
Browsersync схожий на LiveReload, але на стероїдах. Це потужний інструмент для синхронізованого тестування крос-пристрій, який буде перезавантажувати ваш проект для кожного редагування, і зберігати його для всіх прикладів браузера. Він також синхронізує навігацію і скролінгу в сесіях браузера. Ви можете додати CSS контури для налагодження, а режим затримки дозволяє імітувати повільне з`єднання з Інтернетом.
Відео: Веб-дизайн. Тайм-менеджмент для фрілансера
3. Brackets
Внесок компанії Adobe в гонку текстових редакторів. Brackets - це безкоштовний редактор з фокусуватися візуальними інструментами, підтримкою препроцесора, а також можливістю полегшити в браузері створення дизайну через попередній перегляд. Він також добре інтегрується з Photoshop за допомогою розширення Extract для Brackets.
4. Accessible HTML5 Video Player
Це відео-плеєр від команди PayPal. Він має призначені для користувача елементи управління, доступну клавіатуру і підтримує читання з екрану інтерфейс. Він використовує елементи управління HTML5 для показників обсягу і прогресу.
5. Let`s Encrypt
Якщо ви хочете перемкнути проект на HTTPS, то вам варто досліджувати цей варіант. Це безкоштовний, загальнодоступний і автоматизований центр сертифікації, який надає вам безпроблемний спосіб безпеки.
джерело
