Представьтесь


Логин
Пароль
   Запомнить меня
Войти Зарегистрироваться   Забыли пароль?
Блог:

Веб-дизайн (20 записей)

О проектировании сайтов и других интерактивных сред.

Сетка для «Гнуса»

2 баллов
И снова я выкладываю одну из своих старых картинок. На этот раз была тренировка по модульным сеткам. Жертвой был выбран «Гнус» — гламурно-потребительский навигатор по одежке и скидкам.


Как бы одна из страниц каталога обуви.


Ну и вот такую сетку нарисовал.


14 колонок получилось. Бедный кодер.

В начале прошлого года было.
Написал  vitalykim | 20 июля 2009
Вы можете прокомментировать статью после регистрации или входа под своим паролем

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

-8
Supercharged21 июля 2009, 19:33
Меня сетки вообще вырубают. На этом примере хорошо показано, почему сетки - это зло.

И кстати, чем обоснована такая крупная надпись "Женская обувь"? Это ключевая фраза ради которой люди пришли в тот раздел?
3
vitalykim21 июля 2009, 20:37
А я убежден, что модульная сетка играет за нас.
-2
Supercharged21 июля 2009, 21:19
Согласен, играет, но не в таком виде.

В таком виде добрая половина элементов висит на гайдах. Либо, висит на сетке в ущерб себе.
1
Spunk21 июля 2009, 20:41
Сетки рулят, братюня :)
1
Jurubas21 июля 2009, 22:46
Всё как-раз наоборот — это отличный пример того, когда сетка, что называется, решает.
0
Anycolor22 июля 2009, 03:43
Да она всегда решает.
-1
Dumeke18 октября 2009, 20:53
обясните ил дайте ссылку зачем нужны эти сетки а, для чего и для кого
2
Jurubas21 июля 2009, 22:45
Вообще-то кодер должен быть рад такому порядку, резину же проще таким образом тянуть.

Я за основу обычно беру 960grid
0
Supercharged21 июля 2009, 23:56
Рад должен быть пользователь, а не кодер.
0
Jurubas22 июля 2009, 00:10
Моя реплика была к подписи «14 колонок получилось. Бедный кодер».
Я, и как пользователь, был бы рад такому «гнусу».
0
alexlee22 июля 2009, 00:41
истину глаголите. А для того чтобы было видно, рад пользователь или нет, стоит рядом с таким макетом выкладывать еще и макет без направляющих.
Кстати, в данном случае совершенно непонятно, почему нижние колонки синих ссылок легли в сетку с разными расстояниями между колонками. Притянуто за уши к направляющим.
1
vitalykim22 июля 2009, 01:12
Ты знаешь, я и сам не понимаю. Зато вспомнил вывод, который тогда сделал: фотошоп непригоден для рисования сеток, потому что пиксель на два не делится.
1
Anycolor22 июля 2009, 03:54
Для экранной графики всё он замечательно пригоден. Зачем в вебе делить пиксель на два?
-5
Supercharged22 июля 2009, 01:29
Потому что там гениално все сделано: левые два столбика - это подкатегории обуви, а дальше 4 столбика - это магазины.

Сквозная сетка в большинстве случаев - нахрен не нужна, как здесь. Зачем нужно, чтобы край блока навигации вверху и один из столбиков списка в середине страницы были на одной линии? Это наоборот, ухудшает восприятие. А зачем в футере 14 столбцов, если там их всего 3?

Надо было взять три разных сетки для разных частей этого макета, количество столбцов бы было 2-3-4, а не 14. В итоге получился бы более гармоничный лэйаут.

В правильном случае можно было бы сказать, что дизайнер пошел на поводу у кодеров. Все потому, что какие-то ленивые гении придумали фрэймворки, чтобы глупые кодеры могли легко раскидать блоки по странице. Так как последние не слишком умные, им сделали всего 12 вариантов расположения блоков. При этом, чтобы все знали, тот же 960.gs - это не резиновая сетка.

Так вот, в данном случае никто дизайнеру задание не ставил сделать все по сетке чтобы сверстать было легче. Он сам взял сетку, думая, что сетки рулят, но не зная для чего. А они рулят только для кодера, когда у того есть фрэймворк. И все, точка. Остальным они только мешают - как дизайнеру, так и пользователю. В итоге дизайнер говорит, что "получилось 14 столбцов" - так что теперь кодер может вешаться, потому что он не найдет фрэймворка для резины с 14 столбцами (100% даже не делится на 14 без остатка) и просто запарится делать так, чтобы блок в футере и блок в хидере стояли на одной линии.
3
Jurubas22 июля 2009, 03:38
«Сквозная сетка в большинстве случаев - нахрен не нужна, как здесь. {...} Надо было взять три разных сетки для разных частей этого макета, количество столбцов бы было 2-3-4, а не 14. В итоге получился бы более гармоничный лэйаут»
Бред.

«При этом, чтобы все знали, тот же 960.gs - это не резиновая сетка»
Да-да, все знают...
http://www.designinfluences.com/fluid960gs/

«А они рулят только для кодера, когда у того есть фрэймворк. И все, точка»
Мде... Шаблонно мыслите.

Откуда-то столько уверенности про то, что творилось в голове у дизайнера, право забавно читать это всё, зная автора. И кодеры у вас все тупые.
-3
Supercharged22 июля 2009, 11:29
«Бред.»
Бред.

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

