visual-design

10 posts

toss

Why Toss reduced its design roles to two (opens in new tab)

On April 1, Toss’s Design Chapter consolidated six design roles into two: Product Designer and Visual Designer. The change reflects how role boundaries had already blurred as designers crossed disciplines and technology reduced the importance of tool-specific expertise. Toss’s central argument is that designers should be organized around judgment and user problems—not the tools, media, or screens they work with. ## Why Role Boundaries Became a Problem - The previous structure separated designers by tools and outputs rather than by the decisions they made. - Ambiguity emerged in areas such as: - Whether interaction in a design system belonged to Platform or Interaction Designers - Whether interactive graphics should be handled through Lottie, code, or UI design - Whether expanding a PC product to mobile belonged to a Tools Product Designer or Product Designer - These divisions sometimes determined ownership based on medium instead of capability or context. ## Designers Were Already Crossing Disciplines - Tools Product Designers began designing mobile products. - Interaction Designers worked on parts of internal design tools. - Graphic Designers created semantic icon systems. - Platform Designers built interactive web pages. - Brand Designers with visual-design backgrounds worked on lighting products. - AI and other tools have shortened the time needed to learn formerly specialized skills, including: - Video and Lottie production - Figma prototyping - Coding interactive experiences - As tool proficiency becomes less differentiating, the ability to judge what creates a good experience becomes more important. ## Product Designer - Product Designer and Tools Product Designer were merged into one role. - The distinction between mobile and PC disappeared. - The role now focuses on: - Understanding the user’s context and problems - Deciding how those problems should be solved - Designing across screen sizes and product environments ## Visual Designer - Platform, Interaction, Graphic, and Brand Designers were combined into Visual Designer. - Visual Designers are expected to work across media and produce what the experience requires, such as: - Building interactions within systems - Creating icons for prototypes - Designing interactive web experiences - The defining capability is visual judgment: deciding what is beautiful, appropriate, and correct. - The title was chosen to emphasize visual decision-making rather than a specific medium or technique. ## Lessons from Other Industries - Disney animation reduced many physical and intermediate production steps through software while preserving stages requiring important creative judgment. - Digital audio workstations allow artists such as Billie Eilish and Finneas to compose, perform, record, and mix with a laptop, but human judgment about what sounds good remains essential. - Digital cinema and streaming weakened the historical distinction between film and television production. - Across these industries, tools converged while the value of creative judgment increased. ## What Comes Next - The new job structure will not immediately change how people work. - Toss still needs to redesign hiring standards, onboarding, and career-development paths. - The consolidation is intended to give designers broader ownership and more room to make decisions across disciplines, ultimately improving the experiences delivered to users.

figma

Free Association: Production Designer Jeremy Hindle on Building Severance | Figma Blog (opens in new tab)

