Как подбирать референсы веб дизайн
Что такое референсы и зачем они нужны
Пару веков назад, чтобы изобразить летящего голубя, художнику приходилось часами наблюдать за птицами. Сейчас для этого есть референсы.
Часто слышу это словечко. Что оно означает?
Референсом называют вспомогательное изображение — образец, к которому обращается дизайнер или художник во время работы. Это могут быть любые картинки из интернета, на которых есть что-то полезное.
Референсы рассматривают, чтобы уточнить свой рисунок: лучше понять форму предметов, найти интересные ракурсы. Иногда их используют, чтобы изучить какую-то художественную технику и сделать собственную работу в той же стилистике.
Само слово — калька с английского reference — переводится как «справка» или «рекомендация».
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Погодите, а как именно это работает?
Вот, например, нужно вам нарисовать на логотипе морского котика. А вы понятия не имеете, с чего начинать: сколько у него лап, какой формы голова, чем он отличается от морской коровы и от морского льва?
Вероятно, вы пойдёте в Google, соберёте кучу фотографий морских котиков, снятых с разных ракурсов. И, глядя на них, будете делать свой логотип. Возможно, вы даже обведёте какого-нибудь особенно красивого котика по контуру в Adobe Illustrator. И дальше будете с этим контуром работать: упрощать его или слегка изменять пропорции.
Изображения, которыми вы пользуетесь, и есть референсы. Они помогают дизайнерам, художникам и иллюстраторам делать работу быстрее и качественнее.
То есть референсы — это фотографии?
Необязательно. Это любые картинки. Чужие рисунки тоже годятся.
Ого, даже так! А работа с чужими рисунками не считается плагиатом?
Нет, ведь референсы не копируют полностью. Это вспомогательный материал, на основе которого создают нечто новое и уникальное.
Представим, что вы не нашли фотографий морского котика в нужном положении, зато увидели удачные рисунки. Почему бы их не использовать? Вы же только повторите позу котика. При этом сами выберете художественные приёмы и сочетания цветов, нарисуете зверю довольную ухмылку, вокруг изобразите морские волны… И получится уже совершенно другая картинка.
Но бывает, что референсы используют не для изучения объектов, а именно для поиска стилистических приёмов. Здесь вопрос плагиата стоит более остро. Впрочем, в современном мире трудно придумать что-то кардинально новое — все способы рисования, так или иначе, повторяются у разных дизайнеров и художников.
Чтобы избежать невольного копирования, обычно работают не с одним референсом, а набирают штук пять-десять. Тогда из каждого можно почерпнуть лучшее и создать собственную работу.
Можно сказать, что референсы — это картинки для вдохновения?
Да. Начинать проект с нуля трудно. А референсы задают контекст.
Не знаете, как изобразить трактор? Найдите несколько картинок с тракторами и выберите его самые характерные черты для своего рисунка.
Не знаете, как создать объёмные иконки? Можно найти чужие работы и сделать свои по аналогии.
Не можете придумать логотип для веганского кафе? Возможно, другие логотипы в этом сегменте натолкнут вас на идеи.
А клиенту можно показывать референсы, чтобы согласовать концепцию?
Конечно, именно так и делают! Референсы в одной стилистике собирают в мудборд — коллаж, демонстрирующий концепцию проекта. Таких коллажей дизайнер составляет несколько штук, чтобы потом вместе с заказчиком выбрать самый удачный.
Но не все референсы показывают клиентам — только те, которые отражают идеи, цвета, настроение. А вот картинки с анатомическими подробностями, например, могут пригодиться художнику в работе над персонажем, но заказчику они точно не нужны.
А где лучше искать эти картинки?
Можно воспользоваться поиском Google или фотостоками. Если нужны рисунки, есть Dribbble, Pinterest или Behance. Прямо на этих сайтах можно сохранять картинки по разным папкам — это очень удобно для работы параллельно с несколькими проектами.
Где чаще всего применяют референсы?
Везде, где нужно что-то изобразить. Даже для традиционного рисунка и живописи их используют, если нет возможности рисовать с натуры. Например, портреты на заказ часто делают с фотографий — это тоже референсы.
Если дизайнер одежды хочет вдохновиться платьями XVIII века, он будет использовать как референсы парадные портреты того времени. Если дизайнеру интерьера закажут проект в мавританском стиле, он пойдёт гуглить аутентичные фото таких дворцов.
Но чаще всего референсы используют специалисты, которые работают с компьютерной графикой. Это 2D- и 3D-художники, иллюстраторы, графические дизайнеры. Потому что с референсами удобно работать в компьютерных программах. Можно рисовать прямо поверх образца или сделать точный векторный контур, можно в два клика определить цвет на референсе или автоматически размыть картинку, чтобы оценить соотношение крупных форм.
Референсы используют, когда нужно нарисовать логотип, узор, персонажа, предмет или локацию.
Хотите научиться научиться работать с референсами и создавать компьютерную графику для киноиндустрии и игр? Записывайтесь на наш курс!
Ресурсы с референсами, о которых вы, надеюсь, раньше не знали, — для веб-дизайнеров и сочувствующих
Я как раз из сочувствующих. Сам не дизайнер, но люблю хороший дизайн, поэтому разглядываю картинки. Надеюсь, что найдёте здесь невиданные ранее ссылки.
Замечаю, что за рубежом лучше работают с приёмами графического дизайна, типографикой и вообще делают чище и проще. Хочу больше хороших сайтов на русском, поэтому смотрите, анализируйте и рисуйте как никогда до этого.
Не теряющая актуальности подборка. Отдельно доставляет навигация — от начала к концу.
Хорошая коллекция, похожая по стилю и дизайну на Cssdsgn (или наоборот).
Следит за трендами с 2012 года.
Блог-архив типографики в вебе с удобной фильтрацией по шрифтам. К сожалению, только латиница.
Идеальное место, чтобы выбрать шрифт и узнать, как он работает. Есть раздел с кириллицей.
Три разных по задачам конструктора, объединённые красотой работ, которые на них делают.
Ещё один долгожитель среди подборок сайтов. Первый проект опубликован 11 лет назад.
Скоро будет год, как проект не обновляется, но подборка там воистину отборная.
Хорошие примеры продуктовых лендингов.
За последние несколько лет кириллизировали много интересных шрифтов. «Кириллица · дизайн» — редкая подборка сайтов на русском.
Ассортимент канала представляет выжимку с ресурсов выше с рецензиями авторов.
Интересный архив графического дизайна, чтобы залипнуть на пару часов.
Снова жив (но это не точно).
С главной убрали надпись во весь экран «Brutalist websites are dead», но обновлений пока не было, ждём.
Если знаете ресурсы с хорошими подборками, скидывайте в комментариях, буду обновлять.
Комментарий удален по просьбе пользователя
Спасибо, Павел! Интересно посмотреть)
Вы спросите, что всё это значит? И как вообще понимать? Неужели «Открытие Инвестиции» выкатили новую версию мобильного приложения? Так точно, выкатили. Заглянем внутрь? Мы добавили в дизайн щепотку новогоднего настроения (для веселья) и ряд топовых функций:
Заказывала на озоне основном рукодельные материалы и вышивки. Всё приходило вовремя и точно. Решила заказать несколько недорогих телефонов по 4000 за каждый. Заказала три в общей сложности на 12 000.
Декабрь всегда подкрадывается незаметно, и в какой-то момент понимаешь, что время пришло: приближается Новый год — пора закупаться продуктами для праздничного стола. Для многих это головная боль пострашнее списка подарков. Придумать меню, побегать по магазинам, в которых творится предпраздничный хаос, с полок смели половину ассортимента, и снова…
Этот пост создан исключительно в ознакомительных целях, дабы любой прочитавший и имеющий намерение спорить с группой Эмвидео, эльдорадо был готов к такому повороту событий. Что с этим делать я прекрасно знаю.
В новом IPQuorum главный редактор сайта «Кино-Театр.Ру» Жан Просянов узнает у самого смелого кинодистрибьютора Сэма Клебанова о том, как превратить стриминг в артхаусный кинотеатр, режиссер Елена Ненашева признается, зачем ставить спектакль в бассейне, а котохудожник Вася Ложкин рассказывает о том, как рисовать котов и становиться богаче с…
В 2011 году она заключила партнёрство с госструктурой КНР. С виду чтобы продвигать культуру Поднебесной в США, а на деле — чтобы захватить китайский рынок электронных «читалок» и онлайн-торговли. О том, как Amazon потакала властям и что говорит теперь, — в пересказе Reuters.
Cервис доставки продуктов и товаров СберМаркет вступил в Ассоциацию развития интерактивной рекламы.
Что такое референсы и для чего они нужны
Вдохновение посещает творческих людей нечасто. А в процессе создания дизайна в коммерческой сфере полагаться только на него и вовсе не целесообразно, ведь работать надо. В таких случаях для вдохновения многие художники, дизайнеры и иллюстраторы пользуются референсами.
В данной статье я расскажу, что же это такое и как ими пользоваться.
Так что же такое референс?
Данное понятие происходит от английского слова «reference», что переводится как «ссылка» или «сноска». Итак, референсом называют ссылки, которые служат образцом при создании своего проекта.
С помощью такого «инструмента» можно максимально точно передать желательные пропорции, формы, сочетания цветов, стили текста и так далее. В общем, референс помогает получить новые идеи, а также объяснить концепт на основе существующих проектов.
Референсами можно считать любые изображения, которые максимально точно передают идею автора. Например, обычные фотографии, кадры из фильмов, чужие рисунки или наброски. В общем, это лишь источники вдохновения, создающие идеальный контекст.
Сферы применения
Референсы применяются в самых разных сферах. Их часто используют даже при написании сценария или создании раскадровки к видеоролику. Таким образом, можно отлично продемонстрировать формат будущего видео.
Многие дизайнеры, художники и иллюстраторы пользуются референсами, чтобы уточнить некоторые детали, узнать, как выглядит тот или иной предмет. Их используют в процессе рисования логотипов, персонажей, предметов или локаций.
При реализации проекта необходимо объединить все референсы в коллаж и показать их заказчику для согласования концепции. Можно составить несколько таких коллажей и выбрать наиболее удачный вариант какого-либо объекта.
Почему референсы не являются плагиатом?
Потому что итоговая работа не копирует исходные изображения. Референсы служат лишь вдохновением для создания чего-то нового и уникального. Да, можно срисовать контур, но на этапе внесения деталей все равно что-то пойдет иначе, ведь главное – это воплотить в жизнь собственную идею.
Чтобы точно избежать копирования, рекомендуется работать не с одним, а несколькими референсами. Таким образом, можно взять из каждого изображения наиболее подходящие компоненты и объединить их в финальной работе.
Виды референсов
Референсы можно разделить на несколько видов:
Где искать референсы
Найти картинки для вдохновения можно где угодно, но сперва всегда идет поиск Google или Яндекс. Этот вариант отлично подойдет, если вы просто хотите потренироваться и пока не желаете публиковать готовый материал. В ином случае примеров из поисковика может просто не хватить, но тогда мы и прибегаем к другим ресурсам.
Самая обширная коллекция дизайн-концептов, которая кишит изображениями на разные темы. Тут можно найти фотографии, концепты, наброски, инструкции, видео и уроки. Правда, минус в том, что большинство картинок защищены авторским правом. Еще легче искать примеры не через поисковую строку, а посредством рекомендаций.
Фотостоки
Существует множество различных стоковых сервисов с качественными и бесплатными картинками. Pixabay – один из самых удачных вариантов. Это ресурс с тысячами иллюстраций. Их можно скачивать из сервиса в высоком качестве и пользоваться даже в коммерческих целях. Но главная наша задача – это найти референсы, и здесь определенно есть что посмотреть.
Платформы для дизайнеров
Например, Deviantart, на котором множество художников публикуют свои работы. Можно с помощью фильтра найти стоковые картинки и использовать их для вдохновения, благо вариантов точно будет немало.
Еще есть Dribbble, небольшое онлайн-сообщество, куда множество дизайнеров, иллюстраторов и художников выкладывают готовые работы и используют страницу в качестве портфолио. Очень напоминает Behance, отличается лишь формат размещения.
Эта огромная социальная сеть кишит разными изображениями. Качество контента в большинстве случаев оставляет желать лучшего, но порой оно не имеет значения, особенно если вы ищете какие-то крупные объекты без детализации, чтобы их срисовать.
Тематические группы в социальных сетях
Существует множество тематических групп и сообществ, где администраторы публикуют материалы для использования в качестве референсов. В них точно можно найти картинки, которые будут максимально соответствовать тематике вашего проекта.
Кино, сериалы, музыкальные клипы
В таких материалах можно найти удачные образы или виды. Что уж говорить о подборе актеров и параметрах их внешности… Здесь достаточно лишь найти подходящее видео, заскринить нужный кадр и вдохновляться им в своей работе.
В целом, найти референсы не так уж трудно. Главное – постараться не копировать чужую работу, а лишь вдохновляться ей, чтобы ваш финальный проект был уникальным.
Как подбирать референсы веб дизайн
Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию
3 секрета как использовать референс в веб-дизайне и не спалиться
Всем привет! Сегодня я решил затронуть очень интересную тему, актуальную не только для дизайнеров, а и для любой творческой профессии. Что слышали про референсы? Если вы художник, иллюстратор, или дизайнер, первые несколько лет работы — это первое что должно быть у вас под рукой.
Даже если вы супер крутой специалист, с многолетним стажем и блестящими востребованными проектами, это не стыдно пользоваться референсами, а вот почему.
Если вы читали книгу «Кради как художник», то знаете, что все новое, это доработанное старое или немного переделанное. Чтобы достигнуть определенного уровня в веб-дизайне нужно постоянно копировать. Сохраняйте понравившиеся проекты, отдельные детали и элементы. В своих проектах используйте это. Только очень осторожно, чтоб не спалиться.
Если бы общество плохо относилось к копированию, и наказывало всех, кого в этом уличили, некоторые проекты вовсе бы не существовали (Вконтакте), а остальные бы не развивались в силу отсутствия конкуренции. Если разработка или проект имеют успех, нужно внести свою уникальную лепту и внедрять.
Помимо этого, если ваши работы копируют – вы на правильном пути. Это самая высокая оценка работы создателей. Поверьте, если оригинальную идею скопировали, через пару десятков лет никто не вспомнит про его многочисленных последователей – вспомнят имя оригинала. Лучшая мотивация обойти конкурентов – стать копируемым.
Все хотят быть похожими, но немного разными. В дизайне проект, который намного отличается от установленных рамок и тенденций, рискует быть непонятым и обречен на провал. Поэтому, большинство дизайнерских работ схожи между собой, при этом имеют свои особенности.
Короче говоря, приведу на примере.
Один мой хороший знакомый решил сделать оригинальную обложку своего профиля в социальной сети. Задумка такая: впереди фотография, на заднем фоне безпилотник. Такая себе идея, но все же воплотить в жизнь прошлось мне.
Первое
Было бы глупо и неправильно найти фото первого попавшегося в поисковике дрона, и вставить на задний фон. #Яжедизайнер черт возьми. Поэтому я принял решение, поискать несколько удачных фотографий и сохранять в отдельном слое ref_photo.
Второе
Затем ищу фотографии по заданной тематике на стоках Дриббл и Шаттерсток.
Помимо удачных фотографий, попадаются такие варианты из категории «как делать не нужно». Некоторые из авторов явно не слышали о существовании референсов. Выбранные изображения я вставляю в отдельный слой иллюстраторского файла и называю его ref_stylization. Собирайте не менее 10 референсов, чтобы из каждой по чуть-чуть, а то запасут.
Третье
Ищу подходящий референс стиля. На этом этапе форма уже готова. Осталось добавить отличительные элементы: блики, матовость, детали, тени. Кстати выигрышно смотрятся объекты, которые имеют не только матовую, но и одновременно глянцевую форму.
Моего опыта уже хватает, чтобы самостоятельно представить, как должен выглядеть нужный мне графический элемент. Слой с такими изображениями называю ref_detail. Тут собран один бред, но ничего, прорвемся.
Я исходил из того, что безпилотник должен иметь меньший визуальный вес, чем фотография профиля, поэтому выбрал лайн-арт с тенями цвета контура объекта.
Подводя итог хочу сказать, что получился своеобразный фарш из форм, стиля и определенных элементов. Я пропустил все это через свою особенную сетку в мясорубке, которая имеет отверстия согласно моих дизайнерских наработок. На выходе получаем неповторимое изображение.
Теперь вам никто не скажет что это с3,14зжено, ну а ели скажет бейте в бороду. Интересных вам проектов, вдохновения и успехов в творчестве!
Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!
Как подбирать референсы веб дизайн
Сегодня решил коснуться такого важного явления, как референсы. Есть много определений данному термину, но все они сводятся к одному понятию, а именно – совет, рекомендация или же упоминание. Конкретно в нашем случае в качестве референса может выступить ссылка на сайт или фотография с описанием того, что именно в ней нравится.
ЧТО ТАКОЕ РЕФЕРЕНСЫ В РАЗРАБОТКЕ САЙТА
Что это такое?
Как я уже сказал ранее, это пример того, что нравится (ссылка, фото), и описание того, почему это нравится и что именно нравится.
Зачем это нужно?
Референсы позволяют исполнителю точнее понять заказчика и наоборот. Таким образом, мы вспоминаем поговорку «лучше один раз увидеть, чем 100 раз услышать (или описать)». А в итоге: чем точнее совпадает представление клиента и исполнителя о новом проекте, тем больше шанс, что всё пройдет без накладок.
Важно:
Референс это не тупое копирование чужих наработок, а компиляция и развитие удачных идей.
Все референсы можно разделить на три типажа, а именно:
Не стоит думать, что как только вы дадите веб-студии примеры того, что вам нравится, они скопируют их подчистую. Копировать, а, точнее, компилировать, нужно с умом.
ВИДЫ РЕФЕРЕНСОВ В РАЗРАБОТКЕ САЙТА
Стилистические. Как и в предыдущем случае, название соответствует методу функционирования. Референсы данного типа помогут Вам подобрать дизайн, фон, шрифт или же сетку для Вашего сайта.
Пример: Тут речь пойдет о дистанционировании. Проанализировав цветовые гаммы конкурентов, их стиль и шрифты, вы можете стать максимально не похожими на них.
Это не что иное, как анализ конкурентов.
Задачи, которые решает данный вид референсов:
Мы делаем сайт для строительной компании. Первым делом мы анализируем, какие сайты есть у конкурентов, после чего делим их, вычленяя тех, на кого мы хотим равняться, и смотрим, какие идеи мы можем позаимствовать у них. После чего мы смотрим на тех, кто с нами на одном уровне, чтобы быть максимально непохожими на них.
Важно брать именно идеи, компилировать их и выдавать что-то оригинальное. Нельзя просто копировать то, что нам нравится.
Название и объясняет схему работы. Посмотрев на примеры других сайтов, Вы сможете почерпнуть разного рода технологические особенности, которые придадут сайту уникальности и неповторимости. Например, вам понравилось использование паралакса на главной странице или Ajax в разделе услуг. В любом случае можно посмотреть, как ту или иную технологию удачно используют в вашем сегменте, и повторить удачный опыт.
Пример: Вам нужно показать в портфолио, как изменился тот или иной предмет после того, как вы над ним поработали (например речь идет о химчистке автомобиля). И тут вы находите эффект, который помогает в рамках одного изображения показывать, что было и что стало, просто передвигая мышь.
Стоит упомянуть еще об одной немаловажной детали. Референсов должно быть от 3 до 5, но не больше 5 — это важно. Все потому, что если Вы будете использовать лишь один, то, скорее всего, возьмете оттуда и тематические, и технологические, и стилистические средства. Вследствие чего у вас будет просто копия сайта конкурентов. Данная процедура поможет Вам одолжить несколько идей и в то же время остаться уникальным и невредимым с точки зрения плагиаторства.