Consequent Design Systemen in de Schets Met Atomic Ontwerp en de Auto-Lay-out Plugin

0
46

Doet u bij het ontwerpen van digitale producten (of websites) en met de hand ontwerpen bestanden uit aan ontwikkelaars voor de implementatie? Als je antwoord ja is, vestigen in! Terwijl het zou moeten-ontwerpers-code debat woedt, gaan we kijken hoe het toevoegen van een methodologie om uw ontwerp workflow kan je sneller, meer verenigbaar, en geliefd door alle ontwikkelaars… zelfs als u geen code.

Laten we graven in!

Waarom een methodiek?

In de ontwikkeling van de wereld, lijkt het ten minste de helft van uw carrière is over het verblijf up-to-date met nieuwe tech-en het egaliseren van uw vaardigheden. Terwijl het tempo kan niet zo hectisch in het ontwerp landschap is in ontwikkeling, er is een enorme verschuiving in de tools van de afgelopen drie jaar of zo.

Hulpmiddelen als Schetsen hebben gemaakt veel van de oude pijn van het werken in de ontwerp-bestanden een ding van het verleden. Slimme combinaties van tekst stijlen, object-stijlen, symbolen en bibliotheken nu betekenen ingrijpende veranderingen zijn slechts één klik van u verwijderd. Niet meer plukken door 40 Photoshop-lagen te maken van een enkele kleur te veranderen.

Maar toch, het vegen van kleur verandert in een marketing landing pagina is niet langer de grootste uitdaging. Ontwerp en ontwikkeling van teams nu verwacht op te leveren complexe interfaces geladen met interactie en voorwaardelijke staten… voor elk apparaat nu beschikbaar en voor de volgende dag. Werken als designer en developer, ik heb de workflow wrijving van beide kanten.

Buiten tools, ontwerpers hebben nood aan een aanpak.

Het denken in termen van “onderdelen”

Als u werkt in de technische ruimte in welke hoedanigheid dan ook, heb je waarschijnlijk gehoord van de ontwikkeling van de kaders zoals Reageren, Hoekige, of Vue.

Um ja, ik ben een ontwerper dus dat maakt niet echt betrekking hebben op mij, bye.

Een beetje. Maar als je hoopt te doen ontwerpen voor moderne digitale producten, is er een vrij grote kans dat de genoemde producten worden gebouwd met behulp van een van deze kaders. Niemand verwacht dat een architect voor het bouwen van de structuren, maar zij beter hebben een hoog niveau van begrip van wat de instrumenten zijn en hoe ze gebruikt zullen worden.

Dus is hier wat u moet weten over het moderne front-end kaders:

Ze hebben gebracht aan een paradigma shift voor ontwikkelaars waarop de producten worden gebouwd door het combineren van een serie van kleinere componenten in complexe systemen die zich kunnen aanpassen aan de verschillende situaties en op verschillende apparaten. Dit maakt de code makkelijker te onderhouden, en het hele systeem flexibeler.

Voor een verscheidenheid van legitieme redenen, veel ontwerpers hebben niet gevangen op dit paradigma shift zo snel als ontwikkelaars. We zijn het missen van een mentaal model voor het maken van de stukken die deze interfaces onafhankelijk van hun omgeving/pagina ‘ s/schermen/viewports enz.

Een dergelijke aanpak is Atomic Ontwerp.

Wat is Atomaire Ontwerp?

Eerst bedacht door Brad Frost, Atomic Design is een methode die probeert antwoord te geven op een simpele vraag: als honderden apparaat maten bedoel, we kunnen niet meer effectief ontwerp “pagina ‘ s” hoe doen we zelfs de vormgeving?

Het antwoord ligt in het afbreken van alles wat bij het maken van een “pagina” of de “weergave” in kleinere en kleinere stukken, het maken van een “systeem” van blokken die vervolgens kunnen worden gerecombineerd in een oneindig aantal variaties voor ons project.

Je kunt het zien als de ingrediënten in een recept. Zeker, je zou kunnen maken van muffins, maar je zou net zo goed een taart met dezelfde lijst van ingrediënten.

