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

 

Прототип Рисуем header top-line-header bottom-line - Бегущие цифры Рисуем Section-1 Рисуем Section-2 Рисуем Section-3 Рисуем Section-4 Рисуем Section-5 Рисуем Section-6 Рисуем Section-7 Рисуем Section-8 Рисуем Section-9 Контакты Наш Дизайн готов!

 

 


 

 

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

 

 

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

 

 

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

 

 

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

 

 

1 - Шапка

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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

 

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

 

 

 

 

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

 

 

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

 

 

 

 

 

Далее:

 

Рисуем     Top Line:  

 

 

 

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

 

 

 

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

 

 

 

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

 

 

Далее

 

 

 

 

   Рисуем меню:  

 

 

 

 

Далее

 

Рисуем     BOTTOM LINE  

 

 

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

 

 

Далее

 

Рисуем      Section-1  

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

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

 

 

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

 

 

 

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

 

 

 

 

 

 

 

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

 

 

Смотрим промежуточный результат

 

Далее

 

  Рисуем   '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 - их ШАПКИ:

 

 

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

 

 

 

 

Наш Дизайн готов!