Interaktiv design

WebdesignerDepot Redesigned!

Og her er det ... Etter alt for mange forsinkelser, utallige mock ups og ideer, den nye {$lang_domain} er endelig her! Dette var en utrolig kompleks redesignprosess for hele WDD-teamet, men vi er svært stolte av resultatene, og vi håper at du elsker det så mye som vi gjør.

Vi lanserte det nye designet i går, og Twittersphere har gitt oss god tilbakemelding og bidrar til å identifisere noen feil. Vi har løst feil for den siste dagen og gjør det fortsatt, så vær så snill å unnskylde noen tekniske feil som du fortsatt kan komme over i løpet av de kommende dagene.

Det var viktig for oss at den nye designen holder den gamle sitteplassen så å si samtidig som den inspirerer våre besøkende og gjør den oppdatert til dagens webdesign standarder og teknikker.

Den nye hjemmesiden, spesielt, gjør en bedre jobb ved å introdusere nye besøkende til nettstedet vårt. Du vil legge merke til at navigasjons- og informasjonsstrukturen er mye renere og klarere nå.

I dette innlegget går vi inn i noen flere detaljer om hva som er nytt og hva som foregikk bak kulissene for å få deg denne nye versjonen av WDD. Så, la oss dykke rett inn!

Hvis du har vært en av våre 40 millioner besøkende (!) I løpet av de siste årene, vil du legge merke til at designen er, ja, hvordan sier du det? Radikalt annerledes! Faktisk har ingen av de gamle designene blitt holdt. Vi kastet det hele bort og begynte å friske fra bakken. Dette er så radikalt som du kan få med et redesign, og det bærer visse farer for oss da vi mister våre tidligere merkevarefordeler til fordel for det vi tror er et bedre valg for vårt nettsted, innholdet og viktigst: DIG, våre fantastiske lesere !

La oss starte med noen studiepoeng for å se hvem som står bak alt dette ...

Så her er det som er nytt i dette designet:

Hybrid layout: Magazine & tradisjonell blogg stil

Mens den gamle designen hadde et tradisjonelt bloggoppsett, med de nyeste innleggene som alltid vises øverst, er den omdesignede versjonen en hybrid mellom et magasinstil og en tradisjonell bloggoppsett. Vi finner at dette fungerer ganske bra for innholdet vårt. Det bredere oppsettet gjorde det mulig for oss å bringe mye mer innhold inn på hjemmesiden, mens de to kolonnene på hjemmesiden gjør det enklere å lese enn noen tradisjonelle magasinstilblogger der innholdet til tider kan være overveldende.

Utvalgt innhold

Blogginnleggene er interspersed av tre funksjoner: 2 vertikale og 1 horisontale. De vertikale områdene har noen av de heteste emnene akkurat nå på nettstedet (responsiv design, jQuery, etc), mens det horisontale området brukes til å vise frem de nyeste tilbudene fra nettstedet MightyDeals.com. Totalt kan vi ha 10 innlegg enn det vi tidligere brukte i design uten å overvinne leserne våre.

Balanse og vekt

Hjemmeside: På grunn av det tunge bildet, forsøkte vi å holde en jevn balanse mellom tekst og bilder ved å vise tilstrekkelig forhåndsvisningsinnhold for hvert innlegg. For de faktiske artikelsidene valgte vi å ha bilder og kodestykker i full bredde, mens teksten vises sentrert på en smalere bredde til bildene. Dette gjør nettstedet raskere og enklere å lese (eller skanne) og viser bildene med størst mulige størrelser for maksimal effekt. For bildene i eldre innlegg og andre smalere bilder valgte vi å vise grå barer på siden, som minner om de svarte linjene du ser når du ser på et standarddefinisjonsprogram på et HD-TV. Dette var det beste kompromisset vi kunne finne for å integrere de eldre innleggene i det nye utseendet på nettstedet uten å ettermontere hundrevis av innlegg!

Responsiv utforming

Det nye nettstedet er nå fullt responsivt og ser bra ut om du er på en stasjonær datamaskin, bærbar PC, nettbrett eller smart telefon. Sjekk ut smartversjonen som den ser ut og føles mer som en app enn et nettsted, og vi er veldig stolte av hvordan denne viste seg. Det laster også raskt!

Retina grafikk

Når Apple ruller ut flere netthinnenheter, blir høyoppløsningsdisplayene mer relevante for nettsteder. Den nye WDD serverer netthinnen grafisk hvor det er mulig. Nettstedets design ser perfekt skarpt ut på netthinnen. Fremover vil vi ha optimalisert grafikk i netthinnen i alle innleggene der det er mulig. Dette er lettere sagt enn gjort fordi nettet ikke er helt retina klar ennå, faktisk har svært få nettsteder betjent stor høyoppløselig grafikk på dette tidspunktet. Noen av våre siste innlegg er allerede delvis retina klar og noen vil bære dette i fremtiden. Vi har også hørt at retina-annonser kanskje ikke er for langt i fremtiden.

Forbedret navigasjon

Du ser et plustegn på høyre side av nettleserne dine (ikke på mobile enheter) når du ser på artikler. Når du klikker på, åpnes dette en mini-nettleser som lar deg navigere gjennom den nåværende artikkelen, for eksempel å bla gjennom innholdsfortegnelsen til en eBok. Du kan også dele den nåværende artikkelen via mini-nettleseren, eller se relaterte artikler, samt lese neste og forrige innlegg.

Kunsten

