Часто творческие и по-настоящему замечательный дизайн solutions остаться неизвестным, потому что мы, дизайнеры, просто игнорировать их.

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

Как вы know, мы в Smashing Magazine, весьма любопытно люди.Мы действительно заинтересованы в необычных подходов к проектированию и творческих решений.Поэтому мы регулярно ищем их, и как только мы нашли их, мы анализируем их, попытаться понять их и попытаться выяснить, как преимущества, так и недостатки техники мы не нашли.И в этой статье мы хотим поделиться некоторыми из них с you.

Мы хотели бы начать с 5 передовые элегантные кодирования solutions и спросить вас, если вы заинтересованы в этой серии, и хотел бы иметь больше аналогичных изделий.Пожалуйста, сообщите нам, что вы думаете в комментариях к этому посту.Теперь let’ с погружением в которой Вы, вероятно, следует иметь некоторые CSS-знание еще до начала читать эту article.

1.Раздвижные вертикальной навигации overlay

За последние годы мы обнаружили сильную тенденцию к скользящим горизонтальным меню (также известный как Coda Slider effect).В частности, они часто используются в корпоративных проектов, где продукт и его особенности, как предполагается, имеют доминирующее положение на дизайн-макет. Kobe использует аналогичную еще другой подход.

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

Все содержимое блоков не загружаются по требованию с помощью Ajax, но загружены front при загрузке страницы.Все содержание блоки будут загружены в самом начале.Несмотря на странице, кажется, анимированные, Flash используется редко — существу, дизайн чистом CSS JavaScript-решение.Основной проблемойДизайн, однако, что it’ просто невозможно перемещаться по сайту, если JavaScript выключен.На самом деле, вариантов навигации не видно вообще.Как профессионал, вы должны всегда держать постепенной деградации в mind.

Как это делается?Для основной горизонтальной навигации в верхней части сайта, Кобе использовать CSS sprites.Все навигационные параметры упакованы в одно изображение, отображаемое кусок спрайт выбирается через background-position атрибута, как обычно.Спрайт само по себе является прозрачным GIF ( here есть файл)..Положение анимированные искры определяется с помощью JavaScript — В зависимости от выбранной опции навигации и использования абсолютного positioning.

Области основного содержания состоит из фонового изображения и наложения слоя, который отображает информацию и (иногда) дополнительные возможности навигации.Все наложения слоев (для всех вариантов навигации) загружаются вместе с главной страницы и не отображается, если соответствующая опция навигации выбран.Скольжение создается с SlidePanel-компонента JQuery library.

наложение image является полупрозрачным и позиционируется абсолютно в рамках основного блока содержания на фоновое изображение (с помощью z-index-атрибут).Фоновое изображение для каждого раздела навигации определяется с помощью CSS для каждого наложения-layer.

Очень похожи наложения-подход используется, чтобы представить описание проекта в Иван Aleksić ‘ портфолио (см. выше).Вначале посетители видят только эскизы проектов до сих пор.Когда один из эскизов колебалась, дополнительная информация отображается в оверлей за миниатюру.Это наложение всегда использует пространство, которое ранее занимали завис миниатюры и тот под ним.Крошечные стрелки в правой части сайта всегда позволяет пользователям перейти к верхней части page.

2.Соседи navigation

EllisLab использует интересный подход к дизайну, чтобы представить членам его команды.Вместо перечисления каждого из них один за другим, с небольшими миниатюрами и краткое описание, они используют простые, но интуитивно первичного и вторичного меню навигации размещены рядом друг с other.И чтобы убедиться, что посетители убеждены, что команда принимает свою работу очень серьезно, вполне эзотерических мультфильмы дополнительно размещаемых рядом с menus.

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

Вся территория содержанию делится на две основные части — основной навигации слева, и содержание блока справа.Последний содержит второй навигации и суб-зона для описания на правой руке на стороне (см. скриншот ниже).Фонового изображения для блока содержимого определяется с помощью CSS и применяются с помощью идентификаторов. полупрозрачный фон image используется для описания блок на правой стороне блока содержимого.Остальные чистый CSS и (X) HTML.Простые, но элегантные solution.

3.Группа block

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

Обратите внимание, что различные услуги, выделяются по-разному — дизайнеры используют как ссылку цвета и значки точно общаться ссылки на внешние услуги.Обычно it’ ы не лучшее решение использовать несколько цветов ссылку для аналогичных задач, но в этом случае он работает довольно well.

Все “ social” данные скрыты в panel — Вероятно, чтобы не загромождать дизайн с яркими символами и значки, которые просто не вписываются в первоначальный проект.Эта конструкция подход имеет преимущество, предлагая чистый макет и недостаток скрывается вторичном возможности навигации.Компромисс, как всегда, designer’ с решение, но в данном случае оба варианта, вероятно, работают одинаково well.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров