1. / Поиск вдохновения на создание нового дизайна
Вдохновение
Один из наиболее часто задаваемых мне вопросов касается того, как, вдох-
новляясь результатами работы других людей для достижения соб твенной
с
цели, не скатиться до плагиата или кражи чужих идей. В некоторой сте-
пени данный вопрос можно считать легким и ответить на него просто.
Не крадите чужих идей. Однако здесь имеется один нюанс. Где находится
та грань, при переходе которой вдохновение чужими идеями перерастает
в их воровство? Эта грань размыта, особенно если учесть тот факт, что
никто не работает в изоляции от остального мира. На все новые дизай-
нерские идеи влияет то, что было создано ранее и окружает нас. Марко
Прлжич является веб-дизайнером, который пишет на эту важную тему.
Данная глава, написанная Марко, пошагово проведет вас через процесс
создания нового дизайна. Что более важно, в ней демонстрируется, как,
используя комбинацию различных идей, подходов и элементов дизайна,
можно создать новый оригинальный дизайн. Что касается меня, то в этой
книге я хочу помочь вам обрести вдохновение и призываю вас заимствовать
чужие идеи, но не копировать их.
10
2. 01 / Вдохновение
Поиск вдохновения на создание нового дизайна
Поиск вдохновения
на создание нового дизайна
Под авторством Марко Прлжича ния. Однако прежде, чем мы займемся какие стили можно применить к отдель-
этим, давайте взглянем на некоторые ным элементам. Ваша цель заключается
основные концепции, касающиеся по не в том, чтобы выбрать один конкрет-
Вдохновляйтесь чужими идеями, но
иска вдохновения. ный дизайн и скопировать его, а в том,
не копируйте их. Существует тонкая
чтобы подобрать определенный набор
грань между вдохновением и копиро-
ИСПОЛЬЗУЙТЕ элементов, которые будут слаженно
ванием — грань, которая в дополнение БОЛЕЕ ОДНОГО работать в новой конфигурации. При-
ко всему еще и размывается из-за того, ОБРАЗЦА ДИЗАЙНА ступая к моделированию, необходимо
что в повседневной жизни мы окруже- ДЛЯ ОБРЕТЕНИЯ располагать продуманными свежими
ны массой разнообразных примеров из ВДОХНОВЕНИЯ
идеями, благодаря которым результат
мира дизайна и искусства. В наши дни Если вы столкнулись с примером дизай-
вашего труда будет отличаться новизной
обрести вдохновение на создание нового на, который вам понравился, и у вас при
и, самое важное, уникальностью.
дизайна несложно, поскольку в качестве этом возникла мысль, что вы можете
отправной точки можно использовать сами создать нечто подобное, не оста- АНАЛИЗИРУЙТЕ
множе тво полезных ресурсов. Образцы
с навливайтесь, а продолжайте искать ИМЕЮЩИЕСЯ ОБРАЗЦЫ
дизайна веб-сайтов буквально навод- и другие образцы дизайна, которые ДИЗАЙНА
няют Интернет. Нет точной формулы, в плане используемых цветов, структуры Отличный способ обрести нужное вдох-
которая позволит обрести вдохновение или содержимого соответствуют тому, новение заключается в том, чтобы не
и избежать копирования плодов труда что вас интересует. Цель заключается охватывать конкретный пример дизайна
других людей, однако существует ряд в том, чтобы взять самые лучшие эле- целиком, а сосредоточить свое внимание
простых способов сделать это. В данной менты от каждого из примеров дизайна на элементах, которые будут представ-
главе мы рассмотрим процесс создания и реализовать их совокупность в своем лять для вас интерес при работе над
дизайна веб-сайта, разработкой кото- собственном новом макете. собственным проектом. Изучите, как
рого мне довелось заниматься не так Формирование своего нового дизайна другие люди решили проблемы, подоб-
давно. Посредством примеров, которые начните с объединения в одно целое ные тем, с которыми столкнулись вы,
послужили для меня образцом, я про- всех элементов, взятых из разных образ- и используйте эти знания при работе над
демонстрирую вам, как создал свежий цов, послуживших для вас источника- своим дизайном. Например, изучив при-
дизайн, используя в качестве отправной ми вдохновения. Взгляните на каркасы веденный на рис. 1.1 образец дизайна,
точки различные источники вдохнове- для своего нового сайта и задумайтесь, можно заключить следующее:
11
4. • заголовок не отделен контрастным с информацией, дает пользовате- еще один хороший пример, где выделены
цветом или каким-либо блоком, как лю возможность комфортно и легко некоторые важные элементы.
это обычно бывает на веб-сайтах; работать с сайтом.
• используемая цветовая палитра ха СОЗДАНИЕ
рактеризуется массой тонких от- ВЫБЕРИТЕ ПОНРАВИВШИЕСЯ НОВОГО ДИЗАЙНА
тенков; ВАМ ЭЛЕМЕНТЫ Теперь рассмотрим конкретный при-
• длинный слоган дает четкое пред- Если вы нашли вдохновляющие образцы мер и пройдемся по процессу создания
ставление о назначении данного дизайна, пристально изучите их и выбе- дизайна, по ходу которого я сформи-
сайта; рите элементы, которые по-настоящему ровал шаблон, впоследствии исполь-
• в широком окне отображается слайд- придают им лоск. Обратите внимание на зованный для сайта themeforest.net.
шоу, а под ним имеется целый набор градиенты, световые эффекты и типо На данный дизайн меня вдохновил ряд
значков, которые позволяют судить графику, то есть на все тонкие детали, замечательных сайтов, и я поведаю вам,
о том, на каком этапе воспроизведе- которые вдыхают жизнь в конкретный как их элементы использовались для
ния находится слайд-шоу; дизайн. Задайтесь вопросом: «Что имен- создания финального результата. Для
• наличие промежуточных зон (серого но делает данный образец дизайна столь начала давайте взглянем на итоговый
цвета), отделяющих разные области привлекательным?» На рис. 1.2 приведен результат, показанный на рис. 1.3.
Рис. 1.4. Вдохновение Рис. 1.5. Дизайн
Рис. 1.6. Вдохновение Рис. 1.7. Дизайн
13
5. Рис. 1.8. Вдохновение Рис. 1.9. Дизайн
Приступая к работе над данным дизай- Источник вдохновения 2: ЗАКЛЮЧЕНИЕ
ном, я задумывался над тем, как будет Aviary Если вы взглянете на конечный результат,
здорово, если мне удастся создать со Большой ротатор содержимого, имеющий- то поймете, как именно разные источ
временное, хорошо структурированное, ся на данной домашней стра ице, рабо-
н ни и вдохновения внесли в него свой
к
насыщенное содержимым, подходящее тает замечательно, поэтому я по умал,
д вклад, но тем не менее дизайн получил-
для сайтов с блогами, многофункциональ- что он может стать ключе ым элементом
в ся свежим и не создается ощущения, что
ное решение. С учетом всех этих аспектов моего дизайна. Это распространенный он является прямым копированием како-
я отдаленно представлял себе, как имен- элемент дизайна, однако всегда любо- го-либо из уже существующих дизайнов.
но должен выглядеть будущий дизайн. пытно взглянуть, как к его оформлению Некоторые из вас могут заявить, что
Источниками вдохновения для меня подходят разные дизайнеры. Существует я предлагаю создавать эдаких Франкен-
послужили три организационных сайта: масса способов привнести разнообразие штейнов, «сшивая» из разных кусочков
• FreelanceSwitch; в элемент, подобный данному, посред новые образцы дизайна. Естественно,
• Aviary; ством едва уловимых изменений конфи- если вы просто скрепите воедино раз-
• PsdTuts+. гурации и макета (рис. 1.6, 1.7). ные элементы, то результат вряд ли
покажется другим людям воодушев-
Источник вдохновения 1: Источник вдохновения 3: ляющим. Вы всегда должны стараться
FreelanceSwitch PsdTuts+ объединять взятые из разных источни-
Первое, что понравилось мне в дизайне Ключевым элементом, который я поза- ков элементы своего нового дизайна,
данного сайта, — это то, как оформлена имствовал из этого дизайна, является используя широко распространенные
навигация: она качественна и понят- нижний колонтитул. Он довольно большой стилистические подходы, и никогда не
на, предусматривает краткие поясне- и содержит дополнитель ую информацию
н упускать из виду слаженность общей
ния к каждой ссылке. Кроме того, фон и основные ссылки. Я также обратил вни- картины. Вдохновляйтесь чужими иде-
включает несколько уровней с разной мание на то, что в нижнем колонтитуле ями, но не копируйте их!
окраской, изменяющейся сверху вниз, дублируется логотип, и решил прибегнуть
что придает сайту более интересный к аналогичному подходу при создании
внешний вид (рис. 1.4, 1.5). своего дизайна (рис. 1.8, 1.9).
14
