h7lyx.com/
...
UI/UX
UI/UX or User Interface & User Experience in full is the second roadmap project.
Since it is important for my collage assignments to be well documented,
I wanted to develop a website of high quality for this documentation.
This documentation features timelapses of the website's development,
issues I faced, reasoning behind design choices and more.
Table of contents
– Orientation –
– Learning Curve –
- Timelapse -
– Version History –
- Reflection -
Orientation
I felt like the previous iteration of h7lyx.com didn't reflect my designing skills well.
After doing some research in website builders I found Framer.
Framer is a design oriented website builder which was exactly what I was looking for.
Since Framer is design oriented I felt like I should take advantage of this.
This is the time I figured to turn this into a roadmap project.
Because I did the website needed to be the best it could,
embedding design rules and being tuned to perfection and my preferences.
This prompted me research design farther than I had before.
I used several sources for this, primarily creators on YouTube.
With [this link] you can view the playlist I made for my research.
Learning Curve
I was vaguely familiar with Framer's UI, this because I used to work with Figma.
Figma is a designing tool that supports exporting your designs to Framer.
I haven't used Figma to build h7lyx.com but it helped me understand how Framer works.
However this didn't mean I wouldn't face difficulties.
Framer offers a lot of creative freedom, but with that comes complexity.
It's simple enough to do the basics but things got complex very quick.
It didn't help that I wanted to create quite complex mechanics.
A lot of features have been scrapped as a result, at least for now.
For example the "Elaborated Description" was supposed to be a pop out window.
The "Roadmap" interface was initially intended as a navigator.
TIP: some of these scrapped changes can be seen in the Version History.
BETA 1.0 was released on 08/29/25, meaning this project has taken me almost 2 months.
I'd say about half this time I was trouble shooting,
figuring out how to make different features needed to be implemented,
Making the site compatible with Mobile devices, did I mention trouble shooting?
Timelapse
Since describing developing this project with words is quite difficult,
I've made a compilation of several timelapses.
The timelapse stars off with Chapter 1, building the Roadmap interface.
The idea was to make a progression bar showcasing Roadmap projects.
Developing & polishing the Roadmap page took roughly two and a half hours.
Chapter 2 features the development of the Elective page.
Similar to Roadmap Elective received progress bars for each elective subject.
This process took roughly forty minutes to be finalized.
In Chapter 3 features Roadmap project documentation for Sound Design.
Since each project has been granted it's own theme customization played a big role.
This documentation features overlays to enlarge project assets,
This feature was new to me and took some time to get right.
The documentation and customization took roughly three hours.
Chapter 4 delves into the documentation for Elective's Hierarchy.
Since this project was already documented this process was less intense.
The timelapse consists of roughly one hour of real time spent.
Chapter 5, the final chapter shows the entire development of Sandbox.
Aside from customizations made to the EXE Hud most of the work was documentation.
Sandbox projects luckily don't need an in depth documentation which saved some time.
Version History
Rather than making another six, or seven paragraphs I've chosen to make something interactive.
In order to show how much this site has grown from when it initially opened to public BETA,
I have developed a custom Version History html environment.
Using the download button bellow you may download it for yourself, fully offline!
After downloading the Zipped file extract the file and open "Version Viewer.html".
On the left you can navigate site versions, and on the right you can see what's new!
Stuck in a version? Use Alt+ ← for Windows or Option+ ← for Mac.
The Version History environment will continue to receive updates in [dev],
this is because project documentation must stay static for reviews by experts.
Reflection
Documentation in progress..