Jeremy Hindle’s production design for *Severance* began with a minimal script description—“four desks, large room”—and developed into Lumon Industries’ eerie, emotionally charged world. Drawing on modernist architecture, industrial design, cinema, and television, Hindle prioritized how spaces feel over what they communicate intellectually. His conclusion is that the show’s unsettling power comes from the tension between sterile order, vast scale, and profound loneliness. ## Designing Emotion - Hindle describes his goal as creating an atmosphere that is “stunning and lonely.” - His experience designing hundreds of commercial offices informed Lumon’s corporate environments. - Rather than focusing only on narrative information, he designs for viewers’ “kinetic” responses—the physical and emotional sensations produced by a space. - The sparse script gave him room to build a complete visual language around emptiness, repetition, and institutional control. ## *Playtime* and Architectural Absurdity - Jacques Tati’s *Playtime* was a central reference for *Severance*. - Tati’s film satirizes modern corporate architecture through vast, impersonal spaces and carefully choreographed movement. - Its mixture of comedy, alienation, and architectural scale helped shape Lumon’s uncanny office environment. ## John Deere Headquarters and Lumon’s Monumental Scale - Kevin Roche and Eero Saarinen’s 1964 John Deere headquarters provided a blueprint for Lumon’s institutional architecture. - Its monumental structure influenced the show’s sense of corporate permanence and authority. - The building also inspired the iconic desks used by the Macrodata Refinement team. - Hindle translated large-scale architectural references into environments that feel both imposing and strangely empty. ## Dieter Rams and Controlled Modernism - Lumon’s largely fabricated sets include selected real design classics, including Dieter Rams’s Braun TS 45 and TG 60 wall console. - Rams’s restrained, functional aesthetic reinforces the company’s carefully controlled visual identity. - The inclusion of recognizable industrial design creates a believable mid-century modern world while making Lumon’s environment feel more curated and artificial. ## Lessons from Film Production - Hindle’s work on *Zero Dark Thirty*, his first feature film, strengthened his commitment to constructing large-scale physical worlds. - He used full-scale models to help the entire crew understand how environments would function and remain visually readable. - This experience supported the detailed spatial planning required for *Severance*’s complex office interiors. ## Negative Space and the Scale of *Fargo* - A single still from the Coen brothers’ *Fargo* influenced Hindle’s vision for the scale of *Severance*. - The image demonstrated how negative space can make characters appear isolated and vulnerable. - Hindle showed the reference to director Ben Stiller, using it to communicate the show’s desired balance of composition, distance, and loneliness. ## The Emotional World of *Her* - Spike Jonze’s *Her*, with production design by K.K. Barrett and costumes by Casey Storm, served as another important reference. - Hindle admired the film’s ability to create a complete emotional world through design. - Its coordinated use of architecture, interiors, color, and clothing helped inform *Severance*’s approach to character and atmosphere. ## *Twin Peaks* and Television with Staying Power - David Lynch’s *Twin Peaks* represented the kind of distinctive, enduring television Hindle hoped *Severance* could become. - Although he had not previously been strongly interested in television, the project offered an opportunity to build a world with lasting cultural and visual identity. - Like *Twin Peaks*, *Severance* combines recognizable everyday settings with surrealism, mystery, and an unsettling sense of place. Hindle’s work shows how production design can make an abstract corporate dystopia physically memorable. By combining modernist architecture, precise industrial objects, cinematic negative space, and emotionally charged emptiness, *Severance* turns Lumon into one of the story’s most powerful characters.

figma

The Art Of Art Direction | Figma Blog (opens in new tab)

Art direction is a collaborative practice built on balance: aligning a brand’s identity, an illustrator’s style, and a project’s constraints without suppressing creative individuality. Figma’s Maria Chimishkyan and Jefferson Cheng argue that strong art direction depends on trained visual judgment, clear communication, and trust in collaborators. The best results often emerge when the initial concept is clear but the final execution remains open to surprise. ## Craft in Illustration and Art Direction - Illustration craft develops through repetition and practice until technical skills become intuitive. - For art directors, craft also means “training the eye”—filtering the vast number of visual artifacts in the world and recognizing what resonates. - Good art direction requires: - Strong editing and decision-making. - A compelling starting concept. - The ability to communicate ideas clearly. - Collaboration throughout the process. - The art director’s role is not only to direct, but also to create the conditions for collaborators to become personally invested in the work. ## Choosing the Right Illustrator - Finding an illustrator is compared to casting an actor: the artist must suit the project while bringing a distinctive perspective. - Important qualities include: - A clear understanding of their own style. - The ability to communicate ideas in unexpected ways. - Confidence working through ambiguity. - Once the core idea is established, art directors give illustrators room to execute rather than over-managing every decision. - Artists may be selected specifically because they have not tackled the requested subject before, allowing them to stretch into unfamiliar constraints. ## Turning Complex Ideas into Visual Narratives - Technical or dense subjects are often reduced to a concise metaphor before visual development begins. - Art directors then decide whether the metaphor should be represented literally or abstractly. - Abstract interpretations can leave more room for viewers—and illustrators—to find meaning. - Examples include: - Hoi Chan’s dreamy botanical illustration for an article using gardening as a metaphor for engineering feedback. - Haik Avanian’s clay-like illustrations for Config talks, including an exaggerated heirloom tomato that became especially memorable. - The strongest work can move beyond its original metaphor and create an independent emotional or visual experience. ## The Advantage of Being an Illustrator - Art directors with firsthand illustration experience better understand: - How mysterious and time-consuming creative work can be. - The expectations and pressures illustrators face. - How to give realistic, constructive feedback. - Experience encourages greater empathy and trust in collaborators. - Over time, the art directors learned to stop pre-visualizing the final result and instead let the illustrator guide the project toward an unexpected outcome. - Effective feedback should make collaborators excited and invested, sometimes encouraging them to push their work further. Art direction works best when it combines a clear foundation with creative freedom. Define the purpose and constraints, choose collaborators whose perspectives add something distinctive, and trust them enough to let the final work evolve beyond the original plan.

