chore(curriculum): add common design tools transcripts (freeCodeCamp#58344)

Author: ihechikara

curriculum/challenges/english/25-front-end-development/lecture-common-design-tools/672aa7005c24e45bbd53b20d.md

@@ -10,6 +10,46 @@ dashedName: what-are-design-briefs
 
 Watch the video lecture and answer the questions below.
 
+# --transcript--
+
+What are design briefs and how do developers work with them?
+
+When it comes to designing new features or applications, a good first step would be to create a design brief.
+
+A design brief is a document that outlines the objectives, goals, and requirements of a project. It is a roadmap that guides the design process and ensures that the final product meets the needs of the client.
+
+Usually the client will write the design brief and it will serve as a working draft. Sometimes, the designer might write one and consult with the client to make sure it meets their needs.
+
+There are a few key elements that should be included in a design brief.
+
+The first element is the overview of the project and business. This overview should include the company's details, mission, values, unique selling points, and products or services.
+
+The next key element should be to document the goals and objectives for the project. This should include the purpose of the project, and the desired outcomes.
+
+Examples of goals include increasing traffic to a site or increasing the number of monthly page visits by X percent.
+
+Another key element would be the target audience. The design brief should include information about the target demographics, interests, and needs of the audience.
+
+You should also include information about the competition and how the project will differentiate itself from the competition.
+
+Another key element would be the project scope. This should include the deliverables, timeline, and budget. The deliverables should include a list of all the items that will be produced as part of the project, such as mockups, and final designs.
+
+Without clearly defining project scope, things can get out of hand and go over budget. So, it's best to be as detailed as possible about what is expected to be delivered and by when.
+
+One of the challenging aspects about project design is the timescale and budget. It is important to be realistic about what can be achieved within the given timeframe and budget. So, having a design brief that outlines these constraints is important.
+
+Once all of these details have been discussed and documented, the design brief should be reviewed and approved by all stakeholders before the project begins. At that point, that is when the designers can get started with their work.
+
+So, what is the developer's role in all of this? The developer's role is to take the designs, understand the project requirements, and turn them into a working product.
+
+This involves writing code, testing, and debugging the application to ensure that it meets the requirements outlined in the design brief.
+
+Oftentimes, developers will work in teams where the work is split up between multiple developers.
+
+There will also usually be a project manager who will be responsible for coordinating the work and making sure that the project stays on track.
+
+So, while you might not be involved in the design and initial decision making process as a developer, it is still important to understand the design brief and how it will impact your work.
+
 # --questions--
 
 ## --text--

curriculum/challenges/english/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md

@@ -10,6 +10,49 @@ dashedName: what-are-some-common-tools-developers-should-know-about
 
 Watch the lecture video and answer the questions below.
 
+# --transcript--
+
+What are some common tools developers should know about that are used by designers in the industry?
+
+Design is the foundation of every enterprise-level web application. That's why designers and developers work closely to create user-focused interfaces that are visually appealing and functional.
+
+Because of this, developers should be familiar with common design tools to make the most of what designers offer. Most of these design tools excel in vector-based design and prototyping.
+
+Vector-based design involves creating digital art using mathematical formulas to define lines, shapes, and colors. Prototyping, on the other hand, refers to the process of creating an interactive model of a product or user interface.
+
+Let's talk about some common design tools developers should know about.
+
+Figma is one of the most common and essential design tools that developers should know. This cloud-based tool specializes in User Interface and User Experience (UI/UX) design. It enables design and development teams to collaborate from anywhere, offering built-in features such as:
+
+- Vector-based design
+- Automatic layout
+- Commenting and feedback system
+- Version history
+- Real-time collaboration
+- Design systems, and more.
+
+To get started with Figma, you can use the web-based interface or download the desktop app for your computer. It has a generous free tier, so you can get a lot done without paying for the pro version.
+
+Sketch is another essential design tool that developers should be familiar with. Like Figma, it is vector-based and primarily used for UI/UX design.
+
+Sketch is popular for its intuitive interface and simplicity, making it ideal for developers who want to quickly create prototypes. It's also widely used by designers for tasks like creating UIs, icons, and web layouts.
+
+The main constraints with Sketch are its lack of a cloud-based interface and its availability only on macOS.
+
+Adobe XD is another vector-based design and prototyping tool for UI/UX design, known for its seamless integration with other Adobe apps like Photoshop, Illustrator, and After Effects.
+
+This integration makes workflows such as interactive prototyping and animations more efficient.
+
+Adobe XD is available for both Windows and MacOS and includes a cloud-based interface. For the best experience, however, you should use the app directly.
+
+Another design tool worth mentioning is Canva. You can use Canva to create a wide range of visual content, including posters, cover photos, presentations, short videos, and more. Its user-friendly and simple design makes it ideal for beginners.
+
+Additionally, Canva offers a rich library of templates, images, and design elements that make it easy to create professional-looking designs.
+
+Beyond these features, Canva supports web interface design and allows for collaboration with teammates. The platform is available on the web and as an Android app.
+
+Other popular design tools developers should know are Framer, InVision, Adobe Photoshop, Adobe Illustrator, and Miro.
+
 # --questions--
 
 ## --text--