Det verkar som ett så enkelt koncept, men denna trend börjar bara ta av. Designers tillåter typografi att korsa plan mellan element.
Trenden exemplifieras av typ som börjar i en del av duken och sträcker sig sedan in i utrymmet på något annat, till exempel överlappande del av ett foto eller inkräktande på en annan färgad ruta eller bild. Lagringstekniken är intressant och kan hjälpa till att lägga till lite kreativitet för en design på ett antal sätt. Här är en närmare titt på sätt att använda typografi i delade utrymmen.
Identifiera trenden
Typografi i delade utrymmen är en webbdesign trend som är ganska lätt att identifiera. (Du kan också prova den här i icke-webbprojekt, t.ex. affischer eller vykort.) Huvudegenskapen är att typen eller relaterade element verkar korsa flera lager eller plan i designen.
Medan idén är att du letar efter typografi i delade utrymmen kan trenden tillämpas på nästan vilket designelement som passerar in i ett utrymme som ser ut som det är reserverat för något annat. Det visas ofta som en förlängning av split screen design.
Det element som korsar planen kan vara ganska uppenbart, som många av typografiska exempel nedan, eller mer subtila. Titta på bilden för Hometown Trolley ovanför. Stroppen sträcker sig från typen för att dra ögat från vagnens bild till huvudrubriken. En närmare titt avslöjar att en del av vagnen kommer ut ur sin bakgrund på skärmens sida avsedd för typelement.
Vad den här trenden gör - när den är väl utformad - hjälper till att styra användarens öga över element. Med en uppdelad design finns två olika saker att titta på, delning av utrymme hjälper användaren till viktiga delar av designen. Den andra bonusen från ett designperspektiv är att skapa flera mellanslag kan göra det enklare att innehålla textelement - tänk på designen som två jätte kort, med ett lager på toppen som förbinder dem.
Blanda foton och typografi
Typografi i delade utrymmen fungerar vackert med starka bilder. Många designers använder denna trend med vertikalt orienterade bilder (något som inte används ofta på grund av skärmens bildförhållanden).
Att dela utrymme är ett bra sätt att använda dessa former på ett annat sätt samtidigt som de skapar en effektiv visuell bild. Brev kan korsa mellan bild och blankutrymme eller kan bara läsa mellan mellanslag, som i exemplet ovan.
Vad som är smart om typografi och meddelanden för The Square Apartments är att orden kan läsas på egen hand i och nästan delat skärmformat eller över panelerna för en mer komplett men av meddelanden.
Det andra som är trevligt om det här alternativet är att det kan vara lite mindre knepigt att välja en textfärg, eftersom uthyrning inte går över flera bakgrunder. Det här kan vara den enklaste variationen av typografi i delade utrymmen för att försöka.
Försök med fet bokstav
Denna trend är dramatiskt vacker med bokstäver som passerar paneler i designen och använder en intressant typsnitt på ett stort sätt. Den extra tonvikten på typsnittet eftersom den lagrar på flera mellanslag belyser orden och skapar en kontaktpunkt i designen.
För att detta ska fungera effektivt behöver du en kort del av meddelanden - långa rubriker kommer att känna sig överväldigande, intressant typsnittval och ett bild- och bakgrundspar med liknande färg så att den typen lätt kan läsas över hela duken.
I de flesta fall väljer du svart eller vitt bokstäver i bakgrunden. Det här är en ganska komplex design för användarna att smälta - även om det kan se ganska enkelt ut - och läsbarheten borde vara ett primärt problem.
Skikt typ med färg
Det finns inget att säga att typografi måste dela ett utrymme med bilder för att kunna använda denna trend. Det kan fungera lika bra när du inte har några bilder alls.
Blanda och matcha färgade rutor, geometriska former och olika typografialternativ för att skapa lager med stil.
Startup Lab ovanför gör ett fascinerande jobb att para färgade block med typ som ignoreras gränser för att skapa massor av intressanta lager. Den snygga skuggningen på de stora orden ger en fin visuell referenspunkt och kontrasterar snyggt med de enklare, raka sekundära typstilarna.
Lägg till en aning av animering
Bara för att du använder den gemensamma rymdutvecklingen, betyder inte att du måste försvaga andra fads. Lägg till ett snedsteg av animering för användargränssnitt eller navigationsobjekt för att uppmuntra användare att klicka runt designen.
Subtil rörelse kan också bidra till att skapa fokus om designen känns lite upptagen.
I ovanstående design snurrar den lilla cirkulära logotypen långsamt. Det fungerar nästan för att centrera designen, som har en nästan asymmetrisk layout. Den fyller i de fångade utrymmena mellan bokstäverna och bilden så att den övergripande designen känns fullständig och balanserad. Plus animeringen tar dig direkt till sidbrandningen.
Håll det enkelt
Det är ett återkommande tema här på Design Shack, men den här trenden fungerar bäst när du håller det enkelt. Medan det kan ta mycket planering och kan känna sig komplicerat för att skapa en effektiv design med typografi eller andra element i delade utrymmen, ska slutresultatet se enkelt ut och seamlöst.
Om du inte är säker på var du ska börja, försök en minimal ram. En vit bakgrund med svart typ, som Melville, ovanför, kan trycka in fokus mot färgade bilder. (Rena linjer är alltid i stil.)
Fokusera på visuellt flöde med denna typ av designmönster. Tänk på vilka delar av designen som är viktigast för användarna att se, och klicka sedan på. Layer bakgrunden, bilderna och bokstäverna för att dra användarna genom det här flödet så att det sista som de ser i en naturlig progression är nästa åtgärd. (När det gäller ovanstående design har användarna två val - klicka på länken eller bläddra.)
Slutsats
Att skapa en design med typografi i delade utrymmen är en modern twist på ganska traditionella designtekniker. Det ger ett alternativ att hjälpa designers att markera bilder med grödor av former som ofta glömmas bort eller utforma ett djärvt alternativ utan bilder alls.
Fokus på solid, läsbar bokstäver som korsar planen bra för att göra det mesta av denna trend. Överväga användarflöde och samtal till handling? och ha kul!