Breaking All The Rules of Design

64

Many of you who’ve stumbled upon my About page know that I am a self-taught web/blog designer. I don’t have a degree in computer science, nor have I ever cracked open a book on CSS or WordPress For Dummies.

Call it what you want, but I prefer to say that I have attended the school of Trial and Error. Everything I’ve ever done with WordPress has been the result of experimenting, and the excessive use of the Undo button on my text editor.

When people email me and ask what advice I would give for those who are new to WordPress and customizing themes, I give them the same response:

Just experiment - change code, and see what happens.

And so here I am, breaking all the rules of fundamental web design - and what you see now is the result of a two-day experiment that began with a Starbucks latte and a 2-column version of this theme. Ten hours later, I have redesigned my website, without any study of graphic design or typography.

The Road Not TakenI prefer to consider myself a raw artist - someone who just opens a canvas and paints what I see, so to speak. I realize that many of you may not think my new design is appealing, and breaks the rules of grids or some other theory of relativity.

Years ago when I used to write poetry, I seldom edited what I wrote - primarily because I wanted to capture the honesty of my thinking, or in this case my vision.

When I was younger, I thrived on the notion that I could be different. That I could be like Robert Frost, and take the one less traveled by.

And that has made all the difference.

Comments

64 Responses to “Breaking All The Rules of Design”
  1. Craiger says:

    Awesome new design! So, did you wear the letters off the undo key?

  2. Craig, yes I did. The backspace button is hardly recognizable anymore, and the Undo icon on my text editor is sore from all of the times I’ve hit it.

  3. Lisa says:

    Brian - I am loving this new look on your site! Very well done. I like the way you’ve laid out the post title - content - meta data in the three-column fashion. Striking :)

    Though…it could use a little pink ;)

  4. Lisa, you should know that you will see this site dressed in pink once October 1st rolls around. Already have thought about that!

  5. Brian, I think you have something here. Horizontal—they way of the future. ;)

  6. Rhett, thanks. This time around I wanted to break the “norm” of my site design, and a lot of the elements have done that.

  7. Karen says:

    Love it. Very simple and clean, interesting lines - I SO want to learn Wordpress…I’m in the process of moving my design business to Wordpress so I can play around in the templates more.

  8. Karen, although I never did it back in the day, I would highly suggest purchasing WordPress for Dummies by Lisa (who just so happens to have a comment here.) I know she’s working on the revised edition of the book, and there is supposedly a lot of new goodies in there!

  9. Mark says:

    Wow. I thought this was going to be some more mumbo jumbo but this is the best web design tutorial I have seen so far. I am always doubting if I will be able to become a good web designer since I have no professional schooling. But this gives me hope.

  10. Mark, glad to hear it. Yes, the tutorial is simple - for those of us who aren’t book smart (like my wife) we must rely on our sense of intuition. That’s what I did when I first got started, and fortunately it has worked. The key is identifying if you’re a book person or a hands on person.

  11. Tracy says:

    Brian, I agree with Rhett. Way to go!

  12. Ian Stewart says:

    Looks good, Brian. I love how you’re always changing up your design. Each one fairly different. Each one always good.

    Curious though, where’re you “breaking all the rules of fundamental web design”? Everything looks cool to me.

  13. Tracy, many thanks. Glad you agree with Rhett!

    Ian, thanks as well - appreciate the continued support. In terms of breaking the rules, I guess I was saying that I didn’t do it by the book and may not have everything lined up and gridded (if that’s a word) in a way that those who have professional training would have done it.

  14. F**k me! This is a WP theme and a half, if I’d just visited your blog for the first time then I would never have thought you could do so much with the amazing WordPress!

    You really doing some powerful things with WP, and it’s something GREAT to watch! I love the new look, and it’s got new things that I never thought would be possible!

    Fantactic work Brian, it kinda puts my design to shame! HEHE Although it’s a design I like, I wish I could create results like you do!

    Way to go Brain! :D

    Thanks
    Mark

  15. Edde says:

    Nice! Although there was nothing wrong with your previous design. This one is nice and “sober”.

    Code is poetry too ;)

  16. Mark, don’t know what to say - although I kinda admit I love the way you responded! (awaits IM from you begging to get a copy of this theme.)

    Edde, I know there wasn’t anything wrong, but as Ian stated, I change my design a bit. I like to keep things fresh, and push myself by using my own sites as a place to experiment with code/layouts.

  17. Margaret says:

    I am smiling at the sight of how you’ve revolutionized Revolution and think this iteration really suits you. Over here, experimentation is the order of the day, too. Here’s to more happy experiments!

  18. Matej says:

    Really nice post, I like it

    By the way, great new typography, simplicity… great style. To bad you wont make premium designs like that…

  19. Margaret, I’ll cheers to that as well - thanks!

    Matej, don’t count your chickens before they hatch - like I said in a previous comment, I was using this re-design as a way to test out some things. Typography included. Revolution might have some serif-ism at some point in the near future.

  20. Brian, this is lovely. Both the words and the design.

    Your post reminded me what I tell my new mediation students: I’m going to teach you a preliminary form, maybe like your dance or music teacher taught you when you were 5. That form isn’t to be used forever. It’s a place to hang some learning hooks. Your job will be to take the basic form and make it your own … or toss the damn form completely and create something new.

    You tossed the damn form.

  21. Mike Smith says:

    I like the new design. The only thing I am not too keen on is the slant on the right side of the header. Other then that, very clean. and congrats on the trial and error school, I graduated from there as well :)

  22. Tammy, love it, love it, love it. Glad my words resonated with you and your outlook with your business. I have an intellectual side that I don’t spend enough time getting in touch with, and hope that the new look of this site will inspire me to go back to what I love doing - writing.

    Mike, thanks - the slant was something that I wanted to do so that a vertical line didn’t just stop the black from moving across the screen. I thought of making it subtly end with a gradient, but I wanted to avoid those in this theme.

  23. Mike, to follow up and for fun, I’ll play with Photoshop and see what the site would look like with a full width black header.

  24. Love the new design. It’s very minimalist and does a good job of making the important information stand out.

  25. J. Sperling, thanks - was hoping to keep it minimalist this time around, I have a tendency to over complicate things at times.

  26. Don Farland says:

    I appreciate the design, but I’m not quite sure what I think. I guess that is the very definition of ‘breaking the rules’. I’ll save the hero worship for my Dad and others, but you really have been an inspiration. I have yet to actually try my hand at creating something new from scratch, but I was beginning to think that I was some sort of deviant for just ‘winging it’ and learning what not to do as a means of learning what I should do.

  27. Don, I don’t have a problem with you possibly not liking it - but don’t take that the wrong way. It just means that I succeeded with my attempt to make something different, possibly odd, in this case!

  28. Mike says:

    New design looks nice, plain, simple.

  29. Melissa says:

    Great new design Brian. I really enjoy your Revolution themes as well. I wish there were more designers like you out there.

    Was also reading your About Me page for the first time today and it’s great to see other Christians openly talk about their faith on their website.

  30. Melissa says:

    Also I meant to say, if you ever do release this theme, I would LOVE to have it!

  31. EC says:

    Nice job. Simple, clean, well done! Keep breaking the rules..

    I am still in the “Trial and error School”, but in the branch of Panama ;)

  32. Mike, thanks, I appreciate it.

    Melissa, glad you like it as well. And I’m glad that you found the about page - I really enjoy knowing and meeting other Christians online, so it’s fun to see who comments about that page of mine!

    EC, thanks - there’s no boundary with the school of Trial and Error. It’s open to all people!

  33. Joe says:

    Outstanding! Love the new look.

    You’ve definitely raised the bar as well as given us fresh inspiration. Makes me want to go get a latte and start tinkering.

    Congratulations on a job well done.

  34. PJ says:

    I love the redesign. It’s inspiring to hear that you’re a self-taught web designer, especially as I’ve been learning about web design and wordpress by reading, peeking at source code and trying things out.

  35. Josh Bowers says:

    Looks good to me, only thing that bugs me is the feed thing is all the way on the bottom of the page, a place few people look for that kind of stuff.

    How many times of you redesigned your site this year?

  36. Susan says:

    Wow Brian you did an outstanding job with your trial and error. You know that is so much about life isn’t it? We learn by trial and error!! I have to tell you any time I have tried to oh lets see what this will do, never turns out good!!! I think I am code challenged :-)

  37. Joe, thanks - nothing wrong with craving a latte!

    PJ, more power to those like us who roll up our sleeves and get our hands dirty. I’m really hoping that this post is the start of a lot more writing about WordPress and design for me.

    Josh, thanks for the suggestion - I added the form as well on the sidebar, for better visibility. As for the redesigns, at least 4 or 5 in the past twelve months, but I haven’t rebooted since March or April, which might be a record.

    Susan, there’s no such thing as code challenged - just code-fearing. Really, as long as you back up files, what’s the risk in trying something as you can always resort back to the backup file. But judging by the sites you’ve cranked out over the past year, I’d hardly say you are code challenged!

  38. Joy says:

    Love the new site. Your code is as beautiful as your words. May I buy you another latte? (smile)

  39. Joy, sure, lattes are always welcome! (smile back!)

  40. Would you mail me your sunglasses? I’ll pay for postage. They are cool and would look good on me Brian.

  41. BSK says:

    Amazing stuff! You got imagination, and Albert Einstein agrees is it better than knowledge.
    Keep rocking, and don’t you ever give up on the Lord Jesus Christ and the Father Jehovah! Be blessed

  42. Steve, set me up with a rental home in Hilton Head and we got a deal! Or it might be cheaper to visit this site and buy them yourself!

    BSK, thanks so much!

  43. Brian, Congrats in the new design, looks clean and organized, now… why in the world a designer like you want to copy the google favicon as a logo? Do you need more lattes for inspiration? :o)

  44. Fraser, thanks so much.

    Carlos, appreciate the feedback. As for the favicon, I actually had no idea they were similar until you pointed it out - I just liked the font and ran with it. I will point out the fonts are different as well…

  45. I’m a sucker for white space. Like it lot’s, Brian, it breathes and has a spacious feel to it.

    Spreading each post across 3 columns is a nice touch as well.

    Looking good.

  46. Chris, thanks for the comments, my last theme felt confining to me - sorta made me feel claustrophobic. Now, like you said, we can all breathe in the whitespace!

  47. Congratulations with a beautiful new design for your blog.

    Actually, despite what you said about not following the rules of design and typography, it looks like subconsciously you are soaking them up and are influenced by them a great deal.
    The post titles on the left and the post metadata on the right remind me of Jon Tan’s blog, though the comments area looks quite different.

    Btw, you should strike a deal with Starbucks for being such a great advocate for their coffee ;)

  48. Remkus says:

    Like I told you in my email, I really like your offbeat new styling of your homepage and the fact your posting more :)

    I needed to get used to the slanted header, and I don’t think I will ever use it like you do, but I have to admit now that the theme handles it great .. if that makes any sense at all :)

  49. Remkus says:

    oh.. and thanks for the quick reply on my email this morning. Well… your morning anyway ;)

  50. Vivien, totally busted with the layout - Jon’s site was definitely where I found inspiration with it. I did try to style things up a bit differently, and his site is much more narrow. But yes, that is how I came up with the idea.

    Remkus, sure thing. You’ve been one of my top supporters over the months, so I appreciate all that you say!

  51. Barry O says:

    Brian,

    I love your work. I use your themes all the time. I must say though this new theme does not do you justice.

    I noticed your new slogan, “Breaking the Rules of Design”. Well… There are some rules that should not be broken. Because if you do break them it causes confusion for your visitors.

    I think a major one that you’ve broken here is the eye path on the banner. Our eyes are conditioned to look at a graphic or logo first then move to the right to read what’s next to the image and then down the page.

    The eye path is reversed on your banner and I find myself being drawn to the top right hand corner of your page and there’s nothing there. And when I go down from there it’s not your post I see but rather your right side bar. I guess if you had an opt-in box there that might be good.

    Sorry man. Overall I think this design is kind of lame. But I LOVE all of your other work. :)

  52. Barry, thanks for the feedback - I do appreciate your willingness to be honest. Take a look at this image to see how the header would look if I reversed the logo/tagline concept, and let me know if it would work better.

  53. Eric Hamby says:

    I think self tought is the best way. i run http:jericosystems.com and has you can see i redid the wp-newsmag theme found here http://www.wp-magazine.se/free-wordpress-theme-wp-newsmag/

    I have worked up an impressive portfolio without ever going to school or anything, just opening the code and going at it.

  54. Rob says:

    You could always release your previous site as a premium or free theme…

    Just a thought.

  55. Barry O says:

    Brian,

    I think the header works much better that way. I actually notice the quotes now where as before I did not because my eye was immediately drawn past them to the logo.

    Barry O.

  56. Jauhari says:

    Wow, Nice point of view brian. Thanks for sharing.

  57. Lawrence says:

    Brian

    I’m no expert when it comes to design and coding - my ignorance is pretty encyclopaedic - bt I am constantly on the lookout for the design becuase I know what I like and I know I haven’t found it.

    Until now. This is the best personal site I have come across. The minimalist, clean look with plenty of space and infintiely readable type is a refreshing change. But I love the whole ambience of the site: the black and white, the slightly brooding yet not at all sinister look ..

    Seriously bowled over!

  58. Alexey says:

    Hi Brian,

    Outstanding like every theme you have done.
    But I can not believe that you have not studied design at all. Maybe it was not web design, something else like architecture or something like this?

    P.S. I do not know either you become my email about localization, sorrowfully I have no feedback from you.

  59. Sam Paul says:

    Hi, Brian I love your website and designed.I used your design on my website but it doesn`t look good in explorer. Would you look at it and tell me the problem?Maybe I messed up the css?
    Thanks.

  60. sweeboo says:

    I forgot to say that your current website layout and design is awesome, simple and creative. remind me of the old wordpress.org

  61. mkjones says:

    Nice layout mate, but how about some colour :)

Trackbacks

Check out what others are saying about this post...
  1. [...] a result of my recent site redesign, I’ve found myself in quite the contemplative mood of late - perhaps it’s also a result [...]

  2. [...] I’ve done it again - and trust me, for good reason. I won’t try to dismiss my obsession with frequent redesigns [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!