11 оформления на уебсайтове, които направиха блясък на съдържанието през 2017 г.

Защо хората наистина посещават уебсайтове? В повечето случаи основната причина за всяко посещение е съдържанието. Съдържанието е от първостепенно значение и всеки дизайнер иска да го представи по най-полезния и интуитивен начин. Тогава не е изненадващо, че изборът на оформление за вашето съдържание е едно от първите неща, които дизайнерите правят, когато стартират нов проект.

Много дизайнери смятат, че оформлението на всеки уебсайт, върху който работят, трябва да бъде напълно уникално, за да задоволи целите на проекта - това е далеч от истината. Ако посещавате популярни уебсайтове, ще забележите, че много от тях използват подобни оформления. Това не е случайност или е направено от мързел, а защото тези оформления имат три значителни предимства:

  • Те са годни за използване Честите оформления станаха толкова често срещани, защото доказаха, че потребителите могат да работят с тях.
  • Те са познати Доброто потребителско изживяване се създава чрез изграждане на усещане за познаване на потребителите. Посетителите изпитват приятно усещане за дежа-ву, когато видят познати функции, изложени така, както биха очаквали. В резултат на това хората ще отделят време за усвояване на съдържанието, а не да се фокусират върху уникалния дизайн на страницата.
  • Те спестяват пари. Използването на съществуващите модели е икономия на време. Дизайнерите ще прекарват по-малко време в експерименти с оформлението и ще се съсредоточат повече върху визуалната йерархия и други аспекти на дизайна, които имат пряко влияние върху потребителското изживяване.

Въпреки че всеки проект е уникален и изисква индивидуален подход, е полезно да сте запознати с общи оформления. В тази статия ще разгледаме 11 много често срещани оформления, които можете да намерите в безброй сайтове днес.

1. Единична колона.

Единичните оформления на колоните представят основното съдържание в една, вертикална колона. Този тип оформление е може би най-простият от този списък и е най-лесният за навигиране на потребителите. Посетителите просто превъртете надолу, за да видите повече съдържание.

Въпреки своята простота, оформлението на една колона е доста популярно сред много уебсайтове. Мобилната революция също оказа своето влияние върху популярността на този тип оформление - оформления на една колона пасват перфектно на мобилните екрани.

Кога да го използвате.

Това оформление намира приложение в много лични блогове, базирани на минималистични принципи на дизайна. Това е често срещано оформление за микроблози като Tumblr.

Medium, популярна блог платформа, използва този вид оформление, за да представи своите истории. Всички статии за Medium са представени в една колонна подредба.

Съвети за дизайн

  • Обмислете „лепкави“ менюта за дълги страници. Тъй като оформлението на една колона често се използва за страници с дълго превъртане, е важно навигацията да е винаги наглед. „Леката навигация“ ви помага да избегнете посетителите, които се нуждаят от превъртане до края на страницата, за да се придвижвате.
Източник на изображението: codemyui

2. Разделен екран

Разделеният екран (или един екран, разделен на две) е идеален за страница, която има две основни части от съдържание с еднакво значение. Тя позволява на дизайнерите да показват и двата продукта едновременно, като същевременно им обръща внимание.

Два централни елемента се показват едновременно. Източник на изображението: 62 модела

Кога да го използвате

Разделенията на екрана са перфектни, когато вашият сайт предлага две драстично различни варианти на пътуването на потребителя, като например два различни типа инструкции, както виждаме в примера Dropbox по-долу.

Разделените оформления на екрана също са идеални за контраст и затова дизайнерите често използват това оформление, за да поставят два елемента един срещу друг.

Противоположните характеристики на двойствеността (противоположни цветове). Източник на изображения: Персонализиране на Google Star Wars

Съвети за дизайн.

  • Избягвайте да използвате твърде много съдържание в разделени секции. Разделените дизайни на екрана не се разширяват добре, тъй като съдържанието нараства, така че е по-добре да избягвате избора на този тип оформление, ако трябва да предоставите много текстова или визуална информация в разделени секции.
  • Помислете за добавяне на анимация. Можете да създадете по-динамично изживяване, като включите анимирани детайли.
Източник на изображението: Чехов е жив

