Interaktiivinen muotoilu

WebdesignerDepot uudistettiin!

Ja täällä se on ... Jälkeen liikaa viivästyksiä, lukemattomia mallistoja ja ideoita, uutta {$lang_domain} on vihdoin täällä! Tämä oli uskomattoman monimutkainen uudistusprosessi koko WDD-tiimille, mutta olemme erittäin ylpeitä tuloksista ja toivomme, että rakastat sitä yhtä paljon kuin me.

Laitimme uuden suunnittelun eilen ja Twittersphere on antanut meille hyvää palautetta ja auttanut tunnistamaan joitain vikoja. Olemme tehneet virheitä viime päivälle ja olemme edelleen tekemässä niin, joten pyydä vanhoja teknisiä häiriöitä, joita saatat vielä kohdata tulevina päivinä.

Oli tärkeää meille, että uusi muotoilu pitää vanhan sivuston sielun puhumalla samalla kun innostaa kävijöitä ja päivittää ne nykyisiin web-suunnittelustandardeihin ja -tekniikoihin.

Erityisesti uusi kotisivu tekee parempia työpaikkoja uusien kävijöiden ottamiseksi käyttöön sivustollamme. Huomaat, että navigointi- ja tietorakenne on paljon puhtaampaa ja selkeämpää nyt.

Tässä viestissä tutustumme uusiin versioihin WDD: n uudesta versiosta, joka sisältää uusia tietoja ja mitä tapahtui kulissien takana. Joten, sukeltava oikein!

Jos olet ollut viimeisen 40 miljoonan kävijämme (!), Huomaat, että muotoilu on, miten sanoa? Radikaalisti erilainen! Itse asiassa mitään vanhaa muotoilua ei ole säilytetty. Heitimme kaiken pois ja aloitimme tuoreesta maasta ylös. Tämä on yhtä radikaalia kuin voit saada uudelleensuunnittelulla, ja sillä on tiettyjä riskejä meille, kun menetämme aikaisemmat brändäysetuja sen hyväksi, mitä uskomme olevan parempi valinta sivustollemme, sen sisällölle ja mikä tärkeintä: te, uskomattomat lukijamme !

Aloitetaan joitain hyvityksiä nähdäksesi, kuka on tämän kaiken takana ...

Joten tässä on uusi muotoilu:

Hybridisuunnittelu: aikakauslehti ja perinteinen blogityyli

Vaikka vanha muotoilu oli perinteinen blogin asettelua, ja viimeisimmät viestit näkyvät aina ylhäällä, uudistettu versio on hybridi lehden tyylin ja perinteisen blogin ulkoasun välillä. Olemme sitä mieltä, että tämä toimii hyvin sisällöllämme. Laajempi ulkoasu antoi meille mahdollisuuden tuoda entistä enemmän sisältöä etusivulle, kun taas kotisivun 2 saraketta helpottaa lukemista kuin perinteiset aikakauslehti-blogit, joissa sisältö voi joskus olla ylivoimainen.

Suositeltu sisältö

Blogikirjoitukset ovat keskellä kolmea esillä olevaa aluetta: 2 pystysuoraa ja 1 vaakasuora. Pystysuorilla alueilla on joitain kuumimmista aiheista juuri tällä sivustolla (reagoiva muotoilu, jQuery jne.), Kun taas horisontaalinen alue on tarkoitettu esittelemään uusimmat tarjoukset sivustollamme MightyDeals.com. Kaiken kaikkiaan meillä voi olla 10 muuta viestiä kuin aiemmassa suunnittelussa, ilman että voimme lukita lukijoidemme.

Tasapaino ja paino

Kotisivu: Raskaiden kuvamateriaalien ansiosta yritimme pitää tasaisen tasapainon tekstin ja kuvien välillä näyttämällä riittävästi esikatselisisältöä jokaiselle viestille. Varsinaisille artikkelisivuille valitsimme kuvan ja koodinpätkän täydellä leveydellä, kun teksti näytetään keskelle kuvan kapeampaan leveyteen. Tämä tekee sivustosta nopeamman ja helpommin lukea (tai skannaa) ja näyttää kuvat suurimmilla mahdollisilla kokoluokillaan mahdollisimman tehokkaaksi. Vanhojen viestien ja muiden kapeammien kuvien kuvia varten valitsimme sivut harmaille palkkeille, jotka muistuttavat mustia palkkeja, joita näet katsellessasi teräväpiirtotelevision standardimäärityssisältöä. Tämä oli paras kompromissi, jonka voimme löytää integroimaan nämä vanhemmat viestit sivuston uusiin ilmeisiin ilman satoja virkoja jälkikäteen!

Responsive design

