Урок 7. Веб-дизайн одностраничного сайта. Серый дизайн.

Автор Andrei Golubev
Урок 7. Веб-дизайн одностраничного сайта. Серый дизайн.

Всем доброго вечера сегодня мы говорим про веб дизайн и попытаемся сделать небольшой одностраничный сайт начинается концепции и идеи заканчиваю готовые макеты psd для работы мы будем использовать шириной 1700 пикселей высота будет меняться в процессе работы и пользоваться обычная сетка 12 колонок в файл с примером которую вы сможете использовать в своей работе будет приложить к этому видео любой сайт или Vaillant начинается с кем-то поэтому первое, что нужно сделать — это разобраться как мы будем показывать вид контента.

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

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

Кроме название объясним пользователю. Где он. На каком ресурсе для этого мы и. Скопируй название и напиши места название описание будет рецепт пиццы рецепт самой вкусной пиццы сделаем его меньше сразу чтобы была на этом этапе. Понятно где важнее где второй степени момент серого дизайна можно использовать любое средство. Вы можете делать — это на бумажке можете использовать фото. Можете писать сразу точное текста. Можете примерный всегда лучше работать сразу с точным контентом чтобы можно было сразу объём и располагать его более. Логично Вот получается первое, что увидит наш пользователи. Зайди на сайт — это картинка с названием даже обычно в одном месте сайтов или странички в этом меню которое. Объясняет, что ещё есть здесь напишем расположен меню сверху по центру теперь очень важный момент когда мы начинаем работать с таким серым дизайном если мы — это делаем в. Фотошопе лучше прямо сейчас начать правильно организовывать свои чтобы потом не мучиться и не мучить других равно количеству непонятных слов есть несколько простых правил. Лев объединять по смыслу и по расположению допустим у нас есть верх страницы мы берём всё, что относится к верхней части и объединяют в одну группу назовем её название можно придумать. Какие Вам угодно ты не так важно главное чтобы адекватно ситуация и передавали смысл соответственно чтобы не запутаться все текстовые файлы которые относятся к меню мы сразу же группу минут. Таким образом мы можем можем намного легче ориентироваться в нашем фонде никогда общее самые большие платки в день объединяющие экрана будут собраны у меня сразу всё структуру так вот соответственно наше меню следующим пунктом следующем экраном будет экран с гарантией и кредитами ингредиентами чтобы создалось приятное ощущение ритма мы будем использовать страницу с формой фотографии странице верховную фотографии получили соответственно следующая страница будет без фона фотографий мы напишем заголовок не могу пока чёрного цвета мне надо побольше кому-то середине и мне кажется здесь должно быть несколько картинок. Как нам подсказывает рецепты будет раз-два-три-четыре относящихся к тесту уберём серые прямоугольники обозначающие место расположение картинок и ставим пять штук. На данном этапе нам абсолютно. Неважно как они будут выглядеть дальнейшем нам главное показать для себя, что здесь будут серые джинсы название что-нибудь поменьше шрифт может быть мне 1824 футбол лучше занять место. Первое название пока не очень удалось подробно, что именно здесь. Как расположена главное на цепи такого серого эскизы оценить объем контента. Отлично так как у нас весь процесс делится на создания текста и создания начинки ингредиенты тоже мне кажется было бы логично родились и живем отдельно для теста и сделаю такую же блок для начинки разберёмся с разными слоями берем. Все свои которые относятся к странице ингредиентов и объединяет их в группы ингредиенты ставим её ниже группе группы шапка чтобы было логично расположено внутри группы ингредиенты объединяем ингредиенты для теста в отдельную группу мы называем её соответствующую и объединяем ингредиенты для начинки в отдельную группу и называем её также теперь видно, что огромное количество слоёв у нас собралось в две папки которые соответствуют нашим экрана идём дальше следующими действием которой нужно сделать мне немножко увеличен размер рабочего поля и так как мы решили, что у нас было чередоваться своих. Мегафоне без причины плохого не получается сейчас нужно сделать свой с картинкой экран с картинкой на фоне тест на берем прямоугольник и составил него наш. Маркет beeline.ru и сразу же объединяют в группу которую назовём теста по названию экрана для того чтобы понять, что ещё будешь знать мы обратимся к нашему контенту киносат рецепт и скорее всего в этом экране у нас нужно будет показать инструкцию поэтому. Скопируй текст не расположенного на экране. ПК примерно так же оставим его пока теста.

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

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