Я Барак Обрамов

Надо выйти из запоя

2010-03-14T22:09:42Z

~~Надо выйти из запоя~~ Надо заканчивать диплом и браться за дело. Какое-нибудь интересное. Пару анонсов:

— Сервис для нелюбителей быдло-типографики «Типа-быдло» (Кста, как название? Не сильно дерзкое? А че, есть же быдло-кодеры)
— Плакат анти-быдло-типографики
— Еще одна плюшка для модульных сеток.
— Обещанный список литературы по сеткам.

Спецом для любителей рэпчины трек от «Встречных болтов» для второго раунда баттла на Хип-хоп.ру. Трек крутой!

За милых дам!

2010-03-05T03:02:06Z

Гомель, пр-т Ленина, магазин «Витязь».

Фоткал ночью на мобилу, поэтому какое тут нафиг качество )

Wanted!

2010-03-01T23:12:51Z

Есть ли среди читателей журнала знатоки JS? Знание фреймвёрков jQuery, MooTools и проч. не катит — сам умею ) Нужен голый JS.

Ищу человека, который в состоянии написать небольшой скрипт на голом джаваскрипте. Скрипт связан с модульными сетками. И это даже не очередной калькулятор сеток. Нет. В Сети таких пока не видел, поэтому есть смысл сделать свой. Есть работоспособные наброски того, что нужно сделать. То есть понимание задачи не займет 1 минуты. Я ни разу в жизни не работая с чистым JS (все jQuery да jQuery), но написал этот самый прототип того, что надо замутить, за день.

Думаю, если JS — это ваша работа, то у вас это займет часа 3.

Пишите на мыло cherenkevich.com@gmail.com.

Спасибо!

BTW

2010-03-01T22:59:51Z

Кстати, мой кореш OBJ тем временем замутил серию видеокастов «А почему бы и нет». Фишка кастов — по их завершению будет EP. 7 дней = 7 треков.

Вот сегодня, например, был опубликован каст про запись песни OBJ и Макса Лоренса «Свадьба». У OBJ в журнале есть все выпуски — пока их 5 + пилотный.

Вот результат пятого дня — OBJ feat. Max Lorens «Свадьба».

Вот видеокаст:

Модульные сетки. Часть четвертая. BrowserGrid — сетка в Фотошопе

2010-02-25T20:01:38Z

38 попугаев (Введение)
Алгоритм построения модульной сетки. Оптика и геометрия
PaperGrid — сетка на бумаге
BrowserGrid — сетка в Фотошопе
GridBuilder — сетка-камертон в браузере
Верстка по сетке: проблемы и решения
Список использованной литературы

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

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

Гриды

Сперва для меня показалось очевидным использование нативной фичи в Фотошопе для работы с сеткой — гриды (Edit > Preferences > Guides, Grids & Slices)

Рис 4.1. Нативные сетки в Фотошопе

Но на деле оказалось, что они не обладают необходимой гибкостью (я работаю в CS3):

сетка состоит из квадратных модулей строго,

невозможно регулировать начало сетки.

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

Гайды

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

Рис 4.2. Направляющие в Фотошопе

Не катит.

Мое решение

К сожалению, в Фотошопе не нашлось нативных фич для управления сетками. Поэтому сетку пришлось рисовать самостоятельно.

Для создания зебры я сделал слой-заливку (обращаю внимание, что не обычный слой, а слой-заливку: чтоб не кропилось) (Layer >New fill layer > Solid color) с паттерном в стилях:

Рис 4.3. Паттерн, образующий «зебру»

Рис 4.4. Настройка слоя-заливки. Яркость добавьте по вкусу

У слоя-заливки заполнение (Fill) нужно светси в ноль. А для макетов с черным фоном нужно сделать такой же паттерн, только белый.
Для создания сетки я пользуюсь полупрозрачными векторными фигурами. Именно векторными, потому что они не обрезаются при кропе. Чтобы они потом не мешали работать, я их объединяю в смарт-объект: получается один слой вместо нескольких, плашки лишний раз не выделяются при работе с Path selection tool.
Покатит.

Таймсэйвер

Инструмент, который я использую в самом начале работы над дизайном сайта — заготовки сеток, которые мне подходят на 90 % случаев.
Задумавшись над оптимизацией работы, я пришел к выводу, что каждый проект начинаю с проделыванием одной и той же работы:

