Начинаем разработку web-сайта!

 

[maxbutton id="2" url="http://img.my7life.ru/upload_image/screen/h_1521339063_7445018_e102b40753.jpg" text="Прототип" ]

[maxbutton id="1" url="#header" text="Рисуем header" ]

[maxbutton id="3" url="#top-line-header" text="top-line-header" ]

[maxbutton id="3" url="#bottom-line" text="bottom-line - Бегущие цифры" ]

[maxbutton id="1" url="#section-1" text="Рисуем Section-1" ]

[maxbutton id="1" url="#section-2" text="Рисуем Section-2" ]

[maxbutton id="1" url="#section-3" text="Рисуем Section-3" ]

[maxbutton id="1" url="#section-4" text="Рисуем Section-4" ]

[maxbutton id="1" url="#section-5" text="Рисуем Section-5" ]

[maxbutton id="1" url="#section-6" text="Рисуем Section-6" ]

[maxbutton id="1" url="#section-7" text="Рисуем Section-7" ]

[maxbutton id="1" url="#section-8" text="Рисуем Section-8" ]

[maxbutton id="1" url="#section-9-contacts" text="Рисуем Section-9 Контакты" ]

[maxbutton id="1" url="#section-10-footer" text="Рисуем Section-10  Footer" ]

[maxbutton id="2" url="http://img.my7life.ru/upload_image/screen/h_1521756102_5788273_95751734a7.jpg" text="Наш Дизайн готов!" ]

 

 


 

 

Для начала смотрим ТЗ от заказчика:

 

 

Изучим - продумаем структуру будущего сайта:

 

 

И информационный файл:

 

 

  Начинаем разработку сайта - с Прототипа!  

 

 

1 - Шапка

 

Из которой сразу будет понятно - чем занимается компания.

 

 

Не много о важном шрифте:

 

 

И просто красивый шрифт:

 

 

Далее набросаем примерно такой Прототип будущего сайта:

 

 

 

Установим программку для взятия цвета:

 

Ссылка где качал дистрибутив программы:

 

 

 

 

 

 

   НАЧИНАЕМ РИСОВАТЬ ДИЗАЙН 

 

 

Держим перед глазами наш прототип:

 

Определяемся с ОСНОВНЫМ ФОНОМ САЙТА:

 

 

Берем пустой PSD - шаблон файл с Bootstrup разметкой:

 

 

Подбор цветовых схем:

 

 

 

И далее используем цветовую схему в нашем дизайне:

 

 

 

 

 

Далее:

 

Рисуем     Top Line:  

 

 

 

   ГАБАРИТЫ САЙТА:  

 

 

 

  Далее рисуем Телефон: 

 

 

 

Далее рисуем шапку:

 

 

Далее

 

 

 

 

   Рисуем меню:  

 

 

 

 

Далее

 

Рисуем     BOTTOM LINE  

 

 

    Смотрим ЧТО ПОЛУЧАЕТСЯ:  

 

 

Далее

 

Рисуем      Section-1  

 

 

 

   Рисуем Фон-Rectangle + делаем разметку + Фото  

 

 

 

 

Смотрим что мы нарисовали:

 

 

 

 

Размечаем и Рисуем:

 

 

 

   Смотрим все что нарисовали:  

 

 

Уменьшим не много кнопки:

 

 

 

Создадим папку для Секции 3

 

 

 

 

 

 

 

И расставляем все остальные фото в галерею:

 

 

[maxbutton id="2" url="http://img.my7life.ru/upload_image/screen/h_1521505234_4730658_fd466834b8.jpg" text="Смотрим промежуточный результат" ]

 

Далее

 

  Рисуем   'Section-4' 

 

 

ПОСТАВЛЯЕМОЕ ОБОРУДОВАНИЕ

 

Создаем Папку:

 

 

И откроем наш мастер файл с детальками)

 

 

 

 

 

 

 

 

 

Можно вектризовать растровые Лого:

 

 

 

 

Далее

 

    Рисуем Section-5   

 

 

  Создадим папку для Section-5 и Папку для разметки 

 

 

Сделали разметку и нарисовали секцию:

 

 

Чистый вид:

 

 

Далее

 

   будем рисовать    Section-6  

 

 

Создадим папку + Разметку   Section 6 

 

 

 

Стиль Items - уже можем копировать из предыдущей секции:

 

(Что бы наши стили Item-ов - были одинаковыми)

 

 

 

Нарисовали один    Item - Сотрудника    и разметили:

 

 

 

Далее

 

   Рисуем   Section-7   

 

 

   Создадим папку   Section-7  

 

 

 

 

 

 

 

 

Финальный чистый вид:

 

 

Далее,

 

   Рисуем Section-8  

 

 

Создадим папку:

 

 

 

 

 

Чистый дизайн секции:

 

 

Еще отрисуем поведение Item при наведении курсора:

 

 

 

Далее

 

   Рисуем секцию КОНТАКТЫ (Section-Contacts)

 

 

Создадим папку:

 

 

Делаем разметку и расставляем элементы:

 

 

Чистая верстка КОНТАКТОВ:

 

 

Далее,

 

   рисуем ФУТЕР Section-10  

 

 

Создадим папку для Футера:

 

 

 

Далее копируем наш Top Line - их ШАПКИ:

 

 

Чистый дизайн Футера:

 

 

 

 

[maxbutton id="2" url="http://img.my7life.ru/upload_image/screen/h_1521756102_5788273_95751734a7.jpg" text="Наш Дизайн готов!" ]