figma

Figma on Figma: Our Latest Brand Refresh | Figma Blog (opens in new tab)

Figma refreshed its visual identity to reflect its evolution from a designer-focused tool into a collaborative platform for entire product teams. The new language moves beyond static cursors and heavy outlines, using flexible primitives, dynamic compositions, broader color, custom typography, and motion. Its central idea is to portray Figma as a shared space where people from different roles create together. ## Expanding Beyond a Designer-Centric Identity - Figma’s earlier branding was rooted in “vector vernacular,” including static cursors and bold black outlines. - As developers, product managers, and other contributors became part of the platform, the brand needed to represent more than traditional design work. - The refresh emphasizes the many people involved in turning ideas into finished products. ## Four Foundations of the New Visual Language - **Versatile primitives:** Visual building blocks represent the diverse individuals involved in co-creation. - **Dynamic compositions:** Layouts reflect different ways of making, experimenting, and building. - **Expanded color palette:** Color variables make the system easier to adapt across contexts. - **Integrated motion:** Animation expresses actions and flows within the creative process. ## Typography and Custom Fonts - Figma partnered with Grilli Type to create **Figma Sans**, described as an opinionated grotesque. - The broader type system includes: - Figma Sans - Figma Condensed - Figma Mono - Figma Hand, created with OH no Type - Together, the fonts support different modes of communication, from product design and engineering to brainstorming and collaboration. ## Starting in the Sandbox - Brand Studio began by studying how people use Figma across the entire process: - Brainstorming and ideation - Inspecting elements - Refining and polishing work - The team explored the idea of activities happening simultaneously in a shared environment, similar to “parallel play.” - Playgrounds designed by Isamu Noguchi and Mitsuru Senda inspired the concept of the Figma canvas as a place where people gather, experiment, and create. - Other references included carefully crafted tile work and infrastructure, suggesting a visual system that could combine playfulness with structure. Figma’s new identity is designed to make collaboration visible: a flexible, colorful, and animated system that reflects both the individuality of contributors and the shared space where product ideas take shape.

figma

Finding design inspiration at home | Figma Blog (opens in new tab)

