Как стать автором
Обновить

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

Где-то проскакивало изображение целого блокнота, где каждый лист, как чистое окно браузера, скреплены листы пружиной, легко типа отрывать.
Да, именно это я и имел ввиду, когда писал, что видел подобные готовые решения. Не помню только, продавался этот блокнот или был концептом.
НЛО прилетело и опубликовало эту надпись здесь
Вы верно шутите — основная часть заказов идёт от мелких и средних фирм и это именно сайты-визитки на 2-3 страницы.
какой бы большой проект не был, проектирование интерфейса на бумаге — один из лучших методов.
Вариантов схематической компоновки интерфейса всё равно ограниченное число, вне зависимости от количества страниц. Страницы, с абсолютно уникальным интерфейсом на каждой, как раз скорее попадутся на небольшом сайте, нежели в рамках объёмного проекта.
НЛО прилетело и опубликовало эту надпись здесь
Вы путаете дизайн и компановку (грубо — «меню слева, корзина справа и т.д.»). Сейчас вся речь только о компановке, никаких «пимпочек и бликов» тут в принципе нет.
НЛО прилетело и опубликовало эту надпись здесь
Исключительно про первую встречу (самое начало процесса) и речь.
То же заметил, что для набросков, компьютер является лишним передаточным звеном. А если нужо несколько слоев, что бы, что-то подвигать, то можно рисовать на кальке.
Напечатать более менее стандартных веб-контролов, заламинировать или обклеить сверху скотчем и тогда в процессе обсуждения их можно раскидывать поверх окна браузера, можно двигать или заменять ничего не стирая и не перерисовывая. Но вариант с карандашом проще.
А может в графическом редакторе будет удобнее «… двигать или заменять ничего не стирая и не перерисовывая...»? :)
Тогда уж лучше взять: habrahabr.ru/blogs/ui_design_and_usability/36670/
Тут фишка в том, что прямо на месте, вместе с заказчиком набросать прототип дизайна, не будешь же ты предлагать ему на своем ноуте слои двигать в фотошопе, чтоб показать что и где должно лежать.
1. Можно приехать и со своей талбеткой.
2. Если лениво брать (или просто нет), можно использовать чистый лист А4

Я просто не понимаю зачем нужна эта рамка, если можно использовать естественные границы листа. Произвести впечатление на заказчика, если только, но произведёте ли…

Я всё это к тому, что незачем усложнять элементарные вещи.

*За штуку по ссылке, спасибо, довольно интересно.
У многих пользователей среднего и выше возраста есть психологическая проблема с восприятием таких эскизов.
Они не могут соотнести рисунок на листе бумаги со страницей в браузере.
Если же использовать такой блокнот, то у них появляется привязка к знакомому интерфейсу.
Это серьезно облегчает процесс понимания со стороны заказчика.
Более того, мы даже варианты дизайна заказчику отправляем «вставленными» в окно браузера. Иначе потом тупых вопросов не оберешся.
«Таблетка», графический планшет, просто ноутбук с заранее заготовленными элементами в слоях — можно, удобно, но не всегда и не всем. Отвлекают от сути. Хотя кому как удобнее, конечно.

(кстати, а много ли одинаковых базовых элементов, которые используются всегда в неизменном виде и могут быть заранее заготовлены? Не так уж и много. Все угадать сложно. Кнопки не считаются).
Упс, ссылочка обрезалась…
habrahabr.ru/blogs/ui_design_and_usability/36670/
За границей я видел похожие магнитные наборы — стандартные элементы интерфеса. У нас не встречал. Да и не уверен, что они подойдут — немножко другая штука. Самостоятельно такие сделать можно, но сложнее.
Это одна из причин, почему мне отчаянно не хватает Tablet PC :-)
Пришла в голову другая идея, которая основывается на двух уже изложенных: про кальку и стандартные контролы:
Что если распечатать на листе пустое окно браузера, приклеить этот лист к куску картона или пластика, заламинировать и использовать для рисования обычный черный маркер на водной основе, который с ламинированной поверхности можно запросто стереть обычной тряпочкой.
Может для удобства еще клеточку псевдо тетрадную добавить, для удобства рисования прямоугольных форм, четкость линий доп + для восприятия клиентом
Я отказался от сетки, чтобы она не отвлекала. А ещё, когда сеточки нет, то немного кривая линия не так бросается в глаза, как с сеточкой :)
Если есть графический планшет, всё упрощается до нажатия PrintScrn при включенном браузере с открытой в нём about:blank.
Только не надо убеждать нас в том, что на людей, которым «такой формат оказался затруднительным для восприятия», наличие шапки от броузера вдруг открывает глаза…

Восприятие или есть, или его нет… А там ты хоть шапки броузерные рисуй, хоть цветными карандашами, да что там говорить — хоть готовый или даже уже разверстанный дизайн утверждай — все равно не поймут и не примут…
Google Chrome

В описании есть, а в списке нет
Извините, забыл добавить :( Вот он (в моем исполнении, хотя ниже уже есть) — www.mokkey.ru/_works/browser_notepad/browser_notepad_by_mokkey_-_chrome.png

Если ссылка слетит, то у меня на сайте в списке.
Идея отличная. Единственное, я бы делал книжную ориентацию бланков, а не альбомную (обычно сайты более высокие, чем широкие). Или и ту, и ту.

Ещё мне кажется, для увеличения полезной площади и сохранения идеи можно оставлять только верхнюю панель окна и в ней писать название проекта :) Заказчику это понравится :)
книжную ориентацию бланков, а не и альбомную.

опять же, для удобства
Книжная ориентация это правда здорово! :) Было мне лениво её делать, но вообще она иногда бывает полезной.

Только с ней проблемка небольшая: например, у нас экран разрешением 1024 на 768 и видим мы его всегда в альбомной ориентации (экран же не ставим набок). Если сайт высокий, то он всё равно остается 1024 по горизонтали. А так как мы печатаем на бумагу формата А4 и размером листа ограничены, то нам придется уменьшать масштаб окна, что сохранить эти условные 1024 по горизонту. Т.е. пропорция поплывёт, что уже сложнее угадать.
есть хороший инструмент — Balsamiq Mockups — balsamiq.com/
поддерживает стандартные элементы интерфейса — удобно создавать эскизы страниц.
… только в бесплатной ипостаси не дает экпортировать как .PNG.
А я люблю хром))
Извиняюсь, поправил ошибку с линейкой

Спасибо! Я свой хром-бланк потерял в процессе публикации (исправил).
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории