Web-studio46.ru

Обучение и образование
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Сервисы для дизайнеров

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

Сервисы и библиотеки, которые сэкономят ваше время.

Kerntype

Игра, которая учит кернить — если вы в нее поиграете, вам станет физически больно, когда вы увидите неправильно расставленные буквы.

Color — A Matching Game

Игра, которая приучает чувствовать цвет. В ней шесть уровней с возрастающей сложностью.

Webfont

Отечественный сервис Webfont.ru — каталог бесплатных шрифтов для использования в вебе. Можно подключать шрифт напрямую с сайта, можно через плагин для редактора (Sublime Text 2, PHP Storm, NotePad++), можно скачать. С его же помощью удобно подгружать на сайт нестандартные шрифты. Всего около 450 шрифтов, из них около 300 поддерживают кириллицу.

Pattern Library

Библиотека качественных бесшовных паттернов.

Character Code

Своеобразный справочник самых ходовых символов — показан вместе с HTML-кодом, кодом в hex и описанием каждого символа.

Sizzlepiq

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

Flakes

Open-source фреймворк для разработки дизайна и интерфейса бизнес-приложений. Представляет собой набор CSS, javascript-библиотек и других полезностей.

Evil-Icons

Набор иконок в формате SVG от российских разработчиков. Можно легко начать работать с Rails, Sprockets, Node.js, Gulp, Grunt и CDN.

Skeleton

Для тех, кому горит — Skeleton в 400 строк кода, простой адаптивный шаблон. Можно сразу приступать к разработке.

Material Palette

Генератор палитр для тех, кому полюбился Material Design. Выбираете два цвета — и получаете полную палитру, которую можно скачать.

UXCheck

Chrome может все, даже проверить сайт на наличие проблем с юзабилити. UX Check — это расширение для браузера, которое ищет и выделяет проблемы. Отметки затем можно экспортировать.

Apple Pie

Набор CSS-инструментов для разработки продвинутых веб-интерфейсов. Упрощает работу с кодом и его организацию благодаря семантическому подходу к CSS.

Frame

Онлайн-создание макапов — загружаете, подравниваете изображения — и все готово. Полезно, если нужно быстро показать верстку сайта.

JS Nice

Анализирует JS-скрипт, загруженный вами, и превращает его в человеческий вид, переименовывая переменные и параметры (сервис использует данные, основанные на сотнях open source проектов).

Hipster Logo Generator

Если клиенты вам надоели и вы просто хотите побыть немного ленивым хипстером — генератор хипстерских логотипов для вас. Не забудьте добавить немного свэга. Согласитесь, это красиво!

Bounce.JS

Сервис и JS-библиотека для создания и редактирования CSS3-анимаций.

CSS3 Generator

CSS3-генератор подскажет, как на максимум использовать возможности CSS3. Сервис предоставляет более 10 различных CSS3-эффектов, а также сообщает, какие браузеры поддерживают или не поддерживают данные стили.

jsFiddle

«Песочница» для веб-разработчиков. Рабочая часть окна разделена на панели (CSS, HTML, JavaScipt и панель просмотра) и большое количество настроек. Проекты можно сохранять и делиться ими.

CSS Triggers

Удобная таблица с информацией о CSS-свойствах и процессах, которые происходят при изменении свойств. Сервис будет полезен тем, кто анимирует элементы в вебе.

Web Developer Checklist

Перед запуском своего проекта проверьте все пункты чек-листа. Вдруг что-то забыли.

Текст: Мария Илюшина, Елена Брызгалова.

7 бесплатных сервисов для начинающих дизайнеров

Подбор цветовых сочетаний, коллекция из двух миллионов иконок и инструмент для распознавания шрифтов.

Подобрать сочетающиеся шрифты — Fontjoy

Fontjoy генерирует наборы визуально сочетающихся шрифтов, например, для заголовка, подзаголовка и текста. Сервис берёт примеры из Google Fonts, и большую часть из них можно скачать бесплатно. Для создания подборок Fontjoy использует машинное обучение, исходный код проекта можно посмотреть на Github.

Найти бесплатные иконки — Flaticon

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

Подобрать цветовую гамму — Coolors

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

Читать еще:  Резюме дизайнера образец на английском

Распознать и скачать понравившийся шрифт — Font Squirrel

Используя Font Squirrel, можно найти нужный шрифт по его скриншоту. Программа предлагает скачать как точно совпадающий вариант, так и похожие на него.

Вдохновиться примерами чужих логотипов — Logobook

В Logobook собраны примеры готовых логотипов разных компаний. Для удобства они сгруппированы по темам и визуальным составляющим. Так, пользователь может выбрать логотипы из нужной ему сферы (например, относящиеся к здравоохранению) или содержащие определённую букву или символ.

