Более 200 ресурсов для дизайнеров и front-end-разработчиков

Ниже представлена подборка инструментов для дизайнеров и front-end-разработчиков. Мы настоятельно рекомендуем вам просмотреть их все. Надеемся, что вы найдете для себя что-то полезное.

Поиск

• StackOverflow: Вопросы по программированию;
• UX Stack Exchange: Вопросы, связанные с пользовательским опытом;
• Graphic Design Stack Exchange: Вопросы по графическому дизайну;
• MDN: Mozilla Developer Network (полезная документация);
• Creative Commons: Поиск изображений, не защищенных авторским правом.

Онлайн-сообщества

• Hacker News: Стартап-культура, новости и тренды;
• Designer News: Дизайн-культура, новости и тренды;
• Product Hunt: Стартап-культура, новости и тренды;
• Sidebar: Дизайн-культура, новости и тренды;
• Dribbble: Дизайн-культура и тренды;
• Behance: Дизайн-культура и тренды;
• /r/web_design: Сабреддит о веб-дизайне.

Интервью

• Dorm Room Tycoon: Интервью с дизайнерами;
• Designation Blog: Блог учебной программы Designation;
• Humble Pied: Короткие видеоинтервью;
• InvisionApp Blog: Блог InvisionApp.

Адаптивность

• Responsive Patterns: Набор шаблонов и модулей для адаптивной разработки;
• Responsive PX: Настройка вьюпорта;
• Lettering.js: Адаптивная типографика;
• Адаптивные изображения;
• Адаптивные таблицы;
• Преобразование PX в EM;
• Библиотека шаблонов Media Queries;
• Наиболее полное руководство по адаптивному веб-дизайну;
• This Is Responsive: Библиотека шаблонов;
• Ink: Создание адаптивных интерфейсов;
• Responsinator: Просмотр вьюпорта на разных устройствах.

Front-end-разработка

• Grid: Простыми словами о front-end-разработке;
• Code Guide: Стандарты для HTML/CSS;
• Как поспеть за развитием front-end-технологий;

Front-end-фреймворки:

• HTML5 Boilerplate;
• Blueprint;
• ZURB Foundation;
• 99Lime;
• Skeleton;
• Centurion;
• Сравнение front-end-фреймворков.

Javascript-фреймворки:

• AngularJS;
• EmberJS;
• BatmanJS;
• Backbone;
• SproutCore;
• YUI.
• Semantic UI.

Работа в команде

• Scratchpad;
• Firepad;
• Snaggy;
• Bounce;
• DropCanvas;
• WeTransfer;
• SquadEdit;
• CodePen;
• JSFiddle;
• Editr;
• Snipt;
• Chop;
• Screencast-o-matic;
• Beam It;
• Copybar;
• JS Bin;
• Dablet;
• Floobits;
• Stypi;
• Paste;
• LiveWeave;
• VolaFile;
• Talky;
• ShareFest;
• Appear;
• CoderPad;
• Criticue;
• RedPen.

Аналитика

• Google Analytics;
• Piwik;
• MixPanel;
• GoSquared;
• Flurry;
• Chartbeat;
• Parsely.

Хостинг-платформы

• CloudCannon: Бесплатный хостинг статических веб-сайтов;
• Pancake: Бесплатный статических веб-сайтов;
• Backlift: Бесплатный статических веб-сайтов;
• Site44: Бесплатный статических веб-сайтов;
• DivShot: Бесплатный статических веб-сайтов;
• Meteor: Фреймворк для приложений JavaScript;
• Firebase: Фреймворк для приложений JavaScript;
• Forge: Хостинг статических веб-сайтов.

Инструменты для front-end-разработки

• Громадный список ресурсов по front-end-разработке;
• Введение в CSS3-переходы;
• Bounce.js: Инструмент для создания CSS3-анимаций;
• WOW: Библиотека анимаций CSS3;
• CSS-палитра;
• CSS3-генератор;
• CSS3;
• CSS генератор градиентов;
• CSS генератор кнопок;
• LoremPixel: Изображения-заполнители;
• Lipsum: Тексты-заполнители;
• WordMark;
• LayerStyle;
• border-image-generator;
• iCheck: Настройка флажков и переключателей для jQuery;
• SVGeneration;
• Grumpicon: Создание резервных PNG для SVG-файлов;
• Памятки по CSS3-анимации;
• animate.css;
• Pure: Небольшие адаптивные CSS-модули;
• Tridiv: 3D CSS;
• ToDoMVC: Ресурсы JavaScript;
• SuperheroJS: Библиотека JS;
• Unheap: Плагины jQuery;
• Генератор случайных пользователей;
• Аватарки для пользовательского интерфейса;
• Имена для пользовательского интерфейса;
• WhatTheme: Поиск похожих сайтов;
• Тестирование браузера IE;
• Статья о front-end и руководства по интерфейсам.

Шаблоны и библиотеки шаблонов

• Subtle Patterns: Визуальные шаблоны;
• First Time UX: Обзор новых возможностей взаимодействия с пользователями;
• Библиотека дизайнерских решений по взаимодействию с пользователем;
• Subjective-C: Инновационные iOS-интерфейсы;
• UI Cloud: Крупнейшая база данных пользовательских интерфейсов;
• Android Patterns: Шаблоны для Android;
• Android UI Patterns: Шаблоны пользовательских интерфейсов для Android;
• Android niceties: Скриншоты самых красивых приложений на Android;
• Android App Patterns: Шаблоны приложений для Android;
• UX Archive: Архив для iOS;
• Pttrns: Набор шаблонов;
• Mobile-Patterns: Набор шаблонов;
• Inspired-UI: Набор шаблонов для iOS;
• Capptivate: Набор шаблонов.

