При создании технического задания клиенты часто отправляют много ссылок на сайты для понимании бизнес задач. Например: хочу регистрация и авторизацию как у twitter, список с новостными блоками как в Яндекс Дзен и т.д. Очень сложно такие части проекта задокументировать, хочется их оформить визуально с помощью вайрфреймов.
![](https://habrastorage.org/r/w1560/webt/fj/jd/9m/fjjd9moxkhq0ozsp0o76u9tm7wc.png)
Вайрфрейм — это недетализированное представление дизайна. Главные задачи вайрфрейма: отобразить основные группы содержимого, отобразить структуру и отобразить примерную визуализацию. В документации нужно четко увидеть необходимые элементы. Есть много готовых инструментов для создании вайрфреймов, но часто они в бесплатной версии имеют ограниченный функционал или нехватку нужных компонентов, платные покупать не хочется, т.к. приходится создавать вайрфреймы 1 или 2 раза в месяц.
Эта проблема решается очень просто. С помощью 2 инструментов: расширение для Chrome Grayscale Black & White для оформления страниц в черно-белый режим (при проектировании вайрфреймов экраны будут из разных сайтов, лучше все привести к одному нейтральному стилю) и сервиса Mockdown для перевода картинок в вайрфрейм.
![](https://habrastorage.org/webt/vl/zm/kh/vlzmkhpnu6locb8huyveegc4too.gif)
Пример: нужно в техническом задании добавить вайрфрейм страницы регистрации, которая сильно похожа на страницу регистрации Atlassian. Переводим страницу в черно-белый режим и делаем скриншот нужной части экрана.
![](https://habrastorage.org/webt/na/bp/oy/nabpoygzrhzrcwx5oxutvbiudcm.gif)
Картинку добавляем в сервис Mockdown и через несколько секунд уже получаем готовый вайрфрейм. Не идеально, но вайрфрейм и не должен быть идеальным, он должен помочь увидеть на картинке основные группы элементов страницы.
![](https://habrastorage.org/r/w1560/webt/q3/vu/ru/q3vuruu0upvcic4jakwlv9vtphk.png)
![](https://habrastorage.org/webt/fj/jd/9m/fjjd9moxkhq0ozsp0o76u9tm7wc.png)
Вайрфрейм — это недетализированное представление дизайна. Главные задачи вайрфрейма: отобразить основные группы содержимого, отобразить структуру и отобразить примерную визуализацию. В документации нужно четко увидеть необходимые элементы. Есть много готовых инструментов для создании вайрфреймов, но часто они в бесплатной версии имеют ограниченный функционал или нехватку нужных компонентов, платные покупать не хочется, т.к. приходится создавать вайрфреймы 1 или 2 раза в месяц.
Эта проблема решается очень просто. С помощью 2 инструментов: расширение для Chrome Grayscale Black & White для оформления страниц в черно-белый режим (при проектировании вайрфреймов экраны будут из разных сайтов, лучше все привести к одному нейтральному стилю) и сервиса Mockdown для перевода картинок в вайрфрейм.
![](https://habrastorage.org/webt/vl/zm/kh/vlzmkhpnu6locb8huyveegc4too.gif)
Пример: нужно в техническом задании добавить вайрфрейм страницы регистрации, которая сильно похожа на страницу регистрации Atlassian. Переводим страницу в черно-белый режим и делаем скриншот нужной части экрана.
![](https://habrastorage.org/webt/na/bp/oy/nabpoygzrhzrcwx5oxutvbiudcm.gif)
Картинку добавляем в сервис Mockdown и через несколько секунд уже получаем готовый вайрфрейм. Не идеально, но вайрфрейм и не должен быть идеальным, он должен помочь увидеть на картинке основные группы элементов страницы.
![](https://habrastorage.org/webt/q3/vu/ru/q3vuruu0upvcic4jakwlv9vtphk.png)