Секреты веб-дизайна. Урок № — «Идеи. Активируем фонтан идей»

Приветствую Вас, уважаемый коллега в первом уроке нашего видеокурса!

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

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

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

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

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

Итак, приступаем. Первый шаг, который вам необходимо сделать, чтобы сгенерировать много классных идей – это четко определить техническое задание и целевую аудиторию вашего дизайн-сайта. Что такое техническое задание? Техническое задание – это то, что, скажем, хочет от вас заказчик, когда вы рисуете ему дизайн-сайт. Если вы рисуете для себя, то вы являетесь этим самым заказчиком и вы должны, соответственно, получить это техническое задание заказчика, либо написать его сами. Оно должно быть максимально конкретное, четкое и понятное. Ну, давайте, допустим, на сайт фриланс зайдем и посмотрим какой-нибудь пример. В какой-нибудь проект зайдем…тут, по-моему, техническое задание есть…посмотрим. Хочу вам просто на примере показать, чтобы вам было более понятно, что это такое. Так, давайте друзья посмотрим, что это такое. Вот у нас есть какой-то проект, который заказчик хочет, чтобы реализовали на фрилансе. Здесь какие-то производства и продажи кухонных гарнитуров в городе Уфе. И, соответственно, здесь пишет какой текст, какие формочки ему необходимы и цифры, факты, какие фотки должны быть в дизайне, который вы, как дизайнер, должны использовать. То есть, соответственно, если вы для себя делаете какой-то дизайн, у вас эта информация уже есть и вам просто нужно четко ее структурировать и написать. Вот это и есть, собственно, ТЗ, но оно, скажем, не подробное, очень простое и, соответственно, с таким заказчиком будут проблемы. Ну вот, мы углубляться не будем. Техническое задание – это то, как вы видите, либо заказчик видит конечный результат дизайна сайта. Что такое целевая аудитория? Сейчас я вам расскажу, а потом расскажу, зачем это необходимо делать и как. Целевая аудитория сайта – это те люди, которые будут посещать данный сайт. Давайте так же откроем 2 разных сайта: какой-нибудь игровой портал (любой совершенно, не важно) и откроем какой-нибудь бизнес-портал.

Давайте откроем сайт «Бизнес FM», потому что я точно знаю, и давайте просто-напросто сравним два этих сайта и попытаемся понять кто же эта самая целевая аудитория, те люди, которые заходят на данные сайты.

Начнем, давайте с игр. Если посмотрим на дизайн – видим, что очень много графики, сайт очень яркий, мало текста, различные анимации и так далее. Если же мы посмотрим на сайт по бизнес тематике (радио «Бизнес FM»), то, соответственно, видим, что тут гораздо больше текста, по минимуму графика, очень простые, легкие цвета: белый, черный, серый, красный где-то используется. Ну, в принципе, и все. Здесь основное содержание контента текст, а здесь – это графика и различные развлечения. Соответственно, мы можем приблизительно понять, в данном случае даже посмотреть, кто является целевой аудиторией. Если вы находите вот такой, так скажем, виджет ВКонтакте, то посмотреть аудиторию просто. Мы щелкаем по количеству, и здесь у нас выводится статистика. Видим, что 15% женщины, 84% мужчины и по возрасту сегментация идет: до 18 – 42%, от 18 до 25 – 36%, и там уже 20% — старше 25 лет. То есть, соответственно, мы понимаем, что 80% аудитории тех, кто играет в игры, заходит на данный сайт — это люди подростки от 0, грубо говоря, до 25 лет. То есть, это основная масса, грубо говоря, молодые люди. Если же здесь мы посмотрим, то в основном здесь люди от 30 лет и старше. Здесь посмотреть так не получится, потому что виджета ВКонтакте нет, но, тем не менее, я думаю если просто посмотреть на тематику сайта, то можно посмотреть на реальную жизнь и определить целевую аудиторию. Как бы, очень мало бизнесменов в 20-30 лет, в основном они начинаются такие, так скажем, реальные бизнесмены, которые постоянно занимаются бизнесом, это от 30 и выше. И, соответственно, исходя от того какая целевая аудитория, мы соответственно делаем сайты. То есть, определяем цветовую гамму, определяем шрифты, которые будут удобны данной целевой аудитории. То есть, вы видите, что целевая аудитория отличается, все исходит именно от нее. Соответственно, очень 2 разных получаются два сайта как по структуре, по графике, и так далее. То есть, это как раз исходит от того, кто является целевой аудиторией. Это очень важно понимать, но не все на это обращают внимание. Но, пожалуйста, если вы делаете сайт для себя, какой-то там блог, постарайтесь как-то понять, либо провести опрос среди своих подписчиков и так далее, кто является целевой аудиторией вашего сайта. Потому что, если у вас будут, допустим, аудитория какие-то подростки, то дизайн можно делать яркий с кучей различных картинок, текста, флеша и так далее. Если у вас будет какая-то тематика, допустим, по садоводству, то соответственно у вас люди будут уже более зрелого возраста, скорее всего различные пенсионеры. Естественно, их будут раздражать яркие цвета, лучше делать черный, белый, обычные цвета, большой шрифт, чтобы было удобнее читать и так далее. То есть, когда мы поймем, кто наша целевая аудитория, то мы уже автоматически начинаем понимать, что нам необходимо делать с цветом, с графикой, с текстом и так далее, то есть, важный момент. Пожалуйста, учтите это при разработке. Ну как бы я вам дам домашку в конце данного урока, если что пересматривайте данные пункты и определяйте. Это у нас был второй момент, точнее первый. В первом моменте у нас техническое задание и целевая аудитория. То есть, мы определяем эти два основные фактора из которых уже переходим к следующему. Нам необходимо просто-напросто взять обычный лист бумаги. Мы берем обычный лист бумаги, как вы видите, сейчас на фотке, количество листков не имеет значения. Соответственно, вы можете брать и альбомные листы (чистые, грязные, не важно), тетрадные, короче говоря, без разницы. Вам необходимо зарисовать и написать все свои мысли, которые есть сейчас на данный момент в голове.

