7 главных бесплатных ресурсов для дизайнера


Содержание

100+ сервисов для веб-дизайнера, о которых Вы могли даже не подозревать

По правде говоря, независимо от того, насколько Вы являетесь творческим и знающим человеком в веб-разработке, Вы всё равно не сможете создать самый лучший дизайн страницы, если не имеете под рукой необходимые инструменты и ресурсы. Конечно, Вы можете покупать услуги на различных сервисах, но что если есть бесплатные аналоги, которые практически ничем не хуже их платных «собратьев»? Вы могли даже не знать о существовании данных сервисов, которые являются абсолютно бесплатными.

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

Итак, вот подборка из 5-ти групп сервисов для веб-дизайнера:

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

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

Следующие сайты являются одними из самых лучших в данной области:

  • 1 Freebbble — если Вам нужно еще больше бесплатностей для создания Вашего дизайна, тогда загляните на данный сервис. Здесь Вы найдете очень много великолепных дизайнерских решений, которые можно скачать абсолютно бесплатно.
  • 2 AllFreeStock — классный сервис с бесплатными фото, mockup-ами, видео, звуковыми эффектами, а также иконками. Да и сам сайт очень прост в использовании.
  • 3 Dribbble — введите в поиске «freebie» и Вы найдете список всех бесплатностей, которые есть на этом сервисе и сможете скачать каждую из них.
  • 4 Graphic Burger — дизайн в высоком качестве.
  • 5 Pixel Buddha — сайт для профессиональных дизайнеров. Есть платные материалы.
  • 6 Freebiesbug — если Вы хотите использовать при разработке дизайна самые новые PSD шаблоны и новинки, тогда обязательно посетите данный сайт.
  • 7 365 PSD — большая коллекция PSD файлов.
  • 8 Dbf — данный сервис объединяет лучшие бесплатности сервиса Dribble и сервиса Behance.
  • 9 Marvel — это бесплатные материалы от дизайнеров, которые имеют хорошую репутацию у своих коллег и клиентов.
  • 10 UI Space — материалы ручной работы.
  • 11 Free Section of Pixeden — здесь находятся премиум-материалы.
  • 12 Free Section of Creative Market — новая бесплатность каждый понедельник.
  • 13 Teehan+Lax — это лучший ресурс с mockup-ом для iPhone 6 и iPad, а также графического интерфейса iOS8.
  • 14 Tech&All — большая коллекция PSD шаблонов, которые Вы можете использовать без какой-либо дополнительной ответственности.
  • 15 Freepik — бесплатные графические ресурсы.
  • 16 Tethr — самый потрясающий дизайн для iOS.

19 онлайн-палитр

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

  • 1 Material Palette — полезный инструмент для генерации и экспорта цвета для Material Design.
  • 2 New Flat UI Color Picker — этот сервис просто обязателен к использованию, если Вы создаете дизайны в современном Flat стиле. Цвета сделают Ваш сайт более привлекательными, несмотря на саму плоскую Flat концепцию дизайна.
  • 3 Flat UI Colors — еще один сервис, который должен присутствовать в арсенале дизайнера работающего с Flat.
  • 4 Coolors — классный сервис для дизайнеров, который позволяет получить не только великолепные цветовые схемы для сайта, а также сделать это очень быстро.
  • 5 Skala Color — это бесплатное ПО для подбора и определения цвета на OS X.
  • 6 Couleurs — еще одно приложение для пользователей Mac для работы с цветом на экране монитора.
  • 7 Material UI Colors — большой спектр цвета на Ваш выбор.
  • 8 Colorful Gradients — большая коллекция готовых градиентов, которые Вы можете использовать в своих проектах.
  • 9 Adaptive Backgrounds — плагин jquery который автоматически понимает доминирующий фоновый цвет изображения и делает фоновый блок с таким же цветом.
  • 10 Brand Colors — здесь Вы найдете цвета, которые используют самые известные бренды.
  • 11 Paletton — данный сервис позволит очень легко подобрать цветовую гамму для Вашего сайта.
  • 12 0 to 255 — поиск и изменение цветовых схем происходит намного легче с использованием данного сервиса.
  • 13 Colour Lovers — это небольшое сообщества где дизайнеры делятся своими наработками. Вы также можете создать свою цветовую схему или узор и разместить для общего обозрения свое творение.
  • 14 Adobe Color CC — цветовые схемы созданные в сообществе Kuler.
  • 15 Bootflat — если Вы работаете с сайтами во Flat дизайне, тогда Вы просто обязаны попробовать данный сервис.
  • 16 Hex Colorrrs -преобразование из формата HEX в RGB.
  • 17 Get UI Colors — с помощью данного сервиса Вы получаете потрясающие цвета для интерфейса пользователя.
  • 18 Coleure — отличный инструмент для выбора цвета.
  • 19 Palette for Chrome — данный плагин для браузера Google Chrome позволяет создавать цветовые схемы. А изображения можно брать прямо из изображений.

17 сайтов для поиска вдохновения

Чаще всего самая большая проблема любого проекта это начать его. Возможно в Вашей голове плавают какие-либо идеи. Но как их все взять и реализовать? Да еще так, чтобы всё смотрелось действительно современно и стильно? Так почему же не взять некоторые концепции, а также идеи на лучших дизайнерских сервисах в интернете! С помощью данных сервисов Вы сможете самостоятельно создать действительно потрясающий и современный дизайн чего бы то ни было:

  • 1 FLTDSGN — Вы работаете преимущественно с сайтами у которых дизайн в стиле Flat? Тогда данный ресурс даст Вам очень много информации благодаря которой у Вас будут происходить идеи постоянно.
  • 2 Site Inspire — создаете сайты под заказ и уже не хватает вдохновения? Тогда просто загляните на данный сайт.
  • 3 UI Cloud — это одна из самых больших баз, где собраны дизайн для пользовательских интерфейсов. Данный сервис поможет Вам создать очень качественный UI (пользовательский интерфейс) дизайн для своего проекта и обеспечить легкость в использовании сайтом или веб-приложением.
  • 4 Moodboard — сервис дает возможность создать свой проект, который будет состоять из определенных изображений в одной стилистике, цветов и других материалов.
  • 5 Crayon — если Вы работаете над дизайном страницы с каким-либо товаром или услугой, то этот сервис поможет Вам в поиске идеи в данной области.
  • 6 Land-Book — создание лендинга занятие творческое. Посетите данный ресурс, чтобы узнать больше о креативных блоках и элементах, которые можно размезстить на своем лендинге.
  • 7 Dribbble — для опытных дизайнеров данный ресурс будет очень знаком, ну а для начинающих он окажется крайне полезным. Учитесь дизайну у профессиональных дизайнеров с помощью данного ресурса.
  • 8 Behance — также очень знаменитый ресурс, где профессиональные дизайнеры выкладывают свои работы.
  • 9 Pttrns — данный сервис полезен для тех, кто очень увлекается дизайном сайтов для мобильных устройств. Здесь Вы найдете большое количество различных примеров, которые сделаны профессиональными дизайнерами.
  • 10 Flat UI Design — простыми словами это «доска вдохновения».
  • 11 Awwwards — данный проект постоянно награждает самые креативные, самые минималистичные и самые красивые сайты. Поэтому советую посетить и посмотреть что сейчас наиболее актуально в мире веб-дизайна.
  • 12 The Starter Kit — полезный инструмент для веб-дизайнеров и веб-разработчиков.
  • 13 One Page Love — если Вы занимаетесь созданием одностраничных сайтов, то данный сервис Вы обязательно должны взять на вооружение. Потому что благодаря ему Вы будете создавать более дружелюбные сайты, которые будут нравится пользователям и будут максимально удобны при использовании.
  • 14 UI Parade — дизайн элементов пользовательского интерфейса и новые идеи после посещения данного ресурса Вам обеспечены.
  • 15 The Best Designs — лучшие разработки в сфере веб-дизайна.
  • 16 Agile Designers — если Вы являетесь дизайнером или разработчиком, то это ресурс, который Вы обязаны проверить.
  • 17 Niice — это поисковик «со вкусом». Потому что он позволяет искать информацию сразу на нескольких популярных сайтах посвященных дизайну. Вводить запрос, естественно, необходимо латинскими буквами.

