Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Τάσεις στο Web Design: Εντυπωσιακές Full Screen Αρχικές Σελίδες 

by
Length:LongLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

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

Μια Σημείωση Σχετικά με τη Σχεδιαστική Σύγκλιση

Ο όρος «σχεδιαστική σύγκλιση» αναφέρεται στον τρόπο που τα σχέδια έχουν μια συνήθεια να γίνονται παρόμοια, συγκλίνοντας, με την πάροδο του χρόνου. Πρόσφατα ο @jongold τουίταρε τα εξής:

Αυτό που εννοούσε ήταν ότι αυτές τις μέρες λείπει η δημιουργικότητα από τους σχεδιαστές, αντ'αυτού καταφεύγουν σε γνώριμες συμβάσεις κατά το σχεδιασμό ιστοσελίδων. Το full screen εφέ είναι ένα τέλειο τέτοιο παράδειγμα. Εμείς, ως σχεδιαστές, παίρνουμε τον εύκολο δρόμο χρησιμοποιώντας αυτό το πρότυπο; Μήπως αγνοούμε την ευκαιρία να ξεπεράσουμε τα όρια και να καινοτομήσουμε; Υπάρχει ακόμα το διαδίκτυο μόνο και μόνο από βαρεμάρα;

Ή, όπως αναφέρει ο Paul Boag, είμαστε απλώς μέρος μιας ώριμης σκηνής του web design; Χτίζουμε αυτό που θέλουν οι χρήστες? Αυτό που περιμένουν, και έτσι καθιστώντας πιο εύκολο να χρησιμοποιήσουν τα προϊόντα μας;

«Όσο περισσότερο ένα αντικείμενο υπάρχει τόσο τυποποιείται ο σχεδιασμός του» – Paul Boag

Θα αφήσω το χέρι σας να αποφασίσετε. Εν τω μεταξύ, ας ρίξουμε μια ματιά σε μερικά σχέδια με full screen οθόνες!

Πάνω προς τα κάτω, αριστερά προς τα δεξιά

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

Το Makeshift χρησιμοποιεί αυτό το πρότυπο για να κολλήσει μια δευτερεύουσα πλοήγηση στο κάτω μέρος της οθόνης, με κάποιους συνδέσμους στο προηγούμενο/επόμενο ζήτημα, αριστερά και δεξιά. Η εικόνα φόντου χρησιμοποιεί background-size: cover; σε ένα τεράστιο στοιχείο figure.

To Ideas είναι ένα θέμα πλήρους οθόνης WordPress με διάφορες επιλογές για slideshows, intros, παρουσιάσεις αρχικής σελίδας κλπ. Χρησιμοποιεί ένα ντεγκραντέ που τοποθετείται στο κάτω μέρος της οθόνης για να κάνει τον τίτλο της εικόνας και την περιγραφή πιο ευανάγνωστα.

Ο James Tupper ξεπροβάλλει από το κάτω μέρος της οθόνης, με το γραφικο του προσώπου του να τοποθετείται με background-position: center bottom;. Το τεράστιο κίτρινο splash γίνεται ίσο με το ύψος του viewport χρησιμοποιώντας ενδογενές CSS height: 100vh;.

Μάθετε περισσότερα σχετικά με αυτές τις δύο τεχνικές CSS:

To lifestyle περιοδικό Lagom, πνευματικό τέκνο του Elliot Jay και της Samantha Stocks, χρησιμοποιεί μια αρχική σελίδα που γεμίζει την οθόνη στο σύνολό της. Δεν υπάρχει κύλιση εδώ (εκτός εάν προβληθεί σε μια μικρή οθόνη). Το Lagom χρησιμοποιεί την κάτω άκρη για να στεγάσει τους κοινωνικούς συνδέσμους.

Το Soul είναι ένα πρότυπο Shopify, και μία από τις διατάξεις του είναι ένα fullscreen slider με συνδέσμους πλοήγησης στη δεξιά πλευρά.

