From 7d0e35d7ae2055e8840b6b89b006ae9047a81470 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 27 Mar 2023 14:40:35 +0100 Subject: [PATCH] Update wireframing tools --- .../104-prototyping/wireframing/100-figma.md | 14 +------------- .../104-prototyping/wireframing/102-sketch.md | 13 +------------ .../104-prototyping/wireframing/103-balsamiq.md | 16 +--------------- 3 files changed, 3 insertions(+), 40 deletions(-) diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md index 510c81d93..6c60a481e 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md @@ -16,17 +16,5 @@ - **Plugins**: Figma supports a wide range of user-created plugins that extend its functionality, allowing you to tailor the tool to your specific needs. -## Getting Started -To start using Figma, sign up for a [free account](https://www.figma.com/signup/), which provides a personal workspace with unlimited files, three active projects, and access to the community. There are also paid plans available for individuals, teams, and enterprises. Once you've signed up, you can access Figma directly from your browser, or you can download the desktop app for improved performance. - -## Learning Resources - -If you're new to Figma, here are some resources to help you get started: - -- [Figma Tutorial for Beginners](https://www.youtube.com/watch?v=Cx2dkbp_Blk) (Video) -- [Figma's Official Help Center](https://help.figma.com/hc/en-us/) -- [Figma Community](https://www.figma.com/community)for templates, UI kits, and examples -- [Learn Design with Figma](https://www.figma.com/resources/learn-design/) (Interactive design course) - -Figma's collaborative features, along with its capabilities for wireframing, prototyping, and designing, make it a popular choice among UX designers. Give it a try for your next project, and see how it can improve your design process. \ No newline at end of file +- [Figma Website](https://figma.com) \ No newline at end of file diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md index dbb53dba6..84ca03316 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md @@ -14,15 +14,4 @@ Sketch is a powerful digital design tool specifically tailored for user interfac - **Collaboration and Plugins:** Sketch offers a wide range of plugins and integrations for collaborative work and extends its functionality via community-driven addons. -## How to use Sketch in wireframing - -To get started with Sketch in wireframing, follow these simple steps: - -- Create a new document and set up your artboards to match the devices you're designing for. -- Use Sketch's pre-built shapes, layers, and text tools to create the basic structure of your wireframe. -- Create symbols for your common design elements, such as buttons, controls, and menus. -- Apply styles, such as colors, fonts, and layers, to bring your wireframe to life. -- Create links and hotspots in your design to simulate user interactions and navigation. -- Export your wireframe to different formats to present, share and test your designs. - -In conclusion, Sketch is a go-to tool for many UX designers due to its powerful features and focus on interface design. By understanding how to effectively use Sketch for wireframing, you'll be able to create detailed and interactive UI designs, which will ultimately help drive the success of your project. \ No newline at end of file +- [Sketch Website](https://www.sketch.com/) \ No newline at end of file diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/103-balsamiq.md b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/103-balsamiq.md index 18d1b2ff2..8512fda20 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/103-balsamiq.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/103-balsamiq.md @@ -1,7 +1,5 @@ # Balsamiq -**Balsamiq Wireframing Tool** - Balsamiq is a popular wireframing tool that helps designers, developers, and product managers to quickly create and visualize user interfaces, web pages, or app screens. It's an easy-to-use software that allows you to focus on ideas and concepts rather than getting caught up in pixel-perfect designs. **Key Features of Balsamiq** @@ -16,16 +14,4 @@ Balsamiq is a popular wireframing tool that helps designers, developers, and pro - *Integration with Other Tools:* Balsamiq can integrate with popular tools like Google Drive, Atlassian Confluence, Jira, and more, allowing you to seamlessly collaborate and manage your projects. -**Using Balsamiq for Wireframing** - -Here is a step-by-step guide to creating wireframes using Balsamiq: - -- Download and install Balsamiq on your computer or use Balsamiq Cloud for web-based access. -- Open Balsamiq and create a new project. -- To start creating your wireframe, simply drag and drop elements from the UI Library onto your canvas. -- Double-click elements to edit their properties, such as text, size, and color. -- Use the toolbar at the top of the window to align, arrange, or group elements. -- Create multiple screens by adding more pages to your project, and link them together using the built-in prototyping features. -- Once your wireframes are complete, share them with your team or export them to your desired format for further use. - -In summary, Balsamiq is a powerful and easy-to-use wireframing tool that can help you quickly visualize your ideas and iterate on your designs. It's an essential tool for any UX designer, developer, or product manager looking to create effective and efficient wireframes. \ No newline at end of file +- [Balsamiq Website](https://balsamiq.com/) \ No newline at end of file