10 Τάσεις του Web Design για το 2013

Τάσος Blog, Design
10 Τάσεις του Web Design για το 2013

Για να διατηρείτε ένα website μοντέρνο και ελκυστικό προς τον επισκέπτη, θα πρέπει να παρακολουθείτε συνεχώς τις τελευταίες τάσεις, έτσι ώστε να βελτιώνετε συνεχώς τις ιστοσελίδες σας. Για να καταλάβετε πως εξελίσσεται το web design, προσπαθείστε να θυμηθείτε πως ήταν οι ιστοσελίδες πριν 5-6 χρόνια και πως είναι τώρα. Τα προηγούμενα χρόνια, το web design εστίαζε περισσότερο στα πολυμέσα, ενώ τώρα μας ενδιαφέρει πιο πολύ η χρησιμότητα και η αισθητική εμφάνιση των ιστοσελίδων.

Παρακάτω αναφέρουμε τις 10 τελευταίες και πιο hot τάσεις στο web design, οι οποίες αναμένεται να κυριαρχήσουν μέσα στο 2013, δίνοντας και ένα χαρακτηριστικό παράδειγμα.

1) Responsive Web Design

Παλαιότερα, για να εμφανιστεί σωστά μία ιστοσελίδα στην οθόνη ενός υπολογιστή γραφείου, αλλά και στην οθόνη μιας κινητής συσκευής, λόγω μικρότερων διαστάσεων, οι web designers σχεδιάζαν 2 εκδόσεις ενός website. Οι ιστοσελίδες οι οποίες είναι κατασκευασμένες με την τεχνική του Responsive Web Design προσαρμόζονται αυτόματα στο μέγεθος της οθόνης οποιασδήποτε συσκευής. Τα πλεονεκτήματα είναι προφανή. Υπάρχει μία έκδοση η οποία πρέπει να σχεδιαστεί, οπότε είναι και ευκολότερο να συντηρηθεί. Το Responsive Web Design ήρθε για να μείνει λοιπόν.

http://www.oliverrussell.com

2) Ήρθε το τέλος για το Adobe Flash

Τα προηγούμενα χρόνια το Flash κυριαρχούσε σε ιστοσελίδες που περιείχαν animation και εκπληκτικά εφέ. Λόγω ασυμβατοτήτων του Flash με πολλές πλατφόρμες οι designers άρχισαν να υλοποιούν τέτοιες λειτουργίες με χρήση HTML5, CSS3 και JavaScript. Για το 2013 προβλέπεται ότι ο αριθμός των ιστοσελίδων οι οποίες κατασκευάζονται ή περιέχουν Flash θα μειωθεί ακόμη περισσότερο.

http://www.theamazingspidermangame.com

3) Backgrounds με φωτογραφίες

Η τάση που υπάρχει να κατασκευάζονται websites έχοντας ως background φωτογραφίες, μεγαλώνει και γίνεται ολοένα και περισσότερο διάσημη. Περιμένουμε να δούμε και φέτος πολλές ιστοσελίδες οι οποίες χρησιμοποιούν υψηλής ποιότητας εικόνες και φωτογραφίες όχι μόνο κατά την είσοδο του επισκέπτη δημιουργώντας μία εξαιρετική εμπειρία χρήστη, αλλά και σε image galleries, portfolios και προϊόντα που πωλούνται online.

http://www.germancraft.com.au

4) Σταθερές μπάρες στην κορυφή

Μία οριζόντια σταθερή μπάρα στην κορυφή της ιστοσελίδας όσο ο επισκέπτης «σκρολάρει» προς τα κάτω, μπορεί να αποδειχθεί ιδιαίτερα χρήσιμη. Συνήθως σε αυτή τη μπάρα μπορεί να υπάρχει ένα μενού πλοήγησης, μία φόρμα αναζήτησης, εικονίδια για social media κτλ. Το πλεονέκτημα αυτής της τεχνικής είναι ότι δίνει ευελιξία στην πλοήγηση και ότι σημαντικές πληροφορίες είναι πάντοτε ορατές. Επιπλέον, μπορεί να ταιριάξει σχεδόν με κάθε είδους ιστοσελίδα.

