Progettare la Home Page

Step 1- Apri Balsamiq Mockups installato sul tuo computer. Dalla libreria dell'interfaccia utente, nel controllo Aggiunta rapida, digitare -Browser.

Step 2 - Una volta selezionato Browser, il controllo sarà disponibile nell'area wireframe. Fare clic sul pulsante di attivazione / disattivazioneInspector per visualizzare i dettagli dei controlli dell'interfaccia utente nel pannello di destra.

Nella sezione Inspector, inserisci 0 (zero) per entrambi Position X e Ycaselle di testo. Ciò porterà il controllo del browser all'angolo dello spazio wireframe per una migliore visibilità.

Nel Size caselle di testo, immettere 1024 come width e 768 come il height.

La finestra del browser si estenderà attraverso tutto lo spazio del wireframe utilizzando l'opzione di zoom sopra la sezione della libreria dell'interfaccia utente, imposta il livello di zoom su “Fit in Window”.

Una volta impostati tutti i parametri di cui sopra, saremo in grado di vedere la seguente schermata.

Step 3 - Nello spazio bianco sotto la barra degli indirizzi nel wireframe, creiamo l'intestazione per il sito web.

Per iniziare con l'intestazione, creiamo un logo. Nei wireframe, spesso è sufficiente rappresentare il posizionamento del controllo dello schermo. Ad esempio, useremo il controllo Image e lo denomineremo come“Logo”. Nella casella di aggiunta rapida, digita“Image”. Il controllo dell'immagine verrà evidenziato. Selezionalo per posizionarlo nell'area del wireframe.

Nella finestra di dialogo delle proprietà a destra, inserisci la dimensione - width 139 e height come 93. Posizionare l'immagine su X-axis a 16 e oltre Y-asse a 94.

Una volta terminato, dovremmo essere in grado di vedere lo spazio wireframe come mostrato di seguito.

Step 4 - Sotto l'immagine, per una migliore comprensione dello spettatore, inserire un file Labeldalla libreria UI; chiamalo "Logo aziendale". Dalla scheda delle proprietà a destra, imposta l'etichettasize essere 15.

Una volta terminato questo passaggio, dovresti essere in grado di vedere l'immagine e il testo come mostrato di seguito.

Step 5- Ora inseriamo il titolo della Compagnia, in un carattere relativamente grande. Nella casella Aggiunta rapida con la libreria dell'interfaccia utente, digitare“Title”. Il titolo con“A Big Title”il testo verrà visualizzato sullo schermo. Fare doppio clic sul testo per rinominarlo. Inserisci il testo "Nome della tua azienda".

Ai fini di questo tutorial, la posizione esatta su X e Y-axis è fornito. Puoi trascinare il testo nella posizione che preferisci.

Nella sezione delle proprietà a destra, aggiorna il valore in posizione per X come 626 e a Y come 107.

Vedremo la forma dell'intestazione come mostrato nella schermata qui sotto.

Step 6 - Aggiungi un separatore orizzontale sotto il testo e il titolo del logo per separare l'intestazione dal contenuto del corpo della pagina.

Nella casella Aggiunta rapida, digitare “rule”. Ti mostreràH.Rule e V.Rule. Sta per regola orizzontale e verticale. SelezionareH.Rulee inserisci la regola sotto il titolo e il testo del logo trascinando il mouse. Utilizzando le maniglie sulla regola, puoi aumentare / diminuire la dimensione della regola.

Ingrandisci di un livello per vedere la riga orizzontale inserita. Posizionalo come mostrato nella schermata sottostante.

Step 7 - Allo stesso modo, inserisci la sezione Prodotti e servizi, utilizzando i controlli dell'interfaccia utente - block of text e title. Usa la riga orizzontale per separare la sezione. Dovresti essere in grado di vedere lo spazio del wireframe come mostrato di seguito.

Step 8 - Sulla stessa riga, aggiungi la sezione Company Vision utilizzando gli stessi controlli dell'interfaccia utente di cui sopra.

Step 9 - Aggiungi Link Barin questa pagina per la navigazione. Al giorno d'oggi, è pratica comune utilizzare le barre dei collegamenti per una navigazione più semplice. Utilizzare la casella Aggiunta rapida per inserire una barra dei collegamenti. I valori vengono aggiornati facendo doppio clic sulla barra delle schede inserita nella pagina. Aggiungi valori separati da virgole per diversi link di pagina. Posizionare la barra dei collegamenti come mostrato di seguito.

Questo conclude il design del wireframe della home page. Abbiamo visto quanto sia facile e semplice aggiungere controlli dell'interfaccia utente e iniziare con il layout dell'interfaccia utente di un sito Web.

Salvare il file del progetto Balsamiq andando a Project Menu → Save Project.