8 Εργαλεία σχεδίασης ιστοσελίδων προς χρήση το 2018

Στη σύγχρονη κοινότητα ιστού, υπάρχουν πολλά εργαλεία για το σχεδιασμό ιστοσελίδων. Υπάρχουν τα κλασικά - επεξεργαστές γραφικών όπως Photoshop και Sketch - και προγράμματα που συνδυάζουν τόσο το σχεδιασμό όσο και τη διάταξη.

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

Η Outline2Design Team επέλεξε μια λίστα με τους πιο ενδιαφέρουσες και χρήσιμες πηγές που έχουμε εμπλακεί.

Ταχεία UI

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

Πλεονεκτήματα: αυτοματοποιημένη ανάπτυξη διεπαφών.

Κάθε στοιχείο σχεδιασμού μπορεί να εκτελέσει μια ενέργεια. Για παράδειγμα, μπορείτε εύκολα να μετατρέψετε τους χάρτες σε διαδραστικούς χάρτες, τετράγωνα σε κουμπιά και εικόνες φόντου σε παράλλαξη.

Μειονεκτήματα: ξεπερασμένη σχεδίαση διεπαφής. Ωστόσο, αυτό δεν είναι το πιο σημαντικό πράγμα.

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

Webflow

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

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

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

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

Μειονεκτήματα: Χρειάζεστε ελάχιστη γνώση HTML / CSS για να εργαστείτε με αυτό το εργαλείο. Από την άλλη πλευρά, δεν είναι τόσο κακό.

Ατομική και Πρωτο

Πιστεύουμε ότι αυτά τα εργαλεία είναι πανομοιότυπα όσον αφορά τη λειτουργικότητα. Η κύρια κατεύθυνση είναι η δημιουργία πρωτοτύπων για πολλές συσκευές.

Πλεονεκτήματα: δεν χρειάζεται να μάθετε προγραμματισμό για να προσθέσετε πρόσθετες λειτουργίες. Οι πλατφόρμες που βασίζονται στο Web επιτρέπουν σε κάθε χρήστη να προσθέσει αυτά τα στοιχεία ταυτόχρονα.

Το ατομικό είναι ελεύθερο. Έχει απεριόριστο αριθμό πρωτοτύπων και όλα είναι δωρεάν.

Το μεγάλο πλεονέκτημα του Proto.io είναι η ενοποίησή του με τρεις πλατφόρμες δοκιμών χρηστών: Lookback, UserTesting και Validally, γεγονός που το καθιστά πολύ πιο βολικό για τους σκοπούς δοκιμών χρηστών.

Μειονεκτήματα: Το Proto.io έχει τα δικά του plug-in για το Σκίτσο και το Photoshop, αλλά δυστυχώς, όλα τα επίπεδα εξάγονται σε στατικά γραφικά, επομένως δεν επεξεργάζονται στο Proto.io. Ένα άλλο μειονέκτημα είναι ότι για το Proto.io πρέπει να πληρώσετε 24 δολάρια μηνιαίως για ένα άτομο και μέχρι πέντε έργα.

Σχ

Το Figma είναι το cross-platform εργαλείο για τους σχεδιαστές και επιτρέπει σε πολλούς ανθρώπους να εργάζονται στο ίδιο έργο σε πραγματικό χρόνο. Το Figma προτιμάται ιδιαίτερα από τους προγραμματιστές ιστού. Είναι χαρά να δημιουργήσετε μια γραφική διεπαφή χρήστη για μια εφαρμογή για κινητά.

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

Ο Viacheslav, ένας ανώτερος σχεδιαστής UX / UI πιστεύει ότι:

"Ένα από τα σημαντικότερα πλεονεκτήματα του Figma είναι ο τρόπος συνεργασίας όταν πολλοί σχεδιαστές μπορούν να δουλέψουν σε μία διάταξη τη φορά. Πιστεύω ότι αυτό το εργαλείο θα είναι χρήσιμο για τους αρχάριους αρχάριους. Θέλω επίσης να σημειώσω ότι το Figma είναι ένα ηλεκτρονικό εργαλείο και μπορώ να το χρησιμοποιήσω από πολλές πλατφόρμες. Το μόνο που χρειάζομαι για αυτό είναι το Διαδίκτυο. "

