Σχεδίαση δομών UI δολοφόνων Web με Freebies - Ultimate Guide

Το πεδίο του web design έχει πάρει μια δική του αναπνοή σε λίγα μόνο χρόνια. Υπάρχουν περισσότεροι ενεργοί σχεδιαστές παγκοσμίως τώρα από ποτέ, όλοι συνεργαζόμενοι σε καινοτόμες ιδέες έργων. Και οι έννοιες πίσω από πολλές από αυτές τις τάσεις έχουν αναπτυχθεί μέσα από επαγγελματίες σχεδιαστές γραφικών.

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

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

Πρακτική με πλήρη πρότυπα

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

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

Εδώ είναι ένα παράδειγμα PSD που ονομάζεται "AppCivilization", σχεδιασμένο από τον Martin Fabricius. Η διάταξη παρουσιάζεται για ένα δημιουργικό στούντιο που σχεδιάζει εφαρμογές για κινητά και ενδεχομένως ιστοσελίδες. Στο κάτω μέρος θα βρείτε μια μικρή ομάδα εικονιδίων εφαρμογών που παρουσιάζονται σε ένα χαρτοφυλάκιο. Θα παρατηρήσετε επίσης ότι ολόκληρο το σχέδιο χωρίζεται οριζόντια σε μια κεφαλίδα, στην κορυφή της προβολής διαφανειών, στο κύριο περιεχόμενο και στο σκούρο υποσέλιδο.

Αρχική πηγή - Λήψη

Σχεδιασμός σελίδων προορισμού

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

Αρχική πηγή - Λήψη

Αλλά το καλύτερο μέρος του σχεδιασμού του είναι ότι είναι πολύ ευέλικτο για τους αρχάριους να εργάζονται γύρω. Η κεφαλίδα εξακολουθεί να χρησιμοποιεί μια μικρή επάνω πλοήγηση με μια μεγάλη εικόνα, αλλά κυρίως οι αναμενόμενες ενέργειες χρήστη είναι διαφορετικές. Έχει ένα μεγάλο “Αγόρασέ το!” που ξεχωρίζει ακριβώς πάνω από την πτυχή. Σε μια σελίδα προορισμού προϊόντος αυτό θα τραβούσε περισσότερη προσοχή από μια jQuery slideshow.

Μια άλλη μεγάλη τεχνική UI είναι η μικρή εμφάνιση iPhone στο μεσαίο πλάνο της σελίδας. Ο Martin περιλαμβάνει ένα στιγμιότυπο προεπισκόπησης iPhone, το κουμπί App Store και μια μικρή λίστα βασικών χαρακτηριστικών. Όταν οι επισκέπτες αναζητούν λεπτομέρειες του προϊόντος, δεν μπορείτε να κάνετε τα πράγματα απλούστερα απ 'ό, τι μέσω μιας μορφοποιημένης λίστας.

Περισσότερα πρότυπα:

Εδώ είναι μερικά ελεύθερα πρότυπα PSD που κυκλοφόρησαν στο πέρασμα:

• "Βιογραφικό σημείωμα" Βιογραφικό Σημείωμα PSD
• "ThinkJuice" προϊόν site PSD πρότυπο
• Επαγγελματικό ιστότοπο PSD για επαγγελματικούς ιστότοπους
• "Polo360" ιστότοπο PSD για το χαρτοφυλάκιο του ιστότοπου

Μπορεί επίσης να σας ενδιαφέρουν τα εξής:

• Πρότυπα ιστοτόπου επιχειρήσεων
• "Ερχόμενοι σύντομα" σεμινάρια σελίδας + πρότυπα

Κύρια πλοήγηση στην τοποθεσία

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

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

Αρχική πηγή - Λήψη

Ένα άλλο παρόμοιο freebie είναι αυτή η σχεδιασμένη από την πλοήγηση με κεφαλίδες με υφή Edi Gil. Μου αρέσει πολύ το πώς αυτή η δεύτερη γραμμή πλοήγησης περιλαμβάνει και μια λίστα συνδέσμων και μερικά επιπλέον κουμπιά σελίδας. Θα θελήσετε να προσφέρετε δευτερεύοντες συνδέσμους στους επισκέπτες όπου μπορούν να βρουν τα προφίλ σας στον ιστό.