Uusi sivusto on nyt täysin reagoiva ja näyttää hyvältä, oletko pöytätietokoneessa, kannettavassa tietokoneessa, tabletissa tai älypuhelimessa. Tutustu älypuhelimen versioon, koska se näyttää ja tuntuu enemmän kuin sovellus kuin verkkosivusto ja olemme todella ylpeitä siitä, miten tämä osoittautui. Se lataa myös nopeasti!

Retina-grafiikka

Kun Apple kehittyy lisää verkkokalvon laitteita, suuremmat tarkkuusnäytöt ovat yhä tärkeämpiä verkkosivustoille. Uusi WDD palvelee verkkokalvon graafista kuvausta aina kun se on mahdollista. Sivuston muotoilu näyttää täydellisesti verkkokalvon laitteilta. Jatkossa meillä on retina optimoidut grafiikat kaikkiin viesteihimme aina, kun se on mahdollista. Tämä on helpommin sanottu kuin tehty, koska verkko ei ole täysin verkkokalvo valmiina, itse asiassa hyvin harvat sivustot palvelevat suuria suuriresoluutioisia grafiikoita tällä hetkellä. Jotkut viimeisimmistä virkoistamme ovat jo osittain verkkokalvon valmis, ja jotkut jatkavat tätä tulevaisuudessa. Kuulimme myös, että retina-mainokset eivät välttämättä ole liian kaukana tulevaisuudessa.

Tehostettu navigointi

Huomaat plus-merkin selaimesi oikealla puolella (ei mobiililaitteilla), kun tarkastelet artikkeleita. Kun napsautat tätä, avaat mini-selain, jonka avulla voit siirtyä nykyisen artikkelin läpi, kuten selaamalla eBookin sisällysluettelosta. Voit myös jakaa nykyisen artikkelin mini-selaimen kautta tai tarkastella niihin liittyviä artikkeleita sekä lukea seuraavia ja edellisiä viestejä.

Taide

Jälleen kerran toimimme yhdessä lahjakkaan kuvittajan Radim Malinicin kanssa luomassa taidetta uudelle sivustollemme. Radim on palkittu taiteen johtaja ja graafinen suunnittelija, joka sijaitsee Lontoossa Englannissa. Nimen alla Tuotemerkki Nu hän työskentelee johtavien kotitalouksien brändien kanssa. Alkuperäisen WDD: n verkkosivujen suunnittelusta lähtien hän on työskennellyt yhteistyössä Goldman Sachsin, Bacardin, Blistexin, London Film Museumin ja monien muiden kanssa. Hänen tyylinsä on yksi alan monista. Hänen rohkeat ja värikkäät mallit innostavat paljon ihmisiä, jotka näkevät heidät. Pyysimme Radimiä keskittymään piireihin tällä kertaa, koska tämä on ajattomia muotoja, joka on erittäin suosittua ja suosittua nykyisissä verkkosivujen suunnittelussa.

Parallaksi

Yläosassa oleva uusi taide ja logo tuodaan esiin 5-kerroksisen parallaksivaiheen vaikutuksesta (liikkuu eri tasoilla) verkkosivuston otsikko-osassa. Jos haluat nähdä sen, siirrä hiiri hiiren otsikon alueella (ei mobiililaitteissa). Mielestämme se näyttää aika cool ja lisää elementti hauskaa sivustolle! [UPDATE] Parallaalis-vaikutusta rakastettiin useimmilla, mutta jotkut eivät pitäneet siitä, joten lisäsimme vaihtoehdon sammuttaa se klikkaamalla vaikutusalueen oikealla puolella.

Logo

Vaikka vanha logo palveli meitä hyvin ja oli hyvin pidetty, koska tämä oli täydellinen uudelleensuunnittelu, uusi logo oli kunnossa! Olemme tehneet yhteistyötä tällä kertaa Steven Bonner logon uudelleensuunnittelu. Hän on erittäin lahjakkaa skotlantilainen painajainen, jolla on kadehdittava tyypin johtamien kuvitusten valikoima joillekin maailman suurimmista brandeista. Mielestämme se osoittautui erinomaiseksi ja tasapainottaa sivuston hyvin henkilökohtaisella kädensijaisella kosketuksella samalla kun katsot ammattimaisia ​​ja kiillotettuja samaan aikaan.

Typografia

Lopultamme lopulta vanhoja tylsistyneitä fontteja Typekit-fonttien hyväksi, joita käytetään yksinomaan koko sivustolla. Käytämme Kulturista kaikille upeille otsikoille ja mukava persoonallisuus ja ainutlaatuinen tunnelma. Kehon tekstistä valitsimme Proxima Nova joka on loistava luettavuus ja sopii suurille palasille tekstiä. Myös otsikoita harkitsimme Adelle , ja kehon tekstiä pidimme myös museon Sans, Adelle Sans , Myriad ja Helvetica .

