Skip to content

5000 Floor Elevator Controls User Interface: Imagined 5,000-story building and its elevator controls UI/UX. Eventually I plan to develop the prototype into reality using Angular (at least as the front end), and that's why I started this repo. High-Fidelity prototype is made in Figma, you can try it here:

License

Notifications You must be signed in to change notification settings

pixelmagic66/5000FloorElevatorUI

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

5000FloorElevatorUI

The 5000 Floor Elevator Controls User Interface: For an imagined 5,000-story building and its elevator controls UI/UX.

Dev Plans

Eventually I plan to develop the prototype into reality using Angular (at least as the front end), and that's why I started this repo.

View Prototype (interactive)

I made a High-Fidelity (interactive) prototype in Figma, you can try it here: https://www.figma.com/proto/iczbAgh449JT7lhwDP8wkb/5000FloorElevatorUI.1?node-id=1%3A3&viewport=-5167%2C945%2C0.49883145093917847&scaling=contain

Those of you with prototyping experience will understand a routing view like this. I could have incorporated the "Direct Entry" (keypad entry) navigation with the other navigation, but felt the animation transitions were getting complicated enough, and so I pulled those frames out (they're the 4 in the bottom row).

Since it is a high-fidelity prototype with a lot of animated transitions, I've noticed it only works "smoothly" on my work PC with a high-end Radeon Pro card. It still works on mobile or other machines, but often VERY SLOWLY. Watch the videos, linked below, to see how it is designed to transition between.

Discovering new considerations for model construction

Here's an idea of how I organized and named the the colors and font styling for easier eventual development styling and element building.

Also, you can get an idea of how I had to structure components and the tree order I chose to enable the cleanest, "smartest", most orderly transition animations. I learned a lot about Figma doing this very graphically-intensive prototype than from other website or traditional CRUD app mockups. Because of this, and for now, I'm liking Figma better than other prototyping platforms I've tried. Most of their rules make sense, even when you're very far down the rabbit hole on an edge use case.

View Prototype file:

To view the file (not the interactive prototype), click here: https://www.figma.com/file/iczbAgh449JT7lhwDP8wkb/5000FloorElevatorUI.1?node-id=52%3A20978

Watch videos of the prototype on YouTube:

Prototype file walkthrough and animation: https://youtu.be/eYP8sS7FDjM

Shorter: https://youtu.be/pwAiDiq0su0

App Stub

After installing the new ng app (Angular 8), I saw I could enable the Ivy Rendering engine, which I think isn't fully supported until Angular 9. I wonder if it will make a difference on more graphics-intensive aplications like this UI? (right time, right place?)

About

5000 Floor Elevator Controls User Interface: Imagined 5,000-story building and its elevator controls UI/UX. Eventually I plan to develop the prototype into reality using Angular (at least as the front end), and that's why I started this repo. High-Fidelity prototype is made in Figma, you can try it here:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 73.5%
  • TypeScript 21.1%
  • JavaScript 5.2%
  • CSS 0.2%