SpatialMap / SpatialMapDev

MIT License
3 stars 2 forks source link

Design Style: #1

Open Kohze opened 7 years ago

Kohze commented 7 years ago

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

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:

More inspirations:

Kohze commented 7 years ago

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

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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