Raster programs are powerful tools, and helped create the design of the web as we know it today. Lets be honest though, the web has evolved. We currently use custom fonts and vector graphics, design everything for a responsive world, and have become comfortable with css and js animations and other great techniques. Raster programs like Photoshop are still powerful tools, but are being left behind for better, more adaptive tools. With the rise of prototyping apps and CSS framework, creating in browser wireframes and design mock ups for an iterative agile process is becoming my go to solution. Clients can see a semi-interactive and responsive representation of their product or page in a real world setting.
There are a lot of options for handling wireframes and interactive comps, and I’ve been gravitating towards Foundation and creating live mock ups for clients. It allows me to take my early tests and incorporate them into the finished product. Much like taking a block of clay and shaping it into a rough form of the figure you’re trying to carve, these early prototyping steps in the design process are direct descendants of the final product.
Going beyond static
No more screenshots and multiple PSDs! We’re not just translating print to digital, we’re creating a living breathing interface. Photoshop has one static option and view. We’re no longer designing ‘pages’, there’s no more ‘fold’, and users expect interactivity. The user has long left the print metaphor behind with their multi-screened habits, and it’s time for the designer’s toolset to do the same.
It’s easy to get lost in the pixel perfect idea of a design and forget that, like everything on the web, it will change and grow with use. Early design concepts can be proven in other more productive ways.
Build, tear down, build again
Another advantage to using a CSS framework is that you can experience it as a user, not just a designer. I find when I work in Photoshop, I craft grand plans for interactions and user flow, but when translated to screen or device I’ve miscalculated.
The designer needs to experience their product as a user before fully understanding their design. This allows for quickly built websites to be honed down, features and visual supporting items to come and go as needed.
There’s no fear of losing a pixel here or there, but instead the focus is on the experience as a whole. I can experiment, create, destroy, try out real world hover states, see how a modal will affect an interaction and adjust if need be.
Finding the right tool(s)
Whether it’s a prototyping tool such as Briefs and Origami, a wireframing tool such as Balsamiq, a CSS framework such as Foundation or finding a good mix, these tools have allowed me to move beyond the static pixel and into a whole screen and have doubled my productivity. Our users are evolving. They’ve moved beyond print and now it’s time for designers and our tools to move with them.
For me, the use of a CSS framework along with a touch of a raster creation program has become my core workflow. In an effort to learn more about the tools I use, I’ve decided to learn all I can about the toolset and create a lightweight CSS grid framework of my own.
In my next post, I’ll talk more about creating my own framework.