Igjen samarbeidet vi med über talentfull illustratør Radim Malinic for å skape kunsten til vårt nye nettsted. Radim er en prisvinnende kunstdirektør og grafisk designer, basert i London, England. Under navnet Brand Nu han jobber med ledende husholdningsvarer. Siden den originale WDD-webdesignen har han gått videre med å jobbe med Goldman Sachs, Bacardi, Blistex, London Film Museum og mange flere. Hans stil av arbeid er en av de mest varierte i bransjen. Hans dristige og fargerike design inspirerer mange mennesker som ser dem. Vi spurte Radim om å fokusere sitt design på sirkler denne gangen, da dette er en tidløs form som er ekstremt populær og foretrukket i dagens nettside design.

Parallax

Den nye kunst og logoen på toppteksten blir levendegjort med en 5-lagers parallax-effekt (beveger seg i forskjellige priser) i header-delen av nettstedet. For å se det, flytt bare musen rundt topptekstområdet (ikke på mobile enheter). Vi synes det ser ganske kult ut og legger til et morsomt element på nettstedet! [UPDATE] Parallax-effekten ble elsket av de fleste, men noen likte det ikke, så vi la til muligheten til å slå den av ved å høyreklikke på effektområdet.

logo

Selv om den gamle logoen viste oss godt og var godt likt, da dette var et komplett redesign, var en ny logo i orden! Vi samarbeidet denne gangen med Steven Bonner å redesign vår logo. Han er en veldig talentfull typograf basert i Skottland med en misunnelsesverdig portefølje av typegods illustrasjoner for noen av verdens største merkevarer. Vi synes det viste seg bra og balanserer stedet godt med en personlig hånd trukket berøring, mens du ser profesjonell og polert på samme tid.

typografi

Vi dro til slutt de gamle kjedelige systemfonter til fordel for Typekit-webfonter, brukt utelukkende over hele nettstedet. Vi bruker Kulturista for alle toppene som ser bra ut og har en fin personlighet og unik følelse. For kroppsteksten vi valgte Proxima Nova som har enestående lesbarhet og er perfekt for store biter av tekst. For overskrifter, vi også vurdert Adelle , og for kroppstekst vi også vurdert Museo Sans, Adelle Sans , Myriad og Helvetica .

Pictos Ikon skrifttype

Vi bruker mange ikoner i denne nye designen. Ikonene er en del av det fantastiske Pictos ikon skrifttype designet av Drew Wilson . Vi bruker det enda for våre animerte sosiale ikoner nederst på siden.

bunntekst

Vi har 2 bunntekstområder nederst på siden. Den første fremhever noen områder som vi mener er viktige å understreke, og da har du en mer tradisjonell utseende i bunnen med det meste tekstforbindelser og noen animerte sosiale ikoner.

Sosial integrering

Vi ønsket å vise våre lesere på en større måte, så den nye WDD er mye mer sosial enn før. Vi har nå dine kommentarer og retweets rett under hvert innlegg på hjemmesiden. Så, hvis du vil ha litt berømmelse, kan du nå få avataren din der for hele verden å se! Vel, det er litt overdrevet!

Færre annonser

Ok, noen gode og noen dårlige nyheter. Noen av annonsene våre har blitt større, men vi har også kuttet ned antallet annonser som kjører på nettstedet. Vi innrømmer at gjennom årene våre ble litt for oppblåst med annonser, så dette var en flott mulighet til å rydde opp ting. Dette har gjort oppsettet renere og mer estetisk tiltalende å navigere, samtidig som det fortsatt er i stand til å kunne betale leien - ikke glem å støtte våre gode sponsorer :)

Depot.ly

Dette er faktisk et par uker gammelt: Vi begynte å bruke depot.ly kort URL for våre tweets, slik at du kan gjenkjenne våre innlegg i alle sosiale kanaler du bruker. Ganske nyttig vi tror!

Mer innhold

Som du kanskje har lagt merke til, begynte vi nylig å legge ut flere artikler hver dag. Selv om redaksjonelle stillinger har vært og fortsetter å være essensen av innholdet, dekker vi nå aktuelle nyheter og mini-innlegg som vil passe godt for designerne og utviklerne som besøker nettstedet vårt. Vi føler at dette holder nettstedet mer aktuelt og i kontakt med hva som skjer i verden akkurat nå uten å bruke hele redaksjonellene for hvert innlegg.

Vi oppdaget mange problemer med å få dette designet til å fungere på tvers av alle nettlesere og enheter (og gjør det fortsatt!). Faktisk var dette årsaken til noen av de siste minuttforsinkelsene vi opplevde. Vi var ment for å starte i forrige uke, men mange problemer med nettleseren reduserte oss. Beklager for det! Firefox var spesielt utfordrende, men IE 8 viste seg å være verre og årsaken til mange hodepine og frustrasjoner for kodene våre. Siden lanseringen vår i går har vi fått mye ekstra info via Twitter av problemer som fortsatt må løses. Takk for tålmodigheten mens vi adresserer disse.

Det du ser idag er den nye designen, men det er ikke alt. Vi planlegger å legge til noen nye ting snart. Du vil lære mer om dette i de kommende ukene.

Vi alle elsker den nye designen personlig, og vi forventer at den skal fortsette å utvikle seg basert på tilbakemelding. Vi vil virkelig sette pris på det hvis du fortsatt kan gi oss beskjed om alt du vil at vi skal forbedre. Gi oss også beskjed om du opplever problemer med nettleserskompatibilitet eller problemer på bestemte mobile enheter som du bruker slik at vi raskt kan adressere dem.

Som alltid er vi dypt og enormt takknemlige for alle dere for å støtte WDD for alle disse årene. Fra hele laget her på WDD, en stor takk til hver av dere, og vi håper at dette nye designet inspirerer deg og serverer deg bra mens du surfer på nettstedet vårt.

Hva synes du om det nye WDD-redesignet? Vi ønsker velkommen din tilbakemelding!

responsiv utforming webdesign redesign WDD retina grafikk webdesignerdepot