Дизайн на уебсайт с една страница: 10 съвета + идеи
Дизайн на уебсайтове за една страница на живо! Има нещо почти вълшебно в малките уебсайтове, които се поберат на една страница. Те могат да бъдат изящни, лесни за навигиране и да осигурят оптимално потребителско изживяване в затворено пространство.
Докато имаше време, когато се отклонихме от уебсайтове с една страница, потребителите отново ги прегръщат (благодаря, мобилни!) И вие също трябва.
Разглеждаме десет съвета, идеи, примери и предложения, които да помогнат да предизвикате вдъхновение за следващото ви произведение в уеб дизайна. Може да е точно подходящият момент да го опростите и да приемете стратегия за една страница!
Разгледайте дизайнерските ресурси
1. Помислете в „Страници“
Когато става въпрос за проектиране на единичен, превъртащ се дизайн на уебсайт, помислете за „страници“.
Всяко превъртане трябва да осигурява подобно на страниците изживяване, което се фокусира върху един елемент. Това създава ясно усещане за организация и поток за дизайна на уебсайта.
Cote прави това прекрасно със „страници“, които имат редуващи се светли и тъмни (или пълни снимки) раздели. Потребителят знае визуално, докато превърта, къде завършва един бит съдържание и започва следващото.
2. Навигация по времева линия за по-дълги страници
Когато става въпрос за уебсайтове с една страница, те не винаги са леки за съдържание. Някои от най-добрите дизайни на една страница са уеб сайтове с по-дълъг превъртане.
За тези проекти помислете за навигация на времевата линия, така че потребителите винаги да знаят къде се намират в потока на съдържанието. Улеснява проследяването къде се намирате и как да се върнете, ако има съдържание за преразглеждане.
UV Hero върши приятна работа с това с високо визуална времева линия, която показва всеки цвят в спектъра на видимата светлина, тъй като се отнася до съдържанието в дизайна. И най-добрата част? Можете да щракнете върху всеки цвят и да преминете към това съдържание.
3. Навигация на страница
Уебсайтовете с една страница не се нуждаят от липса на общи елементи на потребителски интерфейс като меню, въпреки че мнозина изглежда.
Все още можете да включите традиционно изглеждащо меню (то може да помогне на потребителския поток, както и за търсене). Разликата е, че връзките към менюто преминават към конкретни секции от дизайна на една страница. За потребители, които обичат да навигират по този начин, те дори няма да знаят, че сте създали този изящен трик.
Happy Tools изглежда като многостранен сайт, но всичко се съдържа в една страница. Менюто работи изключително добре и дава на потребителите възможности за навигация.
4. Направете го високо интерактивен
Ако искате потребителите да продължават да превъртат, интерактивните елементи могат да бъдат трикът, който насърчава това действие.
От видео до паралакс ефекти до докосвания на анимация или геймификация, интерактивността може да насърчи по-голямо движение и време на място. Това е особено вярно при дизайна на една страница.
Lobods има стил goofy с много интерактивност. Има анимации на курсора, плъзгащи и изскачащи елементи и превъртащ се текст. Всичко се събира по начин, който помага на потребителите да се движат през съдържанието с лекота. (Друг бонус с този дизайн? Той включва много място, така че фините движения и взаимодействия да се виждат по-лесно.)
5. Всичко на един екран
Ако нямате много съдържание, дизайнът на една страница, който е всичко на един екран, може да осигури приятно изживяване на потребителите.
Отнасяйте се към този уебсайт дизайн като към голям навигационен елемент с малко информация и след това връзки извън сайта или за връзка. Той може да работи добре за скорошни дизайни или прости страници за портфолио.
Sylvain Theyssens прави това за дизайна на своето портфолио. (Всъщност има две страници: сладка анимация „стил на скрийнсейвър“, която се превръща в основния дизайн с движение на мишката.) Страницата е проста, информативна и впечатляваща. Дизайнът с един екран ви дава всичко, което трябва да знаете, без да избягвате нищо допълнително.
6. Очаквайте скоро дизайн
Говорейки за скорошни уебсайтове, това е идеалното използване за дизайн на една страница.
В повечето случаи скорошните страници нямат много съдържание - може би са само лого и интро или информация за контакт. В повечето случаи това може да се побере добре на една страница и е ефективно използване на потребителското време, докато основният сайт излезе на живо.
Зеленият хамелеон прави точно това. Дизайнът на една = страница е особено приятен заради страхотната анимация и интересното използване на текст. Това създава усещане за очакване и предизвиква любопитство - точно това, на което се надявате в скорошна страница.
7. Бъди малко фънки
Уебсайтовете с една страница могат да бъдат отлична площадка, ако искате да опитате нещо малко по-различно или фънки. Необичаен дисплей работи добре с по-малки дизайни, тъй като не свършвате с прекаляването с „трика“.
Rou Hun Fan използва специален шрифт и фонова решетка, за да подчертае своята информация, портфолио и работа. Творческият дисплей и минималният стил са достатъчни, за да насърчат превъртането за кратко време, идеално за портфолио.
8. Дайте на потребителите нещо да правят
За да поддържате ангажираността и да поддържате интереса на потребителите към дизайна, дайте им много неща в уебсайта на една страница.
Един провал, който имат много от тези дизайни е, че те са просто дълги свитъци на информация. Разделете го с елементи с възможност за кликване, призиви за действие и неща за вършене. Тези елементи не само ще ви помогнат да разберете какво искат потребителите от дизайна (и ако отговарят на вашите предвидени цели), но и ще ви помогнат да поддържате взаимодействие за по-дълги периоди от време.
Plethora разчупва дълга страница за превъртане с много бутони в стил карта, за да резервирате туристически пакети. Всяко от тези взаимодействия с кликвания се отбелязва със стрелка, за да се създаде последователно потребителско изживяване.
9. Поддържайте го организиран
С цялото съдържание на уебсайт на една страница е лесно дизайнът да излезе от употреба. Но може да създаде и организирано платно за съдържание.
Когато става въпрос за работа с една страница, плътната мрежа и еднаквата структура могат да бъдат най-добрите ви инструменти. Използвайте ги, за да поддържате организирано и групирано съдържание по начин, лесен за потребителите да се ориентират и разбират.
Podcasts Repo прави това добре с перфектна мрежа от подкастове, от които да избирате. Сайтът е достатъчно гъвкав с тази мрежа и стил, за да се разрасне до толкова елементи от съдържанието, колкото е необходимо, без да се преуморява.
10. Използвайте Space Wisely
Едно от най-важните съображения за дизайн при по-дълъг превъртане или дизайн на една страница е използването на пространство. Съдържанието трябва да бъде разположено по такъв начин, че промените в съдържанието да са ясно установени, действията да бъдат идентифицирани и всичко да се чете лесно. (Не забравяйте, че прекаленото превъртане може да започне да предизвиква известна степен на напрежение в очите.)
Номенклатурата на цветовете на Werner е уебсайт с една страница с много съдържание. Сайтът всъщност е реплика на книга от 1821 г. Космосът прави тази дизайнерска работа.
Категориите и подсекциите с ясна решетка и изобилие от бяло пространство подобряват четенето и сканирането. Тук има много, но се чувства доста достъпно благодарение на използването на пространството навсякъде.
заключение
Дизайнът на уебсайт с една страница може да бъде просто нещото, от което се нуждаете, за да разбиете някои от по-тежките проекти, над които работите. Този стил може да работи за всичко - от скорошни сайтове до портфейли. Подходящ е за всеки уебсайт без тонове съдържание.
Имате ли готини дизайни на уебсайтове с една страница, които да покажете? Да ги видим. Споделете ги с нас в Twitter. Маркирайте @designshack и @carriecumins с връзка към тази публикация и ще ретуираме любимите си.
