Handoff between design and development is still a much-discussed topic and I also had my fair share of projects in the past where a bad handoff caused a lot of frustration on both sides of the “canyon“. And while processes have changed a lot in recent years towards more collaboration, there is still a noticeable number of designers who simply hand off comps to developers and think their work is done. Dan Mall and Brad Frost are vocal proponents of a workflow they call “The Hot Potato Process,” where ideas and artifacts are continuously passed back and forth from design to development and back again. A process that can involve a lot of prototyping, too.
Part of the huge success of the Web as a platform has always been its permanence and stability, while at the same time allowing for change and experimentation. In this wonderful piece, Tim Kadlec reminds us, that this stability of the Web is by design and that a lot of thought and consideration goes into what becomes a standard and what doesn’t. Security, performance, and accessibility are inherent qualities of the platform, so Tim suggests that you should “use the platform until you can’t, then augment what’s missing.” And what could be better suited to explore how to use the platform than a little HTML prototype?
Introducing regular structured critique to your design process is one of the keys to improving the design quality of a team and growing the design literacy of whole organizations. But to have the desired effect, critiques have to be done right. So, in this post on the Clearleft blog, Chris How explains how to run a productive design critique and make it part of your practice.
How design critiques can work in a larger UX organization is the focus of this article by Jan Kiekeben, Product Designer at XING, where about 60 UX professionals with different backgrounds regularly exchange their ideas and discuss UX work intensively. Jan shares lessons learned from implementing their very own formal design critique format and, for example, why specifying what type of feedback you want as a result of the critique is so important.
Words are vital elements of digital products, especially on the Web. Nina Feinberg, a senior product designer at The New York Times, explains why considering language at the start of the design process can improve the quality of user experiences and shares a few exercises you can use to make sure that you strike the right tone and communicate effectively.
Because good contrast makes it easier for people with visual impairments to use products, the team at Stripe wanted to improve the color contrast of their interfaces. And because, as Daryl Koopersmith and Wilson Miner share in this post, none of the existing tools helped them define colors that met the WCAG contrast guidelines while at the same time still being the Stripe colors, they set out to prototype and shape their own color tool that would help them define accessible colors in the perceptually uniform CIELAB color space.
Research is essential if you want to learn more about your customers and create products and interfaces that work. Google Ventures has helped hundreds of startups use UX research and in this guide, Michael Margolis, UX Research Partner at GV, shares an extensive list of lessons and articles on the topic. Whether you want to learn more about why research is important, want to know how to plan and conduct user interviews, or if you would like to test prototypes with users and evaluate the results – this guide is for you.
The message of this article by Lulo is as true as it is powerful: You should see prototyping as a tool, not as a mere phase in the process. Prototyping is “something you do continuously to discover, learn, test and even pilot ideas”. Throughout the whole design process, prototyping can be used to visualize concepts, test hypotheses, and to test execution.
Whether you are a designer who wants to know why CSS is so weird, or you are a developer who wants to learn CSS Grid or how to improve image loading, the new Mozilla Developer YouTube channel got you covered. Miriam Suzanne and Jen Simmons are on fire bringing you the latest and greatest about building websites in the browser. And there is much more to come, like a series on the “Cascade”, for example.
November 2019 Release of Adobe XD: Coediting, Document History, Component States, and More Unveiled at Adobe MAX
Yes, this is news from November already, and yes, there was an Adobe XD release in October, too, that brought, for example, blend modes and improved selection of elements. But the latest XD release dropped on Monday and it is simply too huge to wait until next month to spread the news. So here you go: For their impressive Adobe MAX release, the team added major new features that will change how people work with XD. It starts with component states which can also be auto-animated and, yes, hover interactions. But beyond that, you are now able to work collaboratively in the same document in real-time (Coediting), you can access a document’s version history, and even name the versions to keep track of milestones. The Plugin Manager also received a complete overhaul and it is now much easier to find great plugins and app integrations.
The ProtoPie team has also been busy and just released the new ProtoPie for Teams, which includes useful collaboration features like invites, link sharing, commenting, and version history. Also very interesting: The new ProtoPie 4.1 now supports Lottie animations and a full-screen preview window.
The October update of Sketch brings new Typography features like variable font support and more OpenType features (e.g. ligatures and contextual alternates) as well as improvements to the Smart Layout feature introduced in Sketch 58.
“Beautiful, Readable & Production-ready Code – Designers and Developers on one platform”, that’s the bold promise of BuilderX, a new browser-based design tool that codes React Native & React for you.
Placeholder.pics is a free service that lets you quickly include placeholder pictures into your HTML prototypes via a URL. What’s nice about it is that all images are served up as sub-kilobyte, fully optimized SVGs and you can adjust properties like size, color, or labels.