For nylig, Condé Nast Digital påtog sig en komplet redesign af artiklerne publiceret på wired.co.uk. Målet var at give en mere indholdsorienteret og underholdende oplevelse. Disse mål blev oprettet efter forskning fra vores informationsarkitekt.

Vi begyndte på vej til at opfylde disse mål for over et år siden med redesignet af GQ.co.uk artikler og indførelsen af ​​det, vi kalder komponenten 'StickyScrollRead', som tillod redaktørerne at indlejre medier, der ville blive trukket ud af kroppen kopiere på skærmens bredder bredere end 1000px og fastgjort på skærmen. Det betød, at brugeren kunne fortsætte med at læse artiklen og stadig henvise til den mængde medier, som kopien handlede om. Dette viste sig at være en meget mere fordybende oplevelse og fik kroppen til at kopiere mere plads til at trække vejret.

Vi ønskede, at de trådløse artikels skabeloner skulle opretholde SSR-funktionaliteten, der havde fungeret så godt på GQ, men vi havde også lært meget siden GQ-designene, som vi kunne indarbejde i Wired. Design proces klogt, vi havde også udviklet sig meget mere siden GQ artikler blev designet.

Skabeloner til GQ artiklerne blev designet udelukkende med Photoshop, med alle forskellige artiklen variant (lang form artiklen, kort form artikel, lige til galleri mv.) Og hver artikels skabelon med en anden embed (kort form artikel med billede embed, kort form artiklen med video ...) bliver mocked som en PSD. Vi endte med 20-30 PSD'er og en væg af udskrifter, der dækkede kontoret! Det var tidskrævende, kedeligt og repræsenterede ikke det endelige produkt, da vi ville "tweak" ting under udviklingsprocessen.

Det foreslåede koncept for Wired artikel design var mere dybtgående og avanceret end dets GQ modstykke, og tanken om at mocking up 50-60 Photoshop filer var nok til, at vi kunne lægge ned vores PS lasso værktøj og udforske mere præcise og effektive metoder til at kommunikere vores design til udviklingsteamet.

GQ

GQ-artiklerne, der gik forud for det trådløse redesign.

Typografi

Som mange af vores projekter gør, begyndte vi ved at se på, hvordan vi kunne repræsentere brandets værdier gennem dens typografi. Vi kiggede gennem det trykte blad og identificerede stilarter, som de bruger til at fortælle forskellige historier, farver de havde brugt samt stilarter til fremhævning af tekst og billedtekster.

Vi begyndte at eksperimentere med forskellige typer kombinationer, farver og skriftstørrelser gennem typecast, skabe en komplet initial stil guide til alle overskrifter, afsnit og træk citater samt eksperimentere med side om side sammenligninger. Dette ville vise sig at være grundlaget for vores typografi, som vi ville vende tilbage til senere.

typecast

Opbygning af en stilguide i Typecast.

typografi-2

Stilguiden implementeret.

Layout

Vi valgte en artikel fra printmagasinet og fandt den tilsvarende artikel på wired.co.uk. De var nøjagtig den samme historie, men hvor bladartikelen havde billeder af forskellige størrelser, træk citater, der spænder over kolonner med stykke tekstindpakning omkring det og rigelige tilføjelser af hvidt rum, havde online-ækvivalenten et hovedbillede over et langt tekstområde omgivet af webstedet boliger, råber til brugeren for at se noget andet.

Branson

Den gamle Wired artikel design.

Wired magazine er kendt for sine innovative og skræddersyede layouter, som det har vundet mange priser. Vi ønskede at forsøge at replikere bladformatlayouterne, med bits skåret ind i kroppen kopi og ikke har alle kopi området føler sig så regimented. Vi vidste, at SSR-komponenten opdeler siden i 2 kolonner, en for artiklens krop og en til mediet, der indgår som udtrængt og fastgjort, men vi ønsker ikke, at embedserne skal føle sig fuldstændigt løs fra tekstteksten.

Vi begyndte at oprette samme artikel ved at bruge den samme kopi og billeder fra hjemmesiden for at oprette en grundlæggende version af SSR-skabelonen ved hjælp af CodePen. Målet var at eksperimentere med at placere fuld bredde, holde i køen og i indholdsmedier i artiklens strømning for at skabe et mere visuelt slående og engagerende layout. Siden design af GQ artikelsiderne havde vi besluttet, at det ville være en mere naturlig læsning erfaring at have kopien til venstre og mediet i højre kolonne, så vi skiftede dem rundt, og vi ønskede også at indarbejde standardannonceenheder som dobbelt himmel og MPU er inden for body copy, i stedet for at give annoncerne deres egen kolonne (som på GQ), der ville være overflødig, da der ikke var nogen annoncer, eller når annoncerne havde rullet væk.

codepen

Bygning i Codepen.

v1.1

I den første prototype artiklen førte med et stort landskabsbillede med fuld bredde, som havde meget mere indflydelse og gav mening i en tidsskriftfunktionsartikel. En af mine foretrukne evolutioner fra GQ-skabeloner var introduktionen af ​​det hele mægtige fuldbreddebillede. GQs skabelon gjorde det muligt for redaktørerne at tilføje portræt- og landskabsbilleder til "Træk til side", men de kunne undertiden miste deres tilstedeværelse, da brugerens skærm blev smalere, og billederne blev krympet, og det fulde breddebillede var vores løsning.

Typografiformaterne, der blev oprettet i Typecast, var ikke blevet brugt endnu, men der var grundlæggende stilarter tildelt afsnit, introtekst og citater for at få en følelse af hierarki.

SSR'en var heller ikke blevet implementeret, men en kolonne blev oprettet med træk til sidebilleder, som hjalp os med at eksperimentere med, hvilken bredde der skulle sættes til sidekolonnen i forhold til siden, og grundlæggende dobbelthimmel og MPU-enheder blev føjet til kroppen kopi for at se, om de ville forstyrre tekststrømmen.

Som et første udkast viste denne tilgang sig langt mere nyttigt end os eksperimenterer med det samme indhold via Photoshop. Dette tillod os ikke kun at lave nogle grundlæggende layoutbeslutninger hurtigt og iterativt, men vi kunne også bruge det som en base, som udviklerne kunne bygge videre på for at tilføje yderligere funktionalitet til, og det er præcis det, de gjorde.

v1

Version 1.

v1.2

CodePen-beviset på konceptet blev sendt videre til udviklingsholdet, og de tilføjede SSR-funktionaliteten (så de trukket til sidebillederne er faktisk fastgjort til skærmen) samt tillader os at ændre placeringen af ​​et stykke medie ved at ændre sin klasse før aflevering Det går tilbage til designteamet for styling.

På dette tidspunkt begyndte vi at style artiklen med de skrifttypestile, som vi tidligere havde oprettet i Typecast ved blot at eksportere CSS direkte fra webapps. Vi kunne nu også begynde at eksperimentere mere med forskellige måder at integrere indhold på og se, hvad fungerede godt på forskellige bredder og for forskellige historier. For eksempel var det en dårlig idé at lede med et fuld breddeportrætbillede, da der ville være en overflod af hvidt rum rundt om titlen og også skubbe første afsnit for langt ned på siden. Vi fandt ud af, at de bedste kombinationer syntes at være at føre med en trukket til sidebillede og måske en holde i linjelandskabet, da de havde den mindste effekt på tekstflowet. Vi har også arbejdet med at optimere kroppens kopi for den mest komfortable læsning erfaring ved at kontrollere maksimal bredde af stykke kopi. I stedet for at tilføje mere polstring mellem stykketeksten og de trukket til side medier, indrykkede vi kroppens kopi, så kopien var så central på skærmen som muligt, og det var også tilladt at holde i linjebilleder for at bløde ud af skærmen ligesom en udskrift layout kan gøre.

v2

Prototyping version 2.

Denne samarbejdsmæssige og fleksible prototypemetode hjalp os med at træffe velinformerede beslutninger hurtigt, da vi let kunne teste vores designs på en hvilken som helst enhed, skærmbredde eller browser og gøre det lettere med minimal opstyr. Vi har arbejdet med ægte indhold så meget som muligt for at sikre, at vi ikke glemmer at style en bestemt sjælden klasse, der bliver føjet til kun nogle få afsnit - jeg kigger på dig .p1 - at vi ellers måske har gået glip af indtil senere udvikling. Vi har også oprettet flere artikeltyper med samme skabelon for at se, hvordan det fungerede, da der kun var 1 billede og en lille kopi, eller hvis det var en anmeldelseartikel.

