10 Кращих нових інструментів для веб-дизайну жовтень 2016
У ці дні дизайнерам доводиться воістину тяжко, коли вони змушені працювати зі складними (і не тільки) сайтами, що представляють собою складне переплетення залежностей. Якщо це про вас, то сьогодні нам би хотілося запропонувати кілька інструментів, які можуть допомогти вам - будь то менеджер залежностей, щоб тримати все організовано, або ресурси, які і зовсім допоможуть вам їх уникнути.
Ну і звичайно, багато інших корисних речей, покликаних спростити і полегшити важку дизайнерську роботу.
01. You Might Not Need javascript
Навіщо створювати додаткову залежність для себе, коли ви не маєте потребу в цьому? Цей сайт показує вам, як зробити речі, які ви могли б спробувати побудувати за допомогою javascript, використовуючи HTML, CSS або Sass. Приклади включають слайдер з зображеннями, перемикач перегляду, вибір кольору, форма перевірки, завантаження файлів і багато іншого.
02. HTML Email
Якщо ви коли-небудь намагалися створювати HTML-листи, то напевно знаєте, наскільки це важко зробити так, щоб все відображалася правильно в кожному поштовому клієнті. Згадайте деякі з листів, які були відкриті на вашому мобільному пристрої в останні дні - це просто жахлива робота. Однак ці шаблони електронних листів були протестовані на всіх основних поштових клієнтів, щоб уберегти вас від необхідності робити це самостійно. Якщо ви хочете спробувати безкоштовну альтернативу, спробуйте шаблони Litmus Community.
03. Yarn
Yarn - це швидкий, надійний і безпечний менеджер залежностей. Він кешируєт пакети, так що вони завантажуються тільки один раз, а так само перевіряє кожен з них перш, ніж виконати будь-яке кодування. Крім того менеджер встановлює залежності детермінованим способом (визначальним), що значно спрощує роботу.
04. Open Color
Open Color - це колірна схема, яка була перевірена для двох типів дальтонізму і була визнана придатною для використання в інтерфейсі. Є дванадцять квітів і один сірий, і всі вони передбачені як CSS, SCSS, LESS, Stylus, Adobe library, Photoshop / Illustrator зразки і палітра Sketch.
05. FramerJS Club
Відео: «Прожектор щастя! Огляд кращих інструментів для веб-дизайнера »
Погляньте на те, що різні люди змогли зробити за допомогою FramerJS в FramerJS Club, в розділі демонстрації прототипу. Багато з прикладів мають посилання на пости авторів в своїх блогах, де ті пояснюють, що і навіщо вони робили.
06. Hugo
Hugo - це швидкий і сучасний движок для статичного сайту.
Але чому ви повинні використовувати його замість Jekyll? Однією з переваг є те, що є тільки один бінарний файл, так що вам немає потреби підтримувати повноцінний стек Ruby. Він також значно швидше, ніж Jekyll при створенні вашого сайту, так що вже тільки це може бути вагомою причиною для переходу.
07. Fukol
Це вражаюче крихітна сіткова система на основі Flexbox, зменшена до всього 93 байт. Вона зменшується до єдиного стовпця в макеті, в тих місцях, де Flexbox не підтримується, і замість того, щоб використовувати точки переривання система використовує метод запиту елементів так, щоб вони росли, заповнюючи обсяг пам`яті, доступний. Пограти з інструментом для ознайомлення можна на сайті CodePen.
08. Website Downloader
Це веб-сайт риппер на основі браузера, який захоплює будь-який актив і весь вихідний код на цільовому сайті, а потім відтворює структуру папок на жорсткому диску. Всі номери перетворюються так, щоб вони вказували на відповідні локальні файли, замість онлайн-версій.
09. Hero Patterns
У міру того як популярність SVG зростає, ми починаємо бачити, як все більше ресурсів даної спрямованості виникають в інтернеті. І ось ще один! Ці відтворювані, настроюються візерунки SVG для заднього фону виглядають досить зручними, і головне - вони абсолютно безкоштовні.
10. Google Noto Fonts
Коли пристрій не має шрифт для відображення певних символів, вони відображаються у вигляді квадратиків, відомі як «тофу». Noto означає «немає більше тофу» (no more tofu). Це сімейство шрифтів з підтримкою всіх мов, яке, сподіваємося, покладе край «тофу».
