Broken Kode | Broken Kode 4.0: Saida Part 1

Broken Kode 4.0: Saida Part 1

Version 4.0 has been a long time coming, as I’ve been sitting on the design for at least 3 month now. The idea popped into my head sometime in May, just something snapped and the idea began to grow. By the time I came back from holiday I knew exactly what I needed to do. Unfortunately due to work and life just getting in my way I was forced to put it on hold.

Reason for Redesign

Emmortel was a failure. Not for anything other than the fact that I just couldn’t force myself to take care of two websites, and provide them with the same attention and loving. It’s a change of philosophy for the this site as I effectively will be my blog and portfolio at the same time. It took me a good long while to accept that this was the proper route to take. I truly admire Joen for being able to consistently push out his monthly installments without fail. That sort of commitment is something I can only hope and dream of achieving. This is effectively my attempt at that.

The one section of the site that is still in active development is the Gallery section. I’ve got an slight idea of what I want however I’m not 100% there yet. Hopefully that should get sorted out in the coming days.

Code

Originally I was planning on doing what I’ve done with the previous 2.5 code designs, which is mainly taking Rin or Manji and hacking them to death. So how this didn’t feel like the right way to go for this particular version, and I went about writing the code from scratch. One of the main reasons I love doing a redesign anyway is because it improves me as a designer and coder. I can see the steps I take forward every single time I decide to go down that road.

This project also marks the first time I’ve used PHP Designer 2005 and HTMLGATE. Both fantastic applications that deserve your attention. Sure they’re not perfect as there are several bugs that need to be ironed out, but as website development tools go they’re both exceptional tools.

Inspiration

Yeah right, like I came up with this stuff without nicking ideas of people :). I just wanted to take the time and acknowledge the works of several people that inspired me when I wasn’t feeling particularly creative. Joen’s Noscope, Bryan’s Avalonstar, Khoi’s Subtraction Phu’s Ifelse. Thank you gents couldn’t have done it without you (and in Joen, Bryan and Phu’s case really couldn’t have done it without them).

Future modifications

There is bound to be many modifications to come, as hopefully people will point out funky things happening in their browser, and the more I look at it all and take it in the more I’ll try and find different ways of dealing with things. I felt that it was time to release it and then tinker slowly but surely, with my self imposed pressure being elevated. Now to make sure all the plugins work before I go on and sort out the links.

40 Comments

Wow, looks fantastic Khaled! I’m insanely jealous:)

1 Phu
20/8/2005

Looks great, I love it :D — Preferences is broken BTW.

2 Michael Heilemann
20/8/2005

I look at something like this and realise that I have so very much more to learn.. The design is very well executed - colour me green with envy, too. :)

3 brendan
20/8/2005

Really nice redesign. Keep up the good work.

4 Yannick
20/8/2005

Great job Khaled. I love it.

5 David Babylon
20/8/2005

Fantastic graphics Khaled. I love the colors you’ve gone with here. Keep up the good work!

6 Shawn Grimes
20/8/2005

I’m impressed - it looks very slick. The only quirk I found is in your section headers (ie: Inspiration, Code, Future Modifications, etc). They blend in with the text, and it may be possible to give them more distinction. But then again, that may be personal preference PLUS I’m not a designer :) I just figured you would want some feedback as well. Great work!

7 Ryan Campbell
20/8/2005

Thanks guys, really appreciate all the kinds words.

Michael, yeah all my ‘pages’ are pretty busted right now. I’ll be sorting them out throughout the weekend.

Ryan, I’m in the process of sorting those things out, along with blockquotes, cite and a slew of other selectors that need to be sorted out as well :). Baby steps I guess.

8 Khaled
20/8/2005

lovely! I love it.

9 kristin
20/8/2005

Really fantastic. Very clean and spaced out (which I find is always important). Reminds me of a cartoon. Great job.

10 Sujay
20/8/2005

Dude, how can you call us inspiration when this completely blows ours out of the water. You’re helping me with my next site dude, it’s settled.

11 Bryan Veloso
20/8/2005

Stellar job. One of the best blog redesigns I have seen in awhile.

12 Chris Gonyea
20/8/2005

Khaled, very slick, of course. I love the way the header graphic works, and of course, it’s lovely. You’re a fantastic illustrator. You’ve given us all something to aim for with our own next redesigns.

13 Chris
20/8/2005

Real quick, the design is named for the city in Lebanon, Sidon, yes?

14 Chris
20/8/2005

Love the choice of colors, very slick work.

15 Christopher
20/8/2005

As beautiful and elegent as ever Khaled, I can only join in the echoes of jealousy. :)

16 Zenith
21/8/2005

As always, you never fail to astound, please and awe.

I am looking forward to watching the site really take shape as you bring more sections online.

17 Chris J. Davis
21/8/2005

