Digital Web Magazine

The web professional's online magazine of choice.

Redesigning the ExpressionEngine Site : Comments

By Jesse Bennett-Chamberlain

March 20, 2007

Comments

Dave Foy

March 20, 2007 2:00 AM

A masterclass. Thanks for the beautifully detailed and incredibly insightful write-up Jesse, you’re an inspiration.

Neil Scott

March 20, 2007 2:09 AM

Thank you for helping to demystify the design process. Client interaction is crucial but can be incredibly awkward. This article presents a model of how it should be.

Daniel

March 20, 2007 2:09 AM

Very good article, it is interessting to read about the exactly developing of this layout.

matthew Smith

March 20, 2007 2:32 AM

Your personal map through this specific design process will give many of us wings. I have found travelling from complete naivete to even rudementary knowledge of design an incredibley awkward path, especially when taken on my own (as opposed to a structural/educational approach). This kind of article goes a long way to helping me think more critically about design and client relationships. I’d love to hear more about your beginnings someday Jesse. Find out how folks like you start out like folks like me :)

Matthew Pennell

March 20, 2007 2:34 AM

Fantastic article, Jesse – it’s fascinating to get under the skin of a particular design and learn what went into it.

David Horn

March 20, 2007 2:42 AM

Excellent write up – thank you. What an insight, and love the new design(s) too – great stuff.

Steven Hambleton

March 20, 2007 2:54 AM

Hi Jesse!

Excellent writeup. Were you involved in the EE side of things too or just the design mockups?

If you did I’d love to see how you tackled this side of things. Perhaps you can add that to your own website?

Michael

March 20, 2007 3:10 AM

Liked it very much. Captivating article – not common for technical text.

Robert

March 20, 2007 3:54 AM

Very nice article. I really liked it a lot and it gave me a few good pointers. Thanks!

todd

March 20, 2007 5:23 AM

what a great article. I’m always fascinated to see how people do wireframes. for sitemaps, i’ve used OmniGraffle on the mac. it’s pretty cool and much better than powerpoint bubbles. Is there any that you recommend?
Lastly, thanks for the tips on the icons! those are two resources i never heard of. Keep up the good work!

Stuart Frisby

March 20, 2007 5:55 AM

Great article, and a great design. It’s fascinating to see how other people go through the process of design – especially when the outcome is as special as the EE site, which is probably one of my favourite site designs of recent times.

Stuart

Carolyn Wood

March 20, 2007 6:05 AM

You’ll all be happy, then, to know that a Part Two is in the works for this redesign article.

Matt

March 20, 2007 6:12 AM

Nice article, I am sketching ideas whilst I type this!
Good news about part two.
(You may wish to fix the myfonts.com link)

Richard B

March 20, 2007 6:26 AM

Jesse is a first class web designer and I loved this write up. Thank you so much for bringing this article online, the insights are so helpful. Excellent work – and I must add that Expression Engine is KING!

Caroline, would be great to see more of the same on here in the future. Great work.

Jesse Bennett-Chamberlain

March 20, 2007 6:34 AM

I was a little nervous with this being my first article, so the positive feedback is very much appreciated! Thanks!

Steve: I was mainly in charge of the design, and in the final couple of weeks I also got my hands dirty doing some markup, but I didn’t do too much in the way of integrating the sites into EE.

Todd: I personally use Adobe Illustrator, because I like it’s integration with Photoshop, but I would recommend using whatever tool you are most comfortable with.

Neil Turner

March 20, 2007 6:37 AM

As we say in the UK – what a belter. Thanks for the insight.

PK

March 20, 2007 6:42 AM

Thanks for very interesting article. Can I translate your article into polish and publish at my webblog? I will back here and check your answer. Keep up the good work. Greetings
i will put it here:
Pozycjonowanie

Carolyn Wood

March 20, 2007 6:55 AM

PK, the person from Poland…contact us about this throught the Letters to the Editor contact form, so we can tell you the details. Thanks!