http://www.nike.com

5) Εφαρμογή της σχεδιαστικής γλώσσας Metro της Microsoft

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

http://januarycreative.com

6) Masonry Layout

Αυτή η τεχνική άρχισε ήδη να εμφανίζεται στο web design και σίγουρα θα «φορεθεί» πολύ το 2013, αφού θεωρείται ήδη πολύ επιτυχημένη. Τα κύρια χαρακτηριστικά είναι ότι το περιεχόμενο εμφανίζεται με διάταξη ενός δυναμικού πλέγματος. Η κάθε ενότητα εμφανίζεται σε ένα κουτάκι ή «πλακάκι» ή «τούβλο», που συνήθως αποτελείται από μια εικόνα και έναν τίτλο, σχηματίζοντας έτσι έναν «τοίχο» (masonry). Το μέγεθος αυτό είναι δυναμικό και προσαρμόζεται ανάλογα με το μέγεθος του περιεχόμενου. Άλλα ονόματα για αυτή την τεχνική είναι brick layout και tile layout.

https://chrome.google.com/webstore/category/home

7) Infinite Scrolling

Όταν λέμε Infinite Scrolling εννοούμε ότι όταν ο χρήστης κατεβαίνει με το scroll ή την μπάρα του browser προς τα κάτω για να δεί το υπόλοιπο περιέχομενο της σελίδας, ένα μερος του περιεχομένου φορτώνει και εμφανίζεται εκείνη τη στιγμή σε πραγματικό χρόνο. Αυτό έχει εμφανιστεί αρκετά στα κινητά, λόγω του μικρού μεγέθους της οθόνης, αλλά και της δυσκολίας στην πλοήγηση. Έτσι, αντί να χρησιμοποιήσουμε σελιδοποίηση για 50 άρθρα, και στέλνοντας κάθε φορά το χρήστη στη δεύτερη, τρίτη κλπ. σελίδα, μπορούμε να χρησιμοποιήσουμε αυτή την τεχνική. Πλεονεκτήματά της είναι ότι η σελίδα δεν αργεί να φορτώσει την πρώτη φορά, αφού φορτώνει μόνο το περιεχόμενο που είναι ορατό στην οθόνη του χρήστη και ότι ο χρήστης δε χρειάζεται να μεταφέρεται σε άλλη σελίδα. Απλά κατεβαίνει προς τα κάτω. Πολύ γνωστό παράδειγμα αυτής της τεχνικής είναι το facebook.

http://lookslikegooddesign.com

8) Parallax Scrolling

Το Parallax Scrolling είναι μία τεχνική στην οποία καθώς «σκρολάρουμε», οι εικόνες του φόντου κινούνται πιο αργά από ότι το περιεχόμενο στο προσκήνιο, δημιουργώντας έτσι μία τρισδιάστατη αίσθηση. Χρησιμοποιείται στο παραδοσιακό animation και στα ηλεκτρονικά παιχνίδια. Έφτασε η ώρα να χρησιμοποιηθεί και στο web design.

https://crv.honda.com.au

9) Ολόκληρο website σε μια σελίδα

Το να έχουμε ένα ολόκληρο website στην ουσία σε μία και μόνο σελίδα, χωρίς να φορτώνει ο browser για να πάμε σε μία άλλη, δεν είναι κάτι το εντελώς καινούριο ή που εμφανίστηκε τώρα. Σίγουρα όμως το 2013 θα εμφανιστούν περισσότερες ιστοσελίδες κατασκευασμένες με αυτή τη φιλοσοφία και αυτό διότι η JavaScript μας δίνει πλέον αρκετές δυνατότητες στη δημιουργία animation και διάφορων εφέ. Μπορούμε να χρησιμοποιήσουμε ένα animation, έτσι ώστε να δείξουμε στο χρήστη το περιεχόμενο που έχει ζητήσει, χωρίς να φορτώσει ο browser και να μεταφερθεί σε άλλη σελίδα.

http://riot.fm

10) Μεγάλα κουμπιά

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

http://flickr.com

Σχολιάστε