Unit -1

Introduction to Design Technologies and Tools

Introduction to Design Technologies and Tools

• Sketch
• Wireframe
• Invision
• Axure
• Figma
• Flutter
• Mock ups
 Wireframe
• Wireframes are a visual representation of a user
interface design that shows the layout and
functionality of a digital product or system.
• They are essentially a blueprint or rough sketch of
the user interface, without the actual visual
design elements such as color, typography, and
imagery.
• Wireframes are typically created early in the
design process to help clarify the layout and
functionality of a product before the design
elements are added.
• They can be created using various tools, including
pen and paper, whiteboards, or digital design
software.
 Key Characteristics of Wireframes
1. Structure and Layout: Wireframes emphasize the overall structure and layout of a design,
illustrating the placement of key elements such as navigation, content areas, and interactive
features.

2. Low-Fidelity Design: Being low-fidelity, wireframes prioritize functionality over aesthetics.

They are devoid of detailed visuals, allowing designers to focus on the core structure and user
interactions.

3. Content Hierarchy: Wireframes highlight the hierarchy of content and features, indicating the
relative importance of different elements on a page or screen.

4. User Flow: They often incorporate user flows, showcasing the anticipated paths users might
take through the interface. This aids in refining the user experience.

5. Iterative Design: Wireframes facilitate an iterative design process, allowing for quick
adjustments and revisions in response to feedback without investing extensive time in visual
details.
Purposes of Wireframes
• Wireframes help in visualizing and conceptualizing the basic structure and layout of a
design before moving into more detailed stages of development.
• They serve as a communication tool between designers, stakeholders, and development
teams, ensuring a shared understanding of the design's foundational elements.
• Early wireframes can be used for user testing, focusing on the usability and functionality
of the interface without the distraction of visual details.
• Providing a clear roadmap for development, wireframes streamline the design-to-
development process by offering a clear reference for layout and functionality.
• Wireframes offer a cost-effective way to prototype and validate design concepts without
investing extensive resources in high-fidelity visuals.
Types of Wireframes
There are three main types of Wireframes

• Low-fidelity wireframes are simple representations with minimal detail, designed for early
brainstorming and obtaining rapid feedback.
• Mid-fidelity wireframes strike a balance between speed and visual detail, offering a
moderate level of representation to gather feedback on both structure and appearance.
• High-fidelity wireframes are advanced mockups that closely resemble the final product,
incorporating detailed visual elements and functionality to provide a realistic
representation.
Example of Wireframes

Imagine planning a website homepage:

• The wireframe might have boxes for a logo, navigation menu, main banner, text sections,
and a footer.
• It wouldn’t include colors, fonts, or final images—just placeholders and annotations
 Sketch
• Sketch is a popular vector-based design
tool specifically designed for UI/UX
designers. It focuses on creating user
interfaces, wireframes, prototypes, and
other digital design assets.

• It is widely used for web and app

design projects due to its simplicity,
collaborative features, and extensive
plugin ecosystem.
 Key Features of Sketch
1. Vector-Based Design
• Create scalable and resolution-independent designs, ideal for responsive web and
mobile interfaces.
2. Symbols & Reusable Components
• Build reusable design elements (like buttons, icons, or navigation bars).
• Update symbols globally to maintain consistency across designs.
3. Artboards
• Use multiple artboards to design screens for different devices or states within a single
project file.
4. Prototyping
• Link artboards and create interactive prototypes to simulate app or website
navigation.
• Preview and share prototypes with stakeholders or developers.
Key Features of Sketch
5. Collaboration
• Use Sketch for Teams to collaborate on designs in real-time, allowing feedback and version control.
• Share design files via Sketch Cloud for seamless feedback and reviews.
6. Plugins & Integrations
• Extensive plugin library for additional features, such as animation, asset export, or integration with tools
like Zeplin, Figma, and InVision.
• Integrates with development handoff tools for seamless developer collaboration.
7. Export Features
• Export designs in multiple formats (PNG, SVG, JPG, PDF).Generate CSS, iOS, or Android code snippets for
developers.
8. Responsive Design Tools
• Use constraints to design responsive layouts that adapt to different screen sizes.
Advantages
• Intuitive and easy-to-use interface.
• Lightweight compared to alternatives like Adobe XD or Figma.
• Strong community and a vast library of resources, templates, and plugins.
Key Features of Sketch
Limitations
• Platform Restriction: Only available for macOS.
• Collaboration: While it has collaborative features, tools like Figma offer more robust
real-time collaboration.
• Performance: Can be slower with very large files compared to some competitors.
Pricing
• Individual License: Starts at $9/month or $99/year per user.
• Sketch for Teams: $12/month per editor with additional collaboration features.
• Free trial available for new users.
Popular Use Cases
• Designing user interfaces for websites and mobile apps.
• Creating wireframes and prototypes for client presentations.
• Collaborating with developers for design handoff.
InVision
• InVision is a digital product design platform widely used by UI/UX designers for
prototyping, collaboration, and workflow management.
• It allows teams to create interactive prototypes, gather feedback, and streamline
the design process from concept to development.
Key Features of InVision
1. Prototyping
• Create clickable, interactive prototypes to simulate user experiences.
• Add animations, transitions, and gestures for realistic app or web behavior.
• Works seamlessly with design tools like Sketch and Figma.
2. Freehand
• A collaborative digital whiteboard for brainstorming, sketching wireframes, and
gathering feedback in real time.
• Teams can create low-fidelity designs and workflows.
 Key Features of InVision
