Compare commits

...

14 Commits

Author SHA1 Message Date
Simon
bcad171152 Update README.md 2021-09-26 18:54:08 +00:00
Simon
2630ba0e70 Update README.md 2021-08-14 13:21:08 +00:00
Simon
ecd3791698 Update README.md 2021-08-14 12:53:23 +00:00
Simon
eb4825e735 Update README.md 2021-08-14 12:51:52 +00:00
Simon
390678a2b6 Update README.md 2021-08-14 12:50:27 +00:00
Simon
5d496ae5b6 Update README.md 2021-08-14 12:45:31 +00:00
Simon
bc781d6d5a Update README.md 2021-08-14 12:38:18 +00:00
Simon
e7df500a85 Update README.md 2021-08-14 12:36:26 +00:00
Simon
06f54b381d Update README.md
Deleted README.FR-fr.md
2021-08-14 12:35:25 +00:00
Simon
91fc103e80 Update README.md 2021-08-14 12:27:21 +00:00
Simon
ab8bd6a588 Update README.md 2021-08-14 12:21:35 +00:00
Simon
5c9ae8e435 Update README.md 2021-08-14 12:16:34 +00:00
Thoscellen
150b12d8f2 docs: 📝 Update ReadMe.md 2021-08-14 14:08:59 +02:00
Thoscellen
6df61f13eb refactor: ♻️ Cleaned unused stuff. 2021-08-14 13:36:41 +02:00
22 changed files with 33 additions and 42 deletions

View File

@ -1,26 +0,0 @@
# Open Sand Glass One
Prototype d'une apparence de *One* qui utilise le flou d'arrière plan, des jeux de transparences, des ombres et des angles arrondies, un peu a la façon d'un thème MacOS.
Le travaille vise a valoriser le thème pour renforcer le sentiment d'appropriation de l'utilisateur, et de réduire les autres décorations de l'interface afin de l'épurer et de valoriser le contenu.
![Illutration d'un fil de nouveauté sur One](public/Timeline_idle.One.v01.png)
Exemple de fil de nouveauté avec un thème *Nénuphares*. On observe l'arrière plan flou, les angles arrondies pour la pluparts des éléments et le corps de la page qui remplacent les bordures.
![Illustration d'un fil de nouveauté avec les boutons de filtrage sur One](public/Timeline_with_filter.One.v01.png)
Exemple de fil de nouveauté avec le thème *Forêt*. On observe que le système de filtrage du fil est devenue une carte et s'est développé pour faire apparaitre tout les filtres disponibles. Chaques filtres indique son status activé ou non par un code visuel utilisant un arrière plan coloré ou transparent, un texte blanc ou gris, et un contour lorsque le bouton est désactivé.
![Illustration de la page Mes Applis](public/MyApps.One.v01.png)
Exemple de page Mes Applis ave le thème *Automne*. La barre de recherche est allégée et centrée pour correspondre à la largeur de la grille des applications.
![Illutration d'un fil de nouveauté](public/Timeline_idle.Neo.v01.png)
Exemple de fil de nouveauté avec le thème Neo. Celui-ci repends certains codes modifiés pour alléger l'apparence du site.
<figure class="video_container">
<video controls="true" allowfullscreen="false" loop="true" disablePictureInPicture="true">
<source src="pub/Filter_All.one.mp4" type="video/mp4">
<a href="pub/Filter_All.one.mp4">Animation au survol de la zone de filtre</a>
</video>
</figure>
Exemple d'animation. Sur le thème One, le filtre est fortement effacée pour laisser place aux notifications. Son existance est mise en avant lorsque le curseur ou le focus est donné à l'élément pour montrer les possibilités d'interactions.

View File

@ -1,30 +1,47 @@
# Open Sand One
This is a visual rework of the One ENT website, that rely on back drop blur, opacity, shadows and border radiuses in CSS. It is mostly inspired by iOS 14 aesthetic and overrides the default website theme (via the xStyle extension)
> This repository serve resources and examples for my Behance portfolio.
This prototype is a visual overhaul of some webpage, that rely on CSS back drop blur, opacity, shadows and border radiuses. It is mostly inspired by iOS 14 aesthetic and overrides the default website theme (via the xStyle extension).
We reduced a lot of decoration to simplify the design language and emphases the content, and highlighted the website wallpaper which is customisable by a predefined selection of vector illustrations in order to enhance the feel of cosiness.
![Illustration of the Timeline webpage with the water lily theme.](public/Timeline_idle.One.v01.png)
However, we noticed that the combination of backdrop blurriness, transparency and SVG wallpapers had a huge impact on performances, including animation and scrolling. We measured that most integrated GPU where not able to render a fluid experience, especially on High DPI displays.
## Gallery
![Illustration of the Timeline webpage with the water lily theme.](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/Timeline_idle.One.v01.png)
Illustration of the Timeline webpage with the *water lily* theme. Most of the content borders has been removed, background made translucent and blurry.
![Illustration of the Timeline webpage with the Wood theme.](public/Timeline_with_filter.One.v01.png)
![Illustration of the Timeline webpage with the Wood theme.](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/Timeline_with_filter.One.v01.png)
Illustration of the Timeline webpage with the *Wood* theme. The filter list has been revamped to looks like a card when expanded and allow the toggle of switches. Each filters shows if it's activated by using a re-enforced visual code.
![Illustration of the My Apps webpage with the Fall theme.](public/MyApps.One.v01.png)
![Illustration of the My Apps webpage with the Fall theme.](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/MyApps.One.v01.png)
Illustration of the My Apps webpage with the *Fall* theme. The search bar has been lightened and justified to the width of the app grid.
![Illutration of the Timeline webpage ](public/Timeline_idle.Neo.v01.png)
Illustration of the Timeline web page for the Neo ENT. Neo has been adressed for
![Illutration of the Timeline webpage](https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/Timeline_with_filter.Neo.before.1.png)Illustration of the Timeline web page for the Neo ENT.
<figure class="video_container">
<video controls="true" allowfullscreen="false" loop="true" disablePictureInPicture="true">
<source src="public/Filter_All.one.mp4" type="video/mp4">
<a href="public/Filter_All.one.mp4">Animation au survol de la zone de filtre</a>
</video>
</figure>
Exemple d'animation. Sur le thème One, le filtre est fortement effacée pour laisser place aux notifications. Son existance est mise en avant lorsque le curseur ou le focus est donné à l'élément pour montrer les possibilités d'interactions.
![](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/Filter_All.one.mov)
Demonstration of animations of the filters card. The card expand and collapse, got a translucent background on hover, and keep it when expanded.
## Installation
1. Get the [xStyle](https://github.com/FirefoxBar/xStyle) extension on your browser. [Chrome](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj), [Firefox](https://addons.mozilla.org/firefox/addon/xstyle/)
2. Download the [xstyle.css file](https://gitlab.com/Khosmon/Open-Sand-One/-/blob/master/xstyle.css)
3. In your xStyle settings, click `Install From File` and select your downloaded file.
4. Feel free to edit the content to your wish, or reset the domain to your website.
## About
- One, the Panda logo, the Wallpapers and most of the materials are owned by ODE.
- Other content shown (like Qwant Juniors, CCN) are the propriety of their respective owners.
- All portraits and peoples are fictional or AI-generated.
- Font *Calibri* is owned by Microsoft.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 777 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 389 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 685 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 793 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 820 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.