Веб-дизайн – 31 августа 2016 - 103
Screenshot_6
Рей Симонов

Одностраничный сайт для портфолио – что может быть проще?

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

 О скроллинге

 

Бывая на сайтах графических дизайнеров и фотографов, вы, возможно, замечали своеобразные «блоки» — каждый со своим фоном и разделом меню. Разумеется, это позволяет продемонстрировать больше работ или идей, донести до пользователя больше визуальной информации и разнообразить сайт графически. Но вот глаз цепляют они – переходы между блоками. 
Чтобы не портить впечатление у гостя вашего лэндинга и не заставлять его проматывать блоки, сделайте на своем сайте фиксированную область скроллинга. И тогда каждый новый блок будет как бы «выпадать» на монитор, словно слайд. Это смотрится здорово и не нарушает целостность производимого впечатления. Особенно если блоки у вас совсем уж разноцветные. 
Здесь даже можно поэкспериментировать – сделать пролистывание управляемым не только с помощью мыши, но и с помощью клавиш. Не забудьте также о возможности горизонтального скроллинга – и тогда ваш сайт будет напоминать книгу или альбом. В этом вам поможет полезный плагин jOuery, ну или JavaScript, если вы, конечно, в нем разбираетесь. 

 Об адаптивном дизайне

 

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

Фон и контент должны легко подстраиваться под любую диагональ – в этом суть «отзычивого», лояльного к пользователю интерфейса. Поэтому они должны быть простыми и контрастными. Тщательно проработанные крупные детали и рисунки, а также профессиональные фото с минимумом деталей будут эффектно смотреться на любом мониторе. 

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

 Об эффектах: простых и анимированных 

 

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

 О скрытой навигации 

 

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

 О том, что все гениальное просто 

 

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

Вот такие пять теорем для одностраничных сайтов.

Рассказать друзьям
Подписаться на еженедельную рассылку
  • Ксения Кондаурова

    Действительно очень помогает и времени не так много занимает,чтобы это сделать. Спасибо за информацию.

  • Alexandr Artamonov

    В своё портфолио стараюсь сделать как можно больше различных фишек, чтобы заказчик видел мои возможности.

  • Кристина

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