Web Design Project: Winning Design 1st Month

Projects

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:

Glitch

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.

Observations:

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