cherenkevich

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

Управление сеткой в Фотошопе

Я потратил некоторое время на поиск наиболее удобного варианта управления сеткой. Считаю нужным поделиться.

 

( Read more... )

 

1. 38 попугаев (Введение)
2. Алгоритм построения модульной сетки. Оптика и геометрия
   1. Алгоритм
      
   2. Микромодуль и оптические компенсации
   3. Особенности работы с модульной сеткой при разработке «резиновых» сайтов
3. PaperGrid — сетка на бумаге
4. BrowserGrid — сетка в Фотошопе
5. GridBuilder — сетка-камертон в браузере
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/.

Максу делали картинки к его серии подкастов «А почему-бы и нет».

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

Особенности работы с модульной сеткой при разработке резиновых сайтов

Модульные сетки как инструмент появились в полиграфии задолго до появления веба. Ни один из тех, на кого сейчас принято ссылаться в разговоре о сетках — Чихольд, Херлберт, Мюллер-Блокман и т. д. — и подумать не могли о резиновых сетках. Поэтому эту часть публикации я могу назвать как основанную на собственных рассуждениях.

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

( Read more... )

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

Микромодуль

В третьем пункте алгоритма я уже упоминал микромодуль. Микромодулем называют величину, равную высоте строки. Представьте, что сетка атомарна, а высота строки — неделимая частица.

Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».
 

( Читать дальше... )

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

Алгоритм

Начинаем с определения рабочей области

В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.
( Читать дальше )

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

Понятие модульности. Модуль

Наше советское и постсоветское детство подарило нам замечательный мультфильм «38 попугаев». Как вы помните, у зверей стояла задача: измерить длину удава. Чем измерять — было не понятно. Инструментом измерения выбрали маленького по отношению к удаву попугая. Оказалось, что в удава «влезло» аж 38 попугаев. В этом примере попугай — это модуль.

Таким образом, удава можно дискретизировать с частотой, равной единице, деленной на попугая )

Разумеется, есть более серьезные примеры модульности в жизни. Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека.
Такие единицы измерения, как косая сажень, пядь, фут и т. п. также произошли исходя из физических характеристик человека.
Сам человек есть модульная система. Если за модуль взять голову, то рост человека обыкновенного можно выстроить 7 головами. Причем на расстояниях, кратных такому модулю, мы можем определять ключевые точки построении человека.
Метрическая система, которую мы используем, тоже является модульной. Один метр состоит из ста модулей «сантиметр», который тоже в свою очередь можно расчленить на более мелкие модули.
Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.
( Читать дальше )

Заканчиваю свой пост (переросший в курс))) про модульные сетки. В качестве мануала пошагово расскажу, как рисовал вот этот эскиз. На нем же потом будет рассказано про HTML-верстку.


Если сильно не запинаете — закончу быстрее ) Думаю, что в понедельник все будет в сети уже.

Кстати, много чего добавилось к планируемому. Например, написан js-сценарий, который подключается к документу и по нажатию на CTRL+~ выводит сетку-камертон поверх страницы в браузере. Разумеется, эта сетка настраивается.

Светанул в комментах уже, но хули не запостить.



Рисовал такое 5—7 лет назад. Жутко фанател DAIM’ом. Потом случился веб-дизайн...

После вчерашних обсуждений обновил плакат «Google. Поиск по квартире», а заодно по просьбам трудящихся сделал аналогичный про «Яндекс».



Теперь плакаты подлежат обязательной кастомизации — в шапке есть, как и положено на этих сайтах, личная информация — электронный ящик. Не забудьте изменить мой на свой ) По этой причине png-файл я не публикую. Зато есть cdr- и psd-файлы.

Google

CDR, ~700 Кб — http://www.cherenkevich.com/files/posters/Google/google-poster.cdr

Архив с psd-файлом, 2,1 Мб — http://www.cherenkevich.com/files/posters/Google/google-poster.rar

Яндекс

CDR, ~190 Кб — http://www.cherenkevich.com/files/posters/Yandex/yandex-poster.cdr

Архив с psd-файлом, ~800 Кб — http://www.cherenkevich.com/files/posters/Yandex/yandex-poster.rar

PS. Плакат попал в «Ideas Everywhere» (http://delamberg.livejournal.com/591230.html) ))

Мой внутренний тренд с плакатами продолжается. Придумал такую штуку, завтра распечатаю.



Вместо ключей может быть любая мандула.

kaseopea скинул джипег клевого календаря.



А я нашел автора. Им оказался ЖЖ-юзер fierse. У него можно попросить такой календарь в векторе.

Ушел печатать.

Клавиатура на моем ноутбуке не русифицирована.  И желания русифицировать никогда не появлялась. Скажем, религия не позволяет. Но идея для людей, которые клеят наклейки на клаву со всякой шнягой типа кирилицы у меня появилась.

А что если клаву обклеить раскладкой Бирмана. Ну, типа на букву S наклеечку с параграфом, на букву D — с градусом и т. п.?

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

Интересуют:

— работы дизайнеров,
— крутая и интересная инфографика,
— крутая и интересная работа в области типографики,
— шпоргалки (чит-шиты) по веб-технологиям (хорошо оформленные) и т. п.

Чтобы вы повесили дома на стену? Схему метро Бирмана? Плакат с Гельветикой?

С удовольствием распечатаю вашу работу, если она крутая и мои гости будут говорить «Вось гэта ўаў!». Показывайте!

Очень хочу почитать Лаптева "Модульные сетки". А оказалось, что у нас в Беларуси его хрен найти. И в интернете его тоже не найти.

Может завалялась у кого в электронке?

Начал писать серию публикаций по модульным сеткам: от пустого холста в Фотошопе до html-верстки. Надеюсь, получится интересно!



Синим — то, что уже написано и проиллюстрировано.

Что добавите? Что выкините?

PS. Кстати, очень удобная штука — майнд мэппинг. С огромным удовольствием можно отстраивать логику и структуру мысли. Я использую программу XMind. Она бесплатная.

Задача. Сделать себе портфолио. Не для заказчиков, а для себя: коллегам показать да себя побаловать.

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

Два года назад я сел за «Друпал». Первое, что я сделал, как истинный ребенок СССР, — разобрал! Разобрал, и собрал по своему. Так родился мой личный проект «Drupallex», а сейчас он зовется «Propollis». Этот проект внутренний, я его делаю чисто для себя, для упрощения своей работы. Упор делается на интерфейс и поведение.

Дано

«Друпал» с коробки. Тема «Гарланд»

Задача

Cделать человекопонятное управление контентом

Итого

Та же страница, но под «Прополлисом»



(full-size 400 kB)

Что подскажете? Что пожелаете? Что посоветуете?

Часть 1

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

У сигарет нужно обязательно визуально обозначать, где фильтр.