For the "Accounts" screen (which we're on), we'll use the dollar sign icon. We now need to add the logo and some navigation.įor this, we'll start with the Icon and Text Label control, which is kind of a two-in-one control that's ideal for iPhone tabs. We'll then center it and change its color to grey to make it less prominent (because, as we all know, users probably won't read it!).Īt this point it looks like this and is starting to come together. Do this by typing "lorem" in a Paragraph control and it will immediately fill with Lorem Ipsum text. We can use the Lorem Ipsum shorcut to quickly generate this placeholder text. As the designer or developer, we just need to have a placeholder to remind ourselves that this space is reserved for a block of text. We'll then add some "legalese" that is often used in these types of applications. The ">" symbols create drill-down arrows inside the control. The commas divide the larger, left-aligned text from the smaller, right-aligned text. We'll also be using more iPhone-specific controls (the iPhone menu and iPhone button controls).Īfter adding, resizing, and centering the Label control, we'll add an iPhone menu control.įor the iPhone menu, here's the text we'll use: For the second icon we can again use the duplicate shortcut, and then change its size in the Property Inspector.įor this screen we'll have the background pattern of the iPhone control set to show the top and bottom toolbar areas, which we'll be using for icons. For the "forgot password" link, we'll use the Link control.įinally, for the icons, we'll add an Icon control and use the icon search to change it to a cloud icon. Grouping the controls allows you to more easily center align them as a unit inside the iPhone control.įor the login button, we want a big, colorful button, so we can increase the text size, change the background color, and enlarge the dimensions of the Button control. To make it easier you can align and group these controls outside of the iPhone controls so that the other alignment guides don't interfere. Since this is a mobile app, we'll use the on/off control instead of a regular checkbox. Next up is the save username checkbox, which consists of a Label and iPhone On/Off Switch control. The shortcut for duplicating controls is CTRL/CMD + D ( full list of keyboard shortcuts here). After creating and formatting the username field, you can duplicate that field to quickly create the password field. This gives the effect of showing the text as a placeholder that will get overwritten when the user enters their own information. The first is to wrap text in dashes ("-") to show it as disabled. For the username and password fields, we can add a Text Input control, followed by a few tips and tricks. Next, we'll add a Title/Headline control and use the alignment guides to center it within the iPhone control. You can press the "/" or "+" key to send focus to quick add. To save time, you can type the word "iphone" into the "quick add" box rather than dragging the control from the UI Library. Team plans are available if you'd like to pay for others, and you can stop and restart your subscription at any time.Start by adding the iPhone control to the canvas. To do so, you must sign up for a subscription, which costs $5/month or $50/year per editor. The free Balsamiq Wireframes add-ons allow you to quickly browse and insert your wireframes in your G Suite documents.Īt the end of your fully-functional 30-day trial period you will be able to view existing wireframes, but you will not be able to edit or create new wireframes unless you sign up for a paid plan. You can even collaborate on your wireframes with others, in real time!īalsamiq Wireframes for Google Drive is fully integrated with G Suite apps (Docs, Sheets, Slides). The integration with Google Drive is pretty slick: you can create or edit wireframes projects directly from Google Drive, all within the browser. Add and edit UI wireframes directly from your Google Drive.īalsamiq Wireframes allows you to create, edit and share sketch-quality wireframes, all within Drive and the G Suite apps (Docs, Sheets, Slides).īalsamiq Wireframes is the easiest, fastest, most fun, best supported wireframing tool on the Internet.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |