AppSuite:ISV Mockups Wireframes - Revision history

Khgras at 09:13, 15 May 2019

2019-05-15T09:13:48Z

← Older revision		Revision as of 09:13, 15 May 2019
Line 1:		Line 1:
	The content on this page has moved to https://documentation.open-xchange.com/~~latest~~/ui/~~how-to/mockups.html~~		The content on this page has moved to https://documentation.open-xchange.com/7.10.2/ui/

	Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.		Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.

Khgras at 09:57, 22 May 2017

2017-05-22T09:57:08Z

← Older revision		Revision as of 09:57, 22 May 2017
Line 1:		Line 1:
	~~<!-- !!! -->~~		The content on this page has moved to https://documentation.open-xchange.com/latest/ui/how-to/mockups.html
	~~<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION~~: ~~wd/frontend~~/~~web~~/documentation -->
	~~<!-- !!! -->~~

	~~<div class="title">Create~~ Open-Xchange ~~App Suite Mockups / Wireframes</div>~~		Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.


	~~__TOC__~~

	~~[[File:Ox-contacts.png\|300px\|thumb\|center]]~~

	~~[[File:Ox-calendar.png\|300px\|thumb\|center]]~~

	~~[[File:Ox-core.png\|300px\|thumb\|center]]~~




	~~=== Why build mockups? ===~~

	~~Here are 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 visibility of your upcoming features inside a product / customization.
	* Iterate 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 App Suite 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 [http://balsamiq.com/products/mockups/] website.~~

	~~=== What´s needed to build beautiful App Suite mockups ? ===~~

	~~Following Steps are required, to get started to build nice mockups for App Suite.~~

	* You need to install the ~~desktop application called "Balsamiq Desktop App". You can download it from: http://balsamiq.com~~

	* Download the Open-Xchange Balsamiq Assets/Library/Samples from [[File:Ox-assets-balsamiq-7.6.2.zip]]

	* Import the downloaded App Suite assets/library into the Balsamiq application and ~~use the included examples:~~


	~~On MAC OS X / Linux / Windows~~

	~~# Checkout from GIT or download ZIP file.~~
	~~# Unzip & navigate to the created directory "assets" . Remember/Copy complete local path to~~ this ~~directory. Example: "/Users/<myuser>/Downloads/ox-assets-balsamiq/assets"~~
	~~# Open Balsamiq Application and > open menu "Balsamiq Mockups" > Click "About Balsamiq Application"~~
	~~# "About Dialog" opens with a link to "Open Local Store Folder". Click on that link, which opens your explorer/finder application.~~
	# Now create the required file called "BalsamiqMockups.cfg" inside that directory ("Local Store" folder) with following content. '''IMPORTANT''' You must change the '''assets''' path attribute to '''YOUR path''' structure on YOUR local system.
	~~<config>~~
	~~<fontFace>Helvetica Neue</fontFace>~~
	~~<rememberWindowSize>true</rememberWindowSize>~~
	~~<useCookies>true</useCookies>~~
	~~<'''assetsPath'''>/Users/<myuser>/Downloads/ox-assets-balsamiq/assets</'''assetsPath'''>~~
	~~</config>~~
	~~# Now use your explorer/finder/shell and copy all ".bmml" files from within the "visuals/assets" directory to your work/dev directory.~~
	~~# Close the Balsamiq application and reopen it. You now should see a new tab called "Account Assets" in the UI components library. All OX related components are prefixed with "ox-"~~ for ~~easy find as you type usage.~~
	~~# Go to~~ your ~~work/dev directory which contains the copied ".bmml" files. Click on one of the .bmml files. You are DONE!~~

	* Let the fun begin! Mockup as your like and save the newly created file to your work/dev directory!


	~~{{#ev:youtube\|RstDlq9X-jA}}~~

	~~==== General basics of Balsamiq ====~~

	* Working with Symbols - http://support.balsamiq.com/customer/portal/articles/110439

	* How to Use an Existing File as a Symbol in Mockups - http://support.balsamiq.com/customer/portal/articles/110439

	* Working with Text - http://support.balsamiq.com/customer/portal/articles/110121

	* Tutorials - http://support.balsamiq.com/customer/portal/topics/49503-tutorials/articles

	~~==== Common pitfalls when using Balsamiq ====~~
	* Any files stored in an subdirectory of ~~your assets folder don't show up in the 'account assets' tab within Balsamic cause currently subdirectories are ignored~~.
	* In case your assets folder only contains images the 'account assets' will not show up

Frank.paczynski at 13:40, 10 February 2016

2016-02-10T13:40:38Z

← Older revision		Revision as of 13:40, 10 February 2016
Line 1:		Line 1:
			<!-- !!! -->
			<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
			<!-- !!! -->

	<div class="title">Create Open-Xchange App Suite Mockups / Wireframes</div>		<div class="title">Create Open-Xchange App Suite Mockups / Wireframes</div>

Khgras at 08:58, 20 May 2015

2015-05-20T08:58:40Z

← Older revision		Revision as of 08:58, 20 May 2015
Line 1:		Line 1:
	<div class="title">Create Open-Xchange ~~AppSuite~~ Mockups / Wireframes</div>		<div class="title">Create Open-Xchange App Suite Mockups / Wireframes</div>


Line 23:		Line 23:


	This page contains needed informations, to easily build wireframes/mockups for the Open-Xchange ~~AppSuite~~ application.		This page contains needed informations, to easily build wireframes/mockups for the Open-Xchange App Suite 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 [http://balsamiq.com/products/mockups/] website.		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 [http://balsamiq.com/products/mockups/] website.

	=== What´s needed to build beautiful ~~AppSuite~~ mockups ? ===		=== What´s needed to build beautiful App Suite mockups ? ===

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

	* You need to install the desktop application called "Balsamiq Desktop App". You can download it from: http://balsamiq.com		* You need to install the desktop application called "Balsamiq Desktop App". You can download it from: http://balsamiq.com
Line 36:		Line 36:
	* Download the Open-Xchange Balsamiq Assets/Library/Samples from [[File:Ox-assets-balsamiq-7.6.2.zip]]		* Download the Open-Xchange Balsamiq Assets/Library/Samples from [[File:Ox-assets-balsamiq-7.6.2.zip]]

	* Import the downloaded ~~AppSuite~~ assets/library into the Balsamiq application and use the included examples:		* Import the downloaded App Suite assets/library into the Balsamiq application and use the included examples:

Cutmasta at 10:32, 10 March 2015

2015-03-10T10:32:30Z

← Older revision		Revision as of 10:32, 10 March 2015
Line 34:		Line 34:
	* You need to install the desktop application called "Balsamiq Desktop App". You can download it from: http://balsamiq.com		* You need to install the desktop application called "Balsamiq Desktop App". You can download it from: http://balsamiq.com

	* Download the Open-Xchange Balsamiq Assets/Library/Samples from [[File:Ox-assets-balsamiq-7.6.0.zip]]		* Download the Open-Xchange Balsamiq Assets/Library/Samples from [[File:Ox-assets-balsamiq-7.6.2.zip]]

	* Import the downloaded AppSuite assets/library into the Balsamiq application and use the included examples:		* Import the downloaded AppSuite assets/library into the Balsamiq application and use the included examples:

Cutmasta: Cutmasta moved page AppSuite:Mockups Wireframes to AppSuite:ISV Mockups Wireframes

2014-07-16T12:48:54Z

Cutmasta moved page AppSuite:Mockups Wireframes to AppSuite:ISV Mockups Wireframes

← Older revision

Revision as of 12:48, 16 July 2014

Cutmasta: /* What´s needed to build beautiful AppSuite mockups ? */

2014-07-08T09:05:01Z

What´s needed to build beautiful AppSuite mockups ?

← Older revision		Revision as of 09:05, 8 July 2014
Line 42:		Line 42:

	# Checkout from GIT or download ZIP file.		# Checkout from GIT or download ZIP file.
	# Unzip & navigate to the created directory "~~visuals/~~assets" . Remember/Copy complete local path to this directory. Example: "/Users/<myuser>/Downloads/~~visuals~~/assets"		# Unzip & navigate to the created directory "assets" . Remember/Copy complete local path to this directory. Example: "/Users/<myuser>/Downloads/ox-assets-balsamiq/assets"
	# Open Balsamiq Application and > open menu "Balsamiq Mockups" > Click "About Balsamiq Application"		# Open Balsamiq Application and > open menu "Balsamiq Mockups" > Click "About Balsamiq Application"
	# "About Dialog" opens with a link to "Open Local Store Folder". Click on that link, which opens your explorer/finder application.		# "About Dialog" opens with a link to "Open Local Store Folder". Click on that link, which opens your explorer/finder application.
Line 50:		Line 50:
	<rememberWindowSize>true</rememberWindowSize>		<rememberWindowSize>true</rememberWindowSize>
	<useCookies>true</useCookies>		<useCookies>true</useCookies>
	<'''assetsPath'''>/Users/<myuser>/Downloads/~~visuals~~/assets</'''assetsPath'''>		<'''assetsPath'''>/Users/<myuser>/Downloads/ox-assets-balsamiq/assets</'''assetsPath'''>
	</config>		</config>
	# Now use your explorer/finder/shell and copy all ".bmml" files from within the "visuals/assets" directory to your work/dev directory.		# Now use your explorer/finder/shell and copy all ".bmml" files from within the "visuals/assets" directory to your work/dev directory.

Cutmasta at 07:22, 8 July 2014

2014-07-08T07:22:38Z

← Older revision		Revision as of 07:22, 8 July 2014
Line 34:		Line 34:
	* You need to install the desktop application called "Balsamiq Desktop App". You can download it from: http://balsamiq.com		* You need to install the desktop application called "Balsamiq Desktop App". 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>~~.		* Download the Open-Xchange Balsamiq Assets/Library/Samples from [[File:Ox-assets-balsamiq-7.6.0.zip]]

	* Import the downloaded AppSuite assets/library into the Balsamiq application and use the included examples:		* Import the downloaded AppSuite assets/library into the Balsamiq application and use the included examples:

Cutmasta at 07:17, 8 July 2014

2014-07-08T07:17:19Z

← Older revision		Revision as of 07:17, 8 July 2014
Line 4:		Line 4:
	__TOC__		__TOC__

	[[File:Ox-~~tasks-mocukup~~.png\|300px\|thumb\|center]]		[[File:Ox-contacts.png\|300px\|thumb\|center]]

	[[File:Ox-calendar.png\|300px\|thumb\|center]]		[[File:Ox-calendar.png\|300px\|thumb\|center]]

Cutmasta: /* What´s needed to build beautiful AppSuite mockups ? */

2014-02-14T12:43:02Z

What´s needed to build beautiful AppSuite mockups ?

← Older revision		Revision as of 12:43, 14 February 2014
Line 58:		Line 58:
	* Let the fun begin! Mockup as your like and save the newly created file to your work/dev directory!		* Let the fun begin! Mockup as your like and save the newly created file to your work/dev directory!

	~~<mediaplayer>http~~:~~//www.~~youtube~~.com/watch?v=~~RstDlq9X-jA~~&</mediaplayer>~~
			{{#ev:youtube\|RstDlq9X-jA}}

	==== General basics of Balsamiq ====		==== General basics of Balsamiq ====