SCTO User Interface Design Tool Version 5.1 November 12, 2006

About the Tool The SCTO User Interface Design Tool is designed to allow you to quickly create interface mockups of an application (web, desktop or otherwise) that you are building. Its built on top of Microsoft PowerPoint to make it easy and accessible to everyone.

Using the Tool The following slides contain a series of interface elements followed by a blank ‘workspace’ page. To use the tool, copy and paste the elements you need for your mockup into the workspace page, and resize, arrange and edit as you see fit. Create new workspace pages as needed. When finished, delete these instruction slides.

Tips for Use  Draw elements common to every screen (windows, toolbars, page titles, etc.) and put them in a ‘Slide Master’ to make them show up everywhere automatically.  Many elements are made using PowerPoint tables. Remember you can always add or delete rows if you need to display more or less information.

Tips for Use  Feel free to draw your own elements if you don’t see what you need. PowerPoint’s ‘AutoShapes’ can be very helpful here.  If your elements are really good, send them in for inclusion in the next version of this template!send them in  If you’re working on an existing app, paste in a screenshot and then use PowerPoint’s transparency to fade it into the background.

Legal Copyright © 2006 StartupCTO. You are welcome to share and/or redistribute this document as you see fit, provided you comply with the following two restrictions: 1.You may not remove the StartupCTO branding or copyright notices from the template. You may remove them from your finished software-specific document. 2.You may not charge for this document, or include it in any compilation or product which you do charge for. All other rights are reserved. The latest version of this template is available from

Dropdown Selected Buttons & Controls Tips for Use  Click button text to edit.  Try to use the button that is closest in size to your actual button.  If you try to make a small button big, or a big button small, the scaling won’t work well.  Once you get radio buttons or checkboxes in place, ‘Group’ them so you can move them around easily. medium – tall & wide medium – wide Radio Button On Radio Button Off Check Box Checked Check Box Unchecked small medium large Dropdown item 1 Dropdown item 2 Dropdown item 3 Dropdown - LargeSm. Medium

Text & Fields Tips for Use  Use the text samples at right to enter titles and text into your mockups.  If you don’t know what something will say yet, use the squiggle lines.  For data entry from users, use the text boxes. Large Title Medium Subtitle Normal Text single line text box multi-line text box Paragraph Text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tortor nunc, pulvinar id, accumsan et, vestibulum mattis, libero. Phasellus sed nisi. Duis eu massa vitae leo tristique porttitor.

Lines & Boxes Insert your logo here Use this collection of lines and boxes to draw your interface framework, or create your own with the PowerPoint Drawing and AutoShapes tools.

Menu and Tabs Tips for Use  Use these menus and tab-bars for navigation elements in your mockup  Everything is table- based… to add elements, insert columns in the table, and vice-versa to delete. Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Fly-out item 1 Fly-out item 2 Fly-out item 3 Fly-out item 4 Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Tab 1 Tab 2 Tab 3 Tab 4

Windows & Scroll Bars Tips for Use  Windows can be used for dialog boxes or full application windows.  Windows are table- based, so you may have to adjust header sizes after expanding. Window x -+x ToolsX

Search Miscellaneous Elements Tips for Use  Use these miscellaneous elements to additional strength to your mockups.  If you develop your own collection of elements, please send them in so they can be included here.send them in Notes Text based notes box for important messages Login Enter name submit Browse… Column Row

Comments  Use these transparent boxes and arrows to add comments to your mockups.  They’re great for explaining what something should do, or how something should work. SEMI-TRANSPARENT Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tortor nunc, pulvinar id, accumsan et, vestibulum mattis, libero. Phasellus sed NON-TRANSPARENT Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tortor nunc, pulvinar id, accumsan et, vestibulum mattis, libero. Phasellus sed WHITE BACKGROUND Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tortor nunc, pulvinar id, accumsan et, vestibulum mattis, libero. Phasellus sed

Empty Slide Start your work here and insert more empty slides if you need more screens Remember to put any elements common to all slides in the Slide Master (View->Master->Slide Master)