Twitter har nyligen utarbetat en uppdaterad design för profilsidor, som låter dig infoga ett nytt? Header-foto? som sitter ovanpå ditt flöde, ungefär som Facebooks tidslinjeöverdragsbild.
Idag ska vi dyka in och se några exempel på bra Twitter-profilbilder och diskutera hur du kan designa din egen. Jag kommer även att kasta i en fri mall så att du kan komma igång direkt.
Gratis mall!
Innan vi dyker in i artikeln är här en praktisk fri mall som du kan använda för att designa din egen Twitter-header-bild. Den tillhandahållna filen är en PSD skapad i Photoshop CS6.
Ta din gratis PSD: Klicka här för att ladda ner.
Hur man använder det
För att använda denna mall, ersätt helt enkelt bakgrundsbilden. UI-laggruppen är avsedd att hjälpa dig att få en bra bild av hur bilden ska se ut när den är implementerad på webbplatsen. Dölj de grupperade lagren innan du sparar.
Träffa den nya Twitter-profilen
En gång i tiden var Twitter en text-centrerad tjänst. Dessa dagar försöker de kontinuerligt förbättra den visuella upplevelsen genom att integrera multimediafunktioner och support.
Den senaste profilredigeringen driver denna idé genom mer framträdande bildflöden och en helt ny funktion: Twitter-profilhuvudet.
Som du kan se ligger den här nya bilden ovanpå dina senaste tweets och håller din profilbild samt en kortfattad text om dig. För att hjälpa till att starta de nya profilerna verkar Twitter ha samarbetat med NBC, så mycket av våra exempel kommer att vara från sina olika konton (inte alla användare har uppgraderat än).
I slutändan lägger detta inte till ett ton av designarbete till din profil, det är helt enkelt en extra bild. Men även en liten bild kan ge många frågor, så jag är här för att svara på några som du kanske har när du närmar dig att bygga din Twitter-huvudbild.
Hur ställer du in ditt profilhuvud?
Den första frågan som du är tvungen att fråga är hur slår du på den här saken? Om du går över till din profil kommer det att se ut som det alltid gjorde. För närvarande behåller användare som inte har skapat en headerbild den gamla designen.
För att uppgradera din profil klickar du på inställningsdrevet högst upp på sidan. Härifrån klickar du på? Design? fliken i navigeringsfältet till vänster.
När du är på designsidan, bläddra ner till? Anpassa din egen? sektion. Här får du se en? Ändra rubrik? knapp. Klicka bara på det och ladda upp din bild för att ställa in ditt rubrik.
Det är allt det finns! Nu måste du bara bestämma vad du ska sätta där!
Vilken storlek?
Nästa viktiga fråga att fråga när du utformar din profilhuvud är, vilken storlek ?? Om vi tittar på NBC-bilderna som Twitter utan tvekan hjälpt personligen att skapa, ser vi att storleken är 520px bred med 260px lång.
I slutändan bryter det ner till ett förhållande av 2: 1 bredd till höjd med en maximal uppladdningsstorlek på 5 MB eller 1252 px med 626 px.
Designtips och överväganden
Storleken på den bild du laddar upp är inte det enda övervägandet du behöver tänka på. Jag har märkt några quirks som du definitivt behöver veta om du ska dra av en lyckad design.
Titta på din läsbarhet
För att experimentera med utrymmet på mitt personliga konto tog jag ett slumpmässigt foto som jag tog av en digital skärm i New York City. Det verkade som om det skulle göra den perfekta abstrakta bakgrunden. Här är resultatet:
Som du kan se är det en ganska attraktiv visuell. Problemet är dock att det stör en del text, och jag är en läsbarhetsmutter.
Självklart, med den vita texten vill du ha en bakgrund som är anständigt mörk. Gruvan passar denna beskrivning, men lamporna fungerar som ljusa punkter som minskar kontrasten mellan bokstäverna och bakgrunden och lägger till för många distraktioner.
Lösningen här är ganska enkel, jag mörkade bara den bakgrunden där texten ligger så att ljusen inte stör så mycket. Resultatet är inte så coolt visuellt, men det är mycket mer läsligt:
Twitter skruvar med din bild
Folk på Twitter vet att tricket jag använde ovan, mörkande bildens botten, är något som kommer att behöva göras på många bilder. Faktum är att webbplatsen faktiskt gör det automatiskt om du vill ha det eller inte.
Som ett test tog jag den här bilden och prepped den för Design Shack header. Så här ser jag i Photoshop:
Nu, om jag laddar upp den bilden som du ser ovanstående, så är resultatet som det visas på vår profilsida:
Se skillnaden? En bakgrundsgradient har automatiskt applicerats, avsevärt mörkande de ursprungliga färgerna. Det är en subtil effekt på de flesta bilder, men när man kommer in i något med mindre detaljer står det verkligen upp.
Det här är verkligen inte en dålig sak, det hjälper verkligen texten stannar ut, det är bara något att tänka på när du förbereder din bild. Observera också att Twitter automatiskt applicerar avrundade hörn till både profil och huvudbild.
Designtips
Nu när vi vet allt om hur man skapar och tillämpar vår bild, låt oss ta en titt och se vad andra gör med detta område för lite inspiration.
Integrera din profilbild
En av de bästa jag hittills har sett är Ryan Seacrests. Jag älskar integrationen av profilbilden i huvudbilden. Lysande. Du kan helt förvänta dig att se ton av användare som försöker dra av det på olika sätt.
Visa av ditt arbete
Graham Smith, allas favoritlogotypdesigner, hoppade på möjligheten att uppdatera sin profil direkt. Hans idé är enkel och effektiv: det visar sitt arbete i ett fint, underdimensionellt nät med logotyper.
Matcha din profilbakgrund
En sak att tänka på när du jobbar med ditt huvudbild är att det faktiskt är en del av en större design och ska gå bra med din bakgrundsbild.
Vi ser det här bra på det nya nyhetskontot nedan. Rubrikbilden är en röd världskarta bestående av pixlar.
Detta är faktiskt samma bild som de använde på sidobakgrunden, bara mindre och i en annan färg. Detta ger en fin konsekvent utseende.
Jag älskar hur den stora bakgrunden är den subtilare versionen medan huvudbilden verkligen tar tag i din uppmärksamhet med en djärv färg.
Håll det enkelt
Om du har problem med att komma med en bra header image, kom ihåg tre kraftfulla ord: håll det enkelt. Även bortsett från bilden är det mycket på gång i detta utrymme och ditt mål är att knyta allt ihop, inte komplicera det.
I Twitters egen utökade familj ser vi några bra och dåliga exempel på detta. Twitter grundare Evan Williams har definitivt valt dåligt med en grafik som är mycket för upptagen för detta utrymme.
Jämför det här med bilden som används av Twitter Bootstrap skaparen Mark Otto. Hans val är mycket bättre:
Det här är trevligt, enkelt och faktiskt ganska slående. Det mesta av bilden är blankutrymme (svart utrymme i det här fallet), så det är inte så mycket att störa texten. Innehållet representerar en händelse som debiteras med känslor och undrar för oss alla, vilket ger en minnesvärd upplevelse.
Visa oss ditt!
Där har du det, allt du behöver veta om att skapa den perfekta Twitter-header-bilden. Nu när du har läst mina tips och sett en bra inspiration, gör du själv med vår gratis mall!
När du har fått din Twitter-header-bild så redo att gå, lämna en kommentar nedan med en länk så att vi kan se vad du kom fram till.