Делаем шапку и баннер главной страницы. Сайт с нуля. Веб-дизайн

Автор Maksim Inshakov
Делаем шапку и баннер главной страницы. Сайт с нуля. Веб-дизайн

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

Вот и поэтому мы можем начать делать прототип. Сегодня мы. Наверное сделаем шапку и баннер.

А в следующих видео уроках будем двигаться дальше по чуть-чуть.

Чтобы сильно не забивай голову как бы сразу всех главной странице так. Ну давайте посмотрим, что у нас имеется. Значит у нас есть главное меню категории и начну с баннера потому, что баня задач вообще настроение и так будет. Просто приятнее работать то есть не сразу начинает там отсюдова до что-то делать, а сделаем планировщик и нам будет самим приятнее работать и мы будем понимать, что куда нам нужно и как вставить. Так давайте для начала. Блин вот эти вот дела у нас которые обозначали, что здесь будет фото вот фотографию. Я подготовил и фотография у нас вот она здесь будет такой какой-то трешовый грузовой аппарат вот смотрите значит баннер. То есть я сделал. Я тут даже немножечко размыл чтоб казалось более объемный чтобы грузовик был ближе к нам фон дальше и давайте мы сейчас сделаем такую вещь то есть смотрите я поставил его сюда у меня как бы текст сразу становится нечитабельный. Да поэтому я сделаю вот этот текст белым чтобы он хорошо светился читался кнопочка будет у нас голубой и для того чтобы мне сделать этот текст белым нужно его сделать белым для начала. Но сейчас виде он как бы немного сливается то есть читать не очень уютно. Ну вот — это ещё прочитаешь. А вот — это как бы и не хочется заморачиваться поэтому мы делаем как я и в прошлых уроках объяснял делаем темную палочку такую накладываем вот мы её накладываем сюда выравниваем вот и смотрите другое дело то есть текст сразу становится хорошо читабельный и атмосфера картинки меняется на более серьёзная такая немного мрачновато. Я даже. Но — это вот такая тяжёлая судьба какой-то тех строительный то есть она такая настроение ческая какая-то картинка я повторюсь, что это. Слайдер и здесь будут картинки меняться вот, но первая картинка будет встречать нас вот такая серьёзная как бы дальше у нас идёт кнопка здесь кнопка идёт вот такого голубого цвета так делаем. Я голубой цвет эту картинку мы обрежем потому, что она сильно у нас лезет вниз так обрезаем — это дело. Но я хочу где-то вот так вот обрезать. Это фон и — это сама картинка. Ну вот где-то так да и кто скажет, что вот — это расстояние больше у тебя. Чем Вот — это да как бы всё должно быть ровно. Ну ребят. Мы же не робот тем более я отделяю как бы этот баннер всё-таки немного большим расстоянием чем вот — это они достаточно хорошо отличаются между собой эти два расстоянием поэтому за ошибку — это ты никак не. Сочи если бы она была там вот такое да чуть больше — это было бы неопрятно, а так я хотел показать и — это понятно, что здесь расстояние специально больше чем здесь то есть не ровно также как и не знаю как вот здесь и вот здесь то есть зачем по сетке прямо делать всё вот так вот она всё будет сливаться как бы мы как бы тем, что делаем. Допустим какую-то неровность мы акцентируем на этом то есть мы видим, что баннер у нас — это баннер. А вот — это меню это. Это минимум, но если мы — это минимум должен вот здесь вот всякими какими-то текстами. Да вот так вот ровно по вот этой этой вот этой. Да у нас тут будет что-то тоже идти начинаться отсюда то — это получится большое большое меню в котором вверх идет белой полоской, а идёт уже фотографии то есть мы будем теряться как бы и поэтому я отделяю вот этими вот какими-то неровностями на эти неровности осознанное. То есть я делал так специально так. Ну давайте сразу поставим и вот этой кнопочки такой же цвет как вот этой дальше. Давайте поставим этому баннеру чтобы он отстал слайдером. У меня есть заранее подготовленные элементы навигации но. Я подготовил чтобы какие-то мелкие нюансы не вырисовывать вы все знаете как — это всё вырисовывается вот мы выравниваем. Ну как бы вот так вот то есть смысл вы поймёте, а вот — это вырисовывать вот эти вот полукруге как бы ну какой какой в этом смысл я этого не вижу то есть у нас есть цели более поважнее так вот есть такое дело я поставил эти две стрелки смотрите. Почему я поставил их в какой-то. Чёрный плащ очки. Да можно было бы делать без палочки. То есть можно было вот так вот. Но если у вас будет здесь белая фотография. Да какая-то ну белый фон потому, что — это слайдер у нас-то. Стрелка иногда. Может просто пропадать либо теряться на этом фоне то есть будет не особо читабельная поэтому для того чтобы она всегда было читабельно, что вот у нас элементы. Да есть такие я сделал её вот в таких палочках я не всегда так делаю, но здесь я решил так сделать. То есть по мере того как я делаю этот сайт я вполне объясни всё для чего я, что сделал то есть не просто так а. Конкретно для каких-то целей просто так лучше ничего не делать на сайте если вы ну как бы ну для красоты до высоты можно кому-то. Показалось так красивее чем без вот этой пляшечки он сделал хорошо. Главное чтобы она не мешала вообще хорошо бы уметь объяснять. Зачем всё было сделано чтоб не только для красоты. ОК и. Давайте поставим теперь наши точки навигации вот здесь вот так вот мы привыкли видеть на сайтах. Давайте ей кто-то же подготовил чтоб не высовывать здесь не и выравниваем ставим посерединке вот есть у нас такое дело вот мы их поставили в принципе баннер у нас практически готов осталось вот сюда вписать как быть с. Да смотрите я буду списывать текст я буду брать один из этих.

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

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