Pictos-kuvake fontti

Käytämme paljon kuvakkeita tässä uudessa mallissa. Kuvakkeet ovat osa mahtavaa Pictos-kuvakefontti suunnitellut Drew Wilson . Käytämme sitä jopa animoitujen sosiaalisten kuvakkeiden alla sivuston alareunassa.

Alatunniste

Sivustojen alaosassa on 2 alatunnistealuetta. Ensimmäinen korostaa joitain alueita, jotka tunnemme tärkeiksi korostaaksemme, ja sitten sinulla on perinteisempää alhaalla olevaa alaotsikkoa useimmiten tekstiyhteystietojen ja animoitujen sosiaalisten kuvakkeiden kanssa.

Sosiaalinen integraatio

Halusimme esitellä lukijamme isommalla tavalla, joten uusi WDD on aikaisempaa sosiaalisempi. Meillä on nyt kommenttejasi ja retweetejä jokaisen kotisivun alla. Joten, jos haluat vähän kuuluisuutta, voit nyt saada avatarisi siellä kaikkialla maailmassa nähdäksesi! No, se on hieman liioittelua!

Vähemmät mainokset

Okei, hyviä ja huonoja uutisia. Osa mainoksistamme kasvoi, mutta olemme myös vähentäneet sivustossa käynnissä olevien mainosten määrää. Myönnämme, että vuosien ajan sivustossamme on hieman liian paisutettu mainoksilla, joten tämä oli loistava tilaisuus puhdistaa asioita. Tämä on tehnyt ulkoasun siistimpiä ja esteettisesti miellyttävämpää navigoida, mutta kykenee edelleen maksamaan vuokraa - älä unohtunut tukemaan ystävällisiä sponsoreitamme :)

Depot.ly

Tämä on oikeastaan ​​pari viikkoa vanha: käytimme depot.ly lyhyttä URL-osoitetta tweeteille, jotta voit tunnistaa viestisi millä tahansa käyttämillään sosiaalisilla kanavilla. Hyvin hyödyllinen ajattelemme!

Lisää sisältöä

Kuten olet ehkä huomannut, äskettäin aloitimme lisää artikkeleita päivittäin. Vaikka toimitukselliset viestit ovat olleet ja ovat sisällön ydin, meillä on nyt myös kattavia uutisia ja mini-postit, jotka sopivat hyvin sivustojemme suunnittelijoille ja kehittäjille. Mielestämme tämä pitää sivuston nykyistä ajankohtaisempana ja kosketuksissa siihen, mitä maailmassa tapahtuu tällä hetkellä ilman kaikkia toimituksiin liittyviä täydellisiä toimituksia.

Toteutimme monia asioita, jotka saivat tämän mallin toimimaan kaikissa selaimissa ja laitteissa (ja vielä!). Itse asiassa tämä oli syy joihinkin viime hetken viiveisiin, joita me kokosimme. Meidän oli tarkoitus aloittaa viime viikolla, mutta monet selainkysymykset hidastivat meitä. Anteeksi, että! Firefox oli erityisen haasteellinen, mutta IE 8 osoittautui pahaksi ja aiheuttaa monia päänsärkyjä ja turhautuneita koodereihimme. Eilisen julkaisemisen jälkeen olemme saaneet paljon lisätietoa Twitterissä asioista, jotka on vielä ratkaistava. Kiitos kärsivällisyydestä, kun käsittelemme näitä.

Nykyään näet uuden suunnittelun, mutta se ei ole kaikki. Aiomme pian lisätä uusia asioita. Saat lisätietoja tästä tulevina viikkoina.

Me kaikki rakastamme henkilökohtaisesti uutta muotoilua, ja odotamme sen jatkuvan muuttuvan palautteen perusteella. Me todella arvostamme, jos voisitte vielä kertoa meille, mitä haluatte meidän parantavan. Kerro meille myös, onko sinulla selaimen yhteensopivuusongelmia tai millaisia ​​mobiililaitteita sinulla on, jotta voimme vastata niihin nopeasti.

Kuten aina, olemme syvästi ja äärimmäisen kiitollisia kaikille teille WDD: n tukemisesta näinä vuosina. Koko joukkueen täällä WDD: ssä, suurta kiitosta kaikille teille, ja toivomme, että tämä uusi muotoilu innostaa sinut ja palvelee sinua hyvissä ajoin selaessasi sivustollamme.

Mitä mieltä olet uudesta WDD-uudistuksesta? Olemme tyytyväisiä palautteeseesi!

reagoiva muotoilu Web-suunnittelu uudistaa WDD verkkokalvon grafiikka webdesignerdepot