Где веб дизайнер берет элементы. Источники вдохновения для дизайнера

Всем привет!

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

В результате, я получил около сотни вопросов, из которых отобрал наиболее интересные, и приступил к записи ответов.

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

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

Отвечая на вопрос, я бы хотел начать с определения понятия вдохновения .

Вдохновение — это некий творческий порыв. Для художников, музыкантов, писателей, поэтов, вдохновение необходимо. Любому поэту нужна Болдинская осень, а каждому художнику — сильное впечатление.

О таком ли вдохновении мы с вами будем говорить?

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

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

Для того, чтобы набраться впечатлений для работы, я бы посоветовал несколько вещей:

1. Профессиональная среда.
   Если вы уже каким-то образом связаны с дизайном и графикой, старайтесь побольше общаться, наблюдать, просто советоваться со своими коллегами.
2. Ближайшее окружение.
   Не пренебрегайте и «не профессиональными» советами. Однажды я работал над логотипом и никак не мог определиться с ведущей идеей. В этот момент близкий мне человек, не связанный с дизайном, взглянул на наброски логотипа и проронил фразу, которая и навела меня на очень ценную мысль.
3. Выставки дизайна, конкурсы и международные биеннале.
4. Создайте себе каталог из дизайнерских сайтов, порталов.
   Именно там дизайнеры выставляют свои работы, обмениваются впечатлениями, пишут статьи.
5. Старый и добрый источник вдохновения — это книги.
   Хорошие книги о дизайне должны быть у вас всегда под рукой.
6. Наблюдать за работой профессионала.
   Самому учиться и перенимать их профессиональные навыки.
   Здесь вам помогут видеоуроки признанных мастеров дизайна.

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

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

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

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

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

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

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

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

Вдохновение

Awwwards

Первый сайт из списка "места, куда следует приходить за вдохновением". Именно здесь Кристофер ищет новые идеи.

Muzli

Плагин для Google Chrome Muz.li заменяет домашнюю страницу браузера на агрегатор дизайнерских идей, куда попадают примеры с нескольких источников. В частности, плагин подключен к Awwwards.

One Page Love

Если вам нравится минимализм и одностраничники, то One Page Love подарит вам немало удивительных примеров дизайна.

Бесплатные изображения

Freepik

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

Freebiesbug

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

Graphic Burger

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

Палитра

Color.

При помощи Color. можно легко собирать и сохранять комбинации цветов. Движения назад и вперед регулируют HUE, вверх и вниз - яркость, колесико - насыщенность.

Pltts

Коллекция часто используемых палитр от Pltts может вызвать самые удивительные ассоциации. Думаю, сегодня я выберу Wasabi Suicide.

Adobe Color CC

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

Мобильные устройства

Pttrns

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

Так, например, выглядят калькуляторы под iOS8.

WTF Mobile Web

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

Если вы попали сюда, надеюсь, Google забудет о вашем существовании.

Capptivate

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

"Просмотр кода элемента" – проверка на поддержку мобильными устройствами

Этот инструмент Кристофер обнаружил совсем недавно, хотя он присутствует в Google Chrome с конца 2013 года. Достаточно щелкнуть правой кнопкой по содержимому страницы и выбрать последний пункт "просмотр кода элемента", либо нажать комбинацию Ctrl+Shift+C. На появившейся панели скраю четко будет видна пиктограмма мобильного устройства, в котором можно выбрать симуляцию любого интересующего вас аппарата.

Econsultancy’s Mobile Web Design Best Practice Guide

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

Правила хорошего мобильного приложения от Google

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

Взаимодействие с пользователем

Hover States

Коллекция новых, необычных интерфейсов и дизайнерских решений по взаимодействию с ним. Каждый пример на Hover States снабжен удобной видеодемонстрацией.

Little Big Details

Всем любителям скрупулезной работы над дизайном посвящается Little Big Details - место, где незначительные детали становятся несущей конструкцией дизайна.

UXPin

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

Сообщество

Behance

Dribbble

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

Чтиво

Smashing Magazine

На Smashing Magazine публикуют полезные статьи по дизайну и коду, руководства по созданию пользовательских интерфейсов и по работе с Wordpress. Обновляется ежедневно.

Designer News

Что-то вроде Hacker News, но для дизайнеров. На Designer News сообщество профессиональных дизайнеров делится интересными ссылками и собственным опытом с другими.

User Testing Blog

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

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

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

Awwwards

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

Siteinspire

Siteinspire — это удобная галерея сайтов. Коллекция постоянно пополняется. Если вы ищите что-то конкретное, к вашим услугам разделения на стили, типы, темы и платформы.

Webdesign Inspiration

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

The Best Designs

И еще одна галерея — The Best Designs . Здесь вы найдете примеры сайтов на любой вкус. Есть теги для более удобной навигации. Также здесь есть отдельная галерея тем WordPress.

The Design Inspiration

На сайте The Design Inspiration можно найти много категорий для поиска вдохновения, однако нас интересует раздел «Websites». Сортировать сайты можно только по цветам, зато удобство этой галереи заключается в том, что на одной странице расположено довольно много примеров.

Mobile Awesomeness

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

One Page Love