Αρχική πηγή - Λήψη

Εναλλακτικές μορφές μενού

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

Πάρτε για παράδειγμα το δωρεάν μενού που σχεδιάστηκε από την ιστοσελίδα Icojam.

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

Αρχική πηγή - Λήψη

Συμβουλές πλοήγησης / Tutorials:

• Γραμματοσειρά πλοήγησης που βασίζονται σε καρτέλα CSS 50+
• Καλές πρακτικές και παραδείγματα πλοήγησης Breadcrumb
• Building Mobile Navigation με το jQuery
• Κωδικοποίηση Πλοήγησης Breadcrumb Στο CSS3
• Σχεδίαση πλοήγησης με λιγότερα CSS

Καθαρότερες φόρμες ιστού

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

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

Πεδία σύνδεσης

Υπάρχουν μερικά μεγάλα παραδείγματα PSD σύνδεσης για να το ελέγξετε. Αυτή η σύνδεση freebie μέσω WP Scientist έχει όλα τα τυποποιημένα στοιχεία. Δύο πεδία εισαγωγής για σύνδεση / κωδικό πρόσβασης, ένα κουμπί υποβολής και κουτιά επιλογής για τη διαχείριση των μπισκότων περιόδου λειτουργίας.

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

Αρχική πηγή - Λήψη

Η παρακάτω φόρμα είναι ελεύθερη για λήψη χάρη στον σχεδιαστή Gil Huybrecht. Χρησιμοποίησε ένα παρόμοιο μοτίβο με ένα κοκκώδες υπόβαθρο και υφή χαρτιού. Αυτό που μου αρέσει ιδιαίτερα για το σχεδιασμό του Gil είναι τα "υπερμεγέθη" στοιχεία. Είναι πολύ πιο φιλική προσγείωση σε μια φόρμα σύνδεσης που συμπληρώνει ολόκληρη τη σελίδα. Οι χρήστες μπορούν εύκολα να δουν τι δακτυλογραφούν και υπάρχει λιγότερη ακαταστασία.

Αρχική πηγή - Λήψη

Αν είστε έμπειρος ως προγραμματιστής frontend χρησιμοποιώντας το CSS3 τότε είναι εξαιρετικά εύκολο να μεταφράσετε αυτό το γραφικό σε κώδικα. Μπορείτε ακόμη να εφαρμόσετε το επιλεγμένο αποτέλεσμα εξωτερικής λάμψης και τις στρογγυλεμένες γωνίες για τα κουμπιά και τα πεδία εισαγωγής.

Επαφές

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

Το freebie παρακάτω είναι ένα φοβερό παράδειγμα χρήσης προσαρμοσμένων υφών και εικονιδίων.

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

Αρχική πηγή - Λήψη

Ένα άλλο υπέροχο freebie να αρπάξει είναι αυτή η καρτέλα μορφή επαφής που σχεδιάστηκε από τους ταλαντούχους Jonno Riekwel. Αυτός ο σχεδιασμός είναι πολύ απλούστερος και διαθέτει ετικέτες χαρακτηριστικών πάνω από κάθε είσοδο. Πρόκειται για μια εξαιρετική λύση για μεγαλύτερες επιχειρήσεις ή νεοσύστατες επιχειρήσεις που πρέπει να στείλουν μηνύματα μέσω διαφόρων τμημάτων της εταιρείας.

Αρχική πηγή - Λήψη

Μαθήματα Επικοινωνίας:

• Φόρμα Σύνδεσης / Εγγραφής: Ιδέες και ωραία παραδείγματα
• Δημιουργία φόρμας εισόδου σε χαρτί στοιβάζονται
• Δημιουργήστε μια φόρμα επικοινωνίας HTML5 / CSS3 βασισμένη σε Ajax

Κορδέλες και πανό

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

Αρχική πηγή - Λήψη

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

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

Αρχική πηγή - Λήψη

