Met behulp van DevTools voor het Verbeteren van de UX Design tot Development Proces

0
41

Ik zou u graag vertellen hoe ik het zie code en design elkaar kruisen en elkaar ondersteunen. Specifiek wil ik over hoe ontwerpers kunnen de code gebruiken in hun dagelijkse werk. Ik stel voor dat dit niet omdat het een vaardigheid die nodig is, maar omdat zelfs een basis begrip van codering kan ontwerpen beter en de hand-off van ontwerp tot ontwikkeling soepeler.

Als UX Designer, ik ben altijd op zoek naar goede manieren om zowel het verkennen van mijn UX design van problemen en het communiceren van de definitieve ontwerpen aan anderen. In de afgelopen 30 jaar, mijn werk heeft altijd betrokken werken samen met de ontwikkelaars, maar over het algemeen is er een grote kloof tussen wat ik doe en wat ontwikkelaars doen.

Ik kan de code op een basis niveau. Bijvoorbeeld, ik heb leren C aan studenten terug toen ik een post-graduate student. Ik heb gewerkt op de bruikbaarheid van JDeveloper, Oracle ‘ s Integrated Development Environment (IDE) voor Java. Ik werkte ook voor een zeer korte tijd op het vereenvoudigen van de UX van een WordPress content management omgeving toegankelijk te maken voor minder technische gebruikers. Dit vereist een goede kennis van HTML en CSS. Ik ook als vrijwilliger op het ontwerp van de website van PHP en had om enig begrip te ontwikkelen van de kant van de server van web ontwikkeling.

Maar zelfs gezien deze ervaringen, ik ben geen ontwikkelaar in een ware zin van het woord. Als ik toevallig op zoek naar de code ‘ s in een “just in time” leren-model — ik kijk wat ik nodig heb en dan hack totdat het werkt. Het leren van deze manier heeft vaak afgekeurd, een beetje zoals het leren om te rijden zonder lessen. U pick-up een slechte ontwikkeling gewoonten, maar misschien is dat OK voor het werk dat ik doe.

Dus, nee ik niet ontwikkelen of code te schrijven. Mijn dag-tot-dag werk is voornamelijk besteed aan het tekenen, praten en het verzamelen van requirements. Het ontwerp gaat, ik zal beginnen met het schetsen van concepten in een notebook of met behulp van Balsamiq. Dan breng ik UX wireframes en prototypes met behulp van tools zoals Axure, Adobe XD, InVision Studio, Figma en Schetsen. Tegen de tijd dat ik klaar ben om aan de hand van mijn deliverables van de ontwikkeling van het visuele vermogen en documentatie zijn gedefinieerd en gecommuniceerd. Maar ik stap ook niet over de lijn code in ontwikkeling. Dat is gewoon niet mijn gebied van deskundigheid.

Dus, waarom zouden ontwerpers weten-code?

We hebben al vastgesteld dat ik ben geen developer, maar ik heb sinds kort een pleitbezorger voor ontwerpers krijgen van een goed gevoel voor hoe het ontwerp en de code communiceren.

In feite, ik noem het “spelen met de code.” Ik ben zeker niet suggereren dat UX ontwerpers worden ontwikkelaars, maar op zijn minst, ik denk dat ontwerpers zouden profiteren door zich comfortabel met een fundamenteel begrip van wat momenteel mogelijk is met CSS en best practices in HTML.

Een experimenteel is een groot onderdeel van het ontwerp. De Code is gewoon een ander medium waarmee we kunnen experimenteren en bouwen mooie oplossingen. Dus we gaan kijken naar een paar van de manieren waarop ontwerpers kunnen experimenteren met de code, zelfs met een licht begrijpen. Wat we bedekken hier moge duidelijk zijn ontwikkelaars, maar er zijn tal van ontwerpers die er zijn die nooit hebben geëxperimenteerd met de code en ziet deze voor het eerst.

Dus, het is voor hen (en misschien is een opfriscursus voor je) dat we kijken naar de volgende browser tools.

DevTools: De uiteindelijke code speeltuin

Een van de zorgen van een UX ontwerper zou kunnen zijn, is te weten hoe een ontwerp kan maximaal eenmaal in de browser. Zijn de kleuren nauwkeurig? Zijn letters leesbaar zijn rookvrij? Hoe doen de elementen die reageren op verschillende apparaten? Zal mijn grijze aanwijstoestand werken met de wit/grijze zebra striping op mijn verzoek grids in de praktijk? Dit zijn enkele van de styling en de interactie problemen ontwerpers zijn na te denken over wanneer wij onze werkzaamheden uit voor ontwikkeling.

Dit is waar DevTools kan een designer ‘ s beste vriend. Elke browser heeft zijn eigen versie van. U hebt wellicht al gespeeld met dergelijke tools voor. Het is dat kleine “Inspecteren” optie bij het rechts klikken op het scherm.

