Guest blogger Ryan Wachtl is an independent US-based web developer and information architect with a passion for the art of programming and the science of design. He has been building sites with SilverStripe since the early 2.2 release and organizes the SilverStripe user group in Madison, WI. You can stay in touch by following @ryanwachtl on Twitter.
Fixing an Outdated Workflow
I think by now we can all agree that the traditional web project workflow, going from planning → wireframes → Photoshop comps → HTML/CSS/JavaScript → CMS integration → launch, is outdated and broken. It’s a comfortable and controlled workflow that relies heavily on hand-offs and sign-offs. The recently heightened focus on designing around content, designing for an ever growing device landscape, and emphasizing the quality of the user experience has led to the demise of this workflow.
Unless you have unlimited resources it's impractical to invest in wireframes that try to cover desktop, tablet, and mobile (and all the variations in-between). The same logic follows for design comps. I’ve also seen my share of lorem ipsum laden design comps that initially look great, but quickly fall apart when put into production and real content is “plugged in”. And finally, it is extremely difficult to convey interaction in static wireframes and PSDs. To get around these problems and build better solutions, I’ve come to rely heavily on rapid prototyping.
Rapid Prototyping to the Rescue
Rapid prototyping, or wireframing in code, is the process of getting your layout, content, and navigation into HTML that you can view, interact with, and test on real devices. The HTML prototype essentially replaces static wireframes and design comps. The key to successful prototyping is being able to get it into production fast and iterate on it easily.
Enter SilverStripe
I’ve adopted a workflow that combines three amazing open source projects that make prototyping not only fast, but also fun. Let’s start by taking a look at my toolbox. It’s rather minimal, but very powerful. And aside from the cost of some pen and paper, it’s all free!
Wachtl’s Rapid Prototyping Toolbox
- Pen and Paper
- SilverStripe
- SilverSmith
- Foundation
- A Web Browser (usually Chrome, due to the ubiquity of Webkit)
My Workflow
After a thorough discovery phase and understanding the goals of the stakeholders and end-users, I focus on the structure and skeleton of the website or application (terminology borrowed from The Elements of User Experience by Jesse James Garrett).
Structure (IA)
- Sitemap
- Page Description Diagrams and User Flows
- Content Templates and CMS Fields
Skeleton (In-browser Design)
- Navigation and Content Discoverability
- Responsive Layout
- Test Usability and Device Experience (think ahead, plan for variations)
Structure
I begin by taking a close look at the structure of the content from two different angles. The first angle is figuring out how the content serves the business and user goals of the project, the second is how to craft the CMS in a fashion that will reduce the friction involved with managing content entry and maintain the integrity of the design. I use page description diagrams to prioritize the content on a page and sketch out any major interactions in the form of user flow diagrams or story boards.
A closer look at SilverSmith Fixtures
Using the fixtures feature in SilverSmith allows me to iterate on my sitemap quickly and with ease. If you’re not familiar with SilverSmith, it’s a fantastic CLI tool built by Uncle Cheese that features generators for SilverStripe project code, templates, and content. SilverSmith will take a _fixtures.txt file and build out a site tree from it. At this stage you can just edit your _fixtures.txt file and rebuild to test different navigation and content organization schemes.
silversmith build-fixtures
Once satisfied with the sitemap I can let CMS editors in to start entering real content. Seeing the actual content in the prototype allows me to break it apart into smaller chunks (for the CMS fields) and increases the value of the prototype.
Skeleton
One of my recent works is the SilverStripe Foundation theme. A theme that I use for rapid protoyping and ocassionaly building entire sites out. It's the fastest way to get up and running with the Foundation CSS Framework in your SilverStripe project. It uses Sass, but has no other requirements to modify. Add Compass or Bourbon to complete the mix, or just roll with it, as is. The theme gives you access to most of Foundations typography classes from within the class dropdown in the HTMLEditorField and it works best when paired with the Foundation Forms module. You can view a demo of the Foundation theme or grab it from Github.
SilverStripe Foundation Theme
A closer look at Foundation
The beauty of the Foundation framework lies in the ability to work almost exclusively in HTML. No jumping between template, CSS, and JavaScript files. Features such as modals, tabbed sections, and device visibility can be spun up by applying classes to your markup. While not necessarily the best approach for a production site, it works perfectly for experimenting with layout and interactions across different devices. For example, the following markup is all that is needed to code a functioning modal.
Beyond the Prototype
So, where to from here? A visual design process can be run in parallel with prototyping. I recommend using a process like Style Tiles. Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. The perfect companion to a responsive website prototype.
Additional Resources
SilverStripe Modules
I’ve only scratched the surface of SilverSmith and Foundation, you really should check them both out and see if they can find a place in your own workflow. In addition to utilizing those two projects there are a handful of other modules that I have come to rely on heavily for both prototyping and production SilverStripe projects.
- UserForms (Github) (Packagist)
- FoundationForms (Github) (Packagist)
- UserTemplates (Github) (Packagist)
- HTMLField (Github)
- CustomMenus (Github)
Prototyping and In-browser Design