По поводу дизайна, который вы собираетесь разрабатывать. Что для этого необходимо делать? Я расскажу немножко историю. Совсем недавно читал книгу называется она «Монах, который продал свой феррари», там есть очень классная история. Когда учитель начал обучать своего ученика, он взял чайник и начал наливать напиток в чашку. Он наливал-наливал и, соответственно, когда чая стало больше, чем вмещала кружка, чай начал выливаться. Первое время ученик смотрел, как все это выливается, потом он, соответственно, не выдержал и накричал на него мол: «Зачем? Ты же видишь, что чай выливается». Тогда учитель ему сказал, что вот эта чашка, как любой из людей: «Ты не сможешь принять в себя больше информации, чем ты можешь вместить». Соответственно, прежде чем туда поступила новая информация, необходимо, грубо говоря, очистить данную чашку. То же самое нам необходимо сделать перед тем, как принимать какие-то новые идеи с других сайтов и так далее. То есть, вам необходимо очистить свой разум, свой мозг от тех идей, которые у вас есть сейчас. Потому что, если, скажем, вы начнете смотреть чужие идеи, и прежде всего не очистите свой разум, то, соответственно, у вас начнется дисгармония, конфликт в голове и вы точно не будете знать, что же лучше выбрать. Поэтому, первым шагом, вы просто-напросто берете обычные чистые листы и записываете все свои мысли (либо текстом, либо зарисовываете), что вы думаете, даже самые тупые бредовые идеи тоже все зарисовываете. Ваша основная задача чтобы ваш мозг остался, так скажем, пустым, чтобы все, что вы хотели и могли бы реализовать, все это записали и, соответственно, вы сами после этого почувствуете, как вам станет легче и следующий этап вам дастся гораздо лучше.

Соответственно, второй этап — это просто-напросто записать на листочке все, что вы думаете по поводу дизайна будущего сайта. После этого вы переходите к следующему этапу – это поиск каких-либо крутых работ для моделирования. То есть, наш принцип будет заключаться в том, что мы не будем придумывать что-то сами, потому что далеко не все являются обладателями каких-то гениальных мозгов, не у всех развито какое-то креативное мышление, поэтому мы будем искать какие-то более простые пути. Данный способ заключается в том, чтобы просмотреть порядка 20,30,50 крутых работ, взять по какой-то маленькой части с каждой работы, объединить и сделать из них один свой дизайн сайта. То есть, когда возьмете какую-то маленькую часть с одного сайта, маленькую часть с другого сайта, и все это будете в свой добавлять – у вас получиться свой уникальный дизайн. И никто никогда не поймет где, откуда вы что взяли. Это первый момент. Второй момент заключается в том, что мы не занимаемся тупым копированием. То есть, есть какая-то красная кнопка, грубо говоря, мы взяли ее перенесли и оставили красной кнопкой. Нет. Мы берем саму идею, грубо говоря, меняем цвет, шрифт, размер, расположение и так далее. То есть, мы берем идею какую-то крутую, но техническими способами мы ее меняем под свои нужды. То же самое касается графики. То есть, вам, допустим, понравилась какая-то шапка, не нужно ее брать и копировать, потому что это нарушение авторских прав. Вам просто-напросто необходимо понять, как сделать такую шапку, пойти на фотобанки и сделать коллаж. Как это делать я покажу в следующих уроках. Так что не переживайте. То есть, основной момент мы моделируем, но не копируем. Вот такой простой способ. Как это сделать я вам сейчас покажу несколько сайтов, где вы можете брать, так скажем, источники вдохновения для своих работ. Вам не стоит этим ограничиваться, если у вас есть свои ресурсы, где вы их ищите, то, соответственно пользуйтесь, либо ищите какие-то новые.  Не стоит ограничиваться.

