Idag ska vi undersöka en verklig fråga som ofta möter designers. Uppdatering och gammal design kan vara en skrämmande uppgift, oavsett om det är din egen eller någon annans. När du ser en design som presenteras på ett visst sätt, är det svårt att bryta ut ur den mentala rutan, även om du inte gillar originalet.
Artikeln nedan kommer att ta itu med ett antal beröringsfrågor för designers. Vi hanterar föråldrad grafik, läsbarhet på en mörk bakgrund, information överbelastning, arbeta med texturer och mer. Fortsätt läsa för att se hur vi hanterar dessa problem.
Projektet
Dagens projekt kommer från två förfrågningar från vår designdilemma sida, en ny sektion där vi ber designers att låta oss hjälpa dem med faktiska problem, kostnadsfritt.
Den första frågan är från Atif Mohammed Ameenuddin. Atif snubblade över några fantastiska fria texturer och vill veta hur han kan införliva dessa till en attraktiv webbdesign.
Joe Elias har också problem med att designa en webbplats för en klient. Han har en första Photoshop-mockup men vet att det behöver lite hjälp. Det finns några fördelar med Joes design, men jag tycker totalt sett att det känns lite föråldrat. Jag får intrycket att en tryckdesigner försöker konvertera en flygbladdesign till webben. Dessa dagar webbdesign är mycket mer än interaktiva tryckdesign, det har ett unikt utseende som utnyttjar det rika webmediet.
Observera att webbplatsen också är för en septiktankservice! Inte den enklaste designuppgiften jag någonsin har åtagit mig men jag gillar en utmaning. låt oss hoppa in och komma igång.
Använda bakgrundsmönster
Steg ett är att gå över till Premium Pixels och ladda ner bakgrundsmönster. Dessa sparas bekvämt redan som ett Photoshop-mönsterkontakt, så att de inte kunde vara enklare att implementera.
När du har laddat ner mönsterfilen drar du bara den till Photoshop för att automatiskt installera den. Skapa sedan ett nytt RGB-dokument som ligger någonstans runt 1200px med 1300px. Fyll bakgrundsskiktet med vit och lägg till en mall för överlagringslagret. Härifrån kan du helt enkelt välja det mönster du vill ha och justera storleken efter eget tycke. Se till att du tittar på dokumentet med 100% så att du kan mäta mönstret korrekt.
Logotypen
Jag tog mig friheten att uppdatera logotypen en bit (formgivaren har sannolikt inte friheten att göra det). Det är definitivt inte bra och kan använda mer arbete men det passar det maskulina temat lite bättre.
Jag använde den befintliga skiftnyckeln och kombinerade den med en manligare typsnitt. Jag har också lagt till ett textslag med en gradient bara för att lägga till visuellt intresse. Många människor inser inte att du kan ändra Photoshop-stroke till en lutning istället för en fast färg, det här alternativet finns nära botten av streckfönstret.
De fyra rutorna
Därefter vill jag adressera de fyra rutorna som visas nedan.
En av huvudpunkterna i Joe's email var att han ville ha några layout / organisatoriska idéer. Jag tror att detta område kan omvandlas till något mycket mer dynamiskt och attraktivt med lite jQuery. Med magiska JavaScript-reglage kan vi ta all denna information och lägga den i ett område.
Det är svårt att visa i en statisk bild, men i grunden cyklar detta område automatiskt mellan fyra bilder som representerar var och en av Joe's fyra rutor ovanför. Observera att vi har gjort mycket utrymme för textinnehåll också med det avskärmade området till vänster. Det finns massor av gratis jQuery-reglage tillgängliga online, varav många har innehållsområden som den här inbyggda.
För att hjälpa bilden att sticka ut på bakgrundsstrukturen gav jag den en grundläggande polaroidbehandling. Detta innebär en droppskugga, en stroke som är inriktad på insidan (detta ger dig svåra hörn istället för rundad) och en liten inre skugga. För fotot tog jag bara något från Flickr eftersom jag inte hade de ursprungliga bilderna Joe jobbade med.
Bryta upp bakgrunden
Den ursprungliga designen hade lite text på den. Vi måste hedra kundens önskemål genom att inkludera det, men det är vårt jobb som designers att presentera informationen på ett attraktivt sätt. Vi ska göra det genom att dela upp det lite, vilket gör innehållet till mer hanterbara bitar.
Den texturerade bakgrunden kan vara lite för mycket över hela sidan så vi ska bryta upp det lite genom att lägga till en horisontell rand. Detta hjälper också visuellt att organisera innehållet.
Jag har gjort mycket här. För bannern gav jag den en mörkröd färg, liten gradient, tunn svart slag, subtil textur och skuggor som kommer från både topp och botten (klicka på bilden för att se den i full storlek). Jag kastade också in en annan bild för att hjälpa till att bryta texten upp ytterligare. Observera att det rader upp horisontellt med reglaget ovanför det. Även om banderollen sträcker sig hela vägen över sidan, måste innehållet inuti följa den layout vi har ställt in.
Resten av texten
Jag placerade den andra delen av textblocket direkt på bakgrunden under bandområdet. Den knepiga delen här är att bakgrunden gör tunn text ganska svår att läsa. Gör alltid ditt bästa för att inte offra användbarhet i namn av estetik.
För att lösa detta problem tillämpade jag helt enkelt en riktigt mörk skugga på textblocket. Detta hjälper det att sticka ut och kan enkelt uppnås med CSS, vilket gör att texten kan väljas helt.
När det kombineras med banderollsområdet ovan, ger detta en mycket mer attraktiv bit av text som inte överväldigar sidan.
Efterbehandling
Slutligen slänger vi en enkel footer längst ner på sidan med kommande kontaktuppgifter och vi är alla färdiga. Allt jag gjorde här var att göra en svart låda och minska opaciteten lite.
Och med det här är vår färdiga produkt. Klicka här för att se den i full storlek.
Som du kan se har den en mycket mer modern känsla än originalet.Ärligt talat, det misstag som de flesta designers gör är att de försöker för hårt. De klappar en sida full av allt de kan tänka sig att lägga in där och sluta med något som är upptagen och svårt att titta på. Den nuvarande trenden i professionell design är mot enkla, rena layouter med minimal distrahering och betoning på innehållet.
Som designers betyder det att vi kan ta det enkla sättet ut och ta bort alla fluffar från våra mönster tills vi hittar den perfekta balansen mellan enkel och attraktiv.
Slutsats
Sammanfattningsvis kan uppdatering av en gammal design innebära att man helt och hållet går bort från föregående layout. Fånga dig inte på att hålla saker och ting och göra stegvisa förändringar, ibland behöver du bara börja från början och leta efter en ny idé.
Om du har ett projekt som du vill ha lite hjälp på, var god och kolla in vårt Design Dilemma-program. Om vi tror att ditt problem är något som många designers kan relatera till, gör vi det till en fullblåst artikel som den här.