Interaktiv design

WebdesignerDepot Redesigned!

Och här är det ... Efter alltför många förseningar, otaliga mock ups och idéer, den nya {$lang_domain} är äntligen här! Detta var en oerhört komplex redesignprocess för hela WDD-laget, men vi är mycket stolta över resultaten och vi hoppas att du älskar det så mycket som vi gör.

Vi lanserade den nya designen igår och Twittersphere har gett oss bra feedback och hjälper till att identifiera några buggar. Vi har fixat buggar för den senaste dagen och gör det fortfarande, så snälla ursäkta några tekniska glitches som du fortfarande kan komma över de kommande dagarna.

Det var viktigt för oss att den nya designen håller den gamla sajten så att säga, samtidigt som vi inspirerar våra besökare och håller den uppdaterad med nuvarande webbdesignstandarder och tekniker.

Den nya hemsidan, i synnerhet, gör ett bättre jobb för att introducera nya besökare på vår webbplats. Du märker att navigations- och informationsstrukturen är mycket renare och tydligare nu.

I det här inlägget kommer vi att gå in på några fler detaljer om vad som är nytt och vad som hänt bakom kulisserna för att få dig den här nya versionen av WDD. Så, låt oss dyka in!

Om du har varit en av våra 40 miljoner besökare (!) Under de senaste åren märker du att designen är bra hur man säger det? Radikalt annorlunda! Faktum är att ingen av den gamla designen har hållits. Vi kastade det hela och började fräscha från grunden. Det här är lika radikalt som du kan få med en redesign och det medför vissa risker för oss, eftersom vi förlorar våra tidigare varumärkesfördelar till förmån för vad vi tror är ett bättre val för vår webbplats, dess innehåll och viktigast: DIG, våra fantastiska läsare !

Låt oss börja med några poäng för att se vem som står bakom allt detta ...

Så här är det som är nytt i denna design:

Hybrid layout: Magazine & traditionell bloggstil

Medan den gamla designen hade en traditionell blogglayout, med de senaste inläggen alltid uppe på toppen, är den omdesignade versionen en hybrid mellan en magasinstil och en traditionell blogglayout. Vi finner att detta fungerar ganska bra för vårt innehåll. Den bredare layouten gjorde det möjligt för oss att ge mycket mer innehåll till hemsidan, medan de två kolumnerna på hemsidan gör det enklare att läsa än några traditionella tidningsstilbloggar där innehållet ibland kan vara överväldigande.

Innehåll

Bloggposterna är inskränkta av tre utvalda områden: 2 vertikala och 1 horisontella. De vertikala områdena har några av de hetaste ämnena just nu på webbplatsen (responsiv design, jQuery, etc), medan det horisontella området används för att visa de senaste erbjudandenen från vår webbplats MightyDeals.com. Totalt kan vi ha 10 fler inlägg än vad vi brukade i tidigare design utan att övervinna våra läsare.

Balans och vikt

Hemsida: På grund av den tunga bilden, försökte vi hålla jämvikt mellan text och bilder genom att visa tillräckligt med förhandsgranskning av textinnehåll för varje inlägg. För de faktiska artikelsidorna valde vi att ha bilder och kodfragment i full bredd, medan texten visas med en smalare bredd till bilderna. Detta gör webbplatsen snabbare och lättare att läsa (eller skanna) och visar bilderna i sina största möjliga storlekar för maximal effekt. För bilderna i äldre inlägg och andra smalare bilder valde vi att visa grå staplar på sidan, vilket påminner om de svarta staplarna som du ser när du tittar på en standarddefinitionsvisning på en HD-TV. Det här var den bästa kompromissen vi kunde hitta för att integrera de äldre inläggen i det nya utseendet på webbplatsen utan att eftermontera hundratals inlägg!

Responsiv design

Den nya webbplatsen är nu fullt lyhörd och ser bra ut om du är på en stationär dator, bärbar dator, surfplatta eller smartphone. Kolla in den smarta telefonen versionen som den ser ut och känns mer som en app än en webbplats och vi är verkligen stolta över hur den här visade sig. Det laddas också snabbt!

Näthinnans grafik

Med Apple rullar ut mer näthinnanheter blir skärmar med högre upplösning mer relevanta för webbplatser. Den nya WDD serverar retina grafik där det är möjligt. Webbplatsens design ser helt skarp ut på näthinnanordningar. Framöver kommer vi att ha näthinnan optimerad grafik i alla våra inlägg, där det är möjligt. Det här är lättare sagt än gjort eftersom webben inte är helt näthinnan redo ännu, faktiskt har väldigt få platser som serverar stor högupplöst grafik just nu. Några av våra senaste inlägg är redan delvis retina redo och några kommer att bära detta i framtiden. Vi hörde också att näthinnonsannonser inte kan vara för långt i framtiden.

Förbättrad navigering

Du kommer att märka ett plustecken på höger sida av dina webbläsare (inte på mobila enheter) när du tittar på artiklar. När du klickar på öppnas det en mini-webbläsare som låter dig navigera genom den aktuella artikeln, som att bläddra igenom innehållsförteckningen i en eBook. Du kan också dela den aktuella artikeln via minis webbläsaren, eller se relaterade artiklar, samt läsa nästa och föregående inlägg.

Konsten