Tim Kadlec

March 20, 2007 6:58 AM

Fantastic write up! I have always really enjoyed when designers take the time to share the process. There is so much that can be learned from seeing how other designers go through the design process. If this is what the Working Designer section is going to be like, this could quickly become one of my favorite feeds.

PXLated

March 20, 2007 7:03 AM

Glad to see Rick came to his senses and went with your revision of the footer. Don’t you just love clients that have Photoshop installed on their system ;-)
Nice job Jesse!

Richard Lennox

March 20, 2007 7:05 AM

An interesting read even for a developer and not a designer. How does this all fit together if you are your own client?

Carolyn Wood

March 20, 2007 7:10 AM

Richard,
We’ll have one coming up that will cover that situation, I believe. (I never count my articles until they hatch.) Glad you like the article.

me

March 20, 2007 8:18 AM

Doesn’t that text running under the e logo in the “We’re running expression engine!” section look a bit oprphaned and awkward?

Maybe its just me ;-)

Cool design…

Jesse Bennett-Chamberlain

March 20, 2007 9:21 AM

PXLated: I thought that the actual technique used on the EE logo was executed fairly well, the problem was how it related to the other elements on the page.

me: Good eye! I didn’t quite catch that before but now that you point it out it seems obvious. I think the logo either needs to be a bit smaller to allow more text to flow around it, or we need to add a tad of margin to the bottom of the logo to stop the text from wrapping under it. Good call.

Reese Spykerman

March 20, 2007 9:34 AM

What struck and motivated me was the section on attention to detail. It’s one of the things I’ve always admired about Jesse’s designs, and I’ve long suspected that he tweaks and tweaks details until they are finessessed “just right.” This confirmed that. :) It also echoes something Peter Flaschner wrote in his blog today—great design takes TIME.

By the way, Jesse—how long did the process from wireframe to end game (excluding coding) take?

Anand Chandrasekaran

March 20, 2007 9:36 AM

Great looking wireframes. What do people on here use to do wireframes? HTML? Photoshop? Personally, I use VISIO.

Lea

March 20, 2007 9:49 AM

First class article, Jesse. I was really looking forward to seeing how you did all of this. So detailed and structured. :-)

Ray McKenzie

March 20, 2007 10:20 AM

For me, one of the best articles on not only HOW you designed the site but WHY you did what you did with certain elements. Well done! I’d read more articles from you ; )

Kim Kruse

March 20, 2007 10:22 AM

Fantastic looking redesign on the EE site. Super article. I want to be you in my next life :)

mrs. camacho

March 20, 2007 10:23 AM

Jesse, I watched this process over Leslie’s shoulder, cheering at the beautiful design (even the wireframes gave me goosebumps!) all the way. It was great to read your side of the story! You are a brilliant designer and Ellis Lab is very blessed to have you involved. :)

Dan Mall

March 20, 2007 10:41 AM

Great work, Jesse. ExpressionEngine (as well as the rest of the EllisLabs stuff) is spectacular, and deserves a spectacular website, which you’ve certainly delivered. The most useful part of this article for me was how easily you gravitated towards resources you can count on, like IconDrawer and iStockPhoto. The newly designed EliisLabs sites are a testament to how the details like illustration and icons accentuate an already brilliant design.

J. Smith

March 20, 2007 12:21 PM

I applaud you Jesse for the great new designs for EllisLabs. They are truly inspiring! In addition, thank you for sharing your process. I’m particularly enlightened by how important good wireframes are at the beginning of a project. Now I just have to get comfortable using them.

Chris

March 20, 2007 12:31 PM

So after you’re done with the design whose responsibility is it to turn that into markup?

Raphael Bek

March 20, 2007 12:45 PM

