Алексей Черенкевич ([info]cherenkevich) wrote,
2010-02-22 10:10:00
  • Previous
  • Memorize
  • Share
  • Next

Модульные сетки. Часть третья. PaperGrid — сетка на бумаге

  1. 38 попугаев (Введение)
  2. Алгоритм построения модульной сетки. Оптика и геометрия
    1. Алгоритм
    2. Микромодуль и оптические компенсации
    3. Особенности работы с модульной сеткой при разработке «резиновых» сайтов
  3. PaperGrid — сетка на бумаге
  4. BrowserGrid — сетка в Фотошопе
  5. ModularGrid — сетка-камертон в браузере
  6. Верстка по сетке: проблемы и решения
  7. Список использованной литературы

Лайфхак

Игнорирование такого простого и очевидного способа проектирования, как бумага и карандаш — это то, что тормозило меня долгое время. Я был уверен, что можно и без него: у меня же есть компьютер с Фотошопом!

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

Недавно у меня появилась замечательная нецифровая утилита, идею которой я заимствовал на каком-то буржуйском сайте. (Если понимаете, о чем я — дайте ссылку, пожалуйста, для отчетности.) На сайте был магазин, в котором продавали целые блокноты бумаги, на листах которых была рамка браузера и сетка. Я решил попробовать сделать себе такую же: разлиновал в Корел Дро, накинул рамку браузера и получил вот такую вещь:

Рис 3.1. Бумага для проектирования

Я сделал сетку 50×64. Допускаю, что об этом членении можно и поспорить, но, мне кажется, что для эскиза на бумаге это не особо важно.
Ничего сложного, но жить стало проще )

Скачать PaperGrid (PDF-файл, 130 КБ)

Примеры из практики



Рис 3.2. Прототипы сайтов на бумаге и их реализация



Жду от вас предложений на этот счет )

Поддержите на Хабре — http://habrahabr.ru/blogs/design/85179/.


UPD. Синхронно со мной в блоге usability.by повилась публикация на эту же тему. Там есть ссылки с большим количеством подробностей на эту тему. http://www.usability.by/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/.
Tags: дизайн, статьи

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    switch

    Your IP address will be recorded 

     
    Help
  • 42 comments

[info]den3streifen

February 22 2010, 08:17:39 UTC 2 years ago

Сейчас набигут с криками «КАААТ!»)

[info]cherenkevich

February 22 2010, 08:19:09 UTC 2 years ago

Да ладно. Пост же совсем короткий.

[info]den3streifen

2 years ago

  • Loading...

[info]vsevolod_e

2 years ago

  • Loading...

[info]cherenkevich

2 years ago

  • Loading...

[info]kirrrdyk

February 22 2010, 09:11:10 UTC 2 years ago

Здрасьть. Зачитался "попугаями". но вот бравузер печатать на бумаге потом изрисовать - фетшь имхо. да и картриджев жалко. ) тетрадка в клетку сподручнее всёж.

[info]__h4__

February 22 2010, 13:02:09 UTC 2 years ago

Ризограф спасёт отца русской демократии

[info]cherenkevich

2 years ago

  • Loading...

[info]alexandrpavlov

February 22 2010, 09:29:45 UTC 2 years ago

вообще, это круто, конечно. Я предпочитаю всеж прототипирование наброскам. Хотя и немного разные задачи решаются

[info]trueowl

February 22 2010, 09:49:34 UTC 2 years ago

таки ж для этого подойдёт и обычная тетрадка А4 в клетку

[info]cherenkevich

February 22 2010, 18:08:17 UTC 2 years ago

Овл, я ж не заставляю. Это мой лайфхак. И все )

[info]cherenkevich

2 years ago

  • Loading...

[info]trueowl

2 years ago

  • Loading...

[info]trueowl

2 years ago

  • Loading...

[info]kam88

February 22 2010, 11:23:48 UTC 2 years ago

У http://960.gs есть такие скетчшиты, только с их колонной сеткой.

[info]cherenkevich

February 22 2010, 18:19:32 UTC 2 years ago

Появился апдейт. Если интересно )

[info]flexo

February 22 2010, 11:39:28 UTC 2 years ago

Тоже иногда руками сначала :)


Выше правильно упомянули 960.gs, просто ее дублировать с разворотом под 90' на другой слой - получается то же. Это кому как удобнее.

