-
Notifications
You must be signed in to change notification settings - Fork 0
/
BalsamiqWireframes.html
161 lines (118 loc) · 7.23 KB
/
BalsamiqWireframes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en" data-content_root="./">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mockups with Balsamiq Wireframes</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css?v=fa44fd50" />
<link rel="stylesheet" type="text/css" href="_static/bootstrap-sphinx.css?v=fadd4351" />
<link rel="stylesheet" type="text/css" href="_static/custom.css?v=77160d70" />
<script src="_static/documentation_options.js?v=30d551ce"></script>
<script src="_static/doctools.js?v=9a2dae69"></script>
<script src="_static/sphinx_highlight.js?v=dc90522c"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Mantid Icon Table" href="MantidUsedIconsTable.html" />
<link rel="prev" title="Qt Designer for Python" href="QtDesignerForPython.html" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59110517-1', 'auto');
ga('send', 'pageview');
</script>
</head><body>
<div id="navbar" class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.mantidproject.org">
</a>
<span class="navbar-text navbar-version pull-left"><b>master</b></span>
</div>
<div class="collapse navbar-collapse nav-collapse">
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><a href="index.html">Home</a></li>
<li><a href="https://download.mantidproject.org">Download</a></li>
<li><a href="https://docs.mantidproject.org">User Documentation</a></li>
<li><a href="http://www.mantidproject.org/contact">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-right" action="search.html" method="get">
<div class="form-group">
<input type="text" name="q" class="form-control" placeholder="Search" />
</div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<p>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="nav-item nav-item-0"><a href="index.html">Documentation</a> »</li>
<li class="nav-item nav-item-this"><a href="">Mockups with Balsamiq Wireframes</a></li>
</ul>
</div> </p>
</div>
<div class="container">
<div class="row">
<div class="body col-md-12 content" role="main">
<section id="mockups-with-balsamiq-wireframes">
<h1>Mockups with Balsamiq Wireframes<a class="headerlink" href="#mockups-with-balsamiq-wireframes" title="Link to this heading">¶</a></h1>
<p>This page provides a brief introduction to mockups with Balsamiq Wireframes.</p>
<section id="overview">
<h2>Overview<a class="headerlink" href="#overview" title="Link to this heading">¶</a></h2>
<p>Mockups are very useful in the early phases of software development. They can be utilised for capturing requirements as well as getting feedback from the user. Usually the focus lies
on the structure of a UI and interactions between different elements of a UI.
Mockup tools help to create mockups with different levels of detail, from a rough sketch to very detailed requirements. Balsamiq Wireframes is a mockup tool that allows you to quickly
sketch UIs. It is essentially a collection of the most commonly used widgets for a variety of UI types. The user can arrange these widgets in a drag-and-drop editor which is often
much faster than drawing a mockup by hand.</p>
<p>Balsamiq mockups always have an unfinished look and feel to them. This is actually intended for several reasons. It encourages the user to give honest feedback as they might not feel
that a lot of work has to be redone to include the suggested changes. Even more important, the mockup is not mistaken for the finished product. None will assume that it is a
screenshot of the final version and most of the code behind it already written.</p>
<p>With the cloud version of Balsamiq Wireframes several users can work together on the same mockup.</p>
</section>
<section id="first-steps-with-balsamiq-wireframes">
<h2>First steps with Balsamiq Wireframes<a class="headerlink" href="#first-steps-with-balsamiq-wireframes" title="Link to this heading">¶</a></h2>
<p>We have licenses for the cloud version of Balsamiq: <a class="reference external" href="https://balsamiq.cloud/">https://balsamiq.cloud/</a>
Please use your STFC email address to register and access the STFC space:</p>
<img alt="_images/balsamiq_cloud.png" src="_images/balsamiq_cloud.png" />
<p>Create a project by clicking the <code class="docutils literal notranslate"><span class="pre">+</span></code> (plus) in the upper left hand corner:</p>
<img alt="_images/balsamiq_new_project.png" src="_images/balsamiq_new_project.png" />
<p>The new project automatically opens within the editor with the canvas and the UI library as well as several toolbars and panels:</p>
<img alt="_images/balsamiq_ui.png" src="_images/balsamiq_ui.png" />
<p>Invite collaborators to provide feedback or even edit the wireframes of your project. Please note that Balsamiq do not charge per user so feel free to invite your stakeholders to review you mockups.</p>
<p>Projects can be downloaded as a BMPR file. Regularly backing up projects by downloading its BMPR file from the projects homepage is recommended. It is also possible to upload existing BMPR files.
Wireframes in a project can be exported to a variety of formats, for instance PDF or PNG.</p>
</section>
</section>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<ul class="nav navbar-nav" style=" float: right;">
<li>
<a href="QtDesignerForPython.html" title="Previous Chapter: Qt Designer for Python"><span class="glyphicon glyphicon-chevron-left visible-sm"></span><span class="hidden-sm hidden-tablet">« Qt Designer f...</span>
</a>
</li>
<li>
<a href="MantidUsedIconsTable.html" title="Next Chapter: Mantid Icon Table"><span class="glyphicon glyphicon-chevron-right visible-sm"></span><span class="hidden-sm hidden-tablet">Mantid Icon Table »</span>
</a>
</li>
<li><a href="#">Back to top</a></li>
</ul>
<p>
</p>
</div>
</footer>
</body>
</html>