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.
