Créer un prototype d'interface utilisateur lo-fi en 60 secondes

Créons un prototype Lo Fi, en soixante secondes, à l'aide du kit d'interface utilisateur MadKit Sketch de Themeforest.!

Regarder le screencast

 

Comment c'est fait

Dans une copie du fichier MadKit Sketch (interface utilisateur Lo-Fi), créez une nouvelle page. Aller à Insertion> Symboles> Base> Formes> Fenêtre créer une fenêtre de navigateur pour notre maquette. 

Formes> fenêtre

Aussi sous Formes récupérez un en-tête de navigateur, puis donnez un nom à votre prototype.

Le contenu est roi

Nous allons maintenant assembler le contenu de notre prototype en utilisant les symboles que l'on peut trouver sous Les catégories (commencez par une couverture de fond vidéo). Nous ajouterons ensuite une liste de produits, un curseur de témoignages, puis nous afficherons les derniers articles de blog, nous ajouterons des informations sur les personnes de la société, puis nous terminerons avec quelques détails de contact..

Stree-etch

Étirez votre objet window afin qu'il corresponde à votre contenu:

Étirer la forme de la fenêtre

Sélectionnez maintenant les six éléments de contenu, cliquez avec le bouton droit de la souris dans le menu Calques, puis sélectionnez Détacher du symbole. dans le Vidéo BG objet cacher le Base / Formes / Fenêtre et mettre le Arrière-plan vidéole rayon de 0.

Nous allons maintenant masquer la forme de la fenêtre pour chaque deuxième élément de contenu, puis pour les éléments restants, nous allons masquer les bordures et définir le rayon sur 0..

Enfin, saisissez la fenêtre du navigateur et les symboles d’en-tête et faites-les glisser tout en haut de la pile..

Avaient fini

C'est ainsi que vous créez un prototype d'interface utilisateur lo-fi en soixante secondes! N'oubliez pas de consulter l'offre de prototypage proposée dans Sketch on Themeforest:

Wireframing Sketch modèles d'application sur Themeforest