Создать инфографику — Infogram

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

Попробовать себя в прототипировании — Figma

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

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

Автор: Кэролин Редер, директор по контенту и коммуникациям в Webydo. Перевод с оригинала: Ольга Скулкина и Ринат Шайхутдинов.

(Мы продолжаем переводить цикл статей по дизайну. Полную подборку можно найти в коллекции «Основы дизайна»)

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

Очень часто в такие списки пихают все подряд: нужное, ненужное — что угодно. Поэтому мы попросили наших дизайнеров пошевелить мозгами — и составили подборку ресурсов, которые они действительно используют в работе каждый день.

Можете дополнить наш список своими ресурсами — в комментариях 🙂

Изображения + видео

1. Showbox

Создавайте видео студийного качества прямо в браузере.

2. Coverr

Красивые, бесплатные видео для главной страницы.

3. Compressify

Один из лучших инструментов по оптимизации видеофайлов онлайн.

4. Pexels

Лучшие бесплатные стоковые фотографии (и видео), собранные в одном месте.

5. Unsplash

База красивых, качественных, бесплатных ( с ними можно делать все, что хотите) фотографий для творческого использования. Никаких нелепых стоковых фоток в офисе.

6. Death to Stock

Фотографический рай и источник вдохновения для творческих личностей, постигающих свой путь.

7. Photype

Прежде чем скачивать фото, вы можете посмотреть его в разных размерах, наложить текст и применить разные эффекты.

8. JPEGmini

Посадите ваши фотографии на диету. Можно уменьшить изображение на 80% без потери качества.

Иконки

9. Iconfinder

Небольшая команда работает над созданием базы иконок (одной из самых крупных в мире). Есть возможностью поиска.

10. The Noun Project

Ребята создают визуальный язык иконок, который сможет понять каждый. Это огромная база “глифовых” иконок, созданных сообществом дизайнеров. Есть возможность поиска.

11. Flaticon

Еще одна здоровенная коллекция бесплатных иконок, доступных в форматах SVG, PSD, PNG, EPS и BASE 64.

12. Icomoon

Библиотека иконок для самых придирчивых пиксельных идеалистов, а также генератор иконочных шрифтов.

13. Material Icons

Как вы, наверное, уже догадались, это подборка прекрасно исполненных иконок Google.

14. Icon Store

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

15. Illustrio

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

Шрифты

16. Right Font

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

17. Font Reach

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

18. Google Fonts

Галерея шрифтов от индивидуальных дизайнеров и дизайнерских команд. Можно скачать нужную гарнитуру и использовать в своем дизайне.

19. WhatFont

В буквальном смысле самый простой способ распознать шрифт — это можно сделать прямо в браузере.

20. Font Flame

Это сайт новый и достаточно простой — можно залипнуть подбирая шрифтовые пары: это как Tinder только для шрифтов.

Читать еще:  Руководитель дизайнерского отдела

21. Typekit

Изобилие шрифтов высшего качества, от Adobe.

22. Typeface

Новый тип менеджера шрифтов для Mac. Помогает подобрать идеальный шрифт за счет быстрого и четкого предпросмотра шрифтов.

23. Font Squirrel

На этом сайте можно вручную подбирать гарнитуры — все просто, понятно и бесплатно!

Цвета

24. Color Hunt

Pinterest для цветов. Множество четырехцветных палитр — можно скролить бесконечно.

25. Hello Color

Удобный, супер-простой генератор контрастных цветов по клику.

26. LOL Colors

Авторская подборка цветовых палитр от дизайнера Маккензи Чайлд.

27. Coolers

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

28. Adobe Kuler

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

29. ColorZilla

Крутой встроенный в браузер инструмент-пипетка. Позволяет анализировать цвета, использованные на странице. Работает в Chrome и Firefox.

30. Design Seeds

Ежедневная порция вдохновения для всех, кто любит цвет.

31. UI Gradients

Подобранная вручную коллекция красивых цветовых градиентов.

Вдохновение

32. Muz.li

Секретный ингредиент дизайнера: здесь, в ваших руках огромная порция вдохновения — стоит только открыть новую вкладку в Google Chrome.

33. Landingfolio

Авторская подборка лучших дизайнов лендингов.

34. Awwwards

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

35. UpLabs

Подборка лучших работ, ресурсов и бесплатных штук в мире дизайна и разработки. Каждый день!

36. Pricing Pages

Нам нравится этот сайт (и разделы про продуктовые страницы, страницы товаров и страницы чекаута тоже). Это каталог лучших страниц с ценами — и это настоящая золотая жила вдохновения.

37. User Onboarding

