Ved hjelp av DevTools å Forbedre UX Design, til Utvikling

0
15

Jeg vil gjerne fortelle deg hvordan jeg se kode og design krysser hverandre og støtte hverandre. Spesielt, jeg vil dekke hvordan designere kan bruke koden i deres daglige arbeid. Jeg foreslår at denne ikke fordi det er en nødvendig ferdighet, men fordi selv en grunnleggende forståelse av koding kan gjøre bedre design og hand-off fra design, til utvikling jevnere.

Som UX-Designer, er jeg alltid på utkikk etter gode måter å både utforske min UX-design problemer og kommunisere den endelige design til andre. I løpet av de siste 30 årene, mitt arbeid har alltid involvert arbeider sammen med utviklerne, men generelt har det vært et stort skille mellom hva jeg gjør og hva utviklerne gjør.

Jeg kan kode på et grunnleggende nivå. For eksempel, jeg har bidratt til å undervise C til bachelorstudenter tilbake når jeg var en post-graduate student. Jeg har jobbet på brukbarheten av Oracle JDeveloper er et Integrert utviklingsmiljø (IDE) for Java. Jeg har også jobbet for en veldig kort stund på å forenkle UX av en WordPress content management miljø å gjøre det tilgjengelig for mindre tekniske brukere. Dette krevde en god forståelse av HTML og CSS. Jeg meldte seg også frivillig på utformingen av PHP nettsted og hadde til å utvikle en viss forståelse av server-side web-utvikling.

Men selv gitt disse erfaringer, jeg er ikke en utvikler på noen sanne betydningen av ordet. Hvis jeg tilfeldigvis være å se på koden, det er i en “just in time” læringsmodell — jeg ser opp hva jeg trenger, og deretter banalisere det før det fungerer. Læring på denne måten har ofte vært mislikt, litt som å lære å kjøre uten leksjoner. Du plukke opp dårlig utvikling vaner, men kanskje det er OK for det arbeidet jeg gjør.

Så, nei jeg gjør ikke utvikle eller skrive kode. Min dag-til-dag-arbeidet er for det meste blitt brukt tegning, snakke og samle kravene. Så langt som design går, jeg vil starte med å skissere konsepter i en notatbok eller ved hjelp av Balsamiq. Deretter tegner jeg opp UX trådmodeller og prototyper hjelp av verktøy som Axure, Adobe XD, InVision Studio, Figma og Skisse. Etter den tid er jeg klar til å videreføre min leveransen til utvikling, alt det visuelle eiendeler og dokumentasjon har blitt definert og kommunisert. Men jeg kan ikke gå over den linje i koden utvikling. Det er bare ikke mitt område av ekspertise.

Så, hvorfor skulle designere kunne kode?

Vi har allerede etablert at jeg er ingen utvikler, men jeg har nylig blitt en talsmann for designere å få en god følelse for hvordan design og kode samhandle.

Faktisk, jeg vil kalle det “å spille med kode.” Jeg er definitivt ikke noe som tyder på at UX designere bli utviklere, men i det minste, jeg tror designere ville ha nytte av å bli komfortabel med en grunnleggende forståelse av hva som er mulig i dag med CSS og best practices i HTML.

Å være eksperimentell er en stor del av å gjøre design. Koden er bare et annet medium som vi kan eksperimentere og bygge vakre løsninger. Så, vi kommer til å se på et par måter designere kan eksperimentere med kode, selv med en lys forståelse av det. Hva vi dekker her kan være åpenbart for utviklere, men det er nok av designere der ute som aldri har eksperimentert med kode, og vil være å se disse for første gang.

Så, det er for dem (og kanskje et oppfriskningskurs for deg) som vi ser på følgende nettleser verktøy.

DevTools: Den ultimate kode lekeplass

En av bekymringene en UX-designer kan ha, er å vite hvordan en design holder opp når den er i nettleseren. Er fargene korrekt? Er skrifter leselig hele? Hvordan gjøre elementene svare på ulike enheter? Vil min grå hold staten arbeid med hvit/grå zebra striping på søknaden min nett i praksis? Dette er noen av styling og samhandling problemer designere tenker på når vi hånd av vårt arbeid for utvikling.

Dette er hvor DevTools kan være en designer ‘ s beste venn. Hver nettleser har sin egen versjon av den. Det kan hende du allerede har spilt med slike verktøy før. Det er den lille “Inspisere” alternativet når høyre å klikke på skjermen.

