Med hjälp av DevTools att Förbättra UX Design till Utveckling Processen

0
19

Jag vill berätta för dig hur jag ser på kod och design korsar varandra och stödja varandra. Specifikt, jag vill att täcka hur designers kan använda koden i deras dagliga arbete. Jag föreslår att detta inte på grund av att det är en skicklighet, men eftersom även en grundläggande förståelse för kodning kan göra mönster bättre och hand-off från design till utveckling smidigare.

Som en UX-Designer, jag letar alltid efter bra sätt att både utforska min UX-design problem och kommunicera den slutgiltiga designen till andra. Under de senaste 30 åren, att mitt arbete har alltid inblandade arbetar tillsammans med utvecklare, men generellt har det varit en stor klyfta mellan vad jag gör och vad utvecklarna gör.

Jag kan koden på en grundläggande nivå. Till exempel har jag hjälpte till att undervisa C till studenter tillbaka när jag var doktorand. Jag har arbetat på användbarheten av Oracle JDeveloper är en Integrerad utvecklingsmiljö (IDE) för Java. Jag arbetade också för en mycket kort stund på att förenkla UX av ett WordPress som content management-miljö för att göra det tillgängligt för mindre tekniska användare. Här krävs en god förståelse för HTML och CSS. Jag har också frivilligt om utformningen av en PHP-webbplats och var tvungen att utveckla en viss förståelse för serversidan webbutveckling.

Men även med tanke på dessa erfarenheter, att jag inte är en utvecklare i någon egentlig bemärkelse. Om jag råkar vara att titta på koden, det är i en “just in time” learning model — jag ser upp vad jag behöver och sedan hacka den tills det fungerar. Lärande på detta sätt har ofta varit ogillande, lite som att lära sig att köra utan lektioner. Du plocka upp dåliga utveckling vanor men kanske det är OK för det arbete jag gör.

Så, nej jag vet inte utveckla eller skriva kod. Mitt dagliga arbete är mestadels gått åt att rita, prata och samla in krav. Såvitt design går, jag ska börja med att skissa koncept i en bärbar dator eller med hjälp av Balsamiq. Då drar jag upp UX wireframes och prototyper med hjälp av verktyg som Axure, Adobe XD, InVision Studio, Figma och Skiss. När jag är redo att lämna bort min underlag till utveckling, alla visuella tillgångar och dokumentation har definierats och kommunicerats. Men jag behöver inte kliva över linjen in koden utveckling. Det är bara inte mitt område av expertis.

Så, varför ska designers veta koden?

Vi har redan konstaterat att jag är någon utvecklare, men jag har nyligen blivit en förespråkare för designers att få en bra känsla för hur design och kod interagera.

I själva verket, skulle jag kalla det “spela med koden”. Jag är definitivt inte tyder på att UX-designers blivit utvecklare, men åtminstone jag tror designers skulle utnyttja detta för att bli bekväm med en grundläggande förståelse av vad som är möjligt idag med CSS och bästa praxis i HTML.

Är experimentell är en stor del av vår design. Koden är bara ett annat medium med vilket vi kan experimentera och bygga vackra lösningar. Så, ska vi titta på ett par olika sätt designers kan experimentera med kod, även med en lättare förståelse för det. Vad vi som täcker här kan vara uppenbart för utvecklare, men det finns massor av designers där ute som aldrig har experimenterat med koden och kommer att få se dessa för första gången.

Så, det är för dem (och kanske en repetitionskurs för dig) som vi ser i följande webbläsare verktyg.

DevTools: Den ultimata kod lekplats

En av de farhågor som en UX designer kan ha är att veta hur en design som håller upp en gång att det är i webbläsaren. Är färgerna korrekt? Typsnitt läsbara under hela? Hur gör de element svara på olika enheter? Kommer mina grå hover state arbete med vit/grå zebra ränder på min ansökan elnät i praktiken? Dessa är några av de styling och frågor som rör samspelet designers tänker på när vi lämnar vårt arbete off för utveckling.

Det är där DevTools kan vara en designer ‘ s bästa vän. Varje webbläsare har sin egen version av det. Du kanske redan har spelat med sådana verktyg innan. Det är den lilla “Inspektera” alternativ när man högerklickar på skärmen.