Brad heeft besloten om het gebruik van de chemie analogie, en dus stelt hij voor dat onze systemen zijn gemaakt van:

  • Atomen
  • Moleculen
  • Organismen

Voor de eenvoud laten we een kijkje nemen hoe kunnen we dit toepassen op een website.

Atomen

Atomen vertegenwoordigen de kleinste bouwstenen die onze user interfaces. Stel je een formulier label, een vorm van input, en een knop. Elk van hen vertegenwoordigt een atoom:

Een header, tekst blok, en elke koppeling dienen als atomen.

Moleculen

Moleculen zijn gewoon groepen van atomen gecombineerd om iets nieuws te creëren. Voor onze doeleinden, kunnen we denken aan moleculen als groepen van versnipperde UI in stukken, die worden gecombineerd tot een zinvol onderdeel.

De atomen vormen samen een “kaart” component.

Organismen

Organismen zijn opgebouwd uit groepen van moleculen (of atomen of andere organismen). Dit zijn de stukjes van een interface die we kunnen zien als een ‘ sectie.” In een facturatie-applicatie, een organisme kan een dashboard met de combinatie van een “nieuwe factuur” – knop (atoom), een zoekscherm (molecuul), een “totaal open” kaart (molecule), en een tabel met de vervallen facturen. Je krijgt het idee.

Laten we eens kijken naar wat een “blok” organisme zou kunnen uitzien in onze eenvoudige website:

Een header (atoom), drie kaarten (moleculen) in een afbeelding (atom), en een teaser (molecuul) zijn samengevoegd tot een aanbevolen blok organisme.

Met behulp van stacks voor consistentie

Zo, nu hebben we een mentaal model voor de “dingen” hoe maken we deze bouwstenen? Schets geweldig uit de doos, maar de plugins beschikbaar voor het leveren enorme prestaties tools… net zoals tekst-editors voor ontwikkelaars. We zullen met behulp van een Schets van de ingebouwde symbolen tools, evenals de verbazingwekkende Stapels” – functie van Anima App ‘ s Auto-Lay-out plugin.

Het gebruik van deze gereedschappen zal een aantal onbetaalbare voordelen die zal ik als we gaan, maar bij het minste dat u kunt rekenen op:

  • een beter ontwerp consistentie en sneller iteratie
  • een sanity check uit met behulp van een gelijkmatige tussenruimte multipliers
  • sneller opnieuw ordenen van de inhoud
  • helpen bij het identificeren van problemen in het ontwerp snel en vroeg op

Wat zijn precies stapels?

Als je ooit hebt gehoord ontwikkelaars opgewonden praten over flexbox voor het bouwen van lay-outs in CSS, dan kunt u denken aan stapels als de Schets gelijk. Stapels (zoals flexbox) kunt u in groep een reeks van lagen samen en vervolgens het bepalen van hun onderlinge afstand en afstemming op een verticale of horizontale as.

Hier zijn we in groep drie punten op één lijn te brengen door middel van hun centrum en stel 48px verticale ruimte tussen elkaar:

Een eenvoudig gestapeld map uitlijnen en verdelen van drie items.

De lagen worden automatisch uit de groep in een blauwe map met een pictogram van verticale of horizontale punten om te laten zien wat voor soort stack die je hebt.

Kijk eens aan! Je net geleerd flexbox zonder het aanraken van een regel code. 😂

Geneste stapels

De echte kracht van stapels komt van nesten stapels in andere stacks:

De stapels worden genest in elkaar voor het maken van complexe afstand systemen.]

Hier zien we een kaart onderdeel gemaakt van meerdere stacks:

  • kaart__cta link uit het vorige voorbeeld.
  • kaart__kopiëren stapel die zorgt voor de uitlijning en ruimte voor de kop en tekst.
  • kaart__inhoud bepaalt de onderlinge afstand en afstemming tussen de kaart__cta en kaart__kopiëren stapels.

Een korte opmerking over de laag naamgeving

Ik bijna altijd gebruik maken van de BEM naamgevingsconventie voor mijn onderdelen. Ontwikkelaars genieten van de logica als ik aan de hand van ontwerp-bestanden, omdat het vaak op een lijn met de naamgeving ze worden gebruikt in de code. In het geval waar ik de ontwikkeling van het project zelf, het geeft me een beetje een voorsprong als ik begon na te denken over de markering in de ontwerpfase.

