Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Δημιουργήστε ένα πρωτότυπο Lo-fi UI σε 60 δευτερόλεπτα

by
Difficulty:BeginnerLength:QuickLanguages:
This post is part of a series called 60 Second Video Tutorials.
Create a “Coming Soon” Page in 60 Seconds

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

Ας δημιουργήσουμε ένα Lo Fi πρωτότυπο, σε εξήντα δευτερόλεπτα, χρησιμοποιώντας το κιτ MadKit Sketch UI από Themeforest!

Παρακολουθήστε το Screencast

Πώς γίνεται

Σε ένα αντίγραφο του αρχείου MadKit Sketch (Lo-Fi UI) δημιουργήστε μια νέα σελίδα. Πηγαίνετε στο Insert > Symbols > Base > Shapes > Window  για να δημιουργήσετε ένα παράθυρο του προγράμματος περιήγησης για το mockup μας.

Shapes
Shapes > window

Επίσης κάτω από τα Shapes πάρτε ένα browser-header, και στη συνέχεια ονομάστε το πρωτότυπο σας.

Το περιεχόμενο είναι βασιλιάς

Τώρα θα συναρμολογήσουμε το περιεχόμενο του πρωτοτύπου μας χρησιμοποιώντας σύμβολα που μπορείτε να βρείτε κάτω από τις Categories (ξεκινήστε με ένα κάλυμμα για βίντεο φόντου). Στη συνέχεια θα προσθέσουμε μια λίστα προϊόντων, ένα slider με μαρτυρίες, έπειτα θα δείξουμε τα τελευταία άρθα του blog, θα προσθέσουμε κάποιες πληροφορίες σχετικά με τους ανθρώπους της εταιρείας, και θα κλείσουμε με κάποια στοιχεία επικοινωνίας.

Τέεεντωμα

Τραβήξτε το αντικείμενο του παραθύρου έτσι ώστε να χωράει το περιεχόμενο σας:

stretch window
Τεντώστε το σχήμα του παραθύρου

Τώρα επιλέξτε όλα τα έξι κομμάτια περιεχομένου, κάντε δεξί κλικ στο μενού layers και επιλέξτε Detach from Symbol. Στο αντικείμενο Video BG κρύψτε το Base/Shapes/window και ορίστε την ακτίνα του Video Background σε 0.

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

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

Είμαστε έτοιμοι

Έτσι μπορείτε να δημιουργήσετε ένα lo-fi πρωτότυπο UI σε εξήντα δευτερόλεπτα! Φροντίστε να δείτε τί υπάρχει διαθέσιμο για δημιουργία πρωτοτύπων σε Sketch στο Themeforest:

wireframe Sketch app templates
Πρότυπα εφαρμογών για πρωτότυπα σε Sketch στο Themeforest
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.