38 бесплатных фотостоков

Изображения всегда были одним из важнейших элементов дизайна. К сожалению, на многих сайтах используются некачественные изображения, которые имеют плохое разрешение либо просто не уникальны. Чтобы найти действительно хорошее изображение, необходимо заплатить за него немаленькую плату. Но существуют ресурсы, которые позволяют найти использовать потрясающие изображения, не беспокоясь об авторском праве. То есть Вы можете свободно брать эти изображения, изменять и размещать на собственном сайте.

Вот небольшой список сайтов, которые Вы можете использовать для поиска качественных изображений совершенно бесплатно:

  • 1 Stock Up — один из лучших фотостоков, который предлагает на выбор большой спектр различных изображений.
  • 2 Pexels — лучшие фотографии заката, автомобилей, здания, людей, улиц города, природы и так далее.
  • 3 All the Free Stock — этот сервис предоставляет не только изображения, а также иконки и видео. Все изображения со свободной лицензией (Creative Commons Zero license).
  • 4 Unsplash — многим может быть знаком данный сервис. Здесь каждые 10 дней можно скачать 10 новых изображений.
  • 5 Startup Stock Photos — коллекция изображений посвященных стартапам.
  • 6 Jay Mantri — потрясающие изображения в высоком разрешении для Ваших нужд.
  • 7 Moveast — это фотографии одного португальского путешественника, который делает качественные снимки и позволяет использовать их абсолютно бесплатно.
  • 8 Stokpic — если все вышеупомянутые сайты при поиске не дали тот результат, который Вам нужен, тогда поищите необходимую фотографию здесь.
  • 9 Kaboompics — большой выбор потрясающих фотографий.
  • 10 Function — данный сайт предлагает целые наборы изображений.
  • 11 MMT — потрясающие фото интернета, которые сделаны автором Jeffrey Betts.
  • 12 Travel Coffee Book — данная коллекция фотографий была сделана при путешествии по всему миру.
  • 13 Designers Pics — здесь Вы сможете легко найти изображения как для Вашего личного использования, так и для бизнеса.
  • 14 Death to the Stock Photo — после подписки, данный сервис будет присылать Вам абсолютно бесплатные изображения каждый месяц.
  • 15 Foodie’s Feed — работаете над сайтами с тематикой питания? Тогда посетите данный сайт. Потому что там находится очень много изображений еды в высоком качестве. Так и хочется пустить слюну при просмотре �� .
  • 16 Mazwai — большой выбор видео для фона.
  • 17 Jéshoots — если Вы хотите воспользоваться самыми новыми и современными изображениями прямо сейчас — тогда этот сервис самое подходящее место для поиска таких изображений.
  • 18 Super Famous — данные фотографии были сделаны голландским дизайнером Folkert Gorter.
  • 19 Picography — этот сайт дает Вам возможность выбрать из большого количества изображений с высоким разрешением.
  • 20 Splashbase — коллекция фото и видео материалов для Ваших проектов.
  • 21 Pixabay — еще один сервис с изображениями в высоком разрешении.
  • 22 Little Visuals — подписавшись, Вы будете получать 7 изображений в высоком разрешении каждую неделю. То есть каждый день новое изображение!
  • 23 Splitshire — бесплатные «аппетитные» фотографии.
  • 24 New Old Stock — если Вам нужны старинные фотографии из государственных архивов, тогда Вам отлично подойдет данный сайт.
  • 25 Picjumbo — это еще один сайт, где Вы можете найти и скачать фотографии абсолютно бесплатно.
  • 26 Life of Pix — не все изображения данного сайта полностью бесплатны, но все они в очень высоком разрешении.
  • 27 Gratisography — если Вы не можете найти подходящее изображение с высоким разрешением, тогда данный сайт может Вам в этом помочь.
  • 28 Getrefe — еще больше беспталных изображений для Вашего дизайна.
  • 29 IM Free — этот сайт может похвастаться действительно большим выбором изображений.
  • 30 Cupcake — этот сайт является настоящим раем для фотографов, созданный Jonas Nilsson Lee.
  • 31 The Pattern Library — если Вы ищете паттерны для своего проекта, тогда данный сайт сможет Вам в этом помочь.
  • 32 Public Domain Archive — данный сервис предлагает 100% беслптаные изображения.
  • 33 ISO Republic — этот фотосток также предлагает Вам на выбор изображения в высоком разрешении.
  • 34 Paul Jarvis — на этом сайтке Вы найдете не только статьи, посвященные дизайну, а также коллекции из очень качественных изображений.
  • 35 Lock & Stock Photos — коллекция качественных фото.
  • 36 Raumrot — большой спектр изображений в высоком качестве.
  • 37 Bucketlistly — изображения путешествий.
  • 38 Magdeleine — каждый день новое изображение в высоком качестве.

14 сервисов с бесплатными иконками

Как Вы уже знаете, иконки являются отличным способом привлечь внимание посетителя Вашего сайта. Значит они должны стать частью Вашего арсенала при разработке дизайна. Конечно, Вы можете создать свои собственные иконки, но ведь на это уйдет очень много времени. Так почему же просто не воспользоваться специальными сайтами, которые предлагают большой выбор иконок для Вашего сайта абсолютно бесплатно:

  • 1 Fontello — сайт генератор иконок.
  • 2 Flat Icon — поиск по 16000+ иконкам в векторе. Здесь Вы сможете найти самые лучшие иконки для своих проектов.
  • 3 Material Design Icons — более 750 иконок от Google.
  • 4 Font Awesome — без сомнений, это лучший иконочный шрифт, который очень легко может быть подключен на любом сайте и имеет массу плюсов.
  • 5 Glyphsearc — поиск по нескольким базам с иконками.
  • 6 MakeAppIcon — с помощью нескольких кликов Вы можете создать иконки для своего приложения.
  • 7 Endless Icons — если Вы работаете с дизайном в стиле Flat, тогда посетите обязательно данный ресурс.
  • 8 Ico Moon — генератор иконок, который имеет более чем 4000 векторных иконок.
  • 9 The Noun Project — на данном сайте находятся тысячи различных иконок созданные разными дизайнерами.
  • 10 Perfect Icons — сервис для создания социальных иконок.
  • 11 Icon Finder — это бесплатный раздел данного сайта. Обязательно изучите его, возможно некоторые иконки Вам пригодятся.
  • 12 Doodle Set — бесплатный набор иконок в стиле Doodle.
  • 13 Flat Set — бесплатный набор икононок в стиле Flat.
  • 14 Icon Sweets — 60 бесплатных векторных иконок для Photoshop, которые сделают Ваш сайт еще более привлекательным.

Вывод

Используя вышеупомянутые ресурсы Вы с легкостью сможете создать действительно привлекательный и креативный дизайн для своих веб-проектов. Поэтому чтобы не потерять данный список сервисов — добавьте данную страницу в закладки своего браузера с помощью сочетания клавиш CTRL+D.

64 сайта для дизайнеров, которые нужно добавить в закладки

Ищете сайты, которые помогут справиться с первыми заказами и прокачать новые навыки?

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