Als dat is super verwarrend, maak je geen zorgen over. Neem gewoon je collega’ s werk een beetje makkelijker door het organiseren van de lagen en hen beschrijvende namen.

Stapels shmacks, ik heb veel aandacht voor detail en kan dit allemaal handmatig!

Je hebt helemaal gelijk! Maar wat als je moet voorzichtig legde uit 10 items, alle van verschillende grootte, en nu hebben ze behoefte aan extra ruimte tussen hen? Of, moet u een lijn toevoegen van tekst aan een van deze items? Of, je nodig hebt om te splitsen inhoud in drie kolommen in plaats van vier?

Dat gebeurt nooit, toch? 😱

Een van de twee dingen gebeurt meestal in dit stadium:

  1. Je start handmatig de reorganisatie van alle dingen en iemand betaalt voor verspilde tijd (of het nu je of de klant).
  2. Je beetje onzin… na alle, de ontwikkelaar zeker weet wat uw oorspronkelijke bedoelingen waren voordat u de linkerkant van elke marge van een paar pixels in uw lay-out. _(ツ)_/

Hier is wat stapels krijgt u:

  • U kunt wijzig de uitlijning of afstand opties als u met een eenvoudige waarde-aanpassing en dingen gewoon magisch-update.
  • U kunt het formaat van elementen zonder te halen aan het tekengebied te rejig alle dingen.
  • U kunt de volgorde wijzigen, toevoegen of verwijderen van items uit de stack map en bekijk de items verdelen zelf op basis van uw instellingen—net als code. 🎉

Merk op hoe snel het is om inhoud te bewerken en te experimenteren met verschillende lay-outs, met behoud van consistentie:

Stapels en symbolen experimenten goedkope en consistent zijn.

OK, nu weten we dus waarom stapels zijn geweldig, hoe kunnen we ze gebruiken?

Het maken van stapels

Het aanmaken van een stack is een kwestie van het selecteren van twee (of meer) lagen en het raken van de stapels map-pictogram in het infovenster. Vanaf daar kunt u beslissen of u het stapelen van lagen horizontaal of verticaal, en stel de afstand tussen de items.

Hier is een voorbeeld van hoe we zouden het maken van een atoom onderdeel met behulp van stacks:

Het creëren van een horizontale stapeling met 20px afstand tussen de tekst en pictogram.

En, laten we nu eens toepassen van de stapels concept voor een meer complexe molecuul onderdeel:

Het maken van een kaart molecuul met behulp van geneste stapels.

Het maken van symbolen van stapels

We hebben het gehad over de vele voordelen van de stacks, maar kunnen we ze zelfs meer efficiënt door het toepassen van een Schets, het symbool van gereedschap. Het resultaat dat we krijgen is een stapel die kunnen worden beheerd vanuit één bron aanleg en hergebruikt overal.

Het maken van een atoom symbool

We kunnen grijpen dat call-to-action stapel die we net gemaakt hebt en maak er een symbool. Dan kunnen wij gebruik maken van overrides voor de tekst en weet dat stacks zullen ere van de afstand:

Het maken van een symbool van een stack is ideaal voor het waarborgen van ruimte voor consistentie met overschrijvingen.

Als ik later besluit dat ik wil veranderen van de ruimte door een paar pixels, kan ik gewoon tweak de stapel afstand op het symbool en het bij te werken op elk exemplaar 🎉

Het maken van een molecuul symbool

Ook ik kan de groep meerdere gestapelde atomen in een onderdeel en dat in een symbool:

Het maken van een kaart symbool van onze stapels en call-to-action-symbool.

Symbolen + stacks = 💪

Zou het niet mooi zijn als we konden handhaven van de ruimtelijke eisen die we stellen, ongeacht de tweaks kunnen we ze langs de lijn? Ja!

Het vervangen van een item met een ander in een component

Laten we aannemen dat onze kaart component vereist nu een knop in plaats van een koppeling als een call-to-action. Zolang we die knop in de juiste stack map, alle pixel-duwen gebeurt automatisch:

