Not so long ago, an interactive designer’s job was confined to making static website comps for clients. For the most part, designers didn’t have to worry about coding – just getting the pixels right and ensuring that the developer had the assets to translate designs into working websites.
Over time, design and development inched closer. In 2010, as mobile browsers and tablets became more prevalent, responsive web design (RWD) was born.
With RWD, design and development are one. The shift from the traditional fixed grid design toward the percentage-based fluid grid creates exciting new challenges. It is a canvas for controlled creativity.
Architecting customer experiences RWD
The most dramatic shift in the design process has been transforming myself from an artist/designer into an experience architect. I enjoy developing the front-end code of my designs and know that the work will reflect the original intentions of the designs.
Every RWD project starts off with wireframes that show how an experience will translate from one device to another. This forces an upfront focus on how a customer wants to interact with content, how and where they’ll be using it – making for better, more useful experiences. There is a more organic flow to the design and development process. The end product simply performs better because I can make and test necessary design tweaks in real time. It makes more sense for designers to develop and interact with the end product in this way rather than spend hours creating detailed design specifications that will probably change anyway.
The designer/developer infinity: 5 things I’ve learned
Embracing RWD transformed my approach to web design. I enjoy creating on the flexible canvas and working with clients to help them get the most out of RWD technologies. If you’re a designer thinking about becoming a front-end designer developer, jump in! Here are a few things to keep in mind on your journey:
- Understanding the code helps with the design. Whether or not you code a site, understanding the underlying language is priceless.
- Always start a project with RWD in mind. I like to start with RWD wireframes before I even look at fonts, styles, graphics and other design elements.
- Show RWD examples along with wireframes to clients. This gives them a firm reference as to how a site design is taking advantage of RWD.
- Push yourself as a designer. If you don’t initially know how to code certain aspects of a design, challenge yourself to go deeper and learn.
- As you learn, know your limits. If your roots are in design, learning how to code is a process and a new way of thinking. Start simple and build more complex sites as your confidence with code grows.
