Nästa stora webbdesigns trend är här, och det är pulserande, färgstarkt och vackert!
Tack vare Spotify växer duoton i popularitet nästan dagligen. Effekten, som använder ett par färger över ett foto, är slående, roligt och pulserande. Det är också ganska trendigt, med nya webbplatser som ändras till ett duotonformat nästan dagligen. Här är några sätt att få ut det mesta av denna heta designteknik.
Vad är Duotone?
Först en liten primer: Duotone är användningen av två färger.
Namnet och tekniken kommer från tryckpressar. Duotonavtryck är gjorda i två nyanser av samma färg eller med svart och en nyans. Processen använder två färgplattor gjorda med skärmuppsättningen i olika vinklar.
Tvåfärgskonceptet är stort. Pantone heter ett par som årets färg, minimalism hade designers tänkande om begränsade paletter och duotoner är visuellt intressanta och ganska lätt att skapa. Du kan skapa effekten med Adobe Photoshop och en tvåfärgsgradient eller ett verktyg som Colofilter.css för att tillämpa det i koden.
Men vad som sannolikt hjälpte duotone från marken är mest användning av Spotify. Duotoniska färgscheman används i musikspelande appen och för olika kampanjmikrowebbplatser. Duotone lägger till ett unikt designelement för bilder från artister som är välkända och allmänt använda.
Tekniken som en gång var en häftklammer har hittat nytt liv online, och det är en trend som vi sannolikt kommer att se mycket mer av under de kommande månaderna.
Som en dominerande bild
Använd duoton för att skapa en dominerande bild.
Den viktigaste visuella för New Deal Design är slående tack vare ett djärvt färgval och konstigt tack vare det roliga bildspelet och färgen. Var inte rädd för att gå utanför din komfort när det gäller att arbeta med duotonbilder. Det är okej att para nyanser som kanske inte matchar. Målet är att skapa en bild som kräver uppmärksamhet och innehåller mycket kontrast för att bilden ska visa sig.
Här är några tips för maximal påverkan:
- Välj två kontrasterande färger eller par märkesfärger.
- Välj ett foto med ett fokuserat bildområde. Ett landskap kan vara svårt att använda.
- Börja med en högkvalitativ bild. Suddiga eller dåliga bilder och duoton blandar inte.
- Spela upp kontrast.
- Tänk på mellanslag för knappar eller typografi.
- Välj färger som återspeglar stämningen på fotot.
- Ställ in en duotonavbildning med en färgad kant eller mixa och matcha färgalternativ med en rullningsreglage eller parallaxeffekter.
Som en enkel färgpalett
Duotone behöver inte vara komplicerat. Ibland är de mest slående tvåfärgsprojekten enkla i naturen.
Assurance Livförsäkring använder ett par röda och rena typografi. Rullningen innehåller också en mer halvtonstil. Färgerna är ljusa och engagerande. Röd är den typ av färg som nästan gör att användarna tittar på det.
Tricket här är att det bara är enkelt att vara effektivt. Användaren är inte överväldigad med element. Det röda drar dig in så att orden på skärmen blir fokus. Denna typ av duotoneffekt är nästan gjord för webbplatser som har en mer formell utseende eftersom det tillåter användning av en trend utan att känna sig tvungen eller överväldigande.
Som ett sätt att öka läsbarheten
Använd duoton för att fungera som en färgstabilisator som ger texten gott om utrymme och kontrast. En duotonfärgläggning kan hjälpa till? Platta? färgvariationer i en bild så att texten kan placeras med en enda färg nästan överallt på bilden och fortfarande vara läsbar.
Duoton färgalternativ kommer inte att vara lika ljusa för denna användning och kommer sannolikt att verka mer dämpad, men kan tjäna en stor sak. Holm Marcher & Co. gör detta med en koral och blå duoton som är intressant och skapar en läsbar bakgrund för bokstäver. Som en extra bonus använder navigationselementen nyanser av blått från färgpaletten för att uppmuntra att flytta runt på webbplatsen.
Som ett accent
Medan duotoneffekter låter sig vara stora bilder kan de också fungera på mindre ställen. Tänk på en duotonaccent i navigeringen, för sekundära bilder eller för specifika innehållstyper.
Vad som är trevligt om mindre områden av duoton är att du har lite mer frihet att spela om du är skrämmad av tekniken eller inte helt säker på hur man får det att fungera för dig. När det används i mindre utrymmen kan det vara visuellt intressant att spela med flera färgpar för olika element i designen.
Tänk på duotonelement för kortstilelement, som överlagring för länkar till video eller för att betona samtal till handling. Duoton accenter kan också vara effektiva verktyg för användning i ett minimalt eller svartvitt färgschema på grund av den färgkontrast de skapar.
Som bakgrund
Det finns inget som en subtil duotoneffekt för att skapa en intressant bakgrundsbild eller ett mönster. Det här är en idealisk användning för varumärkesfärger eller som ett sätt att införliva en trendig nyans eller teknik i din design utan fullskalig översyn.
Den utexaminerade duotonbakgrunden för Join Radio är perfektion. Färgförändringen är nästan oanvändbar och blandar sömlöst med andra användargränssnitt i designen. Det finns en enkel animering som rör sig genom färgerna som är lugnande och har en vattenliknande rörelse åt den. Skiftet från ljus till mörkt följer naturligt öga och läsmönster som går från vänster till höger på hemsidan till höger, där användaren ytterligare uppmuntras att bläddra och klicka.
Slutsats
Det är svårt att hitta en designteknik som är roligare att spela med än färg. Duotoner är lika engagerande för designers. Effekten kan spice upp en överanvänd bild, lägga till ett roligt element när en saknas och bara hjälpa engagera användarna visuellt.
Plus, du kommer verkligen att experimentera när du använder duotone effekter. Du kan para färger som du kanske inte har föreställt dig för en stor effekt eller kombinera färger med subtila variationer för ett litet element av överraskning.Hur som helst skapar denna färgeffekt nästan alltid anpassad och kan vara kul att arbeta med.