Асиметрията е липсата на равенство между две страни на оформлението. Асиметрията е отдавна любима техника в света на изкуствата и напоследък стана популярна сред уеб дизайнерите.

Много хора бъркат асиметрията с дисбаланса, но всъщност целта на асиметрията е да се създаде баланс, когато е невъзможно или не е желателно да се използва еднакво тегло за две секции. Използването на асиметрия дава възможност за създаване на напрежение и динамизъм, а асиметрията улеснява по-доброто поведение при сканиране, като фокусира вниманието на потребителя върху отделни обекти (фокусни точки). Променяйки ширината, мащаба и цвета на всяко асиметрично съдържание, дизайнерът призовава посетителя да остане визуално ангажиран.

Кога да го използвате.

Този тип оформление може да се използва, когато дизайнерите искат да създадат интересни и неочаквани оформления, като същевременно осигуряват насочен акцент. Подходящо приложената асиметрия може да създаде активно пространство, което да насочва окото от един елемент към друг, дори и през празнотата. Помислете как Dropbox ясно показва точки на фокус в примера по-долу.

Асиметрията прави началната страница на Dropbox да изглежда по-енергична.

Съвети за дизайн.

  • Уверете се, че съдържанието ви може да бъде представено в асиметрично оформление. Асиметричното оформление не е практично за всеки сайт. Вероятно работи най-добре за минималистични оформления.
  • Добавете фокус с цвят. Асиметрията се корени в идеята, че обект с повече визуална тежест първо ще привлече вниманието към него. Можете да използвате елементи с висок цветен контраст, за да добавите визуално тегло към конкретни части от дизайна.
Високият цветен контраст придава визуално тегло на конкретни части от дизайна. Източник на изображението: Култура PL

4. Решетка от карти.

Картите са страхотни контейнери за информация с възможност за кликване - - позволяват на дизайнерите да представят тежка доза информация по смилаем начин. Визуализациите с размер на хапки (обикновено изображение и кратко описание) помагат на посетителите да намерят съдържанието, което им харесва, и да се потопят в подробности, като щракнат или докоснат картата.

Най-важното за мрежа от карти е, че този тип оформление е почти безкрайно манипулируем. Мрежите могат да варират по размер, разстояние и брой колони, а стилът на картите може да варира в зависимост от размера на екрана (картите могат да бъдат пренаредени, за да се поберат на всеки екран). Ето защо решетките с карти работят толкова добре с отзивчив дизайн.

Кога да го използвате.

Решението на подредбата на картите е подходящо за сайтове с тежки съдържание, които показват много елементи с еднаква йерархия.

YouTube има строго разположение на мрежата; правите редове карти се групират в категории.Всеки щифт на дъската на Pinterest е представен като карта.

Съвети за дизайн.

  • Направете цялата карта с възможност за кликване, а не само конкретни части. Потребителското взаимодействие с карта е много по-удобно, когато потребителите не трябва да кликват точно върху заглавието или изображението на картата, за да получат достъп до подробности за съдържанието.
  • Ако вашата карта съдържа изображение, помислете как ще изглежда на по-малък екран. Изображение, което не се мащабира добре и става нечетливо на малките екрани, създава лошо потребителско изживяване.
  • Обърнете внимание на бялото пространство между картите, защото това влияе върху това как посетителите разглеждат. Повече пространство между картите прави сърфирането по-бавно, но посетителите ще обърнат повече внимание на всяка карта. Минималното пространство позволява бързо сканиране, но също така увеличава рисковете, които посетителите могат да пренебрегнат дадено съдържание.
  • Възможно е да се включи анимирана обратна връзка. Картата ще се появи като кликващ елемент.
Smashing Magazine има страхотна анимирана обратна връзка за своите карти.

Това е може би най-сложното оформление, споменато в тази публикация. Както подсказва името, първоначално това оформление беше популяризирано от вестници и списания, които имаха проблем да представят огромни количества информация на читателя по лесен за следване начин. Дизайнерите на печат използваха мрежовата система за тази цел. Оформлението е изградено с помощта на модулна решетка, която позволява гъвкавост - оформлението в много колони използва различна визуална тежест, за да даде приоритет на информацията.

Оформлението на списанието позволява на читателите да сканират, четат. и да разберете страница бързо. Източник на изображението: New York Times

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

