Hvernig lítur nútímaleg vefsíða út?

Nútímaleg vefsíða er hröð, læsileg og laus við óþarfa. Hún byggir á stóru og skýru letri, ríkulegu rými milli efnisþátta, fínlegri hreyfingu sem þjónar tilgangi og uppsetningu sem virkar fyrst og fremst í símanum. Útlitið eitt og sér gerir vef þó ekki nútímalegan; það sem gerist undir húddinu, hraðinn, aðgengið og sýnileikinn í leitarvélum og gervigreind, skiptir jafn miklu máli.

Hjá Flóru hönnum við og smíðum vefi í Framer alla daga og sjáum sama mynstur aftur og aftur: vefir sem eldast vel eiga þessa eiginleika sameiginlega. Hér er farið yfir hvern þeirra og hvernig þú getur borið eigin vef saman við þá.

Rými er sterkasta einkennið

Fyrsta sem þú tekur eftir á nútímalegum vef er hvað hann andar. Efnisþættir fá pláss, textadálkar eru hóflega breiðir og hver skjámynd hefur eina skýra áherslu í stað þess að keppa um athygli notandans með tíu hlutum í einu. Þetta er engin tilviljun. Rýmið stýrir augnaráðinu, gerir efnið læsilegra og lætur vörumerkið virka yfirvegað og traust.

Gamaldags vefir þekkjast oft á hinu gagnstæða: þéttar efnisblokkir, borðar, hliðarstikur og þrjú mismunandi köll til aðgerða á sama skjá. Ef þér finnst vefurinn þinn "fullur" er rýmið líklega fyrsta atriðið til að laga. Við skrifuðum sérstaka grein um white space í vefhönnun fyrir þau sem vilja kafa dýpra í þetta.

Stórt letur og fá leturafbrigði

Týpógrafía ber nútímalegan vef uppi. Fyrirsagnir eru stórar, oft mun stærri en fólk þorði að nota fyrir fimm árum, og meginmál er 16 til 20 punktar með góðu línubili. Leturgerðir eru fáar, gjarnan ein til tvær, og þær eru valdar af kostgæfni frekar en að hlaða inn fjórum fjölskyldum sem hægja á vefnum.

Íslenskan setur hér auka kröfu: leturgerðin þarf að styðja séríslenska stafi eins og þ, ð og æ almennilega. Það sést strax á vef þegar íslensku stafirnir koma úr öðru letri en restin af textanum. Þetta er smáatriði sem skilur að vandaðan vef og fljótaskrift.

Hreyfing sem þjónar tilgangi

Fínleg hreyfihönnun er orðin sjálfsagður hluti af nútímalegum vef. Efni birtist mjúklega þegar skrunað er, hnappar svara snertingu og millifærslur milli síðna eru fljótandi frekar en snöggar. Framer hefur gert þessa tegund hönnunar aðgengilega án þess að forritari þurfi að handsmíða hverja einustu hreyfingu, og það er ein af ástæðunum fyrir því að Flóra valdi Framer sem aðalverkfæri.

Reglan er samt einföld: hreyfing á að styðja upplifunina, ekki stela senunni. Skrunhreyfingar sem tefja notandann eða effektar sem keyra á fullu um alla síðu eldast illa og bitna á hraða. Litlu viðbrögðin, oft kölluð micro-interactions, gera meira gagn en stórar sýningar. Um þau fjöllum við nánar í greininni um micro-interactions í vefhönnun.

Síminn er aðalskjárinn

Meirihluti heimsókna á flesta íslenska vefi kemur úr síma. Nútímaleg vefsíða er þess vegna hönnuð fyrir símann fyrst og skjáborðið svo, ekki öfugt. Það þýðir stóra snertifleti, hnappa sem auðvelt er að hitta á með þumli, valmynd sem virkar með annarri hendi og myndir sem hlaðast í réttri stærð fyrir tækið.

Prófaðu eigin vef í símanum með þetta í huga. Ef þú þarft að klípa til að stækka texta, ef hnappar lenda undir þumalputtasvæðinu eða ef valmyndin krefst nákvæmni skurðlæknis, þá er vefurinn ekki hannaður fyrir símann heldur aðeins pressaður niður í hann.

Hraðinn er hluti af útlitinu