создаю новый холст в Фотошопе,

перетаскиваю на него заготовку с рамкой браузера,

делаю шрифтовую «зебру», чаще всего на 18,

проектирую сетку на 12, либо на 10, либо на n колонок.

И занимает каждый раз это минут 20. Непорядок.
Я создал себе psd-файл размером 1280?1504 пикселей с готовыми «зеброй» и сетками. Точнее не с сетками, а с членениями. Есть смарт-объекты с колонками разной величины и пояса разной величины. Слои красного цвета — результаты вертикального членения (5 вариантов), желтого — горизонтального (3 варианта). В начале проекта я выбираю необходимую пару «колонки—пояса» и необходимую рамку — 1024 или 1280 пикселей по горизонтали.

Рис 4.5. Слои с членениями

Итого 15 комбинаций сеток. Для удовлетворения рядовых потребностей должно хватать.
С удовольствием поделюсь.

Кстати, в моей заготовке использована другая заготовка — Джоеля Лауманса (www.piksels.com).

И еще, советую закинуть в такой шаблон элементы UI в слоях. Я использую такую заготовку от bsoo.

Скачать BrowserGrid (ZIP-архив, 450 КБ)

Ссылка на Хабре — http://habrahabr.ru/blogs/design/85617/

UPD про начало нативной сетки в Фотошопе. Спасибо, узнал, что можно регулировать. Но ведь это не решает поставленной задачи.

Мужыкальная пауза!

2010-02-22T20:21:00Z

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

2010-02-22T08:10:21Z

38 попугаев (Введение)
Алгоритм построения модульной сетки. Оптика и геометрия
PaperGrid — сетка на бумаге
BrowserGrid — сетка в Фотошопе
GridBuilder — сетка-камертон в браузере
Верстка по сетке: проблемы и решения
Список использованной литературы

Лайфхак

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

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

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

Рис 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/.

Картинки

2010-02-21T15:09:01Z

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

Niko-teen aka OBJ «Бунт на корабле» (InDaBattle)

2010-02-20T15:15:45Z

Цитата RAP.BY

Когда рэпперу начинает жать собственный пиджак (образ), они покупают новый. Вот и появляются на свет Slim Shady, Ноггано или Айвенго. И тогда можно не бояться за то, кто-то не поймёт: «Это же не я, это он».

Вот и OBJ стало не хватать рамок своего образа. Пришлось придумать новый. За этим дело не стало и скоро появился новый персонаж в белорусском рэпе. И первое, что он сделал пошёл участвовать в баттле InDaRnB.ru. И удачно так сходил, что первый же записанный этим персонажем трек попал в нужные уши. А именно уши клип-мейкера, режиссёра Павла Пунтуса, который снимал, например «Шанс» для St1mа. А дальше было решено снять незатейливое видео на тот самый трек. Собственно, встречайте Niko-Teen «Бунт на корабле», режиссёр Павел Пунтус.

Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия. Продолжение — 2

2010-02-18T08:19:54Z

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

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

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

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

Средники: тянуть или не тянуть

Что делать с просветами между колонок? У меня на этот счет есть два варианта развития событий (ksoftware не согласился ни с одним из моих вариантов и предложил радикальный третий).

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

Я придерживаюсь второго варианта. Именно его я рассмотрю в шестой части про верстку.

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

Графический контент

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

Итак, на сегодняшний день гипертекст не позволяет в лоб решать вопросы с растягиванием картинок. Единственное, что сразу приходит на ум — процентное значение размеров картинок. Но это не панацея. Это как кактус из известного баяна: будем плакать и колоться. Хотя бы потому, что если gif-изображения начать уменьшать, они «бьются» и «крошатся».

Следующее, что мы можем попробовать сделать с картинками — обернуть в <div>с CSS-свойством overflow: hidden. Тем самым мы будем кадрировать картинку под нужный размер, показывая ее часть. Но этот прием может сыграть с нами плохую шутку. Но есть вероятность того, что мы нечаянно можем скрыть нужную информацию от пользователя. Этого делать никак нельзя. Попробуйте кадрировать схему метро. Какой после этого от нее смысл?

Третий способ — оборачивать картинки в плашки с заливкой или бордюром. Вот их, возможно, и стоит тягать.
Самый простой способ для иллюстраций в контенте, как ни странно, — забить на растягивание. На сегодняшний день не существует рациональных решений этого вопроса. Если касаться картинок, которые относятся к дизайну — пробуйте тягать или кадрировать. Вот на них забивать нельзя.

