Ins och outs av minimalistisk design

Minimalism är en trend som aldrig kommer att dö. Oavsett hur många gånger vi är kvar i vördnad av imponerande invecklade mönster, kommer det alltid att finnas något om enkelhet som lämnar oss lika fångade.

Idag ser vi på några av de viktigaste aspekterna av minimalism i webbdesign tillsammans med några exempel från designers som fick det rätt.

Vad det inte är

Det är nästan alltid en bra idé att utforska vad något inte ligger inom en diskussion om vad det är. Att undersöka motsatser ger oss en punktkontrast och hjälper till att forma definitionen. I huvudsak är minimalism en avvikelse från det visuellt överflödiga. Riktigt olika färgpalettar och komplexa element försvårar för enkla solfärger och grundlinjer.

Tänk på de två exemplen nedan. Dessa platser utgör ett tydligt alternativ till den minimalistiska tankegången. De är visuellt ganska upptagna och kan ta en minut att utforska innan du känner att du har ett anständigt grepp om vad som händer på sidan.

Gör detta dem dåliga mönster? Absolut inte. Även om många designers tydligt gynnar specifika stilar, är att ange värdesdeklarationer till en given metod lika användbart som att blå är bättre än grön eller vänster är bättre än höger. det finns helt enkelt ingen sanning mot dessa uttalanden och ingenting är uppnått i diskussionen om sådana möjligheter.

Om du är en professionell designer ska du kunna dra av några olika design stilar för att behaga viljan och personligheten hos din klient. Svaret på frågan om vilken minimalism det inte är är att det inte är ett iboende bättre sätt att utforma webbplatser. Nyckeln blir då inte att bestämma om du vill ha upptagen, minimalistisk eller något annat antal design stilar bättre, men att lära dig att genomföra varje metod effektivt. Låt oss undersöka några områden att fokusera på när du skapar en minimalistisk design.

Typografi

Ditt val av typografi spelar en stor roll i effektiviteten av din minimalistiska design. Välj rena, enkla typsnitt med hög läsbarhet. Tunna typsnitt används ofta för att ofta förmedla minimalism men inte begränsa dig till den här idén eftersom en tjock typsnitt är ett bra sätt att visa upp ett viktigt objekt som en rubrik.

På samma sätt kan du till och med dra av en solid minimalistisk design med en komplicerad skrivtext. Prova att hålla din sida och annan typografi så enkelt som möjligt när du använder ett skript för att dra uppmärksamhet till ett enda område på sidan.

Ytterligare resurser

40 gratis minimalistiska och högkvalitativa teckensnitt

70 Minimalistiska typografiska exempel

Starka nätutjämningar

Min favoritimplementering av minimalism är när det görs för att uppnå syftet att öka användbarheten. Bra minimalistisk webbdesign fokuserar ofta på att avlägsna sidan till ett minimum antal separata sektioner och element är så att innehållsnavigering är nästan ogiltig av någon form av inlärningskurva eller visuell förvirring.

Detta resulterar ofta i lätt uppenbara nätbaserade anpassningar. Våra ögon är mycket bekanta med detta mönster av innehåll och brukar inte ha några problem att sortera igenom det snabbt. Dessutom finns det något i din hjärna som helt enkelt vill att artiklar ska ordna sig ordentligt och på ett förutsägbart sätt. Det är glädjande att se en sida med stark inriktning både vertikalt och horisontellt. Däremot finns det en slags visuell och psykologisk dissonans när vi inte omedelbart kan identifiera ett tydligt mönster i arrangemanget av objekt på en sida.

Ytterligare resurser

1KB CSS-nätet

ZURB CSS Grid Builder

Kontrast

Om du har en minimalistisk design i verk och det verkar bara saknas något, är oddsen att lägga till lite kontrast förbättrat designen dramatiskt. När man utövas av en praktiserad hand är kontrast nyckeln till all god design (jag kommer att försvara denna filtförklaring till döden). I minimalistisk webbdesign är sidan så avskalad att det finns lite annat att köra med än någon smart kontrast.

Kontrast är ett koncept som vi alla förstår i sig, men gör oss medvetna om att det kan drastiskt förbättra dina mönster. Kolla in den enkla designen nedan:

