https://www.uni-weimar.de/kunst-und-gestaltung/wiki/api.php?action=feedcontributions&feedformat=atom&user=MichaaMedien Wiki - User contributions [en]2026-06-10T01:57:07ZUser contributionsMediaWiki 1.39.6https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=Kinect&diff=44066Kinect2012-08-01T13:23:49Z<p>Michaa: /* Applications */</p>
<hr />
<div>The Microsoft® XBOX 360 Kinect is a motion controller. It projects a pattern with infrared light and calculates a depth image using a camera. It also has a color camera and four microphones. The Y axis of the sensor is remote controllable with an in-build motor. The color of the LED is settable by software as well.<br />
<br />
== About ==<br />
* [http://www.xbox.com/kinect official site] [http://kinectforwindows.org Kinect Windows SDK]<br />
* [[wikipedia:Kinect]]<br />
* [http://www.dailymail.co.uk/sciencetech/article-1190240/You-controller-Microsoft-unveils-Xbox-360-device-banishes-joypad-puts-player-IN-game.html www.dailymail.co.uk/sciencetech]<br />
=== Blogs and portals ===<br />
* http://www.kinecthacks.com<br />
* http://kinect.dashhacks.com<br />
* http://www.creativeapplications.net/kinect/<br />
<br />
== Software ==<br />
=== Applications ===<br />
* [http://fernlightning.com/doku.php?id=randd:kinect CocoaKinect App] (OS X) Freenect by Robert Pointon<br />
* [http://synapsekinect.tumblr.com Synapse] generates sceleton data and provides it as OSC<br />
* [https://github.com/kylemcdonald/ofxFaceTracker ofxFaceTracker] provides face metrics (orientation, eye and mouth open/closed) over OSC<br />
* [http://codelaboratories.com/kb/nui codelaboratories.com/kb/nui] Windows<br />
* [https://code.google.com/p/tuiokinect TUIO Kinect] lets you define a depth range where multiple blobs can be detected. No actual depth information can be extracted.<br />
* [http://reconstructme.net/ ReconstructMe] turns your Kinect into a 3D-Scanner<br />
* [http://kinecta.mihoo.de KinectA] is a free application by Bauhaus-Universität Alumni Michaela Honauer for motion tracking via the KinectSensor - including hand, skeleton and object tracking. Communication to other hard- and software via OSC. Currently available for Mac and Windows.<br />
* [http://rgbdtoolkit.com RGBDToolkit] Workflow for Kinect + DSLR Filmmaking<br />
<br />
=== Frameworks and Libraries ===<br />
==== Depth image ====<br />
* [http://openkinect.org openkinect.org] Drivers, Installation<br />
* [http://www.matthiaskronlachner.com/?p=299 pix_freenect] for Pd (binaries work without any compiling)<br />
* [https://github.com/badgeek/fux_kinect fux_kinect Object] for Pd<br />
* [https://github.com/ofTheo/ofxKinect ofxKinect] openFramworks Kinect integration<br />
* [http://vvvv.org/contribution/kinect vvvv kinect integration]<br />
<br />
==== Skeleton data ====<br />
* [http://www.openni.org/Downloads.aspx OpenNI]<br />
* [http://pd-la.info/kinect/kinect-mac-os-x Pd-LA: Howto install Kinect] on OS X 10.6.x<br />
* Howto install [http://kinecthesis.bakedmac.com/2011/01/11/installing-openni-kinect-drivers-and-nite-on-mac-os-x-10-6 openNI kinect drivers and NITE] on OS X 10.6<br />
* Howto install [http://www.keyboardmods.com/2010/12/howto-kinect-openninite-skeleton.html openNI kinect drivers and NITE] on gentoo Linux<br />
* [https://launchpad.net/~eighthave/+archive/openni Ubuntu PPA by Hans-Christoph Steiner] including OpenNI, OSCeleton, Primesense Kinect and NITE<br />
* [https://github.com/Sensebloom/OSCeleton OSCeleton] takes kinect skeleton data from the OpenNI framework and outputs the coordinates of the skeleton's joints via OSC messages. These can can then be used on your language / framework of choice. Needs openNI.<br />
* [https://github.com/pd-projects/pd-kinect-skeleton Pure Data patch to receive and visualize the skeleton data from osceleton] Needs OSCeleton (which needs OpenNI)<br />
* [http://pkmital.com/home/2011/01/24/streaming-motion-capture-data-from-the-kinect-using-osc-on-mac-osx how to install openNI on OS X using macports] and visualize the skeleton in Max/MSP (or Pd)<br />
* [http://mansteri.com/2011/01/osceleton-with-quartz-composer skeleton data in Quartz Composer via Max/MSP]<br />
<br />
== Running depth image and skeleton data on workstation ''Rafael'' ==<br />
Change user of the computer to admin (Apple menu: logout user/User abmelden). Make sure Kinect is connected.<br />
<br />
=== Depth image in Pd ===<br />
# open Pd<br />
# open <tt>pix_freenect-help.pd</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt><br />
# open gemwin and activate the accel toggle<br />
<br />
=== Skeleton Data in Pd ===<br />
# open the terminal and Pd<br />
# in the terminal type: <tt>cd /Volumes/Rafael\ Data\ RAID/kinect/Sensebloom-OSCeleton</tt> OR: type: <tt>cd </tt>(+ space) and drag the folder <tt>Sensebloom-OSCeleton</tt> from Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> into the terminal window<br />
# Enter. Type <tt>./osceleton</tt> (optional: If you want to change the port add: "-p" and the port number. If you want to see the picture the Kinect is tracking add: "-w"), then press enter again.<br />
# Because OSCeleton has some hiccups i recommend adding a "while true" loop to make sure it starts again when a problem appears. Makes the command: "while true; do ./osceleton; done" <br />
# open <tt>OSCeleton.pd</tt> from Folder <tt>pd-skeleton</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> with Pd<br />
<br />
[[Category:Pure Data]]<br />
[[Category:3D]]<br />
[[Category:Movement]]<br />
[[Category:Interaktion]]<br />
[[Category:Interfaces]]<br />
[[Category:Interactive]]<br />
[[Category:Max/MSP]]<br />
[[Category:Vvvv]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=Kinect&diff=40954Kinect2012-04-17T06:51:12Z<p>Michaa: /* Apps (ready to run) */</p>
<hr />
<div>The Microsoft® XBOX 360 Kinect is a motion controller. It projects a pattern with infrared light and calculates a depth image using a camera. It also has a color camera and four microphones. The Y axis of the sensor is remote controllable with an in-build motor. The color of the LED is settable by software as well.<br />
<br />
== About ==<br />
* [http://www.xbox.com/kinect official site] [http://kinectforwindows.org Kinect Windows SDK]<br />
* [[wikipedia:Kinect]]<br />
* [http://www.dailymail.co.uk/sciencetech/article-1190240/You-controller-Microsoft-unveils-Xbox-360-device-banishes-joypad-puts-player-IN-game.html www.dailymail.co.uk/sciencetech]<br />
=== Blogs and portals ===<br />
* http://www.kinecthacks.com<br />
* http://kinect.dashhacks.com<br />
* http://www.creativeapplications.net/kinect/<br />
<br />
== Software ==<br />
=== Apps (ready to run) ===<br />
* [http://fernlightning.com/doku.php?id=randd:kinect Cocoa freenect App] (OS X) by Robert Pointon<br />
* [http://synapsekinect.tumblr.com Synapse] gets the sceleton data and provides it as OSC<br />
* [https://github.com/kylemcdonald/ofxFaceTracker ofxFaceTracker] provides face metrics (orientation, eye and mouth open/closed) over OSC<br />
* [http://codelaboratories.com/kb/nui codelaboratories.com/kb/nui] Windows<br />
* [https://code.google.com/p/tuiokinect TUIO Kinect] lets you define a depth range where multiple blobs can be detected. No actual depth information can be extracted.<br />
* [http://reconstructme.net/ ReconstructMe] turns your Kinect into a 3D-Scanner<br />
* [http://www.mihoo.de/kinecta/download.html KinectA] is a free application for motion tracking via KinectSensor - including hand, skeleton and object tracking. Communication to other hard- and software via OSC. Currently available for Mac and Windows.<br />
<br />
=== Frameworks and Libraries ===<br />
==== Depth image ====<br />
* [http://openkinect.org openkinect.org] Drivers, Installation<br />
* [http://www.matthiaskronlachner.com/?p=299 pix_freenect] for Pd (binaries work without any compiling)<br />
* [https://github.com/badgeek/fux_kinect fux_kinect Object] for Pd<br />
* [https://github.com/ofTheo/ofxKinect ofxKinect] openFramworks Kinect integration<br />
* [http://vvvv.org/contribution/kinect vvvv kinect integration]<br />
<br />
==== Skeleton data ====<br />
* [http://www.openni.org/Downloads.aspx OpenNI]<br />
* [http://pd-la.info/kinect/kinect-mac-os-x Pd-LA: Howto install Kinect] on OS X 10.6.x<br />
* Howto install [http://kinecthesis.bakedmac.com/2011/01/11/installing-openni-kinect-drivers-and-nite-on-mac-os-x-10-6 openNI kinect drivers and NITE] on OS X 10.6<br />
* Howto install [http://www.keyboardmods.com/2010/12/howto-kinect-openninite-skeleton.html openNI kinect drivers and NITE] on gentoo Linux<br />
* [https://launchpad.net/~eighthave/+archive/openni Ubuntu PPA by Hans-Christoph Steiner] including OpenNI, OSCeleton, Primesense Kinect and NITE<br />
* [https://github.com/Sensebloom/OSCeleton OSCeleton] takes kinect skeleton data from the OpenNI framework and outputs the coordinates of the skeleton's joints via OSC messages. These can can then be used on your language / framework of choice. Needs openNI.<br />
* [https://github.com/pd-projects/pd-kinect-skeleton Pure Data patch to receive and visualize the skeleton data from osceleton] Needs OSCeleton (which needs OpenNI)<br />
* [http://pkmital.com/home/2011/01/24/streaming-motion-capture-data-from-the-kinect-using-osc-on-mac-osx how to install openNI on OS X using macports] and visualize the skeleton in Max/MSP (or Pd)<br />
* [http://mansteri.com/2011/01/osceleton-with-quartz-composer skeleton data in Quartz Composer via Max/MSP]<br />
<br />
== Running depth image and skeleton data on workstation ''Rafael'' ==<br />
Change user of the computer to admin (Apple menu: logout user/User abmelden). Make sure Kinect is connected.<br />
<br />
=== Depth image in Pd ===<br />
# open Pd<br />
# open <tt>pix_freenect-help.pd</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt><br />
# open gemwin and activate the accel toggle<br />
<br />
=== Skeleton Data in Pd ===<br />
# open the terminal and Pd<br />
# in the terminal type: <tt>cd /Volumes/Rafael\ Data\ RAID/kinect/Sensebloom-OSCeleton</tt> OR: type: <tt>cd </tt>(+ space) and drag the folder <tt>Sensebloom-OSCeleton</tt> from Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> into the terminal window<br />
# Enter. Type <tt>./osceleton</tt> (optional: If you want to change the port add: "-p" and the port number. If you want to see the picture the Kinect is tracking add: "-w"), then press enter again.<br />
# Because OSCeleton has some hiccups i recommend adding a "while true" loop to make sure it starts again when a problem appears. Makes the command: "while true; do ./osceleton; done" <br />
# open <tt>OSCeleton.pd</tt> from Folder <tt>pd-skeleton</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> with Pd<br />
<br />
[[Category:Pure Data]]<br />
[[Category:3D]]<br />
[[Category:Movement]]<br />
[[Category:Interaktion]]<br />
[[Category:Interfaces]]<br />
[[Category:Interactive]]<br />
[[Category:Max/MSP]]<br />
[[Category:Vvvv]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=Kinect&diff=40953Kinect2012-04-17T06:48:36Z<p>Michaa: /* Apps (ready to run) */</p>
<hr />
<div>The Microsoft® XBOX 360 Kinect is a motion controller. It projects a pattern with infrared light and calculates a depth image using a camera. It also has a color camera and four microphones. The Y axis of the sensor is remote controllable with an in-build motor. The color of the LED is settable by software as well.<br />
<br />
== About ==<br />
* [http://www.xbox.com/kinect official site] [http://kinectforwindows.org Kinect Windows SDK]<br />
* [[wikipedia:Kinect]]<br />
* [http://www.dailymail.co.uk/sciencetech/article-1190240/You-controller-Microsoft-unveils-Xbox-360-device-banishes-joypad-puts-player-IN-game.html www.dailymail.co.uk/sciencetech]<br />
=== Blogs and portals ===<br />
* http://www.kinecthacks.com<br />
* http://kinect.dashhacks.com<br />
* http://www.creativeapplications.net/kinect/<br />
<br />
== Software ==<br />
=== Apps (ready to run) ===<br />
* [http://fernlightning.com/doku.php?id=randd:kinect Cocoa freenect App] (OS X) by Robert Pointon<br />
* [http://synapsekinect.tumblr.com Synapse] gets the sceleton data and provides it as OSC<br />
* [https://github.com/kylemcdonald/ofxFaceTracker ofxFaceTracker] provides face metrics (orientation, eye and mouth open/closed) over OSC<br />
* [http://codelaboratories.com/kb/nui codelaboratories.com/kb/nui] Windows<br />
* [https://code.google.com/p/tuiokinect TUIO Kinect] lets you define a depth range where multiple blobs can be detected. No actual depth information can be extracted.<br />
* [http://reconstructme.net/ ReconstructMe] turns your Kinect into a 3D-Scanner<br />
* [http://www.mihoo.de/kinecta/download.html] KinectA is an application for motion tracking via KinectSensor - including hand, skeleton and object tracking. Communication to other hard- and software via OSC.<br />
<br />
=== Frameworks and Libraries ===<br />
==== Depth image ====<br />
* [http://openkinect.org openkinect.org] Drivers, Installation<br />
* [http://www.matthiaskronlachner.com/?p=299 pix_freenect] for Pd (binaries work without any compiling)<br />
* [https://github.com/badgeek/fux_kinect fux_kinect Object] for Pd<br />
* [https://github.com/ofTheo/ofxKinect ofxKinect] openFramworks Kinect integration<br />
* [http://vvvv.org/contribution/kinect vvvv kinect integration]<br />
<br />
==== Skeleton data ====<br />
* [http://www.openni.org/Downloads.aspx OpenNI]<br />
* [http://pd-la.info/kinect/kinect-mac-os-x Pd-LA: Howto install Kinect] on OS X 10.6.x<br />
* Howto install [http://kinecthesis.bakedmac.com/2011/01/11/installing-openni-kinect-drivers-and-nite-on-mac-os-x-10-6 openNI kinect drivers and NITE] on OS X 10.6<br />
* Howto install [http://www.keyboardmods.com/2010/12/howto-kinect-openninite-skeleton.html openNI kinect drivers and NITE] on gentoo Linux<br />
* [https://launchpad.net/~eighthave/+archive/openni Ubuntu PPA by Hans-Christoph Steiner] including OpenNI, OSCeleton, Primesense Kinect and NITE<br />
* [https://github.com/Sensebloom/OSCeleton OSCeleton] takes kinect skeleton data from the OpenNI framework and outputs the coordinates of the skeleton's joints via OSC messages. These can can then be used on your language / framework of choice. Needs openNI.<br />
* [https://github.com/pd-projects/pd-kinect-skeleton Pure Data patch to receive and visualize the skeleton data from osceleton] Needs OSCeleton (which needs OpenNI)<br />
* [http://pkmital.com/home/2011/01/24/streaming-motion-capture-data-from-the-kinect-using-osc-on-mac-osx how to install openNI on OS X using macports] and visualize the skeleton in Max/MSP (or Pd)<br />
* [http://mansteri.com/2011/01/osceleton-with-quartz-composer skeleton data in Quartz Composer via Max/MSP]<br />
<br />
== Running depth image and skeleton data on workstation ''Rafael'' ==<br />
Change user of the computer to admin (Apple menu: logout user/User abmelden). Make sure Kinect is connected.<br />
<br />
=== Depth image in Pd ===<br />
# open Pd<br />
# open <tt>pix_freenect-help.pd</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt><br />
# open gemwin and activate the accel toggle<br />
<br />
=== Skeleton Data in Pd ===<br />
# open the terminal and Pd<br />
# in the terminal type: <tt>cd /Volumes/Rafael\ Data\ RAID/kinect/Sensebloom-OSCeleton</tt> OR: type: <tt>cd </tt>(+ space) and drag the folder <tt>Sensebloom-OSCeleton</tt> from Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> into the terminal window<br />
# Enter. Type <tt>./osceleton</tt> (optional: If you want to change the port add: "-p" and the port number. If you want to see the picture the Kinect is tracking add: "-w"), then press enter again.<br />
# Because OSCeleton has some hiccups i recommend adding a "while true" loop to make sure it starts again when a problem appears. Makes the command: "while true; do ./osceleton; done" <br />
# open <tt>OSCeleton.pd</tt> from Folder <tt>pd-skeleton</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> with Pd<br />
<br />
[[Category:Pure Data]]<br />
[[Category:3D]]<br />
[[Category:Movement]]<br />
[[Category:Interaktion]]<br />
[[Category:Interfaces]]<br />
[[Category:Interactive]]<br />
[[Category:Max/MSP]]<br />
[[Category:Vvvv]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=Kinect&diff=40899Kinect2012-04-15T16:25:36Z<p>Michaa: /* Apps (ready to run) */</p>
<hr />
<div>The Microsoft® XBOX 360 Kinect is a motion controller. It projects a pattern with infrared light and calculates a depth image using a camera. It also has a color camera and four microphones. The Y axis of the sensor is remote controllable with an in-build motor. The color of the LED is settable by software as well.<br />
<br />
== About ==<br />
* [http://www.xbox.com/kinect official site] [http://kinectforwindows.org Kinect Windows SDK]<br />
* [[wikipedia:Kinect]]<br />
* [http://www.dailymail.co.uk/sciencetech/article-1190240/You-controller-Microsoft-unveils-Xbox-360-device-banishes-joypad-puts-player-IN-game.html www.dailymail.co.uk/sciencetech]<br />
=== Blogs and portals ===<br />
* http://www.kinecthacks.com<br />
* http://kinect.dashhacks.com<br />
* http://www.creativeapplications.net/kinect/<br />
<br />
== Software ==<br />
=== Apps (ready to run) ===<br />
* [http://fernlightning.com/doku.php?id=randd:kinect Cocoa freenect App] (OS X) by Robert Pointon<br />
* [http://synapsekinect.tumblr.com Synapse] gets the sceleton data and provides it as OSC<br />
* [https://github.com/kylemcdonald/ofxFaceTracker ofxFaceTracker] provides face metrics (orientation, eye and mouth open/closed) over OSC<br />
* [http://codelaboratories.com/kb/nui codelaboratories.com/kb/nui] Windows<br />
* [https://code.google.com/p/tuiokinect TUIO Kinect] lets you define a depth range where multiple blobs can be detected. No actual depth information can be extracted.<br />
* [http://reconstructme.net/ ReconstructMe] turns your Kinect into a 3D-Scanner<br />
<br />
=== Frameworks and Libraries ===<br />
==== Depth image ====<br />
* [http://openkinect.org openkinect.org] Drivers, Installation<br />
* [http://www.matthiaskronlachner.com/?p=299 pix_freenect] for Pd (binaries work without any compiling)<br />
* [https://github.com/badgeek/fux_kinect fux_kinect Object] for Pd<br />
* [https://github.com/ofTheo/ofxKinect ofxKinect] openFramworks Kinect integration<br />
* [http://vvvv.org/contribution/kinect vvvv kinect integration]<br />
<br />
==== Skeleton data ====<br />
* [http://www.openni.org/Downloads.aspx OpenNI]<br />
* [http://pd-la.info/kinect/kinect-mac-os-x Pd-LA: Howto install Kinect] on OS X 10.6.x<br />
* Howto install [http://kinecthesis.bakedmac.com/2011/01/11/installing-openni-kinect-drivers-and-nite-on-mac-os-x-10-6 openNI kinect drivers and NITE] on OS X 10.6<br />
* Howto install [http://www.keyboardmods.com/2010/12/howto-kinect-openninite-skeleton.html openNI kinect drivers and NITE] on gentoo Linux<br />
* [https://launchpad.net/~eighthave/+archive/openni Ubuntu PPA by Hans-Christoph Steiner] including OpenNI, OSCeleton, Primesense Kinect and NITE<br />
* [https://github.com/Sensebloom/OSCeleton OSCeleton] takes kinect skeleton data from the OpenNI framework and outputs the coordinates of the skeleton's joints via OSC messages. These can can then be used on your language / framework of choice. Needs openNI.<br />
* [https://github.com/pd-projects/pd-kinect-skeleton Pure Data patch to receive and visualize the skeleton data from osceleton] Needs OSCeleton (which needs OpenNI)<br />
* [http://pkmital.com/home/2011/01/24/streaming-motion-capture-data-from-the-kinect-using-osc-on-mac-osx how to install openNI on OS X using macports] and visualize the skeleton in Max/MSP (or Pd)<br />
* [http://mansteri.com/2011/01/osceleton-with-quartz-composer skeleton data in Quartz Composer via Max/MSP]<br />
<br />
== Running depth image and skeleton data on workstation ''Rafael'' ==<br />
Change user of the computer to admin (Apple menu: logout user/User abmelden). Make sure Kinect is connected.<br />
<br />
=== Depth image in Pd ===<br />
# open Pd<br />
# open <tt>pix_freenect-help.pd</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt><br />
# open gemwin and activate the accel toggle<br />
<br />
=== Skeleton Data in Pd ===<br />
# open the terminal and Pd<br />
# in the terminal type: <tt>cd /Volumes/Rafael\ Data\ RAID/kinect/Sensebloom-OSCeleton</tt> OR: type: <tt>cd </tt>(+ space) and drag the folder <tt>Sensebloom-OSCeleton</tt> from Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> into the terminal window<br />
# Enter. Type <tt>./osceleton</tt> (optional: If you want to change the port add: "-p" and the port number. If you want to see the picture the Kinect is tracking add: "-w"), then press enter again.<br />
# Because OSCeleton has some hiccups i recommend adding a "while true" loop to make sure it starts again when a problem appears. Makes the command: "while true; do ./osceleton; done" <br />
# open <tt>OSCeleton.pd</tt> from Folder <tt>pd-skeleton</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> with Pd<br />
<br />
[[Category:Pure Data]]<br />
[[Category:3D]]<br />
[[Category:Movement]]<br />
[[Category:Interaktion]]<br />
[[Category:Interfaces]]<br />
[[Category:Interactive]]<br />
[[Category:Max/MSP]]<br />
[[Category:Vvvv]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=Kinect&diff=40898Kinect2012-04-15T16:25:17Z<p>Michaa: /* Apps (ready to run) */</p>
<hr />
<div>The Microsoft® XBOX 360 Kinect is a motion controller. It projects a pattern with infrared light and calculates a depth image using a camera. It also has a color camera and four microphones. The Y axis of the sensor is remote controllable with an in-build motor. The color of the LED is settable by software as well.<br />
<br />
== About ==<br />
* [http://www.xbox.com/kinect official site] [http://kinectforwindows.org Kinect Windows SDK]<br />
* [[wikipedia:Kinect]]<br />
* [http://www.dailymail.co.uk/sciencetech/article-1190240/You-controller-Microsoft-unveils-Xbox-360-device-banishes-joypad-puts-player-IN-game.html www.dailymail.co.uk/sciencetech]<br />
=== Blogs and portals ===<br />
* http://www.kinecthacks.com<br />
* http://kinect.dashhacks.com<br />
* http://www.creativeapplications.net/kinect/<br />
<br />
== Software ==<br />
=== Apps (ready to run) ===<br />
* [http://fernlightning.com/doku.php?id=randd:kinect Cocoa freenect App] (OS X) by Robert Pointon<br />
* [http://synapsekinect.tumblr.com Synapse] gets the sceleton data and provides it as OSC<br />
* [https://github.com/kylemcdonald/ofxFaceTracker ofxFaceTracker] provides face metrics (orientation, eye and mouth open/closed) over OSC<br />
* [http://codelaboratories.com/kb/nui codelaboratories.com/kb/nui] Windows<br />
* [https://code.google.com/p/tuiokinect TUIO Kinect] lets you define a depth range where multiple blobs can be detected. No actual depth information can be extracted.<br />
* [http://reconstructme.net/ ReconstructMe] turns your Kinect into a 3D-Scanner<br />
<br />
*<br />
<br />
=== Frameworks and Libraries ===<br />
==== Depth image ====<br />
* [http://openkinect.org openkinect.org] Drivers, Installation<br />
* [http://www.matthiaskronlachner.com/?p=299 pix_freenect] for Pd (binaries work without any compiling)<br />
* [https://github.com/badgeek/fux_kinect fux_kinect Object] for Pd<br />
* [https://github.com/ofTheo/ofxKinect ofxKinect] openFramworks Kinect integration<br />
* [http://vvvv.org/contribution/kinect vvvv kinect integration]<br />
<br />
==== Skeleton data ====<br />
* [http://www.openni.org/Downloads.aspx OpenNI]<br />
* [http://pd-la.info/kinect/kinect-mac-os-x Pd-LA: Howto install Kinect] on OS X 10.6.x<br />
* Howto install [http://kinecthesis.bakedmac.com/2011/01/11/installing-openni-kinect-drivers-and-nite-on-mac-os-x-10-6 openNI kinect drivers and NITE] on OS X 10.6<br />
* Howto install [http://www.keyboardmods.com/2010/12/howto-kinect-openninite-skeleton.html openNI kinect drivers and NITE] on gentoo Linux<br />
* [https://launchpad.net/~eighthave/+archive/openni Ubuntu PPA by Hans-Christoph Steiner] including OpenNI, OSCeleton, Primesense Kinect and NITE<br />
* [https://github.com/Sensebloom/OSCeleton OSCeleton] takes kinect skeleton data from the OpenNI framework and outputs the coordinates of the skeleton's joints via OSC messages. These can can then be used on your language / framework of choice. Needs openNI.<br />
* [https://github.com/pd-projects/pd-kinect-skeleton Pure Data patch to receive and visualize the skeleton data from osceleton] Needs OSCeleton (which needs OpenNI)<br />
* [http://pkmital.com/home/2011/01/24/streaming-motion-capture-data-from-the-kinect-using-osc-on-mac-osx how to install openNI on OS X using macports] and visualize the skeleton in Max/MSP (or Pd)<br />
* [http://mansteri.com/2011/01/osceleton-with-quartz-composer skeleton data in Quartz Composer via Max/MSP]<br />
<br />
== Running depth image and skeleton data on workstation ''Rafael'' ==<br />
Change user of the computer to admin (Apple menu: logout user/User abmelden). Make sure Kinect is connected.<br />
<br />
=== Depth image in Pd ===<br />
# open Pd<br />
# open <tt>pix_freenect-help.pd</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt><br />
# open gemwin and activate the accel toggle<br />
<br />
=== Skeleton Data in Pd ===<br />
# open the terminal and Pd<br />
# in the terminal type: <tt>cd /Volumes/Rafael\ Data\ RAID/kinect/Sensebloom-OSCeleton</tt> OR: type: <tt>cd </tt>(+ space) and drag the folder <tt>Sensebloom-OSCeleton</tt> from Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> into the terminal window<br />
# Enter. Type <tt>./osceleton</tt> (optional: If you want to change the port add: "-p" and the port number. If you want to see the picture the Kinect is tracking add: "-w"), then press enter again.<br />
# Because OSCeleton has some hiccups i recommend adding a "while true" loop to make sure it starts again when a problem appears. Makes the command: "while true; do ./osceleton; done" <br />
# open <tt>OSCeleton.pd</tt> from Folder <tt>pd-skeleton</tt> in Folder <tt>kinect</tt> on harddrive <tt>Rafael Data RAID</tt> with Pd<br />
<br />
[[Category:Pure Data]]<br />
[[Category:3D]]<br />
[[Category:Movement]]<br />
[[Category:Interaktion]]<br />
[[Category:Interfaces]]<br />
[[Category:Interactive]]<br />
[[Category:Max/MSP]]<br />
[[Category:Vvvv]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31362IFD:IOSDev/Projects/Michaela2011-08-07T18:50:08Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]<br />
<br />
<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. <br />
<br />
Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is mostly a company that is primarily specializing in concerns of the mobile web. They direct a heavy expertise of mobile software & hardware as well as mobile usability. Currently a quick & high divided developement underlies the age of the mobile technology. The cooperation with such external services ensures that the e-shop always offers up-to-date mobile content.<br />
<br />
Finally the request of a mobile device to the URL of an e-shop enables the application framework to chek out its technical relevant information. As you can see in the figure, the redirection to the mobile page passes the management service & the mobile content can be processed back to the requesting device.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31361IFD:IOSDev/Projects/Michaela2011-08-07T18:48:33Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]<br />
<br />
<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. <br />
<br />
Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is mostly a company that is primarily specializing in concerns of the mobile web. They direct a heavy expertise of mobile software & hardware as well as mobile usability. Currently a quick & high divided developement underlies the age of the mobile technology. The cooperation with such external services ensures that the e-shop always offers up-to-date mobile content.<br />
<br />
Finally the request of a mobile device to the URL of an e-shop enables the application framework to chek out the relevant technical information. As you can see in the figure, the redirection to the mobile page passes the management service & the mobile content can be processed back to the requesting device.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31360IFD:IOSDev/Projects/Michaela2011-08-07T18:48:09Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. <br />
<br />
Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is mostly a company that is primarily specializing in concerns of the mobile web. They direct a heavy expertise of mobile software & hardware as well as mobile usability. Currently a quick & high divided developement underlies the age of the mobile technology. The cooperation with such external services ensures that the e-shop always offers up-to-date mobile content.<br />
<br />
Finally the request of a mobile device to the URL of an e-shop enables the application framework to chek out the relevant technical information. As you can see in the figure, the redirection to the mobile page passes the management service & the mobile content can be processed back to the requesting device.<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31359IFD:IOSDev/Projects/Michaela2011-08-07T18:47:51Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. <br />
<br />
Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is mostly a company that is primarily specializing in concerns of the mobile web. They direct a heavy expertise of mobile software & hardware as well as mobile usability. Currently a quick & high divided developement underlies the age of the mobile technology. The cooperation with such external services ensures that the e-shop always offers up-to-date mobile content.<br />
<br />
Finally the request of a mobile device to the URL of an e-shop enables the application framework to chek out the relevant technical information. As you can see in the figure, the redirection to the mobile page passes the management service & the mobile content can be processed back to the requesting device.<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31339IFD:IOSDev/Projects/Michaela2011-08-07T13:50:25Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. <br />
<br />
Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is mostly a company that is primarily specializing in concerns of the mobile web. They direct a heavy expertise of mobile software & hardware as well as mobile usability. Currently a quick & high divided developement underlies the age of mobile technology. The cooperation with external services ensures that the e-shop always offers up-to-date mobile content.<br />
<br />
Finally the request of a mobile device to the URL of an e-shop enables the application framework to chek out the relevant technical information specific type of that device as well as... In the right figure... t.b.d.<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31338IFD:IOSDev/Projects/Michaela2011-08-07T13:43:16Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. <br />
Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is mostly a company that is primarily specializing in concerns of the mobile web. They direct a heavy expertise of mobile software & hardware as well as mobile usability. Currently a quick & high divided developement underlies the age of mobile technology. The cooperation with external service ensures that the e-shop always offers up-to-date mobile content.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=31337IFD:IOSDev/Projects/Michaela2011-08-07T13:26:25Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|right|thumb|300px|The Process of a Mobile Request]]<br />
The setup of the visual interface has to be implemented via the application framework of the specific e-shop software. Therefore the application framework provides a so called mobile application programming interface (short: mobile API). This mobile API threads the necessary content information for every single request of a mobile device. A markup language (e.g. HTML5) predefines the layout of the requested mobile page. Furthermore, this mobile API enables an external management service to finally configure the mobile content. Such an external service is needed for the</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30934IFD:IOSDev/Projects/Michaela2011-08-02T07:51:39Z<p>Michaa: /* Introduction */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. These two app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|left|thumb|300px|The Process of a Mobile Request]]<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30853IFD:IOSDev/Projects/Michaela2011-08-01T15:01:27Z<p>Michaa: /* Technical Realization */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
[[Image:Process-of-a-mobile-request.jpg|left|thumb|300px|The Process of a Mobile Request]]<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Process-of-a-mobile-request.jpg&diff=30852File:Process-of-a-mobile-request.jpg2011-08-01T14:58:29Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30851IFD:IOSDev/Projects/Michaela2011-08-01T14:46:21Z<p>Michaa: /* First Mockup */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image online in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30815IFD:IOSDev/Projects/Michaela2011-08-01T08:13:31Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery widths="200px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30814IFD:IOSDev/Projects/Michaela2011-08-01T08:13:02Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this style guide.<br />
<br />
You can get some more impressions via these excerpts of my style guide:<br />
<br />
<gallery perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30813IFD:IOSDev/Projects/Michaela2011-08-01T08:11:39Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, Colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
<br />
<gallery widths="150px" perrow="5"><br />
File:Auszug-Styleguide-S02.jpg|Content<br />
File:Auszug-Styleguide-S05.jpg|Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Colours<br />
File:Auszug-Styleguide-S07.jpg|Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30812IFD:IOSDev/Projects/Michaela2011-08-01T08:10:09Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, Colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:Auszug-Styleguide-S02.jpg|Excerpt - Content<br />
File:Auszug-Styleguide-S05.jpg|Excerpt - Main Grid<br />
File:Auszug-Styleguide-S06.jpg|Excerpt - Colours<br />
File:Auszug-Styleguide-S07.jpg|Excerpt - Font Sizes<br />
File:Auszug-Styleguide-S09.jpg|Excerpt - Usage of Fonts 01<br />
File:Auszug-Styleguide-S11.jpg|Excerpt - Usage of Fonts 02<br />
File:Auszug-Styleguide-S17.jpg|Excerpt - Buttons & Links<br />
File:Auszug-Styleguide-S19.jpg|Excerpt - Dimensions of Images<br />
File:Auszug-Styleguide-S21.jpg|Excerpt - Dimensions of Layers<br />
File:Auszug-Styleguide-S24.jpg|Excerpt - Dimensions of Home Screenshots<br />
</gallery><br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S24.jpg&diff=30811File:Auszug-Styleguide-S24.jpg2011-08-01T07:51:35Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S21.jpg&diff=30810File:Auszug-Styleguide-S21.jpg2011-08-01T07:51:13Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S19.jpg&diff=30809File:Auszug-Styleguide-S19.jpg2011-08-01T07:50:41Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S17.jpg&diff=30808File:Auszug-Styleguide-S17.jpg2011-08-01T07:50:10Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S11.jpg&diff=30807File:Auszug-Styleguide-S11.jpg2011-08-01T07:49:42Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S09.jpg&diff=30806File:Auszug-Styleguide-S09.jpg2011-08-01T07:49:15Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S07.jpg&diff=30805File:Auszug-Styleguide-S07.jpg2011-08-01T07:48:49Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S06.jpg&diff=30804File:Auszug-Styleguide-S06.jpg2011-08-01T07:48:28Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S05.jpg&diff=30803File:Auszug-Styleguide-S05.jpg2011-08-01T07:48:03Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Auszug-Styleguide-S02.jpg&diff=30802File:Auszug-Styleguide-S02.jpg2011-08-01T07:45:58Z<p>Michaa: </p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30735IFD:IOSDev/Projects/Michaela2011-07-30T14:29:05Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all design elements. For instance, Colours are defined by hexa values & font sizes are defined by relative dimensions. Additionally, all dimensions & conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30734IFD:IOSDev/Projects/Michaela2011-07-30T14:27:36Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The style guide is supposed to exactly indicate all the design elements. For instance, Colours are defined by hexa values and font sizes are defined by relative dimensions. Additionally, all dimensions and conditions of icons, images, buttons, headlines, text sections, form fields, layers or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30733IFD:IOSDev/Projects/Michaela2011-07-30T14:24:23Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
In the next step I summarize all applied design rules as a guideline for my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The styleguide is supposed to exactly indicate all the design elements. For instance, Colours are defined by hexa values and font sizes are defined by relative dimensions. Furthermore, all dimensions of icons, images, buttons, form fields, layers or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30732IFD:IOSDev/Projects/Michaela2011-07-30T14:17:26Z<p>Michaa: /* Style Guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The styleguide is supposed to exactly indicate all the design elements. For instance, Colours are defined by hexa values and font sizes are defined by relative dimensions. Furthermore, all dimensions of icons, images, buttons, form fields, layers or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30731IFD:IOSDev/Projects/Michaela2011-07-30T14:15:45Z<p>Michaa: /* Style guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style Guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The styleguide is supposed to exactly indicate all the design elements. For instance, Colours are defined by hexa values and font sizes are defined by relative dimensions. Furthermore, all dimensions of icons, images, buttons, form fields or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30730IFD:IOSDev/Projects/Michaela2011-07-30T14:15:08Z<p>Michaa: /* Style guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The styleguide is supposed to exactly indicate all the design elements. For instance, Colours are defined by hexa values and font sizes are defined by relative dimensions. Furthermore, all dimensions of icons, images, buttons, form fields or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30729IFD:IOSDev/Projects/Michaela2011-07-30T14:13:59Z<p>Michaa: /* Style guide */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
Every single design element needs its own special definition in order to get constructed in the following process of technical implementation. The styleguide is supposed to exactly indicate all the design elements. For instance, Colours are defined by hexa values and font sizes are defined by relative dimensions. Furthermore, all dimensions of icons, images, buttons, form fields or even list elements are given in this styleguide.<br />
<br />
You can get some more impressions via these extracts of my styleguide:<br />
(t.b.d.)<br />
<br />
<br />
==Technical Realization==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=30728IFD:IOSDev/Projects/Michaela2011-07-30T13:07:37Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elements which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:17_payment_method_overview.jpg&diff=29367File:17 payment method overview.jpg2011-07-04T09:05:38Z<p>Michaa: uploaded a new version of &quot;File:17 payment method overview.jpg&quot;</p>
<hr />
<div>== Summary ==<br />
<br />
== Copyright status: ==<br />
<br />
== Licensing ==<br />
{{self|c}}<br />
== Source: ==</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29353IFD:IOSDev/Projects/Michaela2011-07-02T18:01:57Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29352IFD:IOSDev/Projects/Michaela2011-07-02T18:01:28Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="200px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29351IFD:IOSDev/Projects/Michaela2011-07-02T18:00:47Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery heights="100px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart (SC): Overview<br />
File:11_basket_edit_item.jpg|SC: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|SC: Remove an Item<br />
File:13_basket_adress_overview.jpg|SC: Adress Overview<br />
File:14_basket_new_adress.jpg|SC: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|SC: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|SC: Select a Payment Method<br />
File:17_payment_method_overview.jpg|SC: Modify a Payment Method<br />
File:18_checkout_review.jpg|SC: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29348IFD:IOSDev/Projects/Michaela2011-07-02T17:54:35Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29345IFD:IOSDev/Projects/Michaela2011-07-02T17:53:49Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery heights="100px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29344IFD:IOSDev/Projects/Michaela2011-07-02T17:53:02Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery widths="50px" perrow="6"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29343IFD:IOSDev/Projects/Michaela2011-07-02T17:51:50Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery caption="PrimeTech Gallery" widths="75px" heights="100px" perrow="3"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29338IFD:IOSDev/Projects/Michaela2011-07-02T17:44:35Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
After reflecting the first mockup & resolving some non-functional design elemnts - these are my final designs for the mobile shop:<br />
<br />
<gallery heights="100px"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.<br />
<br />
In the next step I develop a style-guide. This should support the technical realization of my visual concept.<br />
<br />
<br />
==Style guide==<br />
<br />
t.b.d.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29337IFD:IOSDev/Projects/Michaela2011-07-02T17:38:00Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
These are my final designs for the mobile shop:<br />
<br />
<gallery widths="50px"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29336IFD:IOSDev/Projects/Michaela2011-07-02T17:37:29Z<p>Michaa: /* Specified Design */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
These are my final designs for the mobile shop:<br />
<br />
<gallery widths="150px"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.</div>Michaahttps://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:IOSDev/Projects/Michaela&diff=29335IFD:IOSDev/Projects/Michaela2011-07-02T17:36:32Z<p>Michaa: /* First Mockup */</p>
<hr />
<div>==Introduction==<br />
<br />
The mobile age is as well a challenge for commercial websites to provide e.g. an e-shop running compatible on different mobile devices. See also [[wikipedia:M-commerce]] ! <br />
<br />
Retailers are faced with a wide range of various hardware & software conditions. First of all, they have to decide between web or native applications. All these app types keep different advantages & disadvantages. A native shopping app is on the one hand more expansive to build up than a web shopping app. On the other hand a native app allows to use more features of a given device in comparison to a web app. A web app is platform indepentent but mostly doesn't ensure such a high user expierence like a native app.<br />
<br />
Online retailers have to managage a huge amount of data (product catalogues, customers's information, supplier specificatons etc.) via their shop software. Additionally, they have to assure the security of all electronically safed data. This has to be valid for their mobile applications, too.<br />
<br />
==The task: Creating a Web App==<br />
<br />
A web app is mostly created with HTML5, CSS3 & Java Script. And it's executed trough a mobile browser. See also [[wikipedia:Web app]] & Jonathan Stark, O'Reilly: Building iPhone Apps with HTML, CSS, and JavaScript ISBN 9780596805784 !<br />
<br />
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well.<br />
<br />
==First Mockup==<br />
<br />
<gallery heights="150px"><br />
File:Entwurf_02a.jpg|Screenshot 01<br />
File:Entwurf_02b.jpg|Screenshot 02<br />
File:Entwurf_02c.jpg|Screenshot 03<br />
File:Entwurf_02d.jpg|Screenshot 04<br />
</gallery><br />
<br />
After creating a first visual layout I've uploaded and fitted a simple image oline in order to get a first impression over an iPhone. I discussed this first result with several people. My discussion criterias concerned particularly the following questions:<br />
*Is the concept of a fixed header & footer useful? <br />
*Are the sizes of fonts, images or icons visible for all users (as well for people who wear glasses)?<br />
*Are all interactive elements easily clickable for everyone?<br />
*Are pictures, icons, colours or even gradients adequate presented & rich in contrast, hue & saturation?<br />
<br />
==Specified Design==<br />
<br />
These are my final designs for the mobile shop:<br />
<br />
<gallery heights="150px"><br />
File:01_home.jpg|Home (Portrait)<br />
File:02_home_landscape.jpg|Home (Landscape)<br />
File:03_category_list.jpg|Category List<br />
File:04_product_list.jpg|Product List (Portrait)<br />
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape)<br />
File:06_filter_list.jpg|Filter Products<br />
File:07_sort_list.jpg|Sort Product List or Gallery<br />
File:08_product_detail.jpg|Product Detail<br />
File:09_product_detail_images.jpg|Product Detail: Images<br />
File:10_basket_overview.jpg|Shopping Cart: Overview<br />
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item<br />
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item<br />
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview<br />
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress<br />
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error)<br />
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method<br />
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method<br />
File:18_checkout_review.jpg|Shopping Cart: Checkout Review<br />
</gallery><br />
<br />
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface.</div>Michaa