o maquetter son projetmoncoursdetechno.free.fr/img/pdf/maquetter_smartphone.pdf · 2015-10-26 ·...

7
Balsamiq MOCKUPS lchastain - Novembre 2015 BALSAMIQ MOCKUPS CREER UN NOUVEAU PROJET Smartphone/ Arduino MAQUETTER SON PROJET Lancer le logiciel "Balsamiq Mockups" 1 Double-cliquer sur "New Balsamiq Project1"... 2 ... et Nommer le projet 3 Double-cliquer sur "New Balsamiq Project1"... 4 ... et Nommer le Mockup 5

Upload: others

Post on 11-Mar-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

Balsamiq MOCKUPS lchastain - Novembre 2015

BALSAMIQ MOCKUPS

CREER UN NOUVEAU PROJET

Smartphone/Arduino

MAQUETTER SON PROJET

Lancer le logiciel

"Balsamiq Mockups"

1

Double-cliquer sur "New Balsamiq

Project1"...

2

... et Nommer le projet

3

Double-cliquer sur "New Balsamiq

Project1"...

4

... et Nommer le Mockup

5

Page 2: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

!!!!!!!!!

!

!!!!!!!!!!![ ! ]2

Ouvrir l'onglet "iOS"

6

Glisser-Déposer l'image du Smartphone sur le plan de

travail

7

Ouvrir l'onglet "Icons"

8

Glisser-Déposer le symbole

"androïd" sur le plan de travail

9

MAQUETTER SON MOCKUP (SMARTPHONE VERSION PORTRAIT)

Ouvrir l'onglet "Buttons"

10

Page 3: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

!

!!!!!

Glisser-Déposer le symbole

"Button" sur le plan de travail...

11

... et Nommer ce bouton

12

Répéter ces manipulations

afin d'obtenir ceci :

Page 4: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

!

!!!!!

Ouvrir l'onglet "Text"

13

Glisser-Déposer le symbole

"Label" sur le plan de travail...

14

... et Modifier ce texte

15

... et Modifier la couleur du texte

16

Page 5: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

!

!!!!!

Répéter ces manipulations

ajouter le nom du concepteur :

INSÉRER UNE IMAGE

Ouvrir l'onglet "Media"

17

Glisser-Déposer le symbole

"Image" sur le plan de travail...

18

... et nommer cette image

19

Double-clic sur le symbole de

l'image et sélectionner la photo depuis son ordinateur

20

Page 6: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

!

!!!!!

CLONER SON MOCKUP

Faire un clic-droit sur le MOCKUP

--> Clone

22

Faire un clic-droit sur le MOCKUP copy

--> Rename

23

modifier le nom de la copie du

MOCKUP

24

Ajuster sa taille

21

Page 7: o MAQUETTER SON PROJETmoncoursdetechno.free.fr/IMG/pdf/maquetter_smartphone.pdf · 2015-10-26 · [!2 ]! Ouvrir l'onglet "iOS" 6! Glisser-D poser l'image du Smartphone sur le plan

!!!!!

MAQUETTER SON MOCKUP (SMARTPHONE VERSION PAYSAGE)

Modifier la disposition des éléments

Modifier l'orientation du SMARTPHONE

25

26

Bon bèh...je crois que tu as

droit à une pause !