Broken Kode V5 | Foundations
A very strange thing happened during the design of this particular iteration of the 'kode. Usually speaking I'll be thinking about if for months, then I'll see something on the internet and get depressed because I can never get that good and then I'll begrudgingly try and plow through coding I really have no right playing around with in the first place, simply because if I can, I will be making a dog's dinner out of it.
The Fairground
So when I first jumped into the redesign something like 20 odd days ago I had it in my head that I was planning on making the most insane, loudest fucking thing on the internet (ok a bit of hyperbole there but that's what was going through my head). The louder (and I mean in terms of colour and typography) the better. I was going to have loads of links everywhere. I was going to draw every single section of the damn thing, to hell with how long it was going to take people to load the site, that's why you've got broadband I tried convincing myself.
As I plowed through the design, spending hours simply staring at what I had in front of me, in an attempt to make it more coherent, make it more explosive, make it more loud, I let it rest for a few hours and went and played basketball. When I got back it was as if I understood that I was going down the completely wrong road for this design. For some reason simplicity and ease of upgrading and actually understanding all the code that I was slapping down became far more important to me. It didn't matter that I wasn't even 40% finished with this design, it didn't matter that I'd spent days on the design either, what matters was the Euerka moment that I felt there and then.
The Showcase
It dawned upon me (yeah I know it took a fucking long while, after 8 months) that what people associated and liked about the previous site wasn't the design or the typography, the thing that made it stand out was my artwork. Sadly because I'm too busy not happy completely with my site I don't get the chance to draw more. This redesign is aimed at that idea, getting to draw more. I will say that the turning point was the showcase idea. Here I could use the entire page as my canvas. I could highlight everything I wanted to highlight right on the front page with the minimum amount of effort. I just change a jpg and edit a single file if I'm feeling inclined to add more information about the artwork behind.
The design
The design itself is not a million miles away from most blog website out there. The real difference here is that I'm playing the grid as precicely as I can. All I could think about was maintaining a grid throughout the entire design, luckily for me it was a super simple design so there wasn't much to worry about, but it's all in the details.
I've kept my philosophy for the archives as well. Keep it simple. I completely understand all the code that is behind the functions found here and can easily manipulate them to do with as I please; which is once again a supremely inviting reason to have a super simple website. Traditionally in the past I would have been running out of steam by the time I got around to dealing with the archives, so this was a breathe of fresh air to actually want to make something of the archives both visually and from a usability point of view. I've not completed the work there, as I've still got the tags page and the categories pages to deal with as well (however those shouldn't be too far behind).
Updating
I'm intrinsically lazy when it comes to up updating the site with tweaks here and there. The reason behind once again is the messy code. The code that at the time I thought was pretty tight was in fact a bit of a mess. The design depended on plugins far too much and I can't say that it was adding that much to the usability of the site itself. With that thought in mind, I attacked this design by stripping everything. Anything that was getting in the way was gone. Simple was the way forward. So on the front page all you get are the posts, the titles and how many comments have been made to each post. If you want any other information you're going to have to jump back into the individual page and get that information. The entire idea behind this design is to add a bit of class to the site, which I believe although had some good intentions was lacking a coherent structure, and the attention to detail was sadly lacking. This design aims to address this problems by making the maintenance slightly more manageable.
WordPress on Fire
I've been using WordPress for a good long while now and I've got to say with the sheer amount of work that's been done out there by 1000s of people, there is nothing that you can think of that someone hasn't thought of before (unless you're Michael, don't know where he mines his ideas from). What's also great is that the resources out there to help you sift through everything is astounding. It's actually my favourite toy at the moment because it really delivers everything I want and in the way I want it with the minimum amount of fuss. So I bow down to Matt and the entire WordPress dev team and especially to the 1000s of people that make up the WordPress Community, you guys rock.
No CoCo?
Don't be silly, he'll be back and pretty soon, once we get this CSS Reboot malarkey over and done with then we can move on to concentrating on sketches and whatnot. I've got some pretty exciting stuff coming up for CoCo, so don't you worry, he'll be back.
Special shout out
Usually when I start a redesign I pick up Manji or Rin and start hacking away. Certain things are ready for me, however looking at the code found in there, I've got to say that a lot of work is really needed to bring that theme up to speed with the rest of the themes out there, except I know if I jump back into that field it will really take a long time/ Thankfully there's Fauna. Fauna by Joen IMHO should become the WordPress default. Why? Because it's supremely easy to understand and Joen has seriously made it clever. The most time consuming part of making a theme for WordPress I found was sorting out the single post pages, with all the comments and the comment forms and the implemenation for the trackbacks etc. It just gets a bit ridiculous. So Joen's efforts have been supremely amazing to have and while the last time round he helped me out with the code, this time he did one better and gave me his site :).
I want to also give a shout out to all the fine folks at 9rules who will always help out whenever they can which is brilliant and for the loads of inspiration they give me each and every month and to everyone who helped me whether they knew it or not, so people like Phu, Joen, Shawn, Michael, Kyle, Podz and the list goes on to be honest.
Final Word
Is the site complete? No, it never is. Ask anyone out there when they think they're site is 100% complete or if it's perfect and I doubt they'll say it ever is. Just because there's always something you can do. I've learnt to understand that point (once again it's taken a bit of time) but it's all part of learning and at least now I can say I've laid down some decent Foundations (which also is the name of this particular design).
Do excuse the mess I'm still tidying up. That goes for my code and my site and links, shouldn't be too long though.
Sounds sweet. Can't wait to see it finished.
Looking good man. I really dig the colors. So nice to see some different schemes going around. Keep up the good work buddy.
Oliver Zheng said:
Serves me right for not keeping it short and sweet lol. The design is more or less there, I'll only be tweaking this code to become more streamline (and work better) and the showcase section which will get updated whenever I want to highlight something :).
Thanks Shawn.
Simply stunning, Khaled. I love that it's simple (in a good way), and yet still has the refinement, class, and great design I'd expect from you.
It seems much more focused, thought-out and is more of a joy to use than the previous version. And the colour scheme is amazing. Don't think I've ever seen this exact combo before.
Great job, please give us (me) more of theese posts about design, as I find them to your best entries.. :)
Not to be a nitpick (I'm sure you've got your hands full), but your site's comments doesn't show at all in Opera (using beta 9.0).
I love the new design!
Great redesign - playing to your strengths - clean & bold.
Really like the redesign. Cool!
Olav said:
Glad to hear that, it definitely became a priority with me (the usability aspect of it all). As for the colour scheme, I've always been in love with the light blue and turqoise mixture (must be a mediteranean thing and association with the sea, very calming).
Hmm, I'll definitely keep that one in mind. I've got loads of thing to talk about regarding design in general, it was just a bit difficult in the past few months to stay focused.
Thanks everyone for the kind words, now if only I could sort this comment section to not break in all the other browsers I'd be a happy bunny.
[...] Sometimes I love this guy’s designs. He can damn draw. Sometimes I wish he was my drawer. [...]
The color and layout looks great! It is inspiring to see.
This is awesome, Khalid! Excellent!
Damn that playground looks fabulous!
Wow looks great Khaled! Very very nice!
I specifically want to hand out points for not styling the input boxes! (You know I mean this :), and in a positive way).
One suggestion so it'll look good for Windows users as well: Specify font face for textarea and input, since on Windows the textarea gets Courier New by default, whereas the input field gets Arial as default (EVEN if you've defined a different font to the body tag).
James AkaXakA said:
I'll probably use some variation of it once I set up a proper index page in the future.
Joen said:
Thanks dude, couldn't have done it without you, honest :). One of the reasons I didn't style it is because I thought I'd screw it up more, but it's ended up giving me more grief...I wish we can have something that looks the way it's supposed to be. Just looked at this section in IE (a few versions) and each sees things differently which is supremely annoying so I'll have to have a look into that as well.
Joen said:
Will definitely look into it all once I've sorted out the burning areas first :) (like the aforementioned textarea glitches and the fact that the comments don't want to work in Safari).
Awesome stuff Khaled. Looks like you got a bit impatient and rebooted early as well:)
Love the archives!
Phu said:
Did it for several reasons, most of all because I wanted to concentrate on other things and this was getting in the way. The good thing is that my brain is actually starting to wondering in the world of illustration again which is why I updated the site in the way I did. Hopefully a lot more artwork and sketches will be posted on a more regular basis. That's the plan anyway :).
Thanks for your help Phu, I'll be sending you another support question pretty soon actually lol.
Sorry I'm late. Great new design. I must say that your designs are very original.
Looking good as always my man. I am really digging the colour scheme as well; although I will force my love of negative space and padding on the web design world one of these days!
Seriously though, I am glad you rebooted early, it will give the rest of us something to look to for a end of the race pick-me-up.
Love the design and especially the colours.
I'm also amazed that my name was in the same sentence as everyone else!
I kinda liked the old side better, to be honest. Maybe it's just the school computer I'm using (viewing in IE, too), but I hate the color of the blue. :/
Ah well. Change is nice. :)
Podz said:
Planet Podz is visited on a regular basis, whenever I need to find out how to do things in WP, Planet Podz is visited even more :).
I appologize, the site looks much better in Camino on my Mac. Good job. :)
Andre said:
Hehe, thanks Andre (I think :) lol)
[...] Khaled launched Broken Kode v5. [...]
It's a nice design, but it sounds me that your previous scheme was better. The first time I saw it I couldn't believe how good it was, and this one looks a bit inferior, I find it a bit loud for my eyes... Nevertheless, it's a good design
[...] Back in May when I updated the site, I called it Foundations. I eluded at the time that the reasons behind this name was because I was effectively taking a step back and start taking things in a simple manner. Build the site up at my own pace. No real rush in getting anywhere, just proper steps into crafting a site that I would be happy with. In order to do that I had to make sure that the foundations (see, there was a reason for that name) I lay were rock solid, thus making my life in updating the site less of a chore that it traditionally is. [...]
3 Pingbacks to Broken Kode V5 | Foundations