Vissa webbplatser ser bra ut, även om de trotsar konventionell visdom eller principer om designteori. En ny designtendens visar den väldiga idén med element som täcker eller hindra några av texten i designen.
Det är en intressant trend eftersom det går emot allt vi pratar om med design - att det måste vara läsligt att snabbt kunna ansluta till användare.
Det kan naturligtvis vara en knepig teknik att dra av effektivt, men mönstren är slående och effektiva när de görs bra. Här är en sammanfattning av trenden och några idéer för hur du kan prova själv.
Enkel obstruktion
Om texten är täckt av en design måste allt annat vara super enkelt visuellt så att användaren inte går vilse i alltför många effekter.
Vid varje lyhörd punkt är texten inte mer dold än någon annan.Root Studio gör ett bra jobb med detta med ett första intryck som griper uppmärksamhet med färg och den enkla animerade giraffen som täcker en del av den stora bokstaven. Tricket här är att trots att några av bokstäverna hindras är det ingen fråga vad ordet på skärmen är. Bokstäverna är fortfarande läsbara, beroende på storlek, enkelhet av typsnittet och placeringen av det obstruktiva elementet.
Designteamet ägde särskild omsorg med textobstruktionen för att upprätthålla integriteten hos ROOT ,? vilket är varumärket på den här webbplatsen. Vid varje lyhörd punkt är texten inte mer dold än någon annan. (Här är många av dessa mönster korta. De ser bra ut på skrivbordsbeslut, men texten är förhindrad att vara läsbar på mindre skärmar.)
Tredimensionella lager
Lägga till en tredimensionell skiktad effekt kan hjälpa element att hoppa från skärmen så att användarna nästan känner att de kan nå ut och röra dem. Text kan fungera som bakgrundselement i vissa fall.
Se bara till att skiktet ovanpå texten inte täcker för mycket av ordet (eller orden). Och det är alltid viktigt att se till att textobstruktioner inte leder till oönskade ord på grund av placering av andra element.
Choklad använder bara denna lagringseffekt väl. Det fungerar mest på grund av kombinationen av överdimensionerad bokstäver som använder vanliga ord i en djärv typ och ett toppelement som inte är riktigt stort och innehåller exakt samma ord som är dolda av godiselementet.
Denna behandling gör de stora bokstäverna i bakgrunden mer av ett grafiskt element än läsbart, vilket skapar en ny bit av kontrast och utmärkt lagringseffekt. (Det kan hända att du rullar igenom alla olika godisarmer för att se hur de skapar effekten på olika sätt.)
Glöm Rumsreglerna
Ibland omfattar textobstruktioner inte faktiskt bokstäverna, utan påverkar deras utrymme.
Det är en av de regler som North Street bryter utan att designen känner sig oförskämd eller ojämn. Företagsbeskrivningen stöter sig upp mot den centrala vertikala regeln på skärmen (resten av konstruktionen använder denna delare för en skärmstråleskärpa.)
Om någon sa att de skulle använda denna behandling, skulle du förmodligen försöka övertyga dem annars, men här fungerar det. Den visuella kompositionen är så lätt - tack vare gott om vitt utrymme - och de är typiska valmöjligheter, så att den lätta gråråden nästan faller in i bakgrunden, trots att den kommer i det utrymme som bör reserveras för text.
En andra grå linje delar vidare text i navigeringen, men de flesta användare kommer nog inte ens att märka obstruktionen.
Endast för stora bokstäver
Om du tittar på alla exemplen här kommer du förmodligen att märka ett gemensamt tema. Allt obstruerat bokstäver är ganska stort och använder enkla teckensnitt.
Små bokstäver ger vanligen inte tillräckligt med utrymme för att täcka en del av texten på ett sätt som är målmedvetet. Om du planerar att designa med en textobstruktion, ska den vara avsiktlig och ha betydelse.
Komplicerade skript av nyhetsstilar är bara för svåra att läsa med ett element ovanpå dem.Omfattande små bokstäver är oerhört svårt, när det gäller målmedveten design och läsbarhet. Därför är tekniken kopplad till stor typografi.
Dessa stora, ofta sans serif, teckensnitt är lätta att läsa vid en blick och har ofta medelstora bredder och stora skålar och räknare som gör lagringselementen mer praktiska. För att få det här konceptet att fungera behöver du brev med former som lånar sig till detta koncept. Tunna eller kondenserade typ stilar fungerar inte ofta, och komplicerade skript av nyhetsstilar är bara alltför svåra att läsa med ett element ovanpå dem.
Element med liten kontrast
Ibland är textobstruktionen inte ett element som ligger ovanpå texten. det är förhållandet mellan textelementet och det som omger det. Brist på kontrast mellan text och bakgrundselement kan också leda till textobstruktion.
Återigen kan detta vara ett svårt begrepp att dra av effektivt. Text finns inne för att läsas. Brist på kontrast kan göra det svårt.
När de är parade med mycket läsbar text är element med låg kontrasttext subtila påminnelser på skärmen. Dessa element kommer att läsas efter andra högre kontrastelement.
I designen för Anew, ovan är beskrivningen av verksamheten viktigare än namnet. Det är vad designen säger till användarna på grund av typbehandlingen. De nyckelord? Taket + testkök? är lätt att se och läsa. Namnet? Anew? visas i ett läge med låg kontrast under varumärket. Ögonet är fortfarande draget på grund av den stora logotypen, men det är inte den primära fokuspunkten när det gäller läsning och informationsinsamling.
En del av anledningen till att denna behandling fungerar i detta utrymme är på grund av innehållet i designen.Tänk på symbiosen mellan ordet? Anew? och de ljusa vita middagsplattorna. Det känns friskt, annorlunda och lockande.
Slutsats
Obstruerade textdesigner blir allt populärare hela tiden. Inte så länge sedan hade du varit hårt pressad för att hitta något med denna stil online. (Utskriftsdesign har använt det mer konsekvent eftersom designersna inte behövde oroa sig för responsiva brytpunkter.)
Var noga med att skapa något med text som inte är helt synlig. Se till att orden fortfarande säger (och betyder) vad du tänker. Om du har någon tvivel om hur en design kommer att uppfattas eller läsas, överväga ett annat alternativ när du använder obstruerad text. Du vill aldrig göra din design svår för användarna att förstå.