I love redesigns! Good work. I have not seen the site before and didn’t know that Expression Engine was a CMS (I thought it was a desktop application) but I stumbled across the EllisLab site recently and I just loved the design. (I think I read about the redesign at some other site). Very cool….I love the design; It looks so smooth and it’s not too much and I really like to look at this site but honestly ExpressionEngine isself is not very interesting for me. Keep on the good work!

Rick Ellis

March 20, 2007 1:05 PM

PXLated: Glad to see Rick came to his senses and went with your revision of the footer. Don’t you just love clients that have Photoshop installed on their system ;-)

The night before the launch Jesse was out with a friend and unavailable. Due to our time constraints we took some elements that Derek Jones had laying around and built that section. My first choice was to have Jesse do it, and in fact, we treated it much like a place-holder, knowing he’d probably re-do it once he as available.

Sometimes the process of building the actual live site reveals things you didn’t think of during design. This section, which originally had links to some of our featured sites, is a good example. As I stared at the new site it occurred to me that we were not touting the fact that we were running EE for our own sites. As marketing message this would be very powerful given how densely featured our site is. It also, in my opinion, creates a more focussed message on our home page then simply listing links to notable EE sites. I had this epiphany at the 11th hour, the night before launch, so there wasn’t much time to get it in place.

Working with Jesse was a fantastic experience. I consider Jesse to be a very cinematic designer. His designs feel big; they command attention. His detail work is also better then anyone else I know.

In another life, before becoming a software developer, I was a web designer. I’ve been on both sides of the photoshop screen, so to speak, so I know how challenging it can be to remain true to your artistic vision while honoring your client’s wishes.

That’s why it is so critically important to choose a designer carefully; to pick someone who’s instincts and artistic sensibilities you implicitly trust, and who clearly understands your goals and message, and can bring it forward better then you can. If you have to intervene at every step of the process, you’ve chosen the wrong designer. Or, conversely, if your client is micro-managing you, maybe you should find a different client. It’s really about trust.

For the most part I stayed out of Jesse’s way. Most of my input (and that of my team) was structural, focusing on the broad strokes. The design details were left up to Jesse. Really, that’s how the design process should go, and it’s a testament to how good Jesse is that I felt confident to leave him alone. I had no doubt that the result would be spectacular, so I didn’t want to get in the way and mess it up.

Carolyn Wood

March 20, 2007 1:19 PM

Rick Ellis,
This is great; you’ve really added a new dimension to the article by including your thoughts. Very good advice. Thanks for providing this background info and these details.

ZenBug

March 20, 2007 1:50 PM

Yes, great article. I’d like to see more like this from the pros.

And I too would like to see the EE coding side of a big project like this laid out as well.

Tom

March 20, 2007 1:53 PM

Nice work, and nice one for sharing with us lesser-mortals. I can not believe they tried to shoe-horn that eye-saw in there at the last minute after all your hard work – a total lack of respect!!! Your original proposition was way better, but great recovery too.

Brian Delicata

March 20, 2007 2:59 PM

Thanks for sharing your process! Great article and beautiful website(s).

PXLated

March 20, 2007 3:16 PM

Rick...Nice addition, adds a lot.
By the way, I was just razzin ya ;-)

Adrian

March 20, 2007 3:42 PM

Thank you for the excellent article! The EE website not only looks great but your detailed insight regarding the process is worth any designer’s time. Great job.

Andrew Ingram

March 20, 2007 4:33 PM

Excellent article, I enjoyed seeing the individual design iterations and reading the thought processes that guided them. It reminds me that it’s actually ok to spend days choosing a font or making subtle tweaks even if it can be hard to justify it to the person paying your wages.

Scott

March 20, 2007 4:40 PM

Thank you Jesse for taking the time to write such a wonderful insightful look behind the scenes. I am a developer and not a designer but you make be wish I was a designer. I really enjoyed your article a lot. Very inspiring. Thanks again and wonderful job on the redesign.

Martin

March 20, 2007 11:37 PM

A really nice writeup. Thanks for sharing your workflow. Congrats on the final results.

