Minimalistiska webbplatser: 12 saker du bör veta

Minimalistiska webbplatser

Minimalistiska webbplatser hjälper användare att tänka snabbare.

I en tid då användare nu är mer otåliga och teknisk utbrändhet blir allt vanligare, är design för lugn och tydlighet – så lite som möjligt (minimalt) – avgörande för framgången för alla onlineföretag.

Låt oss beskriva minimalistisk webbdesign och diskutera fördelarna den ger dig och dina besökare.

Vi ska ta en titt på:

  1. Minimalistisk designs estetiska markörer - kolla in några minimalistiska WordPress-teman.
  2. Fördelarna med minimalism när det gäller användargränssnitt
  3. Hur minimalistisk design förhindrar teknisk utbrändhet hos användare och varför det är avgörande för ditt företags framgång

 

1. Visuell estetik

Visuell estetik

Det är naturligt att använda minimalismens faktorer som vi kan se och engagera oss i när vi tänker på minimalism.

Apples designestetik, till exempel, är omedelbart igenkännbar och en stor trendsättare inom teknikvärlden. Trots att den är ganska enkel är deras design alltid tilltalande för ögat.

Anledningen till detta är att deras visuella stil är väldigt enkel.

Låt oss titta närmare på vad det betyder, de olika faktorerna som spelar in för att skapa en minimal estetik, och varför dessa faktorer är så påverkande.

2. Svart eller vitt

Whites neutralitet är lugnande inte bara för ögonen utan också för sinnet. Eftersom färgen inte har någon betydelse kommer användarna inte att störas eller tvingas överväga vad den betyder.

Vita bakgrunder gör att viktiga aspekter som uppmaningar och användbar text sticker ut för maximal effekt samtidigt som de säkerställer bra färgkontrast. Dess ljusstyrka är ett utmärkt verktyg för tillgänglighet i kombination med kontrasterande färger.

Whites "seriösa" motsvarighet är svart. Det har fortfarande ett minimalistiskt, innehållsfokuserat gränssnitt, men det har en mer "uppklädd" känsla.

3. Sans-serif Font

Sans-serif-bokstäver verkar renare än serif-teckensnitt, vilket är anledningen till att de ofta används av större företag. När vi kombinerar sans-serif typografi med stor teckenstorlek och/eller en fet typsnittsvikt, kan vi uppnå störst effekt och känsla, och våra ord kan vara de mest fängslande delarna av våra webbplatser om vi väljer dem smart. Less är mer i det här fallet.

Kolla in några minimalistiska teckensnitt här.

4. Färger som sticker ut

Färger som sticker ut

Djärva färger sticker ut mot både vit och svart bakgrund, men när de används som bakgrundsfärger kan de se ungefär lika enkla ut som vita eller svarta samtidigt som de uttrycker mer känslor och mening.

Gradienter är ett utmärkt sätt att använda ljusa färger utan att belasta användaren, särskilt när de används i kombination med ett sans-serif-teckensnitt. Här är ett exempel från Dribbble som visar hur minimalism kan anta många former och hur minimalistiska webbplatser kan ha olika storlekar och former.

Känslomässigt, men rakt på sak.

5. Designa med en plan yta

Platt design är en webbdesigntrend som började 2012 och har sedan dess vunnit popularitet.

Även om det är en visuellt tilltalande version av minimalism, väckte NNGroup allvarliga användarproblem eftersom platt design tillämpade minimalistiska koncept på interaktiva funktioner som knappar, vilket fick dem att se ut som om de inte var interaktiva alls.

Detta ledde till "Flat 2.0", som använder rundade kanter och skuggor för att ge dessa interaktiva element mer detaljer utan att belamra användargränssnittet.

Böjda kanter är användbara eftersom de liknar de rundade hörnen på verkliga knappar. Skuggor gör knappar mer relaterbara genom att lägga till en 3D-aspekt till dem, skilja dem från designen och frammana verkliga element.

Om vi ​​inte gör det klart att interaktiva tryckmål engagerar, kommer vår design att bli oanvändbar eftersom användaren måste ta reda på vad som är och inte är klickbart. Detta krystade resonemang motsäger allt som minimalismen utger sig för att åstadkomma.

