«Нельзя научить, можно только научиться». И, пожалуй, сейчас то время, когда учиться легко — источников знаний много. Их даже слишком много. Информации о веб-дизайне — читать не перечитать. Есть и готовые подборки самых важных ресурсов.
Проблема в том, что зачастую они написаны копирайтерами, которые не имеют дела с практикой. Поэтому мы пошли от обратного — обратились к экспертам и попросили их поделиться действительно нужными ресурсами из своей практики. Получилась полезная подборка — концентрат витаминов в мире разбавленных соков. Наслаждайтесь.
Обучение веб-дизайну — процесс, требующий большой насмотренности и постоянного отслеживания трендов. Как успевать следить за всем? Перед вами коллекция сайтов, с которых вы можете начать погружение в веб-дизайн.
Что читать, смотреть и слушать о веб-дизайне
Веб дизайнер — с чего начать и как стать. Основы веб-дизайна с нуля
Чтобы сделать сайт на Тильде, дизайнером быть не обязательно: вы собираете сайт из готовых универсальных блоков и даже шаблонов.
Однако для вдохновения и общего развития стоит посмотреть и почитать, что и как делают другие специалисты: какие решения используют, как проектируют интерфейсы сайтов, в какой последовательности размещают блоки, как комбинируют шрифты. Мы подготовили подборку сайтов по веб-дизайну, чтобы вы могли самостоятельно изучать отдельные темы.
Для вашего удобства мы свели все ресурсы в таблицы, разбитые по категориям.
Сайты и блоги
Название;Ссылка;Комментарий
Рассылки
Название;Ссылка;Комментарий
Speckyboy Design Magazine; speckyboy.com link=https://speckyboy.com; Рассылка статей для дизайнеров— о создании интерфейсов, об инструментах, о маркетинге и работе с клиентами. Рекомендует Роман Квартальнов. Главред; maximilyahov.ru/hello link=http://maximilyahov.ru/hello; Рассылка о том, как писать полезный текст в информационном стиле. Рекомендует: Максим Смирнов и Дарья Прокуда.
Дизайн-мышление; leshareva.ru/course/mails.php link=http://leshareva.ru/course/mails.php; Еженедельная рассылка-дайджест от проектировщика интерфейсов Лёши Ревы. Рекомендует: Ольга Павлова. Дизайнерский дайджест; awdee.ru/newsletter link=http://awdee.ru/newsletter; Платная рассылка-дайджест о графическом дизайне от создателя Awdee. Рекомендует: Ольга Павлова.
Интерфейсы без шелухи; dangry.ru/sin link=http://dangry.ru/sin; Еженедельная рассылка-дайджест Антона Жиянова. Рекомендует: Ольга Павлова.
Сообщества
Название;Ссылка;Комментарий
CreativeRussia; creativerussia.co link=http://creativerussia.co; Сообщество в Slack про дизайн. Рекомендует: Ольга Павлова. Design Thinking Russian Group; facebook.com/groups/designthinkinginru link=https://www.facebook.com/groups/designthinkinginru; Российское сообщество о дизайн-мышлении в фейсбуке. Рекомендует Ольга Павлова.
Топ 10 программ и инструментов веб дизайнера. Какие программы изучать UX UI дизайнеру в 2020-2021
Russian Prototyping Club; facebook.com/groups/prototypingclub link=https://www.facebook.com/groups/prototypingclub/?fref=ts; Группа в фейсбуке, где дизайнеры со всей России и делятся полезными ссылками и опытом. Рекомендуют: Максим Смирнов и Дарья Прокуда UX club; www.facebook.com/groups/uxclubs link=https://www.facebook.com/groups/uxclubs; Группа UX-специалистов в фейсбуке. Рекомендует: Ольга Павлова.
UX www.facebook.com/groups/intensiveux link=https://www.facebook.com/groups/intensiveux; Открытая группа, посвященная интенсиву по UX/UI в Британке. Материалы, статьи, курсы и вакансии для дизайнеров. Рекомендуют: Максим Смирнов и Дарья Прокуда. UX Ноунеймовая; vk.com/nonamechik link=http://vk.com/nonamechik; Обзоры, дайджесты, трансляции по тематике UX-дизайна. Рекомендует Станислав Осипенко.
Заметки UX-проектировщика; vk.com/ux_notes link=https://vk.com/ux_notes; Полезные статьи, видео, наблюдения по теме дизайна интерфейсов. Рекомендуют Ольга Павлова и Станислав Осипенко. Сообщество дизайн-менеджеров в фейсбуке; facebook.com/groups/design.management link=https://www.facebook.com/groups/design.management.community; Группа в фейсбуке, выросла из курса «Дизайн-менеджмент» в Британской Высшей Школе Дизайна. Рекомендует: Ольга Павлова.
Подкасты и видео
Название;Ссылка;Комментарий
Casey Neistat; youtube.com/user/caseyneistat/videos link=https://www.youtube.com/user/caseyneistat/videos; Канал Кейси Нейстата, очень популярной личности на YouTube, создателя фильмов, влоггера и сооснователя компании социальных медиа Beme. Рекомендует: Никита Обухов. Don’t Fear The Internet; dontfeartheinternet.com link=http://www.dontfeartheinternet.com; Бесплатные видеолекции по азам HTML и CSS. Рекомендует: Роман Квартальнов.
Google Developers; youtube.com/user/GoogleDevelopers/videos link=https://www.youtube.com/user/GoogleDevelopers/videos; Канал Google для разработчиков. Рекомендует: Никита Обухов. Inside Intercom; blog.intercom.com/category/podcast link=https://blog.intercom.com/category/podcast; Подкасты от команды Intercom, в которых эксперты-практики рассказывают о дизайне, стартапах и маркетинге. Рекомендует: Никита Обухов.
Photoshop Tutorials by PHLEARN; youtube.com/user/PhlearnLLC/videos link=https://www.youtube.com/user/PhlearnLLC/videos; Видео-уроки фотошопа для дизайнеров, иллюстраторов и фотографов. Рекомендует: Роман Квартальнов. TechCrunch; youtube.com/user/techcrunch/videos link=https://www.youtube.com/user/techcrunch/videos; Канал крупнейшего издания о технологических новинках. Рекомендует: Никита Обухов. UX Podcast; uxpodcast.com link=http://uxpodcast.com; Грамотный подкаст на узкие темы в сфере UX.
Рекомендует Ольга Павлова. Y Combinator; youtube.com/channel link=https://www.youtube.com/channel/UCcefcZRL2oaA_uBNeo5UOWg/videos; Канал крупнейшего акселератора стартапов. Эксперты делятся историями становлений компаний. Рекомендует: Никита Обухов. ZephyrLab; youtube.com/channel link=https://www.youtube.com/channel/UCUb9MP6Mx64PaBKae2zChFQ/videos; Канал студии ZephyrLab.
Истории о дизайне и доклады с конференций — Dribbble, Дизайн-выходные, LeanKanban.Рекомендует: Роман Квартальнов. Академия Яндекса; youtube.com/channel link=https://www.youtube.com/channel/UCswtUaxvXXZe3KkwMtgrj9g/videos; Доклады от дизайнеров Яндекса. Рекомендуют: Максим Смирнов и Дарья Прокуда.
Телеграм-каналы
Название;Ссылка;Комментарий
Что читать, смотреть и слушать о веб-дизайне: комментарии экспертов
Александр Ковальский,
основатель и директор агентства CreativePeople
Вот уже несколько лет мы обнуляем все наши знания: раньше, мы «рисовали» дизайн, теперь — «придумываем». Это первое, о чем мы читаем.
Вторая тема — управление творческими процессами. Sketch, Slack, Avocode, Invision и десятки похожих компаний вступили в борьбу за эффективность дизайнера, поэтому обязательно читайте их блоги, смотрите и слушайте выступления.
Внутренний Getpocket. Обычно интересные статьи, которые мне попадаются в сети, я собираю здесь. Получается ежедневный журнал, который удобно читать офлайн. В нем — десятки сайтов на русском и сотни на английском языках: блоги, заметки, журналы. Информация очень размазывается и ее тяжело найти в одном месте.
Этими статьями я делюсь внутри CreativePeople с другими дизайнерами, чтобы мы могли обсуждать их и синхронизировать свои знания.
Отмечу несколько фаворитов, которые попадают в подборку достаточно часто.
Medium. Поиск по ключевым словам выдает интересные и свежие статьи. Отдельно стоит выделить два блога: Muzli и Nathan Curtis.
Sketchapp.me. Отличный ресурс, где коллеги собирают статьи по работе sketch. Все чаще публикуют статьи не про управление программой, а про эффективность вообще, про полезные фичи и ускорение дизайнера.
Vc.ru. Следим за новостями и переводами статей по UIX.
Блог Invision. Пишут про то, как добиваться эффективности в проектах, когда требуется коллаборация разных специалистов. Собственно, на этом принципе строится весь их продукт.
Дизайн-кабак. Неплохие подборки в виде еженедельных дайджестов.
Источник: tilda.education
19 бесплатных полезных сервисов для веб-дизайнеров
Для создания дизайна любого сайта у веб-дизайнера в наличии должны быть вдохновение, как и положено всем творческим людям, и инструменты, упрощающие его работу. Сегодня как раз и поговорим о том, какие сервисы станут вашими верными помощниками и где взять вдохновение, когда его нет, а работу над заказом нужно срочно начать.
Бесплатные фотостоки
Фотографии высокого качества украсят любой сайт, сделают его ярче и конкурентоспособнее. Но где найти такие фото? За удовольствие не всегда приходится платить. Есть бесплатные фотобанки, где вы не только найдете множество отличных изображений для своей работы, но и с удовольствием проведете пару часов, наслаждаясь эстетикой этих снимков.
Pexels
На pexels.com содержатся тысячи стоковых фотографий и коротких видео самого высокого качества. Каталог пополняется каждый день фото и видео, которые загружают сами пользователи, а также теми, что администраторы сайта находят в свободном доступе.
Можно, пожалуй, назвать Pexels соцсетью для профессиональных фотографов. Здесь есть даже лайки и возможность подписаться на понравившихся фотографов. Но все фото, появляющиеся на страницах сайта, отличаются высочайшим качеством.
Поиск осуществляется по ключевым словам. Кстати, просмотр сайта и поиск возможен на нескольких языках, в том числе на русском и английском. Но наш совет – используйте поиск на английском языке, так выдача будет гораздо больше.
Есть раздел с каталогами, где фотографии и видео сгруппированы по темам, а также разделы «популярные фото», «популярные категории поиска» и «лучшие фотографы».
Во всех видео на сайте отсутствует звук и какие-либо надписи. Вы вправе после загрузки вносить изменения в них, так же как и в фотографии. Можно наложить звук, текст и создать свой собственный уникальный видеоролик.
Для скачивания фото и видео с Pexels нужно всего лишь нажать зеленую кнопку рядом с выбранным файлом «Бесплатное скачивание». Скачивание абсолютно бесплатно, при использовании фотографии ссылка на источник не нужна, но приветствуется, по словам администраторов сайта. Также есть возможность перейти в Twitter или Instagram автора и отблагодарить его своей подпиской.
Unsplash
На Unsplash.com важно не количество, а качество. Сюда каждые 10 дней редакторы выкладывают 10 лучших фотографий в высоком разрешении.
Тысячи фотографий на сайте сгруппированы по тематическим коллекциям. Нужное вам изображение можно найти с помощью поиска по тегам.
На сайте предусмотрена возможность рассылки, при помощи которой вы всегда будете в курсе обновлений.
Все фотографии имеют лицензию Creative Commons 0 (CC0), а значит, вы можете использовать их для любых целей – личных и коммерческих, вносить изменения и проявить креативность. У сервиса Unsplash есть сайт Made With Unsplash, на котором можно найти лучшие работы с использованием фотографий их стока.
Также на сайте есть возможность ставить лайки понравившимся фото, создавать свои подборки и предлагать свои фотографии для публикации, но после регистрации через e-mail.
Pixabay
Pixabay.com еще один бесплатный фотобанк, на котором вы сможете найти не только фотографии высокого качества, а ещё иллюстрации и векторные изображения.
На сайте есть постоянно пополняющаяся коллекция видео. Все представленные видео, так же как и на pexels.com, без звука и надписей.
Весь контент представлен по лицензии CC0, а значит, как и в уже описанных выше фотостоках дополнительных ссылок на автора или сайт-источник не требуется.
Stock Up
StockUp – это бесплатный фотобанк, где все фотографии представлены в высоком разрешении и по лицензии CC0. Однако, он менее функционален и удобен, чем предыдущие.
Здесь есть возможность искать фотографии по тегам, причём делать это нужно на английском языке. При клике на понравившуюся фотографию вы переходите на сайт-источник, откуда и будет предложено скачать изображение. Никаких каталогов и возможности создать свою подборку.
STOKPIC
Если все предыдущие сайты вы уже просмотрели, а нужную фотографию так и не нашли, то в вашем распоряжении еще один фотосток STOKPIC.COM с бесчисленным множеством изображений.
Здесь всё, как и на большинстве сайтов других бесплатных фотобанков: поиск фотографий по тегам, подборки по категориям и лицензия Creative Commons 0. А ещё возможность подписаться на e-mail рассылку о добавлении новых фото на сайт.
Вдохновение для веб-дизайнеров
Любой дизайнер знает, как порой бывает сложно начать работу над проектом. И вроде есть в голове задумки, но как их реализовать? Как сделать так, чтобы всё смотрелось гармонично, современно и стильно? В интернете есть специальные дизайнерские сервисы, которые непременно вдохновят вас на создание действительно потрясающего дизайна.
FLTDSGN
Для тех, кто любит и часто работает в стиле Flat Lay , сервис fltdsgn.com просто находка. Подборка тематических дизайнов, которые сопровождаются описанием самого проекта. Смотрим, читаем, вдохновляемся.
AWWWARDS
На международной площадке для веб-дизайнеров Awwwards.com вы можете найти вдохновение и стать участником конкурса, показав миру свою работу. Награды присуждают ежедневно («Сайт дня», «Сайт месяца» и «Сайт года»). Правда участие в конкурсе не бесплатное, стоимость подачи сайта – 50 евро. А вот вдохновиться можно бесплатно.
BEHANCE
BEHANCE.NET пожалуй, самый знаменитый ресурс, где можно найти творческие произведения дизайнеров, иллюстраторов и фотографов всего мира.
Этот сервис был запущен еще в 2006 году и является самым крупным сообществом людей творческих профессий. Здесь вы можете делиться опытом, получать восторженные отзывы и комментировать работы своих коллег.
ONEPAGELOVE
ONEPAGELOVE.COM — генератор идей для тех, кто занимается в основном созданием одностраничных сайтов. Обязательно возьмите этот сервис себе на вооружение. Благодаря этому сайту у вас появятся новые идеи и новое виденье, которые помогут создавать максимально удобные для пользователей сайты.
Полезные сервисы для дизайнеров: иконки, палитры и градиенты
При создании любого сайта приходится использовать иконки. Можно, конечно, каждый раз рисовать их самому, а можно воспользоваться бесплатными сайтами и всегда иметь в своем арсенале множество иконок различных тематик и стилей.
Вот самые популярные сайты с бесплатными иконками:
- http://fontello.com/
- https://www.flaticon.com/
- http://endlessicons.com/
- https://thenounproject.com/
- https://icons8.ru
На некоторых из этих сайтов есть и платные опции, но иконок, которые находятся в свободном доступе будет вполне достаточно на пару-тройку тысяч проектов.
Вы обожаете градиенты, но подобрать цвета или сделать плавные переходы для вас сложно? Тогда сайт bg-painter.com вам в помощь. Выбирайте цвета самостоятельно или испытайте удачу.
Источник: wayup.in
31 инструмент для веб-дизайнера
Перед веб-дизайнером стоит ряд сложных задач, которые ему необходимо решить, чтобы выполнить свою работу качественно. Данная подборка инструментов поможет сделать это быстро и эффективно.
Здесь есть сервисы для работы со шрифтами, цветом, контентом и для поиска вдохновения.
1. Stylufy Me
Сервис автоматически создает руководство по стилю сайта. Для этого вам нужно лишь предоставить ссылку на сайт, который вам понравился, после чего stylifyme сам создаст подробный список используемых на сайте шрифтов и их размеры, цвета и даже некоторые изображения.
2. ReadyMag
Платформа, с помощью которой удобно работать с разнообразными веб-материалами. Здесь вы сможете создать презентации, тексты, сайты и даже журналы, которые выглядят как настоящий глянец. Вы можете использовать шаблоны или сделать верстку самостоятельно.
3. Coolors
Простой, минималистичный и забавный сайт, с помощью которого можно быстро сгенерировать цветовую схему.
4. Videvo
Сайт, на котором вы можете найти стоковые видео для использования при монтаже или оформлении сайта.
5. Weld
Ресурс, на котором вы сможете создать веб сайт с любым дизайном и для любого устройства абсолютно бесплатно.
6. Easel.ly
Один из самых лучших, и при этом простых в использовании, инструментов для создания инфографики.
7. The Tiny Designer
5-недельный бесплатный курс дизайна для всех желающих, поможет разобраться что к чему. «В каждом из нас есть маленький дизайнер,» — так говорят сами авторы курсов.
8. FreePik
Хранилище большого количества фотографий и векторных изображений, в том числе и иконок для свободного использования.
9. Animatron
Ресурс, на котором вы запросто можете создавать небольшие анимации: мультфильмы, баннеры, рекламу и так далее.
10. Lucidpress
Сайт, где вы сможете создать создать текстовые материалы для печати или цифровых носителей.
11. Трендлист
Сайт, на котором отслеживают тренды в графическом дизайне. Тренды сопровождаются кратким описанием, примерами работ и диаграммой популярности по годам. Популярность, конечно, не объективная, а именно на этом сайте.
12. Gridlover.net
Онлайн-инструмент для создания модульной системы типографики с вертикальным ритмом. Незаменим для создания модульной сетки в контент-ориентированном экранном дизайне.
13. httpster
Это отличный источник вдохновения для веб-дизайнеров и интерфейсников. На сайте очень много примеров модных сайтов с нестандартными решениями. В общем забирайте к себе на стену, чтобы не потерять.
14. material design palette
Сайт, на котором можно быстро получить цветовую палитру в духе материального дизайна. Кликаете на два любых цвета и получаете набор из 8 цветов с кодами и пояснениями.
15. Gridzzly
Простой инструмент для печати бумаги в точку, линейку, клетку и шестиугольник.
16. NoisePNG
Генератор зашумленной текстуры.
17. Free Vector Maps
Большая библиотека векторных карт разных регионов мира. Почти все карты можно скачать бесплатно, при условии атрибутирования (указания ссылки на сайт), можно заплатить 10 долларов и не указывать ссылку.
18. Fontjoy
Отличные комбинации шрифтов.
19. CloudConvert
Онлайн конвертер файлов. Конвертирует «что угодно во что угодно». Поддерживает 208 форматов файлов: архивы, звук, документы, таблицы, видео, книги, шрифты, презентации… А главное — графику, как растровую, так и векторную.
20. IconStore
Коллекция бесплатных наборов иконок от первоклассных дизайнеров.
21. Find Guidelines
Сборник ссылок на гиды по фирменным стилям интернет-компаний.
22. Iconbird
Русскоязычная поисковая система иконок.
23. Coverr
Сервис, на котором веб-дизайнер может найти бесплатные видеообложки для сайта. Редакция проекта загружает семь новых роликов каждый понедельник. Видео разбиты по категориям: «Еда», «Настроение», «Природа», «Технологии» и другие. Пользователь может сразу же посмотреть, как ролик будет смотреться в качестве обложки для сайта, не загружая видео.
25. Logobook
Онлайн коллекция лучших логотипов и символов.
25. CoolHue
Крутая подборка градиентов для вашего проекта.
26. Novapattern
Коллекция хороших текстур, как бесплатных, так и премиум.
27. Grabient
Красивый и простой сервис по подбору градиентов для UI проектов.
28. Kyle T. Webster Brushes
Больше тысячи профессиональных кистей для Фотошопа.
29. Pigment
Генератор контрастных и сочетающихся цветов.
30. PaperSize
Библиотека, где собраны размеры всех известных форматов бумаги.
31. GIPHY
Главный источник GIF-анимаций, который кроме огромной библиотеки предоставляет возможности самому создать гифку.
Источник: infogra.ru