Шаблонов: 22,032     Фрилансеров: 2,630     Веб-студий: 199
Статьи Новости Реклама на сайте Форум
Помогаем продавать
и покупать готовый дизайн
Каталог шаблонов Каталог продавцов Продающие страницы Подписка на новые шаблоны

Оригинальные приемы для дизайна одностраничных сайтов

12 февраля 2013     Комментарии
Оригинальные приемы для дизайна одностраничных сайтов

Последние несколько лет в области веб-дизайна появляются новые тенденции. Одна из них - размещение основного контента на одной странице и использование динамических скроллинг-анимаций для отдельных разделов сайта. Разметки такого типа часто применяют для целевых страниц и мобильных приложений, которые содержат небольшой объем информации.

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

 

 

Эффект параллакс-скроллинга

Параллакс-скроллинг по-прежнему воспринимается дизайнерами как довольно новый прием, возможно, из-за трудностей при его создании. Я видел десятки классных примеров, но Pixel Stadium действительно выделяется на общем фоне. Это сайт с простой навигацией и просто невероятными текстурами.

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

 

Целевые страницы для мобильных приложений

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

Минималистичный сайт Infomatic App служит не только для представления информации, но и для стимулирования продаж – одностраничный сайт с этим отлично справляется.

 

Скрытые строки навигации

Для экономии пространства на экране существует разметка с дополнительными скроллинг-строками, которые появляются только при прокрутке страницы вниз. Их называют скрытыми, поскольку они заметны лишь тогда, когда верхняя строка навигации становится вне зоны видимости. Веб-сайт для Radiologie прекрасно демонстрирует эту технику.

Всегда хорошо смотрится, если строка навигации сочетается с темой сайта. Но поскольку она не меняется на странице, теоретически вы можете использовать разные стили дизайна. Один из удачных примеров можно увидеть на Rule of Three.

 

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

 

Динамические анимации

Процесс создания собственной динамической анимации на странице бывает утомительным. Я не рекомендую этот путь новичкам в работе с JavaScript, но в то же время так вы сможете приобрести полезный навык. Для примера, сайт FK-Agency.

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

 

Горизонтальные скользящие панели

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

Numidia – один из сайтов, который меня поразил. Значки навигации справа вверху на самом деле создают эффект горизонтального слайдинга. Благодаря jQuery эти коды применимы для всех основных браузеров.

 

Галерея примеров для вдохновения

Эта галерея – коллекция различных одностраничных сайтов, достойных вашего внимания. Отметьте для себя разные приемы для создания пользовательского интерфейса.

 

Teamgeek

 

Funny Faces Camera

 

Dash Creative

creative designs gallery icons dash agency portfolio

 

Code to Live By

coding website single page scrolling layout

 

 

Kinderfotografie

german photography website single page layout

 

 

Lost Phone Experiment

parallax website sliding scrolling content webdesign

 

 

Marketing Facts

html5 info webpage single layout design

 

State of the Economy

state survey united states economy facts

 

Touch Gesture Icons

mobile touch icons website scrolling

 

Pipeline

pipeline website single page static top toolbar

 

 

 

Laymon

laymon cooking website parallax scrolling design interface

 

AxiaCore

django development projects freelance business axiacore

 

Ideakites

iphone android ios app development studio website agency

 

Jmore Design

jmore design website layout interface inspiration single-page

 

ngage

fixed ngage scrolling website layout design

 

M.dot App

mdot studio website design single page website

 

Creative9

space design website infinite scrolling singlepage

 

Mirrool Creek Lamb

 

Startup Giraffe

 

Rate Us

 

Mitchell ME

mitchell portfolio mechanical electrical contractors website

 

Accueil

basic website layout beige tan traveling

 

Источник: webdesignledger.com
Автор: Jake Rocheleau

Комментарии (0)

Комментариев пока нет. Вы будете первым!

Как продать дизайн?

Наши и другие рекомендации по разработке дизайна и дальнейшей публикации на сайте
Продаём фирменный стиль. Основные аспекты. Хочу продать логотип. Как это сделать? Как продать дизайн сайта
 
Место сдаётся
1$ за 1000 показов
20$ в неделю
1000x90
Advertising


Вход в кабинет