Секреты веб-дизайна. Урок №2 — «Прототип сайта. Рисуем простой и понятный прототип сайта»

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

И сейчас вы научитесь делать различные наброски, прототипы различных дизайнов будущих сайтов.

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

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

Давайте рассмотрим совершенно обычную ситуацию, как работают новички, как работают профессионалы. Новички обычно данный процесс пропускают, забивают на него и думают: «А, лучше я сразу приступлю к работе в фотошопе, сэкономлю время и быстрее добьюсь результата». На самом деле, на практике все происходит с точностью до наоборот и результата они добиваются гораздо дольше. Почему так происходит? Ну, давайте рассмотрим обычную, банальную ситуацию. Это у нас будет новичок, это-профессионал. Новичок сразу идет в фотошоп и начинает там рисовать какой-то дизайн сайта. То есть, я условно нарисую какие-то элементы. То есть, давайте представим на мгновение, что это какая-то красивая графика. В то же самое время профессионал сначала рисует тот же самый дизайн на обычной, допустим, бумаге, обычным карандашом. Примерно такой же сайт. Давайте представим, что оба данных человека рисуют данный дизайн для какого-то заказчика, они работают в какой-то студии или на фрилансе, либо же они могут рисовать для себя, но совершенно не важно. Допустим, у нас первый этап – это создание прототипа, второй этап – это работа в фотошопе. Грубо говоря, здесь новичок тратит 0 чесов, минут, профессионал тратит, ну допустим, 3-4 часа. Потом новичок рисует данный дизайн 2 дня (но обычно новички рисуют гораздо быстрее и у них все получается за пару часов, на 2 дня их обычно не хватает) и, допустим, то же самое делает профессионал, то есть, 2 дня. Если мы посмотрим вот сейчас на данную ситуацию, то видим, что профессионал затратил больше времени, а результат у них, в принципе, одинаковый. Но, очень часто получается так, что заказчик взглянул на результат работы и говорит: «А давайте-ка переставим какой-нибудь блок или сделаем его не квадратным, а, допустим, во всю ширину. Ну, вот эти совместим, здесь графику полностью надо убрать, менюшку так же измените и так далее…». Но в чем разница? Заказчик, когда посмотрел на макет, здесь он на этапе прототипа сделал. То есть, у нас конечный результат получился все равно 2 дня 4 часа. Здесь заказчик утвердил. То есть, все, профессионал сдал макет. А новичку придется все переделывать из-за того, что он не показывал макет. Соответственно, он может еще потратить 1-2 дня. То есть, в лучшем случае, он сдаст работу в районе 3-4 дней, потому что ему придется все переделывать практически заново, потому что будет, скорее всего, графика, которая при масштабировании, изменении размеров, потеряет в качестве. Придется ее заново обрабатывать, какие-то элементы заново рисовать (большую часть, процентов 80) и, соответственно, здесь очень много времени. И сравните результат: здесь 3-4 дня, а здесь – ну, в среднем, 2 дня 4 часа. Получается, что в конечном счете, если мы рассматриваем весь процесс по времени когда мы только получили заказ, и  когда мы его сдали, то, когда мы рисуем прототип, то, соответственно, в конечном счете выходит все равно меньше, хотя изначально может показать что это какая-то ерунда и не стоит ей заниматься. Но, если вы планируете заниматься фрилансом или работать где-то в студии, то для вас это необходимый обязательный элемент и без этого никак не обойтись. Да вообще, если честно, без такой проработки будет довольно таки сложно создать качественный дизайн. Потому что, когда вы визуально представили хоть какую-то модель, на которой вы уже будете накладывать все качественные материалы, блоки, графику и так далее, вам будет гораздо проще. То есть, ваша голова уже будет свободна, вам необходимо будет только технически все это реализовать. Если же вы этого не сделаете, то у вас в голове будет куча мыслей по поводу того, как все это разместить, вместить, чтобы элементы друг на друга не залазили, не прятались и при этом необходимо будет еще все обрабатывать. Соответственно, башка будет взрываться от кучи мыслей. Ну, я думаю, после таких доводов я вас убедил и вы всегда будете делать такие вот прототипы.

