Одностраничный сайт для Вашего портфолио


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

Скроллинг. Новые идеи.

Существует много ресурсов, в которых контент, помещается на единственной странице. Очень популярным решением является разграничение её на отдельные блоки, расположенные горизонтально. При пролистывании (скроллинге) такой страницы, по мере ознакомления посетителя с нужными сведениями, меняется её фон, оттенки цветов, которыми оформлены блоки и другие элементы.
Эту идею можно развить дальше. Создать скроллинг, который будет равен области целого экрана. Персональная веб-площадка Zack Batsaikhan – показательный пример такого решения. Единственным поворотом колесика «мыши», можно переместиться на один экран. Также на данном сайте можно воспользоваться клавиатурными стрелками для осуществления навигации, поэтому «мышь» применять не обязательно. Еще один прекрасный пример таких сайтов – проекты Jeya Karthika, известного веб-дизайнера. Они идеальны для мобильных устройств. Любой блок либо секция его сайта отличается собственным фоном, что очень удобно для просмотров ресурса с помощью таких гаджетов.

На одном экране можно применять не только стрелки, позволяющие передвигать его вверх либо вниз, но и перемещать справа налево и наоборот. Это делается при использовании плагина jQuery, или самостоятельно, если имеются знания в JavaScript. Главное, иметь соответствующие умения и грамотно подойти к решению такого вопроса.

Адаптивный дизайн.

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

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


Если сравнить его с иным проектом Dennis Field, можно увидеть много похожих элементов. Контент на сайте этого дизайнера разделяется на блоки, располагающиеся горизонтально. Они также подстраиваются под размер браузера. При этом, когда главное меню прокручивается вниз, оно сменяется иным блоком. Он фиксируется на мониторе и перемещается по мере движения. Но на миниатюрных экранах данное меню не отражается, при этом навигация на этом ресурсе абсолютно не ухудшается. Также web design использует и иные адаптивные решения, которые можно эффективно применять в собственном сайте. К примеру, складывающиеся фото галереи и изображения, подстраивающие свои параметры под величину экрана, если она оказывается меньшей, чем обычно. Надо также учесть величину шрифта, а также просчитать размеры экрана, при осуществлении каких-либо действий.

Всевозможные эффекты и различная анимация.

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

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

Особенности навигации, появляющейся и спрятанной.

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

Так зачем надо осуществлять скрытие навигации? Рассмотрим этот вопрос на примере ресурса Clint Forrester’а. Прежде всего, это экономия пространства, когда меню убирается. Посетители вполне могут дойти до необходимых мест ресурса. В данном случае, меню не столь актуально, как для традиционных сайтов.

Если нет желания создавать громоздкое меню, то в качестве примера, можно глянуть ресурс James McGill. На этом сайте портфолио иконка меню открывает более компактную колонку, чем в других вариантах подобных веб-площадок, при этом она в любой момент доступна посетителям. Как уже было сказано ранее, весь контент расположен на единственной странице, поэтому значение данной детали навигации во многом утрачивает свою актуальность. Но в такое меню можно добавлять ссылочную массу на иные ресурсы, если это нужно.

Минимализм.

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

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

Ресурс Alicia Harris, содержащий портфолио данного специалиста, отлично применяет основы минимализма. На нем имеются красочные навигационные иконки в верхней правой зоне, а веб-дизайн оформлен в разнообразных цветовых оттенках. Также этот сайт одностраничник имеет много свободного места, а все нужные сведения отлично читаются. Gabe Abadilla создал для себя более подробное портфолио. Этот дизайнер применил на собственном ресурсе фиксированное меню-шапку с логотипом, а также предоставляет множество изображений на странице. Но надо понимать, что портфолио, прежде всего, должно не быть простым и не представлять собой обычную презентацию творений дизайнера. Его главная задача – заинтересовать будущего клиента. Иная информация, которой располагает одностраничный сайт, тоже важна, но не является первоочередной. Поэтому, когда осуществляется адаптивная верстка веб-площадки, надо учесть все эти советы. Задача дизайнера – доказать свои отличные навыки специалиста, предоставив информацию наилучшим образом. Лучше не сильно концентрироваться на текстовом контенте, надо стремиться к минималистской концепции ресурса, и помнить обо всех тонкостях такого процесса как адаптивная верстка.
10 2016, 11:50    Стас Web-дизайн 0    8 0

comments (0)

    ticket_comment_err_no_auth