Även om en minimalistisk grafisk estetik kommer att göra vår design snyggare, bör vi inte gå överbord när det kommer till UI-design.

Prioritera tydlighet och klickbarhet framför visuellt intresse.

6. Visuell röran bör undvikas

Som en allmän regel, när något är användbart, men inte för de allra flesta konsumenter eller i användarens aktuella sammanhang, bör det döljas.

Flytta en less-viktigt navigeringsobjekt till en off-canvas meny, bara för att avslöjas när det faktiskt önskas, är ett exempel på att försöka dölja något för att minska kognitiv börda.

Resonemanget bakom detta är att varför tvinga användaren att överväga dess innebörd när de sannolikt inte behöver se eller använda den i första hand?

Vi måste också ta hänsyn till det faktum att om det finns för mycket innehåll, kommer användare inte att kunna återkalla viktig information ibland, särskilt.

Vårt minne påverkas av kognitiv belastning. Vi blir förlamade och osäkra på vart vi ska ta vägen när vi konfronteras med för många föremål eller alternativ. Det ser inte bra ut.

7. Använd visuell hierarki

Betydelsen av varje element bör indikeras visuellt och ordningen i vilken de ses bör påverkas.

Detta innebär att vissa element måste prioriteras visuellt för att hjälpa användaren att förstå vad som händer. Tänk på en produkt vars pris visas i en textstorlek som är större än produktnamnet.

Användaren kan lära sig att produkten kostar tio dollar, men de kommer att bli förbryllade under några ögonblick eftersom de inte har någon aning om vad produkten är.

Det är ännu värre om det visar sig att de inte bryr sig om produkten eftersom de redan har bearbetat information som inte ens är relevant för dem.

8. Att göra färre val för en mer strömlinjeformad upplevelse

För många alternativ att välja mellan är lika med en långsammare svarstid, enligt Hicks lag. När en användare presenteras för många alternativ kan han eller hon uppleva beslutsförlamning, vilket definieras som oförmåga att fatta ett beslut som ett resultat av kognitiv belastning.

Till exempel skapades Nikes hemsida för att bara visa dig ett fåtal produkter åt gången.

Atoms webbplats är ett utmärkt exempel på hur antalet alternativ har minskat. Endast 4 navigeringsobjekt ingår i huvudnavigeringen, med less relevanta punkter flyttas till sidfoten på webbplatsen.

När en användare väljer att "Hitta din passform" presenteras de för en konversation, en-för-en-strategi för att välja den bästa produkten.

9. Designa friktion som är användbar

Funktionell röran, som visuell röran, ökar användarens kognitiva belastning och kan vara en stor distraktion, vilket leder till en betydande minskning av konverteringar.

När det gäller e-handel beror 34 procent av de lediga kassorna på att kunder tvingats skapa ett nytt konto, vilket resulterar i en massiv intäktsförlust.

Detta betyder inte nödvändigtvis att vi måste tvinga kunden att checka ut i den här situationen, men det innebär att vi kan göra det valfritt att skapa ett konto.

Om vi ​​verkligen ville minska användarens kognitiva belastning skulle vi kunna be dem skapa ett konto efter att de har checkat ut, så att tanken på att skapa ett konto inte blir en distraktion!

Innan du går djupt in på prototyper är att skapa ett flödesschema ett utmärkt sätt att minska friktionen på webbplatsen.

På så sätt, om det finns några friktionspunkter på grund av funktionellt röra, kan vi ompröva användarens resa och skapa en mycket trevligare upplevelse.

Förhindra dina användares tekniska utbrändhet

På så sätt, om det finns några friktionspunkter på grund av funktionellt röra, kan vi ompröva användarens resa och skapa en mycket trevligare upplevelse.

10. Förhindra teknisk utbrändhet

Vi lever för närvarande i den mest visuella versionen av vår värld som någonsin skapats. Det finns massor av applikationer, webbplatser och prylar för att hålla dem inneslutna.

På grund av det snabba antagandet av ny teknik blir våra vardagsartiklar, kök och ryggsäckar digitalt rotade med ny teknik och funktioner som lovar att förbättra våra liv.