Ну а теперь, соответственно, переходим к тому, как же все это делать. Есть 2 способа, которые я, так скажем, выделяю. 2 основных. И их, так скажем, уже можно видоизменять, модернизировать, эксперементировать и так далее. Первый способ он самый простой. Просто берете обычный листок бумаги. В моем случае я беру формат А4, потому что на нем больше помещается различных элементов. Какая-то альбомная тетрадка не подходит – там слишком мало места. Для меня, я, так скажем, экспериментировал и понял, что чистый лист бумаги А4 самый лучший вариант. Плюс ручка, либо карандаш. На начальном этапе карандаш и стиралка будет лучше, потому что какие-то элементы вы можете стереть, подрисовать, а потом вы можете точно так же и ручкой рисовать. Второй вариант – это создание таких вот прототипов, соответственно, прямо в интернете с помощью различных сервисов. Я покажу в данном видеоуроке один бесплатный, очень простой сервис, с помощью которого вы можете делать вот такие макеты. В интернете, соответственно, вы можете найти около десятка таких сервисов, у которых больше возможности, но при этом они, скорее всего, уже платные будут. Опять же, из личного опыта могу сказать, что обычного листка и ручки вам вполне хватит. То есть, это уже на ваше усмотрение, как вам больше понравится. Еще есть один очень интересный вариант. Я нашел в интернете вот такой вот шаблончик…сейчас увеличим чуть-чуть…То есть, такая модернизация того способа, о котором я говорил: обычный листок бумаги, в фотошопе наложена такая вот сетка – имитация окна браузера. Соответственно, данный листочек можно распечатать и рисовать. Я, скорее всего, все свои будущие дизайны, которые буду делать, буду уже делать с помощью данного небольшого макета. Потому что здесь идет разметка, здесь идут вот эти вот клеточки, соответственно, рисовать какие-то прямоугольники гораздо проще и не придется потом еще раз дополнительно в фотошопе выравнивать. Уже на этапе прототипа вы будете уже более четко все прорисовывать. Соответственно, я данный шаблончик точно так же приложу в курсе, там шаблончик будет в дополнительных материалах. Вы можете его скачать, распечатать. Я рекомендую распечатать сразу несколько десятков, чтобы было удобнее. Также, сразу хочу сказать, данный шаблончик придумал не я. То есть, я его нашел, сейчас покажу на каком сайте, чтобы мне потом не писали, что я ворюга. Вот с данного сайта ceass.ru я скачал вот данный шаблончик. То есть, автор вот Алексей.

Хорошо, продолжаем. Давайте рассмотрим, скажем так, структуру, алгоритм создания макета на примере данного сервиса. Откроем его заново. Вам необходимо перейти по такому вот адресу wireframe.cc. У нас откроется вот такой вот пустой документ. Здесь, к сожалению, у нас окошко ограничено, и мы не видим, скажем, почему то не могу я прокручивать вниз, какое-то стоит ограничение, не действует. Ну да ладно, нам, в принципе, этого хватит. Все инструменты, все это я вам покажу по данному сервису. Давайте пойдем по порядку. Я покажу вам инструменты как здесь пользоваться, как рисовать, что да как и потом, соответственно, дам домашку. Начнете рисовать, точнее, реализовывать те идеи, которые у вас есть в такие вот прототипы. Здесь есть небольшое видео, которое вы можете посмотреть (буквально на полминуты). Нажать на данную кнопочку и здесь появится такое небольшое обучающее видео, без слов оно, соответственно, показано, что да как выбирать и так далее. Следующее. Здесь есть макет стандартный, который вы можете применять под себя. То есть, как вы видели, я нажал всего одну кнопочку и загрузился вот этот вот стандартный шаблон. Естественно, здесь есть премиум версия, в которой гораздо больше возможностей, но мы рассматривать ее не будем, потому что я в этом какого-то особого смысла не вижу. То есть, вы можете воспользоваться данным шаблончиком, просто переставлять какие-то элементы, либо давайте создадим с нуля. Сейчас у меня, друзья, экран браузера свернут до размера в 1200 по ширине, 700 по высоте и здесь почему-то пропадает кнопочка. Сейчас я разверну, и вы увидите, что появилась кнопка Start drawing. Соответственно, она должна быть у вас изначально. Чтобы начать создавать документ просто по ней щелкаем. У нас появляются различные менюшки и пустой лист остается. Здесь почему-то сворачивается вот эти менюшки и рисовать не совсем удобно. Но да ладно, покажу большую часть функций, которые возможны.

Давайте приступим. Рисуется на самом деле все очень просто. Мы берем мышку и рисуем какой-то элемент. Выделяем какую-то область, далее у нас появляется вот такое вот всплывающее меню. Соответственно, когда мы передвигаем курсор на какой-то объект, у нас меняется форма объекта. Соответственно, картинка изображается вот такой вот — перечеркнутым квадратиком, дальше какой-то текст с выравниванием по левую сторону. Это у нас так сказать чек-лист, то есть список каких-то различных выгод на подобие. Здесь какие-то колонки с информацией в линию. Дальше можно ставить текст и соответственно тоже такой вот блок с текстом плюс можно добавить какие-то поясняющие комментарии. Вот в принципе и все, как видите не так уж и много элементов, но для создания простого макета их вполне достаточно. То есть, вверху мы можем разместить шапку, далее можем нарисовать менюшку. После того, как мы подредактировали форму можно кликнуть 2 раза по данному элементу — у нас выделяется он таким пунктиром по краям, соответственно, можем выбрать жирность краев, поменять цвета фона и, соответственно, объекта. Но сейчас это пока никак не видно. Здесь выбрать какой-то оттенок серого, плюс сделать какой-то элемент красным если необходимо. Ну, давайте сделаем, допустим, серым. Дальше мы можем точно также выбрать какой-то элемент, допустим текст, и что-то здесь прописать, допустим, «главная» и, соответственно, передвинуть. Также хочу сказать, что здесь работают такие же горячие клавиши по умолчанию windows. То есть, на копирование и вставку ctrl+с, ctrl+v. Соответственно, мы можем скопировать, вставить, передвинуть. Сейчас я передвигаю просто на клавишах, стрелка  вправо и подредактировать соответственно текст, например, «о компании» и так далее. Таким вот образом мы можем изменить еще размер текста, 3 варианта, можно выравнивать текст: по левому краю, посередине, по правому краю и соответственно по краям слева и справа (текст выравнивается абсолютно одинаково, то есть, заполняя пустые места между словами).

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