Angi den fantastiske verden av DevTools kan gjøres fra hvilken som helst nettside.

Hva gjør DevTools slik en fantastisk ressurs er at det gir en måte å manipulere kode for en levende nettside eller web applikasjon uten å måtte sette opp et utviklingsmiljø. Og det er disponibel. Eventuelle endringer du gjør er kun for dine øyne og er vasket bort i det øyeblikk nettleseren oppdateres.

Redigere koden i DevTools gjør endringer til side på fly.

Videre, DevTools kan etterligne andre enheter.

Behovet for å se hvordan en side eller endres for å det til å se ut på andre enheter? DevTools kan gi deg en idé.

Og, hvis du ikke har sett det ennå, Firefox, utgitt en fantastisk ny form bane editor som er svært verdifulle for å utforske interessante motiver.

I løpet av de siste månedene, jeg har jobbet på en kompleks web-klienten for en enterprise-nivå søknad. Siste sprint, min UX-design historien var å utforske ser av oppføringen side av web-applikasjon og hvordan å introdusere en ny farge ordningen. Det var vanskelig å forestille seg hvordan endringene jeg gjorde var å gå for å påvirke de verktøy som helhet som noen av komponentene jeg ble endret brukes i produktet.

En dag, når man diskuterer et design beslutning, en av utviklerne testet ut min foreslått å endre en komponent ved hjelp av den nyeste DevTools i sin nettleser. Jeg ble overrasket over hvor mye DevTools har vokst og utvidet siden sist jeg husker det. Jeg kan umiddelbart se effekten av at endringen over hele vår web-applikasjon og hvordan ulike design beslutninger interaksjon med eksisterende design. Jeg begynte å eksperimentere med DevTools meg selv og var i stand til å forhåndsvise og eksperimentere med hvordan min egen enkle CSS endringer i komponentene påvirker hele web-applikasjon. Super nyttig!

Men det var også litt frustrerende å ikke kunne lagre mine eksperimenter og endringer for fremtidig referanse. Så gikk jeg å utforske for å se hva annet var det å støtte mitt design prosessen.

Utvidelser i Chrome-nettleseren

DevTools er er fantastisk rett ut av boksen”, men å eksperimentere med koden blir enda mer imponerende når leserutvidelser som er lagt til blandingen. Chrome, spesielt, har et par som jeg virkelig liker.

Chrome-Utvidelse 1: Bruker CSS

Bruker CSS er en Chrome-utvidelse som lar deg lagre endringer du gjør i DevTools i et redigerbart CSS-kode. Disse CSS-endringer blir automatisk utført på denne siden hvis du Bruker CSS er aktivert. Dette betyr at du kan sette opp CSS overstyrer for en hvilken som helst side på nettet, vise dem senere, og dele dem med andre. Dette kan være et fantastisk verktøy da, sier du, å gjøre et design-gjennomgang av en iscenesettelse område før utgivelsen, eller egentlig noen design leting etter en web-applikasjon eller et nettsted som kan vises i en nettleser.

Det første jeg gjør med Brukeren CSS er å gjøre endringer i Chrome elementer panelet. Så, jeg bare klipp og lim den inn i CSS-endringer fra Chrome DevTools til Bruker-CSS-kode som jeg går sammen. Denne videoen viser i detalj ulike måter å redigere CSS, HTML og Javascript i Chrome DevTools og hvordan jeg bruker UserCSS.

Bruker CSS har en fin innebygde kode editor, slik at koden min er alltid godt formatert og inkluderer syntaks utheving, så jeg trenger ikke å bekymre deg for den slags ting. Jeg liker spesielt det faktum at overstyrer utføres umiddelbart, slik at du kan se endringer på fly. Den har også en nyttig bryter som lar deg slå din overstyrer på og av. Dette gjør det svært enkelt å demonstrere en rekke endringer til et team. Denne utvidelsen har tillatt meg å enkelt presentere en sammenligning mellom en eksisterende side design og forslag til endringer. Jeg har selv brukt den til å lage en enkel video som viser de foreslåtte endringer av utforming.

I denne videoen jeg gjøre noen enkle endringer til min web-side og deretter vise hvordan jeg kan slå på og av endringer ved å klikke på/av-knappen på Bruker-CSS:

