Плитка в веб-дизайне

http://berndkammerer.com/

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

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

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


Наглядная демонстрация этого – сайт Эрика Мариновича. В данном случае все элементы имеют одинаковый размер, поэтому было не слишком сложно использовать CSS для выкладывания их плиткой, чтобы приспособить к экрану вашего устройства. Откройте сайт в браузере, а затем измените размер его окна – увидите, что произойдет в результате этого.

Другим сайтом, который следует данному примеру, но не с такой простотой, является веб-ресурс Бернда Каммерера (Bernd Kammerer). Здесь «Плитки» различаются по размеру, и вы можете применять фильтр к элементам в зависимости от того, какие хотите увидеть. Перед созданием сайта такого типа потребуется уделить больше времени планированию.

Например, вы, скорее всего, решите сначала смоделировать нечто подобное, а затем выработать основные направления дизайна для проекта, которых впоследствии должен придерживаться занятый в нем дизайнер, особенно ввиду того, что в его основе будет лежать jQuеrу-плагин под названием vGrid, который берет на себя значительную часть работы (однако предусматривает собственный набор ограничений (http://blog.xlune.com/2009/09/vgrid/).

Еще одним примером, который мне особенно нравится, является сайт Skive Festival. Опять- таки он позволяет фильтровать содержимое в зависимости от представляющей для вас интерес области. На нем мне нравится, как функциональность помогает пройти на подстраницы. Благодаря этому повышается вероятность, что люди смогут разобраться, как перемещаться по сайту, – подобная хорошая оснащенность помогает осознать его пользу. В данном случае был использован другой jQuеrу-плагин — isotope.

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

Задумайтесь, к примеру, что плагин isotope, примененный при создании сайта Skive Festival, состоит примерно из 700 строк JavaScript-кoдa. Экономия времени и удобство действия в рамках предлагаемого подобными инструментами очевидны.

erikmarinovich.com
erikmarinovich.com

pier2pier.co.za
pier2pier.co.za

http://berndkammerer.com/
http://berndkammerer.com/

Еще рекомендую посетить торрент трекер и скачать интересную литературу по дизайну, ну и соответственно иногда там можно поискать торрент игры.

fiaschi.org
fiaschi.org

premiere.fr/35ans
premiere.fr/35ans