15 сайтов для вдохновения веб-дизайнера / WAYUP
Любое направление деятельности имеет свои специализированные ресурсы, было бы странно, если бы таковых не нашлось для веб-дизайнеров. Но сегодня мы рассмотрим не форумы и новостные журналы, а сайты с сайтами – есть порталы, публикующие лучшие образцы работ веб-дизайнеров. Там можно найти вдохновение, следить за трендами, формировать свое чувство эстетики и отыскать новые стили. Мы создали подборку сайтов, которыми пользуются практикующие дизайнеры.
Лучшие дизайны сайтов
Красота – понятие субъективное, поэтому иногда трудно понять, насколько хороша собственная работа в понимании других людей. Для этого полезно сравнивать себя с мастерами и равняться на них. Вот несколько порталов, которые специализируются непосредственно на веб-дизайне:
Topdesigninspiration – ресурс с примерами удачных дизайнов, список постоянно пополняется и обновляется. Здесь представлены самые разные виды деятельности и направления, поэтому можно найти интересные решения для своего проекта, отталкиваясь от тематики.
Siteinspire – название говорит само за себя, это галерея отличных вдохновляющих веб-сайтов, которые можно удобно сортировать по категориям.
Designmadeingermany – немецкая педантичность проявляется даже в творчестве, это заметно по идеальным работам, продуманным до мелочей.
Designshack – здесь не только демонстрируются разные проекты, но и анализируются. Каждую неделю разбирается новый сайт, выделяются его сильные и слабые стороны, такая информация будет очень полезной в работе.
Verynicesites – еще один каталог с примерами хороших сайтов, ничего лишнего, только самые интересные решения, выбранные сразу по нескольким критериям.
Webcreme – милые, оригинальные и необычные работы, позволяющие понять важность уникальности каждого дизайна.
Onepagelove – шикарные одностраничные сайты, которые помогут научиться вмещать всю нужную информацию, но не перегружать страницу. Есть разделы по тематикам, блог и шаблоны для работ. Также стоит посетить Land-book – подборку лучших лендингов.
BestWebsiteGallery – тут публикуются проекты и портфолио, работы обсуждаются специалистами и пользователями, так что можно узнать и увидеть много нового.
CSS DesignAwards – каждый день выбирается лучший сайт по версии создателей ресурса. Работы легко сортировать по разным параметрам, выбирая интересную для себя тематику.
Awwwards – ресурс уже всем известный и затертый до дыр, но не упомянуть о нем просто нельзя, ведь каждый веб-дизайнер хотя бы раз черпал свое вдохновение здесь.
Искусство вокруг нас
Вдохновение – вещь тонкая, оно вовсе не поддается логике и систематизации. Поэтому в первую очередь важно прислушиваться к своим собственным ощущениям, замечать, какие моменты дарят радость и воодушевление. И это совсем не обязательно изобразительное искусство – часто на хорошую идею могут натолкнуть музыка, запахи, эмоции, впечатления.
Но будем отталкиваться от того, что большинство веб-дизайнеров все же относятся к визуалам, то есть к людям, воспринимающим мир в большей степени благодаря зрению. В этом случае для вдохновения нужны гармоничные образы вокруг. И самый важный аспект – рабочее место и дом. Согласитесь, не всегда хочется творить шедевры, если вас окружают совершенно невзрачные обыденные вещи. Сделать интерьер интересным и приятным – главная задача. Но это привычная атмосфера, а для творчества нужен всплеск. Для этого необязательно ездить по галереям – достаточно хотя бы раз в неделю менять маршрут, просто гулять по городу, обращая внимание на детали, а не на собственный смартфон, как обычно.
Ритуал вызова вдохновения может быть очень сакральным, а может и довольно странным – иногда творить хочется после самых простых вещей, которые случаются с нами повсеместно: посещение лавки с цветами, необычное блюдо на обед, шуршащие листья в парке, чай в новой чашке, знакомство с уличным котом. Важно отмечать приятные сочетания цветов и форм, чтобы перенести их позже в свой дизайн.
Не только для вдохновения, но и для получения новых знаний можно посмотреть интересные мастер-классы, например, Дизайн 3-х сайтов за один вечер для реальных клиентов или Дизайн для реального заказчика на фрилансе.
Можно черпать идеи прямо на рабочем месте, для этого есть ресурсы с прекрасными артами:
Behance.net – дизайнерские проекты разных направлений и категорий от логотипов до вывесок. По сути это социальная сеть для творческих личностей. Тут можно почерпнуть идеи не только для сайта, но и для корпоративного стиля в целом.
Pinterest – без этого сайта никак нельзя, это кладезь идей на все случаи жизни, немало из них относятся и к веб-дизайну. Преимущество ресурса в том, что можно сохранять себе интересные идеи на так называемую доску. Потом сайт присылает на почту новые подборки по той же тематике, включая не только сохраненные темы, но и те, которые часто просматривались. Осторожно, тут легко зависнуть на несколько часов.
Dribbble – еще одна дизайнерская социальная сеть, которую знают все. Ее особенность в том, что стать членом клуба можно только по приглашению участника, поэтому случайных людей там нет и все работы достойного уровня. Без приглашения нельзя публиковать свои материалы, но можно просматривать чужие.
DesignCollector – картинки, фотографии, рисунки, видео, разные мелочи, которые приятно созерцать. Много современного искусства.
Designspiration – фотографии, дизайнерские работы и все, что может понравиться дизайнеру. Напоминает Pinterest своим разнообразием и обилием информации, а также возможностью сортировки по темам.
Вдохновение или плагиат?
Грань между плагиатом и вдохновением совершенно не тонкая – легко понять, где идеи нагло срисованы или «деликатно заимствованы», а где настоящая авторская работа. Использовать чужой труд – плохо. И даже если не говорить сейчас о нормах морали и интеллектуальной собственности, стоит понимать, почему плагиат недопустим – он ведет к деградации дизайнера как творческой личности. В этой профессии важен креатив, а его тоже нужно развивать, как и любой другой навык. Постоянное заимствование приведет со временем к несостоятельности как художника.
Да, на начальных этапах обучения многие наставники рекомендуют скопировать хороший сайт. Но это делается для отработки навыков, умения решать задачи, осознания объемов работы и понимания, как выглядят качественно сделанные страницы. Так и в художественной школе учатся делать репродукции картин, чтобы потом легко создавать свои.
Но рассмотрим и другую ситуацию. Вдохновение бывает не всегда, иногда идеи иссякают, а дедлайны никто не отменял. Что делать в этом случае? Работу выполнить нужно и сделать это требуется на уровне. И даже здесь плагиат – не выход. Если просмотр любимых сайтов, отдых и недолгая смена деятельности не помогли, то можно прибегнуть к переосмыслению чужого дизайна. Как это работает:
- находим сайт с интересным дизайном;
- отмечаем, что именно в нем нравится;
- преобразуем интересные моменты в аналогичные – если нравятся контрастные цвета, то берем другие, если плавные линии – вписываем их в свой сайт, но не копируем;
- добавляем необходимые элементы своего проекта;
- вуаля, готов новый дизайн с теми же преимуществами, но совершенно другим видом.
Новичкам пригодится урок по созданию профессионального дизайна сайта:
Также можно нахватать интересных элементов с разных сайтов и объединить их в своем проекте, но это вариант не для новичков – важно чувствовать целостность структуры и грамотно сочетать каждую деталь, а с таким походом гарантий нет. Если вы еще только начинаете осваивать профессию веб-дизайнера, полезным будет совершенно бесплатный курс «Веб-Дизайнер: Взрывной старт».
Еще один рабочий метод борьбы с отсутствием вдохновения – просто брать и делать. Звучит не очень привлекательно, но если использовать для этого такие ресурсы как Freebiesbug или Freepik, то все становится веселее – на этих сайтах есть масса бесплатной графики, в том числе иконки, иллюстрации, PSD-макеты и прочие полезные мелочи. Выбирая одну из них легко можно увлечься и схватить музу за хвост.
Хорошие идеи для дизайна могут возникнуть совершенно спонтанно, поэтому обязательно записывайте концепции – они обязательно пригодятся! Можно использовать специально приобретенный для этого красивый блокнот, заметки в телефоне, рассказывать мысли своему диктофону, чувствуя себя агентом ФБР. Креатив – это основа профессии, поэтому нельзя его подавлять. Вдохновляйтесь каждым мгновением и получайте от своей работы удовольствие!
40 сайтов для дизайнера
Подборка из 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
Блог, содержащий множество исходников, распространяемых по принципу open-source и предназначенный для веб-разработчиков и дизайнеров.
29. happycog.com
На этом сайте его создатели публикуют свои собственные красивые веб-сайты и делятся лучшими из своих идей.
30. webdesignerwall.com
Каждый дизайнер должен знать, пусть даже если он не интересуется веб-дизайном.
Ресурсы
31. designfloat.com
Сайт по типу сайта digg.com, только на тему дизайна.
32. psd.tutsplus.com
Сайт с очень хорошими пошаговыми уроки по веб-дизайну, как для новичков, так и для профессионалов.
33. bluevertigo.com.ar
Настоятельно рекомендую этот сайт, в котором собраны ссылки на, пожалуй, все крупные фотобанки интернета.
34. sxc.hu
Один из самых крупных, любимых и бесплатных фотобанков интернета. Хороший выбор изображений любого качества и тематики.
35. iconfinder.com
Название сайта говорит само за себя.
36. dafont.com
Один из моих самых любимых сайтов, посвященных шрифтам. Более 11 000 шрифтов на любой вкус.
37. womtec.ru
Еще один сайт, посвященный шрифтам. Большое количество хороших, интересных русских шрифтов. Скачать можно бесплатно.
Более полную подборку, касательно исключительно типографики и соответствующих ресурсов смотрите здесь.
38. w3csites.com
Отличный выбор для разработчиков W3C сайтов.
39. colourlovers.com
Один из самых крупных ресурсов с огромной коллекцией цветовых сочетаний, которые можно сохранить в любом удобном для вас формате.
40. infogra.ru
Отличный ресурс с подборками графических элементов для дизайнеров: иконки, паттерны, заготовки, мокапы и многое другое 🙂
Не важно кто вы: профессиональный дизайнер или любитель, smm-специалист или владелец бизнеса и т. д. Картинки, видосы, иконки и прочие штуки для сайта, поста, статьи, баннера временами ой как нужны всем, кто трудится над продвижением бизнеса в Интернете.
Создать свой проект с нуля может не каждый. Но каждый может в разы облегчить себе жизнь, узнав о некоторых инструментах и «примочках», которыми мы поделимся в этой статье. Тем более что все представленные ресурсы бесплатны (ну или почти все).
Материал разбит на тематические блоки, чтобы вам проще было ориентироваться и выбирать нужный сервис. В общем, читайте, берите и пользуйтесь. 😉
Смотри, любуйся, вдохновляйся
- https://dribbble.com/ – популярный среди дизайнеров веб-портал. Дизайнеры со всего мира выкладывают свои работы и делятся опытом. Сайт – это социальная сеть для креативных людей: смотрите и оценивайте чужие работы как зарегистрированный пользователь. Делиться своими работами можно после специального приглашения (invite) от друга-дизайнера. Или показав свои работы другому пользователю с имеющимся приглашением.
- https://www.behance.net/ – сетевая платформа для творческих людей. Behance предназначен не только для дизайнеров и иллюстраторов, но и для художников, фотографов, видеографов, архитекторов и многих других людей, чья профессия связана с креативом. Большинство работ представлены как полноценные презентации своих навыков и талантов.
- http://revision.ru/ – сетевой выставочный зал в основном с работами русскоязычных дизайнеров.
- https://onepagelove.com/ – площадка с большим разнообразием одностраничных сайтов, созданных дизайнерами и разработчиками с разных уголков планеты.
- https://land-book.com/ – еще один сайт-портфолио только одностраничных сайтов.
- https://www.awwwards.com/ – авторитетная премия в мире веб-дизайна и разработки сайтов. На сайте представлены лучшие работы студий со всего света.
- 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://fontawesome.io/ – шрифт, генерирующий иконки.
- 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://fonts.google.com/ – бесплатные шрифты от Google.
- 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/ButtonStylesInspiration/ – коллекции эффектов кнопок при наведении.
- https://tympanus.net/Tutorials/CaptionHoverEffects/ – эффекты наложения заголовка.
- https://tympanus.net/Development/HoverEffectIdeas/ – вдохновляющие коллекции эффектов при наведении на фотографию.
- https://codepen.io/search/pens?q=canvas&limit=all&type=type-pens – бесплатные живые фоны для вашего сайта от профессиональных разработчиков и любителей (работы в основном для вдохновения, не для коммерческого использования).
Конечно, сервисы – это очень полезно. Но помните, что не стоит полностью копировать бесплатные шаблоны макетов PSD, вставляя стоковые изображения, даже если это позволяет лицензия. Проект должен быть заточен под конкретные цели, а дизайн – помогать понять содержание и совершить целевое действие.
Создание сайта, рекламного баннера, картинки для статьи или поста в соцсетях – это комплексное мероприятие. Поэтому, помимо подбора красивенького изображения, не забывайте о качестве текста, удобстве ресурса и т. д. Кстати, все вышеперечисленные работы можно сделать в рамках редизайна и доверить это профессионалам. Без лишней скромности рекомендую нас. 😉
70+ лучших ресурсов о веб-дизайне
Следим за разными источниками по дизайну интерфейсов: от блогов до Slack-сообществ. В основном, читаем подборки со статьями, но есть и качественные авторские материалы.
То, что кто-то из нашей компании мониторит эти источники, совсем не значит, что это делают все. Тут кто во что горазд — сплошная вкусовщина.
КриэйтивРаша. Slack-сообщество «про дизайн вообще».
Дизайн-кабак. Дизайн-сообщество на Medium.
UX club. UX-сообщество в фейсбуке.
Сообщество дизайн-менеджеров в фейсбуке.
Design Thinking Russian Group. Российское сообщество о дизайн-мышлении в фейсбуке.
Дизайн-мышление. Еженедельная рассылка-дайджест от проектировщика интерфейсов Лёши Ревы с подборкой полезных статей.
Интерфейсы без шелухи. Еженедельная рассылка-дайджест от Антона Жиянова. Только лучшие статьи и только на русском.
Дизайнерский дайджест. Платная рассылка-дайджест о графическом дизайне от создателя Awdee.
Дайджест продуктового дизайна. Рассылка и блог Юры Ветрова, сотрудника Mail.Ru Group
Vc.ru. Читаем статьи об интерфейсах и узнаем российские отраслевые новости.
Хабрахабр. В основном, читаем статьи об интерфейсах, пользовательском опыте и часто заглядываем в рубрику «Технологии».
Internet9000. Телеграм Сергея Сурганова, арт-директора «Медузы», в котором он делится интересными ссылками и мыслями.
Блог о дизайне и интерфейсах. Автор — Максим Шайхалов, проектировщик интерфейсов — готовит подборки статей и полезных инструментов, делится личным опытом.
Заметки UX-проектировщика. Полезные статьи, видео, наблюдения по теме дизайна интерфейсов.
UX Podcast. Грамотный подкаст на узкие темы.
Под рукой держим ещё несколько ссылок, расширяющих сознание. Мы используем эти ресурсы, чтобы быстро найти информацию по конкретным вопросам, поэтому заходим на них при необходимости, все записи не отслеживаем.
Tumblr. Тут можно найти и отыскать актуальные тренды, не только визуальные.
Medium. В личных блогах коллеги делятся вариантами решения частных проблем. Можно либо найти и мониторить блоги конкретной тематики, либо искать записи по ключевым словам.
Sketchapp.me. Нюансы использования инструмента Sketch.
А еще мы с особым интересом следим за социологическими исследованиями:
Лучшие дизайны сайтов по версии Awwwards
Дизайнер вы, фотограф, маркетолог или работаете в сфере онлайн-коммерции, вам стоит быть в курсе последних трендов веб-дизайна. Поэтому мы опубликовали подборку лучших дизайнов сайтов, отмеченных престижными наградами. Сегодня мы посмотрим на топ 18 дизайнов веб-сайтов 2017 года по версии Awwwards.
Awwwards — это конкурс профессиональных разработчиков и веб-дизайнеров. Цель сообщества заключается в продвижении лучших достижений и инноваций в веб-дизайне. Разработчики могут бесплатно подавать заявки на участие своих веб-сайтов в конкурсе, и Awwwards ежегодно проводит церемонию вручения призов, на которой награждает лучшие из работ.
Сначала веб-сайты проходят голосование в номинации «Сайт дня», которое проводится сообществом Awwwards совместно с международным жюри, состоящим из дизайнеров, разработчиков и рекламных агентств. В конце года победители попадают в книгу «The 365 Best Websites Around the World» («365 лучших веб-сайтов мира»). Следующий этап — «Сайт месяца», на котором определяются финалисты конкурса «Сайт года».
Ну а теперь давайте окунемся в креативный мир самых лучших дизайнов сайтов года.
1. KIKK Festival 2016
от студии Dogstudio, Бельгия
Перейти на сайт
2. Because Recollection
от рекламного агентства 84.Paris, Франция
Перейти на сайт
3. In Pieces
от дизайнера Брайана Джеймса, Нидерланды
Перейти на сайт
4. Falter Inferno
от студии WILD, Австрия
Перейти на сайт
5. Protest Sportswear
от агентства Build in Amsterdam, Нидерланды
Перейти на сайт
6. Weber — BBQ Cultures
от агентства UncleGrey, Дания
Перейти на сайт
7. Paper Planes
от продакшен-студии Active Theory, США
Перейти на сайт
8. Beagle — Better proposals
от цифрового агентства Spring/Summer, Дания
10 сайтов с необычным дизайном | GeekBrains
Подборка сайтов с современным дизайном — нетипичной версткой и анимацией, футуристичными элементами и 3D-графикой.
https://d2xzmw6cctk25h.cloudfront.net/post/1875/og_cover_image/d8f85caf3032e8fc60e4a74e1b9bac2f
Сайт семейного австралийского ресторана морепродуктов. Оформление похоже на газету и бумажное меню одновременно. При открытии сайта главная страница «вылетает», как передовица в рекламных роликах двадцатого века. Блоки с историей Sea harvest, рецептами и рассказом о добыче рыбы оформлены как газетные колонки — под каждым есть надпись вроде «продолжение на странице 4». На сайте реализовали даже заметки: если зажать левую кнопку мыши и «подчеркнуть» текст, останется след от маркера.
Сайт американского креативного агентства Sagmeister & Walsh. Студия разрабатывает брендинг, рекламу, контент и снимает короткометражки. Креатив прослеживается не только в кейсах агентства, представленных на главной странице: описание компании завершили фразой «We probably eat avocado more than you do».
Но самое интересное здесь — не оформление проектов, а возможность понаблюдать за работой студии. В хедере Sagmeister & Walsh разместили трансляцию с камер в офисе, и посетители сайта в режиме реального времени видят, что происходит в студии.
Studyum называют образовательной площадкой будущего. Это система, которая работает с помощью блокчейна — изучает то, как пользователи учатся, и вознаграждает их за прогресс. На сайте наблюдается минимализм во всем: опрятная типографика, палитра из пяти цветов, аккуратная верстка. Идеально для представления сложной информации.
Еще один сайт рыбного ресторана. Структура главной страницы простая, но эффектная. Ролик с приготовлением fish and chips сопровождается рассказом о работе заведения — от закупки морепродуктов до секретов кухни. Картинка настолько аппетитная, что неизбежно вызывает желание отобедать стейком семги.
Сайт шведской команды дизайнеров, разработчиков и архитекторов, среди работ которой — айдентика Нобелевской премии. Сотрудники студии минималистичны не только в представлении проектов, но и в описании: «Стокгольмская лаборатория дизайна превращает бренды и компании в простые, выдающиеся решения». Сайт — отличная демонстрация аккуратного дизайна, который сгодится для портфолио.
Сайт компании Libratone, которая производит беспроводные колонки и наушники. Ее страсть к проектированию и дизайну отразилась в libratone.com — это приятный лендинг с качественными фото, спокойной цветовой гаммой и неброской анимацией. Хороший пример презентации продуктов — ничего не отвлекает от главного.
Сайт английской компании Duroc, которая продает марокканские томаты. Не каждый производитель продуктов похвастается настолько стильным сайтом. Здесь анимированы все без исключения элементы — даже история компании представлена в виде интерактивного таймлайна. Дизайн разработала студия Bonhomme: для каждого раздела они сняли по ролику в своем фирменном стиле.
Сайт российского агентства, которое специализируется на разработке и продвижении. Интересен itech-group.ru тем, что состоит из простых по содержанию, но от этого не скучных блоков. Видно, что отечественные разработчики внимательно отнеслись к представлению своих работ: добавили на сайт много графических элементов, которые не отвлекают внимание от сути.
Студия веб-дизайна и разработки под руководством программиста. О причине появления компании сотрудники North3 говорят, что хотели помогать делать сайты без творческих ограничений: «Зачем нужен сайт, похожий на тысячи остальных?» Портфолио действительно отличается от большинства — много ярких цветов, анимации. Правда, последнее быстро надоедает: логотип студии всплывает на каждой новой странице перед тем, как появляется контент.
Сайт французской клиники рассказывает о лечении онкологических заболеваний. Хоспис Civils de Lyon сопровождает пациентов с этой болезнью всю жизнь. На сайте публикуют материалы на французском языке о диагностике, профилактике и методах лечения, а через интервью специалистов раскрывают социальные и психологические аспекты онкологии. Портал поднимает непростую тему, но не пытается напугать — наоборот, он выполнен в спокойной цветовой гамме, с мягкими переходами и фирменными иллюстрациями. Цель aproposducancer.fr — показать людям, что все будет хорошо, если относиться к здоровью внимательно.
Шрифты
- Google Fonts – всеми любимая библиотека шрифтов. Позволяет подобрать и скачать разные шрифты на все случаи жизни.
- 1001 Free Fonts — библиотека шрифтов. Имеет удобную навигацию – шрифты отсортированы как по алфавиту, так и по типам. Имеется раздел русских шрифтов.
- Fontstruct – онлайн конструктор шрифтов. Очень простой инструмент, позволит создать собственный шрифт. Рисовать можно не только стандартными квадратами, но и другими фигурами – точки, закругленные углы и пр. Для начинающего идеальный инструмент, чтобы попробовать и увидеть типографику в действии.
- Font Squirrel – одна из самых больших библиотек шрифтов. Кроме этого можно загрузить рисунок и получить названия шрифтов, используемых на нем. Есть магазин шрифтов, и даже магазин одежды с логотипами.
- Type light – полнофункциональный редактор шрифтов. Позволяет создавать, редактировать и конвертировать шрифты OpenType, TrueType и PostScript. Необходимо скачивать и устанавливать. Бесплатная версия имеет ограниченный функцуонал по сравнению с бесплатной. Но для создания простого шрифта хватает.
- What Font is – онлайн сервис для подбора шрифтов сайта. Загружаем файл шрифтов, указываем url сайта и выидим как загруженный шрифт будет выглядеть на сайте. Удобнцый сервис.
- 1001 Fonts – библиотека шрифтов (более 15000). Удобная навигация – шрифт можно выбрать по размеру, типу, теме, дизайну и т.д. Меню позволяет настроить вывод, что дает возможность увидеть каждый шрифт в разных опциях: размер, начертание и т.д.
- Font Flame – онлайн сервис подбора пары сочетаемых шрифтов. Действует очень просто – на главной странице предложен листок с двумя надписями, сделанными разными шрифтами. Понравилось – жмите «Love», нет – «Hate». Потом выбранные можно просмотреть еще раз. Клик по названию шрифта открывает Google Fonts.
- Typecast – выбор шрифта для прототипа. Можно просмотреть как шрифт будет выглядеть на любых устройствах. Необходимо обозначить разные типы текста – заголовки, кавычки и т.д. Можно выбрать гарнитуру, размер, начертание, установить отступы. Вы увидите вашу будущую страницу в тех шрифтах, которые установили. Большой плюс – выбор макета (одна колонка или несколько, разные расположения блоков).
- Wordmark — позволяет подобрать шрифт, установленный на компьютере пользователя, для текста, логотипа или заголовка. При вводе текста в поле показывает его различными шрифтами. Можно выбрать размер, регистр, отображение черно-белое или наоборот. Понравившиеся варианты публикуются в триттере или на фейсбуке – по выбору пользователя. Можно отправить на email.
Стоки фотографий
- Unsplash – постоянно пополняемый сток фото. Коллекции разделены на темы. Можно найти все что угодно, от «Афроамериканцы» до «Природа». Каждая фотография имеет свою оценку, можно посмотреть лучшие или новинки.
- FoodiesFeed – фото еды. Изображения разбиты по категориям. Можно выбрать лучшие, эксклюзивные, иконки, мокапы и пр.
- Free Refe Photos — огромный список изображений «Real life». Главным образом пейзаж и фотографии природы. Неудобная навигация, все фото на главной странице, появляются при скроллинге.
- Little Visuals – качественные фото ландшафтов и зданий. Можно скачать архивом лучшие фото, выложенные за неделю. Фотографии обозначены хештегами, но не разбиты по категориям.
- Gratisography – огромная библиотека бесплатных фото. Все фото разбиты на шесть тем: люди, гримасы, города, предметы, природа и животные. Можно искать по словам.
- Death to the Stock Photo – сток фотографий. Просто посмотреть и выбрать нельзя. Они делают подборку за месяц и дают ее скачать после ввода email. Архив весит около 11 Мб. На почту присылают лучшие фото и ссылку на скачивание.
- Superfamous – большая коллекция фото с необычного ракурса. Набор небольшой, но интересный.
- The Pattern Library – шаблоны и текстуры. Набор достаточно велик, шаблоны необычны. Сменяются прокруткой, причем постепенно. Можно увидеть как шаблон будет выглядеть на весь экран или на его часть.
- New Old Stock – винтажные фото из архивов. Бесплатных фото немного, но регулярно появляются новые.
- Pexels – большое количество фото на все случаи жизни. Разбиты по темам, очень удобно искать.
- Jay Mantri — большой набор фотографий. Классификации как таковой нет, можно посмотреть по месяцам.
Стоки графики
- Brusheezy – бесплатные кисти, шаблоны, текстуры и прочее для фотошопа. 12 категорий, в каждой из которых подкатегории. Выбор огромен.
- Iconfinder – иконки, как платные, так и бесплатные. Скачать можно в форматах ICO, PNG, ICNS, SVG.
- Brushez – большая коллекция кистей для фотошоп. Кроме них еще векторные примитивы, формы, шаблоны, стили. Каждый раздел разбит на подразделы. Например, для кистей более 20 категорий.
- Vecteezy – бибилотека векторной графики, включая изображения и иллюстрации. Большое количество категорий и огромное – графики.
- Iconbird — русскоязычный сервис по поиску иконок. Можно ввести тему и получить набор иконок, а можно просматривать по категориям.
- Icons8 — русскоязычный сервис, предлагающий более 42000 иконок по разным тематикам.
Инфографика
- Vizualize – онлайн сервис для создания инфографики «О себе». По сути, создает графическое резюме.
- Canva – простой инструмент для создания любого дизайна. Позволяет оформить презентацию, плакат, запись в соцсетях, книги, письма, материалы и многое другое. Все делается на основании шаблонов, меняется текст. Но шаблонов очень много, есть из чего выбрать.
- Easelly – создание инфографики на основании шаблонов. Встроенный онлайн редактор позволяет менять оформление, размещать дополнительные жлементы, менять текст.
- Infogram – онлайн сервис для создания инфографики и интерактивных диаграмм. Не все функции доступны, придется покупать аккаунт.
- Visage – простой инструмент для создания любого визуального контента (диаграммы, инфографика, изображения для блога и пр.). Множество шаблонов, простой редактор. Некоторые функции платные.
- Gliffy – онлайн сервис для создания диаграмм. Редактор действует по принципу Microsoft Visio.
- Visme – онлайн инструмент для создания презентаций и инфографики. Более 1000 шаблонов. Редактор позволяет добавлять текст (заголовки, списки, кавычки и обычный), анимированный текст и виджеты. В бесплатном аккаунте можно скачать как JPG файл.
- Piktochart – создание высококачественной графики – презентации, инфографика или печатный материал. Выгружается PNG, JPG разных размеров.
- Drawio – удобный онлайн сервис для создания диаграмм. Можно сохранять в dropbox и подобные сервисы, можно на диск.
- Venngage – простое создание инфографики, плакатов, отчетов, материалов для соцсетей и пр. В бесплатной версии дает только ссылку на публикацию. За скачивание надо платить.
- Cacoo —онлайн сервис для рисования диаграмм и карты сайта. Пожалуй, самый лучших по возможностям. Большое количество инструментов и шаблонов. Экспортировать можно в PNG, PDF, SVG, PPT и др.
- Creately – онлайн сервис рисования диаграмм. Доступны только для публикации. Скачивание платное.
- Lucidchart — онлайн сервис создания диаграмм и чертежей. Есть возможность импортировать диаграмму Microsoft Visio. Экспортируется в PDF, PNG и JPG. Имеется платный функционал.
Цвета
- Color Hunt – подбор сочетаний цвета. Можно подбирать до четырех цветов. Есть готовые решения для выбора.
- TinEye – анализирует сайт и выводит список ресурсов, на которых используется картинка с сайта.
- ColorZilla – позволяет создавать цвета и градиенты. Выводит css свойства для них.
- Adobe Color CC – создание цветовых схем.
- Colicious – нажимайте на пробел и генерируйте новый цвет.
- Colorscheme — подбор цветовых схем. Есть версия на английском и на русском. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.
- Paletton – инструмент для создания комбинаций цветов. Ничем не отличается от Colorscheme.
- Pictaculous – анализирует палитру изображения PNG, JPG или GIF. Загружайте изображение и получите набор всех цветов, которые в нем присутствуют.
- Hex Color Tool – инструмент выбора цвета. Ползунками настраивается цвет, можно выбрать яркость. Затем выбранный цвет сохраняется. Можно подобрать палитру.
- (Un)clrd – плагин для браузера, который удаляет все цвета и оставляет сайт в черно-белом цвете.
- BrandColors — самая большая коллекция официальных фирменных цветовых кодов. Выбираете название бренда и скачиваете названия его цветов, в том числе и в css- файл.
- Colortyper — подбор цветов с необычного ракурса. На экране показываются разноцветные символы, которые пересекаются. Результат пересечения – новый цвет. Выглядит интересно.
Вдохновение
- Dribbble — Самое многочисленное сообщество дизайнеров. Работы, сообщества, общение – здесь можно найти все что угодно.
- Freebbble – шаблоны и дизайны из Dribbble. Что-то можно скачать бесплатно, что-то купить. Можно найти шаблоны для CMS, конструкторов, иконки, мокапы, сверстанные шаблоны сайтов и многое другое.
- Muzli — Ежедневное вдохновение дизайна. Ресурс для дизайнеров с примерами самых необычных работ.
- Awwwards – лучшие разработки дизайнеров. Организован как сообщество, где можно проголосовать сайт. Выбираются сайт дня, месяца, года и пр. Большое количество дизайна, видео, разработок.
- Design You Trust — сообщество дизайнеров, совместно использующее последние тенденции, новости, портфолио, дизайны и творческие объявления.
- Really Good Emails — огромная коллекция хорошо разработанных электронных писем. Выбираете шаблон и получаете его код html, css и js. Можно менять текст, рисунки и пр.
- Fubiz – публикации из области дизайна и креатива. Можно найти фотографии, дизайн, графику, видео и др. Все разбито по категориям.
- Designspiration – коллекция дизайнов в стиле Pinterest. Огромное количество идей и примеров – типографика, логотипы, письма и многое другое.
- Behance – коллекция портфолио от профессионалов. Можно оставить вакансию или резюме.
- Mobile-patterns – библиотека скриншотов iOS и Android. Все разбито по разделам. Можно найти много идей.
- One Page Love – галерея лучших дизайнов web-страниц. Можно купить шаблоны и темы. Есть и бесплатные.
- Uispace — ресурс для дизайнеров. Можно бесплатно скачать psd, sketch, шрифты, мокапы и пр.
Графические редакторы
- DAZ 3D — 3D моделирование. Регистрируетесь и скачиваете дескопное приложение.
- Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым — можно скачать дополнительные плагины.
- Blender — 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
- Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
- Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск.
- BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
- Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG — работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
- IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
- Falco GIF Animator — программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ.
- Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС.
- Boxy-SVG — редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
- Photopos — многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
- 5Dfly — бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
- PaintStar — бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
- PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.
- Pablo — онлайн редактор, создающий изображения для социальных сетей. Можно загрузить изображение, посмотреть его для разных устройств, наложить эффект и и текст.
- Internet Marketing Ninjas – онлайн сервис для быстрой обрезки изображений. Очень удобно, если надо сделать быстро.
- Meme Generator — генератор мемов. Можно выбрать картинку, создать подпись или сгенерировать ее автоматически. Не скачивается, только публикуется в соцсетях.
Программы для создания логотипа
- Free Logo Maker – онлайн редактор для создания простых логотипов. Позволяет рисовать с нуля. Бесплатно сохраняет в PNG.
- DesignMantic – сервис, генерирующий логотип. В редакторе можно изменить, добавив новую форму или текст.
- Logotype Maker – сервис, генерирующий логотип на основании шаблона. Потом можно поменять в редакторе. Сохраняет в JPG и PNG форматах.
- Jeta Logo Designer — позволяет быстро создать красочный логотип. Очень проста в обращении. Имеет набор из более чем 10000 фигур и иконок. Возможности стилизации достаточно велики. Объекты, как и текст, можно трансформировать и поворачивать, добавлять эффекты сглаживания, свечения, обводки, тени и т.д. Всего имеет около 200 стилей для фигур. Ручное рисование не предусмотрено, но можно загружать рисунки. Имеет собственные шаблоны логотипов.
- Flaming Text — онлайн сервис для разработки дизайна логотипа. Основан на шаблонах, но имеет встроенный редактор. Сохраняет в PNG формате.
- Logo Ease — программа для создания логотипов. Логотип можно создать на основании шаблона, редактировать.
- Online Logo Maker — онлайн сервис создания логотипов. Простой редактор, легко скачать. Бесплатно только вариант на 300px.
Прототипирование
- Napkin – десктопное приложение для быстрого создания мокапов для iPhone.
- HTML5 UP – отзывчивые и адаптивные шаблоны HTML5.
- Inkbrush — Онлайн инструмент для проектирования шаблонов писем электронной почты. Совмещается с почтовыми службами.
- Marvelapp – онлайн сервис для создания интерактивного прототипа. Можно создать прототипы для разных устройств. Позволяет загружать готовые макеты, просто перетаскивая их в указанную область. В качестве рисунков используйте mockup. Загружайте, выделяйте области, настраивайте переходы. Интегрирован с DropBox и ГуглДиск, Sketch.
- MockPlus – программа для создания прототипов на всех платформах. Скачивайте и создавайте. Досьупно для всех устройств.
- InVision – приложение для совместной работы над прототипом проекта. Инструмент для компании любого размера. Разработка программного продукта с общим доступом — все этапы могут видеть и контролировать как разработчики, так и менеджмент компании.
- Pencil – десктопный инструмент создания прототипов и интерфейсов. Имеет большой набор инструментов, в том числе диаграммю
- iPlotz — создание управляемых каркасов сайта или приложения. Для шаблонов можно получить код HTML. Есть онлайн версия, есть десктопная.
- MockFlow — создание моделей интерфейсов пользователя. Бесплатный доступ ограничен одним пользователем на один проект.
- Pictofon – быстрое создание мокапа для любого устройства. Выбираем макет, загружаем картинку и получаем мокап в PNG формате.
- Placeit — Бесплатные шаблоны и мокапы для всех типов устройств. Выбираем макет (от него зависит ракурс просмотра), указываем имя сайта и видим как он будет выглядеть.
- Pixli – платформа для web-дизайна. Есть бесплатный аккаунт, в котором можно создать мокап, прототип и на его основании сразу сайт.
В нашей подборке мы собрали 101 инструмент для дизайна. Не все сервисы абсолютно бесплатные, некоторые имеют платные аккаунты. Тем не менее, свободными версиями тоже можно пользоваться, получая результат.
Мы планируем расширять эту подборку новыми сервисами и разделами. Будем благодарны, если вы поделитесь своими находками!
32 Вдохновляющие Примеры Дизайнерских Вебсайтов
Дизайн интерьера — это наведение порядка и согласованности в пространстве, как и веб-дизайн. И так много принципов хорошего дизайна интерьера также можно найти на хорошо разработанных веб-сайтах.
Фотография — самый важный элемент. Неважно, если ваш бренд строгий, минимальный или теплый — на вашем сайте должно быть достаточно свободного места для демонстрации большой фотографии.Фотография большая нет-нет. И вам не нужна необычная навигация или необычная типография — держите свою работу впереди и в центре.
Моя работа поддерживается партнерскими комиссиями, поэтому я могу заработать комиссию, если вы выберете конструктор сайтов на основе этой статьи.
,Профессиональный дизайн сайтов доказал, что вырастите свой итог
Ваш веб-сайт, возможно, является вашим самым важным маркетинговым активом, и если он не будет развивать ваш бизнес, пришло время для нового. Учтите это:
- 93% онлайн-опыта начинаются с поисковой системы.
- 63% потребителей в основном используют веб-сайт вашей компании для поиска и взаимодействия с вами.
- 75% оценили авторитет компании на основе дизайна ее сайта.
В современном цифровом мире бизнеса каждой компании нужен веб-сайт — он действует как ваш виртуальный торговый представитель 24 часа в сутки, семь дней в неделю. Если ваш веб-сайт не подходит для мобильных устройств, устарел, не превращает посетителей в потенциальных клиентов или просто не удовлетворяет вас, вам нужны профессиональные услуги по дизайну веб-сайтов от компании, которая упрощает процесс. Нужен редизайн сайта? Мы тоже это делаем! Прокрутите вниз, чтобы узнать больше, или свяжитесь с нами ниже, чтобы начать!
Узнайте, как мы увеличили годовое лидерство одной компании на 760% благодаря редизайну веб-сайта »
Наши услуги по дизайну веб-сайтов
У нас есть индивидуальное решение для вашей компании — от дизайна веб-сайтов для малого бизнеса до крупных проектов на уровне предприятия.
-
Нам нравится показывать, а не рассказывать, поэтому мы приглашаем вас посмотреть нашу галерею нестандартных дизайнов сайтов. Видишь то, что тебе нравится? Давайте сделаем это.
-
Мир стал мобильным — более 50% всех запросов веб-сайтов происходит на мобильном устройстве. Может ли ваш сайт справиться с этим? Мы разрабатываем ваш веб-сайт с учетом требований к мобильному устройству — оптимизируем и кодируем его для самых современных практик SEO в мобильных устройствах.
-
-
У некоторых компаний, занимающихся веб-дизайном, есть условия договора, в которых говорится, что если вы уйдете, вам придется заплатить большую пошлину или вы не сможете взять свой веб-сайт с собой.Это не так с нами. Как только он построен, он на 100% ваш.
-
Вы получаете уникальный веб-сайт для вашей компании — либо полностью индивидуальный, либо разработанный с использованием лучших шаблонов конвертации. В зависимости от сложности, мы обычно создаем сайты, используя WordPress. Узнайте больше о наших услугах по дизайну веб-сайтов.
-
-
Что нужно для конвертации целевой страницы? Мы знаем ответ.С правильными компонентами и копией, мы можем улучшить производительность вашего сайта. Узнайте больше о наших услугах по дизайну и оптимизации целевой страницы!
-
Ваш сайт должен стать вашим # 1 инструментом продаж и маркетинга для вашего бизнеса. Копия вашего веб-сайта представляет ваш лучший шаг? Если вам нужна привлекательная, оптимизированная для SEO копия и контент для вашего сайта, узнайте больше о наших услугах копирайтинга под ключ!
-
Характеристики дизайна веб-сайта, ориентированного на продажи
Нажмите, чтобы посмотреть наше портфолио веб-дизайна!
Хотите знать, почему ваши конкуренты превосходят вас? Скорее всего, это как-то связано с их сайтом и тем, что на нем написано:
- Ваш сайт должен быть видимым — Когда мы говорим видимым, мы имеем в виду в поисковых системах, таких как Google.Более 90% опыта в Интернете начинается с поисковой системы, поэтому ваш сайт должен быть оптимизирован для лучшей практики поисковой оптимизации (SEO). Когда вы выбираете нашу компанию по дизайну веб-сайтов, вы гарантированно оптимизируете сайт для SEO.
- Ваш веб-сайт должен быть мобильным — 57% всего онлайн-трафика в США в настоящее время поступает со смартфонов и планшетов, а 57% пользователей говорят, что не будут рекомендовать бизнес с плохо спроектированным мобильным сайтом. Если этого недостаточно, чтобы убедить вас, Google также оценивает мобильные сайты выше в результатах поиска.
- Ваш веб-сайт должен быть защищен — Утечки данных и взломанная информация о потребителях были в последнее время большими темами для обсуждения — и посетители вашего сайта знают это. Если на вашем сайте есть место, где пользователи могут заполнить личную информацию (даже если это просто номер телефона и адрес электронной почты), он должен быть защищен. Google также отдает предпочтение защищенным веб-сайтам в результатах поиска.
- Ваш сайт должен быть быстрым — Посетители сайта должны увидеть, что что-то происходит на вашем сайте менее чем за три секунды.Если нет, то 40% из них уйдут и перейдут на другой сайт. Даже задержка в одну секунду может привести к снижению конверсии на 7%.
- Вашему веб-сайту требуется оптимальное взаимодействие с пользователем — После загрузки страницы пользователи формируют мнение за 0,5 секунды. Они ожидают, что смогут легко и быстро найти информацию, особенно с мобильного устройства.
Почему компании любят наши профессиональные услуги веб-дизайна
У вас есть много вариантов, когда речь заходит о компаниях, занимающихся веб-дизайном, так почему же выбираете нас? Как владелец бизнеса, ваш сайт должен работать на вас.С 2007 года Blue Corona специализируется на пользовательских, стимулирующих продажи веб-дизайнах. Наша работа варьируется от настраиваемых веб-порталов корпоративного уровня до услуг веб-дизайна для малого бизнеса — мы гарантируем, что вы найдете то, что вам нравится.
Наша команда позаботится обо всем, чтобы предоставить вам сайт «под ключ»:
- Хостинг и кодирование
- Дизайн сайта
- Расширенная аналитика отслеживания Оптимизация
- для SEO
- Импорт существующего контента
- Создание и сопровождение формы заявки
- Совместимость веб-сайтов во всех браузерах и устройствах
- Интеграция со страницами социальных сетей
- Создание и передача карты сайта XML
- и больше!
Более того, вы на 100% СОБСТВЕННЫМ на свой веб-сайт — в отличие от многих других местных дизайнерских компаний, которые держат его в качестве заложников.Вы будете удивлены, сколько компаний веб-дизайна имеют скрытые пункты в своих контрактах.
СКОЛЬКО СТОЯТ УСЛУГИ ДИЗАЙНА ВЕБ-САЙТА?
Один из вопросов, который мы получаем, — «Сколько стоит сайт?»
По правде говоря, вы можете найти сайты практически по любой цене, но вы получаете то, за что платите.
Вот что входит в стоимость сайта:
- Хостинг — это услуга или компания, предоставляющая место в интернете для вашего сайта.К хостинг-провайдерам относятся WPEngine (наша рекомендация, если у вас есть веб-сайт WordPress), GoDaddy, InMotion и другие.
- Доменное имя — отображается как www.yourcompany.com и обычно представляет собой ежегодный платеж.
- Дизайн — Некоторые проекты бесплатны, другие стоят денег.
- Плагины и расширения — Как правило, чем больше плагинов вы хотите, тем дороже становится сайт.
- Сложность дизайна — Чем больше ваш сайт настроен, тем дороже он будет.
Наши услуги веб-дизайна не являются универсальными — не существует решений для нарезки печенья, по крайней мере, от лучших компаний. Хорошее агентство по дизайну веб-сайтов поможет вам определить лучший тип веб-сайта для вашего бизнеса. Важно то, что ваш сайт красив, продуман и продуман до мелочей.
Вам также необходимо постоянно обновлять его, чтобы соответствовать ожиданиям современных клиентов. Продолжительность жизни большинства веб-сайтов составляет всего 2-5 лет.
Профессиональная компания веб-дизайна и маркетинга, такая как Blue Corona, может помочь с этим. Мы упомянули, что мы используем годы данных, чтобы направлять наши проекты? Вы получаете гарантированных , чтобы получить высокоэффективный, ведущий веб-сайт.
Если ваш бюджет ограничен, у нас есть огромная библиотека шаблонов и макетов веб-дизайна, доказавших свою эффективность для SEO и для преобразования посещений в потенциальных клиентов. Ищете что-то совершенно нестандартное? Мы тоже это делаем. Неважно, будет ли это ваш первый веб-сайт или простая настройка SEO вашего существующего веб-сайта, вы попали в нужное место.
Проще говоря, ваш сайт должен быть красивым, продуманным и ориентированным на интересы клиентов. В этом может помочь профессиональная компания по веб-дизайну и маркетингу, такая как Blue Corona. Мы упомянули, что мы используем годы данных, чтобы направлять наши проекты? Вы получаете гарантированных , чтобы получить высокоэффективный, ведущий веб-сайт.
Готовы развивать свой бизнес? Свяжитесь с нашей командой разработчиков сайта сегодня
Ищете доступные услуги веб-дизайна? Blue Corona — отмеченная наградами компания по веб-дизайну с командой цифровых дизайнеров, специализирующихся на разработке и создании мобильных веб-сайтов, которые:
- Увеличение ведет
- Диск роста продаж
- Оптимизация расходов на маркетинг
- Дифференцировать свои бренды на рынке
В отличие от других компаний, занимающихся дизайном веб-сайтов, которые ориентированы только на внешний вид веб-сайта вашей компании, веб-дизайнеры Blue Corona точно ориентированы на вашу отрасль, ваш рынок и ваших клиентов.Но не верьте нам на слово — посмотрите примеры нашего дизайна веб-сайта, которые это подтверждают.
Мы работали с предприятиями всех размеров в рамках их проектов по разработке веб-сайтов, от небольших местных подрядчиков до корпоративных организаций, и у нас есть команда дизайнеров веб-сайтов, готовых приступить к реализации вашего следующего проекта.
Расскажите нам о своих бизнес-целях. Позвоните нам по номеру , чтобы узнать больше о наших услугах по веб-дизайну и разработке, или позвоните по номеру 800,696.4690 , чтобы сообщить нам о потребностях веб-сайта вашей компании.
,26 лучших сайтов UX / UI Design Inspiration в 2018 году
Благодаря Интернету доступ к ресурсам дизайна довольно прост. С помощью нескольких нажатий и щелчков, вы можете найти вдохновение в любое время и в любом месте. В этой статье мы представляем лучшие 25 сайтов UX и UI дизайна для вдохновения.
17 лучших вдохновляющих дизайнов пользовательского интерфейса
1. Behance
Behance — один из лучших вдохновляющих веб-сайтов для дизайнеров пользовательского интерфейса. Вы можете увидеть множество потрясающих творений разных дизайнеров со всего мира.Команда менеджмента Behance каждый день тщательно отбирает новые творческие работы из разных областей. Они включают дизайн, моду, иллюстрацию, промышленный дизайн, архитектуру, фотографию, изобразительное искусство, рекламу, типографику, анимацию, звуковые эффекты и многое другое.
2. Dribbble
Dribbble призывает дизайнеров загружать свои работы и делиться своим опытом проектирования с другими. Общее качество коллекции Дриббла очень высокое, и многие фотографы, дизайнеры и другие авторы любят показывать свои работы.Это не открыто для всех, хотя. Если вы хотите представить свою собственную работу, вам сначала нужно получить код приглашения от других дизайнеров.
3. AWWWARDS
AWWWARDS отличается от Behance и Dribbble тем, что фокусируется на демонстрации дизайна веб-сайта. Он направлен на признание и продвижение лучших творческих веб-дизайна. Веб-разработчики могут представить свой веб-сайт на эту платформу, чтобы выиграть лучшую круглогодичную награду за представление.
Бонус: Pikbest
Pikbest — это высококачественная платформа шаблонов дизайна.Они стараются сделать графический дизайн проще, чем когда-либо. С их помощью вы сможете создавать самые впечатляющие дизайны и воплощать свои идеи в жизнь.
4. UI Movement
UI Movement фокусируется на дизайне пользовательского интерфейса и собирает лучшие работы из Dribbble. Если вас интересует анимация пользовательского интерфейса, вы можете легко найти лучший дизайн пользовательского интерфейса для любого элемента, который вам нужен.
5. Flickr
Flickr — это хостинг изображений и видео, где вы можете найти широкий спектр изображений — практически все и что угодно под солнцем.Вы также можете хранить свои собственные изображения. Было бы не сложно сказать, что все дизайнеры пользовательского интерфейса предпочитают это онлайн-приложение для управления фотографиями и обмена ими из-за высококачественных фотографий и видео, которые вы можете найти.
6. Land-book
Land-book посвящена красивому дизайну посадочных страниц для дизайнеров, веб-разработчиков, владельцев продуктов и стартапов. В Land-book вы можете найти множество сайтов. Независимо от того, над каким проектом вы работаете, вы всегда найдете что-то, что вдохновит вас на создание чего-то лучшего.
7. Вдохновение сайта
SiteInspire — это демонстрация лучшего веб-дизайна и интерактивного дизайна. Вы можете искать дизайны через стили, типы, предметы и платформы. Все веб-сайты выбраны правильно, и вы также можете представить сайты, которые вы хотели бы видеть.
8. Mobbin
Mobbin — это тщательно отобранная коллекция новейших мобильных шаблонов дизайна из приложений, которые отражают лучшее в дизайне. Вы можете получить вдохновение от 130 приложений для iOS и более 6000 шаблонов.
9. Ecomm.design
Если вы хотите создать отличный сайт электронной коммерции, то этот сайт — ваш лучший выбор. Вы можете просмотреть коллекцию 2,027 сайтов электронной коммерции по каталогам, платформам, технологиям и трафику.
10. Lapa
Lapa была создана, чтобы помогать дизайнерам находить вдохновение в дизайне, учиться и совершенствовать навыки. Этот сайт представляет собой специализированную коллекцию высококачественных целевых страниц, которая обновляется ежедневно.
11.Sitesee
Sitesee — это кураторская галерея современных сайтов. Вы можете просматривать галерею по коллекциям.
12. Pttrns
Pttrns — это лучшая коллекция шаблонов проектирования и ресурсов. Вы можете найти любые элементы дизайна, которые вам нужны, из двух блоков на панели навигации — один в соответствии с устройством (iPhone, iPad, Android, Watch) и другие категории.
13. Uplabs
Uplabs — это веб-сайт, на котором дизайнеры и разработчики могут находить и делиться ресурсами для создания приложений и сайтов.Каждый день Uplabs создает лучшие ресурсы для Web, iOS и macOS и Material Design: пользовательские интерфейсы, эксперименты, приложения с открытым исходным кодом, библиотеки и готовые к использованию продукты.
14. Onepagelove
One Page Love — ведущая витрина красивых веб-сайтов, шаблонов и ресурсов One Page. Также доступно большое количество шаблонов.
15. Pinterest
Pinterest — одна из лучших графических и видео платформ, где люди открывают для себя новые идеи и находят вдохновение для того, чтобы заниматься любимым делом.Эта платформа охватывает широкий спектр контента, включая дизайны, домашние украшения, рецепты блюд и т. Д. Пользователи Pinterest взаимодействуют друг с другом, любя, комментируя и переписывая работы друг друга.
16. CollectUI
CollectUI — это платформа, которая объединяет ежедневное вдохновение для пользовательского интерфейса. Они используют только снимки Dribbble, поэтому, если вы хотите оставить комментарий или связаться с дизайнером, вы должны пройти через Dribbble.
17. FigmaCrush
FigmaCrush — самая большая коллекция дизайнерских ресурсов для Figma.Это список курируемых наборов пользовательского интерфейса Figma, шаблоны для мобильных устройств и веб-сайтов, значки, наборы каркасов и все, что вдохновляет дизайнерским активом Figma, созданным и распространенным сообществом Figma.
9 лучших веб-сайтов, посвященных дизайну UX
18. Smashing Magazine
Smashing Magazine предоставляет дизайнерам UX разнообразные учебные ресурсы по веб-дизайну, дизайну приложений, веб-разработке и многим другим. Все их статьи написаны хорошо и UX дизайнеры наверняка многому научатся у них.
19. Блог Mockplus
Mockplus — более быстрый и простой инструмент для создания прототипов. Его блог охватывает широкий спектр тем, включая создание прототипов, дизайн UX, дизайн пользовательского интерфейса и т. Д., А также имеется множество шаблонов и ресурсов для бесплатного скачивания.
20. Новости дизайнеров
Новости дизайнеров — это сообщество дизайнерских форумов, где дизайнеры со всего мира делятся интересными ссылками и своевременными событиями, которые полезны для дизайнеров UX.
21.UX Magazine
UX Magazine — это блог-платформа для дизайнеров UX. Вы можете легко получить самую свежую информацию о дизайне и тенденциях UX и даже подать заявку на работу UX на этой платформе.
22. Creative Bloq
Creative Bloq — это профессиональная платформа ресурсов UX-дизайна, содержащая множество материалов о веб-дизайне, графическом дизайне, иллюстрациях и многом другом.
23. UX Design Edge
UX Design Edge предлагает не только качественные ресурсы для статей, но также предлагает курсы обучения UX и консультации.
24. Средняя
Средняя — это комплексная блог-платформа с богатой коллекцией ресурсов по дизайну UX. Мы рекомендуем вам каждый день час или два читать новости и статьи о UX-дизайне на платформе.
25. Stack Exchange для взаимодействия с пользователем
Stack Exchange для взаимодействия с пользователями — это сайт вопросов и ответов для исследователей и экспертов в области пользовательского опыта. Любой может задавать вопросы. Любой может ответить. За лучшие ответы проголосовали и поднялись на вершину в Stack Exchange.
26. Фонд интерактивного дизайна
IDF — это организация интерактивного дизайна. У них есть огромная коллекция ресурсов UX-дизайна и интерактивного дизайна. Если вы хотите оттачивать свои навыки, обязательно добавьте в закладки IDF.
Заключение
Если вы хотите быть лучшим в своей игре, вам нужно постоянно оттачивать свои навыки и позволить творческому потенциалу развиваться. Отличный дизайн коренится в вдохновении. Мы надеемся, что дизайн вдохновляющих веб-сайтов, которыми мы поделились, поможет вам в вашем путешествии в качестве дизайнера.
,