Het invoeren van de wondere wereld van DevTools kan worden gedaan vanaf elke webpagina.

Wat maakt DevTools dergelijke een prachtige bron is dat het voorziet in een manier om het manipuleren van de code van een live website of web-applicatie zonder het opzetten van een ontwikkelomgeving. En het is voor eenmalig gebruik. Eventuele wijzigingen die je maakt zijn voor uw ogen en zijn weggewassen het moment dat de browser wordt vernieuwd.

Bewerken code in DevTools wijzigingen aan de pagina op de vlieg.

Verder DevTools kan lijken op andere apparaten.

Nodig om te zien hoe een pagina of wijzigingen aan het kijken naar andere apparaten? DevTools kan je een idee geven.

En, als je het nog niet hebt gezien, Firefox, bracht een prachtige nieuwe vorm path editor dat is zeer waardevol voor het verkennen van interessante ontwerpen.

De afgelopen maanden heb ik gewerkt op een complex web client voor een enterprise-applicatie. Laatste sprint, mijn UX design verhaal was na te gaan of de look van de beginpagina van de applicatie en het introduceren van een nieuw kleurenschema. Het was moeilijk voor te stellen hoe de wijzigingen die ik aan het maken was waren gaan om de impact van de tool als een geheel, als een aantal van de onderdelen die ik aan het veranderen was zijn gebruikt in het product.

Op een dag, bij het bespreken van een ontwerp-besluit, een van de ontwikkelaars getest op mijn voorgestelde wijziging van een onderdeel met behulp van de nieuwste DevTools in zijn browser. Ik was verbaasd over hoe veel DevTools is gegroeid en uitgebreid sinds ik voor het laatst onthouden. Ik kon onmiddellijk zien wat het effect van die verandering in ons hele web applicatie en hoe de verschillende beslissingen interactie met het bestaande design. Ik begon te experimenteren met DevTools mezelf en was in staat te bekijken en te experimenteren met hoe mijn eigen eenvoudige CSS wijzigingen aan onderdelen van invloed zou zijn op het hele web applicatie. Super handig!

Echter, het was ook een beetje frustrerend om niet te kunnen slaan mijn experimenten en veranderingen voor de toekomst. Dus, ik ging verkennen om te zien wat was er ter ondersteuning van mijn ontwerp proces.

De Chrome-browser-extensies

DevTools is zijn verbazingwekkende recht uit de doos, maar experimenteren met de code krijgt nog meer geweldige wanneer de browser-extensies worden toegevoegd aan de mix. Chrome, in het bijzonder, heeft een paar die ik echt leuk vind.

Chrome-Extensie 1: Gebruiker CSS

Gebruiker CSS is een Chrome-extensie die u toelaat om het opslaan van de wijzigingen die u aanbrengt in DevTools in een bewerkbaar CSS-code op het tabblad. Deze CSS wijzigingen worden automatisch uitgevoerd op die pagina als Gebruiker CSS is ingeschakeld. Dit betekent dat u kunt instellen CSS-overrides voor elke pagina op het web, bekijk ze later, en ze te delen met anderen. Dit kan een geweldig hulpmiddel als, zeg, het doen van een toetsing van het ontwerp van een staging site voorafgaand aan de release, of echt een ontwerp verkenning voor een web applicatie of website die is te bekijken in een browser.

Het eerste wat ik doe met Gebruiker CSS is het maken van veranderingen in de Chrome-elementen paneel. Dan, ik knip en plak de CSS wijzigingen van Chrome DevTools aan de Gebruiker CSS-code op het tabblad zoals ik ben mee te gaan. Deze video toont in detail de verschillende manieren voor het bewerken van CSS, HTML en Javascript in Chrome DevTools en hoe gebruik ik UserCSS.

Gebruiker CSS heeft een mooie ingebouwde code-editor, dus mijn code is altijd goed opgemaakt en voorzien van syntax highlighting zodat ik niet hoef te maken over dat soort dingen. Ik hou vooral van het feit dat overrides worden direct uitgevoerd, dus u kunt de wijzigingen op de vlieg. Het heeft ook een handig schakelaar waarmee u uw overschrijvingen in-en uitschakelen. Dit maakt het zeer eenvoudig om aan te tonen dat een wijziging aan een team. Deze uitbreiding heeft me toegestaan om gemakkelijk een vergelijking tussen een bestaande pagina ontwerp en de voorgestelde wijzigingen. Ik heb het zelfs gebruikt om een eenvoudige video demonstreert de voorgestelde wijzigingen in het ontwerp.

In deze video maak ik een aantal eenvoudige bewerkingen op mijn web pagina en dan blijkt hoe kan ik in-en uitschakelen van de bewerkingen door simpelweg te klikken op de knop on/off op de Gebruiker CSS:

