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!
Update: I copied a discussion with a designer on the end of the brief - please have a look to that...
Update2: Please have a look again to http://www.adairsystems.com/photoca…uwodAnHxig - I would like to have pictures like shown in the lower tab-bar with description text below... please serious like there not playful. Regarding the Web2.0 Style: I think design #1 is on the right way... go into the direction of http://www.stereoscopic-calculator.…sign_1.jpg - but try it as well with a blue color like #1 in the upper left corner
Update3: hi to all, thanks to all of you for your designs. This kind of designs, that were submitted so far, would be very nice for consumers but professional users (like film people - and this software is for them) may have their difficulties with it. There are too much elements that make a professional user loose focus on the important figures and they are too playful in the design. I need a really clear, serious, professional looking Web 2.0 design like shown in my example - I mean especially the buttons: http://www.stereoscopic-calculator.…sign_1.jpg. I'm thinking about splitting this competition into different competitions, like a button design competition and so on - maybe this is easier to handle for all of us... But I will wait for one day - if there is a nice design the next 24 hours, that fits my customers needs I will award this design... So good luck! I'm looking forward to seeing your designs!
Update4: I'm on a trade-fair right now (all day long even the evening) and I have only a few of hours in the night to give feedback to you. So please be patient, if you shouldn't receive your feedback as fast as I would like to give it... Sorry for any inconvenience.
Update 5: Wow, to all designers who participate: I'm really impressed by your awesome designs. Thank you all for your awesome input! Go on like this!
Update6: There are at the moment at minimum two designs that are really awesome (maybe there will be more input the next hours). I like to encourage them to go on like this - This contest will definetly end with awarding!!!
About: I founded a startup to providetools for stereoscopic 3D recording. 3D Cinema is coming and I try to providethe necessary tools to make the recording of 3D content as easy as possible.
Stereoscopic Calculator: This is a tool to calculate thepositions of the two cameras needed for 3D recording. Depending on the set, thecameras and lenses you use, the final screen width in the cinema and so on, thedistance (interaxial called) between the two cameras and the angle (angulationcalled) beween the optical axes of the cameras vary. This means the interaxialand the angulation have to be recalculated in every shot. To easethat calculation this software was written.
The software is used on aLaptop or on a handheld display with touch screen (like iphone - this will be alater development)
Your task: I need your graphical skills to makethis calculator look nice and to make the handling easy. The calculator will beused from creative, optical thinking film peopleso we should focus on aserious, simple, clear but nice looking design. The design should be a littlelike typical Web 2.0 or the iphone designs
(a little bit with designstructures and symbols like: http://www.adairsystems.com/photoca…uwodAnHxig - but you are free to make your ownsuggestions)
But remember that thedesign/software is used on a film set, where time is short and everything mustbe clear on one sight.
This software is used on alaptop with a mouse or on a mobile device wth a touch screen - so make thebuttons large enough to be able to touch it with your finger (seeSpecifications for physical screen size)
Specifications: The software is to be used on PC/Macand alternatively on a mobile device. The size of the design in pixel must be800 x 480 Pixel (landscape format preferred) - the physical size for thehandheld application (mobile device) is 93,5 mm x 56 mm (diagonal 4,3").Please remember this size to make the buttons large enough to be able to touchit with your finger tips (touch screen display).
User Interface and whatis has to have: Imade a couple of screenshots to make clear what we need (please use it only asa rough idea - make your own suggestions of a composition of the differentelements! The only thing which is a fixed number is the pixel resolution of thewhole application; all other boxes, parts, pictures can be adapted to yourdesign):
General area – showneverytime (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 good simpleidea of making this name looking good (maybe with a addition: created byFlorian Maier)- Settingsoverview (next to the name): this part can be located anywhere - this is toshow the user on one sight all settings without having to look at the different(hidden) tabs – cam be located anywhere- Loadand save buttons: can be located anywhere- Help,Info and Update Button: can be located anywhere- Interaxialand angulation settings: On these counters the results of the calculations areshown. On the 3d recording device the same looking counters exist, where theuser just transfers the values to position the camera. I just photographed theoriginal counters. Please redesign these counters to a nice looking graphicthat looks similar to the photos. - Interaxialbar: On this bar the whole range with possible interaxials is shown (from 0 cmto 12 cm). One camera (the one for the right eye) stays at 0 cm all the timeand the other camera (for the left eye) is variable. The distance between thetwo cameras can move from 0 cm (both cameras overlapping) to 12 cm at maximum. Dependingon the values of the set, the camera and lens, the screen and so on there is anupper limit for a maximum interaxial which lays somewhere between 0 cm and 12cm. The user should not exceed the value so this range until this value ismarked green and the rest red. The percentage in the green bar shows how muchof the possible interaxial is actually used. Please create a nice lookingcamera symbol, 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 camera step bystep by pressing the right or left button. The text on the bar is just forexplanation – maybe it is enough to show figures like shown in http://www.stereoscopic-calculator.…-04.jpgTab area Create nice looking tabs with a short text explanation (symbols maybein the style of http://www.adairsystems.com/photoca…uwodAnHxig – but if you have bettersuggestions – feel free to post it). Create a content graphic if needed. Thereare six tab designs and one keypad design needed:
- Thefirst tab (“set” – see http://www.stereoscopic-calculator.…-01.jpg)is for putting in values of the set for the distance of the virtual window(objects recorded in this area will be displayed on the surface of theprojection screen) and the background distance – referred to the 3D camerasetup. Please create a graphic similar (but nicer J) to my suggestion. For the 3D Camera pleaseuse the graphics linked here: http://www.stereoscopic-calculator.…g_01.jpgor alternatively http://www.stereoscopic-calculator.…Rig_02.jpg. Make the field for the values (e.g. 20 m) large enough to touch it withfinger tips. - Thesecond tab (“camera” – see http://www.stereoscopic-calculator.…-02.jpg)is for choosing the camera type. - Thethird tab (“lens” – see http://www.stereoscopic-calculator.…-03.jpg)is for choosing the lens type with a choice of the focal lens. - Theforth tab (“screen” – see http://www.stereoscopic-calculator.…-04.jpg)is for choosing maximum width of the screen. Please create a graphic using ascreen like in http://www.stereoscopic-calculator.…mple.jpgor any other screen as a example. If you have a better suggestion, feel free topost it here.- Preparetwo additional tabs for “focus” and “logfile” - Keypad:For typing in the numbers a keypad with 12 fields (4 x 3 lines) plus delete andok button which is displayed either all over the screen once you need to typein a figure or maybe alternatively on the side instead of the interaxial andangulation setting http://www.stereoscopic-calculator.…-key.jpgIf you have any questionsor if something is unclear – please feel free to post 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 ?
if not 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: The things I like on that linked design is that it has nice looking simple icons and that the buttons are designed with that web 2.0 look. Don’t pay too much attention to the color sheme – for my taste it’s a bit too dark 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.
One important thing is: Everything should be intuitive – you don’t have a software like Adobe Programs or Word or whatever with a top-dropdown-menue “file” – “edit” – “settings” – “help”… Everything is accessible through buttons and should be self-explaining. So it’s more the ipod touch design I would guess… (do you have a link to show me exactly what kind of design you mean?) not the old windows design – even if I work with elements like tabs, checkboxes, … look a bit on my screenshots.
The "buttons"/pictures for the tabs, you should design, should include the pictures shown in my tabs – they need to be in two versions – 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