Loading ...

Responses by Piet Dewijngaert, interaction designer.

Background: My site is a throwback to the Adobe Flash days when animations were more important than content, unskippable intros were legion, responsiveness was unheard of and usability was irrelevant. I feel a lot of nostalgia for those days.

Sector32.net serves as the official site for anybody looking for information about me, but there’s no information to be found—next to my e-mail and a timeline of my career. Form is most definitely more important than function. I have created this site for designers, developers and anyone else with a passion for web design.

Design core: I was inspired by UI elements from sci-fi movies of the ’80s, ’90s and early 2000s. I tried to capture those aesthetics and translate them into contemporary, interactive, responsive components. I imagined a world where AI, humans and everything in between roams the internet, hence the section of the website where you have to prove you’re human to unlock the rest of the content.

Challenges: I wanted to create something truly unique, so I did my best not to get inspiration from other websites. It was a challenge to add many details and interactivity while keeping the site performant and visually pleasing on older and mobile devices.

I played around with many 3-D JavaScript libraries, but in the end, I decided to create all the 3-D effects from scratch with DOM elements, SVGs and CSS 3-D transitions. I’m very happy with the way the animation turned out.

Time constraints: My full-time job and two children take up most of my time. I worked on the website on and off over a long period since, as this is a personal project, I had no time constraints. In the end, I imposed a deadline on myself to avoid working on the site forever. I could have added details and pages for years to come.

Technology: I started with vanilla JavaScript and CSS. As the project grew, I felt the need to use a framework to keep the growing project organized. I thought about using React but instead opted for Svelte. It took some time to get used to—as I had no experience with libraries and frameworks—but I fell in love with Svelte.

Many animations on the site were done with the excellent GSAP tween library, both for DOM elements and parts of SVG files. I used Matter.js for the gravity effect seen inside the “business card” on the home section. But for the most part, the site is plain old CSS and JavaScript.

sector32.net

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In