Omdat onze symbool gebruikt stapels, de afstand tussen de kopie en de call-to-action zal automatisch worden gerespecteerd.

Het bewerken van moleculen en organismen op de vlieg 🔥

Je zou denken dat dit niet een grote deal en dat het aanpassen van de kleine ruimtelijk probleem uit het vorige voorbeeld zou hebben genomen slechts een moment zonder stapels. En je zou niet verkeerd zijn. Maar laten we terug verwijzen naar onze begrippen over atomic ontwerp voor een moment, en vraagt wat er gebeurt als we veel meer complex “organismen” (groepen van atomen en moleculen) te behandelen?

Vergelijkbaar met onze mobiele voorbeeld van het begin, dit is waar het ingebouwde vermogen van stapels schijnt echt:

Stapels en symbolen maakt experimenten goedkope en consistent zijn.

Met een bibliotheek van symbolen (atomen) op onze vingertoppen, en krachtige afstand/uitlijning instrumenten, we kunnen experimenteren en maak eindeloze variaties van onderdelen. De sleutel is dat we kunnen doen het snel en zonder in te boeten aan design consistentie.

Complexe lay-outs en mega stapels

Houden met de elementen die we al hebben ontwikkeld, laten zien wat een stapel eruit zou kunnen zien voor een eenvoudige marketing pagina:

Een voorbeeld van een uitgevouwen stapel.

Laat de eerste indruk van de complexiteit van die stapels bang maken. Een niet-gestapelde versie van dit tekengebied zou niet kijken dus verschillende afgezien van de kleur van de map iconen.

Maar het is juist die mappen dat geeft ons alle macht:

De lay-experimenten kan snel en goedkoop!

We hoeven misschien niet de code, maar we hebben een verantwoordelijkheid voor het beheersen onze tools voor efficiëntie en uitzoeken van nieuwe workflows met onze ontwikkelaar collega ‘ s.

Dit betekent afstand nemen van het denken van ontwerp in de context van de pagina ‘ s, en het creëren van verzamelingen van onderdelen… modules… ingrediënten… lego… het uitzoeken van een metafoor die voor u werkt en zorg ervoor dat het hele team deelt de woordenschat.

Zodra we dit doen, problemen rondom workflow en samenwerking weg te smelten:

Snelheid en Flexibiliteit

Zorgvuldig componenten van het gebouw met de symbolen en het gebruik van geautomatiseerde en een gelijkmatige tussenruimte/afstemming met stapels vereist een beetje tijd investering vooraf. Bij het retourneren van een eenvoudig experiment en het vermogen om snel en tegen lage kosten is de moeite waard.

Consistentie en UX

Na te denken over hoe de elementen werken als combinaties en in verschillende contexten zal vangen UX-het ruikt vroeg en bloot problemen rond consistentie voordat je 13-schermen in. Veranderen van richting door het aanpassen van een paar variabelen/onderdelen/afstand eenheden beats aandringen elementen rond een tekengebied van alle dag.

Verantwoordelijkheid en Governance

Een enkele 1440px pagina weergave van het ding dat je aan het bouwen bent gewoon niet bepaald een ontwikkelaar met voldoende context voor meerdere schermen en interactie. Op hetzelfde moment, knutselen meerdere high-fidelity comps een klein element in een tijd is een budget buster (en dit geldt met name voor de app ontwerpen). Dus, wat heeft de neiging te gebeuren op kleine teams? De ontwikkelaar krijgt een prachtige 1440px bekijken… aaaaand alle cognitieve overhead van het vullen van de gaten voor al het andere.

Het verstrekken van de gegevens is onze taak.

Atomic ontwerp gaf ons snelheid, creatieve vrijheid en flexibiliteit. Dat veranderde alles.”

—Uit de inleiding van Atomic Ontwerp

Als we werken met ontwikkelaars aan digitale producten, moeten we enthousiast over het leren hoe de worst gemaakt en passen onze aanpak aan het ontwerp aangepast. Onze tools kan niet evolueren zo snel als JavaScript frameworks, maar als je niet hebt genomen een kijkje onder aan de kap van een aantal van deze apps in de laatste paar jaar, dit is een geweldige tijd om te graven!