[info]cherenkevich

February 22 2010, 18:19:44 UTC 2 years ago

Появился апдейт. Если интересно )

[info]mardowitsch

February 22 2010, 17:42:56 UTC 2 years ago

у буржуинов много энтузиазма когда-то вызвал пост про проектирование "серым блоком" по сетке (http://v3.jasonsantamaria.com/archive//2004/05/24/grey_box_method.php)

[info]cherenkevich

February 22 2010, 18:20:10 UTC 2 years ago

Еще вот. http://www.usability.by/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/

[info]mokkey

February 22 2010, 17:55:27 UTC 2 years ago

Браузерные блокнотики я себе давно печатаю, писал об этом ( http://mokkey.livejournal.com/3820.html ), в т.ч. на Хабре. Правда сетка там была опциональна, изначально только линейка.

[info]cherenkevich

February 22 2010, 18:20:37 UTC 2 years ago

Появился апдейт. Думаю, Вам будет интересно.

[info]el_karlson

February 22 2010, 20:53:48 UTC 2 years ago

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

[info]cherenkevich

February 22 2010, 20:58:33 UTC 2 years ago

Об этом завтра.

Правда плагинов я не знаю. Все ручками )

[info]zlatasvarga

February 23 2010, 07:56:55 UTC 2 years ago

http://www.uistencils.com/ буржуйский магазин, где есть не только блокноты, но и линейки (типа офицерских) для рисования интерфейсов.

[info]badlittleduck

February 24 2010, 20:46:11 UTC 2 years ago

Спасибо большое за ваши статьи и ссылку на Usability.by. Если будет желание присоединиться к сообществу - welcome.

Завтра ссылка на ваш ЖЖ и на ваш сайт появиться на Usability.by. То, что она там не появилось раньше - упущение. Признаюсь ждал статьи о том, как создавать её в Photoshop.

[info]cherenkevich

February 25 2010, 19:23:22 UTC 2 years ago

Спасибо и Вам за ссылку на меня. Прямо сейчас опубликую запоздалаю статью про сетку в Фотошопе.

[info]deniserebryakov

February 27 2010, 15:18:26 UTC 2 years ago

Интересная смесь: корел дро и окно браузера под маком.

Deleted comment

[info]cherenkevich

March 4 2010, 02:09:03 UTC 2 years ago

Оч. удобно!

[info]shutka_v

March 23 2010, 19:22:06 UTC 2 years ago

Удобно. И главное преимущество — меньше времени за компом, в результате чего зрение портится намного меньше.

[info]cinic_rus

March 24 2010, 06:55:30 UTC 2 years ago

Продожение будет?

[info]cherenkevich

March 24 2010, 18:46:21 UTC 2 years ago

Да вроде бы уже все рассказал, что знал. Ну или почти все )

[info]cinic_rus

2 years ago

  • Loading...

[info]cherenkevich

2 years ago

  • Loading...

[info]cinic_rus

2 years ago

  • Loading...

[info]ps_42

April 14 2010, 12:36:49 UTC 2 years ago

спсб...=)))

[info]cherenkevich

April 15 2010, 13:10:24 UTC 2 years ago

пжлст )

[info]666die666

May 27 2010, 15:09:47 UTC 1 year ago

Great minds think alike

Я так же подхожу к вопросу проектирования сайтов, и мы сделали онлайн сервис с похожей идеей: http://gridpapr.com

Если есть идеи полезные - можно реализовать.

[info]cherenkevich

May 27 2010, 15:25:36 UTC 1 year ago

Re: Great minds think alike

Спасибо за ссылку.

Я в последнее время для себя открыл программу Axure. Процесс прототипирования для меня стал очень шустрым и ненавязчивым.

Тоже советую посмотреть.

[info]666die666

1 year ago

  • Loading...

[info]a1astor

September 14 2010, 13:30:50 UTC 1 year ago

ах черт, это круто, спасибо)

[info]maiik

April 19 2012, 10:32:10 UTC 1 month ago

Мужик, добавил бы тег "модульные сетки", чтобы разом можно было их отфильтровать. Пожалел, блин, тегов!
Create an Account
Forgot your login or password?
Facebook Twitter More login options
English • Español • Deutsch • Русский…