Πλεονεκτήματα:

  • Οι ενημερώσεις για αυτό το εργαλείο εμφανίζονται αρκετά συχνά. Το τελευταίο κυκλοφόρησε στις 25 Ιανουαρίου 2018. Η ομάδα ανάπτυξης έκανε πολλές αλλαγές, μία από τις οποίες είναι η δυνατότητα μεταφοράς αρχείων Sketch σε ένα ανοιχτό έγγραφο.
  • Δεν απαιτεί γνώση κωδικοποίησης, σε αντίθεση με το Webflow.
  • Ο σχεδιασμός μετατρέπεται αυτόματα σε κώδικα CSS.

Πρωτότυπο σε χαρτί

"Οι περισσότεροι σχεδιαστές του UX ξεκινούν τη διαδικασία σχεδιασμού με σκίτσα σε χαρτί, μόνο τώρα μπορείτε να δοκιμάσετε κάποιες υποθέσεις βασικά όταν δημιουργείτε ένα διαδραστικό πρωτότυπο. Το POP επιτρέπει στους σχεδιαστές στο στάδιο των σκίτσων να δημιουργήσουν πρωτότυπα εργασίας και τα μοιράζεται με την ομάδα για τη δοκιμή και τον εντοπισμό λανθασμένων λύσεων στα αρχικά στάδια. Πιστεύω ότι αυτή η εφαρμογή διευκολύνει και επιταχύνει τη διαδικασία σχεδιασμού κινητών διεπαφών και εξάγει την τυποποιημένη διαδικασία σε ένα νέο σύγχρονο επίπεδο. "
Roman, ανώτερος σχεδιαστής UX / UI στο Outline2Design

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

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

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

Μειονεκτήματα: δεν βρήκαμε καμία παγκόσμια ατέλεια. Ένα πράγμα που θα θέλαμε να σημειώσουμε είναι η δυσάρεστη λειτουργία σχεδίασης μέσα στην εφαρμογή. Αλλά αυτό δεν ισχύει για την κύρια λειτουργία POP. Πιθανότατα, αυτό είναι ένα πρόσθετο χαρακτηριστικό.

Εργαλεία διαδικτύου για VR

Ενα πλαίσιο

Η εικονική πραγματικότητα εξελίσσεται με την ταχύτητα του φωτός. Και δεν μπορούσαμε να περάσουμε από τα εργαλεία που βοηθούν στη δημιουργία του. Έχουμε αναθεωρήσει ορισμένα εργαλεία ανοιχτού κώδικα.

Το A-Frame είναι ένα web framework από το Mozilla που δημιουργήθηκε για την εύκολη και ισχυρή δημιουργία περιεχομένου VR. Είναι ένα ανεξάρτητο έργο ανοιχτού κώδικα, το οποίο έχει μια μεγάλη κοινότητα VR. Υπάρχει ακόμη και ένα διαδραστικό μάθημα για το Web VR από το A-Frame. Υπάρχει ένα ισχυρό πλαίσιο βασισμένο σε HTML, το οποίο είναι ενσωματωμένο στον πυρήνα του εργαλείου.

Πλεονεκτήματα:

  • Πραγματικά ισχυρό εργαλείο που υποστηρίζει τα περισσότερα ακουστικά VR όπως Vive, Rift, Daydream, κλπ.
  • Cross-Platform VR: Δημιουργήστε εφαρμογές VR για Vive, Rift, Daydream, GearVR και χαρτόνι με υποστήριξη για όλους τους αντίστοιχους ελεγκτές.
  • Συμβατό με τις περισσότερες βιβλιοθήκες, πλαίσια και εργαλεία, όπως τα React, Preact, Vue.js, d3.js, Ember.js και jQuery.

Μειονεκτήματα: Χρειάζεστε γνώση HTML για να εργαστείτε με αυτό το εργαλείο.

Ολόγραμμα

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

Σκηνή

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

Κωδικοποίηση

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

Περιουσιακά στοιχεία

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

Πλεονεκτήματα: εύκολο στη χρήση, ένα ευχάριστο εργαλείο για τη δημιουργία VR. Δεν χρειάζεται μεγάλη γνώση για να ξεκινήσει.

Μειονεκτήματα: Η προεπισκόπηση της κινούμενης εικόνας διαρκεί πολύ.

Όπως μπορείτε να δείτε, αυτά τα εργαλεία είναι περισσότερο από αρκετά. Κάθε μέλος της ομάδας μας επιλέγει το ένα ή το άλλο. Η συμβουλή μας - επιλέξτε αυτήν που είναι κατάλληλη για εσάς, ανάλογα με τις εργασίες.