Re-designing CakePHP

Myself and the rest of the CakePHP team recently embarked on a journey to refresh and redesign the CakePHP website and brand. I wanted to delve into my process and thinking around the changes.

The cakephp.org website has been around for quite sometime. Its previous incarnation served the project amazingly well. It basically created the branding and design aesthetic most people associate with CakePHP, and was featured on a number of design galleries and featured sites lists. When starting the redesign, there were a few things the team felt passionate about keeping.

• Logo – There was nothing broken with the logo. It is well recognized and should stay mostly un-touched.
• Retro feel – CakePHP gained a reasonable amount of attention from its retro design. It has been featured in a number of design collections. The retro feel was something most of the team was passionate about keeping. To me, the retro feel distinguishes CakePHP from almost every other framework, and was important to keep.
• Halftone patterns – You could say this was part of the retro feel, but I felt it was important enough to mention separately. Halftone patterns are used pretty much everywhere in the CakePHP design language. I personally love them, and wanted to keep them.

With the list of things we loved done, I made a list of things I didn’t like and thought hadn’t aged well after 4 years:

• The design used too many colours. At last count there were 5 beiges and 4 blues. This was simply too many colors to make a simple consistent design.
• Small text sizes. I find small text hard to read, and as more people shift to using mobile devices tiny text can be even harder to read.
• Inconsistent across sites. The design was inconsistently implemented across the various properties CakePHP has. Implementing a new design will obviously magnify that. However, for the 3 sites using the new design, I feel its been implemented more consistently than before.
• No mobile affordances. The old sites relied on page zooming for mobile devices. I wanted the new design to work well on mobile and tablet devices.
• The site didn’t really do a great job of telling people why they should use CakePHP.
• There wasn’t really a good place for news about the project, other than the over-used ‘extra-hot’ banner. Having a way to re-publish important Bakery articles would be ideal.

My design process and tools

My design process is pretty simple. I generally start in pencil, and scribble out some ideas. Once I’m happy with that level of detail, I move on to wireframes in Balsamiq . I find Balsamiq is great for giving a fast low-fi way to share designs. I use them to refine the concepts and general layout of a design, and show them to the rest of the team. Once, myself and the rest of the team are happy with the wireframes, I move onto Illustrator. Yes, I’m one of those weird people that uses Illustrator for web-design. Unlike most people however, I like that it is a bit wrong, and not-pixel perfect. This stops me from getting too precious with the design before I convert it into HTML. I’m forced to limit the detail in the illustrator mockups, as the tool just isn’t that good. I also find the text tools in Illustrator far better than those in Photoshop. At the Illustrator stage, I try to focus on general colour design, vertical and horizontal rhythm, typefaces and patterns. I don’t worry about getting things pixel perfect as its a waste of time. You have to get everything pixel perfect twice then. Once in Photoshop/Illustrator and then again in CSS.

With the lists of good and bad done, here are some results of the process described above. Starting with the wireframe

Next up is the initial Illustrator mock-up. The design is largely the same, but has a complete palette and icons. I got the colour palette from a great book called The designer’s guide to color combinations Its a fantastic catalog of historic colour palettes and features a great selection of great retro palettes. The icons and illustrations were done by my very talented wife . She’s available for client work as well if you’re interested. The last draft of the illustrator designs looked like this . As you can tell, this is not the same as the final design, and the last few iterations of the design were done in HTML + CSS. I find tweaking designs easier and faster in HTML than in Illustrator.

Implementation and responsive design

The site is implemented with CakePHP of course. Its a primarily static site, with dynamic content via a git repository inspector, and RSS consumer both build by Graham Weldon . I used AssetCompress to combine assets. One of the most interesting parts for me, was using zurb foundation for the layout grid and responsive design elements. Zurb foundation was also used for the book.cakephp.org redesign. I chose foundation, for a few reasons. It provides very low-level features, without a ton of flash, or design opinion. This means there is less to rip out later, when t didn’t fit the site aesthetic. Foundation features great documentation, and readable code. I didn’t look at many other systems, as I’ve been following foundation for a while, and really like how they’ve solved the problem I had.

Conclusion & Lessons learned

I’m really happy with the re-design. I think we ended up at a simpler, cleaner website/brand for CakePHP. The feedback so far has been amazingly positive, and the concepts underlying the design have shown to translate well across several of the CakePHP properties with more underway now.

Along the process I learned a few lessons about building responsive designs. You should plan to spend a considerable amount of time planning the various resolutions/sizes. While using a grid can help, you still have work to do. Elements like larger images either need to be scaled or swapped out at small sizes. For example, the download button has 3 variations so it fits on all 3 device sizes. I also found that positioning need to to be tuned at the various sizes. I also found that menu bars can be tricky. I ended up converting the menu used in CakePHP to a select box. I found this to work better than other sliding box style navigation, as most mobile devices have great support for select boxes.