Кога да го използвате.

Оформлението на списанието е добър избор за публикации, които имат сложна йерархия с голямо количество съдържание на страница. Без ефективното използване на решетка е вероятно цялото съдържание на началната страница да изглежда по-затрупано и по-малко организирано.

Оформление в списание е най-подходящо за новинарски сайтове, които имат много редовно актуализирано съдържание в множество категории.

Съвети за дизайн.

  • Това оформление подчертава заглавията и изображенията. Размерът на заглавието / изображението е пряко свързан с вниманието, което командва. По-изявените елементи привличат фокуса на потребителя по-бързо от по-малко изявения. Вземете например New York Times - най-важното съдържание на страницата има по-големи миниатюри, по-големи заглавия и по-подробен текст.
New York Times използва различен размер за текст, за да създаде чувство за важност - размерите на текста варират, за да създадат визуална йерархия.
  • Поставянето на решетка изисква внимание както на хоризонталния, така и на вертикалния ритми и те са еднакво важни, ако искате да създадете добро оформление. Помислете за разликата между следващите примери. В първия пример решетката е в съответствие с ширината на колоните и хоризонталното разстояние, но разнообразното вертикално разстояние създава визуален шум. Във втория случай хоризонталното разстояние между колоните и вертикалното разстояние между елементите са последователни и това прави цялостната структура да изглежда по-чиста и удобна за потребителя, който визуално консумира съдържанието.

6. Кутии.

Това оформление има голяма кутия с ширина на заглавието и няколко по-малки кутии, които всяка от тях заемат част от екранните имоти на по-голямата кутия. Броят на по-малките кутии може да варира от две до пет. Всяка от кутиите може да бъде връзка, която води до по-голяма, по-сложна страница.

Кога да го използвате.

Това е доста универсално оформление, което може да се използва както за отделни сайтове, подобни на портфолио, така и за корпоративни / електронни сайтове за електронна търговия.

Източник на изображението: mrporter

Съвети за дизайн.

  • Свържете кутии, за да разкажете история. Голямата кутия може да се използва за представяне на продукти, докато по-малките кутии могат да предлагат допълнителна информация за продукта.
Източник на изображението: Microsoft Surface

Навигацията е критична част от всеки уебсайт - основното меню е първото нещо, което повечето потребители търсят, когато искат да навигират. Наред с хоризонталната навигация в горната част е възможно да се запазят опциите на менюто, като се поставят във фиксирана странична лента. Страничната лента е вертикална колона в лявата или дясната част на страницата. За това оформление страничната лента остава неподвижна и винаги остава видима, докато останалата част от страницата се променя, докато потребителите превъртат страницата надолу. По този начин навигацията остава достъпна.

Кога да го използвате.

Това оформление работи добре за уебсайтове със сравнително ограничен брой опции за навигация. За предпочитане е всички опции да се виждат, когато потребителят влезе в страницата.

Източник на изображението: mereponte

Съвети за дизайн.

  • Страничните ленти могат да съдържат и съдържание, различно от или в допълнение към меню, като например връзки в социалните медии, информация за контакт или всичко друго, което искате посетителите да намерят лесно.
Trefecta предоставя опции за промяна на езика и споделяне на страници в страничната лента.

Това оформление се основава на идеята, че използването на изображения в дизайна е най-бързият начин за продажба на продукт. Изображенията имат възможност да създадат емоционална връзка с посетителите - голяма, смела снимка или илюстрация на обект прави силно изявление и създава зашеметяващо първо впечатление.

Кога да го използвате.

Това оформление е чудесно, когато трябва да демонстрирате само един продукт / услуга и да насочите цялото внимание на потребителя към него.

Липсата на други елементи в това оформление насочват изцяло вниманието на потребителя към продукта.

С помощта на този тип оформление е възможно да се изгради наистина потапящо, емоционално изживяване. Един чудесен пример е Видът на парчета, който предлага богато преживяване и повишава осведомеността за застрашените видове.

Източник на изображения: видове на парчета

