DreamWeaver.Gr

Δεν βιοπορίζουμε απλά από το διαδίκτυο. Πιστεύουμε σε αυτό

Προδιαγραφές eshop December 6, 2018

Προδιαγραφές eshop Κατασκευή ηλεκτρονικού καταστήματος. Μέρος 14ο ” Το παρόν άρθρο αποτελεί μέ...

περισσότερα...
Internet Marketing & e-shop December 3, 2018

Internet Marketing και eshop Κατασκευή ηλεκτρονικού καταστήματος. Μέρος 13ο ” Το παρόν άρθρο α...

περισσότερα...

Blog

July 22, 2018

Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018. Μέρος 2o . Σύγχρονοι Retro Σχεδιασμοί

Σύγχρονοι Retro Σχεδιασμοί

  • ”Throwback” Δεκαετίες
  • Old-School Τυπογραφία
  • Λιγότερο ή Περισσότερο Φωτεινές Χρωματικές Επιλογές
  • Υφή και Βαθμίδες
  • Στυλ Video-Game
  • “Αποκρουστικά” Γραφικά
  • Συνδυασμός όλων μαζί

Το παλιό είναι και πάλι νέο. 

Δεν είναι σίγουρα η πρώτη φορά που κάτι τέτοιο συμβαίνει. Μια διαρκή αέναη επανάληψη είναι το παιχνίδι της μόδας στις επιταγές και τα κελεύσματα του υπακούει και το web design είτε αφορά κατασκευή ιστοσελίδων είτε αφορά την κατασκευή eshop.

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

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

Ο σύγχρονος ρετρό σχεδιασμός είναι τόσο δημοφιλής που η The New York Times έκανε μάλιστα μια αναφορά:

Ενώ οι millenials και τα μέλη της Γενιάς Z – εκείνων που γεννήθηκαν κατά τα έτη από τα μέσα της δεκαετίας του 1990 έως τις αρχές της δεκαετίας του 2000 – μπορεί να μην θυμούνται πως έμοιαζε το διαδίκτυο στην εποχή των AltaVista και GeoCities, τα ρετρό σχέδια αξιοποιούν την τρέχουσα πολιτιστική αναγέννηση σε ότι έχει να κάνει με τα 90′s. (Δείτε την επιστροφή των “Twin Peaks“, “Will & Grace” και Tshirt συναυλιών.)

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

 Οι νοσταλγικές ιστοσελίδες που μιμούνται τον καιρό των dialup modem εξαπλώνονται σε καλλιτεχνικές και techgeek γωνίες του διαδικτύου.

Άρα, πώς μοιάζει η σύγχρονη τάση retro σχεδιασμού; Ας ρίξουμε μια ματιά.

”Throwback” Δεκαετίες

 

 

Sweet Magnolia Gelato

 

Solange Music

 

 

Shiner

Το ρετρό μπορεί να αναφέρεται σε πολλά πράγματα. Τα μοντέρνα ρετρό σχέδια που είναι δημοφιλέστερα τώρα περιλαμβάνουν στυλ που θυμίζουν περισσότερο τις δεκαετίες του ’80 και του ’90. (Κάτι που ίσως για κάποιους από εμάς δε μοιάζει τόσο παλιά.)

Οι σχεδιαστές δανείζονται επίσης μερικές επιρροές από τη δεκαετία του ’70, ιδιαίτερα όσον αφορά το χρώμα.

Αυτό που είναι ελκυστικό στο ρετρό design είναι ότι αντλεί από τις πρώτες επιρροές του υπολογιστή καθώς και τα έντυπα, τη μόδα και τα γεγονότα της εποχής:

  • 1990s:Αυτή η εποχή ήταν τολμηρή με πολλά χρώματα κινούμενων σχεδίων και κινούμενα μέρη ή απογυμνωμένες εκδόσεις σχεδίων που παρείχαν καθαρές πληροφορίες. Οι σχεδιαστές προσπαθούσαν να βρουν το δρόμο τους στη νέα ψηφιακή εποχή του οπτικού και γραφικού σχεδιασμού.
  • 1980s:Τα pixel ήταν αποδεκτά και η λαμπρή νέον κουλτούρα του MTV και των βιντεοπαιχνιδιών είχε μια διακριτή επιρροή στα σχεδιαστικά στοιχεία της εποχής.
  • 1970s:Τα σιωπηρά χρώματα και οι τολμηρές γραμματοσειρές βοηθούν τους χρήστες να σχεδιάσουν σχέδια που εξακολουθούν να είναι κυρίως σε έντυπα (πέραν των τηλεοπτικών οθονών).

Για να λειτουργήσουν οποιαδήποτε από αυτά τα ρετρό στυλ, η διεπαφή πρέπει να πληροί τα σύγχρονα πρότυπα χρηστικότητας. Σε πολλά από τα παραδείγματα, μπορείτε να δείτε την αντιπαράθεση παλαιού και καινούργιου – μια σιωπηρή χρωματική παλέτα με ένα γνωστό μενού πλοήγησης ή ένα pixelated παιχνίδι με απλές κινήσεις swipe.

Old-School Τυπογραφία

Chamberlains Leather Milk

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

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

Για να αξιοποιήσετε στο έπακρο αυτές τις vintage γραμματοσειρές, κρατήστε την υπόλοιπη παλέτα τυπογραφίας απλή. Επιλέξτε μία ρετρό γραμματοσειρά για λόγους προβολής και χρησιμοποιήστε μια απλή serif ή sans serif για το αντίγραφο του κύριου σώματος για να εξασφαλίσετε αναγνωσιμότητα.