12 сайтов для вдохновения

  • https://www.pinterest.ru. Чаще всего это первый ресурс, на который идут дизайнеры самых разных специализаций в поисках вдохновения. Самое удобная функция на Pinterest — это возможность создавать свои подборки.
  • https://www.behance.net. Дизайнеры традиционно публикуют свое портфолио Behance, поэтому сайт можно смело назвать самой большой коллекцией удачных примеров в любой сфере дизайна. Следите за новыми проектами, подпишитесь на дизайнеров и студии, на работы которых вам бы хотелось равняться.
  • https://www.awwwards.com. Ресурс посвящен самым лучшим работам в веб-дизайне, на Awwwards можно найти подборки лучших сайтов за день, неделю, месяц или год. Вдохновляйтесь лучшими!
  • https://dribbble.com. Платформа, на которой дизайнеры размещают свои портфолио. Чтобы добавить свои работы, нужно получить приглашение от участника Dribbble.
  • https://www.designspiration.net. На сайте вы встретите сотни примеров хорошего дизайна для вдохновения.
  • https://synapticstimuli.com. Галерея самых разнообразных проектов. Развивает чувство прекрасного.
  • http://www.designmadeingermany.de/sites-we-like/. Можно найти авторские подборки красивых сайтов разнообразных стилей. Кстати, в подборку можно предложить и свой сайт.
  • https://designshack.net/category/articles/critique-articles. Сайт для дизайнеров, на котором не хвалят, а критикуют. Новички наверняка узнают для себя много полезного.
  • https://siiimple.com. Поклонникам минимализма и тем, кто хочет научиться создавать дизайн в этом стиле. На сайте просто огромная подборка примеров дизайна в минималистичном стиле, которая постоянно обновляется.
  • https://onepagelove.com. Отличный ресурс с подборкой одностраничных сайтов. Всем, кто занимается лендингами, смотреть обязательно.
  • https://mediaqueri.es. Довольно удачный проект об адаптивном дизайне. Особенно пригодится тем, у кого еще не было опыта в создании таких макетов.
  • http://bookcoverarchive.com. Сайт пригодится не только тем, кто занимается оформлением обложек книг, но и тем, кто постоянно сталкивается с необходимостью подобрать хороший шрифт.
Цукерберг рекомендует:  C++ - помогите переписать с языка python на C++

Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.

14 медиа о веб-дизайне

  • http://webdesignerwall.com. Сайт посвящен не только созданию дизайна, но и затрагивает темы разработки, верстки, анимации и продвижения.
  • http://houseofbuttons.tumblr.com. Здесь можно найти десятки интересных примеров оформления кнопок на сайте (многие с готовой анимацией).
  • https://www.webdesignerdepot.com. Еще один информационный сайт для дизайнеров, затрагивающий самые разнообразные сферы, начиная с приемов оформления интерфейса и заканчивая организацией рабочего процесса.
  • https://webdesignledger.com. Неплохой ресурс о веб-дизайне, на котором можно найти много различных подборок удачных решений, новые тренды, узнать больше о типографике и элементах дизайна сайтов.
  • https://designyoutrust.com. Ежедневная подборка новостей, событий и тенденций в сфере дизайна.
  • https://www.creativebloq.com/computer-arts-magazine. Международный интернет-журнал о цифровом искусстве.
  • https://say-hi.me. Один из лучших русскоязычных ресурсов, рассказывающий о творчестве для креативных людей.
  • https://designpub.ru. Рассказывают о событиях, типографике, дизайн-процессах, иллюстрации и саморазвитии.
  • https://infogra.ru. Отличный русскоязычный ресурс для начинающих и практикующих дизайнеров, на котором размещены море статей, десятки уроков, обзоры и рецензии на книги, курсы и программы. А еще на сайте регулярно появляются подборки кириллических шрифтов.
  • https://bureau.ru/bb/soviet/. Рубрика «Советы» на сайте дизайн-бюро Артема Горбунова ответит на множество вопросов новичков, это — настоящий кладезь практических знаний.
  • http://onjee.ru. Прекрасный сайт для дизайнеров, которые только начали делать первые шаги в этой сфере.
  • https://blog.shaihalov.ru. Этот ресурс заинтересует тех, кто решил специализироваться на UX и продуктовом дизайне.
  • http://deadsign.ru. Подойдет тем, кто не знает английского, но хочет быть в курсе последних новостей в веб-дизайне.
  • https://www.vandelaydesign.com. Это целое собрание хороших статей и отличных подборок по веб-дизайну.

11 сайтов о логотипах

  • https://www.logodesignlove.com. На сайте собрано огромное количество логотипов, но интереснее то, что каждому посвящена небольшая заметка. Изучая сайт, вы не только найдете неординарные решения и красивые примеры, но и узнаете, как автор того или иного логотипа пришел к своей идее.
  • https://logopond.com. Сотни примеров логотипов, как удачных, так и не очень, в вашем распоряжении. Плюс ресурса в том, что вариантов на нем очень много, а еще их можно по-разному отсортировать.
  • https://www.logaster.com. Сервис позволяет очень быстро генерировать логотипы. Да, уникальный логотип с его помощью не сделать, но сайт очень выручает, когда у клиента еще нет логотипа, а в шапку сайта нужно что-то поставить.
  • https://logo.squarespace.com/. Аналогичный сервис для создания логотипов небольшого размера. Вы вводите название компании и попадаете в редактор, в котором к логотипу можно добавить иконку, а заодно посмотреть, как все это смотрится на визитке, мониторе и футболке.
  • http://logofaves.com. В подборках логотипов на этом ресурсе можно найти не только идеи, но и контакты дизайнера, а также ссылку на его Behance-профиль. Это очень удобно в случае, когда вам нужно не только посмотреть логотип, но и найти исполнителя.
  • https://www.hipsterlogogenerator.com. Еще один генератор, позволяющий создать простой, но достаточно эффектный логотип за пару минут.
  • http://logotypes101.com. Подборка бесплатных векторных логотипов. Если у вас есть время и вы готовы его потратить, то сможете найти неплохой вариант.
  • https://logobaker.ru. Сайт для тех, кто разрабатывает логотипы. Здесь есть неплохая подборка, а также возможность попросить совета или получить фидбек.
  • https://www.logofury.com. В этом сервисе от вас требуется только ввести название компании, выбрать категорию и добавить слоган (при желании), все остальное генератор делает за вас, мгновенно создавая десятки вариантов.
  • https://www.logomoose.com. Очень солидная подборка логотипов со всего мира. Что интересно, есть действительно много хороших вариантов, которые можно использовать для вдохновения.
  • http://www.thelogomix.com. И снова подборка логотипов, но на этот раз с расширенной сортировкой: можно выбрать логотипы по определенному цвету или тематике. Когда нужно что-то быстро придумать, очень выручает.

8 полезных сайтов про иконки

  • https://www.iconfinder.com. Один из самых популярных сайтов для дизайнеров с огромным количеством иконок на все случаи жизни. Иконки делятся на платные и бесплатные, а скачать их можно как в PNG, так и в SVG-формате.
  • https://thenounproject.com. Очень приятный ресурс с большим выбором, легким дизайном и красивыми иконками. Для того, чтобы начать пользоваться, нужно лишь зарегистрироваться.
  • https://roundicons.com. Здесь можно найти очень необычные решения (обратите внимание на подборку doodle-иконок). Что самое приятное, небольшие наборы доступны для бесплатного скачивания.
  • https://iconmonstr.com. Очень похожий на уже рассмотренные нами ресурсы — множество иконок, удобный поиск и несколько форматов для скачивания (SVG, EPS, PSD, PNG).
  • http://fontello.com. Если вам нужно сгенерировать шрифтовые элементы из иконок, то без этого сайта не обойтись.
  • https://www.flaticon.com. Еще один сайт с подборкой плоских векторных иконок для любых задач. Самое сложное — выбрать из огромного количества вариантов.
  • http://endlessicons.com. Ресурс с большим выбором иконок. Особенно удобно то, что искать можно как по нужной иконке, так и по тематическому набору или тегам.
  • https://icomoon.io. Подборка из сотен разнообразных иконок, из минусов — все хорошее начинается после оплаты подписки или покупки определенного набора.

6 сайтов для дизайнеров о шрифтах и типографике

  • https://ilovetypography.com. Один из лучших ресурсов для тех, кто небезразличен к буквам. На этом сайте вы найдете массу полезных и просто интересных заметок о типографике и том, что с ней связано.
  • https://fonts.google.com. Подборка бесплатных шрифтов от Google, которой чаще всего пользуются дизайнеры. Самое полезное — возможность посмотреть, с какими шрифтами чаще всего сочетается выбранный вами вариант.
  • https://www.paratype.ru. Отличный сайт с хорошей подборкой шрифтов. Из приятного — можно без особого труда подобрать даже красивый русский шрифт, из печального — большинство шрифтов придется приобретать (но на сайте часто проводятся распродажи).
  • https://fontshop.com. Магазин шрифтов, где можно подобрать удачное решение для своего проекта. Но особенно интересен сайт даже не количеством самих шрифтов, а примерами их применения, которые позволяют лучше оценить, насколько выбранный шрифт подходит для вашей задачи.
  • https://www.dafont.com. Огромная подборка шрифтов для самых разных задач, а еще — удобный интерфейс и много новинок.
  • https://typejournal.ru. Полезный интернет-журнал о типографике и шрифтах.