Невероятно детальные (и полезные) пошаговые слайдшоу, которые демонстрируют процесс онбординга на известных сайтах и в популярных приложениях.

38. Mindsparkle Mag

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

39. Eye on Design (AIGA)

Место, где можно поисследовать лучшие новые работы начинающих и опытных дизайнеров со всего мира.

40. It’s Nice That

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

41. The Great Discontent

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

10 лучших сервисов для дизайнеров и веб-дизайна

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

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

Рекомендуем: Click.ru – сервис контекстной и таргетированной рекламы для профессионалов

10 онлайн-сервисов для работы с графикой

Canva

Это бесплатный инструмент для работы с графикой, с помощью которого можно решать самые разные задачи: создание обложек для соцсетей, плакатов, логотипов, инфографики, миниатюр для YouTube, визитных карточек, резюме и многое другое. Редактор у Canva настолько простой, что справиться с задачей сможет даже новичок. Сервис предоставляет уже готовые шаблоны, наборы фонов, шрифтов, фигур, шрифтов (можно и загрузить свое).

Цена: бесплатно. Есть платные элементы, от 0,99 у.е. за шт.

Online-fotoshop.ru

По какой-то причине не можете установить себе Photoshop? Не надо переживать — есть вполне хорошая онлайн-версия этой программы. Конечно, ее функционал немного упрощен, но для решения стандартных задач вполне хватит. Здесь вы можете обрезать фото (в том числе по кругу), убрать фон, добавить рамку или стикеры, кадрировать, изменить резкость… И все это прямо в окне браузера, без регистрации и смс 🙂

InVision

Это сервис для создания прототипов веб-страниц. Он может похвастаться такими клиентами, как HBO (да-да, тот самый!), Netflix, Airbnb. В чем его преимущество – тут можно работать в команде и обмениваться файлами. Именно поэтому этот облачный сервис очень популярен среди команд разработчиков по всему миру.

Читать еще:  Гейм дизайнер в россии

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

Цена: бесплатно для одного прототипа. Три прототипа – 15 у.е. в месяц. Безлимит – от 25 у.е. в месяц.

Pixelmator

Это полнофункциональное приложение для редактирования изображений для Mac. С его помощью можно подправлять и обрабатывать изображения, рисовать, создавать сложные композиции. Доступно около 160 различных эффектов. Готовое изображение можно сохранить в популярных графических форматах, отправить по e-mail или в социальных сетях, распечатать или сохранить.

В программе можно вырезать части изображения и вставлять их в другое, рисовать разными кистями, использовать эффекты, исправлять дефекты и многое другое. Есть полный набор инструментов для ретуширования. Одним словом, это Фотошоп для Mac.

Axure

Это инструмент для тех, кому нужно разработать прототип сайта. Его особенность в том, что в нем можно создать не просто картинку, а полностью работающий прототип, интерактивный, состоящий из связанных между собой страниц. Причем для этого не нужно работать отдельно дизайнеру и верстальщику, то есть на работу уходит намного меньше времени. Интерактивный прототип позволит объективно оценить будущий сайт, его вид и возможности.

Программа работает на Mac и PC. Минус – высокая цена.

Цена: 99 у.е. в месяц. Есть бесплатная триал-версия на 30 дней.

Paletton

Онлайн-сервис, который поможет сгенерировать цветовую палитру для вашего веб-сайта, подобрав цвета по цветовым схемам.

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

Минус – инструмент работает на двух языках, английском и чешском. Но разобраться в его работе очень просто.

Gliffy

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

Цена: От 4,99 у.е. в месяц. Есть бесплатная версия.

Visme

Сервис для создания презентаций, но в первую очередь – для разработки инфографики. Инструмент включает в себя огромное количество шрифтов (около 100 бесплатных), значков и изображений. Также вы можете включать аудио и видео (важно для презентаций), и даже записывать голосовое сопровождение прямо в редакторе.

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

Png2jpg

Этот онлайн-сервис поможет вам, если вы сохранили картинку не в том разрешении. С его помощью можно «перегнать» .рng картинки (который как известно больше весят) в формат .jpg. Кроме преобразования в другой формат, сервис сжимает картинки. Можно загружать по одной или несколько. Инструмент обрабатывает одновременно файлы весом до 50 Мб. Регистрация не требуется.

Из минусов – при пакетной загрузке иногда подвисает.

TinyPNG

Онлайн-инструмент для сжатия картинок. Можно использовать в рамкам оптимизации картинок для сайта. Работает с файлами в форматах .рng и .jpg. одновременно можно обрабатывать до 20 фото, весом не больше 5 Мб.

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

Цена: базовые функции сервиса можно использовать бесплатно.

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

Ссылка на основную публикацию
Adblock
detector