# Week 13: Professional Practice: Dev handoff, working in a team, branching, Jira
Learning Objective
By the end of this week, students will:
- Have an understanding of professional practices expected from designers in a real work environment
- know how to prepare design file for developers
- Understand some practices of working in a multi-discipline team
- Work on wireframes for their final project and review with teacher and peers
# Professional Practice
Professional practices for UI designers encompass a range of skills, behaviors, and standards that contribute to the effective design and implementation of user interfaces. These practices help ensure high-quality work, smooth collaboration with team members, and a consistent user experience. Here are some key professional practices for UI designers:
# 1. Design Consistency and Standards
- Follow Design Systems: Adhere to established design systems and style guides to maintain consistency across products.
- Use Standard UI Elements: Utilize standard UI components and patterns to meet user expectations and ensure usability.
- Consistency in Visual Elements: Ensure consistent use of colors, typography, spacing, and icons throughout the design.
# 2. User-Centered Design
- User Research: Conduct user research to understand the needs, behaviors, and pain points of the target audience.
- Personas and Scenarios: Develop personas and scenarios to guide design decisions and empathize with users.
- Accessibility: Design with accessibility in mind, ensuring that the interface is usable for all users, including those with disabilities.
# 3. Collaboration and Communication
- Work with Cross-Functional Teams: Collaborate closely with UX designers, developers, product managers, and other stakeholders.
- Clear Communication: Communicate design decisions clearly and effectively, using annotations, documentation, and presentations.
- Feedback and Iteration: Be open to feedback and iterate on designs based on input from team members and user testing.
# 4. Prototyping and Testing
- Create Prototypes: Develop interactive prototypes to demonstrate design interactions and gather feedback.
- Usability Testing: Conduct usability testing to identify and address issues in the design before implementation.
- A/B Testing: Use A/B testing to compare different design variations and determine the most effective solutions.
# 5. Attention to Detail
- Precision in Design: Pay close attention to details like alignment, spacing, and visual hierarchy.
- Pixel Perfection: Strive for pixel-perfect designs, ensuring that all elements are precisely placed and sized.
- Responsive Design: Design with responsiveness in mind, ensuring the UI works well on various devices and screen sizes.
# 6. Ethical Considerations
- Avoid Dark Patterns: Refrain from using manipulative design techniques that deceive or mislead users.
- Privacy and Data Protection: Respect user privacy and design interfaces that protect sensitive information.
- Inclusive Design: Consider diverse user needs and ensure the design is inclusive and welcoming to all users.
# 8. Effective Workflow and Time Management
- Organized Workflow: Maintain an organized workflow, using tools like design software, project management tools, and version control.
- Agile Methodologies: Agile and Scrum frameworks are likely to be used within the teams you work with. It is important for you to embrace and learn these methods to optimize your work and collaboration with product managers and developers.
- Prioritize Tasks: Prioritize tasks based on project timelines, complexity, and impact.
- Meet Deadlines: Adhere to deadlines and communicate proactively if there are any delays or challenges.
# 9. Documentation and Handoff
- Detailed Documentation: Provide clear and comprehensive documentation for designs, including specifications and interaction details.
- Efficient Handoff: Ensure a smooth handoff to developers by providing all necessary assets, guidelines, and annotations.
- Maintain Design Systems: Contribute to and maintain design systems, ensuring they are up-to-date and comprehensive.
# 10. Professionalism and Ethical Conduct
- Respectful Communication: Communicate respectfully and professionally with colleagues, clients, and stakeholders.
- Intellectual Property: Respect intellectual property rights and ensure all design assets used are properly licensed.
- Transparency and Honesty: Be transparent and honest in all professional dealings, including project scope, timelines, and costs.
# Build your career as a designer
# 1. Portfolio Development
- Building a Portfolio: It is essential for UI designers to create a professional portfolio that showcases a range of skills and projects in order to apply for design jobs.
- Case Studies: are very helpful to show your design process. Write compelling case studies, detailing the design process, challenges, and solutions.
- Personal Branding:Your portfolio should show who you are with the strength and uniqueness you bring to the team. Create your personal branding, online presence, and networking.
# 2. Practical Experience
- Internships and Projects: Seek internships or freelance projects for real-world experience that can be portrayed in your portfolio.
- Critiques and Feedback: Regularly conduct peer reviews and critiques to simulate industry feedback loops.
# 3. Career Development
- Job Search Strategies: Make sure to have a compelling Linkedin profile, a resume and cover letter template tailored to the design industry. Your portfolio link is often required for every job submission to showcase your work.
- Interview Preparation: Practice mock interviews and portfolio reviews to prepare for job interviews.
- Negotiation Skills: Make sure to do your research about salaries so when you pass an interview you can negotiate a fair salary and job offers.
# 4. Continuous Learning and Skill Development
- Stay Updated: Keep up with the latest design trends, tools, and technologies.
- Skill Enhancement: Continuously improve skills in areas such as typography, color theory, and interaction design.
- Networking and Community Engagement: Participate in design communities, attend workshops, and engage with other professionals.
- Mentorship: As you start your career it may be very helpful to find design mentors who can guide you. One day in the future maybe you become a mentor that guides juniors to find their first jobs.
# 5. Legal and Business Aspects
- Contracts and Agreements: It is worthwhille to research the basics of design contracts so you know what to expect when you sign a contract or create your own as a freelancer.
- Freelancing and Entrepreneurship: A freelance career or a design business may be something you want to explore while waiting or performing a permanent design job.
# Dev Handoff
Designers collaborate with developers, product managers and other stakeholders to create successful products. As you complete your designs, it is critical to properly present them and hand them off to developers. With Figma Dev mode this task has become easier than ever. See this recently posted video showing what all is possible with Dev mode.
# Dev Handoff Checklist
# 1. Preparation
- Finalized Designs: Ensure all design files are complete, including states, interactions, and variations.
- Design System and Style Guide: Provide access to the design system, including typography, color schemes, and component specifications.
- Consistent Naming Conventions: Use clear and consistent naming for layers, components, and assets.
# 2. Design Files
- Tools: Ensure developers have access to the design tool (Figma, Sketch, Adobe XD, etc.) and relevant accounts.
- Export Settings: Set up correct export settings for all assets (resolution, file type, etc.).
- Organized Structure: Keep design files organized into pages or artboards representing different screens, states, or sections.
# 3. Assets
- Icons and Illustrations: Export icons and illustrations in required formats (SVG, PNG, etc.) with naming conventions.
- Images: Provide high-resolution images and specify if any images require special handling, such as optimization.
- Fonts: List all fonts used, with links for download or integration options (web fonts, licensing information).
# 4. Documentation
- Design Specs: Provide detailed design specifications, including dimensions, spacing, margins, and padding.
- Interaction Details: Document interactions, animations, and transitions. Specify timing, easing, and conditions for animations.
- Component States: Detail different component states (hover, active, disabled, etc.) with visual examples.
# 5. Annotations
- Notes and Explanations: Use annotations to explain design decisions, especially for complex elements or interactions.
- Accessibility Considerations: Include any accessibility guidelines or considerations, such as color contrast ratios, text size, and focus states.
# 6. Prototypes and Flow
- Clickable Prototypes: Provide a clickable prototype to demonstrate user flow and interactions.
- User Flow Diagrams: Include user flow diagrams or journey maps that outline the paths users can take through the application.
# 7. Communication and Collaboration
- Kick-off Meeting: Schedule a handoff meeting to walk through the designs and clarify any questions.
- Feedback Loop: Establish a channel for ongoing communication (Slack, email, project management tools) to handle questions and feedback.
- Version Control: Ensure both teams are aware of version control practices and any updates or changes to designs. Learn about Figma branching as a way to version your Figma files.
# 9. Handoff Checklist
- Design Files Reviewed: Ensure all files are reviewed and match the project's requirements.
- Assets Exported: Confirm that all assets are exported correctly and included.
- Documentation Complete: Check that all necessary documentation is complete and accessible.
- Communication Established: Ensure a clear communication line is open between designers and developers.
# 10. Post-Handoff
- Support and Clarifications: Be available to answer questions and provide support as developers implement the designs.
- Iteration and Feedback: Be prepared for iterative feedback and potential design adjustments based on development constraints or usability testing.