Web Design Project #2: Glitch!


What:  Glitch web page design

Date:  7 March 2014


Glitch Cover

Glitch GlitchesGlitcher

Get GlitchedListened to this while creating this:  The Mars Volta (Wax Simulacra), At the Drive-In (Album=”Relationship of Command”). Does it come through in the glitches?

What did I do immediately before creating this: For main glitch pattern and text = “morning exercise”, the rest came to me on the bus trip home.

Credits:  All my own creations once again. The ugly pic on ‘Glitch-er’ page is my own…but glitched!

Comment: This looks tedious to implement in Codepen.io. For the CSS folks, that’s a LOAD of boxes, e.g.

.box {
height: #px;
width: #px;
float: <direction>;
position: relative;


I quite enjoyed creating this design though. It actually came to me last night but started the design process in the morning after a workout.

And no, I am not planning on implementing the mobile design. Did that for pure fun.

I actually have another design pretty much ready to go, but I’ll hold off for the moment as I am waaaaay ahead of schedule for the month and my code development is lagging i.e. I’ve been designing more than developing.

Shout out to Teamtreehouse.com, in particular Guil Hernandez, Nick Pettit and Mat Helme for the technical lessons. I am only 2 and a bit months in, but am already feeling like a learned man. (but still a loooong way to go)

About this project:  Initial blog located here and the last design is located here. Basically this is a series of designs – 3x a month, beginning March and ending in May. If I have my maths right, that’s 9 designs between March and May with the 3 best designs to be coded here.

And I’ll be storing my collections here.

The next design is located here.


5 thoughts on “Web Design Project #2: Glitch!

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