Флеш

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

В заключение

Сетка не спасает, если дизайн УГ

И обратное: если ваш дизайн крут, а кто-то говорит, что он «не по сетке» — забейте.

PS. Продолжение будет в понедельник. В планах еще четыре части.

Будет здорово, если вы поддержите меня на Хабре, а то топики-ссылки на статьи даже в захабренные с трудом попадают.

Спасибо!!

Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия. Продолжение

2010-02-17T08:13:33Z

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

Микромодуль

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

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

Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма.

Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.

Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45).
Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки.

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

Об этом еще поговорим.

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

Оптические компенсации

Какими бы ни были продуманными правила построения сеток, она не может гарантировать отличный результат работы. Ведь цель дизайна совсем не сферическая сетка в Wacom’e )). Геометрия в голом виде никому не нужна. Это не цель. Сетка есть рабочий инструмент, один из рабочих инструментов. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз.
Например, обратите внимание на то, что округлые буквы по своей высоте больше букв, ровно лежащих на базовой линии.

Так, круг и квадрат […] одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы («о», «с») выступают вниз за базовую линию шрифта — только эта небольшая (2—3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке.

Дмитрий Кирсанов «Веб-дизайн» (СПб: Символ-Плюс, 2004)

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

Геометрия не так важна. Оптика решает.

Сетка — это всего лишь инструмент. Причем ненавязчивый.

Плашки

Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins) и внутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля.
Или не сдвигать?

Все зависит от интенсивности цвета плашки (фона блока). Рассмотрим два примера.

Рис 2.9. Примеры с плашками

Рис 2.10. Примеры с плашками вместе с сеткой

На что нужно обратить внимание.

Яркие по отношению к фону плашки никуда не выносятся.

Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике.

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

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

Висячая пунктуация

Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Однако я не могу не упомянуть ее в разговоре об оптической компенсации. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки. Техническая сторона висячей пунктуации будет рассмотрена в шестой части.

Рис 2.11. Пример использования висячей пунктуации

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

Шрифты с засечками и крупные кегли

Заголовки набранные антиквой крупным кеглем свешиваются за линию выключки по тому же принципу, что и висячая пунктуация. Засечки в крупном кегле выглядят тоже не маленькими и по этому такие заголовки «рвут» вертикаль.

Рис 2.11. Пример заголовка, набраного антиквой

Во избежание этого заголовок нужно выносить на ширину засечки влево.

Иллюстрации

Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример:

Рис 2.12. Горизонтальное выравнивание графики

В примере серым цветом показана граница самого файла с картинкой. Фактически иллюстрация начинается не сразу самого графического файла. Первые 43 пикселя — дырка, от которой нужно избавляться. Разумеется, что на больших динамично развивающихся сайтах отсутствует возможность детальной подгонки каждого изображения, а тем более всех миниатюр (да и на маленьких сайтах какой-нибудь компании «Престиж Хауз» вряд ли будут за этим стрелять, но давайте говорить об идиллиях)). Выравнивание картинки не по виртуальным параметрам картинки, а по ее содержанию предпочтительнее.

Рис 2.13. Вертикальное выравнивание графики

Обратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.

Часть вторая. Алгоритм построения модульной сетки. Оптика и геометрия

2010-02-16T07:58:24Z

38 попугаев (Введение)
Алгоритм построения модульной сетки. Оптика и геометрия
PaperGrid — сетка на бумаге
BrowserGrid — сетка в Фотошопе
GridBuilder — сетка-камертон в браузере
Верстка по сетке: проблемы и решения
Список использованной литературы

Алгоритм

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

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

Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.

Рис 2.1. Определяем рабочую область

Делаем шрифтовую сетку

Я уже раньше писал публикацию о вертикальном ритме. Она дополнит все то, о чем будет сказано в этом пункте. Напомню, что мы выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки.
Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).
Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

В своей практике я чаще всего использую такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.

Рис 2.2. Шрифтовая сетка-«зебра»

Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения

Исходя из чего мы можем вычислить размер модуля. Первое — это присутствие какого-то блока постоянной величины, от которого нам приходится отталкиваться. В вебе постоянными величинами чаще всего бывают баннеры, иллюстрации, видео-контент и проч. Такие константы могут содержать в своей ширине уже несколько модулей.
Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля.

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

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

Таким образом, расстояния между модулями делаем равным 18 пикселям.

Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

Строим вертикальное членение по полученному значению

Рис 2.3. Колонки

Делаем горизонтальное членение

Высоту одного такого пояса берем кратной базовой высоте строки.

Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

Рис 2.4. Пояса

Модульная сетка

То, что мы получили на пересечении горизонтального и вертикального членений называют модулями. Все-таки полдела — грамотно выбрать размер модуля. В случае, когда модуль большой, нам негде развернуться, пропадет та гибкость, о которой мы так мечтали. Если сетка очень мелкая — то она попросту теряется, как миллиметр в метре.

Рис 2.5. Модульная сетка

Регионы

Объединяем модули в регионы, создаем композицию, рисуем

Рис 2.6. Регионы

Рис 2.7. Макет сайта с сеткой...

Рис 2.8. ...и без нее

Завтра разговор построения будет продолжен. Спасибо за внимание!

Модульные сетки, часть первая. «38 попугаев»

2010-02-14T23:24:24Z

38 попугаев (Введение)
Алгоритм построения модульной сетки. Оптика и геометрия
PaperGrid — сетка на бумаге
BrowserGrid — сетка в Фотошопе
GridBuilder — сетка-камертон в браузере
Верстка по сетке: проблемы и решения
Список использованной литературы

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

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

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

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

Задачи сетки

Ускорение работы

Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

Сбалансированность и пропорциональность

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

Ускорение и шаблонирование, единообразность элементов

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

Рис 1.1. Примеры композиций и их сетки

Рис 1.2. Пример сайта с сеткой и без нее

Рис 1.3. И еще

Виды сеток

Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.

Рис 1.4. Блочная сетка

То, что называют модульной сеткой, например, 960.gs или Blueprint CSS и т. д. — совсем не модульная сетка. Вернее, она-то сетка. Но она колоночная. Потому что состоит только из вертикального членения на колонки.

Рис 1.5. Колоночная сетка

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

Рис 1.6. Модульная сетка

Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям.

Рис 1.7. Иерархическая сетка

Математика

Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей.
Имеет смысл поговорить о пропорциях. Например, о «золотом сечении». Тема «золотого сечения» не нуждается в еще одном пересказе. В Википедии можно найти больше подробной информации об этом соотношении, чем я здесь смогу пересказать.
Внимания заслуживают другие пропорции, не такие популярные.

Ряд Фибоначчи

Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 1,618, то есть, к отношению «золотого сечения».
Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» и различные модульные системы.

«Предпочтительные числа»

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

Рис 1.8. Примеры сеток с нелинейными пропорциями между размерами модулей

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

Жду чтиво

2010-02-11T07:10:49Z

Заказал пару книжек. Жду. Должны на днях приехать

«Занимательную наркологи» я уже читал, но читал «по молодости» с телефона. Эта как раз та книжка, которую мне просто хочется иметь на книжной полке. Хотя бы просто по тому, что я люблю Машину Времени.

При Чичваркина тоже как-то начинал читать с монитора, но заебался. А книжка сама по себе интересная. Эдакий success story, которую просто читаешь как Дарью Донцову )

А про «Городок» — просто так. Мне нравится их юмор. Сейчас они делают шлак. Старые передачи — охуенны. Это, блядь, не «Аншлаг» и не «Смехопанорама».

А что читали недавно вы и что у вас есть в планах прочитать? Я вот, например, из проф. литературы очень Лаптева хочу найти, но его на нашем oz.by хуй купишь — уже 3 месяц в заявках на книгу я и еще два таких же мудака, которые обламываются в Беларусь с Озона заказывать )

«Сетки» скоро будуть )

2010-02-10T21:39:08Z

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

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

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

Textarea 2.0. Прототип

2010-02-10T15:35:55Z

Мейер Лански

2010-02-10T00:29:51Z

Даже не подозревал.

Не смотря уже на мой двухлетний интерес к истории мафии, только недавно узнал, о том, что человек, который держал пол-Америки — Мейер Лански — уроженец Беларуси. (да, jzed, привет, он из Гродно)

