20+ бесплатных ресурсов для дизайна и веб-разработки

Представляем большую подборку бесплатных ресурсов и инструментов, которые помогут вам эффективно работать над своими проектами. Изображение: behance.net. (СС0).
Представляем большую подборку бесплатных ресурсов и инструментов, которые помогут вам эффективно работать над своими проектами. Изображение: behance.net. (СС0).

Икон­ки, эле­мен­ты для созда­ния интер­фей­сов, PSD-шаб­ло­ны, JavaScript-биб­лио­те­ки и дру­гие полез­ные ресур­сы и инстру­мен­ты для дизай­не­ров и веб-раз­ра­бот­чи­ков.

Пред­став­ля­ем боль­шую под­бор­ку бес­плат­ных ресур­сов и инстру­мен­тов, кото­рые помо­гут вам эффек­тив­но рабо­тать над сво­и­ми про­ек­та­ми.

Анимированные иконки погоды

20+ бесплатных ресурсов 2015 года для дизайна и веб-разработки
Изоб­ра­же­ние: codepen.io
Набор из 6 кра­си­вых ани­ми­ро­ван­ных CSS-ико­нок, кото­рые мож­но исполь­зо­вать для изоб­ра­же­ния пого­ды.

Скачать

Векторные изометрические иконки

20+ бесплатных ресурсов 2015 года для дизайна и веб-разработки
Изоб­ра­же­ние: oxygenna.com
Набор ико­нок, выпол­нен­ных в изо­мет­ри­че­ской про­ек­ции и изоб­ра­жа­ю­щих раз­лич­ные устрой­ства.

Oxygenna

Набор иконок для Android

20+ бесплатных ресурсов 2015 года для дизайна и веб-разработки
Изоб­ра­же­ние: iconshock.com
Боль­шая кол­лек­ция век­тор­ных ико­нок для Android, сре­ди кото­рых есть бес­плат­ные набо­ры для пер­со­наль­но­го исполь­зо­ва­ния.

Набор иконок

Шаблон брошюры для организации

20+ бесплатных ресурсов 2015 года для дизайна и веб-разработки
Изоб­ра­же­ние: behance.net/gallery/23773605
С помо­щью шаб­ло­на в PSD-фор­ма­те вы може­те лег­ко создать кра­си­вую и лако­нич­ную бро­шю­ру, рас­ска­зы­ва­ю­щую о вашей орга­ни­за­ции.

Шаблон брошюры

Шаблон CV для дизайнеров

20+ бесплатных ресурсов 2015 года для дизайна и веб-разработки
Изоб­ра­же­ние: www.behance.net/gallery/24416019
PSD- и AI-шаб­лон, кото­рый иде­аль­но под­хо­дит для созда­ния резю­ме для дизай­не­ров.

Шаблон CV

Набор иконок для детей

20+ бесплатных ресурсов 2015 года для дизайна и веб-разработки
Изоб­ра­же­ние: designshock.com
Боль­шой набор милых ико­нок, сде­лан­ных таким обра­зом, что их лег­ко мож­но редак­ти­ро­вать.

Набор иконок для детей

Бесплатный PSD UI Kit

Бесплатный PSD UI Kit
Изоб­ра­же­ние: lucidsitedesigns.com
Бес­плат­ный набор эле­мен­тов с мини­ма­ли­стич­ным дизай­ном для созда­ния поль­зо­ва­тель­ских интер­фей­сов.

Бесплатный PSD UI Kit

UI Kit с плоским дизайном

UI Kit с плоским дизайном
Изоб­ра­же­ние: heybundle.com
Набор для созда­ния поль­зо­ва­тель­ско­го интер­фей­са, сде­лан­ный для Photoshop и пол­но­стью редак­ти­ру­е­мый. Мож­но исполь­зо­вать как для пер­со­наль­ных, так и для ком­мер­че­ских про­ек­тов.

UI Kit с плоским дизайном

Простые формы для Sketch

Простые формы для Sketch
Изоб­ра­же­ние: sketchappsources.com
Базо­вый набор про­стых форм для созда­ния веб-сай­та в Sketch.

Простые формы для Sketch

PSD-шаблон для Landing page

PSD-шаблон для Landing page
Изоб­ра­же­ние: dribbble.com
PSD-шаб­лон для созда­ния целе­вой стра­ни­цы, кото­рый хоро­шо подой­дет для обра­зо­ва­тель­ных про­ек­тов в сфе­ре тех­но­ло­гий и про­грам­ми­ро­ва­ния.

PSD-шаблон

Шаблон для создания email-клиента

Шаблон для создания email-клиента
Изоб­ра­же­ние: epicpxls.com
Про­стой шаб­лон для Photoshop, содер­жа­щий все необ­хо­ди­мые эле­мен­ты для созда­ния email-кли­ен­та.

Шаблон email-клиента

PSD-шаблон для одностраничного сайта

PSD-шаблон для одностраничного сайта
Изоб­ра­же­ние: frittt.com
PSD-шаб­лон для созда­ния мини­ма­ли­стич­но­го и эле­гант­но­го одно­стра­нич­но­го сай­та любо­го типа: landing page, сайт орга­ни­за­ции или твор­че­ское порт­фо­лио.

PSD-шаблон одностраничного сайта

