Det er på tide at designe i den virkelige verden. Vi præsenterer Hadron!

Hadron er et værktøj, der sigter mod at gøre design gennem kode visuelt, hurtigt og nemt ved at omfatte webplatformen.

Vi som designere er arkitekterne for de digitale oplevelser, vi finder overalt i dag. Vi er skabere af natur, men skabelsesdelen har altid været overladt til ingeniører, det er dem, der kunne bringe vores koncepter til live.

Tidligere opstod designværktøjer på ideen om at give designere mulighed for at bevæge sig hurtigt. Ved blot at plotte pixels, kunne vi let koncentrere os om design. Og denne adskillelse af bekymringer var god. Det ændrede processen med at designe og med det blomstrede design. Vi lærte at kommunikere gennem grænseflader, og det blev en nøglerolle i næsten enhver virksomhed.

Men tiden går, og i dag tegner grænseflader, det er bare ikke godt nok. Det er for langt bortset fra implementering og virkelighed, og det fortæller ikke hele historien. Prototype-værktøjer hjalp os med at komme tættere på noget, der er noget interaktivt, men de største problemer har altid forblevet uberørt: vi er stadig så langt fra hinanden som det kan være fra det medium, vi designer til, og udviklere og designere er for frakoblede.

Da alt andet ændrer sig, bruger vi stadig de samme designmetoder, som vi begyndte at bruge for mere end 20 år siden. Et nødvendigt onde, alt sammen fordi kodning er hård, ikke? Vi tror, ​​det er tid til en ændring!

En bedre verden for designere ... og udviklere.

Ideen om at designe ved hjælp af kode er ikke ny. Faktisk har det eksisteret i årtier! fordi vi på en eller anden måde altid har vidst, at design i brugerens miljø ville løse så mange problemer, så tænk over det:

  • Design ville stoppe med at være et engangs aktiv, men det egentlige produkt i sig selv. Ikke bare hvordan det ser ud, men hvordan det også fungerer.
  • Designere og udviklere ville kommunikere, dele og arbejde sammen gennem den samme kanal.
  • Fordi design skulle udføres i slutbrugermiljøet, i stedet for at tegne "hvad jeg ønsker det var", ville jeg skabe tingene for ægte, så det vil se nøjagtigt ud, som jeg forestiller mig det. Vi ville dræbe det trin, hvor en udvikler skal (gå glip af) fortolke en masse billeder, og det betyder færre spørgsmål og møder!
  • Ved at dele den samme kodebase, ville design-iteration blive meget meget bedre.
  • Responsivitet er hjemmehørende på Internettet, og det samme er komponenter, animationer og interaktioner. Umenet, standard, fremtidssikker løsning ud af boksen.

Vi ville have delt komponenter lavet af designere, der opfører sig og ser ud til at være beregnet til, i enhver enhed og situation. Designere og udviklere vil hjælpe og komplementere hinanden, og udvikling bliver til at handle mere om samling og mindre om håndværk. (Denne idé blev diskuteret detaljeret i denne store tale af Monica Dinculescu)

Men selvfølgelig skal designprocessen være visuel, enkel og hurtig. Og kodning har altid været langsom, næppe visuel og ikke så enkel.

Men hvorfor nu?

Hvordan gør du design enkelt, hurtigt og visuelt, mens du bruger kode? Det viser sig, at Internettet i dag er en så fantastisk platform takket være så mange fantastiske mennesker, der arbejder på at gøre det bedre og bedre.

  • Webkomponenter gør det nemt at oprette nye elementer med indkapslede stilarter og adfærd, der kan genbruges og deles. De er byggestenene i moderne webapps.
  • CSS Grid og Flexbox er slutningen på fortidens komplekse lay-out-problem.
  • Webanimationer gør animationer let at beskrive fra Javascript, og fordi enhver opførsel kan pakkes ind i en webkomponent, kan vi også oprette animationer ved hjælp af HTML og CSS også!
  • Service Worker, Cache Storage, IndexedDB og nogle andre Web API'er giver os mulighed for at holde alle dine projektfiler lokalt og offline tilgængelige.