Συνεχίστε την Κύλιση Παρακαλώ ↓

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

Το Blandly επιλέγει την ενθαρρυντική αιχμή βέλους προς τα κάτω για να πει «κοιτάξτε εδώ».

Η αρχική σελίδα του Kindeo χρησιμοποιεί μια τεχνική που μου αρέσει. Διασφαλίζοντας ότι ένα μικρό κομμάτι της επόμενης ενότητας είναι πάντα ορατό στο κάτω μέρος του viewport. Υπάρχει επίσης ένα βέλος με «Μάθετε περισσότερα» ώστε ο χρήστης να μην έχει ποτέ αμφιβολία ότι υπάρχει κάτι ακόμα κάτω από το κάτω μέρος της οθόνης.

Στο Kilani έχουν λάβει την μάλλον αμφίβολη προσέγγιση της αυτόματης αναπαραγωγής ήχου. Υπάρχει ένα κουμπί σίγασης στο κάτω δεξί μέρος της οθόνης. Ο τρόπος τους να προτείνουν να κάνετε κύλιση περαιτέρω είναι επίσης ενδιαφέρουσα – κολλώντας μια οδηγία «Scroll Down» στον κέρσορα του ποντικιού:

Βίντεο

Ο Damir Kotorić, πρώην σχεδιαστής UX στην Envato, άρχισε την  Falcon Films ως αποτέλεσμα το πάθος του για την αεροφωτογράφηση. Είναι λογικό ότι το βίντεο παίζει μεγάλο ρόλο στην αρχική σελίδα του Falcon Films. Δείτε το  <video> υποβάθρου, και στη συνέχεια, παρακολουθήστε το showreel για εντυπωσιακά πλάνα της Μελβούρνης από drone.

Και πάλι, o Damir έχει χρησιμοποιήσει ενδογενές CSS min-height: 100vh; για να δημιουργήσετε μια κεντρική ενότητα hero πλήρους οθόνης.

To Landscape επιτυγχάνει το ίδιο αποτέλεσμα. Μια πλήρης οθόνη, με αυτόματη αναπαραγωγή βίντεο με πρόσθετο showreel, αλλά χρησιμοποιεί JavaScript για να επιτύχει την πλήρη οθόνη. Το ίδιο το αρχείο του αυτόματα αναπαραγόμενου mp4 βίντεο είναι 1.3 Mb, αλλά δεν υπάρχει τίποτα άλλο να φράξει το εύρος ζώνης σας.

Στυλ

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

Το παράδειγμα του Landscape από πριν χρησιμοποιεί ένα όμορφο μπλε του κοβαλτίου (ένας από τους λόγους που μου αρέσει) και το Voog κάνει κάτι παρόμοιο, το οποίο φαίνεται εξαιρετικό.

Πάντα το λέω όμως - αυτή η εικόνα είναι διτονική, ώστε να μπορείτε να ελαττώσετε αρκετά το μέγεθος των 540Kb της. Κάποιο μικρό θόλωμα, και έπειτα η μείωση ποιότητας JPG στο 50% την κατεβάζει περίπου στα 50Kb χωρίς να διακυβεύεται το όμορφο εφέ.

Το Bloomberg Businessweek Design Conference (θα πάτε;) χρησιμοποιεί μια αφηρημένη τυπογραφική διάταξη για να δείξει αυτό που θέλει να πει. Σχεδιαστική σύγκλιση; Όχι εδώ, φίλε.

Έχω αναφέρει ποτέ το έργο Envato Tuts+ Translation; Ενδεχομένως... Τέλος πάντων, μου αρέσει η επίδειξη του RTL script σε αυτό το θέμα. Ρίξτε μια ματιά στο Proland, ένα πρότυπο σελίδας φτιαγμένο με Bootstrap με αρκετές επιλογές διάταξης σε πλήρη οθόνη.

Είδατε Αρκετά;

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.