Нативный мобильный дизайн

• Руководство по дизайну для Android;
• Руководство по дизайну для устройств Apple;
• Эмулятор Android для браузера;
• Генератор цветов для Android-элементов;
• Шаблон иконки для Google Play;
• Android Asset Studio: Различные генераторы;
• Шаблоны для скетчей;
• Иконки Android;
• Советы по дизайну для Android.
• Teehan+Lax: Photoshop-шаблон интерфейса для iOS;
• Что нужно, а что не нужно делать при работе с iOS;
• PlaceIt – сервис, позволяющий подобрать реальное изображение интересующего вас девайса и вставить на место экрана устройства изображение собственного приложения/сервиса.

Прототипирование

Веб-разработка (HTML, CSS, JS). JS-фреймворки:

• FramerJS;
• jQuery Mobile;
• Codiqa;
• Ratchet;
• Hammer JS;
• Origami для Xcode;
• Avocado от IDEO для Origami;
• Adobe After Effects;

Drag-and-drop-инструменты:

• Proto.io;
• Flinto;
• Marvel;
• InvisionApp;
• Pop;
• Fluid UI.

Типографика

• Выбор шрифта: практическое руководство;
• Практическая типографика: руководство Мэттью Баттерика;
• Instacalc: Перевод из em в px;
• TypeScale;
• Thinking with Type: Ресурс о типографике;
• WhatTheFont: Поиск шрифтов;
• MyFonts;
• Typewolf: Рекомендации по шрифтам;
• Type Finder: Инструмент для поиска подходящих шрифтов;
• Typekit;
• Cloud Typography;
• Adobe Edge Web Fonts;
• Шрифты Google.

Цвет

• Цветовая палитра;
• Paletton;
• Kuler: Цветовое колесо;
• Colour Lovers: Цветовые тренды;
• ColorHexa: Энциклопедия цвета;
• BrandColors.

Оформление

• Style Tiles: Плиточные шаблоны;
• Webstiles: Плиточные шаблоны;
• PNG Gauntlet: Сжатие изображений;
• Pic Resize: Форматирование изображений;
• Logo Lounge;
• Logopond;
• Мировые бренды;
• I <3 wireframes;
• Wireframe Showcase.

Ссылки и памятки

• Все памятки по API;
• Памятка по jQuery;
• Статья о 100 потрясающих инструментах для разработчика;
• Learn Layout: Обучение оформлению лейаутов с помощью HTML/CSS (просто и наглядно).

Оценка и рефакторинг кода

• Оценка HTML-разметки (W3);
• HTML Tidy: Оценка и очистка HTML-файлов;
• Оценка CSS (W3);
• Очистка CSS;
• Сжатие CSS;
• Procssor: Реорганизация CSS;
• JavaScript Compressor: Сжатие JavaScript.

Другие HTML/CSS-компоненты

• Ссылки по email-дизайну от Mailchimp;
• Beautiful Email Newsletters: Примеры качественно оформенных писем;
• Campaign Monitor: Полное руководство по CSS;
• Статья SitePoint о разметке HTML5-форм.

Обучениие (онлайн-курсы)

• Treehouse;
• Codeschool;
• Learnable;
• Udacity;
• Freecodecamp;
• Lynda;
• Codecademy;
• Skillfeed;
• SitePoint;
• Gibbon;
• Бесплатные книги по программированию.

Руководства

• CSS Tricks;
• CodePlayer;
• Design Tutsplus;
• Code Tutsplus;
• Pineapple.io;
• Photoshop Secrets;
• Scotch;
• Little Big Details;
• Design Principles FTW;
• Medium: Дизайн и UX;
• Code Visually;
• DesignInstruct;
• Bento;
• Cody;
• ZURB Quips: Разнообразные Q&A.

«Песочницы»

• ZURB Playground: Репозиторий для технических экспериментов;
• CoDrops;
• CSS Deck;
• UIBox: Пополняемая библиотека компонентов HTML/CSS/JS.
• Six UX;
• UI Parade;
• media queries;
• lovely ui: Коллекция элементов дизайна для мобильных;
• Awwwards: Конкурс дизайнерских проектов;
• FWA: Конкурсные дизайнерские проекты;
• Give n go;
• The Expressive Web.

Иконки

• Favicon Generator: Генератор иконок сайтов;
• Favicon Cheat Sheet: Памятка об иконках веб-сайтов.

Drag-and-Drop-решения и конструкторы

• WebFlow;
• Bricks;
• Easel;
• HTML5 Up.

Иконки

• IconFinder;
• IconArchive;
• IconMonstr;
• The Noun Project;
• IcoMoon;
• Fontello;
• CopyPasteCharacter;
• FontAwesome;
• Glyphicons;
• Icons Guide;
• Testico;
• FlatIcons;
• Flat Icon;
• Pictos;
• Symbolset.

Базы фотографий

• Unsplash;
• Compfight;
• Morgue File;
• IM Creator;
• Public Domain;
• PicJumbo;
• Getty Images;
• Think Stock;
• Death to the Stock Photo.

Другие источники

• Designmodo;
• Despreneur;
• Sketch App Resources;
• Konigi Tools;
• SmashingMagazine;
• Freebbble: Дизайнерские решения с Dribbble;
• 365psd: Бесплатные файлы в формате PSD;
• Design Freebies;
• Photoshoplr: Плагины, скрипты и расширения для Photoshop;
• FreePik;
• Flaticon;
• 52 Weeks of UX;
• Hack Design.

P.S. Еще одна свежая подборка в нашем блоге: Более 350 бесплатных инструментов для разработчиков.

ссылка на оригинал статьи http://habrahabr.ru/post/272387/