Blog

A Design Dissection of EllisLab.com (formerly pMachine)

Here at Hop Studios we are big fans of a content management system called ExpressionEngine. We’ve used it for at least the past two years, and some of our biggest and more exciting projects are run using heftily tweaked and configured installations of this amazing tool. (Both Truthdig and Think Salmon, for example, are run using ExpressionEngine.)

The creators of EE, EllisLab, changed their company name from pMachine two weeks ago, just in time for SXSW. At the same time, they completely redesigned their website and added a site dedicated just to ExpressionEngine.

All that to bring me to the point of this post: an excellent article written by the web designer EllisLab hired to do the redesign work.

Redesigning the ExpressionEngine Site by Jesse Bennett-Chamberlain

This is a piece about a product we love, but even better, it’s a dissection of how a web design project typically works in our shop as well. If you’ve ever wondered what we’re doing in between graphic comps and Basecamp messages, this article should give you a good idea. Every design job is different, of course, but most of the time the basic process ends up being the same, give or take a pixel here and a Javascript there.

I especially like Jesse’s description of what is needed from the client in order to get started:

“The first thing that I requested from EllisLab in order to get the wireframing stage underway was a list of design elements that they wanted to display on the home page. After a couple of hours of discussion around Rick’s dinner table, we narrowed down the sections to include:

  • Nav, super-nav, logo  
  • Large expansive banner graphic  
  • Links to download ExpressionEngine and take a feature tour  
  • Introduction message  
  • News, blog posts  
  • Featured users (bloggers / developers / business owners + featured user)  
  • Footer

“During that conversation, we also discussed the design direction that they wanted to head in, which I will touch on in the next section. With this list of design elements, I was able to open up Adobe Illustrator and get started on trying out some different layouts.”

Comments

Have a Project for Us?

Get in Touch