31Three.com Redesigned
This site has been looooong overdue for a redesign. I gave it a small refresh back in October of 2005, but the basic design has remained unchanged for the last three years. Three. Years. My business has changed a lot in that time, and my previous site just wasn’t keeping up.
The largest change I’ve made with my business has been shifting my focus from web development to web design. As a result, the vast majority of my clients are now developers. In order to reflect those changes on my site, I’ve dropped all mention of logo, print, and full website work, and have instead given much more room to showcase my web designs. I’ve also tweaked the copy quite a bit to better target the market that I would like to work with.
I designed the work page on this site first, because I really felt it was the most important. Most of my clients will make their decision based on my previous work, so I wanted to showcase it as large as I could. This helped me decide early on to go with a wide layout. If my work was going to span the width of the page, that meant the navigation would have to run horizontally as well. Design elements tend to look better grouped in odd numbers rather than even, so I stacked the portfolio navigation 3 high, and 5 across. This gave me the basic column structure to work from on the rest of the site.
After I had the work page done, I moved onto the home page. I actually went into the design of this site with every intention of losing the butterfly. It’s been around since version 1 and I’m not quite sure why. It doesn’t have any real meaning or function other than just sitting there and looking nice. I had the home page pretty much complete and was trying all sorts of different things to fill the large gaping hole on the top right hand side… but nothing else was working. Butterfly 4, Jesse 0.
The weblog section got a decent overhaul as well. The text is much more legible and inviting, and the sidebar gives me much more room to showcase stuff like creative job listings, links of interest, and a “font of the month”.
Am I 100% happy with this design? No. Will I ever be 100% happy with one of my own designs? Probably not. But I’m learning that progress is a much better goal than perfection. Especially when playing the role of designer and client.
There are still many tweaks and refinements to come. I prematurely launched the site today before checking it in IE, and well… you know the story. Many thanks to Drew Warkentin for helping me squash some of those nasty bugs.
Comments
Absolutely gorgeous. Brilliant design as always!
Very nicely done Jesse. I love what you’ve done with this redesign. One little bug I noticed however is when trying to click the “Comments” link on the front Weblog page, it just redirects to the same page instead of going to the comments. Just thought I’d let you know. Take care.
Looks amazing! Great job Jesse.
Ah, brilliant as usual.
Vista?!? Dem’s fightin words! ;)
Thanks for the kind words guys, (and the bug fixes). If you see any more please let me know.
Wow — it’s really, really great Jesse. Is that a 12-column grid I spot? Awesome work.
Clean, simple, brilliant – Congratulations! (Vista? Leopard!)
I have stopped by 31three on many occasions, and I must say that I’m quite impressed. Especially now that I see the Comment Preview mirroring what I type. Great work. Keep it up, Jesse.
I hate you, and I say that only because I love you and this design. It’s just my way to cope. :) Great job JB-C!
Very nice redesign Jesse. I love it.
Had a bit of an odd moment there. I kept on clicking my bookmark to 31three thinking I was going to the wrong website, twelve at night and no glasses on. I have to say, it looks beautiful even when they’re off. :) The butterflies prevail! :P
Queue drool now. Gorgeous
Absolutely gorgeous. Great work. It’s sites like yours that inspire me to keep pushing my work to get stronger and deeper.
Wow Jesse, very nice man! You are a giant among men. Keep pounding out the good work.
Interesting to hear that you’re changing focus to more design-oriented work. It definitely seems like a step in the right direction.
Again, great redesign. I do miss the little logo thing though.
As usual, nice work Jesse. If I were a butterfly I would want to be on your home page. Reminds me of a song my daughter likes to sing at church (http://www.butterflysong.com/) ;)
You make the web a better place to visit. I absolutely love this design! Congrats, man!
Brilliant, very well done. Congrats!
Really, really nice, Jesse. Beautifully balanced design.
congratulations – that’s a great looking design!
love the style and the butterfly song :-)
peace
O this is a great , love it . Well done mate!
Very nice Jesse
You have a few bugs on the contact page where ‘ has been replaced with ’ e.g. don’t
Looking really stylish Jesse!
Very inspiring little design.
Yups. Feel vista background a bit. but who cares? another great work from u jesse. Congrats.
I donno why, but i miss whe white color in here.
Beautiful…simply beautiful. Congratulations on the redesign and for raising the bar yet again.
Jesse, your work is very inspiring. The fact that those blue bars at the top of the site look like nothing else I’ve seen on the web is astounding to me. It’s like you’ve invented a new color. Great work!
So. Freaking. Awesome.
Congrats Jesse, nice realign.
Great move to the optimal scenario – I chose my clients.
Beautiful work as always. I always leave your site feeling inspired!
The new site looks great, I’ve never been too thrilled with the butterfly, but it does add a little feminem touch to it.
The site looks nice, it’s clean, crisp, with a little flare, navigation is easy, colors work well together, and it has a lot of subtle qualities.
Once again… amazing work! You’re always a fantastic source of inspiration.
If you raise the bar any more it’ll be in space. Always inspiring, Jesse. This is the perfect work/play site.
Beautiful! I love your work! It’s always fresh :D
Very amazing work. I’ll be ditching my RSS reader anytime you post a new article and instead will just come straight to your site.
Beautiful work as usual.
Nicely done Jesse. Inspiring as usual!
Very nice Jesse! I love the color palette.
Your change of focus is quite similar to my own.
I’ve become weary of running a full web development operation and since UI design is my biggest strength I am moving toward designer/developer collaboration as opposed to developer/client collaboration.
Great design and I just picked up the EE Control Panel theme and it is also drop dead gorgeous. EllisLabs should think about using that as the default theme for EE.
It’s a classic & beautiful design Jess. Outstanding!
GOOOOOOOAAAAAAAAAAALLLLLLLLLLL!
D
Thanks again for the feedback guys… it’s much appreciated. The transition to more of a design focus has pretty much already taken place, it’s just that my site is now catching up with me. I will still do xhtml/css coding, and a logo here and there, but they are no longer part of my core services.
Oh… and nice shot Drew… totally didn’t see that coming.
lol!
The site looks great Jesse. I understand the 100% satisfaction thing, but you’ve got to be around 98% or so.
Well done! I like the new portfolio section! Much better than the previous version.
I came around yesterday, confused, but nice suprise, looked at it for about a minute or 30, then all I could do was go to sleep and feel bad about my own redesign effort. Now you got me back to the drawing board. Thanks :(
;) very well done, and stick with the butterfly!
PS, hovering the comment-people-links, makes the border dissapear and reappear.. is that a peekaboo-feature?
Your design inspires me, but this line inspires me even more:
But I’m learning that progress is a much better goal than perfection.
that helps give me the kick in the rear I need ;)
Dangit Jesse. You make me envious every time you post about a new design on your blog, and this one is no different. Great job.
Amazing work…and very inspiring.
Was already impressed with the EE designs.
Do you have any plans in the future for a book or maybe presentations?
Love the new design.
But I must say i do not favor the butterfly. Personally I like the laptop you used to use as the prominent image on the homepage.
I love it!
I will say, my first thought of the header graphic was Vista as well :).
I love your use of Avenir- it is Avenir Black/Heavy right?
Do you render your fonts in Photoshop in Sharp, Crisp, Strong, or Smooth?
Stunning!
Really wonderful design, and I echo the comments above about raising the bar, etc. Your site and your work are always inspirations for me.
Wow. I am officially impressed. You raise the bar with every design you do. I love the blue bars at the top of the page, that is amazing.
Do you still have the ‘View Process’ pages? They were often very interesting to look at.
Again, great job Jesse.
Really nice – great homepage with great type. Use of colour outstanding.
Awsome.. really awsome!
Fanastic!
Beautiful Redesign! Awesome as the rest of your folio…
Gorgeous redesign, well done!
Benjamin: The font is actually called Gotham. Very close to Avenir though.
Oh… and yes… now that it’s been pointed out, I see the Vista references as well. :/
Nice work.
Suggestion: put in url links to the live websites in each project.
nice layout and design! (and thanks for the mention on your sidelinks!)
Very beautiful… Congratulations!
Very Nice Indeed! Kudos.
When I first saw this redesign in your office, instantaniously I was taken by how fluid the design is. Just a great feeling over all. I think the butterfly has become your unintended trademark. Not a bad one if you think about it.
Ic you are developing quite a fan base :)
Hey Jesse,
I love the new design! Looks fantastic! I’m a Mac-Man but quickly browsed the site in IE6 on Parallels as I had it open – just a minor thing (which you may already be away of) but the 3rd client example box on the homepage drops off and something funky’s going on with the right hand nav on your Weblog. May just be on my computer but thought I’d let you know.
Besides that, absolutely top-notch job :)
Chris
Hi Jesse, I’ve liked your work for quite some time and this redesign and your other recent work all look great. Well done.
Cheers!
Nice overall look and feel! Like the use of “whitespace”, so everything seems to breath.
To say I’m jealous of your typographic work would be an understatement.
I wouldn’t expect anything other than sublime work from a gentleman such as yourself.
Congratulations on the redesign, Jesse.
Hi Jesse, I’ve followed your website for years. However I’m little dissapointed that your new website doesn’t work in Windows IE6. The right nav column sits below the main content and just to the right.
Hello Jesse, I´ve seen your old site around various design galleries and always thought it looked very good. I saw your blog entries on the expression engine site, and I must say that I am becoming a big fan of your work. It´s always very professional and beautiful. It´s also inspiring to hear that your are a “work from home” dad so to speak.
Here´s hoping the best for you and your families future, and also for the rest of us.
Guðmundur
Really nice – well done!
AWESOME! I’m going to redesign my website.
Benjamin: I failed to mention earlier that I render my text as “smooth” in photoshop.
Davey: I had thought of putting links in my portfolio to the actual projects, however this time around I wanted the user to focus on my design work, not so much on my coding and development work. Many of the projects that I do now are 1 or 2 page templates, which means that the rest of the site may not reflect design decisions that I would have made.
Blake: The process pages can still be found in their respective weblog posts.
Shay & Others:
I think I have most of the IE bugs sorted out now. If you see any others please let me know. Thanks!
Awesome work, love it.
I added it to my Grid based design showcase ( <a herf=“http://www.designbygrid.com”>designbygrid.com</a> ), as it looks like you used a 12 column grid, as mentioned above.
Let me know if I’m wrong.
Thanks!
Awesome work, once again.
I must say, that I feel slightly stupid after putting in lots of energy into my own redesign: But hey, as you say, process makes a better goal than perfection. I find myself agreeing for my own sake;-)
Oh, and one more question: Where is the font of the month that you mentioned?
Very nice work and very inspiring…
Great work mate!
Jesse, very nice redesign! If you could add some content or design elements to the footer, it will be perfect. I find the footer area is missing something.
Anyway, congrats on the redesign!
Wow, tambien me impacto muchísimo el cambio en el diseño. Te felicito grandemente Jesse, tu trabajo te delata como un gran maestro.
Tu trabajo es muy inspirador.
Man..this is very nice work! Great work!
This is really awesome work and selling concept. Congrats!
But the top bg is very close to previous ms vista homepage.
looks clean and good. cheers to the new design!
Beautiful design, Jesse. I particularly like the vertical blue/green columns of colour at the top of the page. Well done :)
Love the colour scheme Jesse. Great redesign!
Jesse! Jesse, that is an amazing redesign! and the comment preview thing is so cool. I have never seen it before on anyones blog. This is SO exciting. Oh my GOD, your my hero. WOW. My dad is impressed too. He says your talented.
Great design! Looks smooth.
Love your new site
Love the redesign!
One thing that might be a nice add would be a larger image of the subpage when clicked on. Maybe throw a little Lightbox in the mix.
One more thing I just noticed “quesion” is miss-spelled on the contact page under “Or just say hello.”
Very nice Design from Site the colors and Navi is good. Perfect
Although the old design was timeless and I liked it very much, the new one looks great, too! Congratulations!
Very nice design. Very clean and very simple. I love the subtle shadowed lines you use to break up sections.
I immediately thought that it looked like a vista header, which in all honesty as a fellow designer – http://www.keydesignz.com – I love the clean lines in this site, but the mere mention of Vista makes my stomach churn. Nice way to add comments, see them as you type. My site is due for a serious redesign, as well as doing away with events and moving them to another site altogether. I am finding that you need to specialise in business otherwise it can get too much to be constantly chasing all different forms of work. This site uses less clicks and is more simplistic, but I still liked the look of the old site. As a heads up, the butterfly to me symbolises change and beauty – which is what you do, you make clients websites beautiful after they go through the cocoon of development. And they are definately in for a change. I think you should use it in some form of a logo for yourself on your site. I think it is a powerful reminder and very symbolic of what you do. Which in your subconscious is probably why you left it on the site all this time. :-)
I like it, but I did not like the part where you show your work. Small thing, I like a link to the actual site, so that I can see it live.
Design seems good across browsers. See here. http://www.browsercam.com/public.aspx?proj_id=351566
Great work in general, but you already gathered that from the first hundred comments. :-)
Very nice! I’m probably in the minority by saying that I liked the last design more, but it might just be that I was just attached to it. The Work section is really improved though.
What I like most about your work is all the attention you put into detail. I always get amazed about how much care you put as if you never let anything slip by.
So Impressive
A great design!!!
I love it!
I love the wider layout. This version looks much better on my monitor than the last one! Inspired to re-do mine as well now! Congrats! :-)
Very nice
Nicely done.
Top notch design Jesse, well done.
Great design, Jesse! This is my first time here and I have the feeling I’ll be back quite a bit. Thanks for the inspiration!
Jesse, the old site wasn’t all that moldy at all; I still liked it. But this redesign is certainly fresh and very clean.
Fantastic work, you’re one of my favorite designers these days.
Absolutely gorgeous! But what about adding a favicon ?
Oh, and some links to the sites in your work library.
Very sexy :) I love it, the attention to the typography is great to see. Every thing is so clean and well polished off, good job!
I’m viewing this in “Safari on Windows”, slap, and the type looks amazing.
Far out!! This is an excellent piece of work! Very nicely done…clean, crisp, and clear :-) Am loving it
Awesome job!
Can’t say I didn’t like the previous one tho!
I can’t help but wonder, are you refraining from making any other posts because you want to see just how many comments you can rack up on one entry, or are you just too busy????
I am indeed a tad busy right now :)
I’ve been working on a post, but it will still be a few more days at least. I’m a slower writer than I am a designer. :/
Fantastic as always Jesse! Love it!
really nice work… i like header.
very nice! and pretty… am I allowed to say it’s pretty? :)
Very nice ;), it was worth the wait…
Nice and clean design. Like it a lot!
And a great sentence: “progress is a much better goal than perfection”. I wish I remembered this when frustraction comes.
Regards
Great job as always Jesse, even if I think the previous version looked better… might be the Vista-y-ness of this one… ;)
Keep the butterfly!
wanders off to redo own site redecorating sketches — again
I think this looks great! Nice job on the colours and that butterfly looks really cool. Yeah I agree with Kevin, the header does remind me of the Vista look, but it’s still good =)
大家好朋友，I‘am from china 嘿嘿
Good work! :o) Simple, with nice coulors :)
Great redesign Jesse! I am a fan of your work ;o)
Here is just one suggestion I have for improvements:
Set an ID on Sidelist Archives and let the View Archives in the Side Links jump directly to that ID.
Your article in Digital Web Magazine opened my eyes to ExpressionEngine. Thanks for a good read!
Looking good :)
Last design was good too, but as they say new products are always better than the old ones as you add bits of your newely acquired skills, knowledge and innovation to them.
Help Wanted
Very nice work, although the colors in the header tend to remind me of Windows Vista. ;)
Kevin - May 23, 2007