Återigen samarbetade vi med über den talangfulla illustratören Radim Malinic för att skapa konsten för vår nya sajt. Radim är en prisbelönt konstdirektör och grafisk designer, med säte i London, England. Under namnet Brand Nu han arbetar med ledande hushållsmärken. Sedan den ursprungliga WDD-webbdesignen har han fortsatt arbetat med Goldman Sachs, Bacardi, Blistex, London Film Museum och många fler. Hans arbetsstil är en av de mest mångsidiga inom branschen. Hans djärva och färgstarka mönster inspirerar många människor som ser dem. Vi bad Radim att fokusera sin design på cirklar den här gången, eftersom det här är en tidlös form som är extremt populär och gynnad i dagens webbdesign.

Parallax

Den nya konsten och logotypen på rubriken kommer till liv med en 5-lags parallell-effekt (flyttar i olika takt) i rubrikens avsnitt. För att se det, rör bara musen runt rubrikområdet (inte på mobila enheter). Vi tycker att det ser ganska cool ut och lägger till ett roligt element på webbplatsen! [UPDATE] Parallax-effekten älskades mest, men vissa människor tyckte inte om det, så vi lade till möjligheten att stänga av det genom att högerklicka på effektområdet.

Logotyp

Även om den gamla logotypen tjänade oss bra och gillade, eftersom det här var en komplett redesign, var en ny logotyp i ordning! Vi samarbetade denna gång med Steven Bonner att redesigna vår logotyp. Han är en mycket begåvad typograf baserad i Skottland med en avundsvärd portfölj av typledda illustrationer för några av världens största märken. Vi tycker att det visade sig bra och balanserar webbplatsen bra med en personlig handritad touch, samtidigt som du ser professionell och polerad på samma gång.

Typografi

Vi drog äntligen de gamla tråkiga systemfonterna till förmån för Typekit-webbfonter, som används exklusivt på hela webbplatsen. Vi använder Kulturista för alla huvud som ser bra ut och har en trevlig personlighet och unik känsla. För kroppstexten vi valde Proxima Nova som har utmärkt läsbarhet och är utmärkt för stora bitar av text. För rubriker, vi också övervägt Adelle , och för kroppstext vi också betraktat Museo Sans, Adelle Sans , Myriad och Helvetica .

Pictos Ikon typsnitt

Vi använder många ikoner i den här nya designen. Ikonerna är en del av den fantastiska Pictos ikon typsnitt designad av Drew Wilson . Vi använder det även för våra animerade sociala ikoner längst ner på sidan.

sidfot

Vi har 2 sidfot på botten av sidan. Den första lyfter fram några områden som vi anser är viktiga att betona, och sedan har du en mer traditionell fotboll längst ner med mestadels textlänkar och några animerade sociala ikoner.

Social integration

Vi ville visa våra läsare på ett större sätt, så den nya WDD är väldigt socialt än tidigare. Vi presenterar nu dina kommentarer och retweets rätt under varje inlägg på hemsidan. Så, om du vill ha lite berömmelse, kan du nu få din avatar precis där för att hela världen ska se! Tja, det är lite överdrivet!

Färre annonser

Okej, några bra och några dåliga nyheter. Vissa av våra annonser har blivit större, men vi har också minskat antalet annonser som körs på webbplatsen. Vi erkänner att våra hemsidor genom åren blev lite uppblåsta med annonser, så det här var en utmärkt möjlighet att städa upp saker. Detta har gjort layouten renare och mer estetiskt tilltalande att navigera, samtidigt som du fortfarande kan betala hyran - glöm inte att stödja våra snälla sponsorer :)

Depot.ly

Den här är faktiskt ett par veckor gammalt: vi började använda den depot.ly korta URL-adressen för våra tweets, så du kan känna igen våra inlägg i alla sociala kanaler som du använder. Ganska bra vi tror!

Mer innehåll

Som du kanske har märkt, började vi nyligen lägga ut fler artiklar varje dag. Även om redaktionella inlägg har varit och fortsätter att vara kärnan i vårt innehåll täcker vi nu relevanta nyheter och miniinlägg som passar de designers och utvecklare som besöker vår webbplats. Vi anser att detta håller webbplatsen mer aktuell och i kontakt med vad som händer i världen just nu utan att tillgripa hela redaktionen för varje inlägg.

Vi stötte på många problem att få denna design att fungera över alla webbläsare och enheter (och gör det fortfarande!). Det var faktiskt orsaken till några av de sista minuten förseningar som vi upplevde. Vi var tänkt att starta förra veckan, men många webbläsarsproblem saktade oss ner. Förlåt för det! Firefox var särskilt utmanande, men IE 8 visade sig vara värre och orsaken till många huvudvärk och frustrationer för våra kodare. Sedan lanseringen igår har vi fått mycket extra information via Twitter om problem som fortfarande behöver lösas. Tack för ditt tålamod när vi talar om dessa.

Vad du ser idag är den nya designen, men det är inte allt. Vi planerar att lägga till några nya saker snart. Du kommer lära dig mer om detta under de närmaste veckorna.

Vi älskar alla personligen den nya designen och vi förväntar oss att den fortsätter att utvecklas baserat på din feedback. Vi kommer verkligen uppskatta det om du fortfarande kan informera oss om allt som du vill att vi ska förbättra. Också, låt oss veta om du råkar hitta några problem med webbläsarkompatibilitet eller problem med några speciella mobila enheter som du använder så att vi snabbt kan ta itu med dem.

Som alltid är vi djupt och oerhört tacksamma för er alla för att stödja WDD under alla dessa år. Från hela laget här på WDD, ett stort tack till var och en och vi hoppas att denna nya design inspirerar dig och tjänar dig bra medan du surfar på vår webbplats.

Vad tycker du om den nya WDD-omformningen? Vi välkomnar din feedback!

responsiv design webbdesign designa om WDD näthinnans grafik webdesignerdepot