Урок 3. Создание скетча сайта

Автор German Usachev
Урок 3. Создание скетча сайта

в предыдущем уроке мы собрали необходимую информацию и определились примерным содержанием главной странице нашего сайта теперь нам нужно придумать как раз всю эту информацию на странице то есть визуально представить нашу идею.

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

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

Это самый быстрый способ создание скетча при этом даже не нужно владеть навыками рисования и создания чертежей. Сейчас я покажу вам как я нарисовал скетч главной странице нашего сайта — это не видеосъемка, а просто анимированные представление процесса. А позже мы разберём с вами. Из каких элементов и блоков состоит наша речь внимание на экран таким образом за достаточно короткое время мы подготовили скетчи главной странице теперь давайте рассмотрим его более подробно разберем. Из каких элементов он состоит визуально наш скетч можно разделить на три части самая верхняя часть шапка сайта или по-английски Hero внутри этого блока расположен логотип основное меню сайта со ссылками они у нас обозначены тут какими линиями и также здесь расположена кнопка для от заявки если. Посетитель захочет стать нашим клиентом он сможет легко отправить заявку нажав на эту кнопку на любой странице сайта шапкой сайта разобрались 2. Визуальная составляющая наша встреча — это основной антенный блок внутри которого будет расположена основная информация страницы по-английски. Я назвала её Block Content. Давайте разберем, что же находится внутри этого блока Block Content содержит внутри себя ещё несколько блоков и самый первый из них — это слайдер изображений такие слайдеры вероятно уже видели очень много раз на других сайтах слайдере будут показываться некоторые проекты либо акции либо ещё какая-то информация стрелками обозначены переключатель они нужны чтобы. Посетитель мог сам переключить нужный слайд если информация на нём показалось ему интересной под слайдером у нас будет расположен блок с короткой информация о компании в предыдущем уроке мы решили, что разместим на главной странице сайта некоторую информацию о компании чтобы. Посетитель Понял куда он попал и. Чей — это сайт внутри этого блока у нас будет заголовок он обозначен такой линией и в два столбика мы разместим короткий текст о компании с этим блоком тоже разобрались дальше у нас — это блок с последними выполненными проектами линей также указан заголовок этого блока так как — это сайт компании которая разрабатывает сайты под заказ здесь будут расположены изображения последних выполненных проектов если посетителя заинтересует изображение то он шёл на. Вполне может перейти на страницу с подробным описанием этого проекта в основном экране то есть видимой части страницы будут видны пять последних созданных сайта они у нас обозначены такими перечеркнутыми прямоугольниками, но с помощью таких стрелок мы обозначаем, что содержимое этого блока содержит больше работы и по щелчку на соответствующую стрелку должны появиться следующие пять работ — это по сути слайдер под блоком с проектами мы разместим блок с логотипами наших клиентов линии также обозначает заголовок блока подзаголовком видимой части страницы мы можем 5 логотипов они у нас указаны в виде таких прямоугольных фигур, но с помощью переключатель также обозначаем, что элементов будет больше на стрелку появится следующие пять логотипов далее под блоком с логотипами мы разместим отзывы клиентов у этого блока будет также заголовок вот он обозначен линии подзаголовком уже расположены сами блок с отзывами будет видео уже знакомого нам слайдера внутри каждого блока 100 мы разместим фотографии человека от которого поступил отзыв его имя и текст самого отзыва с блоком с отзывами тоже всё понятно. И у нас осталось 3. Визуальная составляющая скетчи нашей главной страницей это. Самый Нижний блок называют подвал или же по-английски хутор, но здесь хутор можно разделить на две части первое вот этот блок в котором будут у нас расположены ссылки на страницы сайта и здесь три колонки по. Сколько слов в каждой 4 колонка будет с контактной информацией и иконками социальных сетей которые обозначены видя таких квадратов. Первая колонка будет о компании вторая колонка будет со ссылками на услуги компании третья колонка будет содержать заголовки статей блога. Ну, а 4 как я уже говорил колонка с контактной информацией и у нас остался второй блок futura это. Самый Нижний блок в котором мы разместим логотип. Он у нас обозначен в виде такого прямоугольника. А в правом углу — это мы разместим текст копирайта вот из таких элементов состоит скетч главной странице нашего сайта. Вы можете по-своему создавать скетчи то есть.

0 комментариев
0

Читайте также