Собираетесь разрабатывать одностраничный сайт? Тогда в поисках вдохновения загляните на One Page Love . Здесь собраны самые интересные примеры из этой области. Вы можете рассортировать сайты по темам и посмотреть галерею шаблонов для одностраничных сайтов.

Line25

Line25 — это блог Криса Спунера. Крис — довольно известная личность в мире веб-дизайна, а на своем блоге он публикует подборки сайтов на различную тематику.

Behance

Behance — сайт, с которого начинает день множество дизайнеров по всему миру. Здесь своими творениями делятся как новички, так и лучшие представители от дизайна. В разделе Web Design можно найти не только уже реализованные проекты, но и работы, созданные ради удовольствия, новые концепции, которые еще не нашли своего воплощения в жизни, но вполне могут принести вдохновение вам.

Revision

Если вам нужно разработать проект для рунета, имеет смысл искать вдохновение среди наших дизайнеров. В этом случае вам поможет раздел Site на Revision . Здесь вы найдете работы отечественных веб-дизайнеров.

Результаты опроса, проведенного руководителем студии «Сибирикс»

В закладки

Руководитель студии «Сибирикс» Владимир Завертайлов опросил своих коллег и собрал ряд ресурсов, на которых дизайнеры могут найти идеи и вдохновение для создания собственных продуктов.

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

Если вы внаглую обводите сайты дня с Awwwards, вдохновляясь цитатой «Хорошие художники копируют, великие - воруют» - будьте осторожны, не порежьтесь об осколки разбитых иллюзий. Потому что никто так не говорил, ребят. Это такое же сомнительное порождение интернетов, как цитаты Стетхема.

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

Мы потрясли дизайнеров «Сибирикса» и выяснили, где они ищут идеи и вообще вдохновляются (легально). Нашли и затёртые до дыр ссылки (Awwwards - кто бы сомневался), и кое-что пооригинальнее. Раскидали по целям:

• Собрать идеи для сайта.
• Найти конкретный элемент.
• Нахвататься визуального вдохновения.
• Посмотреть всё в одном месте.
• Подтянуть матчасть.

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

Собрать идеи для сайта

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

• Awwwards . Не баян, а классика. Хотя «Коллекции» на Awwwards - относительно свежая фишка.
• The FWA , CSS Design Awards , Website Design Award . Пачка конкурсов сайтов, на которых работы, бывает, повторяются. Но проскакивают и оригинальные номинанты.
• Designer News . Ресурс, где можно и крутые примеры найти, и мнение коллег со всего мира почитать. Обычно все дизайны, которые выкладываются на Awwwards, сперва появляются здесь.
• Site Inspire . Симпатичные сайты, которые редко пересекаются с Awwwards и Ко. Не всегда конкурсные, но всё равно оригинальные и интересные.
• Cargo Сollective . Подборка минималистичных сайтов с какой-то потаённой изюминкой.

• The Best Designs . Тут сайты попроще - бегунок креатива выкручен не больше, чем на 20%.
• The Perfect Grid . Подборка сайтов с нестандартной сеткой - тренд 2017 года, между прочим.
• Sibirix"s Pinterest . Когда наши дизайнеры не рисуют годноту, они добавляют сайты, которые им понравились, вот сюда.
• Minimal gallery . Галерея радикального минимализма. Шикарно вставляет. Чего стоит хотя бы этот экспонат, где на главной странице только текст и курсор в виде банана.
• Hover States . Подборка необычных сайтов с удобным фильтром по тегам.
• Siiimple . Здесь порционно раз в день добавляется по одному хорошему минималистичному сайту.
• One Page Love . Собрание одностраничных сайтов. Веселых, а порой и не очень приличных. Слабонервные и неженки, ходите аккуратно.

Найти конкретный элемент

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

• Dribbble . По праву затёртый до дыр ресурс - здесь гигабайты идей для иконок и микровзаимодействий. Самое сложное - найти среди них что-то полезное.
• Motion UI . Субъективная выжимка из Dribbble - для тех, кто не хочет ворошить его завалы самостоятельно.
• Codepen Codrops . Ресурсы, где хранятся уже готовые рабочие элементы: хоть сейчас вставляй на сайт. Находите что-то крутое, обыгрываете в своём дизайне и несёте нужный кусок кода верстальщику - профит.
• Web Design Freebies . Подборка иконок, шрифтов, иногда проскакивают мокапы - золотая жила для мудборда. Больше не обновляется, так что пользуйтесь, пока не протухло.
• Color Supplyyy App . Простое и приятное приложение для подбора цветовой гаммы.
• Fonts Google . Шрифты, которые Google одобряет.
• Uimovement . Коллекция няшных микровзаимодействий.

Нахвататься визуального вдохновения

Просто подборки картинок, которые помогают нашим дизайнерам поймать вдохновение.

• Design Collector . Фото, видео, картинки и прочая мишура, которая помогает нащупать вектор, в котором нужно творить.
• Ffffound . Чуть более хипстерский склад изображений: больше глитча и кислотных гифок.
• Designspiration . Сборная солянка из дизайнерских работ и фотографий из Instagram.

Посмотреть всё в одном месте

Если вам нужно посмотреть сразу и макеты, и иконки, и шрифты, но вы слишком цените свой work in progress, чтобы переключаться между сайтами, познакомьтесь с ресурсами ниже. Там есть всё, только поисковый запрос уточните.