Sanningen är dock att endast ett fåtal utvalda lyckas i längden.

Mer teknik, fler problem.

Som felaktiga människor kan vi bara hantera en liten mängd kognitiv belastning, men allt vi samlar på oss ökar den belastningen. Detta gäller inte bara för de varor vi har utan också för installationen och underhållet de kräver, såväl som den kunskap och information som krävs för att driva dem.

Och detta förutsätter att vi faktiskt använder produkten — har du någon gång sagt upp en årsprenumeration p.g.a. less tid eller motivation efter bara några månader?

Sociala medier, å andra sidan, är lite annorlunda. Många användare är beroende av det, och många spenderar minst två timmar per dag på det enbart.

Det finns helt enkelt inte tillräckligt med timmar på dygnet för att använda, läsa, titta på eller på annat sätt konsumera allt vi vill, men den verkliga frågan är de långsiktiga effekterna på vårt mentala välbefinnande.

Det får oss att känna oss nedtyngda.

Belastningen är en kombination av stress och ansvar. Vi är stressade eftersom vi inte tillåter oss själva att slappna av, istället för att fylla varje vaken minut med teknik.

Skyldighet eftersom så många produkter använder gamification och inlåsningskontrakt för att oetiskt behålla användare. Sedan är det vår besatthet av nästa bästa sak och fynd.

Frestelsen att bli beroende av teknik finns runt omkring oss.

11. Effekterna av att webbplatsanvändare blir överbelastade

När användare är överbelastade kan de uppleva en av två känslor:

Otåliga: De kommer bara att vara villiga att investera en liten del av tid och ansträngning på webbplatsen, och de kommer att ge upp det om de stöter på en liten snubbelkloss.

Frustrerad: Om en användare är överväldigad av alternativ eller val, är de det less sannolikt kommer att konvertera och är mer benägna att byta till en konkurrent eller ge upp sin sökning helt.

Med andra ord, när användare surfar på webben, finns det en god chans att de lämnar tidigt på grund av otålighet och minskande uppmärksamhet. Tyvärr, för de flesta vanliga användare, är detta bara normalt beteende

12. Hur kan användare dra nytta av minimalistisk webbdesign?

Vi kan minska den kognitiva belastningen av våra varor som digitala designers, vilket minskar stress, irritation och frustration.

I en internetålder som ständigt kräver vår uppmärksamhet kan våra webbplatser vara en uppfriskande förändring.

Nyckeln är att skapa minimalistiska webbplatser som inte ökar användarens redan enorma kognitiva belastning, så låt oss titta på hur ett minimalistiskt förhållningssätt till webbdesign kan optimera webbplatsens användarupplevelse. Vi kommer också att titta på några verkligt inspirerande exempel på fantastiska minimalistiska webbplatser längs vägen.

Webbplatser med ett minimalistiskt utseende handlar om mer än bara estetik. Minimalistisk design är en metod för att vara så tydlig som möjligt samtidigt som man använder så lite material som möjligt.

Vanliga frågor om minimalistisk webbplats

Vilka är några av de viktigaste egenskaperna hos minimalistisk design?

Enkelhet, rena linjer och monokroma färgkombinationer kännetecknar den. Minimalistisk design består vanligtvis av ett fåtal element på en sida, många tomma eller negativa och en design som fokuserar på formen, färgen och strukturen hos några nyckelelement.

Vilka färger används ofta i minimalistisk design?

Många designers använder enkla färgpaletter när de skapar minimalistisk design. Färger som enkla svarta, vita och/eller grå nyanser är populära. I allmänhet kostar de flesta minimala designpaletter högst tre färgnyanser.

Hur dekorerar minimalister?

Det finns tre huvudsakliga tillvägagångssätt som minimalister gör för att leverera sin signaturlook. De tar bort skräp, använder en neutral baspalett och tar bort allt från sidan som inte är absolut nödvändigt.

Om författaren
Författare: Daniel Luke
Daniel är en WordPress webbdesigner med stor erfarenhet av att arbeta med olika WordPress-teman som gör att han kan jämföra och kontrastera olika teman, förstå styrkor och svagheter för att utveckla faktiska, verkliga recensioner.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...