An efficient way to showcase applications
Having a unique site for a product is extremely important. It explains the users about the product and also acts as a gateway for them to download and try the product. For solo developers, having multiple sites for different applications can get expensive, especially when they are just starting.
GitHub pages
Developers can publish their apps to their GitHub pages and make it available for download. However, for non-technical people, that interface can get confusing. A page that just shows the features of the app and a clear download button is a better user experience.
CMS based sites
While this is an easy way to have a seprate website and share multiple app pages, the design usually remains the same - A common list page and a similarly structured detail page. This limits the design of individual product pages and they lose their own app identity.
Design that evolves with the community
I wanted to build a site that would be interactive and can run completely different designs for the application pages, all without affecting the performance and compatibility.
A complex yet familiar design
The important question was, "How are people going to navigate through the pages?" I had planned to create a non-scrollable, 100 viewport height website and having a traditional header and footer would reduce the actual content real estate. The best solution matching the site's aesthetic was a terminal styled command center.
Information about all my apps in one screen
QWERTY being an application-hub website, showing latest updates and information about my apps was essential. This also included showing my activity in GitHub and total downloads across my apps. This not only to shows credibility of my apps, but also lets the users know that they are actively maintained.
What about information overload?
With so many cards, it can seem like there is too much information in the screen. There are times when someone would prefer to look at the actual content page only. For this, I added a function that would make only the content area fullscreen. With each app having their own design identity, making it fullscreen gives an illusion of viewing a completely different website.
How is it responsive with so much information in a single screen?
This was a big concern. The content is the main readable area and in smaller screens, having cards displayed all the time would have wasted lots of limited screen space. So, I made all the smaller panels into cards that are collapsible. Only one card shows up at a given time and it can be swiped either direction to view the others.
Typing experience in mobile devices
The terminal interface is used for controlling the website as well as navigating. In mobile devices, an on-screen keyboard can cover up the input field which would not be a great experience for the user. To fix this, I updated the interface when the on-screen keyboard shows up. The terminal interfaace gets higher visibility priority and shifts up while reducing the content area's size.
People control the appearance
Not just the theme which are CLI inspired, but the interactive globe's appearance also changes depending on the number of people viewing the site. A glowing dot shows the user's approximate position. As the number of people viewing the site from different parts of the world increases, more dots keep appearing, filling up the entire world.
A brand new experience
While I designed the website myself, the development work was completely done with AI. Now I have a scalable website which will always have fresh desgins, where people can check out my apps and try it out!
Feels like an application with instant navigations
Optimizations have always been important to me and considering every product has its own identity, which would mean different font files and libraries, I made sure that the site still performed the best.