User Interface Design
Visual Development
A Retro Windows Inspired User Interface with Webflow
User Interface Design
Visual Development
A Retro Windows Inspired User Interface with Webflow
User Interface Design
Visual Development
A Retro Windows Inspired User Interface with Webflow
Table of Contents
The Idea
Retro tech and interfaces have always interested me, especially the older Mac and Windows interfaces. So, when I started to learn and play around with Webflow, one project that instantly came to mind was creating something inspired by retro Windows. With this project I was looking to not only explore the features and working of Webflow but also wanted to design something that was a bit not of the ordinary for me, to work on my visual design skills as well.
Non-os was a side project I made exploring the user inferface design of retro windows and trying to bring the idea to life using Webflow.
The main goal behind this project was to design something different and mainly to explore the capibilities of Webflow and learn to work well with the platform.
Gathering Inspiration
Starting of designing something which would resemble a retro OS, first I had to select the version I would be basing off my design on. After looking around a bit seeing different older versions of Windows, I felt that Window 3.0 would be the base reference for the design I would be creating.
To understand a bit more regarding the aesthetics and the graphical user interface (GUI) for Windows 3.0, websites like Toasty Tech and PCjs Machines were extremely helpful in providing screenshots and the complete GUI for the Windows 3.0 operating system. Along with these, I also looked for websites created recently which follow the same concept as what I was looking to create here. In this I found Mariano Pascual's website which is beautifully created and that as a benchmark, I set out to create something. Then, we move ahead to the design aspect (leaving self-doubt and imposter syndrome behind).
Designing the Graphical User Interface
Once the references were gathered, starting off the user interface design establishing a font was absolutely important. The font should give a bit of a retro OS vibe. Finalising font Minecraft and Pxlvetica which both have pixelated and a bit old retro font look to them.
Fonts and Icons
Following the font selection, I moved onto creating the icons for the interface. The icons that needed to be created were to be pixel art icons which would go along with the font and help continue the pixelated and retro design language I was looking for the interface design. All the icons were created with reference to Windows 3.0 and from scratch to work well with the design. Designing the pixel art icons was pretty new and interesting to me, creating something pixel by pixel and watching it come together was too much fun. Using alternating colours to create fill for the Figma icon and the photo icon, joining the pixels edge to edge to get that pixelated corner. Maybe I'll create a pixel art icon-set as well, who knows?
Windows
Establishing the font and the icons, now it was time to start working on the operating system interface. The GUI was heavily focused on Windows 3.0 with the Program Manager being the major window which houses a Main window comprising on folders and other files. The Program Manager along with the Main window also has a menu bar which houses File, Options and Contact information as well which would be dropdowns with links to various resources and information.
While designing the windows and background, I kept focus on using basic colours which aren't too bright to emphasise on the old windows aesthetic.
Webflow's Visual Development
Creating the basic layout of the design in Webflow was a pretty straightforward thing. The main challenge of this project was creating the interactions so that they mimic an operating system, which means having double click for a window to open. Developing the different interactions was challenging while being fun.
A few things that I kept to get around a few of the limitations with Webflow and not knowing much about using custom Javascript. Once a window is opened on top of another one it would be possible for people to click on the windows at the back so I updated the cursor so as to show that this is a no click zone.
One issue that I could not get around was the icon being highlighted after the first click and then if the user clicks on another icon, the highlight does not go away the first one.
For the finishing touches, I created a pre-loader and a help tooltip to bring everything together and also let people know the issues I had and to get in touch if they can help me out in this.
Results & Conclusion
Even though the design was not the greatest, overall the maximum interactions and workings were made to a good extent where they did feel nice and like an operating system while giving off a bit of a retro vibe like I was hoping for. All in all, I had a lot of fun trying to understand the interface of the past, working with pixel art and obviously designing, developing and bringing everything to life with Figma and Webflow. Fun projects like these are great as there's no pressure and you can create whatever you feel works great, I would encourage people to find something from time to time and just enjoy!
Take a look at the live project - https://non-os.webflow.io/
Table of Contents
The Idea
Retro tech and interfaces have always interested me, especially the older Mac and Windows interfaces. So, when I started to learn and play around with Webflow, one project that instantly came to mind was creating something inspired by retro Windows. With this project I was looking to not only explore the features and working of Webflow but also wanted to design something that was a bit not of the ordinary for me, to work on my visual design skills as well.
Non-os was a side project I made exploring the user inferface design of retro windows and trying to bring the idea to life using Webflow.
The main goal behind this project was to design something different and mainly to explore the capibilities of Webflow and learn to work well with the platform.
Gathering Inspiration
Starting of designing something which would resemble a retro OS, first I had to select the version I would be basing off my design on. After looking around a bit seeing different older versions of Windows, I felt that Window 3.0 would be the base reference for the design I would be creating.
To understand a bit more regarding the aesthetics and the graphical user interface (GUI) for Windows 3.0, websites like Toasty Tech and PCjs Machines were extremely helpful in providing screenshots and the complete GUI for the Windows 3.0 operating system. Along with these, I also looked for websites created recently which follow the same concept as what I was looking to create here. In this I found Mariano Pascual's website which is beautifully created and that as a benchmark, I set out to create something. Then, we move ahead to the design aspect (leaving self-doubt and imposter syndrome behind).
Designing the Graphical User Interface
Once the references were gathered, starting off the user interface design establishing a font was absolutely important. The font should give a bit of a retro OS vibe. Finalising font Minecraft and Pxlvetica which both have pixelated and a bit old retro font look to them.
Fonts and Icons
Following the font selection, I moved onto creating the icons for the interface. The icons that needed to be created were to be pixel art icons which would go along with the font and help continue the pixelated and retro design language I was looking for the interface design. All the icons were created with reference to Windows 3.0 and from scratch to work well with the design. Designing the pixel art icons was pretty new and interesting to me, creating something pixel by pixel and watching it come together was too much fun. Using alternating colours to create fill for the Figma icon and the photo icon, joining the pixels edge to edge to get that pixelated corner. Maybe I'll create a pixel art icon-set as well, who knows?
Windows
Establishing the font and the icons, now it was time to start working on the operating system interface. The GUI was heavily focused on Windows 3.0 with the Program Manager being the major window which houses a Main window comprising on folders and other files. The Program Manager along with the Main window also has a menu bar which houses File, Options and Contact information as well which would be dropdowns with links to various resources and information.
While designing the windows and background, I kept focus on using basic colours which aren't too bright to emphasise on the old windows aesthetic.
Webflow's Visual Development
Creating the basic layout of the design in Webflow was a pretty straightforward thing. The main challenge of this project was creating the interactions so that they mimic an operating system, which means having double click for a window to open. Developing the different interactions was challenging while being fun.
A few things that I kept to get around a few of the limitations with Webflow and not knowing much about using custom Javascript. Once a window is opened on top of another one it would be possible for people to click on the windows at the back so I updated the cursor so as to show that this is a no click zone.
One issue that I could not get around was the icon being highlighted after the first click and then if the user clicks on another icon, the highlight does not go away the first one.
For the finishing touches, I created a pre-loader and a help tooltip to bring everything together and also let people know the issues I had and to get in touch if they can help me out in this.
Results & Conclusion
Even though the design was not the greatest, overall the maximum interactions and workings were made to a good extent where they did feel nice and like an operating system while giving off a bit of a retro vibe like I was hoping for. All in all, I had a lot of fun trying to understand the interface of the past, working with pixel art and obviously designing, developing and bringing everything to life with Figma and Webflow. Fun projects like these are great as there's no pressure and you can create whatever you feel works great, I would encourage people to find something from time to time and just enjoy!
Take a look at the live project - https://non-os.webflow.io/
Table of Contents
The Idea
Retro tech and interfaces have always interested me, especially the older Mac and Windows interfaces. So, when I started to learn and play around with Webflow, one project that instantly came to mind was creating something inspired by retro Windows. With this project I was looking to not only explore the features and working of Webflow but also wanted to design something that was a bit not of the ordinary for me, to work on my visual design skills as well.
Non-os was a side project I made exploring the user inferface design of retro windows and trying to bring the idea to life using Webflow.
The main goal behind this project was to design something different and mainly to explore the capibilities of Webflow and learn to work well with the platform.
Gathering Inspiration
Starting of designing something which would resemble a retro OS, first I had to select the version I would be basing off my design on. After looking around a bit seeing different older versions of Windows, I felt that Window 3.0 would be the base reference for the design I would be creating.
To understand a bit more regarding the aesthetics and the graphical user interface (GUI) for Windows 3.0, websites like Toasty Tech and PCjs Machines were extremely helpful in providing screenshots and the complete GUI for the Windows 3.0 operating system. Along with these, I also looked for websites created recently which follow the same concept as what I was looking to create here. In this I found Mariano Pascual's website which is beautifully created and that as a benchmark, I set out to create something. Then, we move ahead to the design aspect (leaving self-doubt and imposter syndrome behind).
Designing the Graphical User Interface
Once the references were gathered, starting off the user interface design establishing a font was absolutely important. The font should give a bit of a retro OS vibe. Finalising font Minecraft and Pxlvetica which both have pixelated and a bit old retro font look to them.
Fonts and Icons
Following the font selection, I moved onto creating the icons for the interface. The icons that needed to be created were to be pixel art icons which would go along with the font and help continue the pixelated and retro design language I was looking for the interface design. All the icons were created with reference to Windows 3.0 and from scratch to work well with the design. Designing the pixel art icons was pretty new and interesting to me, creating something pixel by pixel and watching it come together was too much fun. Using alternating colours to create fill for the Figma icon and the photo icon, joining the pixels edge to edge to get that pixelated corner. Maybe I'll create a pixel art icon-set as well, who knows?
Windows
Establishing the font and the icons, now it was time to start working on the operating system interface. The GUI was heavily focused on Windows 3.0 with the Program Manager being the major window which houses a Main window comprising on folders and other files. The Program Manager along with the Main window also has a menu bar which houses File, Options and Contact information as well which would be dropdowns with links to various resources and information.
While designing the windows and background, I kept focus on using basic colours which aren't too bright to emphasise on the old windows aesthetic.
Webflow's Visual Development
Creating the basic layout of the design in Webflow was a pretty straightforward thing. The main challenge of this project was creating the interactions so that they mimic an operating system, which means having double click for a window to open. Developing the different interactions was challenging while being fun.
A few things that I kept to get around a few of the limitations with Webflow and not knowing much about using custom Javascript. Once a window is opened on top of another one it would be possible for people to click on the windows at the back so I updated the cursor so as to show that this is a no click zone.
One issue that I could not get around was the icon being highlighted after the first click and then if the user clicks on another icon, the highlight does not go away the first one.
For the finishing touches, I created a pre-loader and a help tooltip to bring everything together and also let people know the issues I had and to get in touch if they can help me out in this.
Results & Conclusion
Even though the design was not the greatest, overall the maximum interactions and workings were made to a good extent where they did feel nice and like an operating system while giving off a bit of a retro vibe like I was hoping for. All in all, I had a lot of fun trying to understand the interface of the past, working with pixel art and obviously designing, developing and bringing everything to life with Figma and Webflow. Fun projects like these are great as there's no pressure and you can create whatever you feel works great, I would encourage people to find something from time to time and just enjoy!
Take a look at the live project - https://non-os.webflow.io/