Denne utvidelsen er en perfekt hvis du alt du trenger å gjøre er å redigere CSS, spesielt hvis du har noen veldig enkle design endringer for å gjøre vil de endringene vedvarer. Men kompleksiteten av en design øker, jeg har funnet meg selv som ønsker å spare mer enn en kodebit på en gang. Kopiere og lime inn koden i og ut av Brukeren CSS editor var blitt en smerte. Jeg ønsket noe mer fleksibilitet og frihet til å eksperimentere. Jeg ønsket også å være i stand til å se på enkle endringer i HTML-koden på mine web-applikasjon og selv spille med en bit av JavaScript.

Det er der den neste utvidelsen kommer inn i bildet.

Chrome-Utvidelse 2: Web Overstyrer

Den andre Chrome-utvidelsen fant jeg kalles Web Overstyre og det gir en måte å overstyre HTML, CSS og JavaScript. Alle av dem! Dette er presentert som tre faner, mye på samme måte CodePen gjør, noe som gjør det til et svært kraftig verktøy for å lage grove jobber design prototyper.

Web Overstyrer gir deg også muligheten til å lagre flere filer slik at du kan skifte mellom ulike deler av et design på eller i forskjellige kombinasjoner. Det også raskt bytte mellom ulike alternativer for å vise frem ulike design konsepter.

Denne videoen viser hvordan jeg har lagt til et HTML-element på en side og redigerte det nye elementet med noen grunnleggende CSS:

Ved hjelp av HTML-kategorien gjør det mulig å redigere et element på siden, for eksempel bytte ut en logo, fjerne unødvendige elementer, eller legge til nye. JavaScript-kategorien er like i at jeg kan gjøre enkle endringer, som å sprøyte inn mer tekst i nettstedet tittel, slik at jeg kan teste hvordan dynamiske endringer kan påvirke layout — dette kan være nyttig for å teste ulike scenarier, som for eksempel forskjeller med internasjonalisering.

Disse endringer kan være trivielle fra en koding perspektiv, men de lar meg å utforske hundrevis av alternative utforminger i en mye kortere tid, og med mye mindre risiko enn scooting punkter rundt i en design program. Jeg bokstavelig talt ikke kunne utforske så mange ideer som du raskt kan bruke mine tradisjonelle UX prototyping verktøy som jeg kan med denne utvidelsen.

Og, hva er mer, for både meg og mitt team har tillit i design leveransen fordi vi har testet dem tidlig i nettleseren. Selv de mest pixel-perfekte Photoshop-filen kan gå tapt i oversettelsen når design er i nettleseren fordi det er egentlig bare et øyeblikksbilde av en design i en statisk tilstand. Testing design først i nettleseren ved hjelp av disse utvidelsene bevise at det vi har utviklet er mulig.

På baksiden av dette, du ønsker kanskje å sjekke ut hvordan Jon Kantner brukt lignende utvidelser for å deaktivere CSS som et middel til å granske semantisk markup ulike nettsteder. Det er ikke akkurat design-relatert, men interessant å se hvordan disse verktøyene kan ha forskjellige bruksmåter.

Hva jeg har lært så langt

Jeg er spent på hva jeg har lært siden lent inn DevTools og leserutvidelser. Jeg tror min design er så mye bedre som et resultat. Jeg også finne meg i stand til å ha mer produktive samtaler med utviklere, fordi vi nå har en måte å kommunisere godt. Fellestrekk mellom design og kode i raske prototyper som virkelig bidrar til å tilrettelegge for diskusjon. Og, fordi jeg spiller rundt med selve koden, jeg har en mye bedre følelse om hvordan den underliggende koden vil til slutt være skriftlig og kan føle en mye mer med arbeidet utviklere gjøre — og kanskje hvordan jeg kan gjøre jobben lettere i prosessen.

Det har også skapt en kultur for samarbeid rapid prototyping på mitt lag, som er en helt annen historie.

Å spille med kode har åpnet opp for nye ideer og oppmuntret meg til å tilpasse arbeidet mitt til kontekst av nettet. Det er blitt sagt at å komme inn i nettleseren tidligere i design prosessen er ideell og det er disse typer verktøy som lar meg (og du) til å gjøre nettopp det!

Har du andre verktøy og prosesser som du bruker til å lette samarbeidet mellom design og kode? Kan du dele dem i kommentarfeltet!