Как придать сайту вид мокапа?

Изменить, чтобы уточнить Спасибо за существующие ответы. Боюсь, вы неправильно поняли мой вопрос. Я не хочу создавать мокапы (у меня есть, но они не подходят для моей текущей цели). Мне нужен инструмент (возможно, что-то столь же простое, как свободно доступная тема CSS), который сделает мой существующий, работающий наполовину законченный сайт ASP MVC похожим на макет.


Начальник моего начальника решил, что я должен показать текущую стадию своей работы своим заинтересованным сторонам, чтобы они могли почувствовать веб-приложение, которое я для них разрабатываю. Это разработка с нуля, поэтому у пользователей не возникает ожиданий, связанных с предыдущей версией. Он хочет, чтобы это было хотя бы немного кликабельно, поэтому я не могу пойти и опубликовать макеты, над которыми я работаю. Это должна быть работающая версия текущей стадии разработки.

Я хочу, чтобы занятый, критически настроенный менеджер среднего звена понял, что то, что он видит, — это не то, что он собирается получить, а ранний набросок этого. Это очень деликатный вопрос, потому что мое заявление увеличивает бумажную нагрузку менеджера. Поэтому они уже враждебно относятся к проекту и склонны рассматривать прототип в худшем свете, делая выводы об ожидаемом качестве приложения из качества дизайна и жалуясь на отсутствие жизненно важных функций, реализация которых еще не началась.

Для этого я хотел бы придать своей странице нарисованный от руки вид, как обычные мокапы. Он должен издалека кричать: «Я — набросок», чтобы никто никогда не принял его за настоящую вещь.

Какие есть хорошие способы создать такой образ? Есть ли способ более эффективный, чем создание моего собственного мокапа CSS вручную? У меня сильно ограничено время, которое я могу потратить на такую ​​задачу, и я также неопытен в дизайне. Идеальный вид мне не нужен, да и страницы не сложные, поэтому чем проще решение, тем лучше.

Некоторые продукты дают вам возможность создавать интерактивные прототипы, которые имеют «схематический» или «нарисованный от руки» вид — это то, что вы ищете. Axure, например, имеет некоторые собственные функции и некоторые сторонние библиотеки, которые дадут вам результаты, которые вы ищете: 90percentofeverything.com/2009/11/05/…
Еще один инструмент для создания мокапов — Balsamiq . Это простая система перетаскивания с кучей готовых элементов для заполнения макета страницы.
Вот еще один сервис, который может вам подойти: invisionapp.com . Весь их сайт ориентирован на то, чтобы делиться прототипами, но если я помню, что некоторое время назад я впервые наткнулся на него, у них есть возможность перетаскивать области вашего макета и добавлять интерактивность очень быстро и легко. По сути, вы можете иметь кучу скриншотов вашего сайта и связать их вместе, чтобы имитировать взаимодействие между страницами и т. д.
На самом деле, вы можете создать настоящий мокап, разбить его на плитки и использовать части в качестве изображений в своем веб-дизайне. Кстати, новое свойство CSS border-imageможет позволить гибкие элементы с рамками в виде набросков.

Ответы (3)

Первое, что приходит на ум, это использовать для создания макета такой инструмент, как Balsamiq . Это придает ему очень «незавершенный» вид:

Элементы макета Balsamiq

К сожалению, я не верю, что вы можете экспортировать рабочий HTML/CSS из Balsamiq, поэтому вместо этого я бы использовал их стиль в качестве вдохновения для создания вашего «макета CSS».

Вероятно, это потому, что я каждый день имею дело с Photoshop, но шахматная сетка всегда ассоциируется у меня с чем-то незавершенным.

Шахматная сетка

Если бы не это, то, возможно, какая-то сетка, используемая для фона, помогла бы передать незаконченный вид.

Примером чего-то подобного, который я видел в прошлом, является старый стиль для бета-сайтов Stack Exchange:

Бета-сайты SE в старом стиле

Он очень бледный, но вы можете видеть, что они использовали сетку в качестве фона среди других элементов стиля, чтобы придать ему очень незавершенный вид.

Подобно Balsamiq, это Wireframe Sketcher. Это позволяет кликабельность.

Еще одна похожая программа, но с открытым исходным кодом и бесплатная — Pencil .