Полезные инструменты, лайфхаки, идеи и вдохновение для веб-дизайнера в подборке от команды NAJES.
Перед ознакомлением с сервисами, рекомендуем подписаться на наши социальные сети, чтобы не пропустить много интересного:
Фотостоки для дизайнеров
1) Shutterstock— Наверное, один из самых известных и крупных фотобанков в нашем списке, миллионы стоковых фотографий, иллюстраций и векторов. На shutterstock можно найти абсолютно любую картинку, которая необходима для проекта, сервис не бесплатный и цена за подписку достаточно высокая.
2) Depositphotos — Еще один гигант, не отстающий от shutterstock. Миллионы картинок и иллюстраций. Отличия между ними лишь в цене, на depositphotos
3) Istock — Хороший фотобанк, уступает первым двум по объему, но
привлекателен ценой за изображения.
4) Adobe — Фотосток от Адоба, мы пользуемся им редко, но не можем не включить в список, из плюсов это цена и хорошая база картинок.
5) Shopdiz — Это сервис покупки изображений с фотобанков в 20(. ) раз дешевле. Купить можно с (Shutterstock, Depositphotos, Istock, Adobe Stock 123RF
Топ 10 сайтов для веб дизайнеров
6) Unsplash — Крупнейший англоязычный бесплатный фотосток. Можно найти
практически любую картинку, регистрироваться не нужно.
7) Pexels — Один из лучших бесплатных фотостоков на наш взгляд, огромная база картинок, удобная навигация.
8) Pixabay — Бесплатный русскоязычный фотосток с небольшой базой
картинок, чуть более 1 млн.
9) Dreamstime — Еще один огромный фотобанк, который ни в чем не уступает Shutterstock и Depositphotos.
10) Picjumbo — Еще одна бесплатная библиотека стоковых фотографий.
11) Photos.icons8 — Раздел всем известного сайта с большим количеством
12) Negativespace — Большой бесплатный фотобанк с фотографиями на любой вкус.
13) Foodiesfeed — Более 1500 фотографий еды для ваших проектов.
14) Iconscout — Сайт с большим количеством фотографий на любой вкус и цвет, а так же там можно найти иллюстрации и иконки.
19) Burst — Бесплатный фотосток с хорошей базой.
21) Generated — Интересный ресурс, на котором можно с помощью настроек сформировать картинку (портрет) человека со своими параметрами.
23) Freestocks — Бесплатный фотосток, большая база, изображения можно
использовать как в личных, так и в коммерческих целях.
Векторстоки
1) VectorStock— Один из крупнейших векторстоков из нашего списка. Есть большая база бесплатных векторов, а так же недорогие платные изображения. Рекомендуем данный сервис, так как сами пользуемся постоянно.
2) Vecteezy— Крупный векторсток, который располагает огромной коллекцией
бесплатных векторных изображений высокого качества. Есть и платные по
3) Stockunlimited — Еще один крупный ресурс с векторными изображениями
высокого качества. Сервис платный, но цена на изображения не очень высокая.
4) Freepik — это огромное сообщество графических дизайнеров, которые
предлагают эксклюзивные векторные изображения. Множество бесплатных
НЕ ИЗУЧАЙ веб-дизайн так!
изображений, но если нужен доступ к расширенному каталогу, придется
заплатить за подписку.
5) Vectorportal — Гигант, насчитывающий более 35 миллионов бесплатных
векторов. Изображения можно использовать даже в коммерческих целях.
6) Vexels — экс. VectorOpenStock, еще один крупный векторсток, который
содержит тысячи бесплатных векторных изображений.
7) Retrovectors— Векторные изображения в ретро стиле.
8) Mixkit — Бесплатный ресурс с большой базой векторных изображений на
9) Drawkit — Бесплатные иллюстрации, обновление библиотек каждую неделю,
так же на ресурсе есть иконки.
10) Scribbbles — 100+ векторных каракулей для ваших проектов.
Сервисы для веб-дизайнера с иконками
7) Iconscout— Сайт с большим количеством иконок на любой вкус и цвет, а так же там можно найти иллюстрации и фотографии.
14) Thenounproject — Огромная база иконок на любой вкус, если поискать,
можно найти очень необычные и авторские коллекции.
15) Linea — Более 750 бесплатных иконок.
16) Animaticons — Ресурс анимированных иконок, есть как платные, так и
17) Outlane — Платная подборка анимированных иконок.
18) Useanimations — Еще один бесплатный ресурс анимированных иконок.
19) Potlabicons — Совсем небольшая подборка svg анимированных иконок.
Сервисы для работы с фоном
PNG стоки
1) Stickpng — Отличный ресурс, база png картинок насчитывает около 40 000
изображений. Картинки разбиты по каталогам, есть поиск. Изображения бесплатные, лицензию на использование сервис не предоставляет.
2) Pngmart — Отличный png-сток, более 40 000 изображений, всё разбито по категориям и подкатегориям, картинки бесплатные.
3) Imgbin — Огромный ресурс, более 1.000 000 картинок на различные тематики, удобный поиск, бесплатные изображения.
4) Imgpng — Русскоязычный сервис, более 73 000 бесплатных изображений,
есть каталог и удобный поиск.
5) Png-images — Еще один русскоязычный ресурс, с крутыми картинками, есть каталог, разбитый на категории, поиска нет, картинки бесплатные.
6) Cleanpng — Большая база, есть необычные категории.
7) Favpng — Еще один крутой ресурс, с большой базой png.
8) Pngimg — Почти 92 000 бесплатных png.
9) Pngtree — Сервис платный, но оно стоит того. Помимо PNG тут можно найти и PSD, векторы, фоны, эффекты для текста и еще кучу всего полезного для веб-дизайнера.
Видеостоки
1) Videos.Pexels — Данный ресурс уже был в нашей подборке фотостоков. На нем так же вы сможете найти и видео при необходимости, огромная база бесплатных видео, удобный поиск.
2) Coverrs — На данном сервисе можно найти отличный короткие видео для
фона на сайте, есть несколько категорий поиск, бесплатное использование.
3) Videvo — Средняя по количеству база, бесплатный доступ, удобная
навигация по разделам.
4) Videezy — Крупная база разнообразных видео у некоторых есть разрешение в 4к, удобная навигация, есть 12 основных разделов, которые делятся на
подразделы, есть поиск, видео бесплатны.
5) Wedistill — Большая библиотека видеороликов и анимаций, удобный поиск
по разделам (их 9), видео в основном платные, подписка около 30 $ в месяц.
6) Pixabay— Этот сервис мы уже упоминали в разделе фотостоков, но тут так же можно найти видео, клипы и фотажи.
7) Videvo — Более 1000 бесплатных видео, анимированной графики и звуковых эффектов.
Онлайн сервисы анимации, на которых вы можете найти интересные решения для ваших проектов
1) Dribbble — На дриббле можно не только вдохновиться примерами сайтов веб-дизайнеров со всего, но и найти крутую UI анимацию.
2) Uimovement.com — Отличный сервис, где вы сможете найти анимацию на
любой вкус и цвет, есть удобное меню, разбитое на подразделы, количество
анимаций насчитывается более 25 000 примеров.
3) Awwwards — Ну куда же без этого гиганта, около 5000 анимаций,
отсутствуют подразделы анимаций — это из минусов.
4) Nisnom.com — Русскоязычный ресурс, где можно найти интересную
анимацию для ваших проектов, можно посмотреть код, как выполнена, удобное
меню с категориями, есть поиск.
5) Tympanus — Открытый код и интересные виды анимаций, меню нет.
6) Animista — Интересный ресурс, выбираем стиль анимации и забираем
готовый кусок кода.
Ресурсы с шрифтами
1) Fonts.google — Бесплатный ресурс для скачивания кириллических и
латинских шрифтов. Можно посмотреть как выглядит шрифт на примере фраз
на русском и английском языках, изменить толщину, ширину и угол наклона.
2) Fontspace.com — На ресурсе можно найти более 36 000 бесплатных шрифтов. Их можно сортировать по различным категориям.
3) Webfonts.pro — Российский бесплатный ресурс для скачивания
кириллических и латинских шрифтов. Шрифты делятся на категории: без
засечек, с засечками, декоративные, моноширинные.
4) Abstractfonts.com — Латинские шрифты разбитые по категориям, алфавиту, дизайнерам и популярности.
5) Fontsquirrel.com — Множество бесплатных шрифтов, если их не хватает можно зайти в платный раздел, цены низкие. Можно сортировать шрифты по стилю, языкам, популярности и новизне.
6) Urbanfonts.com — Огромная коллекция различных шрифтов. Есть бесплатные,
есть коммерческие, на них бывают скидки. Удобный поиск по категориям.
7) 1001freefonts.com — Множество бесплатных шрифтов для личного и
коммерческого использования. Цены приемлемые. Удобный поиск.
8) Fontfreak.com — На данном ресурсе около 9 000 бесплатных и свыше 125 000 платных шрифтов от 400 веб-дизайнеров.
9) Fontasy.de — Более 1000 бесплатных шрифтов. Кириллических среди них
конечно маловато. Удобный интерфейс и довольно большой выбор стилей.
качественные, цены высокие, каждую неделю Creative Market предлагает
загрузить часть товаров бесплатно. И среди них один шрифт.
11) Graphicsland — Огромная подборка бесплатных шрифтов, сам ресурс богат
материалом для веб-дизайнера.
12) Fontstorage — Бесплатный ресурс с приличной коллекцией шрифтов.
13) Pixelgene — Маленькая, но бесплатная коллекция шрифтов.
14) Befonts — Огромная база бесплатных шрифтов.
15) Shriftkrasivo — Топ подборки различных шрифтов.
16) Fonts4web — Бесплатные кириллические шрифты.
Конструкторы иллюстрации
база иллюстраций, можно загрузить свои и творить, творить, творить. Сервис
бесплатный, но есть ограничения по лицензии. Можно купить Pro версию за $ 20 в месяц. Она дает бесконечно масштабируемые векторы для лучшего качества и убирает авторские ссылки.
2) Kvikpic — Русскоязычный сервис, небольшая база иллюстраций, простенький
понятный интерфейс. Подойдет новичкам и тем, кто не хочет слишком
3) Isoflat — Простенький в пользовании конструктор, небольшая база
иллюстраций, удобный в управлении. На самом ресурсе, можно бесплатно
скачать готовые иллюстрации, они разбиты по разделам, сам конструктор
4) Openpeeps — Конструктор иллюстраций персонажей в рисованном стиле.
5) Undraw — Бесплатные иллюстрации, можно выбрать цвет и скачать
Сайты для вдохновения дизайнера
Какая же подборка для веб-дизайнера без этих сайтов
Далее идут менее известные платформы, но от этого они не перестают быть полезными веб-дизайнерам.
5) Land-book — Лэнд бук место, где можно найти примеры лэндингов на любую тематику и любой вкус.
6) Siteinspire — Интересный ресурс с хорошими работами веб-дизайнеров, есть удобное меню и поиск.
7) Calltoidea — Сайт, где вы можете посмотреть интересное исполнение
отдельно взятого блока на сайте (form, footer, pricing и т. д.).
8) Webframe — Аналогичный предыдущему ресурс, но с гораздо большей библиотекой блоков и примеров.
9) Сollectui — Большая база разнообразного дизайна с удобным меню с
10) Onepagelove — Очень много примеров одностраничных сайтов от веб-
дизайнеров со всего мира.
Ресурсы подбора цветов для дизайна
1) Picular — Ресурс с подбором цветов, сервис сам подбирает вам необходимый цвет по названию.
4) Palx —Сервис формирует цветовую палитру полного спектра, вам достаточно
просто вписать цвет.
5) Hihayk — Генератор цветовой шкалы.
6) Vanschneider — Сервис для веб-дизайнера, где можно проверить
7) Colorhunt — Цветовые палитры для ваших проектов.
8) Сolorinspire — Бесплатный сервис с подборками цветов для веб-дизайнера.
Источник: naje-s.ru
7 лучших программ для веб-дизайна 2020 года
Наши редакторы самостоятельно исследуют, тестируют и рекомендуют лучшие продукты; Вы можете узнать больше о нашем
процессе обзора здесь . Мы можем получать комиссионные за покупки, сделанные по выбранным нами ссылкам.
Наши лучшие выборы
«Включает в себя визуальный интерфейс« то, что вы видите, то, что вы получаете »(WYSIWYG) и чистый текстовый редактор с цветовой кодировкой для работы непосредственно с кодом».
Лучшее бесплатное программное обеспечение: WordPress.org
«Полная система управления контентом (CMS), она идеально подходит для веб-сайтов или блогов, где контент регулярно публикуется или обновляется».
Лучший редактор HTML: Atom
«С открытым исходным кодом (и бесплатно), Atom объявлен« взломанным »текстовым редактором, который может использовать любой».
Лучшее веб-программное обеспечение: Webflow
«Код, создаваемый Webflow, впечатляюще чистый, с меньшим количеством беспорядка, чем в других,« свободных от кода »сборщиках».
Лучшее для дизайна интерфейса: Sketch
«Инструмент редактирования векторной графики для проектирования, создания каркасов и создания прототипов веб-сайтов и мобильных приложений».
Лучший онлайн-конструктор сайтов: Wix
«Благодаря доступным и простым в использовании разработчикам веб-сайтов, таким как Wix, создание веб-сайтов стало еще более доступным».
Лучший оффлайн-конструктор сайтов: Mobirise
«Его удобный, основанный на блоках интерфейс WYSIWYG позволяет любому легко перетаскивать свой путь на чистый, современный веб-сайт».
Источник: gadgetshelp.com
5 лучших инструментов для создания адаптивного веб-дизайна
В начале хочу сказать, что я не включил сюда «point-and-click» инструменты. Причина очень проста — я верю, что они плохи для всех: дизайнеры, клиенты, разработчики… страдают все. Дело не в качестве кода, и не в том, что работать в них «слишком просто». Дело в том, что эти программы всегда будут ограничивать своих пользователей, какими бы крутыми они не были.
Теперь к инструментам. Давайте начнём с очевидного:
1. Ваш браузер
Нет, я не шучу. Это действительно самый важный инструмент , который у Вас имеется. Именно он покажет, как будет выглядеть ваш веб-сайт в конкретных условиях. Существует бесконечное множество споров о том, где лучше всего проектировать: в браузере или же в графическом редакторе. Позвольте мне решить этот спор за вас.
Разве пользователь просматривает веб-сайт в Фотошопе? Используйте графические редакторы для редактирования изображений, а ваш браузер для разработки веб-сайтов.
Нашим клиентам пора отвыкать от мега-детализированных макетов, к которым они привыкли. Нам необходимо двигаться дальше, вместе с развитием интерактивных и «текучих» веб-технологий.
Установите хотя бы один браузер с хорошим рендерингом, а так же некоторые расширения для разработчиков. Привыкайте смотреть на исходный код так, как его видит браузер.
2. Проектирование в Google Drive
Технически, почти в любом векторном графическом редакторе можно проектировать вайфреймы для ваших сайтов и приложений. Использование вектора позволяет легко и быстро изменить размер элементов, пока Вы ещё не на стадии планирования.
Я предпочитаю проектировщик Google Drive по нескольким причинам:
- Социальная и совместная работа. Google предоставляет возможность обмена информацией лучше, чем кто-либо другой. Контекстные комментарии, одновременное редактирование и интеграция Hangout. Я влюблен.
- Автоматические направляющие. В каждом документе направляющие создаются автоматически на основе размеров каждого элемента, введённого в документ. Это позволяет легко изобразить последовательные размеры элементов документа, что отлично подходит для таких одержимых сетками дизайнеров, как я.
- Я делюсь с клиентами этими вайфреймами и они выглядят очень профессионально, что является большим плюсом.
Тем не менее я не ограничен направляющими и нахожу GDDA (Google Drive Drawing App) отличной альтернативой макетам приложений, которые пытаются ограничить вас границами сетки.
О, и это бесплатно. Надо ли говорить больше?
3. Style Prototypes
Style Prototypes встроен в браузер и даёт вам и клиентам возможность посмотреть, как цвета, типографика и элементы пользовательского интерфейса вашего сайта будут выглядеть. Так как он создан для просмотра в браузере, то будет меньше несоответствий после построения сайта.
Кроме того я считаю, что Style Prototypes поможет нашим клиентам мысленно отделить понятия UX и эстетики. И вообще всё, что помогает клиентам ближе понимать процесс веб-дизайна может быть только хорошо.
4. Responsinator
Responsinator — простой инструмент, который покажет сайт в различных размерах. Он показывает сайт на разных устройствах и экранах. Но тут есть пару нюансов.
Хотите посмотреть, как ваш сайт будет смотреться при маленьких размерах? Измените размер окна браузера. Хотите проверить сайт на мобильном устройстве? Лучше устроить реальное тестирование. Фактически этот инструмент для клиентов.
Инструмент, что бы показать им разницу экрана настольного компьютера и ноутбука. Небольшого смартфона и планшета. А так же всё остальное в этом духе.
Опять же есть огромное количество сайтов, подобных Респонсинатору, однако я выбрал именного его, наверное, потому что он предоставляет силуэты устройств, один за другим, для лёгкого чтения.
5. Adobe Edge Inspect
Теперь инструмент для вас. Если у вас есть мобильная лаборатория тестирования (и чем раньше вы сможете сделать её, тем лучше) Edge Inspect будет синхронизировать все ваши устройства, что бы посмотреть одну и ту же страницу. Обновите страницу на одном устройстве и обновятся все.
В отличие от других в списке, Эдж Инспект не бесплатный. Однако, если вы можете позволить себе достаточное количество мобильных устройств, нуждающихся в тестировании, то это стоит денег.
Заключение
Как всегда, ваш главный инструмент — ваш мозг. Все эти инструменты, а так же другие, на подобие этих, лишь помогают вам на пути к истине. Я выбрал их потому, что они помогают мне в разработке качественных сайтов и не ограничивают меня в функциях и возможностях.
А какие инструменты используете вы? Напишите свой топ-5 в комментариях!
Источник: awdee.ru