Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP
:: SELFPHP Forum ::
Fragen rund um die Themen PHP?
In über
130.000 Beiträgen finden Sie sicher die passende
Antwort!
:: Newsletter ::
Abonnieren Sie hier den kostenlosen
SELFPHP Newsletter!
Building a Basic Layout in SketchFlow
What you’ll learn in this module:
Creating navigation screens
Adding images
Using drawing tools
Working with connections
Prototyping with SketchFlow: Module 3
Building a Basic Layout in SketchFlow
In this module, you create the layout of your project using basic SketchFlow tools and elements. You will also find out how to add an image to your project.
Adding User Interface Elements
Up to this point, you have seen how to add content to your screens by adding a textbox from the Styles section in the Assets Library. Also contained in the Assets Library are a number of user interface elements in the same SketchStyle format. You’ll now add a few buttons that will form the foundation of a navigation bar.
Make sure that you have a SketchFlow project open, the example we use is located in the module03_assets folder. Open the folder named snowboard_online_module03, then double-click on the file named snowboard_online.
Double-click the Start screen in the SketchFlow Map panel to access this screen.
From the Tools panel, locate the Pen tool, click and hold down to expand it and select the Pencil tool.
With the Pencil tool, draw some basic mountain shapes. Don’t worry about precision; it’s a prototype after all. You can always undo steps by pressing Ctrl+Z, or choosing Edit > Undo.
Click the Assets library and locate the Styles section, click the arrow to expand it, then choose SketchStyles. From the resulting menu, locate the TitleCenter-Sketch element and select it.
Click and drag it out in the center of the artboard and type Snowboarding Online.
If you need to expand the text area, switch to the Selection tool, then click and drag the handles out.
Using the Selection tool, click and drag the title to the upper-left corner of the artboard.
Adding a note
You will now add a note to your project, indicating that it is a prototype.
Click the Assets library and locate the Styles section, click the arrow to expand it, then choose SketchStyles. From the resulting menu, locate the Note-Sketch element and select it.
Click and drag a note onto your artboard.
Type the following into your note: This is an online snowboarding application Version 1.0.
Switch back to the Selection tool to notice that the note now changes yellow and looks like a sticky note. Re-position it on the artboard if you want.