ODE/Lightbox-Remastered
ODE/Lightbox-Remastered
1
1
Fork 0
Code Pull Requests Releases 1 Activity

chore: Updated readme with Behance link and fresh links and demo resources.

Browse Source
This commit is contained in:
Thoscellen 2021-08-09 18:49:34 +02:00
parent 125601885d
commit a8cdb24c94
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -1,19 +1,19 @@
# Lightbox Remastered # Lightbox Remastered
Ceci est un projet sur temps personnel traduisant ma réflexion sur le redesign des lightbox utilisés dans One et Neo. Le travail aboutit sur des maquettes faites main. > This repository serve resources and examples for the [Behance showcase](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
Ce project est une maquette interactive visant à mieux définir le publicportement de la boite en fonction de regles de redimentionnements prenant en publicpte la taille d'affichage ( *Viewport* ), et les éléments contenu dans celle-ci, et adressant les problèmes actuellement rencontré à cet égards. Il sert de support de présentation. This small redesign is a personal take on lightboxes (or popins) used in One and Neo platforms. I felt the current one was in dire need of a rework and a better UI.
Par ailleurs, ce project est aussi un exercice de conception visuel et de design original et inspiré des codes de l'application One, visant a stimuler ma créativité et à me former sur les technologies du web. Cette exercice es uniquement présenté sous forme de suggestion. The project itself is a prototype in native HTML/CSS aiming to improve the box behaviour and resizing. I worked into rearranging the content panels via Flexboxs and Grids, and redefined where content could be allowed to scroll or be static. It now takes into account the viewport and the content and try to prioritize what should be resized first. I eliminated existing empties and suboptimal areas and adjusted borders and lines to create a more easy and readable component. The component have a better hierarchical reading from top to bottom and use more width.
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzNjwjB" data-preview="true" data-user="SimonPriet" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> This work allowed me to exercise on interface design and graphical design, inspired to step in the One guidelines, and improve my HTML and CSS skills. This prototype aim to suggest improvements on the product.
<span>See the Pen <a href="https://codepen.io/SimonPriet/pen/YzNjwjB">
Lightbox Remastered demo</a> by Simon (<a href="https://codepen.io/SimonPriet">@SimonPriet</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## Galeries d'images * [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/sliderjs/)
## Gallery
![Exemple de lightbox avec beaucoup de hauteur disponible](./public/readme_assets/Lightbox%201.png) ![Exemple de lightbox avec beaucoup de hauteur disponible](./public/readme_assets/Lightbox%201.png)
@ -27,7 +27,8 @@ Par ailleurs, ce project est aussi un exercice de conception visuel et de design
![Exemple de lightbox avec insuffisamment de hauteur disponible](./public/readme_assets/Lightbox%206.png) ![Exemple de lightbox avec insuffisamment de hauteur disponible](./public/readme_assets/Lightbox%206.png)
## Credits
* Polices : Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula * Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Conception : Open Digital Education * Originals Design, Assets, Codes, Graphics: Open Digital Education