Difference between revisions of "AppSuite:ISV Mockups Wireframes"

(→‎What´s needed to build beautiful AppSuite mockups ?)
(→‎What´s needed to build beautiful AppSuite mockups ?)
Line 39: Line 39:
 
*  Download the Open-Xchange Balsamiq Assets/Library/Samples from @FP: Describe steps for GIT download <GIT_URL>_OR_DOWNLOAD_OF_ZIP_FILE>.  
 
*  Download the Open-Xchange Balsamiq Assets/Library/Samples from @FP: Describe steps for GIT download <GIT_URL>_OR_DOWNLOAD_OF_ZIP_FILE>.  
  
−
*  Import the downloaded AppSuite assets/library into the Balsamiq application and checkout the examples, which were included.
+
*  Import the downloaded AppSuite assets/library into the Balsamiq application and use the included examples:
 +
 
  
 
  On MAC OS X / Linux / Windows
 
  On MAC OS X / Linux / Windows
  
−
 
 
  1. Checkout from GIT or download ZIP file.
 
  1. Checkout from GIT or download ZIP file.
  
Line 52: Line 52:
 
  4. "About Dialog" opens with a link to "Open Local Store Folder". Click on that link, which opens your explorer/finder application.  
 
  4. "About Dialog" opens with a link to "Open Local Store Folder". Click on that link, which opens your explorer/finder application.  
  
−
  5. Now create the required "BalsamiqMockups.cfg" file inside that directory with following content:
+
  5. Now create the required file called "BalsamiqMockups.cfg" inside that directory ("Local Store" folder) with following content. NOTE: Please change the assets path to YOUR path structure on YOUR local system.
  
 
   <config>
 
   <config>
Line 58: Line 58:
 
     <rememberWindowSize>true</rememberWindowSize>
 
     <rememberWindowSize>true</rememberWindowSize>
 
     <useCookies>true</useCookies>
 
     <useCookies>true</useCookies>
−
     <assetsPath>/Users/cutmasta/development/mockups_ox/visuals/assets</assetsPath>
+
     <assetsPath>/Users/<myuser>/Downloads/visuals/assets</assetsPath>
 
   </config>
 
   </config>
  

Revision as of 14:30, 5 February 2014

Create Open-Xchange AppSuite Mockups / Wireframes


Ox-tasks-mocukup.png


Ox-calendar.png
Ox-core.png



Why build mockups?

Many people don´t understand why they should use a mockup tool.

Here is a list of some reasons, why YOU should think about using the power of mockups:

  • It reproduces the experience of sketching on a whiteboard, but using a computer.
  • It dramatically helps to visually any kind of ideas, features of a web application. Mockups are very useful, for example in contracts, proposals, user stories or software change request forms.
  • Enhance the visibiliy of your upcoming features inside a product.
  • Iterare easily over ideas + get feedback from potential users and customers until they are ready to get implemented via the development department.


This page contains needed informations, to easily build wireframes/mockups for the Open-Xchange AppSuite application.


IMPORTANT NOTE: To build/use the mockups, which get described in this article, you need to install a 3rd party software (Balsamiq) on your local PC/Laptop. Balsamiq can be used in a trial period. Once you decide to constantly use it, you must purchase a license from their [1] website.

What´s needed to build beautiful AppSuite mockups ?

Following Steps are required, to get started to build nice mockups for AppSuite.

  • You need to install the application called Balsamiq. You can download it from: http://balsamiq.com
  • Download the Open-Xchange Balsamiq Assets/Library/Samples from @FP: Describe steps for GIT download <GIT_URL>_OR_DOWNLOAD_OF_ZIP_FILE>.
  • Import the downloaded AppSuite assets/library into the Balsamiq application and use the included examples:


On MAC OS X / Linux / Windows

1. Checkout from GIT or download ZIP file.

2. Unzip & navigate to the created directory "visuals/assets" . Remember/Copy complete local path to this directory. Example: "/Users/<myuser>/Downloads/visuals/assets"

3. Open Balsamiq Application and > open menu "Balsamiq Application" > Click "About Balsamiq Application"

4. "About Dialog" opens with a link to "Open Local Store Folder". Click on that link, which opens your explorer/finder application. 

5. Now create the required file called "BalsamiqMockups.cfg" inside that directory ("Local Store" folder) with following content. NOTE: Please change the assets path to YOUR path structure on YOUR local system.

 <config>
   <fontFace>Helvetica Neue</fontFace>
   <rememberWindowSize>true</rememberWindowSize>
   <useCookies>true</useCookies>
   <assetsPath>/Users/<myuser>/Downloads/visuals/assets</assetsPath>
 </config>



  • Let the fun begin! Start creating mockups!

General basics of Balsamiq

Best practice

Retrieved from "https://oxpedia.org/wiki/index.php?title=AppSuite:ISV_Mockups_Wireframes&oldid=16999"