Og det er kun få af de ting, der var nødvendige for at gøre det muligt.

Mød Hadron!

Hadron er et værktøj, der sigter mod at gøre design gennem kode visuelt, hurtigt og nemt ved at omfatte webplatformen.

Hadron

Selvom du vil bruge kode, er det gode, at ikke kun meget lidt skrivning er nødvendigt for at komme i gang, men også dine designs kan forbedres gradvist. Betydning af, at du kun kan begynde at designe med simpelt HTML og CSS og senere få dit design til at gøre mere ved at tilføje adfærd gennem andre webkomponenter eller endda skrive JS selv.

Hadron giver den nødvendige hjælp til at gøre alt så enkelt som muligt:

Du kan bruge Flexbox gennem justeringsværktøjet til at placere elementer, ligesom du altid har gjort:

CSS Flex boks justeringsværktøj

Eller brug CSS Grid gennem værktøjet til nemt at oprette gitter:

CSS Grid værktøj

Men Hadron vil hjælpe dig, mens du går hånd i hånd med Webplatformen. Magi sker ikke bagved. Og dette er fantastisk, fordi:

  • Hvad du kan gøre i Hadron bliver ved med at blive bedre, da internettet også bliver bedre. Ethvert andet designværktøj derude giver dig mulighed for at ændre elementernes udseende gennem deres visuelle kontroller. I virkeligheden bliver disse værktøjer altid meget komplekse, mens de begrænser, hvad du kan opnå.
  • Det hjælper dig med at lære, hvordan Internettet progressivt fungerer.
  • Det er lettere at forstå og lære, fordi det ikke er specifikt for Hadron.

Hvad betyder det? For eksempel …

Når du bruger vores CSS-værktøjer som Flexbox, Grid, Colour picker, Shadows ... ændringer vil afspejles på din CSS, og du kan vælge, hvilken regel der vil blive påvirket. Disse værktøjer er der for at hjælpe og ikke skjule.

Gitterværktøjet genererer CSS til dig, men du kan altid skrive det selv.

Samme for at oprette lydhør design. Du bruger standard Media Queries, men med hjælp kan det ikke være lettere.

Enkelheden ved at tilføje medier plus live preview gør reagerende reaktivt enkel!

️HTML er også tilgængelig via panelene Elements og Selection. Du kan bruge sidstnævnte til at opdatere markeringen af ​​HTML

Valg og opdatering af HTML for et element.Du kan også indsætte elementer via menu i stedet for at skrive HTML

Og det bedste er, at mens du designer, skaber du også en fantastisk moderne fuld app. I Hadron har vi konceptet "motorer", og vi starter med "Polymer 2 Engine", hvilket betyder, at dit design er en moderne progressiv webapp lige fra starten.

Du kan også se alle dine projektfiler. Det er ligesom en almindelig app. Vi tilføjer ingen ekstra afhængigheder.Under arbejdet med lærredskoden opdateres automatisk. Men du kan selvfølgelig også redigere det selv.

Oven på alt dette kan du arbejde offline og synkronisere dit projekt, når du har udført noget, og derefter offentliggøre det til et hadronapp-domæne såsom my-project.hadronapp.com gratis.

Der er så meget mere, vi har at fortælle dig om Hadron, men denne introduktion er allerede ved at blive for lang.

Hvad er det næste

I dag er vi superglade for at lancere Hadron Preview Release: en måde at få tidlig adgang til Hadron, hjælpe os med at polere den og forme vores produktkøreplan.

Hadron er gratis at bruge til alle i en ubegrænset periode uden grænser, fordi vi tror på demokratisering af teknologi og design.

Ser frem til at høre din feedback!

Anmod om tidlig adgang
Twitter: https://twitter.com/hadronapp