Επιπλέον, τα full-on banner σχέδια έχουν γίνει εξαιρετικά δημοφιλή για την οικοδόμηση της αναγνώρισης μάρκας. Μπορείτε να τα χρησιμοποιήσετε στο λογότυπό σας, στην πλοήγηση, στην αρχική σελίδα ή ακόμα και στις εμφανισμένες αναρτήσεις ιστολογίου. Οι συνέπειες είναι πρακτικά απεριόριστες με καλές δυνατότητες σχεδιασμού.

Περιτύλιγμα της Γωνιάς

Ένα άλλο πολύ συγκεκριμένο αποτέλεσμα banner κορδέλα γίνεται με την περιτύλιξη του σχεδίου γύρω από τη γωνία της σελίδας σας. Αυτό δημιουργεί την ψευδαίσθηση ότι η σελίδα σας είναι 3-D και η κορδέλα είναι τυλιγμένη γύρω από το πάνω μέρος της ιστοσελίδας σας.

Ο σχεδιασμός που ακολουθεί είναι 100% δωρεάν για λήψη και μπορεί να χρησιμοποιηθεί για τις δικές σας ιδέες έργων. Μπορείτε να δείτε πώς αυτό θα τραβούσε την προσοχή από τους επισκέπτες και γιατί αυτή η τάση έχει εξελιχθεί σε μια τέτοια φρενίτιδα. Προσέξτε να μην χρησιμοποιείτε υπερβολικά τα πανό. Χύμα, αυτά μπορούν να γίνουν πολύ ενοχλητικά, όπως τα παλαιότερα "web 2.0" γυαλιστικά / καθρέφτη αποτελέσματα.

Αρχική πηγή - Λήψη

Σχεδίαση με κουμπιά

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

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

Αρχική πηγή - Λήψη

Πώς να δημιουργήσετε παραλλαγές

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

Αρχική πηγή - Λήψη

Κάθε ένα από τα αρχικά τρία κουμπιά έχει διαφορετικό στυλ κλίσης, εκτός από τις καταστάσεις αιωρήματος και ενεργών καταστάσεων που μοιάζουν παρόμοια. Όταν εργάζεστε στο Photoshop θα πρέπει να ταιριάξετε τα χρώματα μεταξύ των κλίσεων ή να μετακινήσετε τα χρώματα σε ένα στρώμα εφέ. Με αυτή την κατανόηση θα μπορούσατε να δημιουργήσετε ακόμη και τα δικά σας κουμπιά freebie που μπορείτε να κατεβάσετε!

Αρχική πηγή - Λήψη

Ξύλο + χαρτί υφές

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

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

Αρχική πηγή - Λήψη

Οι εικόνες θα ξεχωρίζουν και θα φαίνονται υπέροχα τυλιγμένες σε ένα εξωτερικό κέλυφος. Η όλη έννοια της υφής είναι να δώσει στον ιστότοπό σας ένα συγκεκριμένο συναίσθημα ή συναίσθημα. Τα θέματα ξύλου μπορούν να προκαλέσουν μια αίσθηση του σπιτιού και της φύσης. Υπάρχει ακόμη και ένα φοβερό ξύλινο πακέτο UI για λήψη από τον Jeremiah Wingett. Εάν αισθάνεστε δημιουργικοί, δοκιμάστε να δημιουργήσετε μερικές από τις δικές σας υφές και να δείτε πώς εκτελούνται σε ένα web-based περιβάλλον.

28 υφές υψηλής ανάλυσης ξύλου

συμπέρασμα

Οι καλύτεροι σχεδιαστές ιστοσελίδων είναι αυτοί που ασκούν καθημερινά και δεν αφήνουν ποτέ τις αποτυχίες τους να αποτρέψουν τους τελικούς τους στόχους. Πρέπει να ανταποκρίνεστε και να επιστρέψετε γρήγορα από την επιτυχία και τις αποτυχημένες προσπάθειες. Οι συμβουλές και τα freebies σε αυτόν τον οδηγό πρέπει να είναι ένα καλό σημείο εκκίνησης για να ξεκινήσετε να μαθαίνετε πώς να χτίζετε διαφορετικές έννοιες σελίδων για ένα web project. Και θα θέλαμε να διαβάσουμε τις σκέψεις σας για το θέμα στην περιοχή συζήτησης μετά.