3. Design System Manager (DSM)
• Organize and share design systems, ensuring consistency across projects.
• Centralized library of components, styles, and guidelines.
4. Developer Handoff
• Generate specs, assets, and code snippets for developers directly from the design.
• Reduces manual effort and ensures clarity in communication between designers and
developers.
5. Collaboration
• Real-time feedback with comment threads directly on the design.
• Share designs securely with team members, clients, or stakeholders.
• Version history allows tracking of changes and iterations.
Key Features of InVision
6. Templates
• Ready-to-use templates for workflows, brainstorming, and design reviews.
• Speeds up project setup for common tasks.

7. Integrations
• Works with popular tools like Slack, Jira, Trello, and Microsoft Teams.
• Compatible with design tools like Sketch for seamless imports.
 Why Use InVision?
1. Collaboration
• Perfect for remote teams, enabling real-time discussions and updates.
• Stakeholders can provide feedback without needing design expertise.
2. Prototyping
• Interactive mockups help stakeholders visualize the final product early in the
process.
3. Streamlined Workflow
• Integration with developer tools and design systems ensures smooth transitions
between design and development.
4. Accessibility
• Web-based platform accessible from any browser, with no installation required.
 Plans and Pricing
Free Plan:
• Up to 3 documents (prototypes or Freehand files).
Pro Plan:
• Unlimited documents, collaboration, and advanced features ($7.95/month per user).
Enterprise Plan:
• Custom pricing with advanced security, analytics, and integrations for large
organizations.

When to Use InVision?

• When you need to create interactive prototypes.
• For gathering team feedback and collaborating remotely.
• When managing design systems for consistency across projects.
 Axure RP: Comprehensive Wireframing and Prototyping Tool
• Axure RP (Rapid Prototyping) is
a tool that allows users to create
wireframes and prototypes for
digital products without writing
code.

• It's used by professionals in

product development and user
experience design.
 Key Features:
• Create wireframes: Quickly create wireframes, visual diagrams, and user
interfaces
• Create prototypes: Create interactive prototypes with conditional logic,
animations, and data-driven interactions
• Document for development: Annotate wireframes and prototypes to
specify functionality and track tasks
• Design for multiple devices: Design for desktop, tablets, and phones on a
single page
• Collaborate: Support team projects, allowing multiple designers to work
on the same file simultaneously
 Why Use Axure RP?
• For Complex Prototypes: Axure excels at building high-fidelity, interactive
prototypes with dynamic elements, making it ideal for detailed projects.
• For Advanced Interactions: Unlike basic wireframing tools, it supports
logic-based interactions like conditions, variables, and math functions.
• For Documentation: Its built-in annotation and specification features
streamline design handoffs.
• Responsive Design: It lets you design for multiple screen sizes in a single
project file.
 Advantages and Disadvantages
Advantages
• Comprehensive set of tools for detailed, functional prototypes.
• Great for testing and demonstrating complex user flows.
• Built-in documentation features save time on project reporting.
Disadvantages
• Steeper learning curve compared to simpler tools like Figma.
• Higher cost, making it more suitable for enterprise teams or large projects.
• Limited visual design capabilities compared to tools like Sketch.
Pricing
• Axure RP 10 Pro: $29/month or $495/year.
• Axure RP 10 Team: $49/month or $895/year.
• Axure Cloud: Free plan available, with paid options for advanced
collaboration.
When to Use Axure RP?
• For detailed, high-fidelity prototypes that require advanced
functionality.
• When creating complex user flows with conditional logic.
• For projects needing extensive documentation and developer handoff
features.
Figma
• Figma is a Collaborative Design and Prototyping Tool.
• Figma is a cloud-based design platform widely used for
creating user interfaces (UI), user experiences (UX),
wireframes, prototypes, and design systems.
• Known for its real-time collaboration features, Figma is an
industry favorite among designers, developers, and product
teams.
 Key Features of Figma
