At this point, our work should look like the following: Add a link for each to their desired destination pages, and change the color, font, and icon to suit your style. Change their titles to “Save”, “New game”, and “Exit”. Repeat the same process for the three remaining icons to finish our social bar. After that, drag and drop an icon and then duplicate it four times (I’ve decided to insert the icons representing Facebook, Twitter, Google+, and Delicious). Then, drag and drop three small rectangular buttons from the “Buttons” category (the first shape from the left). First of all, we have to duplicate the shape of our mobile phone. Let’s see how we might create a mockup for the last page of a game in which the final score is displayed, icons are offered to share the score via social media, and three continuation options are presented: save, go back to the homepage, or exit the game. For images, we can show or hide a border, crop the image, and hyperlink the chosen image to lead to a new URL or screen. You can also set the background color, set the border color, add a scrollbar, and play with opacity and focus. You can modify texts selecting size, text alignment, format, and color. When you click on the title/headline or on the text box, you’ll see a typical text editor, where you’ll be able to specify the characteristics or content. Once you’ve dragged and dropped the elements, you’ll see that each element has extensive editing options. At this point, your design concept should look something like this: So, drag and drop each of these into your mockup. For the first components of our page, we have to open the category called “Big.” Here, we’ll find the following elements elements: title/headline, the text Area, and the image box. Just like in Codiqa, the program offers a simple, intuitive drag-and-drop system that easily adds everything you want with a few clicks. Generally, we might find a header, a footer, a menu-list, a text box for some content, an image, or some Links, for example. Now, let’s work on the style of the main page and determine which elements we want to show on our brand new homepage. In this case, you can choose the orientation of the device, the background pattern, if you want the top toggle bar to be present, and the layering. You’ll see that on the right side of the picture is a box with all the tools you need to edit the selected element. As first step, I placed the iPhone shape (it’s the only one available, so it represents the profile of all modern smartphones) and set its size using slight adjustments with the mouse. Let’s see what we can do using the elements of Balsamiq Mockups. The other categories are: Big, Buttons, Common, Containers, Forms, iPhone, Layout, Markup, Media, Project Assets, and Text. The first one, called All, as you might guess, contains all the elements that you can use during your work. When you open the software, you’ll find several main categories that will help in the creation of your design mockup. The trial version lasts only seven days, but you can use it with full functionality for the whole time period. Balsamiq Mockups is also available as a plugin for Google Drive, Confluence, JIRA, FogBugz, and XWiki. Much like Codiqa, Balsamiq can assist you in creating interfaces using simple drag and drop components the program supports 75 built-in user interface components and 187 icons, with the addition of a whole lot of additional components created by the community. The tool offers multiple ways to share and solicit feedback on the design concepts: mockups can be exported to PDF, and common PNG images and also copied to the clipboard so that you can send them by e-mail or within other document formats. Luckily, you can work with it using the operating system of your choice it runs on Mac, Windows, and Linux.īalsamiq can help you quickly tweak designs in real time, proposing a design that is intentionally rough and low-fidelity (with sketchy UI elements and a hand-drawn font) to encourage as much feedback as possible. Unlike Codiqa, Balsamiq is offline desktop software. What’s Balsamiq Mockups?īalsamiq Mockups is a tool that helps developers to create wireframes and communicate with clients and coworkers with visual representations of their design plans. In this article, I’ll review another very well-known online tool called Balsamiq Mockups, compare it with Codiqa, and highlight their main differences. In my previous article, I described how to tweak and rearrange a digital project using the Codiqa toolset. A good designer knows that before starting work on a new project, it’s best to do some sketches of it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |