Карьера веб-дизайнера с нуля до первой продажи за 14 дней. Урок №1 — «Заимствуем идеи у самых…

Приветствую Вас, уважаемый друг!

Мы начинаем блок по веб-дизайну, первый видео урок, и сейчас я вам расскажу, как искать идеи для ваших будущих сайтов. В этом блоке я вам дам пошаговую систему по созданию дизайна сайта, очень простую, но эффективную. Ее использовал в начале своей карьеры первые, наверное, 1-1,5, очень сильно она мне помогла. Она не требует от вас никаких специальных знаний, у вас будет получаться даже если у вас нулевой опыт в создании сайтов, то есть, в дизайне, в фотошопе, вам не нужно знать кучу теории по поводу там различной типографии и сеток в веб-дизайне, и так далее, то есть, колористики, всех вот этих важных моментов. То же самое, вам не нужно изучать кучу различных книг, что бы научиться делать первые дизайны сайтов.

Сейчас я вам покажу очень простую систему. Она заключается в том, что на самом деле мы не будем изобретать велосипед, а просто будем заимствовать идеи, которые уже придумали другие дизайнеры. То есть, мы будем смотреть различные дизайны сайтов, брать какие-то отдельные ее элементы и составлять свой уникальный дизайн. Соответственно, в первом видео уроке я вам покажу, как найти вот эти все классные работы, то есть, пошагово, в поисковиках, в картинках и так далее. Почему не стоит на первоначальном этапе, первые год-два, пока вы будете заниматься дизайном, пока не сделаете порядка 40-50 первых работ делать с нуля свои дизайны, что-то самому придумывать? Ну, просто потому, что у вас нет опыта и ничего хорошего из этого не выйдет. Вы не знаете кучу различных базовых принципов, что касается, допустим, разметки страницы, ее структуры, сетки, типографики, юзабилити, колористики, как подбирать цвета и так далее. Все эти моменты, которые я сейчас озвучил, они, скажем, не изучаются так быстро, как фотошоп. То есть, фотошоп можно изучить за 1-2 месяца. И те же моменты можно, скажем, все понять только на практике, если вы будете работать по часов 8 в день в течении от 6 до 12 месяцев. То есть, это такие вещи, которые приходят только с месяцами практики, и, соответственно, дабы вы не сделали какую-то фигню, которую не сможете потом продать, то, соответственно, мы будем копировать чужие идеи и их реализовывать. На самом деле нет в этом ничего зазорного просто потому, что когда вы станете крутым дизайнером, все равно вы, если придумаете какую-то свою идею, то найдется несколько десятков человек, которые найдут что-то общее, похожее с другими работами либо в дизайне сайта, либо в других областях, поэтому можете над этим не заморачиваться, ничего нового вы уже никогда не придумаете, все уже придумано до нас. Поэтому первый момент, который сильно мешает новичкам – это желание придумать что-то вот свое уникальное, чего в мире нет. Не будет такого. Просто для себя приметьте, что все уже давно придумали и гораздо проще, эффективнее и прибыльнее для нас, как дизайнеров, просто заимствовать чужие идеи, немножко их переделывать, моделировать и делать уникальные сайты, которые будем очень дорого продавать в последующем. Ну что ж, такое небольшое отступление, дабы вы понимали, зачем все это мы делаем, что бы у вас не было каких-то внутренних противоречий. Сейчас давайте переходим, непосредственно, к технической части. Я покажу, как искать те самые сайты, как делать скриншоты, что бы у вас не возникло трудностей.

Так, давайте рассмотрим на простом примере. Допустим, у нас какой-то заказчик, который имеет компанию стоматологию и, соответственно, для нее нам необходимо сделать дизайн сайта. Первое, что вам необходимо сделать – это понять по таким словам мы будем искать, непосредственно, вот эти вот сайты, что бы ничего не придумывать, а знать на 100% какие слова забивать в Google либо Яндекс, нам для этого первым делом необходимо зайти в следующий сервис. Находится он по такому адресу: wordstat.yandex.ru, и здесь у нас появляется такая строка поиска, куда необходимо забить какое-то одно ключевое слово, ну можно два. Давать вобьем самое простое, что нам приходит в голову – это стоматология. Нажимаем «подобрать» и здесь нам сервис показывает то количество слов и запросов, которое люди вводят, непосредственно, в Яндекс и какое количество вот этих вот запросов ищут люди. То есть, допустим, «стоматология цены» —  в месяц ищут 27 528 человек. Если мы посмотрим сколько вбивают в Яндекс словосочетание «телефон стоматологии», то это уже меньше – 16 761 запрос. И, соответственно, точно так же мы можем все эти запросы посмотреть. То есть, допустим, глазная стоматология еще меньше. Из этого мы можем сделать вывод, что нам гораздо лучше, если мы будем брать самые верхние вот эти слова и по ним, соответственно, искать. Слово стоматология, оно суммирует вот эти все словосочетания и всего в месяц по статистике Яндекса больше 1 миллиона запросов. Соответственно, можно прям начать с этого слова и, соответственно по нему смотреть. Для чего я вам показываю данный сервис? Для того, что бы, когда вы вбиваете где-то в Яндексе, либо в Google данное словосочетание, очень часто начинает здесь на первых строчках вылазить различные сервисы, скажем, так называемые, не конкретно сайт какой-то стоматологии, а просто сайт, на котором собраны разные стоматологии со сравнением цен, услуг и так далее. То есть, если по стоматологии еще можно найти сайт, а если, допустим, купить какую-нибудь недвижимость, то здесь первые 10 страниц вот на подобии вот этих вот сайтов будут вылазить, то есть, это сервисы по подбору. Соответственно, здесь мы никакой красивый дизайн не найдем у структуры, совершенно нам не подходящий, потому что нам необходимо сделать, допустим, дизайн конкретной компании, а не сервиса. Это совершенно другой тип сайта вообще. Соответственно, если в таком случае у вас первые 10 вариантов такие вот сервисы, то просто спускаетесь вниз по порядку, по этим словам, выбираете следующее слово и здесь уже будет более точная выдача по запросам. То есть, допустим, если мы  берем недвижимость, сюда вбиваем, можно спуститься вниз и, допустим, выбрать «Петербуржская недвижимость», посмотреть парочку запросов, если это обычные сайты…вот здесь мы видим опять сервис по подбору, так, тот же самый сайт…то же самое. Соответственно, мы можем спуститься еще вниз, нажать кнопочку «далее», найти другие словосочетания, допустим «загородная недвижимость», вполне хорошее слово, можем по нему кликнуть. Откроется, непосредственно, словосочетание, которое добавляется вот сюда еще дополнительно, то есть, «загородная недвижимость область», «загородная недвижимость Санкт-Петербурга», то есть, более расширенная статистика по словам, и, соответственно, здесь уже можем какое-нибудь ключевое слово выбрать, то есть «аренда загородной недвижимости» — уже более  такое конкретное, и, соответственно, здесь нам могут попасться уже более какие-то адекватные объявления. Вот таким образом необходимо отсеивать сайты, дабы попасть на необходимые для нас. Вот уже попалось какое-то более и менее сайт, опять же, какая-то небольшая компания. То есть, вот такой вот алгоритм.

Давайте рассмотрим на примере все-таки стоматологии. Вбиваем либо в Яндекс, либо в Google и точно так же, как я показывал недвижимость, мы просто просматриваем все сайты. Открываем в браузере, что бы открывались в новых окошках, щелкайте просто на ролики с мышкой посередине и открывается в новом окошке. И так все сайты вы открываете. То есть, мы просматриваем каждый сайт, определяем для себя, нравится он нам или нет. Если не нравится, мы его смело закрываем, то есть, не нужно останавливаться на каких-то вариантах, которые вам не по душе, только брать именно то, что вам подходит. Но, опять же, не стоит переоценивать свои силы и, если вы видите, что дизайн слишком сложный для вас, то, соответственно, его брать не нужно, потому что вы все равно его не нарисуете. Смыла такого дизайна – никакого. Вот так вот мы просматриваем сайты, давайте хотя бы один найдем более и менее приличные, в Яндексе посмотрим. Здесь я уже видел, более и менее средний сайт. Ну, везде, а, более менее сайт, остальные по структуре, по цветовой гамме, по размещению плохие, такой средненький на 3,5 балла сайт – пока что его оставляем.

Сейчас я вам покажу, как делать скриншоты данных сайтов, то есть сейчас вы видите, что у нас видно только лишь примерно третью часть странички, то есть, соответственно, если вы будете нажимать на клавиатуре кнопку PrntScr, то нам придется сделать кучу вот этих вот снимков, потом в фотошопе объединяете – это очень и очень неудобно. Есть гораздо простой способ. Для браузеров есть небольшое расширение, нажимаю на конкретную кнопку, он нам делает скриншот сразу всей страницы. Сейчас я вам покажу, как это все установить и, как это работает, но перед этим давайте создадим на компьютере папку. Перейдите в какой-нибудь из своих дисков, допустим в диск D, создайте там папку, допустим «дизайн сайта» и здесь создаете папочку отдельную «идеи». Соответственно, сюда мы будем сохранять все эти скриншоты сайтов. Пока что закрываем данную папку, нам не нужна.

Сейчас нам необходимо установить плагин по созданию скриншотов сайтов. Я пока что удалю его, что бы заново показать вам. Я буду показывать вам на примере Google Chrome браузера, если у вас какой-то другой браузер, можете попробовать поискать там, но по уроку рекомендую проходить, в принципе, точно в таком же браузере. Скачать вы его можете либо в Яндекс, либо в Google. Итак, в Google Chrome жмем вот по этому значку, по меню, далее переходим в «инструменты» и здесь у нас есть пункт «расширения». Так, давайте я передвину немного экран, что бы было видно. Итак, «инструменты», и вы видите здесь пункт «расширения» — переходим в него. Далее необходимо спуститься вниз, нажимаем на ссылку «расширения». Здесь в поиске вбиваем «скриншот». Отлично. У нас появилось куча различных приложений и расширений для браузера. Вы можете попробовать какой—то другой, я покажу на примере вот этого вот расширения, которое называется Awesome Screenshot:Capture&Annotate, жмем на кнопку «бесплатно», нажимаем «добавить», у нас происходит установка данного расширения и здесь появляется такое сообщение, что необходимо кликнуть по этому значку, и расширение активируется. Жмем по нему, у нас открывается несколько страничек, мы можем их спокойно закрыть, они нам не нужны. Вот эту вот страничку с расширениями тоже закрываем, не нужна она нам, и эту тоже. Что дальше? Дальше для того, что бы сделать, непосредственно, скриншот любого сайта, нам необходимо просто-напросто нажать на этот значок. У нас появляется вот такое вот всплывающее меню и здесь мы выбираем «Capture entire page», то есть, это значит, что необходимо сделать скриншот всего сайта, не только конкретного экрана, либо какой-то части. Так же, вы можете нажать сочетание клавиш Ctrl+Shift+E, вот здесь оно справа написано, ну, пока что вручную вот так выберем – нажимаем, и вы могли заметить, что сейчас, вот эта программка, три вот этих экрана пролистало вниз. Давайте посмотрим, что  нас получилось. То есть, сверху у нас идет такое небольшое меню с инструментами редактирования, где мы можем добавлять различные стрелочки, обрезать что-то и так далее. В данном случае нам это не нужно, нам необходимо, что бы был целостный скриншот сайта. Отлично! Все отлично сработало! Нажимам Done и нажимаем кнопочку Save. Здесь нам предлагается сохранить данную картинку. Выбираем нашу папку, в данном случае диск D – Дизайн сайта и папочку, которую мы создали. Я рекомендую сохранять картинки цифрами, так будет проще, ну, по крайней мере, я в своей практике так делаю, нажимаю 1 и нажимаю «Сохранить». Давайте перейдем в нашу папочку и посмотрим на данный макет. То есть, вот у нас получилась данная картинка, открываем ее и сейчас, если мы посмотрим в 100% размере, полный размер, мы видим, что у нас данный сайт полностью сделался в скриншот. Вручную в фотошопе делать не нужно. Вот так вот делается очень легко и просто скриншоты в программе, точнее в браузере и экономят время. После этого, соответственно, данную вкладку мы закрываем, и, соответственно, данный сайт, где сделали скриншот тоже закрываем, продолжаем поиск. Соответственно, вы могли заметить, что мы просмотрели порядка 10-15, наверное, сайтов и всего лишь нашли какой-то один более и менее подходящий вариант. Соответственно, как бы получается, что это несколько неэффективно, тратится куча времени, куча кликов, просмотров и так далее. Можно пойти другим путем, добавить к этому слову «дизайн сайта». Нажимаем «искать», у нас опять уже появились другие сайты, но мы переходим в картинки, и здесь, соответственно, появляется куча различных сайтов, кликая на которые мы можем смотреть различные варианты, то есть, вполне неплохой сайт, скажем, гораздо лучше, чем предыдущий. Тоже интересный вариант…вот классный вариант, соответственно, то есть, его мы можем открыть в полном размере, увеличиваем в масштабе и щелкаем правой кнопкой мыши и нажимаем «сохранить картинку как». Точно так же выбираем наш диск D, «дизайн сайта», «идеи» и сохраняем под 2 картинкой. Здесь у нас сейчас не видно вторую картинку, потому что расширение вот у этой картинки jpg, а у предыдущей png, соответственно, Windows не видит просто. Нажимаем «сохранить», но, тем не менее, обе картинки у нас в папочке здесь есть. То есть, мы можем просмотреть данную картинку в полном размере, и,  соответственно, уже моделировать. Допустим, взять эту красивую иллюстрацию в стиле тех.дизайна, обработка тоже очень красивая, менюшка вполне хорошая, да вообще сайт сделан, в принципе, адекватно, то есть, если вы не сможете, допустим, обработать данную графику, красиво ее сделать, я вам покажу, где покупать на фотобанках более и менее подходящую, профессиональную, сфотографированную, и, соответственно, тоже будет вполне красиво, качественно, профессионально смотреться. На этом сейчас просто не заморачивайтесь. Ваша основная цель – собрать вот такие вот работы для идей, для последующей, что бы вы могли в дальнейшем смоделировать, сделать одну красиво.

Следующее, что я хотел вам сказать – не стоит ограничиваться только, допустим, поисковой системой Google. Почему? Потому что они индексируют все сайты совершенно по-разному признаку. Давайте посмотрим какие сайты сейчас у нас здесь показываются, скопируем вот это точно такое же словосочетание, зайдем в Яндекс в картинки, вобьем в поисковую точку точно такое же словосочетание и посмотрим в картинках насколько отличается выдача. То есть, мы можем заметить, что первая десятка сайтов совершенно отличается от первой десятки сайтов Google. Единственное, вот этот сайт, по-моему, похож, ну и вот он есть. Все остальные, в принципе, сайты несколько отличаются, соответственно, для того, что бы найти разные интересные работы, вам необходимо просматривать в обоих поисковых системах – в Яндекс и Google. Но сразу хочу сказать, что в данном примере со стоматологией, в картинках гораздо больше сайтов, в других каких-то сферах здесь вообще может быть, отсутствовать картинки по запросу «дизайн сайта как крыть крышу», не знаю, будете делать какой-то лендинг, на такие темы узкие могут отсутствовать, поэтому используйте оба варианта, можете смотреть, как в картинках, так и просто в поиске. Что ж, все технические моменты я вам показал. Давайте я вам подытожу, что вам необходимо сделать.

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

Ну что  ж, на этом данный видео урок я буду заканчивать. Рекомендую прямо сейчас начать выполнять данное задание, то есть, вам необходимо отобрать 10 таких вот красивых работ и сложить их в папочку «идеи». После этого можете переходить к следующему видео уроку и, соответственно, выполнять следующее задание. Хочу сразу сказать, что вот эти вот шаги, они касаются каждого отдельного сайта. То есть, у вас будет задание сделать 5 работ для портфолио, то есть, по сути, вам каждый раз необходимо будет проходить по всем этим шагам, и постепенно первый раз будет по видео урокам составлять какой-то планчик, а потом со временем, когда вы их сделаете несколько десятков работ, все это отложится у вас в голове и вы будете делать это на автомате, точно так же, как чистите зубы по утрам, то есть, посматривать что-то по плану будет не нужно. Но первое время, пожалуйста придерживайтесь и не упускайте никакие шаги, иначе результат тогда не получится, денег не заработаете.

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

На этом все, спасибо за внимание, приступайте к работе, как сделаете – переходите к следующему уроку. Пока-пока!

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



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

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