Начинаем разработку web-сайта!
[maxbutton id="2" url="https://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="https://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="https://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="https://img.my7life.ru/upload_image/screen/h_1521756102_5788273_95751734a7.jpg" text="Наш Дизайн готов!" ]
