Lightbox-Remastered

Go to file

2021-08-10 12:04:49 +00:00

ci: ♻️ Moved out main code (css, assets and html) to the home repo to make it more accessible. Edited the pipeline to move them in public for Pages.

2021-08-09 17:58:14 +02:00

lightbox-demo.html

ci: ♻️ Moved out main code (css, assets and html) to the home repo to make it more accessible. Edited the pipeline to move them in public for Pages.

2021-08-09 17:58:14 +02:00

main.css

ci: ♻️ Moved out main code (css, assets and html) to the home repo to make it more accessible. Edited the pipeline to move them in public for Pages.

2021-08-09 17:58:14 +02:00

README.md

Update README.md

2021-08-10 12:04:49 +00:00

README.md

This repository serve resources and examples for my Behance portfolio.

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.

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.

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.

Interactive showcase
On Firefox, you can use the Adaptative View (Ctrl / Cmd + Shift + M) to resize it freely.
Before/After comparison

Gallery

Credits

Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
Originals Design, Assets, Codes, Graphics: Open Digital Education

README.md

Lightbox Remastered

Gallery

Credits