Лучшие дизайнерские работы. Примеры хорошего веб-дизайна

— бесплатное веб-приложение, которое позволяет вам создавать фоновые изображения “в полосочку”. Можно использовать до 5 сочетаний цветовой гаммы, с разной шириной и расстоянием между полосками в создаваемом фоне.

Stripe generator — онлайн-сервис для быстрого создания картинок, чтобы использовать их в качестве фонового изображения на сайте.

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

Pictaculous — бесплатный онлайн-сервис, который позволяет вам сгенерировать цветовую палитру на основе загруженного файла в формате PNG, JPG или GIF.

I want hue — онлайн-сервис для поиска и подбора сочетания групп и цветов, Отлично подойдет для тех, кто занимается колористикой, созданием цветовых схем и “размножением” шаблонов для сайтов.

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

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

Cut & Slice me — бесплатный плагин для Photoshop, чтобы экспортировать готовые картинки на различные устройства в течение нескольких секунд.

css3ps — бесплатный “облачный” плагин для Рhotoshop, чтобы конвертировать готовые слои в CSS3.

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

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

Sneakpeekit — набор инструментов для создания фреймов и разработки прототипов для вашего сайта.

Loader Generator — бесплатный веб-сервис для создания анимированных загрузчиков сайта.

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

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

Rsizr — онлайн-редактор для изменения изображений и быстрого масштабирования графики.

Fotor — мощный и понятный онлайн-редактор практически любой графики с большим набором встроенных инструментов и фильтров. Есть отдельные приложения для Android and iPhone.

JPEGmini — бесплатный онлайн-сервис, при помощи можно “сжать” готовый фотоснимок с сохранением исходного качества (поддерживается пятикратное сжатие) и получить готовый более “легкий” файл в формате JPEG.

Cropp.me — очень простой и быстрый инструмент для масштабирования и “кропа” готовой графики до нужных вам размеров или пропорций.

Photocat — онлайн-редактор изображений, который оснащен богатым инструментарием для работы с графикой. Готовые изображения сохраняются в JPG или PNG.

Round pic — веб-сервис для быстрого создания “круглых уголков” для любых изображений. Действия с заранее заданными параметрами можно проконтролировать в окне предварительного просмотра.

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

Editor method — веб-приложение для работы с векторной графикой прямо в вашем браузере. Достаточно открыть браузер — и вас под рукой сращу богатый набор инструментов для создания изображений в формате SVG. Мощности Adobe Illustrator от него ждать не стоит; но многие задачи с его помощью решить можно.

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

The noun project — онлайн-коллекция из отличной узнаваемой графики, которая постоянно пополняется.

Copy paste character — онлайн-коллекция символов Unicode, из которой можно выбрать и скопировать в свой контент любой понравившийся символ.

X-Icon Editor — приложение на основе HTML5 для создания иконок с высоким разрешением, которые можно применить на сайте или для новых вкладок в веб-проектах.

Make app icon — для оптимизации иконок для любых приложений под iOS и Android. Просто загрузите картинку, — и сервис автоматически изменит ее размер до требуемых пропорций. Результаты сохраняются в PNG, JPG и PSD.

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

Mobile tuxedo — позволяет создавать иконки, которые оптимизированы для работы с сенсорными экранами. Готовая графика сохраняется в форматах EPS, PSD и PNG в различных разрешениях.

Icon monstr — коллекция из более чем 600 иконок для веб-приложений, диаграмм и графиков. Все иконки доступны в форматах PNG и SVG.

Endless icons — сайт с постоянно пополняемой коллекцией монохромных иконок. Все иконки изготовлены в стиле скетчей, нарисованных от руки.

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

1. abduzeedo.com

Отличный сайт про логотипы и дизайн вообще. (причем с подробными объяснениями)

2. studio.envato.com

Сообщество всех внештатных дизайнеров (фрилансеров, если хотите) для работы за рубежом.


3. fl.ru

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


4. computerarts.co.uk

Международный интернет-журнал о компьютерном искусстве.


5. edustyle.net

Школы и университеты тоже имеют право быть представленными в галерее. Вот эта вот особенно интересна.


6. davidairey.com

Сайт дизайнера Дэвида Эрейа (David Airey). Здесь он делится своим опытом в сфере графического и лого дизайна.


7. behance.net

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


8. pdf-mags.com

Очень хороший ресурс со всевозможными дизайнерскими (и не только) журналами в формате PDF.


9. cssbeauty.com

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


10. artperm.ru

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


11. designiskinky.net

Австралийский сайт о дизайне. Сфокусирован только на новостях дизайна. В общем сайт только про дизайн. Дизайн. И последний раз. Дизайн.


12. freelancefolder.com

Фрилансерское блог-сообщество с регулярными статьями и постами. Очень разнообразное.


13. bittbox.com

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


14. allday.ru

Ну а это всем известный русский сайт-аналог. Здесь тоже все бесплатно и достаточно качественно.


15. lenagold.ru

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


16. vandelaydesign.com

Собрание очень хороших статей из медиа ресурсов. Особенно понравится этот сайт веб-дизайнерам.


17. youthedesigner.com

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


18. designyoutrust.com

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


19. lookatme.ru


Веб-дизайн

20. noupe.com

Отличный сайт о веб-дизайне и веб разработках (CSS & Ajax).


21. smashingmagazine.com

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


