Pure Coding Web Design+Development (Wolfgang Weingart)

coding pure Webdevelopment developer frontend Website development purecoding Wolfgang Weingart

Learning front-end language is simply fun and opens me to a wider range of tools & new possibilities that I can have a more realistic outlook on a project. It also helps to develop my structural thinking and creativity how to tackle problems and come up with solutions.

In that respect, the main purpose of this project was to practice how to code pure functions. I could have used bootstrap or library since they are efficient, but I chose pure coding instead to build a website.

It might be difficult to think logically and create a solution from zero, but the fact that pure functions are easier to read and maintain attracted my heart to challenge myself.

The topic I chose for this project is to introduce my favourite designer 'Wolfgang Weingart'. He has known for a global graphic designer and typographer. Above all he has commonly credited as the father of New Wave typography(Swiss Punk Typography).

He has exerted a decisive influence on the international development of typography. His experiments of typography became texture in his posters. And He showed connection between typography and graphic design by analyzing their characteristics to be used in the image and combining them.

There are also intriguing rhythmical objects in geometric forms.

To sum up, his work is experimental, deconstructive, remixing, and extrapolative, which means it is against the Swiss typography.

So my plan was to build a clean and simple website to show his backgrounds, which might look strict and well-organized because Swiss Typography is very important, his starting point although he blew it apart in the end.

While designing this sketch in Figma, I was a bit worried about making a grid in CSS since actually making this kind of grid system without any help from bootstrap or library was very unfamiliar with me.

There were also several components that might conflict with the other objects.

but I tried to build a unique, clean and simple structure at the same time.

As for the body, it is constructed with a container, a nav , and 4 sections.

For this experimental grid, I used display: grid; grid-template columns, and grid-area.

On the right top of the index, you can find three tags, tilting, shrinking and growing. I used animation and keyframes to make them a bit stand out.

On the right bottom of the index, there is an arrow button, guiding you to the next page.

When you click 'ABOUT' menu, it scrolls to the section 2.

The most challenging and quite demanding part was making a horizontal-scroll, but I took this opportunity as a challenge to rely on its input arguments only rather than to rely on any external state or data.

To trigger horizontal scroll and prevent vertical scroll at the same time, I had to calculate precisely with using letScrollStart, letScrollEnd, and the other events.

When you mouse over the image, you can read the description.

For the last part, I put some experimental interactions in the context of development. If you hover over the menu and click, a transition from circle to square occurs.

Above all, making a grid is the one that took so long, very truly absolutely experimental for me. And making a horizontal scroll is the one that kind of catch 22, but the whole process including debugging to solve these issues gave me a motivation to hit the books to design and develop my own website that can represent my identity.