Создание сайта с нуля. Урок 3 - Заканчиваем скетч

Продолжаем уроки по созданию сайта с нуля под ключ на заказ для компании ОВК-СТРОЙ - от создания прототипа до готового результата. Урок #3. Сегодня нарисуем прототип секций: Предоставляемое оборудование, Скидки, Менеджеры, Партнеры, Отзывы и Контакты.

Для сохранения всей страницы скетча в jpg/png формате рекомендую использовать расширение "GoFullPage" для браузера Chrome или подобные для вашего браузера.

Таймкоды:
00:00 Начало урока
00:49 Прототип секции "Оборудование"
06:40 Прототип секции "Скидки"
09:45 Прототип секции "С кем можно связаться"
16:33 Прототип секции "Партнеры компании"
19:13 Прототип секции "Отзывы"
24:46 Прототип секции "Контакты"
31:32 Прототип подвала сайта (footer)
34:20 Результат прототипирования сайта
35:07 Сохранить прототип как изображение

[wdm]

Внимание! Для сохранения всей страницы скетча в jpg/png формате рекомендую использовать расширение "GoFullPage" для браузера Chrome или подобные для вашего браузера.

[vitatsvetkova]

Сделал прототип и теперь я капец, как горжусь собой

[rushinov]

Памятник тебе поставить надо! Отличные уроки!

[vzgljadsvostoka]

отличные уроки, я новичок и все начинаю с 0, хорошо что есть нормальные бесплатные!!!уроки ...

[sashaivanova]

Спасибо за уроки) очень подробно и понятно, большое спасибо! Жду продолжения:)

[polinamalina]

получилось великолепно. Спасибо за урок.

[nickelshendsberg]

LG? Партнёр "ОВК-Строй"?! В горло ору, а урок замечательный, спасибо :D!

[plate_runner]

Титанический труд, огромное спасибо за уроки! Скину денюжку на канал с первого заработка, только поставьте здесь "Спонсировать"). Такой уставший голос, надеюсь, не из-за рутины...

[xzwmdum]

Сер спасибо я блогодоря вам создал свой сайт для продажы одежд

[plate_runner]

Все страницу не получилось заскринить в фаерфоксе, помогло приложение для хром - Full Page Screen Capture

[sergeniy]

За скриншот всей страницы через инспектор рекспект.

[timdjol]

добрый вечер! проблема с скриншотом. Пишет что не поддерживается для текущей цели инструмента инспектор. (DOM Inspector)

[lypgxcq]

Здравствуйте! Не подскажите, почему у меня не получается сделать скрин всей страницы в wireframe, делаю его через инспектор Firefox, но получается скрин только той части страницы, которая видна на экране?

[SpLeen]

А вообще хорош скетч получился для лэндоса. 5+

[Dimcik]

Я не знаю, если кому то поможет - у меня получилось данным методом.
Запускаем сайт в Firefox -> Разработчик -> Инспектор хранилища -> Настройка инструментов -> ставим галку "Сделать снимок всей страницы".
Заходим в "Режим адаптивного дизайна", после заходим в "Инспектор" и редактируем код страницы div class="supercanvas ui-boxer" - заменяем значения атрибута style="width: Ваше значение шириныpx; height: Ваше значение высотыpx;"
У меня получилось div class="supercanvas ui-boxer" style="width: 1024px; height: 6500px;"
После этого наверху странички адаптивного дизайна вводим ваши параметры страницы (1024х6500 в моем случае).
Нажимаем сделать снимок всей страницы и все готово.
Буду рад если кому то помог.

[tdeygjf]

Продолжение будет? Хотелось бы посмотреть процесс верстки и посадки на MODX

[dvolgin]

А что у вас за браузер? Если мозила, что вы с ней сделали?

[sonikborisenko]

Подскажите, пожалуйста, почему при создании скриншота wireframe не позволяет корректно отобразить изображение прототипа? Скролл работает при просмотре, но при скрине всей веб странице он будто отсутствует?

[yuriykryshchuk]

Как вы перетаскиваете картинки прокруткой?

[Levelord]

Прототип нужно показывать заказчику для его замечаний, или он сугубо для себя?