3 väsentliga designtrender, december 2017
Alla tre månadens viktiga designtrender har att göra med typografi. Och trenderna visar några ganska bra sätt att använda vacker typ för att skapa användarengagemang och göra ett bra första intryck.
Ett vanligt tema bland dessa mönster är att alla typografiska stilar är läsbara. Om du planerar att arbeta med ett trendigare eller skrymmande textelement, välj ett typsnitt som användarna inte kommer att kämpa för att läsa. Den trendiga tekniken är tricket med dessa mönster, inte själva typsnittet.
Här är vad som trender i design denna månad:
1. Skriv bara ovanför rullningen
Medan en bra bild kan hjälpa till att dra användarna till en design, är ibland rätt ord och utrymme biljetten.
Nyckeln till att göra det mesta av denna designutveckling är att förfina ditt budskap. Orden måste vara enkel, säga något meningsfullt och skapa värde för användaren.
Så hur gör du det?
- Börja med en nyckelfras. Det kan vara ditt uppdrag eller ett värdeförslag för användare. Berätta för användarna vad du tar med i tabellen och varför din webbplats kommer att vara viktig för dem.
- Välj en enkel typsnitt som har samma humör som meddelandet för längre kopieringsblock.
- Om textblocket är kort, t.ex. med Typ av typ , överväga ett funkier typ alternativ att dra användare in.
- Få det bästa av rymden. Observera att texten i varje av följande exempel har gott om utrymme att andas, vilket gör det enklare att läsa vid en blick. Rymden kan också hjälpa till att dra i ögonen på text och kan balansera textelement om du inte vill centrera dem på skärmen, till exempel Design Ups .
- Använd färg för att öka visuellt intresse. Ljusa, trendiga nyanser kan hjälpa till att dra användare in i designen. Färg kan också hjälpa till att ställa in en stämning som hör till meddelandet.
När du arbetar med en typ-tung design, tvinga inte den. Ibland har du inte tillräckligt med text för att fylla en fullständig "skärm". Mindre + Mer och typ av typ använd färgblockering för att skapa flera paneler som är perfekt anpassade för textinnehållet däri.
2. Text i vita lådor
Med så många djärva visuella element i webbdesignprojekt - och så många lyhörda brytpunkter för att hantera vita vita lådor återkommer som ett behållarelement för text. Vitlådor med mörk text inuti kan garantera läsbarhet när det gäller meddelanden ovanpå foton, video eller illustration där färgvariationen finns.
Och medan den här trenden kanske låter lite, bra ... slarvig eller lat, ser det faktiskt bra ut när det är bra.
Du kan inte bara släppa en låda någonstans på en bild och hoppas på det bästa. Vita lådor måste placeras strategiskt så att de inte täcker viktiga delar av bilden och så att användarna flyttar till dem när man tittar på designen.
Vitlådor måste vara tillräckligt stora för att innehålla en rimlig mängd text och du bör ha en plan för detta element på mindre skärmar, till exempel att allt i textrutan kan falla under huvudbilden. Försök inte lägga en textruta över en bild på mindre skärmar eftersom du kommer att sluta med en textruta som är för liten för att läsa eller rutan täcker det mesta av själva bilden.
Om du pottar för den vita rutan, ha det roligt. Vart och ett av exemplen nedan använder vita rutor på helt olika sätt.
Gör utrymme skär en vit ruta i bildens nedre hörn så att det mesta av bilden är synlig. Den vita rutan blöder in i det vita utrymmet nedan, så att det nästan ser ut att det kommer upp ur panelen nedan. Denna teknik hjälper till att ansluta huvudreglaget till innehållet nedan (och kan till och med uppmuntra att rulla).
Hur den använder cirkulära blobs så att de vita textrutorna bättre matchar tonen i bakgrundsillustrationen. Denna subtila förskjutning i form, så att lådorna verkar mer vätska hjälper till att ansluta elementen så att lådorna och bakgrunden har en konsekvent känsla. Du vill inte ha vita lådor för att texten ska känna att de slumpmässigt läggs på bakgrunden. (Det fungerar inte och hjälper inte till att skapa en sammanhållen känsla för användarna.)
Macaulay Sinclair har mer text än de andra exemplen med en del av ett bildpanelnät för att hålla textelementet. Här tjänar inte bilden bakom den vita rutan något informationsvärde. Det har ett färg- och rörelseskema som liknar andra bilder och tjänar främst till att skapa sammanhållning mellan textelementet och resten av designen.
3. Typografi Cutouts
Ingen sa någonsin att texten måste vara en serie med solida bokstäver. Fler designers väljer typsnittsklipp som har ett färgblock över en bild så att bilden kommer genom tydlig bokstäver.
Denna teknik kan fungera med stillbilder eller rörliga bilder och med fullskärmsöverlägg så att endast en liten mängd information kommer genom bokstäver (nästan för att skapa en textur) eller med mer av en block-over-image-stil med mer av bakgrundsbilden synlig.
Tricket för att göra detta arbete är rätt typsnitt. Brev måste ha tjocka streck så att bilden eller strukturen i bakgrunden är synlig. Du kan inte göra detta med ett tunt eller kondenserat teckensnitt med någon konsekvent framgång.
Denna teknik fungerar också bäst om antalet ord och bokstäver är ganska begränsat. Håll dig till ett till tre ord med 10 eller färre bokstäver eller använd mycket vanliga ord som användarna kommer att veta vid en blick.
Danbury använder en ljus text cutout för att uppmuntra användare att delta i videosamtalet till handling. Hela apelsinlådan är bara en jätte knapp.
Fusion Winery använder en bakgrundsvideo av en vingård i bokstäverna. Vad som är bra med denna design är triple-lagseffekten: Videobakgrund under vit textutskärning under en produktbild.
Kaneko använder en oidentifierbar bild som fyllning för bokstäver. Om du väljer denna stil, behåll denna bakgrund enkel som färdig med denna design. Det finns bara en touch av färg och textur som drar ögat mot texten på den starka kanan.
Slutsats
Samlingen ger inspiration till de projekt som kanske inte har en bra bild eller video, så att du fortfarande kan hitta ett sätt att skapa något som användare ska svara på. Var inte rädd att använda text som ett visuellt och informativt element i denna design.
Vilka trender älskar du (eller hatar) just nu? Jag skulle gärna se några av de webbplatser som du är fascinerad av. Släpp mig en länk på Twitter ; Jag skulle gärna höra från dig.