1. Cloud-Based Collaboration
• Real-time collaboration allows multiple users to work on the same
design simultaneously.
• Share designs instantly with stakeholders using a web link.
2. Prototyping
• Create interactive prototypes by linking frames and adding transitions.
• Simulate user flows for web and mobile applications.
3. Design Tools
• Vector-based design with an intuitive interface.
• Extensive component libraries, reusable elements, and auto-layout for
responsive designs.
 Key Features of Figma
4. Version Control
• Automatic saving and version history for tracking changes.
• Revert to earlier versions if needed.
5. Developer Handoff
• Share design files with developers, including specs, assets, and CSS code.
• Reduces the need for external tools or plugins.
6. Plugins and Widgets
• Extensive plugin library for accessibility checks, animation, mockups, and
more.
• Widgets like sticky notes, to-do lists, and timers enhance team collaboration.
7. Cross-Platform Compatibility
• Works directly in your browser with no installation required.
• Native apps available for macOS and Windows.
 Key Features of Figma
8. Figma Community
• Access free design resources, templates, and plugins shared by other
designers.
• Share your own designs or get inspired by others.
9. Design Systems
• Build and maintain consistent design systems with shared libraries.
• Sync updates across projects instantly.
Pricing

Free Plan:
• Up to 3 projects.
• Unlimited files and collaborators.
Professional Plan: $12/month per editor (billed annually).
• Unlimited projects, version history, and sharing permissions.
Organization Plan: $45/month per editor (billed annually).
• Advanced design system management and analytics.
 Flutter

• Flutter is a UI Framework for Cross-Platform App Development.

• Flutter is a free and open-source UI software development kit (SDK)
created by Google.
• It enables developers to build natively compiled, high-performance
applications for multiple platforms, including iOS, Android, web,
desktop, and embedded devices, using a single codebase.
 Key Features of Flutter
1. Single Codebase
• Write one codebase and deploy it across multiple platforms.
• Significantly reduces development time and effort.
2. Rich Widget Library
• Flutter provides a comprehensive library of customizable widgets for creating modern,
visually appealing UIs.
• Widgets follow Material Design (Android) and Cupertino (iOS) guidelines.
3. Dart Programming Language
• Flutter uses Dart, an object-oriented, client-optimized programming language.
• Dart is easy to learn, fast, and offers features like just-in-time (JIT) and ahead-of-time
(AOT) compilation.
 Key Features of Flutter
4. Hot Reload
• Instantly view code changes in the app during development without restarting the app.
• Boosts productivity and speeds up debugging.
5. High Performance
• Flutter apps are compiled into native machine code, ensuring smooth performance and
responsiveness.
• The Skia graphics engine delivers high-quality visuals at 60fps or higher.
6. Customizable Uis
• Create unique designs without platform-specific limitations.
• Provides granular control over every pixel, enabling creative and dynamic layouts.
 Key Features of Flutter

7. Extensive Plugin Ecosystem

• Access numerous plugins for integrating APIs, databases, payments, and more.
• Popular plugins include Firebase, Google Maps, and in-app purchases.
8. Cross-Platform Compatibility
• Support for iOS, Android, Windows, macOS, Linux, web, and embedded systems from a
single codebase.
 Advantages of Flutter

• Fast Development: Hot reload and reusable code streamline app creation.
• Unified Design: Consistent UI across platforms with customizable widgets.
• Open Source: Backed by a strong community and Google.
• Cost-Effective: Build for multiple platforms without separate teams.
• Support for Web and Desktop: Expanding beyond mobile to include web and desktop
applications
 Limitations of Flutter

• App Size: Flutter apps tend to have larger initial download sizes compared to native apps.
• Learning Curve: Requires learning Dart, which is not as widely used as JavaScript or
Python.
• Native Features: May need additional workarounds or plugins for highly platform-specific
features.
Popular Apps Built with Flutter

• Google Ads
• Alibaba
• Reflectly
• BMW (in-car apps)
• Hamilton Musical app
Getting Started with Flutter

1. Install Flutter SDK:

• Download Flutter from its official website.
• Set up an IDE like Visual Studio Code, Android Studio, or IntelliJ IDEA.
2. Write Your First App:
• Use the flutter create command to scaffold a new project.
• Run flutter run to launch the app on an emulator or physical device.
3. Explore Widgets:
• Learn the basics of Flutter widgets like Scaffold, Container, Text, and ListView.