Хорошо. С программкой мы практически разобрались. Осталось совсем немножко функций. Здесь мы еще можем дополнительно менять вот эту вот сетку. То есть, сейчас у нас стоят квадратики, здесь мы можем изменить обычный лист бумаги и, соответственно, колонки. Точно такая же сетка модульная как у нас в фотошопе. Дальше, можем включать или выключать вот эту вот сеточку. Эта настройка не знаю, на что влияет, как ни пытался. Дальше можем изменять размер вот этих вот расстояний колонок соответственно. Как вы видите, увеличиваем и квадратики у нас становятся больше. Дальше мы можем менять….по идее должны меняться…цвет вот этих вот строк, но почему-то не меняется. По крайней мере, я ни фига не вижу.

Следующий точно так же интересный параметр – мы можем менять размер, грубо говоря, нашего сайта. Сейчас у нас 1024 пикселя по ширине и 600 по высоте. То есть, давайте увеличим, допустим, до 2. Сейчас я открою на полную экран…Кстати говоря, вот здесь вот сейчас вы можете видеть, что справа снизу в макете есть такой вот квадратик со стрелочкой, передвигая которой мы можем изменять размер и он автоматически меняется как раз таки вот в этом поле. Сейчас слишком большой размер, поэтому я изменю сервис (не совсем корректно работает в свернутом окошке). Поэтому я верну сервис по 1024 в ширину. Хорошо. Здесь у нас остались пункты в меню не важные: компании, контакты и зарегистрироваться, чтобы пользоваться всеми функциями премиум аккаунта.

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

Теперь давайте я расскажу о пошаговом алгоритме, как я рисую данные макеты. Честно говоря, друзья, я рекомендовал бы вам все-таки рисовать на простом листке бумаги от руки, потому что данный процесс происходит гораздо быстрее, интереснее, и он, скажем, развивает ваши какие-то дизайнерские навыки. Здесь же все происходит довольно-таки долго и я рекомендую использовать данный сервис если вы хотите сделать какую-нибудь небольшую презентацию  для заказчика, чтобы это выглядело по красивее, скажем так, и презентабельнее. Так, давайте сейчас откроем новый лист, и я пошагово скажу, что вам необходимо делать, как рисовать. То есть, возьму обычный карандаш, чтобы показывать. Соответственно, первым моментом я всегда определяю ширину макета. Обычно, это сразу становится понятно с технического задания, в котором вы понимаете какая будет целевая аудитория, либо заказчик вам сразу ограничивает – говорит такая вот будет ширина и вы просто забиваете себе. Допустим, 800 пикселей по ширине. Разные бывают случаи. Бывает, делаете, допустим, какой-то лендинг и заказчик говорит, что там необходимо сделать, допустим, 640 пикселей по ширине. Но бывают разные причуды заказчиков, поэтому первым делом я определяю ширину. Далее я прорисовываю шапку. То есть, я как бы прорисовываю саму идею и то, что там будет. Это, допустим, какие-то горы, домик. Если посмотреть, как я рисую на бумаге, примерно все так и происходит. Допустим, здесь какая-то семья сидит, я обычно ставлю вот такие вот стрелочки и подписываю, потому что потом, когда начинаю в фотошопе рисовать через пару часов, могу не понять, что нарисовал. По надписям, соответственно, понятно. Рекомендую точно так же пользоваться. Плюс, я могу написать какие тут будут эффекты. Дальше я прорабатываю меню, то есть различные пункты. Дальше у нас идут блоки с различным контентом. То есть, я, допустим, знаю, что у нас будет 3 одинаковых блока, они будут одинаковые и более конкретно я прорабатываю один, потому что я не вижу смысла делать то же самое с остальными, т.к. они одинаковые. Соответственно, я беру вот этот блок, более конкретно его прорабатываю. То есть здесь допустим, будет какая-то картинка, здесь — какая-то кнопочка, здесь — будет у нас текст с левым выравниванием, здесь-допустим, какая-то ссылочка. Соответственно, т.к. у нас эти элементы повторяются, вам необходимо только один такой вот элемент прорисовывать. И, соответственно, последним моментом у нас прорабатывается подвал, там, где идут различные ссылки, возможно, дублируется меню и так далее. То есть, такая не совсем важная информация. Вот собственно и все.

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

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

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

Спасибо за внимание и до встречи!

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



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

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