6 сайтов для подбора цветовой палитры

  • https://www.materialpalette.com. Сервис для подбора палитры работает очень просто: выбираете два основных цвета, и сайт предлагает вам расширенную цветовую схему.
  • http://www.flatuicolorpicker.com. Множество очень красивых оттенков, разбитых по категориям: красные, фиолетовые, синие, зеленые, желтые, оранжевые и серые.
  • https://coolors.co. Онлайн-генератор цветовых схем для сайта создает подборку из пяти оттенков, каждый из которых вы можете изменить по своему усмотрению. Чтобы эффективнее пользоваться сервисом, советуем не пропускать инструкцию в самом начале.
  • https://colorfulgradients.tumblr.com. Очень хорошая подборка градиентов на любой вкус.
  • http://paletton.com. Один из самых удобных генераторов цветовых палитр. Его ценят за широкие возможности и гибкие настройки.
  • https://color.adobe.com/ru/create/color-wheel/. Неплохой и функциональный инструмент для создания палитры от Adobe. Обязательно попробуйте!

7 сайтов про UX

  • https://ux-journal.ru. Сравнительно новый журнал, в котором можно найти очень много полезного о самом востребованном направлении в веб-дизайне.
  • https://www.dtelepathy.com/blog. Если вы уже начали изучать UX, то посоветуем вам блог команды из Сан-Диего.
  • https://usabilla.com/blog. Еще один сайт про качественный UX и проектирование интерфейсов.
  • http://uxchecklist.github.io. Суперполезный ресурс представляет из себя список действий по UX, с помощью которого можно пройти весь процесс от начала до конца и не забыть ни о чем.
  • https://uxmovement.com. Сильно поможет в случае, когда во главу угла ставится проблема конверсии сайта.
  • https://uxmastery.com. Этот сайт целиком и полностью посвящен UX и всем его тонкостям, сложностям и особенностям.
  • http://uxmag.com. Ресурс поможет всегда быть в курсе последних новостей из мира UX, узнавать первым о новых методиках, исследованиях и мероприятиях.

Заключение

Сайтов про дизайн существует очень много, но прочитать все статьи и запомнить все советы не под силу ни одному человеку. Именно поэтому так важно фильтровать поступающую информацию — стараясь осилить все и сразу, вы наберете поверхностных знаний, но есть риск, что специалистом вы так и не станете. Лучше всего выбрать структурный подход и образование у лидеров рынка. Курс «Веб-дизайн с 0 до PRO» рассчитан на новичков в веб-дизайне. Шаг за шагом, вместе с опытными и практикующими преподавателями, вы узнаете все о дизайне и станете востребованным специалистом.

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

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

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

Стоковые фотографии

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

Если вы нашли себя в этом описании, попробуйте эти сайты с бесплатными (или дешевыми) стоковыми фотографиями, которые на самом деле классные, совсем непохожие на те, которыми пестрили деловые брошюры 90-х.

Pexels

Все фото на Pexels можно использовать бесплатно в личных и коммерческих нуждах в рамках лицензии Creative Commons Zero (CC0). Сейчас там 30 000+ стоковых фото на сайте, и каждый месяц коллекция пополняется примерно 300 новыми фото.

Unsplash

Upsplash изначально развивался как побочный проект команды Crew. Он буквально спас компанию, когда она была всего в нескольких неделях от гибели. Сейчас это отдельный ресурс для дизайнера, который ежедневно пополняется новыми качественными фотографиями. Если интересно, ознакомьтесь с вдохновляющей историей Unsplash здесь.

Stock Up

Сайт Stock Up предлагает 15 000+ проиндексированных фото из более, чем 30 разных стоковых хранилищ, таких как Life of Pix и Splitshire. Большая часть фото распространяется под лицензией Creative Commons Zero (CC0), но всегда перед использованием нужно проверять конкретно каждое фото на предмет ограничений.

Coverr

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

Skuawk Public Domain Photos

Если вы ищите высокохудожественные изображения, вы найдете их на Skuwak Public Domain Photos. Эта коллекция более ограничена по сравнению с другими фотосайтами, но если вы ищете качественную эстетику, этот сайт – скрытая жемчужина.

Death to Stock

Death to Stock – это простой ресурс стоковых фото, где вы найдете “пачки” фотографий, каждая на определенную тему. Зарегистрируйтесь и получайте коллекции фото прямо на свою почту. Вы можете оформить и премиум-подписку, получив доступ ко всем 1500+ фото и видео на сайте.

Stocksnap

Команда Snappa создала StockSnap, и результатом стали тысячи фотографий, которые можно использовать бесплатно под лицензий Creative Commons Zero (CC0). Можно смотреть популярные запросы поиска на сайте, сортировать фотографии по дате, популярности, просмотрам, скачиваниям и т.д.

Pixabay

Качество фотографий на Pixabay немного страдает, но зато выбор куда больший – у вас есть около миллиона фотографий. Все изображения и видеоролики на этом сайте распространяются под лицензией Creative Commons Zero (CC0), так что вы можете бесплатно их скачивать, редактировать, распространять и использовать без каких-либо затрат. Кроме того, на этом сайте есть и иллюстрации в векторном формате.

Burst

Burst запустился не так давно, и на нем уже более 1000 красивых бесплатных изображений. Этот ресурс существует специально, чтобы помочь в создании более визуально привлекательных сайтов, продуктов и маркетинговых кампаний. Большая часть фото, которые вы найдете на этом ресурсе, были сделаны внутренней командой, и подходят под разные бизнес-темы. На этом ресурсе даже есть глубокие анализы разных кейсов, в помощь вашему собственному бизнесу.

Шрифты

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


Type Anything

Type Anything – это простой инструмент, который помогает создать отличные комбинации шрифтов. Фильтруйте семейства шрифтов, и как только найдете тот, который вам понравится, поэкспериментируйте с настройками, включая: размер, вес, высоту строки, непрозрачность, межбуквенный интервал, капитализацию и т.д. Введите свой контент и вперед!

Google Fonts

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

Font Fit

Самой крутой фишкой Font Fit является то, что он позволяет быстро посмотреть, как существующий сайт будет выглядеть в том или ином шрифте. Так можно очень быстро сравнить визуально разные шрифты, понять, как они влияют на общую эстетику сайта. Кроме того, это отличное развлечение – взять какой-то крутой сайт вроде Apple, и “переодеть” его в какой-нибудь Comic Sans. ��

Typewolf

Создатель Typewolf, Jeremiah Shoaf, как-то сказал: “Видеть примеры шрифтов на тексте вроде “Съешь еще этих замечательных французских булок” – не особо полезно, если мы подбираем шрифты под проект для веба – а вот видеть, как конкретный шрифт ведет себя на конкретном сайте – это уже куда лучше”. Это один из лучших шрифтовых ресурсов в вебе. Просматривайте коллекции рекомендованных шрифтов, чтобы найти идеальный для своего проекта.

IconStore

В IconStore вы найдете более 200 наборов иконок, созданных лучшими дизайнерами в своей нише. Тут есть все, от иконок с пиццей, до персонажей Гарри Поттера и наземных ориентиров. Скачивайте файлы в PNG или SVG; каждый набор иконок можно использовать как в личных, так и в коммерческих нуждах без какой-либо атрибуции.

The Stocks

The Stocks содержит постоянно растущую коллекцию иконок, которые можно скачивать в разных форматах, цветах и размерах. Выбирайте из сотен иконок, скачивайте в форматах PNG, SVG и XML. Сайт также содержит фото, видео, шрифты, макеты и цвета. Это своего рода универсальный магазин для всех нужд дизайнера.

Swifticons

На сайте Swifticons вы найдете более 2000 высококачественных иконок в 6 редактируемых стилях: контурный, с заливкой, цветной, “jolly”, “flat” и “pattern”. Весь пакет иконок можно скачать дешевле, чем за $100 или же бесплатно скачать пакет activities (152 иконки).

Illustrio

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

Палитры цветов

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

Color Hunt

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

Web Gradients