Det är verkligen inte så mycket som händer här i färg och vackra bilder. Emellertid är designen ganska attraktiv på grund av stark användning av kontrast. Rubrik- och innehållsområdet är tydligt åtskilda och kan genast igenkännas för vad de är (sidfoten använder samma trick). Kopian på sidan skiljer sig i storlek och djärvhet för att uppmärksamma de delar av meddelandet som designern anser vara viktig.

Sidan ovan använder gråtoner för differentiering, men du kan lika lätt använda olika färger för att uppnå samma sak.

Kom bara ihåg att det finns en stor skillnad mellan kontrasterande och motstridiga färger. Bara för att två färger är väldigt olika betyder inte att dina ögon kommer att uppleva skillnaden som trevlig. Se till att du håller på med din färgteori innan du fattar några drastiska beslut.

Det viktigaste att komma ihåg med kontrast sägs bäst av designförfattaren Robin Williams:? Var inte en wimp !? Vad hon menade med detta är att en liten bit av kontrast inte går långt. Om du ska göra något större så att det sticker ut, gör det mycket större. Om du ska göra det djupare, gör det väldigt djärvt! Du borde kunna berätta om en kontrast finns där. Vi ser detta ofta när texten är fet. Ibland är skillnaden mellan fetstil och den vanliga texten så liten att du verkligen måste stirra för att se skillnaden! I det här fallet tjänar den fetstilte texten inget syfte och borde bara vara detsamma som resten för att förhindra visuell förvirring.

blank

Tänk tillbaka till de upptagna exemplen i början av den här artikeln. Dessa designers valde att fylla nästan varje tum av skärmen med något visuellt intressant. Minimalismen tar återigen motsatt tillvägagångssätt.Det ger huvudkomponenterna på sidan gott andningsrum som skiljer dem från varandra.

Whitespace gör tittaren bekväm och mindre klaustrofobisk. Det hjälper dig också designern har kontroll över var du vill att tittaren ska titta. Vissa designers insisterar på att tittare läser varje sida till vänster till höger efter ett z-mönster. Detta är helt enkelt inte sant i alla fall. Lägg märke till hur formgivaren ovan använde blankutrymme och en ljus bild för att dra dina ögon in i bilden på datorskärmen. Dina ögon börjar i själva mitten av bilden, inte längst upp till vänster!

Detta har allt att göra med kontrast, som nämnts ovan, och volymen av utrymme som upptas av ett givet objekt vs. För att få en känsla för en rätt mängd blankutrymme att använda när du utför en inledande layout konverterar jag ofta de objekt som jag placerar på sidan till extremt grundläggande former i Illustrator. Då kan jag snabbt blanda och ändra storlek på föremålen utan att vara distraherad av innehållet. Att göra layout på detta sätt tvingar dig att tänka på balansen på din sida innan du någonsin närma dig mer komplexa estetiska element.

Som du kan se är layoutet Jolicloud ganska balanserat och attraktivt när man tittar på detta sätt. Det enda som stör mig är att navigeringslänkarna inte stämmer överens med innehållets högra sida. Jag överdrev det lite i den förenklade versionen för att göra det lättare att se men det är definitivt så här i originalbilden också. Återigen ser vi nytta av att sänka sidan till grundläggande former, så det blir omedelbart uppenbart att navigeringslänkarna är något besvärligt placerade (varken mittlinjeformad eller högerlinjad men någonstans däremellan).

Fler artiklar om minimalism

Kan inte få tillräckligt med minimalism? Kolla in de stora artiklarna och sidorna nedan:

  • 21 Resurser speciellt för minimalismens älskare: Vandelay Design
  • Utställning av rena och minimalistiska mönster: Smashing Magazine
  • Minimalism runt om i webben: Design Inspiration & WP Teman: Handledning 9
  • 20 vackra minimalistiska WordPress-teman: Sex revisioner
  • 25 Vackra Minimalistiska Webbplatsdesigner: Vandelay Design

Slutsats

Det handlar om vår diskussion om minimalism i webbdesign. Låt oss veta vad du tycker om den här trenden i kommentarerna nedan. Också vara säker på att inkludera länkar till dina favoritwebbplatser som exemplifierar minimalism i webbdesign.