Design Style:

[Kohze]

A page to collect the UI frameworks we can use and share screenshots of interesting references.

• currently used: http://dev.office.com/fabric#/components
• released this week: http://fluent.microsoft.com/

since the new fluent design is still close to the fabric components, we could re-create the new "fluent" design with all their features. Fluent design seems to be a mix of the apple minimalistic design and material design, which seems quite convincing.

Other react.js alternatives:

• Material UI: http://www.material-ui.com

More inspirations:

• https://site.uplabs.com/posts/c/resources/interface

[Kohze]

In case we want it to be really dynamic, this might have HomePage potential:

• https://site.uplabs.com/posts/australian-start-up-loan-comparison-calculator-ani

it would be realized with css3 animation events and probably should have some parallax sliding (from a react.js component). Instead of the waves we could display something looking like a scatter plot (with many points).

[Kohze]

Another useful UI/UX page from Apple:
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/Strategies.html#//apple_ref/doc/uid/20000957-CH19-SW1

[Kohze]

lgatto commented 2 hours ago
I am generally not too keep on Microsoft's design, I find it too edgy.

Before committing, we should probably design some mock-ups (by hand in a first instance is fine), to make sure we have the same things in mind.

[Kohze]

We probably should seperate the ui framework (like materialUI, fluent design etc.) from the mockup/structural ordering in our process, as every ui framework has in the end the same standard set of UI elements.

I will finish structural mockups by sunday, while for the design itself we need to find a well implemented design language (rather can creating our own). The advantage of those design frameworks is that they often iterated through tens to hundreds of effects for every element to create a unified experience (while we can always change parts of it).

[Kohze]

microsoft fluent design whites:
blue: #336E7B
dark blue: #34495E
yellow contrast: #F5D76E
alt conteast: #E9D460