Сейчас я открою несколько вкладок и покажу вам несколько вариантов. Сайт у нас сейчас загрузится… Первый сайт называется «Техдизайнер.ру». К сожалению, почему-то он сейчас не грузится, остальные вроде бы загрузились. ОК. Посмотрим и, если что, вернемся к не загрузившемся. Так, очень классный сайт, где вы можете подчерпнуть очень много крутых идей за счет того, что здесь обитают дизайнеры со всего мира. Это не российский сайт, не сайт стран СНГ, здесь абсолютно дизайнеры со всей планеты и, соответственно, вы понимаете, идей крутых гораздо больше. Мы заходим по адресу behance.net. Здесь вы можете выбрать веб-дизайн, отсортируются работы и попадут более интересные, просматриваемые и комментируемые и так далее. Здесь вы можете выбирать фильтр по количеству просмотров, по количеству комментариев и так далее. Лучшее за неделю, за месяц, за день. Здесь вы можете выбирать страну, то есть дизайнеров из России и так далее. Если вам необходим дизайн на русском языке, то можете выбирать Россию. Город бы я не рекомендовал, потому что смысла нет. Соответственно, просматриваете данные работы, и какие- то интересные моменты для себя берете. Следующий момент – такая вот галерея сайтов, называется она CSSelite.com. По этому адресу заходите и    здесь есть различные уникальные идеи, реализованные с разных сайтов. В первой части мастера веб-дизайна я, по-моему, показывал данный сайт. Удобство его в том, что здесь есть различный фильтр, который делит все дизайны на различные категории: блоги, дизайнеры и так далее. Если какие-то названия не знаете на английском, то можете скопировать, перевести, допустим, в сервисе translate.google.ru. Вводите и смотрите, что это значит. Хорошо. Дальше.

Следующий тоже очень классный ресурс русскоязычный, это всем известный fl.ru. Здесь есть два раздела для нас, для дизайнеров, где мы можем найти классные крутые работы, которыми можем вдохновиться, взять какую-то интересную идею и смоделировать. Для этого необходимо перейти на сайт fl.ru, далее перейти в раздел фрилансеры, здесь мы выбираем раздел «дизайн», здесь водятся самые крутые фрилансеры по всем разделам дизайна, которые имеют максимальный рейтинг. Но, для веб-дизайна тут многое не подходит, потому что здесь много различной полиграфии и так далее по логотипам, которые нам совершенно не нужны. Поэтому, тут вы можете выбрать либо дизайн сайтов и просматривать какие-то аккаунты людей которых вам нравятся работы, либо технический дизайн (это для того чтобы сделать какую-то красивую шапку, иллюстрацию и так далее). Здесь есть прикольные работы. Кстати, когда я показывал техническое задание, там было про кухни, вот здесь есть какая-то иллюстрация мебели, можно что-то смоделировать, посмотреть на стиль работы. То есть, данная картинка выполнена в стиле тех.дизайна и в качестве шапки смотрится отлично. Как делать такую графику я показывал в отдельном курсе. Если будет интересно, проходите данный курс. С фрилансом мы разобрались, тоже классный сайт, на котором можно посмотреть крутые работы и взять идеи.

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

Ну и предпоследний способ, которым я пользуюсь больше всего – я иду в Яндекс или Google и вбиваю ключевые слова по той теме, которой делаю дизайн сайта. Из личного своего опыта я пользуюсь больше всего поисковиками. Не какие-то сайты, а именно Яндекс или Google. В основном я пользуюсь Google, потому что картинки он ищет гораздо лучше. То есть, по количеству и по качеству их гораздо больше в Google, поэтому я рекомендую именно этот поисковик. К примеру, как я показывал в начале, у нас было техническое задание по дизайну сайта по каким-то кухням. Соответственно, мы можем ввести тут запрос, к примеру, «Кухни мебель». Дальше мы просто открываем 10-20 сайтов, смотрим на их дизайн. Так, интернет-магазин — нам не подходит. Там, насколько помню, была посадочная страница лендинг, интернет-магазин нам не подходит, структура очень отличается. Тоже не то, выполнено не красиво, не качественно, не вдохновляет, не интересно. Друзья, бывают такие вот ситуации, когда не понятно к чему стремиться, на что смотреть и так далее. Мы можем перейти в картинки, посмотреть что здесь есть у нас, добавить например «дизайн сайта»….Ничего не нашли, посмотрим в поиске. Соответственно, мы можем подбирать различные слова «кухни на заказ» — появятся другие сайты. Не переживайте, если вы не найдете сразу какие-то крутые работы. Просмотрев 100-50 сайтов, вы точно найдете что-то интересное, что сможете смоделировать. Как я уже говорил, если не получается найти в поисковике, идете на различные ресурсы, какие-то галереи сайтов, фриланс. На фрилансе мы нашли иллюстрацию. Мы можем смоделировать, взять какую-то кухню в стиле тех.дизайна и ее также обработать. Ничто нам это не мешает.

