The Designers Are Coming!

Talks

Glenn Gillen

1 talk

#front-end-development

The Designers Are Coming!

by Glenn Gillen

In the talk "The Designers Are Coming!" presented by Glenn Gillen at Aloha RubyConf 2012, the speaker discusses the evolving landscape of design in relation to software development. He highlights the emergence of designers as a crucial element in creating products that prioritize user experience, emphasizing the necessity for developers to adapt and compete in this new environment.

Key points include:
- Learning Design: Gillen asserts that good design is a skill that can be learned without needing an innate artistic predisposition. He encourages developers to embrace design principles that extend beyond aesthetics.
- Craftsmanship: Through personal anecdotes, notably a conversation with designer Jay, Gillen reflects on the differing but overlapping definitions of craftsmanship in engineering and design, illustrating that both developers and designers aim to build products that users love.
- Advancements in Tools: He discusses the significant progress in tools that facilitate app development, like deployment systems such as Capistrano and Heroku, which have lowered barriers for developers. This advancement inevitably allows designers like Jay to take on more responsibilities without relying on developers.
- Valuing User Experience: Gillen emphasizes the importance of focusing on user needs rather than solely the developer's perspective. He criticizes the selfishness of prioritizing readable code above the overall user experience.
- Influence of Design Principles: He cites influential figures such as Eric Ries, Edward Tufte, and Dieter Rams, linking design principles to coding practices. He explores how structured and metrics-driven approaches to design can result in better user experiences.
- The Importance of Consistency: Utilizing design frameworks such as Bootstrap helps developers apply consistent design principles across their work, transforming the notion of design from an art to a structured challenge.

In conclusion, Gillen advocates for a shift in mindset where developers should consider their roles in the product development process and acknowledge the value of enhancing user experience through learned design principles and critical thinking. This holistic approach aims to elevate the quality and usability of products by aligning design and engineering goals while recognizing that collaboration between designers and developers is essential for success.

00:00:15.240 Thanks, everybody, for coming. Today, I'm going to talk about the great new threat to our livelihoods, which is designers.

00:00:21.840 Hopefully, I’ll convince you that you don’t need to have some kind of genetic predisposition or a gene that makes you naturally artistic to be able to do good design.

00:00:28.080 Design is something that you can learn and apply critical thinking to, and it involves some basic math. Design exists within a framework of rules that you can apply, and it can be learned and implemented in a structured manner.

00:00:40.960 But first, I want to take you back to a conversation I had earlier this year, which proved to be the inspiration for this particular talk. It made me realize that if I continued doing things the way I always had, I probably wouldn't have a career much longer.

00:00:52.800 Now, this is the kanji for waza, which is the Japanese word for art and technique. It’s also the name of the event we attended earlier this year, specifically discussing art and technique as it applied to application development.

00:01:05.159 Throughout the day, I had several conversations with people who considered themselves part of the application development life cycle. One conversation, in particular, struck me—this was with someone named Jay.

00:01:17.000 Jay was there as a designer; he had flown up from LA to San Francisco to attend the event. Our career paths couldn’t have been any more different. I had come to application development from a background in math and science, while Jay had a history in film and art. We talked about art and technique and how this applied to our professions.

00:01:49.600 We started discussing craftsmanship and how we recognize it in the work of our peers. Despite our different backgrounds, we shared a deep appreciation for those who took great care and precision in their craft.

00:02:03.200 I expressed how I admired engineers who wrote code that was readable, where the intention was clear, and where the value of the work was obvious. I extolled the virtues of computer science and design, which I held dear. However, Jay discussed what craftsmanship meant to him, emphasizing simplicity in design and creating interfaces that catered to both novice and expert users.

00:02:21.160 We found common ground in our definitions of craftsmanship, yet it was clear that our definitions were not the same when applied to our fields. Here we were, at an event tailored to those in application development, yet we had these two very different views on what that meant.

00:02:39.680 At first, I might have been a bit conceited or smug, thinking Jay was naïve—too inexperienced to truly understand the value of the code I wrote. In the long term, I believed my perspective on maintainability and iteration would prevail because I valued those principles so highly.

