В нашей области очень важно знать, как выполнить ту или иную задачу, а также использовать творческий подход для выполнения. Однако этого не всегда достаточно. Очень большое значение также имеет выбор правильныx инструментов, с помощью которых задачу можно решить намного проще и быстрее. Ведь очень часто разработчики получают проекты «на вчера», и время — не последний факто для их выполнения. Здесь вашему вниманию предоставлены ресурсы и инструменты для облегчения различных этапов веб-проектов. 

Инструменты для создания макетов

MockFlow

MockFlow — сервис на основе Flash, который позволяет создавать вайрфреймы с простыми элементами для разработки прототипов. Он идеально подойдет как дизайнерам-одиночкам, так и командам профессиональных разработчиков интерфейсов, так как имеет весь стандартный набор инструментов для прототипирования интерфейсов.

FrameBox

Frame Box — очень простой онлайн инструмент для создания макетов сайтов. Вы очень быстро сможете создать вайрфрейм с использованием ui-элементов, изменять их размеры и даже установить ширину макета. Вы можете поделить своим макетом также в социальных сетях. Достаточно просто и эффективно.

Иконки

Archigraphs

Интересный ресурс для скачивания бесплатных иконок.

Iconizer

Здесь вы сможете найди достаточно много интересных иконок. После выбора вы также сможете изменить его фон, угол наклона, цвет. Поиск происходить по ключевым словам.

Iconmonstr

Это подходящее место для тех, кто ищет минималистичные иконки. Они могут быть загружены в формате PNG или в SVG.

One Div

Все иконки, которые отображаются на этом сайте, созданы на чистом CSS и только в одном блоке DIV HTML.

We Love Icon Fonts

Сайт, который предоставляет шрифты-иконки. Нужно просто добавить понравившийся шрифт в коллекцию, импортировать в css,  привязать к нему класс и применить в нужном месте.  Здесь вы можете увидеть пример пример.

Текстуры

Texture King

Поиск текстур достаточно удобный, так как они поделены на различные категории.

Lost and Taken

Еще одна интересная коллекция текстур. Самое замечательное  в этом сайте  - достаточно много категорий, которые охватывают многие виды текстур (например, света или листья растений), которые вы не найдете больше нигде.

10 Ravens

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

Стоковые изображения

Official PSD’s

Official PSD’s -  отличный сайт для поиска PSD-ресурсов. Коллекция действительно огромная, плюс имеются действительно хорошие учебники.

SXC

Нужное изображение можно найти без каких-либо усилий.

Freepik

Freepik - прекрасный ресурс , так как вы можете найти вектор, фотографии и PSD. Очень простой и чрезвычайно полезный.

Шрифты

Dafont

Dafont предлагает действительно большое количество шрифтов, большинство из них являются бесплатными для коммерческого и личных целей.  Здесь вы также сможете сразу просмотреть, как будет выглядеть текст. Для поиска существует много различных категорий. Также сможете найти и кириллические шрифты. У

FontSquirrel

Крайне удобный сервис для встраивания шрифтов и их автоматической конвертации  в форматы TrueType, WOFF, EOT Lite, EOT Compressed и SVG.  На сайте также имеется галерея бесплатных шрифтов.

Как встраивать шрифты при помощи Font Squirrel, вы сможете прочитать в статье.

Identifont

Identifont имеет бесплатные шрифты в раздел под названием Fontset. Но также с помощью этого ресурса вы сможете определить шрифт.

What Font is

Сервис позволяет определить, какой шрифт использовался, если загрузить на него изображение.  Также на нем есть много свободных шрифтов для загрузки.

Google Fonts

Думаем, не имеет смысла описывать данный ресурс. Но все же. С его помощью вы сможете выбрать нужные типы шрифтов и импортировать на ваш сайт.

Инструменты функциональных возможностей

Modernizr

Это библиотека JavaScript, которая направлена ​​обнаружить,  поддерживает ли браузер HTML5 и CSS3. В случае, если новые функции не поддерживаются,  для тегов HTML применяются некоторые классы.

Кто еще каким-то образом не знаком с библиотекой, можете прочесть статью на хабре о практическом применении.

RingMark

Ringmark является веб-тестом для определения возможностей  мобильных  браузеров.

Polyfills – Modernizr´s recommended

Полифилы — скрипты, которые имитируют поведение родных API в старых браузерах. Здесь вы сможете найти более 40 скриптов. Во  некоторые из них:

• JQuery-Animate-Enhanced метод $.animate() для определения CSS -переходов для Webkit, Mozilla и  Opera. Совместим с  IE6+ .
• CssSandpaper   - библиотека JavaScript, с помощью которой можно создавать достаточно интересные эффекты.
• JQuery-Anystrecht - плагин, который акцентирует внимание на моделировании css3 background-size .
• Transform.js и Transitions.js  — также очень полезные плагины, которые открывают новые возможности.

Галереи изображений

Gamma Gallery

Адаптивная галерея изображений с подписями.

Touch Touch

Touch Touch  - галерея изображений, которая стремится быть идеальным решением для мобильных Android и IOS устройств.

GridNav

Действительно хорошая фотогалерея с 10 эффектами, которые могут быть применены.

Слайдеры

12 Professional Responsive Jquery  Slider Plugins

12 адаптивных слайдеров.

TouchSlider

TouchSlider это адаптивный слайдер, который отлично подойдет для  десктопных и мобильных устройств.

Parallax Content Slider

Простой параллакс — слайдер контента с различной анимацией.

Awkward Showcase

Слайдер, в котором можно разместить текстовый контент, изображения с подписями и видео. Кроме того, он бесконечный, поскольку, пользователь перейдет к последнему изображению, он автоматически переходит к первому.

Генераторы спрайтов

Css.Spritegen

Все знают о преимуществах использования CSS-спрайтов. Автоматический генератор спрайтов может помочь нам значительно сэкономить время.  Данный генератор предоставляет возможность создать спрайт в форматах  .png ,  .jpg  плюс генерация кода  css .

Полезные сайты

Для итого, чтобы постоянно оставаться в курсе тенденций, ниже перечислены некоторые сайты, которые значительно помогут вам в этом. 

• World Wide Web Consortium (W3C)  — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. W3C разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями», англ. W3C Recommendations), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.
• WebPlatform.org  — открытый ресурс, где разработчики делятся своим опытом. На сайте вы сможете прочитать об интересных тенденциях HTML5, SVG, CSS3, анимации, видео, WebGL и многом другом.
• Html5 Please - является отличном источником, если вы хотите узнать, какие новинки поддерживают браузеры. Кроме того, здесь есть различные полифилы и откаты, которые можно использовать в том случае, если свойства не поддерживаются.

Автор: Ezequiel Lavaca

Перевод — Дежурка