Web Gradients – это коллекция из почти 200 фоновых градиентов, созданных командой itmeo. Вы можете использовать каждый фон для любой части сайта. Тут представлена .png версия каждого градиента, вместе с кроссбраузерным CSS3-кодом, который легко копировать. Бонус: тут есть даже рекомендованные пакеты для Sketch и Photoshop.

Coolors

Coolors – это супербыстрый генератор цветовых схем. Здесь есть тысячи готовых схем (каждая состоит из 5 цветов). Или же вы можете сгенерировать свою собственную в считанные минуты. Перейдя на страничку “generate”, нажмите пробел, чтобы начать новую схему, затем настройте параметры каждого оттенка отдельно.

LOL Colors

Нужно признаться, что нам просто нравится название LOL Colors. Этот сайт располагает хорошей коллекцией цветовых палитр для вдохновения. Если вы начинаете с нуля, и не совсем уверены, что хотели бы получить, тут вы можете просмотреть различные вариации сочетания оттенков.

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

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Helen

Переводчик. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

В помощь дизайнеру: 80 бесплатных ресурсов

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

Создать свой проект с нуля может не каждый. Но каждый может в разы облегчить себе жизнь, узнав о некоторых инструментах и «примочках», которыми мы поделимся в этой статье. Тем более что все представленные ресурсы бесплатны (ну или почти все).

Материал разбит на тематические блоки, чтобы вам проще было ориентироваться и выбирать нужный сервис. В общем, читайте, берите и пользуйтесь. ;)

Смотри, любуйся, вдохновляйся

https://dribbble.com/ – популярный среди дизайнеров веб-портал. Дизайнеры со всего мира выкладывают свои работы и делятся опытом. Сайт – это социальная сеть для креативных людей: смотрите и оценивайте чужие работы как зарегистрированный пользователь. Делиться своими работами можно после специального приглашения (invite) от друга-дизайнера. Или показав свои работы другому пользователю с имеющимся приглашением.

https://www.behance.net/ – сетевая платформа для творческих людей. Behance предназначен не только для дизайнеров и иллюстраторов, но и для художников, фотографов, видеографов, архитекторов и многих других людей, чья профессия связана с креативом. Большинство работ представлены как полноценные презентации своих навыков и талантов.

http://revision.ru/ – сетевой выставочный зал в основном с работами русскоязычных дизайнеров.

https://onepagelove.com/ – площадка с большим разнообразием одностраничных сайтов, созданных дизайнерами и разработчиками с разных уголков планеты.

https://land-book.com/ – еще один сайт-портфолио только одностраничных сайтов.

https://www.awwwards.com/ – авторитетная премия в мире веб-дизайна и разработки сайтов. На сайте представлены лучшие работы студий со всего света.

Цукерберг рекомендует:  PHP библиотека для извлечения цветов

http://www.webdesign-inspiration.com/ – название сайта говорит само за себя. Ресурс, созданный для вдохновения сайтами. Удобная фильтрация работ по цвету, типу и тематикам.

http://www.fltdsgn.com/ – вы любитель сайтов в стиле FLAT? Тогда этот ресурс для вас.

http://www.siteinspire.com/ – тут собраны красивые и вдохновляющие сайты. Сам ресурс регулярно обновляется и пополняется новыми работами.

https://www.thebestdesigns.com/ – еще один сайт с вдохновляющими работами в сфере веб-дизайна.

https://www.uplabs.com/material/ – для любителей Material Design полезно заглянуть сюда. Вдохновение не заставит себя ждать.

https://ru.pinterest.com/ – как же обойтись без Мировой доски вдохновения. Здесь можно найти вдохновение на что угодно и кого угодно.

https://pttrns.com/ – сайт с шаблонами пользовательского интерфейса на любой вкус.

http://www.gomoodboard.com/ – сайт для создания собственной доски вдохновения.

Бесплатные фотостоки

Фотографии, картинки и видео часто нужны в работе. Где брать, если нет возможности сделать свои качественные фотографии? На фотостоках. В сети есть платные и бесплатные. Мы перечислили для вас отличные бесплатные фотобанки, которые проверили и рекомендуем к использованию.

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

https://www.pexels.com/ – огромное количество красивых и бесплатных фотографий на самые разные темы со свободной лицензией. Есть очень удобный фильтр по цветовой гамме фотографии.

https://unsplash.com/ – больше 200 000 бесплатных фотографий со свободной лицензией. Фотографии разбиты на коллекции от достойных фотографов со всего света.

https://pixabay.com/ – бесплатные изображения высокого качества, так же есть иллюстрации и видео (для коммерческих целей).

https://www.firestock.ru/ – бесплатный фотосток с огромным количеством категорий. Тип лицензии Editorial (для личного пользования).

http://isorepublic.com/ – бесплатные изображения для творческих людей. Каждый день добавляется огромное количество новых фотографий. Можно использовать для коммерческих целей.

http://jeshoots.com/ – более 800 000 бесплатных фотографий высокого разрешения. И тут есть лицензия для коммерческого использования.

http://cupcake.nilssonlee.se/ – вдохновляющие изображения от талантливого фотографа Nilsson Lee, которые можно ставить на сайт и в рекламу. Коммерчески пригодные фото.

https://magdeleine.co – на сайте представлены потрясающие фотографии разных тематик. Доступен поиск по преобладающему цвету. Ну и лицензии на все случаи жизни.

http://nos.twnsnd.co/ – винтажные фотографии из публичных архивов. Все круто, но только для личного и некоммерческого использования.

https://picjumbo.com/ – более 3 000 изображений высокого качества, библиотека активно пополняется. Разрешено использование фотографий в коммерческих целях, но запрещена перепродажа.

https://www.freestockimages.ru/photo/ – бесплатный фотобанк лицензионных фотографий высокого разрешения. Допускается использование в коммерческих целях.

https://www.sitebuilderreport.com/stock-up/ – более 18 000 доступных фотографий. Stock Up объединяет множество различных бесплатных веб-сайтов с фотографиями, поэтому лицензия на каждую фотографию будет отличаться.

http://kaboompics.com/gallery – популярный бесплатный источник качественных фотографий. Фотографии с Kaboompics появляются на сайтах, таких как BBC, CNN, Forbes, Cosmopolitan, Yahoo и т. д. Но важно проверять лицензии на фотографии, они могут быть разными.

https://www.foodiesfeed.com/ – бесплатный фотобанк с изображениями еды в высоком разрешении. Допускается использование в коммерческих целях.

https://www.splitshire.com/ – фото и иллюстрации для бесплатного использования.

http://www.lifeofpix.com/ – еще один бесплатный фотосток с фотографиями высокого качества и его вполне можно использовать для поиска фото в коммерческих целях.

http://www.gratisography.com/ – сайт с креативными снимками от фотографа Райана Макгуаера. Фотосток пополняется еженедельно и также подходит для коммерческого использования.

Бесплатные видео

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

http://www.clipcanvas.com/free-footage/ – на сайте большое количество платных и бесплатных видеороликов высокого качества.

http://www.lifeofvids.com/ – бесплатные видеоклипы высокого разрешения с лицензией ROYALTEE-FREE. Разрешено использование в коммерческих целях.

http://www.wedistill.io/ – бесплатные профессиональные видео для творчества. Можно использовать в рекламных целях.

https://www.videezy.com/ – площадка профессиональных и начинающих видеооператоров, чьи работы находятся в открытом доступе. Разрешено использование в коммерческих целях.

http://www.free-hd-footage.com/ – бесплатные видео отличного качества. Также имеются такие категории как 3D, 4k, 2k. Видео банк небольшой, но категории самые разнообразные.

https://www.videvo.net/ – бесплатные видеоролики для любого проекта. Для скачивания требуется регистрация. Видео разрешено использовать в коммерческих целях.

http://mitchmartinez.com/free-4k-red-epic-stock-footage/ – бесплатные 4к-видео от профессионального фотографа и видеографа Mitch Martinez. Его видео разрешается использовать только в личных целях, не в коммерческих, но есть возможность договориться с автором о расширенной лицензии.

https://pixabay.com/ru/videos/ – бесплатные видео отличного качества. Разрешено коммерческое использование.

http://www.coverr.co/ – сервис для подбора фонового видео на сайт. Видео разрешены для использования в коммерческих целях.

http://mazwai.com/ – большое количество спокойных и живописных видео про природу. Лицензия позволяет использовать в коммерческих целях.

Бесплатные векторные иллюстрации, иконки, фоны и psd

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

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

http://ru.365psd.com/ – на сайте огромное количество коллекций бесплатных векторных изображений, эмблем и PSD-исходников.

http://www.freepik.com/ – графические ресурсы для всех. Поможет вам найти бесплатную векторную графику, иллюстрации, иконки, PSD и фотографии для использования на сайтах, баннерах, презентациях, журналах. На сайте есть в том числе и платные премиум-иллюстрации.

https://www.flaticon.com/ – более 400 000 иконок на самые разные темы. Есть встроенный редактор иконок по цвету, размеру. В довесок есть и платные качественные иконки.

https://icons8.com/ – 55 000 иконок в стиле Flat. Иконки формата png бесплатны, за формат svg нужно заплатить.

http://dbfreebies.co/ – на сайте отобраны лучшие бесплатные работы с behance и dribbble. Среди них дизайнерские шрифты, иконки, PSD-шаблоны и мокапы, которые используются для презентаций своего дизайна на пустом макете продукта.

https://www.toptal.com/designers/subtlepatterns/ – большое количество аккуратных фонов для сайта. Есть возможность посмотреть на фон «в работе» перед скачиванием.

http://www.heropatterns.com/ – небольшой сайт с паттернами и фонами в svg формате от дизайнера Стива Сёргера. Есть удобный редактор цвета, формата и размера узора. Все паттерны Стив предоставляет бесплатно.

https://freevectormaps.com/ – сайт полностью посвященный векторным картам в разных стилях и техниках. От больших карт Мира до карт мелких островов.

https://freebiesbug.com/ – бесплатные иллюстрации, шрифты и PSD от популярных дизайнеров.

http://www.fribbble.com/ – бесплатные PSD-файлы и другие бесплатные дизайнерские ресурсы от Dribbble.

https://www.mockupworld.co/ – источник бесплатных фотореалистичных мокапов для презентаций, кейсов.

http://fontello.com/ – большое количество иконок хорошего качества в формате svg, есть возможность генерации шрифта из иконок.

http://perfecticons.com/ – генератор иконок социальных сетей онлайн.

https://thenounproject.com/ – на сайте почти миллион дизайнерских иконок формата png и svg. Есть редактор иконок перед скачиванием.

http://www.endlessicons.com/ – бесплатная библиотека плоских и контурных иконок.

http://pixelmap.amcharts.com/ – генератор карты в аккуратные пиксели. Получившееся изображение можно скачать в формате svg, html, png.


https://www.iconfinder.com/free_icons/ – бесплатные коллекции иконок в разных стилях.

Подбор цветовой схемы и палитры

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

https://color.adobe.com/ – один из самых популярных помощников по подбору цветовой схемы. Есть возможность сохранять свои палитры и смотреть палитры других дизайнеров.

https://colorscheme.ru/ – удобный инструмент для веб-дизайнера. Помогает не только определиться с цветом сайта, но и посмотреть выбранное сочетание на сайте-примере.

http://bootflat.github.io/color-picker.html – подборка контрастных цветов для проектов в стиле Flat.

https://uigradients.com/ – на сайте собраны самые модные и приятные градиенты для ваших проектов.

https://dribbble.com/colors/9cf4df?percent=30 – у сайта dribbble.com так же есть фильтр по цвету работ. Можно выбрать подходящий цвет из палитры и посмотреть сочетания в работе популярных дизайнеров.

http://discovercolor.ru/ – удобный сайт с приятными фотографиями, разбитыми на цветовые палитры.

https://brandcolors.net/ – самая большая коллекция официальных цветов популярных мировых брендов.

https://chrome.google.com/webstore/detail/eye-dropper/ – удобный определитель цвета для браузера Google Chrome (перед использованием требуется установка).

http://www.0to255.com/ – сайт для подбора более светлых и темных оттенков одного цвета. Очень удобен для создания градиентов и hover-эффектов.

https://www.materialpalette.com/ – генерация палитр в стиле material design.

https://coolors.co/ – супербыстрый и бесплатный генератор цветовых схем.

Бесплатная типографика

Шрифты – неотъемлемая часть каждого проекта. Без текста нет рекламы и посыла. Создание своего шрифта требует немало усилий, опыта и времени. Не каждому титулованному дизайнеру это под силу. Именно поэтому существует немалое количество качественных бесплатных шрифтов и их сочетаний, которые придумали талантливые люди и любезно ими делятся.

https://www.canva.com/font-combinations/ – бесплатный поиск шрифтовых комбинаций для вашего дизайна.

http://fishtext.ru/ – генератор рыботекста для незаконченных шаблонов или других ваших проектов.

http://allfont.ru/cyrillic/ – большая коллекция кириллических шрифтов (не все лицензии подходят для коммерческого использования).

http://typespiration.com/ – бесплатный подбор вдохновляющих шрифтовых комбинаций. Увы, не все шрифты доступны в кириллице.

Hover-эффекты, анимация и живые фоны

Возможно, у кого-то возник вопрос: зачем здесь информация для front-end разработчиков? Но выбрать правильный hover-эффект или анимацию – задача дизайнера. Знания html и css еще ни одному веб-дизайнеру не навредили и быть в курсе новинок в стезе верстки его прямая обязанность. В этом помогут приведенные ниже сервисы и не обязательно изобретать велосипед. Вдохновляйтесь тем, что уже есть, и применяйте это в своей работе.

https://tympanus.net/ – это блог веб-дизайна и разработки. Можно найти достойные примеры hover-эффектов и анимации для вашего сайта.

Выделим несколько особенно полезных ссылок с этого ресурса:

https://tympanus.net/Development/HoverEffectIdeas/ – вдохновляющие коллекции эффектов при наведении на фотографию.

https://codepen.io/search/pens?q=canvas&limit=all&type=type-pens – бесплатные живые фоны для вашего сайта от профессиональных разработчиков и любителей (работы в основном для вдохновения, не для коммерческого использования).

Конечно, сервисы – это очень полезно. Но помните, что не стоит полностью копировать бесплатные шаблоны макетов PSD, вставляя стоковые изображения, даже если это позволяет лицензия. Проект должен быть заточен под конкретные цели, а дизайн – помогать понять содержание и совершить целевое действие.

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

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

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

Что читать, смотреть и слушать о веб-дизайне

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

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

Для вашего удобства мы свели все ресурсы в таблицы, разбитые по категориям.

Сайты и блоги

Рассылки

Сообщества

Подкасты и видео

Телеграм-каналы

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

Вторая тема — управление творческими процессами. Sketch, Slack, Avocode, Invision и десятки похожих компаний вступили в борьбу за эффективность дизайнера, поэтому обязательно читайте их блоги, смотрите и слушайте выступления.

Внутренний Getpocket. Обычно интересные статьи, которые мне попадаются в сети, я собираю здесь. Получается ежедневный журнал, который удобно читать офлайн. В нем — десятки сайтов на русском и сотни на английском языках: блоги, заметки, журналы. Информация очень размазывается и ее тяжело найти в одном месте. Этими статьями я делюсь внутри CreativePeople с другими дизайнерами, чтобы мы могли обсуждать их и синхронизировать свои знания.

Отмечу несколько фаворитов, которые попадают в подборку достаточно часто.

Medium. Поиск по ключевым словам выдает интересные и свежие статьи. Отдельно стоит выделить два блога: Muzli и Nathan Curtis.

Sketchapp.me. Отличный ресурс, где коллеги собирают статьи по работе sketch. Все чаще публикуют статьи не про управление программой, а про эффективность вообще, про полезные фичи и ускорение дизайнера.

Vc.ru. Следим за новостями и переводами статей по UIX.

Блог Invision. Пишут про то, как добиваться эффективности в проектах, когда требуется коллаборация разных специалистов. Собственно, на этом принципе строится весь их продукт.

Дизайн-кабак. Неплохие подборки в виде еженедельных дайджестов.

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

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

