Хакаем бумажное проектирование интерфейсов.

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

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

    И тут я подумал: а разве нельзя «автоматизировать» рутинный процесс? Сработал немного програмистский подход, и я набросив на бумаге очередное чистое окно браузера, слегка раскрасил его и растиражировал на цветном ксероксе.

    Вышло что-то на подобе:
    ff-hand.jpg - upload images with Picamatic

    Таким образом у меня получилось полтора десятка готовых бланков для быстрых набросок веб-сайтов. Я доволен.

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

    А так же можно не рисовать шаблоны от руки, а например распечатать скриншоты браузера, или готовые макеты приложений.

    Что-то последним временем меня посещают в основном бредовые идеи. Но мне нравится). Посмотрим, что выйдет из этого топика =)

    Поделиться публикацией

    Комментарии 82

      +11
      как-то случилось: мне в голову пришла «гениальная» идея и срочно требовалось набросать это дело на бумажке, под рукой оказался листок с «линейками», ну помните листки А4 с расчерченными строчками, их подкладывали под чистый лист чтобы написать реферат, курсовик и прочее?
      уже и не помню как он оказался под рукой (может кто-то забыл, я тогда делал диплом и бывало собиралась компания для «решения сложной задачи», ну и все приходили со своим арсеналом методичек и бумаг с «мыслями»), так вот я его перевернул чистой стороной и начал набрасывать макет, каково было мое удивление когда до меня дошло, что это офигенно удобно: выравнивать несколько элементов получалось играючи, расстояния между блоками по вертикали (благодаря строчкам) идеальное. В итоге получался не просто кривой набросок, а в полне рабочая модель.
      В общем всем совету.
      В Вашем случае наверное можно сделать «браузер» с одной стороны и «линейки» с другой :)
        +2
        Че же вы раньше не сказали, я бы на бумае в клеточку наксерил!:))
        Хорошая идея, возьму на вооружение.
          +2
          да только не стоит перебарщивать, а то они будут только мешать.
          можно сделать горизонтальных линеек сколько угодно по вкусу (они почти не мешают), а вертикальных 3-4… хотя пофигу сколько, лишь бы удобно было :)
        +2
        Мне тоже кажется, что нарисовать макет чего-либо лучше сначала на бумаге. Быстрее получается, не нужно к компьютеру прикасаться. Когда мысли готовы — все дело можно без пыли и шума перенести в электронный вид. Улучшается КПД? :)
          +3
          Тоже все на бумаге рисую, но не понимаю, зачем рисовать браузер? %)
          Я в подобные тонкости начинаю вдаваться только тогда, когда реально облом что-то по делу набрасывать :) Хотя, если у вас так же, вам придется все рисовать теперь только по делу и работа станет продуктивнее ))
            +4
            Ну да, степень детализации браузера обычно зависит от уровня тупняка относительно работы:)
            +38
            Не знаю зачем браузер, ну хорошо. Браузер пусть будет, но зачем распечатывать коряво, то что можно сделать ровно?

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

              –2
              Ну в посте я предполагал, что можна и скриншот разпечатать.
              Но причем здесь пиксели, если все дальнейшее рисование будет идти от руки, и не менее коряво чем браузер на картинке?
                +15
                Ну а че уж тогда, надо на мятой бумаге сразу рисовать, все равно потом эту бумажку сомнете и в урну выкинете.
                  +4
                  А пиксели при том, чтобы знать размер элементов сайта относительно элементов браузера при разрешении 1024. Ну хотябы примерно.
                    0
                    Да не, мой темплейт идет для более ранних этапов, когда важна концепция и приблизительное наличие/размещение елементов. А ширину в пикселях я лучше уже померяю, набросив то же в граф-редакторе, после утверждения на бумаге.
                      +1
                      Ну зачем, зачем тогда рисовать окно браузера? Я не понимаю.
                      Уж если все идет на таком уровне абстракции, что важна только концепция, то я совсем не вижу причин рисовать окно браузера.
                        0
                        Очень правильная идея! Я думаю это просто дело вкуса :) Каждому своё.
                        0
                        Ну зачем, зачем тогда рисовать окно браузера? Я не понимаю.
                        Уж если все идет на таком уровне абстракции, что важна только концепция, то я совсем не вижу причин рисовать окно браузера.
                          0
                          Хм. Два раза коммент отправляется, когда сначала нажать на «предпросмотр», а потом на отправить. Странный баг.
                          Извините за двойной коммент =)
                    +4
                    Если рисовать сайт на скриншоте браузера то получается не красиво. Т.к. корявый от руки набросанный браузер смотрица лучше с таким же корявым сайтом ))
                      0
                      А можно где-нить позаимствовать такой вариантик?=)
                      +1
                      Кстати об окошках браузера. Я где-то сталкивался с шаблоном для фотошопа или иллюстратора с окном сафари, где отдельным слоем можно поместить рабочую область сайта, тем самым просто и быстро организовав скриншот в симпатичной рамке под макось. Может у кого-то есть под рукой?
                        0
                        Надо только разные браузеры распечатывать, ато нарисуешь под Сафари а в ИЕ все разъедется.
                        +3
                        будете смеяться, но в конторе в которой я работаю дают черновики и бумагу для записи с изображением IE6 ))) специально для этих целей ))) возможно глупость, возможно прихоть начальства, но те кто это видит впервые даже на память берут себе. Лично мне помогало не раз сия бумажка.
                          +1
                          Хе, идеи витают в воздухе:)
                          +13
                          Тогда уж надо было и монитор целиком нарисовать, что ж вы схалтурили?..
                            +6
                            Ну чего уж тогда, заодно нужно комнату, в которой монитор стоит, а так же дом в котором эта комната, и далее по возрастающей:)

                            Я знаю, что рисование браузера, это лишь моя психологическая заморочка, но мне так удобнее, помогает сосредоточиться, чтоли.
                              +3
                              в таком случае не только ваша психологическая заморочка, так заморочено еще человек эдак 50 только тех кого я знаю.
                            +2
                            В целом интересная идея, надо бы попробовать. :) Только вы, автор, знайте, что писать правильно Элементы, а не Елементы, а то глаза режет.
                              +2
                              Спасибо, увлекся, и немножко спутал синтаксис русского языка с родным:)
                              0
                              купите себе планшет и не мучайтесь…
                                0
                                Зачем менеджеру-верстальщику планшет? о_О :)
                                  +1
                                  чтобы макеты рисовать. да и вообще, перо удобнее мышки. уже больше года моя мыша пылится в углу стола
                                    0
                                    что-ж ей пылится, выкинь ее тогда.
                                    0
                                    планшет нужен дизайнеру, а «менеджеру-верстальщику» придумывать и продумывать интерфейсы противопоказано медициной :)
                                      0
                                      Знаю, знаю:)
                                      Ну, на самом деле у меня довольно широкая специализация и очень маленькая контора. Дизайном вобщем тоже немножко занимался, но сильно хочу спрыгнуть с этого по работе, и переложить все соответствующие задачи на дизайнера. А работы много, и он просто не успевает.
                                  0
                                  А можно сделать линейки в виде верхних частей окон разных браузеров (запамятовал название) и просто прикладывать к листу, а под ней рисовать эскиз. Боковые стороны окна можно провести самому по этой же линейке. Это так, для экономии бумаги и спасения лесов нашей планеты :)
                                    0
                                    Я в основном рисую на уже испорченых с обратной стороны листах.
                                    Благо, после волокиты с договорами и другими документами их целая куча.
                                    0
                                    Сиюминутные идеи рисую на бумаге. А так в основном сразу открываю фотошоп.
                                      +3
                                      Хочу такую темку для FF :)
                                        0
                                        была помню похожая для Opera. Но стоит поискать и для FF.
                                          0
                                          есть такая темка для FF 3: «MacOS X Theme „ называется
                                            +3
                                            Что-то из названия как-то совсем не приходят в голову мысли, что выглядеть будет именно так:

                                            :)
                                          0
                                          Идея хорошая, в плане оптимизации рутинного процесса.
                                          Правда рисование самого окошка браузера тоже дело полезное — помогает настроиться на нужный лад, особенно когда идей минимум, с чего-то начинать нужно.
                                            0
                                            Ну да, я для себя рисование заново тоже не отменил.
                                            Но когда берешь третий-четвертый лист подряд, то уже не так интересно.
                                            0
                                            Миллиметровка вам в помощь.
                                              –2
                                              отличный способ превратить веб в набор одинаковых шаблонных сайтов посторенных по одинаковому изобразительному принципу.
                                                +1
                                                обычный листик в клеточку, этого всегда достаточно.

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

                                                одно удовольствие на таком работать.
                                                  0
                                                  пользуйте Axure RP. проектировать веб интерфейсы станет значительно проще и быстрее.
                                                    0
                                                    мне никогда не помогали программы именн в разработке идеи, а в большинстве даже мешали.
                                                    проше нарисовать идею на листики и воплотить потом уже на ПК.
                                                      +1
                                                      спорить не буду, Вам виднее.
                                                      но я раньше тоже на бумажке рисовал, да и сейчас, конечно, бывает. Но Axure RP стал незаменимым (пока что) помощником. Уж очень удобно рисовать кучу страниц сайта, драгая стандартные контролы на страницу и оборачивая повторяющиеся элементы (например «шапку») в мастер пэйджи, которые в случае чего меняются сразу на всех страницах.
                                                    0
                                                    Планшет, в полне может заменить карандаш для таких целей
                                                      0
                                                      уже несколько лет имею под рукой файлик excel с пустым листом разлинованным под квадратик.
                                                      регулярно распечатываю очередную партию — и на черновики, и при необходимости вложить в скоросшиватель/папку.
                                                        0
                                                        есть время — скинь этот файлик а то мне лень по ширине все под квадрат стандартизировать
                                                          0
                                                          здесь.
                                                          Предупреждаю: клетки не строго квадратные.
                                                          Впрочем здесь это не критично.
                                                            0
                                                            да и так норм. сэнкс.
                                                        –13
                                                        Вот и че? Я не вкурил, объянсите…
                                                          –5
                                                          *объясните, пардон. Таки нельзя быть на хабре в состоянии алкогольного и наркотического опьянения.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                            0
                                                            Онлайн не онлайн, но очень люблю дополнение к FireFox под названием Pencil.
                                                              +4
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                  0
                                                                  Спасибо за наводку
                                                                    0
                                                                    Некислое приложение. Спасибо. В закладки.
                                                                  –4
                                                                  Beofan, онлайн не онлайн, но очень люблю дополнение к FireFox под названием Pencil.
                                                                    –4
                                                                    Простите, попутал с ответом.
                                                                    +2
                                                                    Автор у Вас очень нетвердая рука. Непохоже на дизайнера/художника.
                                                                      –4
                                                                      Да. Художником никогда не был, и на бумаге рисовать вообще не умею. А чтобы быть таким-себе дизайнером, уметь рисовать не всегда необходимо. А поначалу приходилось.
                                                                      Теперь надеюсь сложить полностью с себя эти полномочия, и заняться соответствующими для себя вещами.

                                                                      Да и рисовался тот браузер на протяжении 10 секунд, при желании мог нарисовать и акуратнее. Но зачем?
                                                                      0
                                                                      лол. может ещё создадим опрос, кто компьютер на ночь выключает, а кто нет?
                                                                        +1
                                                                        Открываем для себя paper prototyping? ;-)
                                                                          +2
                                                                          Зачем столько тратиться на ксерокс?
                                                                          Можно взять лист плотной бумаги и нарисовай свой любимый браузер, а потом вырезать ножницами ту область в которой происходит отображение страницы, а снизу подкладывать чистые листы. Тут тебе и скролл даже есть =))
                                                                            –4
                                                                            Хе, тоже думал о таком.
                                                                            Еще стандартных контролов понавырезать:) И апликации делать.

                                                                            А ксерокс у меня свой. (Точнее банальная МФУшка), так что затраты тут не числятся.
                                                                            +1
                                                                            Теперь, понятно почему из меня херовый веб-дизайнер. Потому что я начинаю с совсем чистого листа.
                                                                              –4
                                                                              И чё, теперь когда режиссёру надо рисовать сториборд, он должен сначала отксерить рисунок с экраном кинотеатра и с бошками зрителей? Помоему, броузер можно абстрагировать. не знаю.
                                                                              Но если Вам так легше — бог в помощь.
                                                                                –4
                                                                                а как же кроссбраузерность? :)))
                                                                                  0
                                                                                  В процессе рисования надо подготовить несколько листов с уже перекошенными блоками(пометить листы как Opera, FF2, FF3, IE6, IE7 etc), и, перебирая их, материться и плеваться кофе. Тогда к компьютеру можно вообще не подходить — по-о-олное погружение =)
                                                                                  –4
                                                                                  MS Visio по моему самое удобное… Особено приятноЮ что можно объекты объединить в блоки и тиражировать на все уровни сайта, а еще гуд, что можно выгрузить в гиф, сделать гифмап и показать заказчику «интерактивную» модель сайта.
                                                                                    –4
                                                                                    да, я тож об этом думал.
                                                                                    пол года назад считал что решу проблем с быстрозаканчивающейся бумагой покупкой планшета, недорогого бамбу.
                                                                                    но кншн ошибся. вот еслиб ноут с сенсорным экраном — эт хоть както заменило бы карандаш с листом бумаги.
                                                                                    сам с интерфейсами не рааботаю а делаю зачастую дизайны сайтов. обычно беру идеально чистый лист но опыт unhappy мне мил, дейсвительно сетка не помешет, опробую.
                                                                                      –4
                                                                                      Уже очень давно есть готовый шаблон для Visio:
                                                                                      www.guuui.com/issues/02_07.php
                                                                                        +1
                                                                                        А у меня есть тетрадь в клеточку и линеечку.
                                                                                          0
                                                                                          хммм… а нельзя что ли тупо достать тетрадку в клетку, а не извращаться с распечатыванием и т.д.? больше времени на «проектирование» идеи, чем на сборку материалов (распечатка Ваша).
                                                                                            0
                                                                                            Предлагаю рисовать прям на мониторе, после чего фотографировать монитор и утверждать эскизы у заказчика :)
                                                                                              0
                                                                                              В век распространения ноутов можно использовать и более продвинутые чем бумага профсредства — axure.com/
                                                                                              Приехал к клиенту и на его глазах накидал интерфейс близкий к конечному (за искл стилей и картинок). Конечно, стоит денег и для фрилансеров его не порекомендуешь, но для девелоперских контор довольное неплохое решение.
                                                                                                0
                                                                                                у 960.gs в комплекте идет то что Вам нужно :)

                                                                                                  +1
                                                                                                  А не проще взять обычный бумажный блокнот, на первом листе нарисовать верх браузера, и отрезать лишок?
                                                                                                  После этого рисуем на листе. Не понравилось — оторвали его и рисуем на следующем.
                                                                                                  Понравилось — оторвали его, и отложили в папочку готовых набросков.

                                                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                                  Самое читаемое