Design a prototype CAD GUI layout #2BRL-CAD
Status: ClosedTime to complete: 100 hrs Mentors: Jacob B, Hardeep Singh RaiTags: graphic art, prototype, photoshop, interface, design

BRL-CAD's usability is notoriously complex and ''expert friendly''. MGED and Archer are the main geometry editors, with drastically different user interfaces.

This task involves evaluating the features provided by MGED and Archer, then designing a new GUI layout that encompasses their features while improving usability. Rationale for design decisions and layout should be provided.

References:

  • http://brlcad.org/design/gui

Provide one or more mock-up images (png, pdf, psd, html, whatever)

Search for other similar GCI tasks (look at previous years too) to avoid making a similar design. You can use any tools, but your work must be original.

Uploaded Work
File name/URLFile sizeDate submitted
mockup.png1.1 MBDecember 02 2014 17:44 UTC
full.psd1.5 MBDecember 02 2014 17:44 UTC
Comments
Marc Tannouson December 2 2014 09:04 UTCTask Claimed

I would like to work on this task.

Deepak on December 2 2014 09:07 UTCTask Assigned

This task has been assigned to Marc Tannous. You have 100 hours to complete this task, good luck!

Marc Tannouson December 2 2014 17:42 UTCProblems with past UI, my solutions

I spent a lot of time and research into this UI update, and I don't want this task to just be crossed off as "done", I want to explain my reasoning for every single change I did, and hopefully you will agree.

Inspiration



  • Adobe Photoshop CS4, CS5, CS6

  • Adobe Illustrator

  • Adobe After Effects

  • Windows 8.1

  • Sketch

  • GIMP

  • Maya


Navigation Bar ( Top )


First of all, I wanted to visibly divide this into two sections, the dropdown menus at the top and the tool bar beneath it. Did this with a 2px divider and a noticeable color change.



Then, the font had to be adjusted. The current Archer UI was not standing out to me in terms of typography, it seemed bland and basic, while best typography is the most subtle one. Therefore, I went with a font used in modern web applications, google services and even Windows 8, entitled "Open Sans". This gives the whole line a modern look while maintaining simplicity.


Added a new Archer Icon inside of this line just to be optimal, no need to have it any other place, and just went with the capital letter from the splashart I designed earlier in this contest. It's simple, integrates well with various other creative applications ( the entire Adobe suite ) and does not distract attention from the content.


After that, I took responsibility into updating Archer's icons. I saw that many participants in previous GCIs re-designed the UI, but only placed 2-3 icons and copy pasted the rest, I considered that not nice because somebody had to do the icons too, why not me? They seemed outdated and not-so-intuitive, spent a couple hours making sure that was not the case in my design. Everything is as simple as it gets, sends the message to the user and does not go out of the desired color scheme. 


Archer's tool bar was poorly designed UX-wise, as it does not even occupy half of the screen on a 1920x1080 resolution, leaving about 1000 pixels unused, which is quite a waste. After some quick research and calculations, I figured the perfect size of each icon, the margin and padding and quickly made full use of the entire area of work.


A good thing Archer's current UI does is separate the tools. After playing with it for a while, I realized that the separation is quite intuitive and decided to keep it in my design, as it seemed logical and good-looking.


Actual 3D view


Only changed the saturation to 0, wanted it on graywhite colors as this is my color scheme.


Objects/Tree


After playing around with your software, I quickly realized that objects properties could both benefit from enlarging them to full page height, while keeping the commandhistory tab on only 60% of the page's width, the user experience greatly benefits from this small improvement due to easier visibility and a more organized layout, in my opinion.


Properties


I have heavily modified what I considered the main options here, and added an RGB color picker with an idea I saw in a web designer's magazine a few months ago, 3 sliders for each of the primary colors.


Everything is as minimal and intuitive as it gets, love this part of the UI because it looks really really good.


Command


Worked hard on finding the perfect typography for this part of the project, and went with a font meant for this exact purpose, "Anonymous Pro". Color-coded errors and "completed tasks" for a better understanding ( Green symbolizes a task that has been done by the program, while red will be an error ). Love the way it looks, combines design with code quite effectively.

Sorry for this huge chunk of text, really felt that I should go a bit into detail as to why and how I did everything to give a clearer understanding of small stuff like a color or a box. I hope you find the time to read this and enjoy my work as much as I enjoyed working on it.


Regards,


Marc


 

Marc Tannouson December 2 2014 17:44 UTCReady for review

The work on this task is ready to be reviewed.

Jacob B on December 2 2014 18:13 UTCTask Closed

Congratulations, this task has been completed successfully.

Sean on December 2 2014 18:28 UTCabove and beyond

Marc, this is truly above and beyond.  How long did this take you?  Your design actually looks a LOT like one we have under development right now but haven't showcased to anyone yet. This will be very helpful for adjusting our stylistic elements with more than subjective rationale.


You went above and beyond by also creating an icon set!  As I mentioned earlier, we're going to have a number of GCI tasks added for each of our main iconography sets, so please do claim them to get credit for your efforts (and to help us manage/integrate the various aspects of design as our time permits).


Keep up the great work!