960.gs на ходу переобулся в совсем другой кривой резиновый фреймворк. Посмотрите просто на эти маленькие 16 блоков, а особенно на правый их край. Вам правда нужна такая верстка? И кстати, такая досада, с их 16-столбцовым фреймворком нельзя сделать сайт из 3 колонок одинаковой ширины. Так кто создает то, фреймворк или дизайнер?

«И кодеры у вас все тупые.»
Где это, у нас?
0
Jurubas22 июля 2009, 12:44
«Никаких аргументов к тому, что у сайта должна быть сквозная сетка из 12 или 16 колонок я не услышал, вобщем»
Никто не говорит что должна быть именно такая. Сетка просто — должна быть, имеенно сквозная... сквозная в том плане, что макеты всех страниц должны быть построены по этой сетке. А уже какая сетка, это дело опыта, вкуса и прочих характеристик проектировщика (дизайнера). То что я за основу беру 16-колоночную не значит что я делаю всё по выставленным направляющим :)

Где это, у нас?
Так вы сами пишете о том, что кодеры недалёкие, думать не умеют, работают только по фреймворкам и так далее в том же духе.
-1
quak3r22 июля 2009, 13:42
Разные сетки для одной страницы уж точно перебор. А покажите портфолио?
-3
Supercharged22 июля 2009, 14:44
Ну есть у нас допустим макет, похожий на тот, что автор рисовал. В футере же три колонки? А в верхней части, скажем, что 4. Так зачем нижние 3 колонки продлевать до верху, если они там ни в одном месте не нужны? Или зачем в средней контент-части страницы влияние расположения элементов хидера или футера? Не нужно это все.
-1
quak3r22 июля 2009, 15:22
О работах умолчали? Продемонстрируйте ваши сетки.

Для этого культурные люди и делают сетки в 12 колонок: потому что она делится на 2, 3, 4 и 6 блоков, давая возможность гибко, но в заданных комфортных рамках, распорядится контентом.

Стоит ли сделать вывод, что вы абсолютно безграмотны в сетках?
-2
Supercharged22 июля 2009, 15:56
Как хотите.

Но когда мне надо сделать сайт из 5 равных колонок - я делаю сайт из 5 колонок. Уж не знаю, что вы там с этими 12-ю делаете в таком случае.
0
quak3r22 июля 2009, 16:09
Не надо говорить — покажите ваш сайт с ровными 5 колонками и скажите, вот так, ребята, я считаю хорошо — а ребята оценят.

Это будет справедливо и не голословно.
0
quak3r22 июля 2009, 16:47
Работ не дождемся? :)
-2
Supercharged22 июля 2009, 19:59
Чет я мысль потерял, причем тут моя работа и этот топик? Я не дизайнер-одиночка, и не фрилансер на дому, поэтому я не знаю что такое "работы" и "портфолио".

Или действительно стало интересно, как же сайт с 5 колонок склепать
2
quak3r23 июля 2009, 11:23
При том, что можно долго и красиво рассуждать над чем, что сам не можешь сделать хорошо — и я вас прошу продемонстрировать то, что вы делаете хорошо и о чем рассуждаете.
-1
Supercharged23 июля 2009, 14:51
Я могу рассуждать о чем угодно и без предварительного утверждения своих умений у вас, мой дорогой.
1
quak3r23 июля 2009, 15:13
Весьма аргументированная позиция.

Странно, что вы мужчин называете «мой дорогой». Я не ваш. :)
1
Anycolor22 июля 2009, 03:49
Вроде всё логично, только стоит все-таки подписать эти блоки
1
vitalykim22 июля 2009, 16:25
Интересный факт: в строке, разбитой на 12 колонок, существует 2024 варианта различных комбинаций модулей. При условии, что модуль может состоять только из целого количества колонок.

Например:

12 модулей - это одна комбинация.

Два по три и один на шесть - уже три комбинации.

Пять по одной, два по два и один на три - это максимум - 168 комбинаций.
0
quak3r22 июля 2009, 16:48
Я не считал, но полагал, что будет много :)
0
vitalykim23 июля 2009, 12:44
Посчитать было не так уж и трудно. Находятся все композиции числа колонок, а потом по каждой композиции считается количество комбинаций цифр в сумме.
0
vitalykim23 июля 2009, 15:46
Запутался в терминах :-). На самом деле то, что я подразумевал под композициями числа - это разбиения, а то, что под количеством комбинаций - это композиции.
0
Yevgeniy23 июля 2009, 11:27
Сетки это хорошо. Только не пойму, почему в данном примере, некоторые элементы остались вне сетки? Например, верхняя и нижняя граница красной плашки под «Женская обувь», кнопки прыгают. Сетки нужны обязательно, но использовать их нужно по-максимуму — привязывать все объекты как по вертикали так и по-горизонтали.
1
quak3r23 июля 2009, 11:36
На вебе горизонтальные привязки получается делать не всегда — блоки могут быть непрогнозируемо разной длинны. Здесь нам на помощь приходят одинаковые отступы до и после блоков.
0
Yevgeniy23 июля 2009, 12:48
вполне, да
0
belyalov23 июля 2009, 23:02
а давайте жить дружно :)
сетка, она и в Африке сетка. кому 5, кому 10, а кому 14!!!

Новые комменты

Облако меток

28
1
5
5
28
5
5