Figma designers argue that creative inspiration can come from ordinary activities, personal memories, online communities, and fields far removed from design. During periods of isolation or creative fatigue, making things, exploring unfamiliar subjects, and connecting with others can be more productive than forcing ideas. The central recommendation is to broaden creative inputs while avoiding direct imitation. ## Less Thinking, More Doing - Overthinking can drain creative energy, especially when work continues during stressful periods. - Trying a new hobby or skill can break the cycle: - Remilla Ty finds inspiration in collecting plants, rearranging furniture, drawing, and writing. - Rasmus Andersson explores computer science, music, and games. - Joyful side projects, such as turning drawings into stickers, can provide a creative boost without the pressure of professional work. ## Finding a Virtual Escape - Travel, museums, architecture, and live music may be unavailable, but memories can provide a substitute source of inspiration. - Creative director Tori Hinn revisits photographs in her camera roll to reconnect with past experiences and regain energy. - Looking through personal archives can offer perspective and stimulate new ideas. ## Leaning on Online Communities - Designers are using social media, Figma Community, articles, videos, and collaborative platforms to stay connected and inspired. - Katherine Frazer recommends Are.na because users can openly contribute to shared collections. - Rasmus Andersson follows curated sources such as Archillect on Twitter. - Noah Levin uses Twitter organically, following interesting designers and discovering more through their networks. - Online communities can replace some of the creative exchange normally found in physical spaces. ## Going Beyond Design - Inspiration becomes stronger when it comes from areas unlike design because the mind must create connections between unfamiliar concepts and visual ideas. - Tori draws from music and movies, while Remilla looks to innovation-focused content such as cooking shows. - Searching directly for solutions to a specific design problem can lead to imitation or narrow thinking. - Rasmus recommends studying neighboring fields or “similar-but-different” problems instead of copying work that solves the exact same challenge. Creative momentum does not require constant exposure to design references. Experiment with hands-on hobbies, revisit personal experiences, connect with online communities, and seek unexpected influences to develop more original ideas.

figma

Bringing Figma to even more classrooms | Figma Blog (opens in new tab)

Figma expanded its Figma for Education program in response to the growing need for remote teaching during COVID-19. The program now supports online courses, bootcamps, school-sponsored hackathons, and other virtual or informal classrooms—not just accredited degree programs. Its goal is to make collaborative design education accessible to more learners. ## Expanding Eligibility Beyond Traditional Institutions - Figma had previously offered free access and discounts to students and educators at accredited institutions. - More than 100,000 people worldwide were already using Figma in classrooms. - The expanded program now includes: - Online courses - Bootcamps - School-sponsored hackathons - Other in-person and virtual learning environments - This broader eligibility supports students pursuing degrees, changing careers, improving their skills, or simply learning about design. ## Supporting Remote Classrooms - The shift to remote education created significant challenges for educators and students. - Figma worked with educators such as Miguel Cardona of RIT and Students Who Design to publish teaching materials and guidance for organizing online classes. - These resources cover onboarding students, structuring files, teaching remotely, and providing project feedback. ## Benefits of the Education Plan Applicants accepted into the program receive: - A free Education plan with Professional-level features. - Unlimited editors, files, and projects. - Classroom-focused templates and other teaching resources. - Access to a community of educators and students. - Invitations to virtual events and meetups. ## Collaborative Design Learning - Figma emphasizes that its browser-based, collaborative workflow fits naturally with how students already work together online. - UC Berkeley professor Eric Paulos highlighted the platform’s ability to bring rich online collaboration into visual design education. - The program reflects Figma’s broader mission of making design more accessible. Educators and students can apply for an Education plan through Figma’s education program, while feedback and ideas are welcomed through the dedicated education team.

figma

11 activities in Figma for your classroom | Figma Blog (opens in new tab)

