Από το τελευταίο βίντεο, γνωρίζουμε ότι έχουμε πέντε σημαντικά σημεία που πρέπει να λάβουμε υπόψη κατά την έναρξη του σχεδιασμού αυτού του ιστότοπου. Θα τα κρατήσουμε στο μυαλό μας καθώς προχωράμε.
Φυσικά ξεκινάμε το «κινητό πρώτα» και θα αρχίσουμε να καταλαβαίνουμε τη σχεδίαση στο Photoshop. Δεν θα παραμείνουμε εκεί, αλλά τα δημιουργικά εργαλεία στο Photoshop είναι ιδανικά για δημιουργική σκέψη κατά την έναρξη ενός σχεδιαστικού έργου.
Ανοίγουμε τον προσομοιωτή iOS που διατίθεται δωρεάν με XCode σε Mac. Είναι για τη δοκιμή του ιστού και των εγγενών εφαρμογών σε επιτραπέζιο / φορητό υπολογιστή. Το θέλουμε απλώς γρήγορα, ώστε να μπορούμε να τραβήξουμε ένα στιγμιότυπο οθόνης για να μας δώσουμε ένα πλαίσιο με βάση τα συμφραζόμενα στο Photoshop.
Προς ρεκόρ, δεν ξεκινάμε το "iPhone" πρώτα, είναι απλώς μια μικρή οθόνη που είναι βολικό για εμάς να σχεδιάσουμε. Δεν θα σχεδιάζουμε κάτι που να είναι υπερβολικά συγκεκριμένο για το μέγεθος ή τις δυνατότητες του iPhone.
Για να δώσουμε στους εαυτούς μας έναν ψηλότερο καμβά για να δουλέψουμε (δεν χρειάζεται να περιορίσουμε τον ιστότοπο πάνω από το “fold”), κόψαμε το κάτω μέρος του τηλεφώνου και το σύρουμε χαμηλότερα. Στη συνέχεια, παίρνουμε ένα λεπτό κομμάτι των άκρων του iPhone και τα σύρουμε προς τα κάτω, οπότε ουσιαστικά έχουμε αυτό το εξαιρετικά ψηλό (αλλά πλήρες) iPhone.
Αφήνουμε έναν οδηγό στη θέση όπου η αρχική οθόνη τελείωσε για να μας υπενθυμίσει πόσο μεγάλη ήταν. Ναι, όλοι κάνουν κύλιση. Ειδικά στο κινητό. Αλλά είναι ακόμα ωραίο να γνωρίζουμε πώς μοιάζει αυτή η πρώτη οθόνη.
Αρχεία
- # 004 - Τηλέφωνο Canvas.psd.zip
- # 004 - Raw Photos.zip