Аккордион

Аккордион (accordion) – по своему названию созвучен со всеми известным музыкальным клавишным инструментом. Данный плагин позволяет сделать выбранные элементы в графическом интерфейсе. Чаще всего это используется для красивого и практичного отображения текстовой информации на сайте. С помощью него можно задать отображение на странице лишь заголовков интересующей посетителя информации, и если он захочет узнать подробнее о чём, что конкретно, то кликнув на нужный ему заголовок в раскрывающемся списке выпадает подробное описание данной категории.

Ниже вы можете увидеть данную функцию в действии:

Параллакс эффект

Параллакс (Parallax, в переводе с греческого - смена, чередование) – это изменение видимого положения объекта по отношению к удалённому фону, в зависимости от нахождения наблюдателя. Первоначально этот термин употреблялся для природных явлений, в астрономии и геодезии.

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

Читать далее

Эффекты с изображениями

Изображения с эффектами — достаточно интересный и привлекающий внимание ход. Ведь их применение может сделать ваш сайт более динамичным и живым.

С появлением jQuery, у веб-программистов появилась прекрасная возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash (которая сейчас не очень котируется, так как не поддерживается некоторыми браузерами и мобильными устройствами).

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

Читать далее

Аккордион

Аккордион (accordion) – по своему названию созвучен со всеми известным музыкальным клавишным инструментом. Данный плагин позволяет сделать выбранные элементы в графическом интерфейсе. Чаще всего это используется для красивого и практичного отображения текстовой информации на сайте. С помощью него можно задать отображение на странице лишь заголовков интересующей посетителя информации, и если он захочет узнать подробнее о чём, что конкретно, то кликнув на нужный ему заголовок в раскрывающемся списке выпадает подробное описание данной категории. Accordion позволяет удобно структурировать рабочее пространство на сайте и не загромождать его множеством информации.

Читать далее

Облако тегов

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

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

Читать далее

CSS Анимация

CSS анимацию или трансформацию используют для изменения вида, поворота и других преобразований элемента. Данный функционал похож на «Эффекты с изображениями», описанный в соседнем разделе, но в данном случае для достижения требуемых эффектов используются соответствующие настройки в обычных таблицах стилей (.css).

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

Читать далее

Фиксированное меню

В последнее время, как Вы могли заметить, на множестве сайтов используется так называемое фиксированное «плавающее» меню. Обычно это горизонтальное меню. Вообще, зафиксировать можно не любое меню: и горизонтальное, и вертикальное. Как это работает – при загрузке страницы меню находится в определённом месте страницы (например, под «шапкой»), а при прокрутке страницы оно фиксируется вверху окна браузера и не прокручивается, как остальное содержимое. Если же посетитель прокручивает страницу вверх и достигает начала страницы, меню возвращается на своё место.

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

Читать далее

Типографика

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

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

Читать далее

Адаптивность

С ростом мобильных телефонов и планшетов появилось такое понятие как «адаптивные сайты». Что это за сайты, и какие у них преимущества в сравнении с обычными сайтами?

Адаптивные сайты — это сайты, которые на разных устройствах отображаются по-разному, исходя их особенностей платформы устройства и диагонали экрана.

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

Читать далее