Ange underbara världen av DevTools kan göras från en webbsida.

Vad gör DevTools en sådan underbar resurs är att det erbjuder ett sätt att manipulera koden för en webbplats eller webbapplikation utan att behöva sätta upp en utvecklingsmiljö. Och det är disponibla. Eventuella ändringar som du gör för dina ögon endast och tvättas bort i det ögonblick webbläsaren uppdateras.

Att redigera kod i DevTools gör ändringar till sidan i farten.

Ytterligare, DevTools kan härma andra enheter.

Behovet av att se hur en sida eller förändringar för att det ser ut på andra enheter? DevTools kan ge dig en idé.

Och, om du inte har sett det ännu, Firefox, släppt en underbar ny form väg editor som är mycket värdefulla för den som vill utforska intressanta mönster.

Under de senaste månaderna har jag jobbat på en komplex webb-klient för en enterprise-nivå ansökan. Sista sprint, min UX-design historien var att undersöka utseende på första sidan av webbapplikationen och hur man kan införa ett nytt färgschema. Det var svårt att föreställa sig hur de ändringar som jag gjorde var att gå till påverkan av funktionen som helhet som några av de komponenter jag byter används i produkten.

En dag, när vi diskuterar en design beslut, en av utvecklarna testat mitt förslag till att ändra en komponent med hjälp av den senaste DevTools i sin webbläsare. Jag var förvånad över hur mycket DevTools har vuxit och expanderat sedan jag senast kommer ihåg det. Jag kunde direkt se effekterna av att ändra över hela vår webbapplikation och hur olika designbeslut samverkade med den befintliga konstruktionen. Jag började experimentera med DevTools mig själv och var kan förhandsgranska och experimentera med hur min egen enkla CSS-förändringar komponenter skulle påverka hela webbapplikation. Super bra!

Men det var också lite frustrerande att inte kunna förvara mina experiment och förändringar för framtida referens. Så, jag gick utforska för att se vad som var ute för att stödja min design process.

Chrome webbläsare

DevTools är fantastiskt rakt ut ur lådan, men att experimentera med koden blir ännu mer fantastisk när webbläsaren tillägg läggs till mixen. Chrome, i synnerhet, har ett par som jag verkligen gillar.

Chrome Extension 1: Användaren CSS

Användaren CSS är ett Chrome-tillägg som gör att du kan spara de ändringar du gör i DevTools i ett redigerbart CSS-kod på fliken. Dessa CSS-förändringar är automatiskt körs på den sidan om Användaren CSS är aktiverad. Detta innebär att du kan ställa upp CSS företräde för någon sida på webben, visa dem senare, och dela dem med andra. Detta kan vara ett fantastiskt redskap när, säg, att göra en översyn av utformningen av en webbplats iscensätta innan release, eller egentligen någon design undersökning för en webb-applikation eller på en webbplats som visas i en webbläsare.

Det första jag gör med Användaren CSS är att göra förändringar i Chrome delar panelen. Då jag helt enkelt klippa och klistra in CSS-förändringar från Chrome DevTools att Användaren CSS-kod på fliken som jag kommer tillsammans. Denna video visar i detalj de olika sätt att redigera CSS, HTML och Javascript i Chrome DevTools och hur jag använder UserCSS.

Användaren CSS har en fin inbyggda editorn, så min kod är alltid väl formaterad och inkluderar syntax markering så jag behöver inte oroa mig för sånt. Jag gillar särskilt det faktum att åsidosätter verkställas omedelbart så att du kan se förändringar i farten. Det har också en användbar switch som gör att du kan förvandla din åsidosätter på och av. Detta gör det mycket enkelt att visa en uppsättning av förändringar i ett lag. Denna utvidgning har tillåtit mig att enkelt presentera en jämförelse mellan en befintlig sida design och föreslagna förändringar. Jag har även använt den för att göra en enkel video som visar den föreslagna förändringar.

I den här videon vill jag göra några enkla redigeringar till min webbsida och sedan visar hur jag kan slå på och av ändringarna genom att klicka på knappen on/off på Användaren CSS:

