Архив тега: Навигация и меню

На странице собраны все публикации по тегу «Навигация и меню».

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на: Эфекты для кнопок и ссылок. Hover в изображениях. CSS библиотеки (подключаются отдельно). Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов. Hover эффект в […]

комментариев 6

Все про хедер (шапку сайта): назначение, дизайн и проектирование

Как известно, не существует второго шанса произвести первое впечатление. В сфере цифрового дизайна эта истина подкрепляется высокой конкуренцией и широким разнообразием имеющихся решений. Причем, вполне очевидно, что при создании первого впечатления некоторые части веб-страницы являются более важными нежели остальные, например, header для сайта (шапка сайта). Сегодня рассмотрим все нюансы, которые касаются данного термина: Что это и какие элементы включает. Почему хедер важен для вас? Проектирование и варианты реализации. Заметка является переводом статьи с uxplanet, за нее авторам большое спасибо.  Что такое хедер сайта? […]

комментариев 5

Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов

Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится. Данный элемент был разработан почти 30 лет назад Нормом Коксом. Он идеально подходит для мобильных версий сайтов и всех проектов, где навигация не […]

комментария 3

Бесконечная прокрутка страниц: помогает или вредит?

Когда идет речь об онлайн-маркетинге или веб-дизайне, чрезвычайно важно быть инициатором успешных идей и формировать тренды в собственной сфере. Сегодня речь пойдет об одной из подобных тенденций — бесконечном скроллинге (прокрутке) страниц на сайте: какие возможности он представляет для бизнеса? как лучше реализовать и когда следует отказаться от этой функции? Материал написан на основе перевода статьи про Infinite Scrolling от SpeckyBoy. Основные разделы статьи: Что такое бесконечная прокрутка? Основные возможности (плюсы). Почему ее следует избегать. Советы по внедрению. Поколение двухтысячных известно своей […]

комментария 3

Гамбургер-меню: немного истории и альтернативные варианты

Продолжаем обсуждать тему навигации в веб-проектах. После рассмотрения примеров хлебных крошек решили сегодня поговорить о так называемом гамбургер-меню. Было время, когда этот элемент привнес свежесть и новизну в пользовательские интерфейсы на мобильных устройствах. Данная иконка стала не только неотъемлемой частью топовых мобильных приложений, но и начала активно использоваться в хедере сайтов (в адаптивных версиях и не только). Дошло до того, что меню стало появляться даже там, где это было совершенно неуместно. В итоге на кнопку гамбургер меню обрушилась критика, и бывший фаворит превратился […]

Нет комментариев

Примеры хлебных крошек для сайта

Хлебные крошки — навигационная цепочка, которая, как правило, показывает путь от главной страницы к текущей. Ее можно встретить на очень многих веб-проектах, хотя визуально она обычно не особо выделяется. Данный скромный элемент сайта выполняет важные функции: Помогает посетителю точно понять, в какой части сайта он находится; Упрощает переход к более высокому уровню структуры, выполняя роль меню; Может стимулировать просмотр других интересных для посетителя страниц; Создает внутреннюю перелинковку, которая помогает в индексировании. Предлагаем вам рассмотреть несколько вариантов оформления хлебных крошек (breadcrumbs […]

Нет комментариев

Эффективные методы сплит-скрин дизайна

Одним из наиболее заметных трендов веб-дизайна сайтов 2017 года можно назвать разделение экрана на две части. Все больше и больше веб-проектов используют подобный вариант макета, где две вертикальные панели расположены рядом друг с другом. Сплит-дизайн (Split Screen Design) следует очень простому правилу: один экран, два сообщения. Каждая сторона включает в себя отдельный элемент: фото, текстовый блок или иллюстрацию. Метод особенно хорошо подходит для случаев, когда нужно акцентировать чье-либо внимание сразу на двух вещах. Таким образом, посетитель может мгновенно выбрать между ними. Дизайн […]

комментария 2

Горизонтальное выпадающее меню на CSS + HTML

Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка стильных меню в PSD, а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто хочет изменить навигацию на своем сайте. В сети хватает разных туториалов по теме, можете с […]

1 комментарий

Способы навигации пользователей на сайте

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

комментария 2

PSD файлы красивых и стильных меню для сайта

Каждый сайт, по сути, состоит из нескольких важных и обязательных элементов, без которых сложно представить интернет страницу. Помнится, когда-то давно рассказывал нашему начинающему новому дизайнеру в студии, что же обязательно должно быть в шапке страницы сайта, как и зачем используется и т.п. Меню — безусловно один из ключевых моментов — без навигации обойтись крайне сложно. Те, кто рискует это сделать, получают весьма специфические, но не сильно «юзабельные» макеты. В общем, без меню сайт сложно представить, за сами реализации меню бывают разнообразны. […]

комментариев 15

12 потрясающих дизайнерских портфолио

Портфолио для дизайнера — одна из самых важных вещей. В нем специалист демонстрирует свои работы, навыки и умения, будь то иллюстрации, графические дизайны, анимация и т.п. По сути, портфолио — его визитная карточка, взглянув на которую сразу понимаешь уровень мастерства и желание или нежелание с ним работать. Предлагаю вам посмотреть 12 потрясающих портфолио (или точнее персональных сайтов) дизайнеров и дизайнерских агентств. Сделаны проекты очень классно, подчеркивая возможности каждого из авторов/компаний. 1. firtsborn 2. AKQA 3. AgencyNet 4. DHNN 5. Bowen […]

комментариев 12