Είναι καιρός να σχεδιάσουμε στον πραγματικό κόσμο. Παρουσιάζοντας το Hadron!

Το Hadron είναι ένα εργαλείο που στοχεύει να κάνει το σχεδιασμό μέσω κώδικα οπτικό, γρήγορο και εύκολο, περικλείοντας την πλατφόρμα web.

Εμείς ως σχεδιαστές είμαστε οι αρχιτέκτονες των ψηφιακών εμπειριών που βρίσκουμε παντού σήμερα. Είμαστε δημιουργοί από τη φύση, αλλά το κομμάτι της δημιουργίας έχει πάντα αφεθεί στους μηχανικούς, είναι αυτοί που θα μπορούσαν να φέρουν στη ζωή μας τις έννοιες μας.

Στο παρελθόν, τα εργαλεία σχεδιασμού προέκυψαν στην ιδέα να δοθεί η δυνατότητα στους σχεδιαστές να κινηθούν γρήγορα. Απλώς σχεδιάζοντας pixels, θα μπορούσαμε να επικεντρωθούμε στο σχεδιασμό με ευκολία. Και αυτός ο διαχωρισμός των ανησυχιών ήταν καλός. Αλλάζει τη διαδικασία του σχεδιασμού και με αυτό, ο σχεδιασμός ξεπήδησε. Μάθαμε πώς να επικοινωνούμε μέσω διασυνδέσεων και έγινε βασικός ρόλος σχεδόν σε κάθε εταιρεία.

Αλλά ο χρόνος συνεχίζεται και σήμερα οι διεπαφές δεν είναι αρκετά καλοί. Είναι πολύ μακριά από την εφαρμογή και την πραγματικότητα, και δεν λέει όλη την ιστορία. Τα εργαλεία πρωτοτύπων μας βοήθησαν να πλησιάσουμε σε κάτι που είναι κάπως διαδραστικό, αλλά τα βασικά προβλήματα παραμένουν ανέγγιχτα: είμαστε ακόμα τόσο απομακρυσμένοι όσο μπορούμε να είμαστε από το μέσο που σχεδιάζουμε, και οι προγραμματιστές και οι σχεδιαστές είναι πολύ αποσυνδεδεμένοι.

Όπως όλα τα άλλα αλλάζουν, εξακολουθούμε να χρησιμοποιούμε τις ίδιες μεθόδους σχεδιασμού που ξεκινήσαμε να χρησιμοποιούμε πριν από περισσότερα από 20 χρόνια. Ένα απαραίτητο κακό, γιατί η κωδικοποίηση είναι σκληρή, σωστά; Λοιπόν, πιστεύουμε ότι ήρθε η ώρα για μια αλλαγή!

Ένας καλύτερος κόσμος για τους σχεδιαστές ... και τους προγραμματιστές.

Η ιδέα του σχεδιασμού χρησιμοποιώντας κώδικα δεν είναι καινούργιο. Στην πραγματικότητα, ήταν γύρω για δεκαετίες! γιατί με κάποιο τρόπο, γνωρίζαμε πάντα ότι η σχεδίαση στο περιβάλλον του χρήστη θα λύσει τόσα πολλά προβλήματα, σκεφτείτε:

  • Τα σχέδια θα σταματούσαν να είναι ένα διαθέσιμο περιουσιακό στοιχείο, αλλά το ίδιο το πραγματικό προϊόν. Όχι μόνο αυτό που μοιάζει, αλλά πώς λειτουργεί και εγώ.
  • Οι σχεδιαστές και οι προγραμματιστές θα επικοινωνούν, θα μοιράζονται και θα συνεργάζονται μέσω του ίδιου καναλιού.
  • Επειδή το σχεδιασμό θα γινόταν στο περιβάλλον του τελικού χρήστη, αντί να σχεδιάζει "αυτό που θα ήθελα να ήταν", θα δημιουργούσα το πράγμα πραγματικό, έτσι θα φανεί όπως το οραματίζομαι. Θα σκοτώναμε το βήμα στο οποίο ένας προγραμματιστής πρέπει (να χάσει) να ερμηνεύσει μια δέσμη εικόνων, και αυτό σημαίνει λιγότερες ερωτήσεις και συναντήσεις!
  • Μοιράζοντας την ίδια βάση κώδικα, η επανάληψη του σχεδιασμού θα ήταν πολύ καλύτερη.
  • Η ευαισθησία είναι εγγενής στο διαδίκτυο, και έτσι είναι στοιχεία, κινούμενα σχέδια και αλληλεπιδράσεις. Μια απροκάλυπτη, τυποποιημένη λύση που θα αποσταλεί από το κουτί.