Maarten ter Braak

March 21, 2007 1:57 AM

Excellent article, the wireframing stage is something I mostly do just in sketch-ups, but mostly already with too much detail like you described. It’s gonna be interesting to see what I come up with leaving out more details at the start of my own designs.

Erwin Heiser

March 21, 2007 4:19 AM

An excellent article and insight into a well-excecuted redesign. Remarkable how truly great designers are always so generous with their information. Thank you for sharing this Jesse!

Veerle Pieters

March 21, 2007 6:28 AM

Excellent write-up! After seeing Khoi Vinh and Mark Boulton speaking about grids at SxSW and reading your article here, I might re-think my design process :) I tend to jump into the graphics, colors and layout very fast at the first stage, but for some projects, especially like this one, it’s not a smart thing to do and you might end up loosing too much time on revisions. Thanks so much for sharing your experience and insight and congrats again with the final result! :)

Jesse Bennett-Chamberlain

March 21, 2007 8:05 AM

Just thought I’d mention that I don’t always use wireframes, and with smaller projects with less information, I’ll sometimes just mash all of these stages together. Sometimes taking a gamble and just showing the client the end result can work out to your advantage as well… as it gives an additional “wow” factor.

Thanks again for all the positive feedback, much appreciated!

Anton Zuiker

March 21, 2007 8:32 AM

Thanks for a truly insightful article, Jesse. You mentioned starting in Illustrator, but then later you were using Photoshop. Forgive my ignorance, but why and when do you switch programs in the design process?

Edward Margallo

March 21, 2007 8:37 AM

Very nice work. I’m really impressed with the end product. Very clean and presentable. Good job!

Articulate Primate

March 21, 2007 9:15 AM

Great article! I’m really looking forward to more in this series.

Nathan Roberts

March 21, 2007 10:06 AM

Jesse,

Remarkable designs and an excellent article. I love your eye for the details.

Mind sharing how much time you spent on each step during this project?

jcpg

March 21, 2007 10:49 AM

hello Jesse! Nice work… Regarding the apps, in what phase of the project you change from Illustrator to Photoshop?

Thanks in advance! Keep the good work.

Jesse Bennett-Chamberlain

March 21, 2007 11:00 AM

Anton Zuiker & jcpg: I switch from Illustrator to Photoshop after the wireframes are approved. I don’t try to import the wireframes into photoshop, but instead start from scratch to make sure everything lines up to the guides in photoshop perfectly.

Nathan Roberts: I’m not really sure how much time I spent on each section, as it wasn’t quite a linear process with the 4 sites involved (I was working on all of them at the same time). From start to finish, the entire project took around 4.5 months (at not quite full time hours).

Chris Huff

March 21, 2007 11:42 AM

Great article and insight into your design process! I’ve been looking for this kind of advice, and you gave it nicely.

Susanna

March 21, 2007 11:50 AM

Jesse, thanks so much for writing this article. As the only designer in my organization, sometimes I wonder whether my work process and expectations are on track. It’s nice to see the amount of work that goes into a properly designed site. This should keep me from berating myself for taking the time to pay attention to details.

LisaC

March 21, 2007 1:52 PM

I had a busy one but was looking forward to finishing the article all day. Thanks it was very informative.

Phil Coffman

March 21, 2007 3:15 PM

Jesse, great article! I have to agree with Veerle as well after hearing the panel on grids at SXSW and now reading this article, I have some rearranging to do with my workflow. When you see results like this, it’s easy to see how spending time on doing those things pays off. Excellent work!

Sherwin Techico

March 21, 2007 3:42 PM

Great walk through… one for the record books. Thanks for sharing with the community.

dane

March 21, 2007 11:51 PM

Nice article and I like the concept you decided to go with. It’s always good to see a designer that thinks over all the details ahead of time.

R. Bhavesh

March 22, 2007 4:22 AM

I have been waiting for this article. And yeah, the article is as superb and inspiring as the EE website design is.