Съвети за дизайн.

  • Уверете се, че графиката ви е достатъчно добра, за да бъде представена на видно място. Изображението, снимката или илюстрацията трябва да са както подходящи за съобщението, което искате да изпратите, така и висококачествени.
  • Помислете за типография. Типографията придружава образа. Размер, тегло на шрифта и цвят са всички свойства на шрифт, които трябва да се използват за подсилване на дизайна.

9. Оформление с F-образна форма.

Този тип оформление е създаден въз основа на начина, по който потребителите четат съдържание в мрежата. F-образният модел на сканиране, първоначално дефиниран от NNGroup, гласи, че потребителите обикновено сканират тежки блокове от съдържание по образец, който прилича на буквата F или E. Очите ни започват в горния десен ъгъл на страницата, сканират хоризонтално, след това падаме на следващия ред и правим същото отново и отново, докато не намерим нещо, което да привлече вниманието ни (интересно съдържание). Този модел на сканиране е подходящ не само за настолни потребители, но и за мобилни потребители.

Кога да го използвате.

Това оформление е добро за страници, които трябва да представят много различни опции и позволяват на потребителите да ги сканират бързо. Посетителите ще реагират по-добре на F-шаблона, който имитира естествения модел на сканиране. Това е полезно за начална страница или страница с новини, съдържаща резултати от търсенето.

New Yorker използва оформление във формата на F на началната си страница.

Съвети за дизайн.

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

10. Оформление с Z-образна форма.

Разположението на Z-образа също имитира естествените навици за сканиране. Посетителите на сайта (от западните култури) започват в горния ляв ъгъл. Те сканират от горе вляво до горе вдясно, образувайки хоризонтална линия. Следващата стъпка обаче е малко по-различна - вместо да се спускат директно надолу, както при F-образния модел, очите им се скитат надолу и от лявата страна на страницата, създавайки диагонална линия. И накрая, погледът отново вдясно, образувайки втора хоризонтална линия.

Кога да го използвате.

Докато F-образецът е по-добър за сканиране на много съдържание, Z-моделът е по-подходящ за сайтове с единствена цел и по-малко съдържание. Този модел е ефективен за насочване на вниманието на потребителя към конкретни точки чрез използване на добре поставени визуализации, текст и CTA.

Това оформление е чудесно, когато сайтът има конкретна програма или призив за действие, с който потребителите трябва да взаимодействат. Източник на изображението: Basecamp

Съвети за дизайн.

  • Ангажирайте потребителите със зигзаг (или продължителен Z-образец). Възможно е да ангажирате потребителите в сканирането, като редувате текст и изображения няколко пъти, за да създадете зигзаг.
Zig-zag модел е Z-образец, повтарян няколко пъти на една и съща страница. Zig-zags създават ритъм, който поддържа интереса на посетителите. Източник на изображението: Evernote

Основният елемент на това оформление е една голяма снимка, която се използва като фон за страницата. Използва се за запознаване на посетителите със съдържанието на сайта. Това оформление има възможност за създаване на силно първо впечатление и насърчава взаимодействието на потребителите.

Кога да го използвате.

Това оформление е чудесно, когато искате да кажете по-малко и да покажете повече.

Източник на изображения: Търсене на Сирия

Съвети за дизайн.

  • Изберете внимателно фоновото изображение. Тъй като оформлението се основава на едно единствено изображение, е важно да изберете правилното. Нерелевантното изображение може лесно да обърка посетителите.
  • Използвайте видеоклипове вместо изображения, за да ангажирате посетителите. Може да си струва да използвате видео вместо снимка, особено когато трябва да демонстрирате нещо в действие.
Видеото ви дава по-добра възможност да ангажирате посетителите си върху статично изображение. Източник на изображението: Tesla
  • Не позволявайте на дизайна да намали четливостта. Текстът, който използвате като наслагване върху изображението, трябва да е достатъчно контрастен, за да бъде четим. Ако текстът не е достатъчно контрастен, помислете за добавяне на наслагване към изображението.
Източник на изображението: Google Wallet

Когато проектирате сайт, важно е да запомните, че съдържанието винаги е крал. Основната цел на уебсайта остава публикуването на лесно смилаемо съдържание. Сред много вариации на съдържанието е важно да изберете този, който прави съдържанието ви блестящо.

Първоначално публикуван на theblog.adobe.com на 13 декември 2017 г.