Σκεφτείτε να συνδυάσετε αυτό το στυλ τυπογραφίας και με παλιά οπτικά στυλ. (Ορισμένες από αυτές τις γραμματοσειρές μπορούν να φαίνονται λίγο περίεργες με υπερσύγχρονες εικόνες. Θυμηθείτε ότι ένα από τα κλειδιά σε ένα στυλ ρετρό είναι να προκαλούν το συναίσθημα της εποχής.) Και τα δύο παραπάνω παραδείγματα χρησιμοποιούν ένα φίλτρο dot-grain για εικόνες που συνδέουν την τυπογραφία με το στυλ σχεδιασμού της δεκαετίας του 1970 και της δεκαετίας του 1980 όταν η φωτογραφία και η βιντεοσκόπηση είχαν την ίδια διάτρητη όψη.

Λιγότερο ή Περισσότερο Φωτεινές Χρωματικές Επιλογές

Caava Design

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

Τα κόκκινα, τα κίτρινα και τα πορτοκαλί είναι ιδιαίτερα δημοφιλή. Το ίδιο και τα μπλε και πράσινα όταν πρόκειται για ένα vibe της δεκαετίας του 1970 ή της δεκαετίας του ’80. Πολλές από αυτές τις επιλογές χρώματος συνδυάζονται με εικονογραφημένες εικόνες αντί για πραγματικές φωτογραφίες.

 

Vintage Hope

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

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

Υφή και Βαθμίδες

 

 

Hovland

 

Balenciaga

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

Υπάρχουν δύο διαφορετικά στυλ όταν πρόκειται για υφή και κλίσεις:

  1. Πολλή υφή στο σχεδιασμό έτσι ώστε οι ιστοσελίδες να έχουν μια ρεαλιστική (τύπου) εμφάνιση

 

  1. Έλλειψη όλων των styling για ένα εύκολο, minimal, απογυμνωμένο στυλ

Και οι δύο επιλογές είναι χρησιμοποιήσιμες και κάθε στυλ μπορεί να λειτουργήσει με διάφορους τρόπους. Αλλά αναλαμβάνουν πολύ διαφορετικά αισθήματα – άνετα και ζεστά με άφθονη υφή υψηλής σχεδίασης ή πιο έντονα και κρύα με την επιλογή του minimal.

Στυλ Video-Game

 

The Most Decisive Game Ever

Interactive Resume of Robby Leonardi

Πόσοι από εσάς σκέφτεστε “Super Mario Bros.” όταν σκέφτεστε τα βιντεοπαιχνίδια; Αυτή είναι μια κοινή σύνδεση και το μοτίβο ρετρό σχεδιασμού σε στυλ βιντεοπαιχνιδιού είναι δημοφιλές εξαιτίας αυτού.

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

Τα παραπάνω παραδείγματα παρουσιάζουν δύο πολύ διαφορετικούς τρόπους άντλησης αυτής της νοσταλγίας βιντεοπαιχνιδιών. Το Πιο Αποφασιστικό Παιχνίδι είναι ένα στυλ σχεδιασμού με block που φαίνεται παλιό (αλλά δεν έχει old-school  αλληλεπιδράσεις). Το portfolio του Leonardi χρησιμοποιεί το χρώμα και τη διάθεση του κλασσικού Mario Bros., αλλά με πιο ομαλές και καθαρότερες γραμμές για το artwork (αυτή είναι η μοντέρνα προσθήκη).

Ο συνδυασμός παλαιών και νέων έργων λειτουργεί σωστά και για τους δύο ιστότοπους και αποτελεί παράδειγμα για το τι είναι μοντέρνο ρετρό.

“Αποκρουστικά” Γραφικά

 

Everything Now

Retrominder.tv

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

Για ορισμένους χρήστες, είναι.

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

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

Το Retro Minder TV είναι ένας γρήγορος ιστοχώρος ταχύτητας, ο οποίος χρησιμοποιεί εικόνες του παρελθόντος με σύγχρονο gamification και απευθύνεται σε μια επιθυμία για άμεση ικανοποίηση (μια κοινή συμπεριφορά των χρηστών).

Συνδυασμός Όλων Μαζί

Το σύγχρονο retro είναι κάπως quirky τάση σχεδιασμού.

Το τέχνασμα σε ένα ρετρό σχέδιο είναι ότι προσθέτει αρκετή σύγχρονη αίσθηση, ώστε να μην φαίνεται απλώς παλιό. (Δεν θέλετε την επόμενη σελίδα Million Dollar.)

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

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

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

Πάντως φαίνεται ξεκάθαρα η διαπλοκή που υπάρχει μεταξύ της κατασκευής μιας ιστοσελίδας ή και της κατασκευής ενός eshop με την διαδικασία προώθησης μιας ιστοσελίδας της καθώς και της διαφήμισης της στο internet.  Γιαυτό και εμείς σαν dreamweaver.gr επιμένουμε στην ολιστική προσέγγιση κατά την δημιουργία μιας ιστοσελίδας ή ενός ηλεκτρονικού καταστήματος. Το που θα φτάσεις δεν εξαρτάται εξάλλου μόνο από τις προθέσεις σου αλλά κυρίως και πρωτίστως από τον σχεδιασμό που έχεις κάνει.

Πηγή της σειράς των παρόντων άρθρων με τίτλο Κατασκευή ιστοσελίδων. Τάσεις στο web design για το 2018 είναι από την UXPin.

 

Κατασκευή ιστοσελίδων