Utforming av de nye, fullstendig responsive Wired.Co.Uk artikkelsidene
Nylig, Condé Nast Digital gjennomførte en fullstendig redesign av artiklene publisert på wired.co.uk. Målet var å gi en mer innholdsrik og oppslukende opplevelse. Disse målene ble etablert etter forskning av vår informasjon arkitekt.
Vi begynte på veien for å oppfylle disse målene over et år siden med redesignet av GQ.co.uk artikler og innføring av det vi kaller komponenten "StickyScrollRead", som tillot redaktørene å legge inn media som ville bli trukket ut av kroppen kopiere på skjermbredder bredere enn 1000px og festet på skjermen. Det innebar at brukeren kunne fortsette å lese artikkelen og fremdeles referere til peice media som kopien handlet om. Dette viste seg å være en mye mer nedslående opplevelse, og fikk kroppen til å kopiere mer plass til å puste.
Vi ønsket Wired-artikkelmaler for å opprettholde SSR-funksjonaliteten som hadde fungert så bra på GQ, men vi hadde også lært mye siden GQ-designene som vi kunne innlemme i Wired. Designprosessvis, vi hadde også utviklet seg mye mer siden GQ-artiklene ble designet.
Maler for GQ-artiklene ble utformet helt med Photoshop, med hver annerledes artikkelvariant (langformet artikkel, kortformatartikkel, rett til galleri osv.) Og hver artikkelmal med en annen embed (kortformatartikkel med bildeinnlegg, kort skjema artikkel med video ...) bli mocked opp som en PSD. Vi endte opp med 20-30 PSD og en vegg med utskrifter som dekket på kontoret! Det var tidkrevende, kjedelig og representerte ikke sluttproduktet som vi ville "tweak" ting under utviklingsprosessen.
Det foreslåtte konseptet for Wired-artikkelen var mer dybtgående og avansert enn sin GQ-motpart, og tanken på å mocking opp 50-60 Photoshop-filer var nok for oss å sette ned vårt PS-lassoverktøy og utforske mer nøyaktige og effektive metoder for å kommunisere våre design til utviklingslaget.
GQ-artiklene som gikk foran det trådløse redesignet.
typografi
Som mange av våre prosjekter gjør, begynte vi ved å se på hvordan vi kunne representere merkevarens verdier gjennom sin typografi. Vi så gjennom det trykte magasinet og identifiserte stiler som de bruker til å fortelle forskjellige historier, farger de hadde brukt, samt stiler for å markere tekst og tekster.
Vi begynte å eksperimentere med forskjellige typer kombinasjoner, farger og skriftstørrelser gjennom typecast, skaper en komplett opprinnelig stilguide for alle overskrifter, avsnitt og trekk sitater, samt eksperimentere med side om side sammenligninger. Dette ville vise seg å være grunnlaget for vår typografi som vi ville komme tilbake til senere.
Bygg en stilguide i Typecast.
Stilguiden implementert.
Oppsett
Vi plukket en artikkel fra utskriftsmagasinet og fant tilsvarende artikkel på wired.co.uk. De var akkurat den samme historien, men hvor magasinartikkelen hadde bilder av varierende størrelser, trekk anførselstegn som spenner over kolonner med avsnittet tekstinnpakning rundt den og rikelig tillegg av hvitt mellomrom, hadde den elektroniske ekvivalenten et hovedbilde over et langt tekstområde omgitt av området bolig, rope til brukeren for å se noe annet.
Den gamle Wired artikkelen design.
Wired magazine er kjent for sine innovative og skreddersydde layouter, som det har vunnet mange priser. Vi ønsket å prøve å kopiere bladformatoppsettene, med biter som skjærer inn i kroppseksemplaret og ikke har alt kopiområdet føles så regimentert. Vi visste at SSR-komponenten deler siden i to kolonner, en for artikkelen og en for mediene, som blir trukket ut og festet, men vi ønsker ikke at tjenestene skal føle seg helt løs fra tekstteksten.
Vi begynte å lage samme artikkel, ved å bruke samme kopi og bilder fra nettstedet for å lage en grunnleggende versjon av SSR-malen ved hjelp av CodePen. Målet var å eksperimentere med å plassere full bredde, holde på linje og i innholdsmedier i artikkelenes strømning for å skape et mer visuelt slående og engasjerende layout. Siden utformingen av GQ-artikelsidene hadde vi bestemt at det ville være en mer naturlig leseropplevelse å ha kopien til venstre og media i høyre kolonne, slik at vi byttet dem rundt, og vi ønsket også å innlemme standardannonsenhetene som dobbel himmel og MPU er innenfor kroppseksemplet, i stedet for å gi annonsene sin egen kolonne (som på GQ) som ville være overflødig når det ikke var annonser eller når annonsene hadde rullet bort.
Bygning i Codepen.
v1.1
I den første prototypen artikkelen førte med et stort landskap med full bredde, som hadde mye mer innflytelse og ga følelsen av et tidsskriftfunksjonartikkel. En av mine favorittutviklinger fra GQ-malene var introduksjonen av det mektige bildet i full bredde. GQ-malen gjorde det mulig for redaktørene å legge til "Pulled-to-side" portrett og landskapsbilder, men de kunne noen ganger miste sin tilstedeværelse ettersom brukerens skjerm ble smalere og bildene krympet og bildet i full bredde var vår løsning.
Typografiformatene som ble opprettet i Typecast, hadde ikke blitt brukt ennå, men det var grunnleggende stiler tilordnet avsnittet, introteksten og anførselstegnene for å få en følelse av hierarki.
SSR hadde heller ikke blitt implementert, men en kolonne ble opprettet med trekk til sidebilder som hjalp oss til å eksperimentere med hvilken bredde som satt til sidekolonnen i forhold til siden, og grunnleggende dobbel himmel og MPU-enheter ble lagt til kroppen Kopier for å se om de ville forstyrre tekstflyten.
Som et første utkast viste denne tilnærmingen seg langt mer nyttig enn oss eksperimenterer med det samme innholdet via Photoshop. Dette tillot oss ikke bare å lage noen grunnleggende layoutbeslutninger raskt og iterativt, men vi kunne også bruke den som en base som utviklerne kunne bygge på for å legge til flere funksjoner, og det var akkurat det de gjorde.
Versjon 1.
v1.2
CodePen-beviset på konseptet ble sendt videre til utviklingslaget, og de la til SSR-funksjonaliteten (slik at de trukket til sidebilder faktisk festet til skjermen) samt tillater oss å endre plasseringen av et stykke media ved å endre klassen før de ga ut Det går tilbake til designteamet for styling.
På dette tidspunktet begynte vi å stile artikkelen med skrifttypestiler som vi tidligere hadde opprettet i Typecast ved å eksportere CSS direkte fra webappen. Vi kunne nå også begynne å eksperimentere mer med forskjellige måter å legge inn innhold og se hva som fungerte bra på forskjellige bredder og for forskjellige historier. For eksempel var det ledig med et full breddeportrettbilde en dårlig ide, da det ville være en overflod av hvitt mellomrom rundt tittelen, og ville også trykke første ledd for langt ned på siden. Vi fant ut at de beste kombinasjonene syntes å være å lede med en trukket til sidebilde og kanskje en holde i linjelandskapet, da de hadde minst effekt på tekstenes strømning. Vi har også jobbet med å optimalisere kroppseksemplaret for den mest behagelige leseopplevelsen ved å kontrollere maksimal bredde av avsnittet. I stedet for å legge til mer polstring mellom avsnittet tekst og den trukket til side media, vi innrykket kroppen kopi, slik at kopien var så sentral på skjermen som mulig, og det også tillatt å holde i linjebilder å blø av skjermen mye som en utskrift layout kan gjøre.
Prototyping versjon 2.
Denne samarbeidsbaserte og fleksible prototypingsmetoden hjalp oss med å ta beslutninger raskt, raskt fordi vi enkelt kunne teste våre design på en hvilken som helst enhet, skjermbredde eller nettleser og gjøre det lettere med minimal oppstyr. Vi jobbet med ekte innhold så mye som mulig for å sørge for at vi ikke glemte å stillegge en bestemt sjelden klasse som blir lagt til bare noen få avsnitt - jeg ser på deg .p1 - som vi ellers kanskje har gått glipp av til senere utvikling. Vi har også opprettet flere artikkeltyper med samme mal for å se hvordan det virket når det bare var 1 bilde og litt kort kopi, eller om det var en anmeldelseartikkel.
Selv om vi alltid visste at våre CodePen-maler kun skulle være et bevis på konseptet, prøvde vi virkelig å gå inn i så mye detaljer og ta så mange informerte beslutninger om design og layout så tidlig som mulig.
v1.3
Når vi var fornøyd med den grunnleggende stilen og strukturen til malen, overførte utviklerne koden til sitt eget kodemiljø, og splittet CSS for hvert medie som var innebygd i sin egen SASS-fil, slik at designteamet lett kunne få tilgang til og endre CSS for bare "blob" - som er hva vi endte opp med å ringe noen tilleggsprogrammer som du kunne legge inn i en artikkel ... f.eks. bilder, video, vurderinger ... etc - som vi ønsket å redigere.
Dette var en stor hjelp som da dev hadde gjort sine ting og hektet alt sammen til bakenden, var koden for komplisert for noen av oss designere å forstå og finne delene vi ønsket å endre. Denne tilnærmingen var også nyttig når du utformet nye blokker, som galleri-miniatyrbildene, leser neste eller vurdering av vurderinger, da vi bare ville lage en ny SCSS-fil med alle stilene for bare den enkelte blob, noe som gjorde det langt enklere å oppdatere og vedlikeholde.
Evnen til å få tilgang til og redigere CSS var en stor hjelp til oss designere. Det var første gang vi hadde flyttet fra "design i Photoshop - levere PSDs - utviklere kode - designers review", metode for å lage et nettsted, og det betydde at vi var i stand til å finjustere de minste aspektene av våre design.
Tidligere, ved hjelp av de gamle metodene, kan vi lansere Wired-artiklene på dette stadiet (fullt funksjonell med noen design tweaks som kan gjøres etter lansering), men som vi designere nå hadde tilgang til CSS, kunne vi bruke De siste dagene legger du til noen få subtile berører som vil forbedre opplevelsen. Vi la til små forstørrelsesikoner på hjørnet av bildene for å la brukeren vite at ved å klikke på noen av dem, kan du åpne dem som en full bredde, galleribilde. Vi bruker testede artikler på ulike enheter for å få den optimale kroppskopibredden for den beste leseopplevelsen, så vel som brukt mer tid til å finjustere tekstkoblingene, sitatstiler og bildetekster, alle små detaljer som sammen ville gjøre en stor forskjell.
Dette var et langt mer samarbeidsprosjekt enn noen annen jeg tidligere hadde jobbet med med designere, informasjonsarkitekter, prosjektledere, utviklere og redaktører som alle jobber sammen på ulike stadier av prosjektet. legger litt til en prototype som stadig vokser og utvikler seg til produktet som det er i dag.
Det endelige, fullt responsive artikkelen design.
Ikke bruke tid på å designe alle stiler, layouter og variasjoner på forskjellige bruddpunkter på forhånd, betydde at vi på en måte kunne utvikle design. Vi ville ikke vente til noe var perfekt for å bygge det, men bare bygget noe og arbeidet med å få det perfekt. Dette innebar at det var dager hvor vi skulle måle en gang og kutte ti ganger, men det tillot også konstant testing, utvikling og enda viktigere diskusjon om forbedringer som bidro til å holde alle engasjert og involvert i prosjektet.
Vi gjennomgår kontinuerlig og forbedrer byggingen, men vi er også veldig stolte av det vi har klart å levere på ganske kort tid. De kablede artiklene representerer ikke bare en vakker utskriftstilstand på en hvilken som helst skjermbredde og på en hvilken som helst enhet, men også et skifte i måten vi på Condé Nast Digital jobber som et lag.
Hva synes du om de trådløse artikkelsidene? Hvordan sammenligner Condé Nast Digitals designprosess med din egen? Gi oss beskjed i kommentarene.