Chris - yeah it’s my hometown. That’s where I drew the drawing and came up with the concept effectively. I’ll talk more about it in Part 2, after I published that I realised there were a few other points I wanted to make.

18 Khaled
21/8/2005

Beautiful!

I’ve already said it in the pingback, I love it. With regards to the actual details, I love how little it looks like the usual two-column blog layout that I’ve come to expect most everywhere. Not only have you cleverly broken the fatal “verticality” that most blogs (including my own) suffer from, but you’ve done something very interesting with the sidebar as well.

What really interests me is your “pictures” section. I had never even seen your “emmortel” site, but if it’s a pointer as to what’s ahead, it’s going to be great.

Thank you, by the way, for your kind words, I truly appreciate it.

I’m really looking forward to seeing how the rest of this unveils.

19 Joen
21/8/2005

Ã�stas son las pÃ¡ginas que hacen que gente como yo nos interesemos por el diseÃ±o.
Enhorabuena Khaled!

20 black_soul
22/8/2005

I’d like to be the 23rd person to say this looks fantastic. Great work.

21 Ryan
22/8/2005

Yep, I like it, too! Great graphics and a fresh colour scheme. However I think the typography really needs some major improvement.

22 Sebastian Schmieg
22/8/2005

Entaxi.. kalo einai…. eikosi teseries pipes apo diaforous… sou vgalane olo to zoumi… nevertheless it is looks good… very good… pare ali mia pipa kai apo emena!! I like what you have done with coco too and as much as I hate to admit this you seem to have a knack at the way you match and mix your colours. I also like the layout of the pages, even though I am still used to the previous version. Tous titlous gia kathe section pou greafies, pistevo oti prepei na einai se bold font kai, in leaving a comment of this length my text has managed to ‘jump’ out of your designated writing box…. sort it out!!!!! Otherwise marks FOR BROKENKODE VERSION 4.0… I would give it ONE!

23 Stahis
22/8/2005

Sebastian, which parts do think are lacking, typography has always been a weakness of mine, and it doesn’t help to have your hands tied on the web, but that shouldn’t really be an excuse ^_.

24 Khaled
22/8/2005

Khaled, for body text set in Trebuchet I recommend the following settings:

font-size: 13px; /* whatever this is in “em” */
line-height: 20px; /* dito */
letter-spacing: 0; /* instead of 0.06em */

I hope this helps.

25 Sebastian Schmieg
22/8/2005

Wow! Very nice. :)

26 Bilal
22/8/2005

Thanks for that Sebastian, I increased the font from 0.7 to 0.8em and then got rid of the letter spacing and it really does seem to read much better now. A bit bigger but I think that’s a good thing.

27 Khaled
22/8/2005

Now I find it much easier to read. Btw. the styling of your own comments rocks as does the colos scheme of your 9rules logo although I don’t like that 9rules-network thing in general.

28 Sebastian Schmieg
22/8/2005

Just to make a quick comment.. Fantastic design. The nine rules logo is absent in IE (work computer). Also, the word preferences is also not visible at the very top. I could take a screen shot or two if you want?

29 David
23/8/2005

A few further comments:

I’d like it if the header, when clicked brought me back to ‘home’.
I like the styling on this form, but the text exceeds (on top of) one characters to the right of the textarea (in Firefox on Windows currently).
I think it would be a good idea to tone down the footer stuff a little.

Otherwise much of what you have done are things I have scheduled for my own redesign, and that’s says it all really :)

30 Michael Heilemann
23/8/2005

Oh yeah, and perhaps it would be cool if you used sliding doors to fade off the “sidebar’s” top and bottom fades?

31 Michael Heilemann
23/8/2005

Thanks Sebastian, the 9Rules guys are pretty cool bunch of guys, and the logo rocks, just had to have it on the site in one capacity or another.

David - Yeah, IE has been giving me several isues which I’ll be trying to hammer away but I’ve got to be honest it’s not really a priority.

Michael - I’ll have a look into the header thing (you probably have a point from a usability point of view).

Form’s been sorted out, how embarrassing ^_.

In the individual posts you might have a point.

Sidebars, not really sure what you mean by the sidebar’s top and bottom fades.

32 Khaled
23/8/2005

By the sidebar fading, I mean: At the moment the background (a line with some gray shadows on either side) is simply cut off at the top and bottom, right? Well if you use the ’sliding doors’ technique, you can overlay two transparent fade white fades at the top and bottom, which make them not look cut off. Make sense? Else I’ll mock it up in PS.

33 Michael Heilemann
23/8/2005

Not that I am a design guru by any means but could you not just define a #top and #bottom division (or maybe even classes) with a different background image?

34 David
23/8/2005

Wow Khaled

You have really out done yourself buddy. Love the new look.

35 Jennifer
24/8/2005

It’s been a little while since I stopped in, but Khaled this is a wonderful design. Your best yet! Kudos!

36 This Is Not A Love Story
25/8/2005