Шаблон одностраничного сайта в HTML5

Шаблон одностраничного сайта в HTML5
Изоб­ра­же­ние: templated.co/retrospect
Кра­си­вый шаб­лон, иде­аль­но под­хо­дя­щий для созда­ния одно­стра­нич­но­го сай­та стар­та­па или неболь­шо­го биз­не­са.

Шаблон одностраничного сайта в HTML5

CSS-эффекты для скроллинга страниц

CSS-эффекты для скроллинга страниц
Изоб­ра­же­ние: codyhouse.co
Набор CSS-эффек­тов для скрол­лин­га несколь­ких стра­ниц.

CSS-эффекты

Кнопка с эффектом при наведении

Кнопка с эффектом при наведении
Изоб­ра­же­ние: codepen.io

Кнопка с эффектом

Анимированное меню

Анимированное меню
Изоб­ра­же­ние: codepen.io
Снип­пет, кото­рый гене­ри­ру­ет ани­ми­ро­ван­ное меню и кото­рый мож­но лег­ко редак­ти­ро­вать, бла­го­да­ря CSS и JavaScript коду.

Анимированное меню

Анимированная кнопка поиска

Анимированная кнопка поиска
Изоб­ра­же­ние: codepen.io
Про­стая и эффект­ная кноп­ка поис­ка, кото­рая пре­вра­ща­ет­ся в поле для вво­да при наве­де­нии на нее кур­со­ра.

Анимированная кнопка

debugCSS : (X)HTML debugging tool

debugCSS : (X)HTML debugging tool
Изоб­ра­же­ние: yahoo.github.io
Инстру­мент, кото­рый помо­жет вам про­ве­рить HTML на пред­мет потен­ци­аль­но нера­бо­та­ю­ще­го кода.

debugCSS

A11Y: проверка доступности веб-сайта

A11Y: проверка доступности веб-сайта
Изоб­ра­же­ние: addyosmani.github.io/a11y
Онлайн-инстру­мент, с помо­щью кото­ро­го мож­но про­ве­рить сайт на доступ­ность для людей с огра­ни­чен­ны­ми воз­мож­но­стя­ми.

Проверка доступности веб-сайта

Meat!: платформа для коллаборации веб-разработчиков

Meat!: платформа для коллаборации веб-разработчиков
Изоб­ра­же­ние: getmeat.io
Плат­фор­ма для уста­нов­ки на ваш сер­вер, с помо­щью кото­рой вы смо­же­те сов­мест­но рабо­тать над веб-про­ек­та­ми.

Платформа для коллаборации

Генератор кода

Генератор кода
Изоб­ра­же­ние: webcodetools.com
Гене­ра­тор кода для CSS3, HTML5, microdata, open graph и Twitter, кото­рый вы впо­след­ствии може­те исполь­зо­вать на сво­ем веб-сай­те.

Генератор кода

Scally: CSS-фреймворк на Sass

Scally: CSS-фреймворк на Sass
Изоб­ра­же­ние: github.com/chris-pearce/scally
CSS-фрейм­ворк на Sass, BEM и OOCSS, хоро­шо под­хо­дя­щий для быст­ро­го созда­ния поль­зо­ва­тель­ских интер­фей­сов.

CSS-фреймворк

Чат для командной работы

Чат для командной работы
Изоб­ра­же­ние: sdelements.github.io/lets-chat
При­ло­же­ние для обме­на сооб­ще­ни­я­ми, создан­ное с помо­щью Node.js и MongoDB, иде­аль­но подой­дет для неболь­шой коман­ды, кото­рой нуж­но общать­ся, рабо­тая над про­ек­та­ми.

Чат для командной работы

Создание программного обеспечения

Создание программного обеспечения
Изоб­ра­же­ние: bazel.io
Инстру­мент от Google, кото­рый помо­га­ет сде­лать про­цесс раз­ра­бот­ки быст­рым и надеж­ным.

Создание программного обеспечения

Dynamics.js: библиотека JavaScript

Dynamics.js: библиотека JavaScript
Изоб­ра­же­ние: bypeople.com/javascript-physics-based-animations-library
Неболь­шая JavaScript-биб­лио­те­ка, кото­рая поз­во­ля­ет делать ани­ма­цию, осно­вы­ва­ясь на мате­ма­ти­че­ских функ­ци­ях и физи­ке.

Библиотека JavaScript

Vibrant.js: выделение цветов из изображения

Vibrant.js: выделение цветов из изображения
Изоб­ра­же­ние: jariz.github.io/vibrant.js
JavaScript-биб­лио­те­ка, кото­рая выде­ля­ет из загру­жен­но­го изоб­ра­же­ния пре­об­ла­да­ю­щие на нем цве­та.

Выделение цветов из изображения

Hummer.js: добавление тач-жестов

Hummer.js: добавление тач-жестов
Изоб­ра­же­ние: hammerjs.github.io
С помо­щью этой JavaScript-биб­лио­те­ки мож­но доба­вить тач-жесты для любых DOM-эле­мен­тов.

Добавление тач-жестов

Dokker.js: создание JavaScript-документации

Dokker.js: создание JavaScript-документации
Изоб­ра­же­ние: dokkerjs.com
JavaScript-биб­лио­те­ка для созда­ния доку­мен­та­ции.

JavaScript-документации