Thanks Jesse.

rozpusta

March 22, 2007 10:08 AM

Very nice article. I really liked it a lot and it gave me a few good pointers. Thanks!

Kevin

March 22, 2007 11:18 AM

Officer:

Ravi

March 23, 2007 1:49 AM

A master article. Thanks for the beautifully detailed and incredibly insightful description, you’re an inspiration.

Will It Work

March 23, 2007 8:39 AM

As someone just starting out (dspite interface design being a long dream), this was really useful. It’s a prictical way to apply top-down design principles in a business environment. I don’t know how many times things in my current job were redone or improperly done becuase of unspecedented changes in specs or expectations. you know, as opposed to content.

One question I do have is how are you doing the wirefames? is this in Safari or Photoshop?

Jen

March 23, 2007 9:39 AM

God… reading through that made me feel SO much better about the to’s a fro’s of developer/client interaction. I’m not a designer but do have to do that side of things aswell, and I always feel bad (as if i’m taking too long [??]) over that stage of proceedings. I’m a lot more comfortable when i can just get down to the coding!
This article has really given me a frame of reference to guide me through those stages.

Thank you!

Danny Foo

March 24, 2007 2:13 AM

Excellent stuff.

I’m gonna PDF this and keep it aside. :)

Martin from Czech Republic

March 25, 2007 3:38 AM

Great article! Really inspired me a lot… :-)

Thank you

Allan White

March 26, 2007 12:18 PM

I agree with the others, this was an excellent article. I appreciate the design process insights; wirframing is a key part of the process. When I’ve cut it out of my design process, I’ve always regretted it.

I really appreciate getting to see the wireframes and design iterations in the article. Thanks also, for being brave and sharing the sticky parts with the client – Rick Ellis’ comments are very informative as well, and it’s clear the relationship is a good one (the most important part!).

I’ve used several apps and approaches for keyframing, depending on the final medium. For Flash apps and sites, I’ve done it in Flash before – presenting multiple frames was easy, and the wireframes or storyboards could easily evolve into working, clickable prototypes.

One time, for a large software application, I used InDesign. The table-of-contents feature was a godsend, and the style sheets really helped manage all the different types of information (callouts, box labels, etc.). Everything was published as a clickable PDF, and was used to communicate with the programmers. It became a manual of sorts (the Design Document), too – comps were folded in later, and added easily to the TOC. A very large IA project.

For general web development, I’ve used OmniGraffle (gorgeous, multi-page, object-oriented, PDF output) and FreeHand (a moment of silence, please).

I tend to prefer Fireworks for much of the comping part – having symbols, document-wide search-and-replace, good vector capabilities, live filters, and the multi-frame feature is awesome. It’s slow as a dog, though, and is a bit lame in the pixel-editing department. I usually design with both apps open. PS has evolved so much that the two apps are close enough for web design.

Scott Mackenzie

March 26, 2007 4:32 PM

I couldn’t stop reading this article. Truly inspiring. Thanks for sharing your process.

The end result I very impressive. Previously I only knew that Expression Engine had undergone a redesign, but the fact you designed the 3 separate sites with a strong level of consistency yet enough difference is awesome.

Jesse Bennett-Chamberlain

March 27, 2007 5:36 AM

Using InDesign is a brilliant idea Allen! I’m definitely going to give that a try… thanks for the tips.

Lee Fleming

March 27, 2007 10:20 PM

Thanks for this article — it’s fascinating. I’m an ExpressionEngine devotee — have designed several client sites with the software and we are currently retooling our company website to run completely on EE — so your process discussion in timely for us (even though our redesign is taking forever — only because we’re busy right now!) I really like your redesign a lot. Certain things I’m having trouble getting used to (like the folder list of forum topics posted on a search) — but I’m sure I will sooner or later and actually come to prefer them.

