Assignment I: When All Hell Breaks Loose

Hi, I’m Page. Personally I call myself Pagius, which is the latin origin of “page”, and its meaning is “servant”. Quite an interesting name. Servant to whom, god maybe?

When All Hell Breaks Loose🤯

Let’s get back to the assignment post first. For each assignment post title, I will select one catchphrase, slang, or whatever for it. So Assignment I has “when all hell breaks loose”, which describes what happens when violent, destructive, and confused activity suddenly begins. It’s a bit exaggerating, but I will weaken its meaning as mess, dissonance, and discord. There is a concept called “unity/harmony” in visual design, which can be seen as the antonym of it.

Why am I emphasizing all these terms over and over again? Well, look at the title image. It is Composition VIII by Wassily Kandinsky. If you try to observe it carefully, you will definitely be overwhelmed by all these elements, whatever they are colors or shapes. If you take a glance from the overall perspective, feelings of unity can surely be felt.

I personally think of myself as a minimalist, and believes that less is more. After trying lots of photography and a little bit of design, I am still clinging to the principle. Reflecting on all these experiences, including this assignment, I always find it that adding more element will affect the overall unity.

However, is it possible that I cannot handle lots of elements well? Am I not competent enough? Remember the title page, which is both simple and complex at the same time, and more importantly, harmonious.

Anyway, get good.

Assignment Time🔔

Finally I should get back to my assignment.

First you can check out my website here I guess.

There are elements of navigation bar, background image, main, and footer. I have annotations for them all in the source code.

Basically I’ve experimented lots of ideas. Some abandoned ones inclued shifting background images(using animation and keyframes), navigation bar changing with scrolling(JavaScript is needed), and changing black and white themes. These functions can be handled with CSS transition, but is not that convenient. JavaScript is a better way, but I don’t have enough time to learn. Well I tried that scrolling stuff, but failed…

For the final version of the work, I’ve put most of my efforts into the navigation bar. The first tricky thing is to use flex to put the icon image and the list of 5 assignment texts on the same horizontal line. The second one is about hyperlink hover effect, the image should change opacity, and the CSS slector here is a bit messy. Third, I add a blur effect to the navigation bar. The trick is that I should create a layer below the contents, which are the image and texts. The goal is achieved by editing the z-index to minus. Then I can blur the layer. Bang! That’s it!

The background image is carefully selected. After trying so many, I still think less is more… So I still choose a minimalist one. BTW It’s Persona 5. Also It has a horizontal tendency. Guess I’ve given up upon the mobile version.

Main part is simple, but font family, weight, and size are not carelessly chosen. Optima is one of my favorite typefaces, and I’ve upload it from my device.

The last one is the footer, which is a question mark bound in a circle. To make the question mark horizontally and vertically center is not that simple actually. I have to create two boxes containing the text. Also I experiment with another hyperlink hover effect, not for text, but for container box. Also It’s an Easter egg hahaha.

Best regards,
Page