Web Design Project: Winning Design 1st Month


A little while ago, I challenged myself to create some web designs as part of my self-studies into web development. I’m almost 3 months in and have come up with 3 designs:

As part of the challenge, I needed to implement those designs in Codepen. And the winner of this month’s design challenge is….: Glitch!

Here’s the original design:


And here’s my implementation:

Glitch Implementation

Some of the Code:

First, I added html classes similar to below: <!-- Groups -------------------------> <div class=”group-1″> <div class=”box-1″></div> <div class=”box-2″></div><br> <div class=”box-1″></div> <div class=”box-3″></div> … The purposes here is to add the boxes after ‘Glitch’ heading. I had 12 groups of these boxes which made it a very repetitive process. Second, I had to position all these elements accordingly so I implemented it this way: /* Global ********************/ .group-1, .group-2, .group-3, ...{ position:relative; width: 20px; display: inline-block; There were 12 groups, each one used this code for positioning: .group-1{ margin-left: 555px; top: -250px; width:10px; … Then finally came the boxes, which looked like this: /* Group 1 ********************/ .box-0, .box-1, .box-2, … { height:8px; width:8px; padding: 1px; } And most of the groups had 3 boxes, which in turn were coloured this way: .box-0{ border: 1px solid ##686868; background-color:##686868; left: 50px; And I almost failed to mention that I’ve used Flexbox template from this post, Google Fonts for Glitch title and added my mug shot for branding. Here’s the link to my implementation.


I was very apprehensive at first and thought to myself – what in the world did you get into? Can you actually implement Glitch? I’m actually quite happy to say that developing this design was not as difficult as I thought it would be. ..but it is fidgetee. There was a lot of time spent with positioning the groups and boxes. Then came the shading which was equally bothersome (and I can get very meticulous with the finer points). In the end, I thought to implement Glitch a little bit differently from the original design with more tints than shades and tone. I just didn’t want to make it look like a solid block. Can this be improved? Of course it can. I can go on forever and play with the colours more. But I am happy with the abstract design. The random nature of the blocks looks quite appealing (if I don’t say so myself). And I can probably add some animation to this to make those blocks flicker – the Glitcher Flicker :)  But for now, it’s time to sit back, relax and be happy with what’s been achieved. I’ll probably touch this up again at some point in the future. I found this entire exercise to be quite rewarding and I like the fact that I am pushing my own boundaries with learning something new. I’m looking forward to next month’s design challenge! PC

7 thoughts on “Web Design Project: Winning Design 1st Month

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s