Denna förlängning är perfekt om du allt du behöver göra är att redigera CSS, särskilt om du har några mycket enkla designändringar för att göra vill att dessa förändringar att bestå. Men komplexiteten i en design ökar, jag har hittat mig själv att vilja spara mer än ett kodavsnitt på en gång. Kopiera och klistra in koden i och ut av Användaren CSS-editor blev en smärta. Jag ville ha något med mer flexibilitet och frihet att experimentera. Jag ville också ha möjlighet att titta på enkla förändringar för att HTML-koden på min ansökan och även spela med en bit av JavaScript.

Det är där nästa förlängning kommer in i bilden.

Chrome Extension 2: Webb Åsidosätter

Den andra Chrome-extension jag hittade kallas Web Åsidosätta och det ger ett sätt att åsidosätta HTML, CSS och JavaScript. Alla av dem! Detta presenteras som tre flikar, ungefär på samma sätt CodePen gör, vilket gör det till ett mycket kraftfullt verktyg för att skapa grov fungerande konstruktion av prototyper.

Webb Åsidosätter också kan du spara flera filer så att du kan växla mellan olika delar av en konstruktion på eller av i olika kombinationer. Det också snabbt växlar mellan de olika alternativen för att visa upp olika designkoncept.

Denna video visar hur jag lagt till ett HTML-element på en sida och redigerade den nya element med vissa grundläggande CSS:

Med hjälp av HTML-fliken gör det möjligt att ändra alla element på sidan, som att byta ut en logotyp, ta bort onödiga element, eller lägga till nya. JavaScript-fliken är liknande i att jag kan göra enkla förändringar, som att skjuta till ytterligare text till hemsidan för avdelning så att jag kan testa hur dynamiska förändringar som kan påverka layouten — det här kan vara användbart för att testa olika scenarier, till exempel skillnader med internationalisering.

Dessa ändringar kan vara triviala från en kodning perspektiv, men de tillåter mig att utforska hundratals alternativa utformningar i en mycket kortare tid och med mycket mindre risk än scooting pixlar runt i en ansökan. Jag bokstavligen inte kunde utforska så många idéer som snabbt med min traditionella UX-prototyping verktyg som jag kan med detta en förlängning.

Och, vad mera är, både för mig och mitt team har förtroende i design leveranser eftersom vi har testat dem tidigt i webbläsaren. Även de mest pixel-perfekt Photoshop-fil kan gå förlorade i översättningen när designen är i webbläsaren eftersom det är egentligen bara en ögonblicksbild av en design i ett statiskt tillstånd. Testa mönster först i webbläsaren med hjälp av dessa förlängningar bevisa att vad vi har utformat är möjligt.

På den andra sidan av detta, kanske du vill kolla in hur Jon Kantner använt liknande webbläsare för att inaktivera CSS som ett sätt att granska semantisk uppmärkning olika platser. Det är inte exakt design-relaterat, men intressant att se hur dessa verktyg kan ha olika användningsfall.

Vad jag har lärt mig så långt

Jag är mycket glad över vad jag har lärt mig sedan lutar in DevTools och webbläsare. Jag tror att min design är så mycket bättre som ett resultat. Jag tycker också att själv kunna ha mer produktiva samtal med utvecklare eftersom vi nu har ett sätt att kommunicera väl. Den gemensamma nämnare mellan design och kod i snabba prototyper som verkligen hjälper till att underlätta diskussion. Och, eftersom jag spelar runt med faktiska koden, jag har en mycket bättre känsla av hur den underliggande koden kommer så småningom att skrivas och kan leva ett mycket mer med det arbete som utvecklare göra — och kanske hur jag kan göra deras jobb lättare i processen.

Det har också skapat en kultur av samarbete rapid prototyping på mitt lag vilket är en helt annan historia.

Spela med koden har öppnat upp för nya idéer och uppmuntrade mig att anpassa mitt arbete ramen för webben. Det har sagts att komma in i webbläsaren tidigare i designprocessen är perfekt och dessa är de typer av verktyg som gör mig (och dig) att göra just det!

Har du andra verktyg eller processer som du använder för att underlätta samarbetet mellan design och kod? Vänligen dela med dig av dem i kommentarerna!