Notandi upplifir hægan vef sem gamaldags vef, alveg óháð því hvernig hann lítur út á skjáskoti. Nútímalegur vefur hleðst á innan við tveimur til þremur sekúndum, myndir eru þjappaðar í nútímaleg snið eins og WebP eða AVIF og ekkert hleðst sem síðan notar ekki. Google mælir þetta með Core Web Vitals og niðurstaðan hefur bein áhrif á hvar vefurinn birtist í leitarniðurstöðum.

Hraði er líka ástæðan fyrir því að margir nýir íslenskir vefir eru byggðir í kerfum eins og Framer frekar en í þungum eldri vefumsjónarkerfum. Grunnurinn skilar hraðanum sjálfkrafa í stað þess að hann þurfi að sækja með sérlausnum eftir á.

Sýnilegur fyrir fólk, leitarvélar og gervigreind

Nútímaleg vefsíða er skrifuð og uppbyggð þannig að hún svari raunverulegum spurningum. Skýrar fyrirsagnir, beint mál og efni sem kemst að kjarnanum strax virka fyrir notandann, fyrir Google og fyrir gervigreindarþjónustur eins og ChatGPT sem sækja í vel uppbyggt efni þegar þær svara fólki. Þetta er kallað AEO og er orðið jafn sjálfsagður hluti af vefsíðugerð og hefðbundin leitarvélabestun. Við höfum skrifað um hvernig þú gerir vefinn þinn sýnilegan fyrir ChatGPT ef þú vilt skoða það nánar.

Aðgengi fléttast inn í þetta sama. Nægileg litaskil milli texta og bakgrunns, textalýsingar á myndum og skipulag sem virkar með lyklaborði eru orðin lagaleg krafa fyrir marga vefi og sjálfsögð fagmennska fyrir alla hina.

Hvernig lítur þetta út í praxís á Íslandi?

Bestu íslensku vefirnir í dag sameina allt ofangreint: djarfa týpógrafíu, mikið rými, fínlega hreyfingu og hraða sem finnst um leið og síðan opnast. Íslensku vefverðlaunin gefa ágæta mynd af því hvað telst framúrskarandi hverju sinni, og við tókum saman hvaða íslensku vefir hafa bestu hönnunina ef þig vantar viðmið.

Það er líka gagnlegt að muna að nútímalegt útlit er ekki markmið í sjálfu sér. Vefur á að skila árangri: fleiri fyrirspurnum, fleiri bókunum, meiri sölu. Trend koma og fara en skýrleiki, hraði og virðing fyrir tíma notandans eldast aldrei illa.

Ef þig grunar að vefurinn þinn sé farinn að sýna aldurinn tekur Flóra vel á móti þér. Við byrjum á stuttu spjalli, förum yfir stöðuna og þú færð tilboð án skuldbindinga.

Algengar spurningar

Hvað einkennir gamaldags vefsíðu?

Þéttar efnisblokkir, lítið letur, hliðarstikur, borðar og hægur hleðslutími eru algengustu einkennin. Ef vefurinn virkar illa í síma eða notar myndir í rangri stærð er hann að öllum líkindum kominn á tíma.

Þarf nútímaleg vefsíða að vera mínimalísk?

Nei. Mínimalismi er eitt af mörgum stílbrigðum en ekki skilyrði. Vefur getur verið litríkur og persónulegur og samt nútímalegur, svo lengi sem hann er hraður, læsilegur og með skýra uppbyggingu.

Hversu oft þarf að uppfæra útlit vefsíðu?

Flestir fyrirtækjavefir þola þrjú til fimm ár áður en útlit og tækni fara að draga þá niður. Það fer þó eftir bransa og samkeppni. Við fórum nánar yfir þetta í greininni um hversu oft á að endurnýja vefsíðu fyrirtækis.

Skiptir kerfið á bak við vefinn máli fyrir útlitið?

Já, meira en flestir halda. Kerfið ræður hraða, hreyfimöguleikum og hversu auðvelt er að halda vefnum ferskum. Léttur nútímalegur grunnur eins og Framer gefur hönnun meira svigrúm en þung eldri kerfi.

Get ég gert vefinn minn nútímalegri án þess að byrja frá grunni?

Oft, já. Stærra letur, meira rými, þjappaðar myndir og einfaldari uppsetning á forsíðu geta breytt miklu. Ef grunnkerfið er hins vegar hægt eða úrelt borgar sig frekar að meta endurgerð áður en meiru er kostað í plástra.