Deze extensie is een ideale keuze als je op alles wat je hoeft te doen is het bewerken van CSS, vooral als je een paar simpele wijzigingen in het ontwerp te maken willen deze veranderingen. Echter, de complexiteit van een ontwerp verhoogt, ik heb mezelf willen besparen meer dan een stukje code op een moment. Het kopiëren en plakken van de code in en out van de Gebruiker CSS editor steeds pijn. Ik wilde iets met meer flexibiliteit en vrijheid om te experimenteren. Ik wilde ook kunnen kijken op een eenvoudige wijzigingen aan in de HTML-code van mijn web applicatie en zelfs spelen met een stukje JavaScript.

Dat is waar de volgende uitbreiding in het spel komt.

Chrome-Extensie 2: Web-Overrides

De tweede Chrome-extensie vond ik heet Web Overschrijven en het biedt een manier om te overschrijven HTML, CSS en JavaScript. Alle van hen! Dit wordt gepresenteerd als drie tabbladen, veel op dezelfde manier CodePen doet, waardoor het een zeer krachtige tool voor het maken van ruwe werken ontwerpen van prototypes.

Web-Overrides kunt u ook meerdere bestanden opslaan, zodat u kunt wisselen verschillende onderdelen van een ontwerp-of uitschakelen in verschillende combinaties. Het is ook snel schakelt tussen de verschillende opties om uit verschillende ontwerp-concepten.

Deze video laat zien hoe ik toegevoegd een HTML-element op een pagina en bewerkt het nieuwe element met een aantal basis CSS:

Met behulp van het tabblad HTML maakt het mogelijk om elk element op de pagina, zoals het wisselen van een logo, het verwijderen van overbodige elementen, of nieuwe toe te voegen. Het JavaScript tabblad is vergelijkbaar in dat ik kan doen eenvoudige aanpassingen, zoals het injecteren van extra tekst in de website titel, zodat ik kan testen hoe de dynamische veranderingen kunnen invloed hebben op de lay — dit kan nuttig zijn voor het testen van verschillende scenario ‘ s, zoals verschillen met internationalisering.

Deze bewerkingen kunnen worden triviaal is van een codering perspectief, maar ze laten mij om te verkennen honderden alternatieve ontwerpen in een veel kortere tijd en met minder risico dan steppen maakt pixels rond in een ontwerp van de toepassing. Ik letterlijk niet kon verkennen van veel van de ideeën zo snel met mijn traditionele UX prototyping tools zoals ik kan met deze extensie.

En, wat meer is, mij en mijn team hebben vertrouwen in de design deliverables omdat we testten ze vroeg in de browser. Zelfs de meest pixel-perfecte Photoshop-bestand kunt krijgen lost in translation wanneer het ontwerp is in de browser, omdat het is eigenlijk gewoon een momentopname van een ontwerp in een statische toestand. Testen van de eerste ontwerpen in de browser het gebruik van deze extensies bewijzen, dat wat we hebben ontworpen is het mogelijk.

Op de keerzijde van deze, die je zou willen om te controleren hoe Jon Kantner gebruikt dezelfde browser-extensies uitschakelen CSS als een middel tot controle van de semantische opmaak van diverse sites. Het is niet precies design-gerelateerd, maar interessant om te zien hoe deze tools kunnen verschillende use cases.

Wat ik tot nu toe geleerd

Ik ben enthousiast over wat ik heb geleerd sinds leunen in DevTools en browser-extensies. Ik geloof dat mijn ontwerpen zijn zo veel beter als resultaat. Ook vind ik mezelf in staat om meer productieve gesprekken met ontwikkelaars, want we hebben nu een manier om goed te communiceren. De gemeenschappelijke grond tussen het ontwerp en de code in rapid prototypes echt bijdraagt aan een discussie. En, omdat ik aan het spelen ben met actuele code, ik heb een veel beter gevoel over hoe de onderliggende code zal uiteindelijk worden geschreven en kan inleven veel meer met het werk van ontwikkelaars doen — en misschien hoe ik kan hun banen gemakkelijker te maken in het proces.

Het heeft ook geleid tot een cultuur van samenwerking op het gebied van rapid prototyping op mijn team dat is een heel ander verhaal.

Het spelen met de code heeft de deur geopend voor nieuwe ideeën en heeft me aangemoedigd om mijn werk naar de context van het web. Het is al gezegd dat het krijgen in de browser, die eerder in het ontwerpproces is ideaal en dit zijn de soorten tools die mij (en u) om dat te doen!

Heb je andere instrumenten of processen die u gebruikt voor het vergemakkelijken van de samenwerking tussen het ontwerp en de code? Deel ze in de comments!