00:03:05.840 However, the more we talked, the more I realized how shortsighted my view was. In truth, we both wanted the same outcome: to build products that people loved. Not just transient gimmicky tools that users would quickly forget, but products that would leave a lasting impression, making users want to return and depend on them.

00:03:28.480 Recognizing that we desired the same end results, I came to understand that our differing views were merely about how we prioritized achieving our goals. Reflecting on my motivations, I realized my interests were intrinsically motivated.

00:03:43.160 I wanted readable code and clear structure so it would be easy to revisit and rework. I valued principles like loose coupling and single responsibility in code, allowing for easier refactoring when customer needs changed. On the other hand, Jay focused on the user experience; he wanted to ensure users felt like experts even if they were novices.

00:04:08.160 I was being selfish about what I valued in my craft, elevating my own needs above those of the very users I was meant to serve. Ultimately, I realized that my perspective represented only a tiny fraction of those affected—primarily me and a few other developers, while Jay's focus had the potential to impact hundreds, thousands, or even millions of users.

00:04:20.840 Before I became too disheartened by this realization, I reflected on how developers have built amazing tools that improve the lives of countless other developers. Our priorities haven’t been entirely misplaced. In improving our own workflows, we have created tools and frameworks that drive the cost of taking an idea to market closer to zero.

00:04:47.000 Ten years ago, it was inconceivable that something like Rails Rumble could exist. In the span of just 48 hours, one could conceive an idea, design it, build it, deploy it, and potentially establish a real business—all within such a brief time.

00:05:16.840 We’ve also significantly improved deployment, transforming what was once a major pain point for developers. Fifteen years ago, deployment was so cumbersome that we often tried to avoid it altogether by creating content management systems that allowed users to make changes to applications without needing to deploy.

00:05:51.000 Most of you here have, at some point in your careers, discovered Rails. With Rails, we were introduced to Capistrano, which simplified deployment for developers significantly. After some initial setup, deploying code to production became as simple as running two commands.

00:06:11.000 In addition to pushing code updates live, tools like Capistrano provided version control and release management capabilities that had previously been unavailable.

00:06:30.560 This leads me to Hubot—anyone who's seen a presentation from GitHub has likely been introduced to Hubot. He’s a chat program that responds to commands in Campfire, and GitHub has integrated Hubot in a way that committing changes to version control allows for friendly deployment.

00:06:47.360 Deploying code on GitHub was as simple as issuing the command to hot deploy, significantly reducing the obstacles for deploying a production system.

00:07:07.560 Companies today utilize continuous integration servers to automatically run tests with each commit and deploy to production if the tests pass, further illustrating a trend toward this convergence. Heroku is another example of simplifying deployment with version control.

00:07:35.720 The process of deploying code has been reduced to version control as an integral part of everyday workflow. Knowing how to utilize version control is often synonymous with knowing how to manage deployment.

00:08:04.760 Now, I want to circle back and illustrate how this applies to Jay. He has continually evolved his own skills over the years. In the past, he would create mockups in Photoshop and hand them off to a developer for implementation, which I was.

00:08:20.600 I would slice and dice those mockups into images, HTML, and CSS, presenting that work back to him to show the client. However, Jay found that this approach was not very effective and began teaching himself HTML and CSS.

00:08:47.760 This new skill allowed him to sit with customers and iterate on the product directly, letting them experience it live in their browser for quicker feedback and making modifications far more rapidly than if I were involved.

00:09:10.560 But those changes would still come to me to integrate into Rails or PHP, deploying them to production. Eventually, Jay wanted to showcase a more comprehensive user experience, one that was representative of the final product.

00:09:43.680 He decided to learn some basic JavaScript, enabling inline form validation and real-time feedback, often adding some jQuery to enhance the experience further, but I would still deploy everything.

00:10:08.760 Then something changed: Jay discovered Node.js. His limited JavaScript skills had grown substantially, enabling him to build rich web applications that could retain state and provide smoother transitions across pages.

