Create a nice Web 2.0 looking GUI for a calculator tool that will be used for Stereoscopic 3D Recording (for 3D films). There exist already screenshots that show the different parts of the design needed. All of your suggestions are appreciated - I try to answer as soon as possible.
A photoshop or iIlustrator compatible file (with layers, compatible with CS1) is needed. If you like to create the design in another software (e.g. I was asked for Inkscape) you can do that of corse - as long as I can import the file format in photoshop or illustrator. If you are unsure you can just send me a testfile - no problem!
Looking forward to seeing your great designs!
About:I founded a startup to provide tools for stereoscopic 3D recording. 3DCinema is coming and I try to provide the necessary tools to make therecording of 3D content as easy as possible.
Stereoscopic Calculator:This is a tool to calculate the positions of the two cameras needed for3D recording. Depending on the set, the cameras and lenses you use, thefinal screen width in the cinema and so on, the distance (interaxial called) between the two cameras and the angle (angulation called) beween the optical axes of the cameras vary. This means the interaxial and the angulation have to be recalculated in every shot. To ease that calculation this software was written.
The software is used on a Laptop or on a handheld display with touch screen (like iphone - this will be a later development)
Your task: Ineed your graphical skills to make this calculator look nice and tomake the handling easy. The calculator will be used from creative,optical thinking film peopleso we should focus on a serious, simple,clear but nice looking design. The design should be a little liketypical Web 2.0 or the iphone designs
(a little bit with design structures and symbols like: http://www.adairsystems.com/photoca…uwodAnHxig - but you are free to make your own suggestions)
But remember that the design/software is used on a film set, where time is short and everything must be clear on one sight.
Thissoftware is used on a laptop with a mouse or on a mobile device wth atouch screen - so make the buttons large enough to be able to touch itwith your finger (see Specifications for physical screen size)
Specifications: Thesoftware is to be used on PC/Mac and alternatively on a mobile device.The size of the design in pixel must be 800 x 480 Pixel (landscapeformat preferred) - the physical size for the handheld application(mobile device) is 93,5 mm x 56 mm (diagonal 4,3"). Please rememberthis size to make the buttons large enough to be able to touch it withyour finger tips (touch screen display).
User Interface and what is has to have: Imade a couple of screenshots to make clear what we need (please use itonly as a rough idea - make your own suggestions of a composition ofthe different elements! The only thing which is a fixed number is thepixel resolution of the whole application; all other boxes, parts,pictures can be adapted to your design):
General area – shown everytime (grayarea - doesn't need to be gray in your design - feel free to make ownsuggestions - it should be good readable even on sunlight):
- Inthe upper left corner I have the name of the application "StereoscopicCalculator" - there doesn’t' exist a logo yet - maybe you have a goodsimple idea of making this name looking good (maybe with a addition:created by Florian Maier)- Settingsoverview (next to the name): this part can be located anywhere - thisis to show the user on one sight all settings without having to look atthe different (hidden) tabs – cam be located anywhere- Load and save buttons: can be located anywhere- Help, Info and Update Button: can be located anywhere- Interaxialand angulation settings: On these counters the results of thecalculations are shown. On the 3d recording device the same lookingcounters exist, where the user just transfers the values to positionthe camera. I just photographed the original counters. Please redesignthese counters to a nice looking graphic that looks similar to thephotos. - Interaxial bar: On this bar thewhole range with possible interaxials is shown (from 0 cm to 12 cm).One camera (the one for the right eye) stays at 0 cm all the time andthe other camera (for the left eye) is variable. The distance betweenthe two cameras can move from 0 cm (both cameras overlapping) to 12 cmat maximum. Depending on the values of the set, the camera and lens,the screen and so on there is an upper limit for a maximum interaxialwhich lays somewhere between 0 cm and 12 cm. The user should not exceedthe value so this range until this value is marked green and the restred. The percentage in the green bar shows how much of the possibleinteraxial is actually used. Please create a nice looking camerasymbol, that is large enough to move it by touching it with a fingertip. The two arrows on the right side should allow to move the camerastep by step by pressing the right or left button. The text on the baris just for explanation – maybe it is enough to show figures like shownin http://www.stereoscopic-calculator.…-04.jpgTab area Create nice looking tabs with a short text explanation (symbols maybe in the style of http://www.adairsystems.com/photoca…uwodAnHxig but if you have better suggestions – feel free to post it). Create acontent graphic if needed. There are six tab designs and one keypaddesign needed:
- The first tab (“set” – see http://www.stereoscopic-calculator.…-01.jpg)is for putting in values of the set for the distance of the virtualwindow (objects recorded in this area will be displayed on the surfaceof the projection screen) and the background distance – referred to the3D camera setup. Please create a graphic similar (but nicer J) to my suggestion. For the 3D Camera please use the graphics linked here: http://www.stereoscopic-calculator.…Rig_01.jpg or alternatively http://www.stereoscopic-calculator.…Rig_02.jpg . Make the field for the values (e.g. 20 m) large enough to touch it with finger tips. - The second tab (“camera” – see http://www.stereoscopic-calculator.…or-02.jpg) is for choosing the camera type. - The third tab (“lens” – see http://www.stereoscopic-calculator.…or-03.jpg) is for choosing the lens type with a choice of the focal lens. - The forth tab (“screen” – see http://www.stereoscopic-calculator.…or-04.jpg) is for choosing maximum width of the screen. Please create a graphic using a screen like in http://www.stereoscopic-calculator.…xample.jpg or any other screen as a example. If you have a better suggestion, feel free to post it here.- Prepare two additional tabs for “focus” and “logfile” - Keypad:For typing in the numbers a keypad with 12 fields (4 x 3 lines) plusdelete and ok button which is displayed either all over the screen onceyou need to type in a figure or maybe alternatively on the side insteadof the interaxial and angulation setting http://www.stereoscopic-calculator.…y.jpgIfyou have any questions or if something is unclear – please feel free topost it here. I'm looking forward to your cool designs!
Question: now you mentioned that this application needs to have a iphone like design similar to http://www.adairsystems.com/photoca…uwodAnHxig
do the elements shown in the iphone application like the : depth , flash, aperture need to be made ?
ifnot could you tell me what do the buttons need to say ? if you willhandle the text in the buttons later just let me know. should thiscomputer application have a similar design to some thing like ADOBEprogram's ?
or more like a ipod touch design ?
flooom: Thethings I like on that linked design is that it has nice looking simpleicons and that the buttons are designed with that web 2.0 look. Don’tpay too much attention to the color sheme – for my taste it’s a bit toodark with all that black.
The application will be ported to an ipone or ipod touch later – so it’s not wrong to aim a bit to that design.
Oneimportant thing is: Everything should be intuitive – you don’t have asoftware like Adobe Programs or Word or whatever with atop-dropdown-menue “file” – “edit” – “settings” – “help”… Everything isaccessible through buttons and should be self-explaining. So it’s morethe ipod touch design I would guess… (do you have a link to show meexactly what kind of design you mean?) not the old windows design –even if I work with elements like tabs, checkboxes, … look a bit on myscreenshots.
The "buttons"/pictures for the tabs, you should design,should include the pictures shown in my tabs – they need to be in twoversions – highlighted and normal… please see my screenshots…
If you have further questions feel free to contact me again…
- a clear, serious web 2.0 looking design ("look and feel" :-))
- should be reable as well in a situation where the user is in a hurry
- warm, light design (not too much black)
- gimmick-like designs
- not too colorful - make the different parts optical clear