22. thinkvitamin.com

vitamin - это ресурс для разработчиков, веб-дизайнеров и предпринимателей. Думаю, 50 000 подписчиков не могут ошибаться.


23. 24ways.org

Качественные статьи по дизайну и разработке.


24. alistapart.com

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


25. sitepoint.com

Очень разнообразный сайт: графика, css, ajax…


26. design-mania.ru

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


27. designgu.ru

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


28. webappers.com


29. happycog.com

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


30. webdesignerwall.com

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


Ресурсы

31. designfloat.com

Сайт по типу сайта digg.com, только на тему дизайна.

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

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

Итак, вот подборка из 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. 4.94 /5 (98.71%) 31 голос(ов)

Шрифты, иконки, бесплатные закачки и кое-что еще

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

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

На этом сайте находятся тонны интересных подборок для вдохновения (сайты, шрифты, приёмы и т.д.), но самое главное - куча всевозможных сетов с готовыми элементами (кнопки, подложки, формы и т.д.) в формате psd, которые во многом облегчают творческий процесс. Что немаловажно, все в свободном доступе, скачивается за лайк на Фейсбуке или фоллоу в Твиттере.


Этот ресурс предлагает большое количество наборов иконок в формате svg. Скачиваются сеты бесплатно.

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

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

Этот сервис позволяет сжимать PNG изображения в формат PNG-8 с поддержкой прозрачного фона. Одним махом можно загрузить до 20 изображений, а скачиваются полученные файлы в виде ZIP архива.

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


С помощью сервиса IcoMoon можно выбрать шрифтовые иконки. Ресурс предлагает воспользоваться библиотекой, насчитывающей более 3 000 иконок. Помимо этого, выбранные иконки здесь же можно и отредактировать.

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

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

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

Ну что готовы? Тогда начинаем!

Sketch

Sketch является одним из самых популярных инструментов веб-дизайнера. Он уже давно борется с Фотошоп за пальму первенства в разработке веб-интерфейсов.

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

Единственный его минус заключается в поддержке только MacOS платформ. Продукт стоит $99, но тем не менее по отзывам юзеров Sketch стоит своих денег. Как и полагается с платными сервисами, разработчики предоставляют бесплатную пробную версию.

Macaw

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

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

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

UXPin

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

При помощи UXPin вы можете проектировать как сайты, так и приложения на iOS. Вы можете создавать как просто наброски проекта, так и более детальные шаблоны интерфейсов.

При необходимости есть возможность импортирования проектов с Photoshop и Sketch. Также при создании проекта с нуля вы можете использовать UX паттерны от таких фреймворков, как Bootstrapp, Foundation и др.

Marvel

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

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

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

Webflow

Webflow - это еще одно потрясающее веб-приложение, с помощью которого можно с легкостью создавать красивые и адаптивные веб-сайты. При этом вам не нужно обладать такими технологиями, как HTML и CSS.

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

Canva

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

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

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

Noun Project

The Noun Project может стать отличным источником поиска графических элементов для вашего сайта или блога. Также при помощи этого сервиса дизайнеры могут зарабатывать на своих работах.

Paper

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

Также fifty three, разработчик приложения, дополнительно предоставляет оригинальный и очень функциональный стилус.

Paper будет особенно полезен при создании быстрых набросков проекта, а также в повседневной работе дизайнера.

Astropad

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

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

Iconfinder

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

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

365 Psd

365 Psd - один из самых богатых хранилищ бесплатных psd макетов и векторных изображений. Здесь можно найти всё начиная от фирменных логотипов и заканчивая изображениями живой и дикой природы.

Freepik

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

Adobe Color CC

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

Особо полезной бывает функция выбора цветовых схем. Всего их насчитывается около семи. При помощи Adobe Kuler вы намного увереннее будете работать с цветами и подбирать их удачные оттенки.

Paletton

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

Google fonts

Google fonts является одним из самых любимых мной сервисов. Многие сайтостроители и дизайнеры уже давно оценили по достоинству очередной продукт Гугла.

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

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

В общем, если вам нужны шрифты для сайта, добро пожаловать в Google fonts!

Font Squirrel

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

Установка шрифтов на сайт - не самое простое дело, в связи с чем я записал отдельный видеоурок по этой теме. В нем я наглядно показываю, как скачивать и устанавливать шрифты с хранилищ Гугла и Font Squirrel. Для просмотра скринкаста нажмите на изображение внизу:


Tableau Public

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

Logopond

Важность логотипа сайта трудно переоценить. Именно при помощи него вы сможете произвести первое и самое устойчивое впечатление на ваших пользователей.

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

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

Siteinspire

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

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

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

Color Hunter

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

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

В этом вам поможет сервис Color Hunter . Вам достаточно загрузить понравившееся изображение и вуаля! Вы тут же вы получите данные обо всех использованных в ней цветах.

ColorZilla

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

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

Resizer

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

Вовсе нет. При помощи нового сервиса того же Гугла вы сможете увидеть отображение вашего сайта сразу на разных устройствах: ноутбуках, планшетах и смартфонах. Вам достаточно ввести адрес вашего сайта в форму и нажать Enter.

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

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

Буду рад если вы дополните этот список своими "любимцами". Также не стесняйтесь задавать вопросы в комментариях, если таковые имеются.

А на этом у меня все. Надеюсь, данная статья была для вас полезной. Если это так:

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