00:10:47.200 What this meant was that he could have a working application on his machine without needing to call on me for help coding the Rails back-end. He just required deployment assistance.

00:11:06.360 But soon, Jay learned that using Git was incredibly beneficial, particularly when dealing with indecisive customers—allowing him to revert changes easily any time that was needed.

00:11:30.360 He ingrained the habit of regularly saving states and managing everything in version control. When he was introduced to Heroku, this opened doors for him to build applications in Node.js and deploy them effortlessly with the 'git push Heroku master' command.

00:11:50.560 Jay had effectively eliminated the need for my involvement in creating software systems. What I once considered vital was being trivialized to version control.

00:12:09.800 This realization struck me; I was no longer a crucial part of that machinery due to the advancements in tools we developers created.

00:12:29.280 The concerning aspect of this is our original discussion about values and craftsmanship. Jay focused on making the user’s life easier, whereas I had been more concerned about myself.

00:12:48.880 With Jay naturally better positioned to create superior products based on user experience, it’s undeniably time to fight back to hold our ground amidst these changing circumstances.

00:13:10.120 It's no longer sufficient to simply ship something that works. While Jay can produce software that is functional and visually appealing, developers must adjust their values and approach to compete effectively.

00:13:30.960 Good design isn’t an innate talent that some possess while others don’t; rather, it's a skill that can be learned. There are established frameworks and standards that can enhance my artistically challenged engineering mind.

00:14:12.720 I intend to discuss what I regard as the groundwork for understanding design—the elements that have informed my journey. I'll share insights about key individuals who have influenced how I tackle design with their advice and approach.

00:14:38.800 First, there’s Eric Ries from the Lean Startup movement—a figure not typically associated with design. I mention him because his perspective encourages engineers to consider product design much more holistically.

00:14:53.800 Design extends beyond aesthetics; it focuses on how end users will interact with the final product. Lean provides an objective, metrics-driven approach to understand product requirements.

00:15:12.160 A clear, objective view of your design goals and the changes needed to achieve them is a fundamental first step. However, I do have reservations about blind adherence to lean principles.

00:15:31.800 There’s a tendency to misinterpret its concepts or use them to justify why a product failed due to market misalignment rather than design flaws. It’s crucial to distinguish between the two.

00:15:54.880 My first entry point into this world was typography and typesetting—an area I'm not an expert in but am fascinated by. It embodies historical context and cutting-edge technology reflective of its time.

00:16:20.880 From the advent of word processing and desktop publishing, many best practices of typography have been lost, resulting in a plethora of poorly designed newsletters and brochures.

00:16:43.280 Nevertheless, these principles are timeless and applicable irrespective of the medium—creating visually engaging designs relies on understanding visual hierarchy to enhance user experience.

00:17:07.040 For instance, leading should always be greater than the space between words, creating structure. This structure guides the reader's eye and improves overall readability.

00:17:33.680 Font sizes found in almost every word processing application follow a consistent ratio. This consistency is based on years of experience proving that such ratios enhance readability.

00:18:00.480 An important observation is the flow of emphasizing text; using different emphasis correctly helps streamline the visual hierarchy. Once you understand these rules, your designs can become beautiful almost effortlessly.

00:18:29.760 Another fascinating aspect of typography involves its historical language and artifacts, such as terms like upper and lower case, stemming from the physical arrangement of letters by typesetters years ago.

00:18:53.680 These terms highlight how that era shaped modern understanding. Ultimately, we naturally seek structure, gravitating towards balance, also reflected in the apps we design.

00:19:16.160 Using a grid system helps in maintaining that structure as it facilitates both horizontal and vertical alignment, ensuring consistency across design elements.

00:19:38.960 It's essential to recognize that a proper grid system includes not only column width but also the vertical rhythm as well. The application of these principles assures ultimate usability.

00:19:59.840 Next, I want to highlight Mark Bolton, a UK designer who wrote 'A Practical Guide for Designing for the Web'—a book that effectively balances historical and practical applications.