Последний способ, который я хочу вам показать, тоже довольно таки часто пользуюсь (в моем арсенале он находится на 2 месте) – это личная коллекция крутых работ, которые я встречаю где-то в интернете и себе в папочку сохраняю. Есть различные работы, которые мне нравятся. Допустим, дизайн вот такого автомобильного сайта – очень крутая работа, с которой можно взять какие-то идеи и соответственно смоделировать. К примеру, вы можете смоделировать: взять с сайта машину в гараже, но только изменить освещение, машину, то, где будут стоять работники, как лежат какие-то предметы, как расположено меню, цветовая гамма и так далее. По сути, вы возьмете структуру данного сайта, но практически полностью ее измените. Стиль обработки тех.дизайна можете оставить, в принципе, потому что будет смотреться, наверное, лучше всего. Где брать эти работы? Берутся они на самом деле везде в интернете, какие сайты вы посещаете. То есть, это не так что за какое-то быстрое количество времени вы их насобираете. Я могу по поводу данного пункта сказать, что со временем вы какие-то работы выкидывать будете, потому что уровень тех работ будет уже ниже вашего. То есть, соответственно, вам будет не интересно, нечем вдохновляться. Будете добавлять сюда работы более высокого уровня и, соответственно, вы будете прокачивать свой навык дизайнера, ориентируюсь на более высокий уровень. Вот такие вот способы генерации идей лично я использую и вам советую. Возможно, есть какие-то другие способы, но я не сторонник советовать то, чем сам не пользуюсь. Поэтому, что сам использую, то вам и дал.

Ваша домашка на данном этапе в этом видеоуроке заключается в том, чтобы сделать 3 наброска. У вас в конечном итоге должно получиться 3 разных дизайна сайта. 1,2 и 3. Для каждого из этих дизайнов у вас может получиться порядка 5-7 листов ваших идей и так далее. В общем количестве вы можете потратить 15-20 листов, чтобы сделать такие вот наброски. Для чего я вам это даю? Для того, чтобы вы поняли как собираются, как моделируются, как происходит данный процесс, чтобы вы прочувствовали все это на практике и поняли, что это все вам под силу, что это работает. Когда вы все это сделаете, можете переходить к следующему видеоуроку.

Чуть не забыл, друзья, пока не сделаете домашку из этого видеоурока, к следующему уроку вы не имеете права переходить, потому что, да, потому что нифига вы не запомните, друзья мои. Знания, которые вы не примените на практике, равны нулю. Если вы просмотрели этот видеоурок и не применили знания на практике – вы впустую потратили время. Более того, я вам скажу, если вы не примените эти знания, у вас будет иллюзия, что вы как будто знаете и владеете этим навыком, но на самом деле по факту у вас ничего нет, вы ничего не имеете от этого. И, так скажем, в голове у вас будет не состыковка: вроде бы вы и умеете, вам будет казаться, но по факту ничего у вас нет. То есть, результата вы не получаете. И мысль, что вы не доделали, будет постоянно вас теребить и вам будет не спокойно на душе. Поэтому сразу сделайте. Делайте каждую домашку в каждом видеоуроке и потом спокойно переходите к следующему заданию, к следующему видео. Так будет лучше для вас, потому что вы будете продвигаться гораздо быстрее к вашей цели.

Почему я рекомендую выполнять домашние задания? Потому что вся программа курса  выстроена таким образом, так скажем, в виде такой вот ступеньки. То есть, вам необходимо идти по шагам. Если вы, допустим, с первой ступеньки перепрыгните на 4, вы в конечном итоге сорветесь, и все равно придете к первому, и вам придется рано или поздно пройти необходимую данную ступеньку, весь материал курса, но при этом, вы потратите больше времени. Поэтому, не ищите легких путей. Поймите, что на изучение данного курса необходимо 3 недели и просто пошагово выполняйте.

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

На этом все. Спасибо за внимание и до встречи в следующем видео!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments