Redesigning the ExpressionEngine Site : Comments
March 20, 2007
Comments
A masterclass. Thanks for the beautifully detailed and incredibly insightful write-up Jesse, you’re an inspiration.
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.
Very good article, it is interessting to read about the exactly developing of this layout.
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 :)
Fantastic article, Jesse – it’s fascinating to get under the skin of a particular design and learn what went into it.
Excellent write up – thank you. What an insight, and love the new design(s) too – great stuff.
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?
Liked it very much. Captivating article – not common for technical text.
Very nice article. I really liked it a lot and it gave me a few good pointers. Thanks!
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!
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
You’ll all be happy, then, to know that a Part Two is in the works for this redesign article.
Nice article, I am sketching ideas whilst I type this!
Good news about part two.
(You may wish to fix the myfonts.com link)
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.
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.
As we say in the UK – what a belter. Thanks for the insight.
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
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!
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.
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!
An interesting read even for a developer and not a designer. How does this all fit together if you are your own client?
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.
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…
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.
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?
Great looking wireframes. What do people on here use to do wireframes? HTML? Photoshop? Personally, I use VISIO.
First class article, Jesse. I was really looking forward to seeing how you did all of this. So detailed and structured. :-)
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 ; )
Fantastic looking redesign on the EE site. Super article. I want to be you in my next life :)
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. :)
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.
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.
So after you’re done with the design whose responsibility is it to turn that into markup?
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!
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.
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.
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.
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.
Thanks for sharing your process! Great article and beautiful website(s).
Rick...Nice addition, adds a lot.
By the way, I was just razzin ya ;-)
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.
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.
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.
A really nice writeup. Thanks for sharing your workflow. Congrats on the final results.
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.
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!
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! :)
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!
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?
Very nice work. I’m really impressed with the end product. Very clean and presentable. Good job!
Great article! I’m really looking forward to more in this series.
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?
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.
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).
Great article and insight into your design process! I’ve been looking for this kind of advice, and you gave it nicely.
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.
I had a busy one but was looking forward to finishing the article all day. Thanks it was very informative.
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!
Great walk through… one for the record books. Thanks for sharing with the community.
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.
I have been waiting for this article. And yeah, the article is as superb and inspiring as the EE website design is.
Thanks Jesse.
Very nice article. I really liked it a lot and it gave me a few good pointers. Thanks!
Officer:
A master article. Thanks for the beautifully detailed and incredibly insightful description, you’re an inspiration.
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?
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!
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.
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.
Using InDesign is a brilliant idea Allen! I’m definitely going to give that a try… thanks for the tips.
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.
Great article, it introduced me to wireframing and grids.
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.
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.
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!
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.
Greetings from Argentina! It
This article really inspiring. I have difficulty with clients, and this article really give input, lesson and solver to my problem. thanks
It’s following the new direction of redesign philosophy.
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
Greetings i will put it here:
Web design
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!
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
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!).
A really nice writeup. Thanks for sharing your workflow Congrats on the final results…
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!
Designing methods for a specific-purpose site is a very interesting issue that some designers do not lay enough attention though.
Thank you jesse for sharing all that info with us , specially the “working environment” part.
good job!
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.
Excellent job, Jesse. It’s very useful information to understand wireframe. Keep it up..
thanks,
Mak @ k-net
You can use this
feed to keep up with the comments made on this article.