00:20:25.920 The insights provided in this book resonate deeply from an engineering perspective, helping me frame design as a structured, rule-based challenge.

00:20:48.000 Using frameworks allows me to apply best practices effortlessly across my work—automating design to ensure consistency without constantly reflecting on each decision.

00:21:08.960 Bootstrap, in its essence, helps apply rules but without providing an understanding of why they are effective. When I encountered Mark's work, I appreciated not just the application but the historical basis behind it.

00:21:26.280 The historical context is equally valuable, such as understanding that underlining originally served as a hint in typesetting but evolved into a common practice—and not for the better.

00:21:48.720 Next on my list is Edward Tufte, an expert in presenting visual information. His insights resonate with me because they emphasize a developer-facing approach to problem-solving.

00:22:06.240 Applying critical thinking and ensuring each piece of information presented adds value aligns with good design principles. I want to provide an example of how this applies in practice.

00:22:31.760 Imagine a company generating two different product lines, sprockets and widgets, and analyzing their performance relative to one another. Historically, financial presentations lean toward 3D visuals to engage interest.

00:22:57.760 However, turning financial data into 3D graphics could obscure important information, making it harder for the audience to interpret the data or understand the narrative.

00:23:26.280 If we strip away the 3D and focus purely on the essential data, we can acknowledge the fundamental elements necessary for communicating relevant information.

00:23:44.640 Yet, upon simplifying the presentation further, it becomes simply a gray sheet where differentiation becomes challenging. Minimizing distinctions hampers a viewer's understanding.

00:24:09.920 Through Tufte's principles, it’s better to showcase the two lines side by side rather than in a convoluted overlap to clearly illustrate rate changes and performance variances.

00:24:42.320 By focusing on changes in performance and presenting this data effectively, we allow viewers to naturally notice growth and decline—the goal of any meaningful analysis.

00:25:07.280 Tufte describes a seminal flow map depicting Napoleon's disastrous Russian campaign, showcasing a wealth of information—the diagram's beauty lies in its simplicity and extensive detail.

00:25:39.840 It brilliantly shows fluctuations in the size of Napoleon's army over time, providing context historically and spatially in understanding how the campaign unfolded.

00:26:05.040 The takeaway being that all content in such visuals adds to storytelling; removing a component would compromise the integrity of the information.

00:26:30.560 Next, I want to highlight Dieter Rams, a renowned industrial designer, particularly for his work with Braun in the mid-20th century. His philosophy centers on simplicity in design.

00:26:55.680 The principles he established encapsulate good design: it’s aesthetic, understandable, unobtrusive, honest, long-lasting, and minimal. These tenets not only connect with design but also resonate profoundly with coding principles.

00:27:19.680 There’s a scientific approach to design; it has its own set of rules, allowing someone to automate processes to ensure efficiency and cohesion.

00:27:43.040 By redefining the challenge of design to view it within a technical scope, engineers can automate design consistency, thus regaining power in conversations with designers.

00:28:02.640 Ultimately, I recognized our values do align. The principles Rams described apply to all disciplines. Both design and coding can leverage similar foundations to create exceptional products.

00:28:27.920 Despite varying perspectives, the underlying objective is creating an optimal user experience. By elevating the end user above any singular developer perspective, product development can yield better outcomes.

00:28:50.600 If shipping products without considering user needs, it’s fair to say that perhaps you haven’t truly delivered a product yet. These design principles are meant to enhance the user experience.

00:29:19.200 I’d like to conclude with a quote reflecting beauty. For anyone believing that technical skills limit creativity, remember to infuse beauty into creations by applying principles of order and symmetry.

00:29:40.200 As the mathematical sciences exemplify, beauty manifests through order, symmetry, and limitation—those qualities define excellence.

00:30:00.000 I’ve been Glenn, working at Heroku. If you want to join a company that values design and products that users enjoy, don’t hesitate to speak with me after this. Maybe we can create something incredible together.

Aloha RubyConf 2012