v2-2

Selvom vi altid vidste, at vores CodePen-skabeloner kun var et bevis på konceptet, forsøgte vi virkelig at gå ind i så detaljerede detaljer og gøre så mange velinformerede beslutninger om design og layout så tidligt som muligt.

v1.3

Når vi var tilfredse med grundskabelonets grundlæggende stil og struktur, overførte udviklerne koden til deres eget kodningsmiljø og splittede CSS'en for hvert medie, der var integreret i sin egen SASS-fil, så designteamet let kunne få adgang til og ændre CSS til bare "blob" - hvilket er hvad vi endte med at kalde alle tilføjelser, som du kunne indlejre i en artikel ... f.eks. billeder, video, anmeldelser ... osv. - at vi ønskede at redigere.

v3

Dette var en stor hjælp som da dev'en havde gjort deres ting og tilsluttet det hele til bagsiden, var koden for kompliceret for nogen af ​​os designere til at forstå og finde de dele, som vi ønskede at ændre. Denne fremgangsmåde var også nyttig, når du styler nye kladder, ligesom galleriets miniaturebilleder, læs næste eller gennemgangsklassifikationer, da vi bare ville oprette en ny SCSS-fil med alle stilarter for netop den enkelte klump, hvilket gjorde det langt lettere at opdatere og vedligeholde.

Evnen til at få adgang til og redigere CSS var en stor hjælp for os designere. Det var første gang, vi havde flyttet væk fra 'design i Photoshop - levere PSD'er - udvikler kode - designere review', metode til oprettelse af et websted, og det betød, at vi var i stand til at finjustere de mindste aspekter af vores designs.

Tidligere har vi brugt de gamle metoder til at lancere de Wired artikler på dette stadium (fuldt funktionel med nogle design tweaks, der kan laves efter lanceringen), men som vi designere nu havde adgang til CSS, kunne vi bruge De sidste par dage tilføjede et par subtile hånd, der ville forbedre oplevelsen. Vi tilføjede små forstørrelse ikoner på hjørnet af billederne for at lade brugeren vide det ved at klikke på nogen af ​​dem, kan du åbne dem som en fuld bredde, galleri billede. Vi bruger testede artikler på forskellige enheder for at få den optimale kopibredde for den bedste læsningsoplevelse samt brugt mere tid til finjustering af tekstforbindelser, citatstile og billedtekster, alle små detaljer, der sammen ville gøre en stor forskel.

Dette var et langt mere samarbejdsprojekt end nogen anden jeg tidligere havde arbejdet med designere, informationsarkitekter, projektledere, udviklere og redaktører, som alle arbejder sammen på forskellige stadier af projektet. tilføjer deres bit til en prototype, der konstant voksede og udviklede sig til det produkt, det er i dag.

v3-2

Det endelige, fuldt responsive artikel design.

Ikke at bruge tid på at designe alle stilarter, layouter og variationer på forskellige brudpunkter på forhånd, betydede at vi på en måde kunne designe ved udvikling. Vi ville ikke vente, før noget var perfekt til at bygge det, men i stedet bygget lige noget og arbejdede på at få det perfekt. Det betød, at der var dage, hvor vi ville måle en gang og skære ti gange, men det gav også mulighed for konstant testning, udvikling og endnu vigtigere diskussion om forbedringer, som hjalp med at holde alle engageret og involveret i projektet.

Vi gennemgår løbende og forbedrer bygningen, men vi er også meget stolte over, hvad vi har formået at levere i en temmelig kort periode. De kablede artikler repræsenterer ikke kun et smukt, udskriftsstillayout på en hvilken som helst skærmbredde og på en hvilken som helst enhed, men også et skift i den måde, vi på Condé Nast Digital arbejder som team.

Hvad synes du om de ledede artikelsider? Hvordan sammenligner Condé Nast Digital's designproces med din egen? Lad os vide i kommentarerne.