Лански родился в 1902 году в городе Гродно. Позже семья Суховлянских (позже — Лански) мигрировала в США. В школьные годы Мейер познакомился с человеком, которого позже все уже знали как Лакки Лучиано. Причем познакомился не то чтобы через аську или «Вконтакте», как девочка. Лучиано его типа крышевал в школе и требовал бабло. А еврейский мальчик Мейер как истинный еврейский мальчик сказал «иди в жопу». Лучиано его за это зауважал. И, кстати, стал крышевать нашару.

Позже вместе с не менее известным мафиози Америки Багсом Сигалом они организовали «Файв поинтс» (то, что у Bad Balance «Пять стволов»). Профиль ~~на Free-lance.ru~~ у синдиката был вполне предсказуем исходя из того, что происходило во времена Великой Депрессии: бутлегерство, гемблинг и рэкет.

Кстати, в то время много бабла инвестировали в игорный бизнес в Лас-Вегасе. Лански был передовиком и сливал бабла в казино этого замечательного города в Неваде нереально дофига бабла.

И, кстати, идея лотерей тоже принадлежит Мейеру Лански.

От так.

Гуарнидо

2010-02-05T02:44:53Z

Возле дома, в котором я живу, есть кафеха «Магеллан». Я когда туда прихожу, стараюсь садится за стлик возле стены, на которой висит здоровый такой принт. На принте — иллюстрация Гуарнадо. Это мужик такой. А точнее — испанец. Комиксы бомбит.

Мне этот илл охуенно нравится. Разыскал я в инете его. И картинку эту тоже нашел. Стоит постер такой 39 €. Честно: обламываюсь такие деньги за постер отдавать.

С вами делюсь картинкой. Завтыкайте. В правду пиздатая?!

Анонимисты

2010-02-03T21:17:55Z

— Леша, тебя тут спрашивали.
— Кто?
— http://www.formspring.me/cherenkevich.

Здесь я отвечаю за базар. Спрашивайте.

МакХост и хуй

2010-01-28T11:58:30Z

На сайте МакХоста увидел «хуй» — маленькую надпись в футтере. Думал, хакнули. Побазарил с саппортом — оказалось, это их редизайн.

Пруф-имэйдж:

Терки за хуй на Хабре — http://habrahabr.ru/blogs/censorship/82344/

Паттерны в информационной архитектуре.

2010-01-24T23:22:33Z

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

В этом исследовании я решил выяснить основные паттерны в архитектуре сайтов. Выделить их и разложить на фракции — микропаттерны или модули.

Цель исследования: по результатам сделать отточенную до мелочей сборку системы управлению контентом, ориентированную на паттерны. Это позволит сократить время на одни и те же действия при создании каждого сайта. (Скажем, карта сайта, поиск, фидбэк и проч. практически всегда одинаковы и по внешнему виду и по функционалу — тоже ведь паттерны.)

Достоинства и необходимость исследования: паттерн есть ментальная карта, модель поведения. Паттерны делают поведение пользователя на незнакомом сайте привычным и интуитивно понятным (знакомым).

Сходу можно выделить следующие паттерны:

личные блоги,
коллективные блоги,
корпоративные сайты,
промосайты,
сайты электронной коммерции (каталоги и интернет-магазины),
форумы,
социальные сети и сообщества,
СМИ,
сервисы и порталы.

Вне этого списка остались различные сервисы и стартапы.

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

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

Увеличить

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

Интранет- и экстранет-версии тоже очень сложно общо описать. Я забил.

Я хочу у вас спросить, есть ли у вас паттерны в сайтах. Какими вы их видите? Насколько корректны / некорректны мои паттерны? Спасибо.

Выборы-выборы! Кандиты — твиттеры!

2010-01-22T17:38:36Z

RT Street Awards (хип-хоп в Беларуси — 2009)

~~Ретвит~~ Репост для моего френда OBJ

Стартовал Street Awards (Хип-Хоп в Беларуси 2009) я там представлен аж в 4-х номинация:
—Лучший артист года (OBJ)
— Лучший релиз (OBJ «Rap игра»)
— Лучший клип (OBJ & BIGI «Ванильное небо»)
— Концерт года (06.02 — Презентация альбома OBJ / Гомель или 01.04 — AntiRAP Party / Гомель)

DAIM

2010-01-20T18:03:38Z

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

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

Плакат на стену «Поиск по квартире». Версия вторая дополненная

2010-01-19T15:07:30Z

После вчерашних обсуждений обновил плакат «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) ))

Плакат в комнату

2010-01-17T21:42:28Z

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

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