Talking Drupal #444 - Design to Development Workflow Optimization
Apr 1, 2024
auto_awesome
Design and development handoff optimization discussed with expert Crispin Bailey. Topics include challenges, collaboration tools like Figma, and framework recommendations. Also, exploration of Office Hours module in Drupal for managing business operation hours efficiently.
Start design to development process with thorough discovery to align on goals and strategy.
Utilize collaboration tools like Figma and FigJam for real-time communication and feedback.
Educate designers on implementation constraints to enhance collaboration with developers for user-centered designs.
Deep dives
Design Process Workflow Optimization
Design and development workflow optimization involves starting with a discovery phase to understand the target audience, problem-solving goals, technical requirements, and overall strategy. Collaborative efforts between designers and developers during ideation help explore different approaches considering technical and budget constraints. Moving from wireframing to high-fidelity designs involves detailed discussions on mechanics, interactive behaviors, and visual aesthetics, ensuring alignment with the project goals.
Handoff Artifacts and Collaboration Tools
Handoff artifacts shared with the team include content maps, research reports, wireframes, and a Figma-based design system file. Collaboration tools like Figma and FigJam facilitate brainstorming, ideation, and interactive prototyping, enabling real-time communication and feedback. To enhance clarity, a Google Doc feedback document is often used to consolidate notes and discussions, ensuring effective collaboration between design and development teams and clients.
Evaluating and Implementing New Tools
To evaluate new tools and technologies, internal experimentation precedes potential integration into client projects to mitigate risks. Monthly demos showcase new tools and features, fostering team discussions and potential adoption. When considering new tools like generative AI, an AI governance program is established to assess use cases, prioritize implementation, and ensure compliance with privacy and data policies. The iterative process allows for careful evaluation before full integration into workflows.
Challenges in Design Understanding and Collaboration
Designers may face challenges when not understanding the implementation constraints of front-end themes, leading to difficulties in adjustments like moving elements slightly or aligning them across breakpoints. This requires educating designers about the technical considerations and the need for collaboration with front-end developers to ensure alignment with accessibility requirements and user needs. A mindset shift from control-freak tendencies to openness to change is crucial for designers to enhance collaboration and produce user-centered designs.
Evolution of Design Processes with AI Integration
Exploring AI tools cautiously in design processes can offer efficiency gains like generating icons or initial designs. However, while AI aids in brainstorming and ideation, designers must maintain critical judgment and professional standards as these tools are experimental and not replacements for human expertise. Documenting use cases, understanding ethical implications, and emphasizing human craftsmanship amid AI integration will be essential to navigate future design challenges and shifts towards designing for varied endpoints beyond traditional screens.
Today we are talking about design to development hand off, common complications, and ways to optimize your process with guest Crispin Bailey. We’ll also cover Office Hours as our module of the week.
How old: created in Jan 2008 by Ozeuss, though recent releases are by John Voskuilen of the Netherlands
Versions available: 7.x-1.11 and 8.x-1.17
Maintainership
Actively maintained, latest release was 3 weeks ago
Security coverage
Test coverage
Documentation: no user guide, but a pretty extensive README
Number of open issues: 15 open issues, only 1 of which are bugs against the current branch, though it’s postponed for more info
Usage stats:
Almost 20,000 sites
Module features and usage
Previously covered in episode 113, more than 8 years ago, in the “Drupal 6 end of life” episode
The module provides a specialized widget to set the hours for each weekday, with the option to have more than one time slot per day
You can define exceptions, for example on stat holidays
You can also define seasons, with a start and end date, during which the hours are different
The module also offers a variety of options for formatting the output:
You can show days as ranges, for example Monday to Friday, 9am to 5pm, 12-hour or 24-hour clocks, and so on
Obviously it will show any exceptions or upcoming seasonal hours too
It can also show an “open now” or “closed now” indicator
It can create schema.org-compliant markup for openingHours, and has integration with the Schema.org Metatag module
Office Hours does all this with a new field type, so you could add it to Stores in a Drupal Commerce site, a Locations content type in a site for a bricks-and-mortar chain, or if you just need a single set of hours for the site, you should be able to use it with something like the Config Pages module
The README file also includes some suggestions on how to use Office Hours with Views, which can give you a lot of flexibility on where and how to show the information
Remember Everything You Learn from Podcasts
Save insights instantly, chat with episodes, and build lasting knowledge - all powered by AI.
