Uuden, täysin reagoivan Wired.Co.Uk-sivun sivun suunnittelu
Äskettäin, Condé Nast Digital sitoutui täydelliseen uudistukseen artikkeleista wired.co.uk. Tavoitteena oli tarjota entistä sisältöä ensiarvoisen tärkeä kokemus. Nämä tavoitteet perustettiin sen jälkeen tietojenkäsittelijän tutkimus.
Aloitimme näiden tavoitteiden täyttämisen polulla yli vuosi sitten uudelleensuunnittelulla GQ.co.uk artikkeleita ja sen, mitä kutsumme "StickyScrollRead" -komponentiksi, jonka ansiosta toimittajat voivat upottaa materiaalia, joka irrotetaan kehon kopiosta näytön leveyteen, joka on laajempi kuin 1000px ja joka on kiinnitetty näytöllä. Tämä tarkoitti sitä, että käyttäjä voisi jatkaa artikkelin lukemista ja viitata edelleen siihen mediaan, jota kopio oli. Tämä osoittautui paljon innoittava kokemus ja antoi kehon kopioida enemmän tilaa hengittää.
Halusimme, että Wired-artikkelimallit ylläpitäisivät SSR-toimintoja, jotka olivat työskennelleet niin hyvin GQ: ssa, mutta meillä oli myös paljon opittua GQ-mallien jälkeen, jotta voisimme sisällyttää Wiredin. Suunnitteluprosessin viisaus, meillä oli myös kehittynyt paljon enemmän, koska GQ-artikkelit oli suunniteltu.
GQ-artikkeleiden mallit on suunniteltu täysin Photoshopilla, ja niissä on jokainen eri artikkeliversio (pitkä muotoinen artikkeli, lyhyt artikkeli, suoraan galleriaan jne.) Ja jokainen artikkelimalli, jolla on eri upotus (lyhyt muotoinen artikkeli, muoto artikkeli video ...) on pilkottu PSD. Päädyttiin 20-30 PSD: n ja seinän tulosteisiin, jotka kattoivat toimiston! Se oli aikaa vievää, tylsiä ja ei edustanut lopputuotta, koska me "nostaisimme" asioita kehitysprosessin aikana.
Wired-artikkelimallien ehdotettu konsepti oli syvällisempi ja edistyksellinen kuin GQ-vastapuoli, ja 50-60 Photoshop-tiedostojen pilkkaaminen riitti meille, jotta voimme laskea PS lasso -työkalun ja tutkia tarkempia ja tehokkaampia menetelmiä kommunikoida suunnittelee kehitystiimiä.
Wired-uudistusta edeltävät GQ-artikkelit.
Typografia
Kuten monista projekteistamme, aloitimme tarkastelemalla sitä, kuinka voimme edustaa brändin arvoja typografian avulla. Tarkastelimme painettua lehteä ja tunnistimme tyylit, joita he käyttävät kertoakseen eri tarinoita, värejä, joita he olivat käyttäneet, sekä tyylit tekstin ja kuvatekstien korostamiseen.
Sitten aloitimme kokeilemalla erilaisia yhdistelmiä, värejä ja fonttikohtia Antaa jklle totuttu rooli, luomalla täydellinen aloitusopas, joka sisältää kaikki otsikot, kappaleet ja vetoketjut sekä kokeilemalla rinnakkain vertailuja. Tämä osoittautuu pohjaksi typografiaamme varten, josta palaisimme myöhemmin.
Rakenna tyyliohje Typecastissa.
Tyyliopas toteutettu.
Layout
Valitsimme artikkelin lehdistöstä ja löysimme vastaavan artikkelin wired.co.uk-sivustosta. Ne olivat täsmälleen sama tarina, mutta jossa lehtiartikkelilla oli eri kokoisia kuvia, vedä sarakkeita sisältäviä lainausmerkkejä ympäröivällä kappaleen tekstillä ja runsaasti valkoisen tilan lisäyksiä, online-vastaava oli lyijynkuva yli yhden pitkän tekstin alueen, jota ympäröivät sivusto kotelo, huutaen käyttäjän katsella jotain muuta.
Vanha langallinen artikkelisuunnittelu.
Wired -lehti on tunnettu innovatiivisista ja räätälöidyistä ulkoasusta, josta se on voittanut useita palkintoja. Halusimme yrittää kopioida lehden tyylisuunnat, bittien leikkaaminen kehon kopioon, eikä kaikkia kopioalueita ole niin hienostuneita. Tiesimme, että SSR-komponentti jakaa sivun kahteen sarakkeeseen, joista toinen on artikkelirunko ja yksi mediasisällöistä, jotka vedetään ulos ja kiinnitetään, mutta emme halunneet upotusten tuntua täysin irti kappaleesta.
Aloitimme luoda saman artikkelin käyttäen samaa kopiota ja kuvia verkkosivustolta luomalla perusversion SSR-mallista käyttämällä CodePen. Tavoitteena oli kokeilla täyden leveyden asettamista, pitäytyä rivissä ja sisällön mediaa artikkelin virrassa luomaan visuaalisesti iskeämpi ja kiehtova layout. GQ: n artikkelisivujen suunnittelusta huolimatta olimme päättäneet, että olisi luonnollisempaa lukukokemus saada kopio vasemmalle ja tiedotusvälineet oikeaan sarakkeeseen, joten vaihdimme ne ympäri ja halusimme myös sisällyttää vakiomainosyksiköt, kuten kaksinkertainen taivas ja MPU: t kehopiirissä, sen sijaan että ne antaisivat mainoksille oman sarakkeensa (kuten GQ: ssa), joka olisi tarpeetonta, kun mainoksia ei olisi tai kun mainokset olivat siirtyneet pois.
Rakennus Codepenissä.
v1.1
Sisään ensimmäinen prototyyppi artikkeli johti valtavaa, koko leveää maisemakuvaa, jolla oli paljon vaikutusta ja antoi lehden artikkelin tunnetta. Yksi suosikkimuutoksistani GQ-malleista oli kaikkien mahtava koko leveä kuva. GQ: n mallipohja mahdollisti muokkaajien lisäämisen "pystysuoraan" pystyyn ja maisemakuviin, mutta ne saattavat joskus menettää läsnäolonsa käyttäjän näytöllä kapenee ja kuvat kutistuvat ja koko leveä kuva oli ratkaisu.
Typecastissa luotuja typografiatyylejä ei ollut vielä käytetty, mutta kappaleisiin, introtekstiin ja hintatarjouksiin oli määritelty perusstylejä hierarkian tunteen saamiseksi.
SSR: tä ei myöskään ollut toteutettu, mutta sarake oli luotu vedä sivukuviin, jotka auttoivat kokeilemaan sitä, mikä leveys asettaa sivupuolen sivulle sivun suhteen ja perus kaksinkertainen taivas ja MPU-yksiköt lisättiin kehoon kopioida, jos ne häiritsisivät tekstin virtausta.
Ensimmäisenä ehdotuksena tämä lähestymistapa osoittautui paljon hyödyllisemmäksi kuin me kokeilimme samaa sisältöä Photoshopin kautta. Tämä ei ainoastaan antanut meille mahdollisuutta tehdä perusasetteluohjeita nopeasti ja iteratiivisesti, mutta voisimme myös käyttää sitä pohjana, josta kehittäjät voivat kehittää lisätoimintojen lisäämistä ja juuri he tekivät.
Versio 1.
v1.2
CodePen-konsepti siirrettiin kehitystiimiin, ja ne lisäsivät SSR-toimintoja (niin, että ne vedettiin sivukuviin, jotka on tosiasiallisesti kiinnitetty näyttöön) samoin kuin sallivat meidät muuttamaan tietueen sijainnin muuttamalla sen luokkaa ennen luovuttamista se palaa suunnittelutyöryhmälle muotoiluun.
Tässä vaiheessa aloimme muotoilla artikkelia sellaisten fonttityylien kanssa, jotka olimme aiemmin luoneet Typecastissa yksinkertaisesti viemällä CSS suoraan web-sovelluksesta. Nyt voisimme myös kokeilla enemmän erilaisia tapoja upottaa sisältöä ja nähdä, mikä toimi hyvin eri leveydellä ja eri tarinoissa. Esimerkiksi koko leveän muotokuvan tulostaminen oli huono ajatus, koska otsikon ympärillä olisi runsaasti valkoista tilaa ja se myös työntää ensimmäisen kohdan liian pitkälle sivulle. Löysimme, että parhaimmat yhdistelmät näyttivät johtavan viereisellä sivukuvalla ja ehkä pitämällä linja-maisemaa, koska heillä oli vähiten vaikutusta tekstin virtaukseen. Työskentelemme myös optimoimalla runko-kopiota mukavimmalle lukukokemukselle kontrolloimalla kappalekappaleen enimmäisleveys. Sen sijaan, että lisättäisiin lisää pehmusteita kappaleen tekstin ja sivusovittimen välityksellä, aukaisemme runkokopion niin, että kopio oli niin keskeinen kuin näytössä, ja se myös sallisi pitää rivillä olevat kuvat vuotamaan näytöstä paljon kuin tulostus layout voisi tehdä.
Prototyyppausversio 2.
Tämä yhteistoiminnallinen ja ketterä prototyyppausmenetelmä auttoi meitä todella tekemään tietoisia päätöksiä nopeasti, koska voimme helposti testata malleja millä tahansa laitteella, näytön leveydellä tai selaimella. Teimme todellisia sisältöjä mahdollisimman paljon varmistaaksemme, ettemme unohtaneet muotoilemaan tiettyä harvinaista luokkaa, joka lisätään vain muutamiin kappaleisiin - katson sinua .p1 - jota muuten voisimme jättää vasta myöhemmin kehittäminen. Olemme myös luoneet useita artikkelityyppejä käyttäen samaa mallia nähdäksesi, miten se toimi, kun oli vain yksi kuva ja jokin lyhyt kopio tai jos se oli katsausartikkeli.
Vaikka olemme aina tienneet, että CodePen-malleistamme ovat vain todiste konseptista, pyrimme todella tekemään niin paljon yksityiskohtia ja tekemään niin monta tietoon perustuvaa päätöstä suunnittelusta ja ulkoasusta niin aikaisin kuin mahdollista.
v1.3
Kun olimme tyytyväisiä mallin perustyyliin ja rakenteeseen, kehittäjät siirsivät koodin omaan koodausympäristöönsä jakamalla CSS: n kullekin medialle, joka oli upotettu omaan SASS-tiedostoonsa, jotta suunnitteluryhmä voisi helposti käyttää ja muuttaa CSS: tä vain "möykky" - minkä olemme päätyneet kutsumaan lisäosia, jotka voisit upottaa artikkeliin ... esim. kuvia, videoita, arvosteluja ... jne. - joita halusimme muokata.
Tämä oli valtava apu, sillä kun dev oli tehnyt tavaraa ja kiinnittänyt sen kaiken loppupäähän, koodi oli liian monimutkainen millekään meistä suunnittelijoista ymmärtämään ja löytämään osat, jotka halusimme muuttaa. Tämä lähestymistapa oli hyödyllinen myös uusien möykkyjen, kuten gallerian pikkukuvien, seuraavan lukemisen tai luokitusten arvioinnin suunnittelussa, koska luomme uuden SCSS-tiedoston, jossa on kaikki tyylit juuri sille yksittäiselle blobille, mikä teki sen helpoksi päivittää ja ylläpitää.
Kyky päästä ja muokata CSS oli suuri apu meille suunnittelijoille. Se oli ensimmäinen kerta, että olimme siirtyneet pois Photoshopin suunnittelusta - toimittivat PSD: t - kehittäjien koodin suunnittelijat, verkkosivustojen luomismenetelmä ja se merkitsi sitä, että pystyimme hienosti hienosäätää pienimpiä malleja.
Menneisyydessä vanhoja menetelmiä käyttäen voisimme käynnistää Wired-artikkeleita tässä vaiheessa (täysin toimivat joidenkin muotoilunvaihdosten avulla, jotka voidaan tehdä käynnistämisen jälkeen), mutta koska meillä suunnittelijoilla oli nyt pääsy CSS: ään, pystyimme käyttämään Viime päivinä lisätään muutama hienovarainen kosketus, joka parantaa kokemusta. Lisäsimme pieniä "Enlarge" -kuvakkeita kuvien nurkkaan, jotta tiedämme, että napsauttamalla niitä tahansa voit avata ne koko leveydeksi, gallerian kuvaksi. Käyttäjät testasivat artikkeleita eri laitteissa saadaksemme optimaalisen kappaleen leveyden parhaaseen lukukokemukseen ja käytimme enemmän aikaa tekstiyhteyksien hienosäätöön, lainaustyyleihin ja kuvaesityksiin, kaikki pienet yksityiskohdat, jotka yhdessä tekevät suurta eroa.
Tämä oli paljon yhteistyökykyisempi projekti kuin mikään muu, jota olen aiemmin työskennellyt suunnittelijoiden, tietohallintojen, projektipäälliköiden, kehittäjien ja toimittajien kanssa, jotka työskentelivät yhdessä projektin eri vaiheissa; lisäämällä niiden bitti prototyyppiin, joka jatkuvasti kasvaa ja kehittyy nykyiseen tuotteeseen.
Lopullinen, täysin reagoiva artikkelisuunnittelu.
Ei ole aikaa viettää aikaa suunnitella kaikki tyylit, asettelut ja muutokset eri taukopaikoissa etukäteen, tarkoitti sitä, että voisimme tavallaan kehittää muotoilua. Emme odota, kunnes jotain oli täydellistä rakentaa sen, vaan vain rakennettu jotain ja töihin saada se täydellinen. Tämä merkitsi sitä, että oli päiviä, jolloin mitattiin kerran ja leikattiin kymmenen kertaa, mutta se myös mahdollisti jatkuvan testauksen, kehityksen ja ennen kaikkea keskustelun parannuksista, jotka auttoivat pitämään kaikki osallistuvat ja mukana projektissa.
Pohdimme jatkuvasti rakentamista, mutta olemme myös erittäin ylpeitä siitä, mitä olemme onnistuneet tarjoamaan melko lyhyessä ajassa. Langalliset artikkelit edustavat vain kaunista, tulostustyyliä millä tahansa ruudun leveydellä ja millä tahansa laitteella, mutta myös muutos Condé Nast Digitalin tiimityöskentelyssä.
Mitä mieltä olet wired.co.uk artikkelisivuista? Miten Condé Nast Digitalin suunnitteluprosessi vertaillaan omaan? Kerro meille kommentit.