The ONLY thing about the new ExpressionEngine site that’s missing is the list of recently updated sites — they are supposed to show up when a licensed EE user updates content and pings home. I used this section to sell clients on the platform and it’s really painful not to have it available (you get a much broader cross-section using that feature, plus clients are fascinated to see how it works … ) — which I mentioned to the sales team.

Brad

April 2, 2007 1:53 AM

Great article, it introduced me to wireframing and grids.

Allan White

April 10, 2007 11:01 AM

Lee: I think the EE Updated Sites section is now back up & running.

Jesse: InDesign is great – for the really, really big jobs, with lots of changes over time. For smaller sites, it can be overkill. One benefit I didn’t mention before, though, is the Master Pages. You can have nested master pages (two levels), too.

This gave me another idea: wireframing/mockups in Apple Keynote. Clickable! It’d be great when the emphasis is on walking the client through a presentation. It exports nicely to PDF, too.

Hasnain

April 13, 2007 6:20 PM

Great article! Thanks for sharing the process – and for not limiting it to design only. This section of Digital-Web definitely needs to grow! Very resourceful.

csleh

April 14, 2007 9:55 AM

Thanks for articulating your thoughts so clearly; really helps me remember what is important when laying out a design. Also loved the bits on logo refinement and photo research — could not possibly be pottering about if it’s standard procedure for other designers too!

Respiro the logo design guy

April 24, 2007 1:15 AM

Such a detailed work presentation is great as it’s very useful. Even so, I think that the design process has many unexplained and many subjective aspects.

Martin Bavio

April 25, 2007 9:55 PM

Greetings from Argentina! It

Kate

April 25, 2007 11:08 PM

This article really inspiring. I have difficulty with clients, and this article really give input, lesson and solver to my problem. thanks

Sam

May 28, 2007 5:45 AM

It’s following the new direction of redesign philosophy.

Moris

May 29, 2007 1:04 PM

Thanks for very interesting article. Can I translate your article into ukrainian and ukrainian-english at my webblog? I will back here and check your answer. Keep up the good work. Greetings i will put it here:
Web design

Moris

May 29, 2007 1:06 PM

Greetings i will put it here:
Web design

Dan

May 29, 2007 4:32 PM

Very interesting to read. I always enjoy learning about other designers processes. I fell in love with your work when my buddy sent me a link to The City Church. Great work!

Kavi

June 16, 2007 8:52 AM

Hi Mr.Jesse, Excellent article. Thanks a lot. First of all i would like to say a thanks to Mr.Anand Chandrasekar for given a nice reference. Now i am getting better idea in the use of Wireframe, Typography, Design etc… Please continue the article with your other experiences. Really its very interesting to read and getting valuable points.

Urs
Kavi, India

josh

July 27, 2007 1:41 PM

I really appreciate getting to see the wireframes and design iterations in the article. Thanks also, for being brave and sharing the sticky parts with the client – Rick Ellis’ comments are very informative as well, and it’s clear the relationship is a good one gry (the most important part!).

ingilizce

August 2, 2007 12:57 PM

A really nice writeup. Thanks for sharing your workflow Congrats on the final results…

Marc

August 5, 2007 4:41 PM

This was a really good exercise in redesigning a site, i have to do a redesign on my site, i will try to include your hints there… good job!

Mag

August 7, 2007 1:21 AM

Designing methods for a specific-purpose site is a very interesting issue that some designers do not lay enough attention though.

Abeona

August 8, 2007 12:20 AM

Thank you jesse for sharing all that info with us , specially the “working environment” part.
good job!

Boris

August 13, 2007 3:49 PM

In particular .edu domains seems very effective. One of my sites is linked to from a edu domain, and when this happened this site nearly jumped up in its ranking from day to day.

k-net

August 14, 2007 10:16 PM

Excellent job, Jesse. It’s very useful information to understand wireframe. Keep it up..

thanks,
Mak @ k-net

Sorry, comments are closed.

Media Temple

via Ad Packs