Вы когда-нибудь задумывались , где дизайнеры находят материалы под свои нужды? Вот список крупных сайтов, на которых вы можете найти .psd- файлы , элементы пользовательского интерфейса(UI) , макеты и многое другое. Самое приятное, что все они бесплатны и доступны каждому дизайнеру.

Добавьте в закладки данный пост, чтобы в будущем возвращаться к этому списку за вдохновением ;)

1. Fribbble

Иконки для вашего сайта, iPhone -мокапы или PSD -элементы д ля лендингов — все это есть на Fribbble .

2. Behance project template

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

3. psddd.co

Ещё один крупный сайт с .PSD-макетами.

4. COLOURlovers

Никак не получается подобрать идеально сочетание цветов для нового проекта? Воспользуйтесь интересным инструментом для этой цели!

5. CG textures

Бесплатные стоковые изображения — всегда на вес золота.

6. Subtle Patterns

Более 400 бесплатных паттернов для ваших новых проектов уже доступны на Subtle.

7. Webydo

Интересный стартап, который позволяет создать сайт без знаний кодинга!

8. GuideGuide

Всевозможные сетки и направляющие.

9. No more banding

Градиенты в Photoshop не всегда выглядят идеально. Давайте же воспользуемся этой незаменимой вещицей для своих последующих работ ;)

10. Gridzzly

Отлиный инструмент для создания своей собственной бумаги-шаблона для скетчей и набросков.

11. Makeappicon

Мощнейший инструмент для создания иконок под iOS и Android из любого графического файла.

12. Perfect Effects 3

Ресурс исключительно для фотографов. С Perfect Effects 3 у каждого профессионала появляется возможность быстро добавить распространенные эффекты к своим работам.

13. Cut & Slice

Отличный инструмент для работы со слоями под различные платформы.

14. Layrs Control 2

Расширение для Photoshop, состоящее из семи полезных скриптов.

15. Hexy

Бывает довольно проблематично захватывать hex-значения цветов в Photoshop. Данный инструмент делает эту задачу проще.

16. WhatTheFont!

Огромная база шрифтов для дизайнеров.

17. Typewolf

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

18. Size Marks

Size Marks — отличный скрипт для Photoshop.

19. Velositey Version 2

Плагин, позволяющий быстро нарисовать дизайн в Photoshop, в несколько кликов.

20. FontAwesomePS

Легендарные FontAwesome внутри вашего Photoshop!

7 ресурсов для дизайнера, которыми вы точно будете пользоваться

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

Сoolors

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

Gr >Прекрасный ресурс для расчета сетки. Будет полезен как веб, так и графическим дизайнерам. Выставляем общую ширину макета, количество колонок, отступы по краям, и между колонками, и получаем ширину колонки. С его помощью можно рассчитать не только сетку, но и размеры любых элементов, с одинаковой шириной. Допустим нам известно количество столбцов в таблице, и общая ширина. Нужно только задать отступы по краям и между столбцами равными нулю, и мы получим ширину столбцов. Результаты можно скачать в AI, PSD и PNG.

Ultimate google font pairings

Огромная коллекция профессионально подобранных шрифтовых пар. Все шрифты доступны в Google Font, и их можно скачать прямо с сайта, либо скопировать HTML код. Особенно удобно для тех, кто пока еще не совсем ладит со шрифтами, и подбором.

Undraw

Большая коллекция бесплатных векторных иллюстраций, выполненных в модной стилистике. Прекрасно подойдут для лэндингов или продуктовых сайтов. Есть поиск по изображениям и возможность изменить цветовую гамму. Результат можно скачать в SVG или PNG. Коллекция изображений постоянно пополняется.

Flaticon

Думаю, этот ресурс знаком всем, но я не могу его не упомянуть. Очень большое количество иконок, на самые разные темы. Есть поиск, а также фильтр по стилю и цвету. Все иконки доступны в SVG, EPS, PSD и PNG разных размеров.

Freepik

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

Uifaces

Большая коллекция лиц, которые можно использовать как заглушки для отзывов, карточек и т.п в ваших макетах. Есть фильтр по возрасту, полу, цвету волос и эмоциям. Так же есть плагины для Sketch и XD. Что бы скачать изображение, кликаем ПКМ по картинке, нажимаем «Открыть картинку в новой вкладке», и сохраняем изображение.

На этом все! Если у вас на примете есть еще какие-то полезные дизайнерские ресурсы , которым вы пользуетесь, не стесняйтесь делится ими в комментариях под статьей.

Цукерберг рекомендует:  Объектно-ориентированное программирование для чайников - курсы по основам ООП

Обзор инструментов и приложений для веб-дизайна: базовые программы, работа с цветом и другими элементами

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

Базовые программы

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

Семейство Adobe

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

Adobe Photoshop — базовое приложение, которое предназначено как для обработки изображений, так и для создания дизайна в целом. Так как Photoshop до сих пор является самым популярным продуктом среди дизайнеров, верстальщиков и разработчиков (в основном от дизайнеров требуется предоставить макет в формате .psd), владение этим инструментом важно для полноценной работы над проектом.

Из недостатков программы выделяют следующие:

  1. Сложность в освоении. Photoshop имеет достаточно сложный интерфейс со специальными инструментами, поэтому дизайнеру нужно потратить достаточно большое количество времени на обучение.
  2. Не предназначен для проектирования интерфейсов напрямую. Несмотря на универсальность программы, многие функции для создания дизайна достаточно трудоемки, в отличие от более современных аналогов.
  3. Программа платная. Дизайнерам придется платить разработчикам приложения один раз в год.

Adobe Experience Design (Adobe XD) — относительно новая программа линейки Adobe, специально предназначенная для проектирования интерфейсов. Приложение поддерживает векторную графику и верстку, есть возможность работать с сетками, стандартными блоками и типографикой.

Кроме Adobe Photoshop и Adobe XD у компании есть еще несколько продуктов, которые используются дизайнерами:

  1. Adobe Illustrator — программа для создания векторных изображений, например, логотипов, иллюстраций и так далее.
  2. Adobe After Effects — приложение для создания анимации. В основном используется для демонстрации дизайна или разработки анимированных элементов.
  3. Adobe InDesign — приложение, которое используется для верстки как полиграфии, так и интернет страниц.

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

Sketch

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

В основном Sketch рассчитан на создание сайтов блочной структуры — в программе можно создавать блоки, кнопки, формы и прочее одним движением мыши. Есть возможности для глубокой работы с типографикой, модульными сетками. Главный недостаток программы — ограниченная совместимость с ОС. Sketch разработан специально для Mac OS и не имеет аналога для Windows.

Figma

Еще одна программа на рынке, которая является главным конкурентом Sketch — графический редактор Figma. Данное приложение работает как на Windows, так и на Mac OS, поэтому быстро стало популярным среди веб-дизайнеров. Одно из главных преимуществ программы — возможность работать напрямую через браузер и сохранять результаты своей работы в облаке.

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

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

  • специфика дизайна. В основном современные сайты имеют блочную структуру, которую удобнее реализовывать с помощью простых элементов. В таком случае Sketch и Figma подходит большинству дизайнеров. Однако если макет включает в себя сложную обработку изображений, без Photoshop не обойтись;
  • технические возможности разработчиков. Часто верстальщики работают с форматом .psd и не используют другие программы кроме линейки Adobe. В этом случае дизайнерам приходится подстраиваться под других специалистов и выбирать нужное приложение, исходя из возможностей разработчиков;
  • удобство пользования. Сложность интерфейса — одна из особенностей работы с линейкой продуктов Adobe. Так как инструменты не предназначены напрямую для проектирования интерфейсов, у дизайнеров возникают сложности при создании макетов, в отличие от специализированных программ Sketch или Figma.

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

Графика

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

Платные стоки

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

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

Бесплатные стоки

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

1. Pixabay

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

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

2. Unsplash

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

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

3. Freepik

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

Чтобы использовать бесплатные изображения и при этом создать уникальный и интересный сайт, нужно учитывать следующее:

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

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

Работа с цветом

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

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

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

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

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

Типографика, анимация и 3D

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

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

Также дизайнерам важно уметь создавать макеты, где присутствуют анимационные элементы — движение всегда привлекает внимание пользователя, поэтому анимация является одним из инструментов повышения конверсии сайта. Мы уже говорили про программу Adobe After Effects, которая часто используется разработчиками для презентации и создания анимационных элементов.

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

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