Figma’s collaborative, browser-based workflow makes it well suited to hands-on design education. This post presents classroom activities that help students learn Figma while practicing visual design, research, geometry, prototyping, and collaboration. The exercises range from beginner icebreakers to intermediate component and illustration projects, with duplicateable files for educators. ## Getting Started with Figma - **Student trading cards** - An introductory activity combining class introductions with basic Figma practice. - Students create social-media-style profiles using Auto Layout and components. - Working in one shared file exposes students to classmates’ processes and styles. - A gallery page can showcase the finished cards. - **Level:** Beginner - **Features:** Auto Layout, Multiplayer Editing - **Make a heart** - Students create and customize a heart using the Pen Tool, Layout Grid, and the Properties panel. - The exercise builds familiarity with foundational drawing and layout tools. - An optional challenge uses Smart Animate to make the heart pulse. - **Level:** Beginner - **Features:** Pen Tool, Properties Panel, Layout Grid ## Exploring Form, Geometry, and Research - **Figma tangrams** - Students use the seven-piece tangram puzzle to explore geometry and form. - Prompts include creating recognizable animals and experimenting with abstract shapes. - A more advanced version asks students to research and build their own reusable puzzle sets. - **Level:** Beginner - **Features:** Components, rotation, alignment - **Design research paper** - Students visualize research findings in a compelling, readable format. - The class builds a collaborative library of articles that peers can read and comment on. - Reviewing the collection encourages discussion about visual hierarchy and communication design. - **Level:** Beginner - **Features:** Layout Grids, Keyboard Shortcuts ## Practicing Components and Collaboration - **Chat windows** - Students design reusable chat components for conversations and visual feedback. - The activity emphasizes customization and creating components useful in future collaborative work. - **Level:** Intermediate - **Feature:** Auto Layout - **Collaborative illustrations with constraints** - Students work together to create a consistent system of illustrations or icons. - Shared constraints—such as a bespoke geometric grid and limited color palette—encourage cohesion and creative problem-solving. - Peer support and critique are central to the exercise. - **Level:** Intermediate Educators can adapt these activities to their students’ experience levels and duplicate the accompanying Figma community files. Together, they provide a practical progression from basic tool literacy to structured collaboration and reusable design systems.

figma

Master the art of design portfolios with this free online Skillshare class | Figma Blog (opens in new tab)

The post introduces a free Figma and Skillshare course designed to help aspiring product designers create stronger portfolios and improve their chances of landing a job. It argues that an effective portfolio should present not only polished results, but also the designer’s process, learning, adaptability, and outcomes. The course covers portfolio creation from initial content choices through interviews and peer feedback. ## Why Portfolios Matter - Applying for a first product design role can be difficult because the field includes many specialties and interview expectations. - A portfolio is central to the job search and should represent work both accurately and memorably. - New designers should be deliberate about what they include and how they frame their experience. ## What the Course Covers The free Skillshare class addresses: - Which information belongs in a design portfolio. - How to create a clear and effective visual presentation. - How to structure projects as case studies. - How to maintain a consistent professional story across: - An online presence - Applications - Interviews - How to iterate on portfolio designs and collaborate with peers in Figma. - How to invite mentors into Figma projects for practical feedback. ## Understanding Product Design Roles - Product design can combine: - User research - User experience design - Prototyping - User testing - Visual design - Smaller companies often expect designers to handle several of these responsibilities. - Larger organizations may divide product design into specialized roles. - Designers should identify their strengths and interests while remaining open to adapting as tools, methods, and industry needs change. ## Showcasing Process and Growth - Portfolios should highlight: - The design process - Key decisions - Lessons learned - Project outcomes - A final visual result alone does not demonstrate how a designer thinks or works. - Employers value candidates who show curiosity, adaptability, and a willingness to learn. - Sharing projects with classmates and mentors can provide useful critique and improve the portfolio. The practical recommendation is to use the course—or the linked written guidance—to build a portfolio that tells a complete story: what you did, why you did it, what you learned, and what changed as a result.

figma

Art of Listening: One designer’s foray into experiential design | Figma Blog (opens in new tab)

