на примере конечно слабо выражена структура и не так хорошо видна сама суть сетки ( т.е. она что есть, что ее нету )
но все же чтиво будет очень многим полезно и мне в первую очередь
большое спасибо
на примере конечно слабо выражена структура и не так хорошо видна сама суть сетки ( т.е. она что есть, что ее нету )
но все же чтиво будет очень многим полезно и мне в первую очередь
большое спасибо
Ну здесь я показал принцип на том сайте, над которым работаю в данный момент. Мне показалось, этого будет достаточно.
❞
Очень полезная информация, в русском сегменте чувствуется нехватка. +5 Лично сам пользуюсь сеткой Joel Laumans.
Да можно любой пользоваться, мне ближе маленькие квадратики, они более мобильны, особенно когда рисуешь на несколько разрешений
misha_dergachev, потомучто там стрелка выходит за сетку и показывается выделение блоков. мне просто так удобнее
Тогда по логике нужно выравнивать стрелку по краю линии и увеличить ширину плашки с фотографией (соответственно и все остальные блоки).
Вообще, если честно, то это не самый полезный материал на мой взгляд. Если не сказать вредный.
Потому как рассказывается об одном, а на деле ничего по сетке не выравнивается. Хотя схема сайта сделана по сетке. Странно.
И да, линии для горизонтального ритма в итоге не используются. Чего только стоит "Меню каталога", где не использовать вертикальный ритм просто грех.
Вообще, если честно, то это не самый полезный материал на мой взгляд. Если не сказать вредный.
Потому как рассказывается об одном, а на деле ничего по сетке не выравнивается. Хотя схема сайта сделана по сетке. Странно.
Вы смотрите на каждый блок по отдельности, а по логике и меню каталога и меню разделов сайта есть одно целое, поэтому оно выделено в один обособленный блок
Части сайта выделяются не только по наличию текста или картинок, они могут выделяться по цвету, логике, функционалу. Это именно то исключение. Если вы тупо расставите всё по модулем, это не будет работой)
И да, линии для горизонтального ритма в итоге не используются. Чего только стоит "Меню каталога", где не использовать вертикальный ритм просто грех.
Сетка не есть закон, повторяю, это лишь метод. Поэтому если вы расчертили сетку, то необязательно нужно всё делать по ней. Например если вы знаете, что сайт будет обилием текста, и нужно как-то выделить меню, вполне допустимо использование другого межстрочного интервала, чем того, который задан по модульной сетке.
Сколько не читал про сетки, могу сделать следующий вывод:
– очень и очень неточная наука, поэтому спорить можно бесконечно.
Лично я еще парюсь по вертикальному ритму, а Алексей по всей видимости не считает нужным обращать на это внимания, но тем не менее общая картина готового макета его исполнения смотрится очень и очень хорошо.
Тут как говориться на вкус и цвет. Но то что удобства прибавляет – это абсолютно в цель.
Вы даже можете особенно не заморачиваться изучая ее (главное я считаю и цитирую Алексея Черенкевича: "оптическое восприятие"), а воспользоваться готовым ресурсом – http://grid.xizzzy.ru/#app.
puzz1e, я не знаю как это объяснить. Сетка не закон построения сайта, это просто метод облегчающий его построение, поэтому здесь парится точно ненужно.
баян )
cmd+Э и вот тебе вся сетка
+ отступы cmd+вниз
не скажи, обычные направляющие не так удобны, хотя бы потому, что их невозможно двигать плавно, они привязываются к близлежащему объекту, а подобные шаблоны лежат себе в слое и ни кого не трогают, это более мобильный способ, дополняющий направляющие линии
Kurilshik, ну я собственно тоже самое и сказал, только другими словами. А вертикальный ритм по моему мнению – это штука к которой нужно уделять по-больше внимания, только и всего.
Про сетку и дополнить нечего. Всё уже было сказано, если не автором так комментаторами.
Могу лишь сказать, чтобы те, кто слышит про сетку впервые еще и поизучали в интернете такую тему как золотое сечение.
Так же могу поделиться ссылочкой: http://www.gridsystemgenerator.com/gs01.php
А еще могу поделиться советом (в целом разработчикам веб-диза, да и не только):
верстайте макеты (в смысле наполнения макета текстом, компоновка элементов и т.п.) в InDesign - очень удобно и есть встроенная сетка (не модульная правда, без вертикальных полос). А еще очень удобно если потом вам скажут "надо заменить цвет ссылок", а у вас в макете их стопицот... берешь и меняешь стиль в одном месте он и применяется всюду, а так же можно не гемороиться если надо изобразить ссылки с пунктирным подчеркиванием и пр.... Подробнее об этом в инете можно почитать (я так и узнал о его преимуществах... и опробовав понял что это то, чего мне так не хватало).
Ну а графику, конечно же, делаем всё таки в фотошопе... =)
предпочитаю пользоваться только колоночной сеткой (вертикальной), это дает свободу действий, потому что зачастую вертикальные отступы делаются «на глаз»
Хороший пост. спс Лёха , И другим чьи ссылки не менее полезными оказались :)
з.ы. ЛЮди..учитесь ценить чей-то труд.
з.ы. Лёха, а можно как то посмотреть на какой-нить твой исходничек? ..ну для общего развития, чтобы наглядно посмотреть как все выглядит изнутри.
cherenkevich, ага, я видел, интересно написано (добавил в друзья еще тогда)
❞
Не путайте вертикальный ритм с горизонтальным. Разные вещи. Шрифтовая сетка имеет отношение к вертикальному ритму (но к горизонтальному членению).
Возможно я не прав, но не вижу причин не нарушать ритм с какой-то осмысленной целью :)
ритм и всё остальное только средство для достижения цели, я это так воспринимаю
Я все читаю и читаю об этих модульных сетках и не могу понять, а чем например хуже стандартная фотошоповская сетка или та же сетка с помощью одних только направляющих?
У меня вопрос. Как избежать конфликта между размерами баннера и модулем в сетке? Должн ли модуль в сетке быть кратным размеру баннера? Пересмотрел несколько сеток, баннер шириной в 250px не вписывается. Разьясните этот момент совместного использования описанной в данной статье модульной сетки и баннеров. Спасибо.
Комментарии пользователей
на примере конечно слабо выражена структура и не так хорошо видна сама суть сетки ( т.е. она что есть, что ее нету ) но все же чтиво будет очень многим полезно и мне в первую очередь большое спасибо
Очень полезная информация, в русском сегменте чувствуется нехватка. +5 Лично сам пользуюсь сеткой Joel Laumans.
Большое спасибо :)
Прокомментируйте сноски пожалуйста. Они кстати редактируются? А то я там 2 раза запостил одно и тоже сообщение.
misha_dergachev, потомучто там стрелка выходит за сетку и показывается выделение блоков. мне просто так удобнее
А почему на примере обе навигации мимо сетки? Первая не вписана в модули по вертикали, а вторая не вписана и по вертикали, и по горизонтали.
Сетку в ручную деалть ??? Или есть какой то спецальный плагин или нечто, что может ускорить процесс ???
qwerty94, http://960.gs/ вот здесь скачать нажми, готовая сетка разных форматов.
баян ) cmd+Э и вот тебе вся сетка + отступы cmd+вниз :)
Сколько не читал про сетки, могу сделать следующий вывод: – очень и очень неточная наука, поэтому спорить можно бесконечно. Лично я еще парюсь по вертикальному ритму, а Алексей по всей видимости не считает нужным обращать на это внимания, но тем не менее общая картина готового макета его исполнения смотрится очень и очень хорошо. Тут как говориться на вкус и цвет. Но то что удобства прибавляет – это абсолютно в цель. Вы даже можете особенно не заморачиваться изучая ее (главное я считаю и цитирую Алексея Черенкевича: "оптическое восприятие"), а воспользоваться готовым ресурсом – http://grid.xizzzy.ru/#app.
Алексей, респект за то что не лень писать туториалы :) По теме сеток: 1. На фрилансе есть http://www.free-lance.ru/commune/?id=943сообщество по сеткам, в котором выкладывают работы + сетки. 2. И там же 2 ссылки на полезную инфу по сеткам: http://www.free-lance.ru/commune/?id=943&site=Topic&post=863309&om=0раз, http://www.free-lance.ru/commune/?id=943&site=Topic&post=990568&om=0два
Огромное спасибо. Казалось бы все просто, но раньше такого не использывал. Очень поможет в работе. Спасибо еще раз +5
Да пожалуйста, огромное спасибо тому человеку, который это дело реализовал. Упростило работу с сеткой в разы, теперь считать ничего не приходится.
puzz1e, я не знаю как это объяснить. Сетка не закон построения сайта, это просто метод облегчающий его построение, поэтому здесь парится точно ненужно.
Kurilshik, ну я собственно тоже самое и сказал, только другими словами. А вертикальный ритм по моему мнению – это штука к которой нужно уделять по-больше внимания, только и всего.
puzz1e, значит я не совершенен :)
Kurilshik, никто не совершенен, но я повторюсь
я читал подобное, скажу что очень полезно...так что спс!
puzz1e, да это еще сыряк)) но спасибо
Kurilshik, я про прошлые твои работы :) про эту пока трудно что-то сказать, так что ждем когда запостишь уже готовый дизайн.
Про сетку и дополнить нечего. Всё уже было сказано, если не автором так комментаторами. Могу лишь сказать, чтобы те, кто слышит про сетку впервые еще и поизучали в интернете такую тему как золотое сечение. Так же могу поделиться ссылочкой: http://www.gridsystemgenerator.com/gs01.php А еще могу поделиться советом (в целом разработчикам веб-диза, да и не только): верстайте макеты (в смысле наполнения макета текстом, компоновка элементов и т.п.) в InDesign - очень удобно и есть встроенная сетка (не модульная правда, без вертикальных полос). А еще очень удобно если потом вам скажут "надо заменить цвет ссылок", а у вас в макете их стопицот... берешь и меняешь стиль в одном месте он и применяется всюду, а так же можно не гемороиться если надо изобразить ссылки с пунктирным подчеркиванием и пр.... Подробнее об этом в инете можно почитать (я так и узнал о его преимуществах... и опробовав понял что это то, чего мне так не хватало). Ну а графику, конечно же, делаем всё таки в фотошопе... =)
brusher, да, для порталов это панацея
предпочитаю пользоваться только колоночной сеткой (вертикальной), это дает свободу действий, потому что зачастую вертикальные отступы делаются «на глаз»
Сетку использую, правда строила ее немного иначе (с вертикальным ритмом было туговато). Спасибо, попробую ваш метод :)
Хороший пост. спс Лёха , И другим чьи ссылки не менее полезными оказались :) з.ы. ЛЮди..учитесь ценить чей-то труд. з.ы. Лёха, а можно как то посмотреть на какой-нить твой исходничек? ..ну для общего развития, чтобы наглядно посмотреть как все выглядит изнутри.
скоро буду рисовать некоммерческий проект, могу выложить хотя по сути ничего в них нет, просто разбитый на папки исходник
cherenkevich, ага, я видел, интересно написано (добавил в друзья еще тогда)
А я все направляющими делю (сделал экшн и все). Мне так удобнее :-)
а я пока использую фреймворк 960 gs :)
Я все читаю и читаю об этих модульных сетках и не могу понять, а чем например хуже стандартная фотошоповская сетка или та же сетка с помощью одних только направляющих?
grantand, абсолютно ничем, просто эта удобнее чуток
Алексей, подскажите пожалуйста, где какие шрифты и размеры шрифтов использовали!
да уже и не вспомнить, в контенте тахома
не помню где скачал но тут объясняется сетка на примере сайта http://dl.dropbox.com/u/16680583/grids_are_good.pdf
Вы извините, но это копец. Вы делали сетку, но 50% контента не в ней. Как так?
Dmitry_f, какие именно 50% вас смутили?
http://www.guideguide.me/ by Cameron McEffe :yes:
У меня вопрос. Как избежать конфликта между размерами баннера и модулем в сетке? Должн ли модуль в сетке быть кратным размеру баннера? Пересмотрел несколько сеток, баннер шириной в 250px не вписывается. Разьясните этот момент совместного использования описанной в данной статье модульной сетки и баннеров. Спасибо.
MansEL, Строить сетку по размеру баннеров. Необязательно ложить весь контент строго в клетку