Θα μπορούσαμε να μοιραστούμε τα εξαρτήματα που γίνονται από σχεδιαστές που συμπεριφέρονται και φαίνονται όπως προορίζονται, σε οποιαδήποτε συσκευή και κατάσταση. Οι σχεδιαστές και οι προγραμματιστές θα βοηθήσουν και θα αλληλοσυμπληρώνονται και η ανάπτυξη θα γίνει περισσότερο για τη συναρμολόγηση και λιγότερο για τη χειροτεχνία. (Αυτή η ιδέα συζητήθηκε λεπτομερώς σε αυτή τη μεγάλη συζήτηση της Monica Dinculescu)

Αλλά φυσικά, η διαδικασία σχεδιασμού πρέπει να είναι οπτική, απλή και γρήγορη. Και η κωδικοποίηση ήταν πάντα αργή, ελάχιστα οπτική και όχι τόσο απλή.

Αλλά γιατί τώρα;

Πώς κάνετε το σχεδιασμό απλό, γρήγορο και οπτικό ενώ χρησιμοποιείτε κώδικα; Λοιπόν, αποδεικνύεται ότι ο ιστός είναι σήμερα μια τέτοια φοβερή πλατφόρμα χάρη σε τόσους πολλούς καταπληκτικούς ανθρώπους που εργάζονται για να το βελτιώσουν και να βελτιώσουν.

  • Τα Web Components καθιστούν εύκολη τη δημιουργία νέων στοιχείων με ενσωματωμένα στυλ και συμπεριφορά, τα οποία μπορούν να επαναχρησιμοποιηθούν και να μοιραστούν. Είναι τα δομικά στοιχεία των σύγχρονων εφαρμογών ιστού.
  • Το CSS Grid και το Flexbox είναι το τέλος του σύνθετου προβλήματος του παρελθόντος.
  • Οι επιγραμμικές κινούμενες εικόνες κάνουν τις κινούμενες εικόνες εύκολο να περιγραφούν από το Javascript και επειδή οποιαδήποτε συμπεριφορά μπορεί να τυλιχτεί σε ένα στοιχείο Web, μπορούμε να δημιουργήσουμε κινούμενα σχέδια χρησιμοποιώντας HTML και CSS μόνο!
  • Service Worker, Cache Storage, IndexedDB και μερικά άλλα API Web μας επιτρέπουν να διατηρούμε όλα τα αρχεία του έργου σας τοπικά και offline.

Και αυτά είναι μόνο λίγα από τα πράγματα που ήταν απαραίτητα για να γίνει δυνατή.

Γνωρίστε τον Hadron!

Το Hadron είναι ένα εργαλείο που στοχεύει να κάνει το σχεδιασμό μέσω κώδικα οπτικό, γρήγορο και εύκολο, περικλείοντας την πλατφόρμα web.

Αδρον

Παρόλο που θα χρησιμοποιήσετε κώδικα, το μεγάλο πράγμα είναι ότι όχι μόνο πολύ λίγα γράμματα είναι απαραίτητα για να ξεκινήσετε, αλλά και τα σχέδιά σας μπορούν να ενισχυθούν προοδευτικά. Αυτό σημαίνει ότι μπορείτε να αρχίσετε να σχεδιάζετε με απλά HTML και CSS και αργότερα να κάνετε το σχεδιασμό σας περισσότερο, προσθέτοντας συμπεριφορά μέσω άλλων Web Components ή ακόμα και γράφοντας τον εαυτό σας.

Ο Hadron παρέχει τη βοήθεια που χρειάζεται για να κάνουν τα πάντα όσο το δυνατόν πιο απλά:

✔ Μπορείτε να χρησιμοποιήσετε το Flexbox μέσω του εργαλείου ευθυγράμμισης για να τοποθετήσετε στοιχεία ακριβώς όπως πάντα κάνατε:

Εργαλείο ευθυγράμμισης κουτιού CSS Flex

✔ Ή χρησιμοποιήστε το CSS Grid μέσω του εργαλείου, για να δημιουργήσετε εύκολα πλέγματα:

Εργαλείο πλέγματος CSS

Όμως, ο Hadron θέλει να σας βοηθήσει, ενώ συμβαδίζει με την πλατφόρμα Web. Η μαγεία δεν συμβαίνει πίσω. Και αυτό είναι υπέροχο γιατί:

  • Αυτό που μπορείτε να κάνετε στον Hadron συνεχίζει να βελτιώνεται καθώς ο ιστός βελτιώνεται επίσης. Οποιοδήποτε άλλο εργαλείο σχεδίασης σας επιτρέπει να τροποποιήσετε την εμφάνιση των στοιχείων μέσω των οπτικών τους ελέγχων. Στην πραγματικότητα, τα εργαλεία αυτά πάντοτε είναι πολύ περίπλοκα, περιορίζοντας όσα μπορείτε να επιτύχετε.
  • Σας βοηθά να μάθετε πώς λειτουργεί το Διαδίκτυο, προοδευτικά.
  • Είναι πιο εύκολο να καταλάβετε και να μάθετε γιατί δεν είναι συγκεκριμένο για τον Hadron.

Τι σημαίνει αυτό? Για παράδειγμα …

✔ Όταν χρησιμοποιείτε τα εργαλεία CSS όπως τα εργαλεία Flexbox, Grid, Color, Shadows ... οι αλλαγές θα αντικατοπτρίζονται στο CSS σας και μπορείτε να επιλέξετε ποιο κανόνα πρόκειται να επηρεαστεί. Αυτά τα εργαλεία είναι εκεί για να βοηθήσουν, όχι να κρύψουν.

Το εργαλείο πλέγματος θα δημιουργήσει το CSS για εσάς, αλλά πάντα μπορείτε να το γράψετε μόνοι σας.

✔ Το ίδιο για τη δημιουργία σχεδίων που ανταποκρίνονται στις ανάγκες σας. Θα χρησιμοποιήσετε τα τυπικά ερωτήματα μέσων, αλλά με τη βοήθεια, δεν θα μπορούσε να είναι ευκολότερη.

Η απλότητα της προσθήκης μέσων μαζικής ενημέρωσης συν τη ζωντανή προεπισκόπηση καθιστά εύκολη στην αποστολή!

Το ️HTML είναι επίσης προσβάσιμο από τους πίνακες Στοιχεία και Επιλογή. Μπορείτε να χρησιμοποιήσετε το τελευταίο για να ενημερώσετε το HTML επιλογής

Επιλογή και ενημέρωση της HTML ενός στοιχείου.Μπορείτε επίσης να εισάγετε στοιχεία μέσω του μενού αντί να γράψετε το HTML

Και το καλύτερο μέρος είναι ότι ενώ σχεδιάζετε, δημιουργείτε επίσης μια μεγάλη σύγχρονη πλήρη εφαρμογή. Στο Hadron έχουμε την έννοια των "κινητήρων" και ξεκινάμε από την "Polymer 2 Engine", που σημαίνει ότι ο σχεδιασμός σας είναι μια σύγχρονη Προοδευτική Web App από την αρχή.

Μπορείτε επίσης να δείτε όλα τα αρχεία του έργου σας. Είναι ακριβώς όπως μια κανονική εφαρμογή. Δεν προσθέτουμε επιπλέον εξαρτήσεις.Ενώ εργάζεστε στον κώδικα του καμβά ενημερώνεται αυτόματα. Αλλά μπορείτε επίσης να το επεξεργαστείτε φυσικά.

Πάνω από όλα αυτά, μπορείτε να εργαστείτε εκτός σύνδεσης και να συγχρονίσετε το έργο σας όποτε έχετε ολοκληρώσει κάτι και, στη συνέχεια, να το δημοσιεύσετε σε έναν τομέα hadronapp όπως το my-project.hadronapp.com δωρεάν.

Υπάρχουν πολλά περισσότερα που πρέπει να σας πούμε για τον Hadron, αλλά αυτή η εισαγωγή είναι ήδη πολύ μεγάλη.

Τι έπεται

Σήμερα είμαστε πολύ ενθουσιασμένοι που ξεκινάμε το Hadron Preview Release: έναν τρόπο να αποκτήσουμε έγκαιρη πρόσβαση στον Hadron, να μας βοηθήσετε να το γυαλίσετε και να διαμορφώσουμε τον χάρτη πορείας του προϊόντος μας.

Ο Hadron είναι ελεύθερος να χρησιμοποιεί για όλους, για απεριόριστο χρονικό διάστημα χωρίς περιορισμούς, επειδή πιστεύουμε στον εκδημοκρατισμό της τεχνολογίας και του σχεδιασμού ειδικότερα.

Ανυπομονούμε να ακούσουμε τα σχόλιά σας!

Ζητήστε την έγκαιρη πρόσβαση
Twitter: https://twitter.com/hadronapp