Некоторые веб-дизайнеры занимаются не только проектированием интерфейсов и рекламной графикой с помощью 3D моделирования. Есть довольно сложные для освоения программы, которые позволяют создавать различные 3D модели и использовать изображения в веб-дизайне. Одни из самых популярных программ 3D моделирования — AutoDesk 3Ds Max и Cinema4D.

Владение программами 3D моделирования является дополнительной компетенцией для веб-дизайнеров, однако иногда данный навык бывает полезным при создании эффектной рекламной графики, экстерьеров и интерьеров зданий, а также 3D типографики (подробнее об этом элементе дизайна можно прочитать в этой статье).

Студия IDBI использует множество различных инструментов для создания дизайна сайтов. Мы можем разрабатывать как сложные интерфейсы с глобальной обработкой изображений и созданием новых, так и легкие сайты с минималистичным дизайном. В работе мы используем и традиционную линейку Adobe, и более современные продукты. Наши работы можно посмотреть в разделе «Портфолио».

16 дизайнерских ресурсов для экономии вашего времени и энергии

Вот они – ТОП 16 бесплатных дизайнерских онлайн-сервисов для экономии вашего времени и энергии.

365 PSD

Сервис с более чем 5,5 тысяч бесплатных макетов и других ресурсов Photoshop. Для удобства поиска макеты поделены на 30 категорий. Вы также можете подыскать PSD-шаблоны: UI-киты, фоны, карты из премиум-графики. Учтите, что информация о разрешении использования шаблонов в коммерческих целях спрятана в архивах, что может создать некие затруднения в работе с сервисом.

BEHANCE

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

BRUSHEEZY

Бесплатный ресурс с тысячами кистей, паттернов и текстур для Photoshop. Здесь вы также можете создать и лицензировать собственную кисть. Сервис предоставляет возможность демонстрировать свое творчество. Вы можете получить множество отзывов о своей работе, так как трафик на сайте превышает 1,2 миллиона посетителей в месяц.

DESIGN BUNDLES

Этот веб-сайт содержит как платный, так и бесплатный контент с лицензией для коммерческого использования. Здесь представлены SVG-файлы, макеты, иконки, шаблоны, фоны, текстуры и бесплатные изображения. Вы также можете использовать крафтинг с элементами вышивки, монограмм и скрапбукинга. После регистрации вы получите возможность получать бесплатные подарки на email каждый день.

DESIGNERMILL

Сервис предлагает множество инструментов для дизайна: мокапы, иконки, шрифты и многое другое, которые существуют с 2015 года. Здесь вы также найдете бесплатные элементы для Photoshop, Illustrator, Sketch, XD и Principle. Несмотря на огромное количество ресурсов, сервис удобен в использовании благодаря категоризации контента.

DRIBBBLE

Разработчики сайта скромно называют его сердцем дизайнерского сообщества. Dribbble — это своеобразная социальная сеть для дизайнеров, которые могут продемонстрировать свои работы или просто вдохновиться контентом. Рекламируя свои графические достижения на сайте, вы можете найти работодателя. Пользователями dribbble являются такие компании, как Apple, Airbnb, Google, Dropbox, Shopify и т.д.

LOGASTER

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

FREEBIESBUG

Сервис, в котором веб-дизайнеры и разработчики могут найти бесплатные инструменты для работы. Ресурс насчитывает более 300 наборов иконок, 400 шрифтов и 750 PSD-шаблонов. Контент Freebiesbug постоянно обновляется, поэтому мы рекомендуем подписаться на рассылку, чтобы не пропустить новинки.

FREE DESIGN RESOURCES

Этот сайт обновляется каждый день. Контент насчитывает более 12 миллионов загрузок. Художники и дизайнеры со всего мира демонстрируют свои работы на Free Design Resources и готовы делиться ими бесплатно. Зарегистрируйтесь на сайте и получайте работы профессионалов на почту дважды в неделю.

FREE PIK

Еще один сток, который насчитывает более 4,5 миллионов графических ресурсов. Сервисом можно пользоваться бесплатно при условии осуществления не более 30 скачиваний в день и наличии ссылки на автора работы. Платная версия разрешает скачивать до 100 элементов и использовать материалы в личных и коммерческих целях, не указывая источник.

GRAPHICBURGER

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

GRAPHICS FUEL

Сервис предлагает найти свой набор иконок для оформления сайта среди 25 миллионов бесплатных графических файлов. Набор состоит из 18 векторных хорошо масштабируемых изображений, доступных в SVG-, AL-, EPS- и PDF-форматах. Иконки выполнены как на белых, так и на цветных фонах. Все материалы доступны для использования в электронной коммерции.

COLORDOT BY HAILPIXEL

Сервис, которым забавно и удобно пользоваться, поможет вам подобрать цветовые комбинации для нового проекта и поделиться ими с друзьями, коллегами или клиентами. Вы также можете продемонстрировать свою палитру оттенков на Pinterest, Facebook, Twitter. Скачайте Сolordot by hailpixel на IPhone и используйте камеру, как пипетку, чтобы определить номер заинтересовавшего вас оттенка.

PIXEDEN

Для поиска нужных мокапов сервис предлагает целых 34 страницы графических, дизайнерских и веб-ресурсов. Бесплатные наборы состоят из плоских, социальных иконок, а также тех, что подходят для приложений IOS в PNG формате размером от 16 до 512px. Премиальным аккаунтом с дополнительными ресурсами и техподдержкой можно обзавестись всего за $6 в месяц.

PIXELBUDDHA

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

SUBTLE PATTERNS

Сервис пригодится тем, кто ищет бесплатные фоны для своего сайта. Текстуры бекграундов в основном состоят из бесшовных повторяющихся элементов. Любые материалы доступны к предварительному осмотру на фронт-энде вашего ресурса. Паттерны лицензированы Creative Commons Attribution 3.0 Unported. Следовательно, вы можете использовать их в коммерческих целях.

Заключение

Теперь мы уверены, что вооружили вас списком одних из наиболее эффективных и интересных ресурсов. Они не только помогут вам сэкономить время и сократить расходы, но и вдохновят на новые проекты. Выходите за рамки! Мы за свободное творчество, а вы?

7 ресурсов для дизайнера, которыми вы точно будете пользоваться

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

Сoolors

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

Gridcalculator

Прекрасный ресурс для расчета сетки. Будет полезен как веб, так и графическим дизайнерам. Выставляем общую ширину макета, количество колонок, отступы по краям, и между колонками, и получаем ширину колонки. С его помощью можно рассчитать не только сетку, но и размеры любых элементов, с одинаковой шириной. Допустим нам известно количество столбцов в таблице, и общая ширина. Нужно только задать отступы по краям и между столбцами равными нулю, и мы получим ширину столбцов. Результаты можно скачать в AI, PSD и PNG.

Ultimate google font pairings

Огромная коллекция профессионально подобранных шрифтовых пар. Все шрифты доступны в Google Font, и их можно скачать прямо с сайта, либо скопировать HTML код. Особенно удобно для тех, кто пока еще не совсем ладит со шрифтами, и подбором.

Undraw

Большая коллекция бесплатных векторных иллюстраций, выполненных в модной стилистике. Прекрасно подойдут для лэндингов или продуктовых сайтов. Есть поиск по изображениям и возможность изменить цветовую гамму. Результат можно скачать в SVG или PNG. Коллекция изображений постоянно пополняется.

Flaticon

Думаю, этот ресурс знаком всем, но я не могу его не упомянуть. Очень большое количество иконок, на самые разные темы. Есть поиск, а также фильтр по стилю и цвету. Все иконки доступны в SVG, EPS, PSD и PNG разных размеров.

Freepik

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

Uifaces

Большая коллекция лиц, которые можно использовать как заглушки для отзывов, карточек и т.п в ваших макетах. Есть фильтр по возрасту, полу, цвету волос и эмоциям. Так же есть плагины для Sketch и XD. Что бы скачать изображение, кликаем ПКМ по картинке, нажимаем «Открыть картинку в новой вкладке», и сохраняем изображение.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих