Карьера веб-дизайнера с нуля до первой продажи за 14 дней. Урок №2 — «Рисуем набросок сайта на бумаге.»

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

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

Давайте я вам покажу на примере. Я уже подготовил небольшой примерчик. То есть, первым делом, допустим, мы выбираем какое нарисовать нам меню. Менюшки бывают разные, то есть, горизонтальные, вертикальные. Я рекомендую использовать горизонтальные, потому что они несколько привычнее людям. В основном они всегда располагаются вверху и люди их ожидают там увидеть. Соответственно, если вы их опустите куда-то вниз, если не дай Бог, опустите на место подвала…Кстати говоря, если вы не знаете что такое подвал, то это вот это место. Там, где у нас дублируются ссылки, ставятся различные контакты ну и так далее, то есть, нижняя часть.

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

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

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

Увеличим масштаб до 100%. Здесь, к сожалению, плохой масштаб (а точнее размер картинки) и смотрим. Вы просто смотрите на менюшки и определяете, какая вам больше нравится по стилю, по расположению, по форме и т.д. Здесь, допустим, это меню, оно расположено слева. То есть, в принципе, меню все одинаковые. Отличаются немножечко формой, цветом отличаются, ну и естественно шрифтом. Соответственно, после того, как вы все это просмотрели, вам необходимо на совершенно обычном листке бумаги нарисовать вот такую менюшку. То есть, я так карандашом, криво, косо нарисовал менюшку. Сразу хочу сказать, что вам не стоит заморачиваться, не нужно рисовать по линейке, что бы было все ровно и так далее. Это делать совершенно не нужно. Основная цель – что бы вы четко представили то, как будет выглядеть ваш будущий дизайн. Что бы вы примерно знали, где будут располагаться различные блоки, что как будет называться, где будут картинки, где текст и так далее. Это мы делаем для того, что бы сэкономить себе время, когда будем работать в фотошопе, потому что если вы в фотошопе начнете вот эти вот сразу блоки рисовать, то скорее всего, с размерами ошибетесь. Где-то что-то не так будет расположено, потом это все придется переставлять, изменять размеры, шрифты, цвета и так далее, и на это уйдет гораздо больше времени. Поэтому здесь просто набросочек такой делаем, буквально там за пару минут, пять, десять тратим и потом переходим только в фотошоп. Потому что в фотошопе переделка может занять несколько часов, если сайт сложный, то несколько дней. То есть, рисуя такой вот макет на бумаге, мы грубо говоря, экономим себе время. А, соответственно, сэкономив время, вы будете больше зарабатывать на фрилансе, на дизайне.

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

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

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

Давайте я покажу вам, как это сделал я. Точно также левая менюшка, парочка пунктов меню и вот какой-то текст, одинаковый скажем, я заменяю такими вот строчками. Далее мы дорисовываем контент, то есть здесь какой-то рисунок – приветствие, допустим, главного стоматолога данной клиники, дальше какой-то заголовок и, соответственно текст, плюс парочка картинок.

Ну и, соответственно, последним шагом у нас идет прорисовка подвала, hadar-ом, ой, не hadar-ом, future-ом, точнее, если по-английски. Точно также мы заходим в нашу папку и начинаем просматривать все вот эти нижние части, и смотрим, как они сделаны. То есть, первоначально вы можете не понимать, не знать какая должна быть структура у сайта. На самом деле я учился именно так. Просто смотрел, как сделаны там несколько сайтов и просто напросто моделировал. Ставил вот такие вот копирайты, ставил контакты, чуть дополнительную информацию просто смотрел, выбирал самое лучшее, что есть на большинстве сайтов – это опять же, один из критериев. То есть, если вы находите какую-то, допустим, вещь, которая присутствует только на одном из десяти сайтов, то ее лучше не ставить в ваш дизайн. Если же вы нашли, допустим, какие-то элементы, которые присутствуют, допустим, на 5-8 сайтах из 10, допустим, те же самые копирайты, то это точно необходимо вставить, и они будут присутствовать на каждом сайте – не ошибетесь. То есть, вот здесь вот название компании, копирайты, контакты и так далее.

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

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

На этом данный урок я буду заканчивать. Ваша основная цель – сделать вот такой вот набросок на бумаге, где будет 4 основных пункта: это менюшка – 1е, 2е – это шапка, 3е – это контент, куда будет входить, возможно, меню, возможно, нет (то есть на разных сайтах по-разному), какие-то изображения, картинки, текста. Соответственно, 4й момент – это подвал. В данном курсе мы будем рассматривать только создание главных страниц, внутренние пока трогать не будем, потому что на начальном этапе, на фрилансе, он достаточно будет разрабатывать главные страницы, а так как заказчики в основном не знают, что существуют еще и внутренние, а когда у вас ценник станет за ваши услуги 3-5 тысяч рублей, вы узнаете уже как разрабатывать внутренний. Пока что можете по поводу этого не заморачиваться, потому что главных страниц будет достаточно.

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

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



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

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