The article profiles IDEO interaction designer Mike Godlewski and his side project, Art of Listening, a communal music experience built around focused, uninterrupted listening. Inspired by a movie club, Mike created a space where people listen to an entire album in silence, reflect creatively, and discuss it afterward. The project demonstrates how listening, intentional constraints, and offline experiences can enrich both personal creativity and professional design work. ## Listening as a Design Skill - Mike believes good designers should listen more than they speak. - Understanding human problems requires exploring people’s motivations, needs, and context rather than jumping directly to solutions. - This idea connects design with John Maeda’s distinction between design as a solution and art as a question. ## How Art of Listening Began - Mike was inspired by a friend’s movie club, where participants watched films quietly and discussed them afterward. - He adapted the format to music because he wanted a communal listening experience in his own life. - The project was designed to eliminate digital and social distractions while encouraging reflection. ## The Art of Listening Experience - Participants sit together in a living room and listen to an album from beginning to end. - The central rule is to stay quiet and pay attention: - No conversations - No phone checking - No arriving late - Participants may doodle, write down memories, close their eyes, or simply listen. - Afterward, they discuss the album and share sketches or other responses. ## Designing the Event - Mike carefully selects artists whose albums have strong rhythm, structure, and narrative arcs. - He researches interviews, podcasts, social media posts, and B-sides to understand the artist and album more deeply. - During the listening session, photos and quotations appear on a monitor, adding context beyond what a typical distracted Spotify stream provides. - The event’s simple rules and carefully curated environment make deeper attention possible. ## Offline Creativity and Interface Design - Art of Listening gives Mike a creative reset from his screen-based, systematic interface work. - He observes that many designers seek similar breaks through analog practices such as film photography, letterpress, or bookbinding. - The project shows that unexpected creative activities can replenish designers’ energy and influence their professional work. - Mike’s experience also illustrates how creative pursuits can lead people into unfamiliar roles—in his case, event planning. The article ultimately encourages designers to make room for focused, offline experiences. Listening deeply, imposing thoughtful constraints, and exploring unexpected interests can generate fresh perspective for design work.

figma

How to throw a design-friendly hackathon | Figma Blog (opens in new tab)

Hackathons have traditionally centered on engineers, but design is now essential to building successful technology products. To attract and retain designers, organizers must deliberately recruit them, communicate the event’s creative value, make applications inclusive, and provide design-focused support. Hack@Brown’s experience shows that these efforts can raise designer participation to roughly one-fifth of attendees. ## Why Hackathons Need Designers - Early hackathons were created around programming and engineering, reinforcing the idea that they were primarily for coders. - As design became a major product differentiator, hackathons began seeking stronger collaboration between designers and engineers. - Hack@Brown, Brown University’s annual event with more than 500 participants, experimented with different approaches and reached about 20% designer participation by 2017. ## Recruit Designers Directly - Designers often do not encounter hackathon promotions through computer-science networks. - Organizers should contact: - University art departments - Campus design clubs and social groups - Local art and design schools - Hack@Brown reached out to institutions including RISD, Parsons, and Northeastern’s design club, Scout. - Organizers with personal connections to design communities have an advantage, but broader outreach is necessary to build awareness. ## Market the Creative Opportunity - Generic messaging such as “24 hours” and “loads of prizes” may not appeal to designers. - Promotional materials should demonstrate strong visual design and involve artists or visual thinkers on the organizing team. - Hack@Brown replaced conventional hacker-focused messaging with “Make, play, learn,” emphasizing creativity, collaboration, and experimentation. - The goal is to show designers that they can make meaningful contributions to hackathon teams. ## Create an Inclusive Application Process - Application systems can unintentionally favor experienced engineers or exclude candidates from nontraditional backgrounds. - Organizers can use: - A lottery system with reserved designer spaces - A separate evaluation process for design applicants - Design experts to help review applications - Hack@Brown received about 3,000 applications for 500 places and used representation targets, including at least 15% designers, 50% women, and 20–30% first-time hackathon participants. - Broader participation produced more varied and innovative projects. ## Build a Design-Friendly Event - Recruiting designers is not enough; the event must also support their needs and make them feel included. - Useful initiatives include: - Design workshops before or during the hackathon - UX/UI introductions for participants unfamiliar with design - Designer mixers to help attendees build community - Design mentors, especially those with coding experience - Design recruiters offering job and internship opportunities - Hack@Brown scheduled its event shortly after Brown and RISD career fairs so recruiters could meet many potential candidates efficiently. ## Recognize Designers - The article begins a section on rewarding designers to encourage them to return and recommend the event to others, but the provided text ends before describing the specific reward strategies. A design-friendly hackathon requires intentional outreach, inclusive selection, relevant programming, and visible support for design participants. Treating designers as equal contributors—not as an afterthought—helps create stronger teams and more innovative projects.