195 lines
8.0 KiB
TypeScript
195 lines
8.0 KiB
TypeScript
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { HireTalentHeroBanner } from "../components/HireTalentHeroBanner";
|
|
import { FAQSection } from "../components/FAQSection";
|
|
import { AppSuccessMetrics } from "../components/AppSuccessMetrics";
|
|
import { StepsIllustrated } from "../components/StepsIllustrated";
|
|
import { CarouselTestimonials } from "../components/CarouselTestimonials";
|
|
import { ResourceCards } from "../components/ResourceCards";
|
|
import { SplitCallToAction } from "../components/SplitCallToAction";
|
|
import { ProjectTimelineVector } from "../components/vectors/ProjectTimelineVector";
|
|
import { MousePointer, Users, Code, CheckCircle, Star, Award, Clock, TrendingUp } from "lucide-react";
|
|
|
|
const hireClickablePrototypesDevelopersData = {
|
|
heroBanner: {
|
|
category: "Hire Expert Designers",
|
|
title: "Hire Clickable Prototypes Developers",
|
|
description: "Bring your ideas to life with interactive, clickable prototypes that demonstrate functionality and user experience before development begins. Validate concepts and iterate designs efficiently.",
|
|
primaryCTA: {
|
|
text: "Hire Prototype Experts",
|
|
href: "/contact-us",
|
|
icon: MousePointer
|
|
},
|
|
secondaryCTA: {
|
|
text: "View Designer Profiles",
|
|
href: "/hire-talent",
|
|
icon: Users
|
|
}
|
|
},
|
|
|
|
// Clickable Prototypes specific metrics
|
|
metrics: [
|
|
{
|
|
value: "250+",
|
|
label: "Interactive Prototypes",
|
|
description: "Clickable demonstrations built"
|
|
},
|
|
{
|
|
value: "80%",
|
|
label: "Development Time Saved",
|
|
description: "Through early validation"
|
|
},
|
|
{
|
|
value: "95%",
|
|
label: "Stakeholder Approval",
|
|
description: "Clear concept visualization"
|
|
},
|
|
{
|
|
value: "48hrs",
|
|
label: "Rapid Prototyping",
|
|
description: "Quick concept to clickable"
|
|
}
|
|
],
|
|
|
|
// Clickable Prototypes development process
|
|
process: {
|
|
title: "Our Clickable Prototyping Process",
|
|
subtitle: "From concept sketches to interactive demonstrations",
|
|
steps: [
|
|
{
|
|
number: "01",
|
|
title: "Concept Analysis & Planning",
|
|
description: "Analyze requirements and create a strategic plan for building interactive prototypes that effectively communicate your vision.",
|
|
icon: <MousePointer className="w-8 h-8" />,
|
|
details: [
|
|
"Requirement analysis and feature prioritization",
|
|
"User journey mapping and interaction planning",
|
|
"Prototype scope definition and timeline",
|
|
"Tool selection and technical approach"
|
|
]
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Wireframe & Interaction Design",
|
|
description: "Create detailed wireframes and design the interaction patterns that will make your prototype intuitive and engaging.",
|
|
icon: <Code className="w-8 h-8" />,
|
|
details: [
|
|
"Low to mid-fidelity wireframe creation",
|
|
"Interaction flow design and micro-animations",
|
|
"Navigation structure and user pathways",
|
|
"Content strategy and placeholder integration"
|
|
]
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Interactive Prototype Development",
|
|
description: "Build high-fidelity, clickable prototypes with realistic interactions, animations, and user feedback mechanisms.",
|
|
icon: <CheckCircle className="w-8 h-8" />,
|
|
details: [
|
|
"High-fidelity interactive prototype creation",
|
|
"Realistic animations and transitions",
|
|
"Multi-device responsive prototyping",
|
|
"Integration of real content and data"
|
|
]
|
|
},
|
|
{
|
|
number: "04",
|
|
title: "Testing & Iteration",
|
|
description: "Conduct user testing sessions and iterate based on feedback to ensure the prototype meets user expectations and business goals.",
|
|
icon: <TrendingUp className="w-8 h-8" />,
|
|
details: [
|
|
"User testing and feedback collection",
|
|
"Prototype refinement and optimization",
|
|
"Stakeholder review and approval process",
|
|
"Documentation and handoff preparation"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
// Clickable Prototypes focused FAQs
|
|
faqs: [
|
|
{
|
|
question: "What types of clickable prototypes can you create?",
|
|
answer: "We create various types including low to high-fidelity interactive prototypes, mobile app prototypes, web application demos, dashboard prototypes, user flow demonstrations, and concept validation prototypes using tools like Figma, InVision, Principle, and Framer."
|
|
},
|
|
{
|
|
question: "How realistic are the interactions in your prototypes?",
|
|
answer: "Our prototypes include realistic interactions such as form submissions, navigation transitions, hover effects, loading states, modal dialogs, and micro-animations that closely simulate the final product experience for accurate user testing and stakeholder demonstration."
|
|
},
|
|
{
|
|
question: "What tools do you use for creating clickable prototypes?",
|
|
answer: "We use industry-leading tools including Figma, InVision, Adobe XD, Principle, Framer, ProtoPie, and Axure RP. Tool selection depends on project complexity, interaction requirements, and client preferences for collaboration and feedback."
|
|
},
|
|
{
|
|
question: "How long does it take to create a clickable prototype?",
|
|
answer: "Timeline varies by complexity: simple prototypes (2-5 screens) take 1-2 days, moderate complexity (10-15 screens) takes 3-5 days, and complex prototypes (20+ screens with advanced interactions) take 1-2 weeks. We provide detailed timelines during planning."
|
|
},
|
|
{
|
|
question: "Can prototypes be used for user testing and stakeholder presentations?",
|
|
answer: "Absolutely! Our prototypes are specifically designed for user testing, stakeholder demonstrations, and investor presentations. They can be shared via web links, embedded in presentations, or accessed on mobile devices for comprehensive feedback collection."
|
|
},
|
|
{
|
|
question: "How do you ensure prototypes align with final development requirements?",
|
|
answer: "We work closely with development teams to ensure prototypes use realistic constraints, follow technical feasibility guidelines, include proper annotations and specifications, and maintain consistency with design systems and development frameworks."
|
|
}
|
|
]
|
|
};
|
|
|
|
export function HireClickablePrototypesDevelopers() {
|
|
return (
|
|
<div className="dark min-h-screen bg-background">
|
|
<Navigation />
|
|
|
|
{/* Hero Section with ProjectTimelineVector */}
|
|
<HireTalentHeroBanner
|
|
vectorComponent={ProjectTimelineVector}
|
|
category={hireClickablePrototypesDevelopersData.heroBanner.category}
|
|
title={hireClickablePrototypesDevelopersData.heroBanner.title}
|
|
description={hireClickablePrototypesDevelopersData.heroBanner.description}
|
|
primaryCTA={hireClickablePrototypesDevelopersData.heroBanner.primaryCTA}
|
|
secondaryCTA={hireClickablePrototypesDevelopersData.heroBanner.secondaryCTA}
|
|
/>
|
|
|
|
{/* Success Metrics */}
|
|
{/* <section>
|
|
<AppSuccessMetrics metrics={hireClickablePrototypesDevelopersData.metrics} />
|
|
</section> */}
|
|
|
|
{/* Development Process */}
|
|
<section>
|
|
<StepsIllustrated
|
|
title={hireClickablePrototypesDevelopersData.process.title}
|
|
subtitle={hireClickablePrototypesDevelopersData.process.subtitle}
|
|
steps={hireClickablePrototypesDevelopersData.process.steps}
|
|
/>
|
|
</section>
|
|
|
|
{/* Client Testimonials */}
|
|
<section>
|
|
<CarouselTestimonials />
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section>
|
|
<FAQSection
|
|
title="Clickable Prototypes FAQs"
|
|
subtitle="Everything you need to know about hiring clickable prototype developers"
|
|
faqs={hireClickablePrototypesDevelopersData.faqs}
|
|
/>
|
|
</section>
|
|
|
|
{/* Resources */}
|
|
<section>
|
|
<ResourceCards />
|
|
</section>
|
|
|
|
{/* Call to Action */}
|
|
<section>
|
|
<SplitCallToAction />
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |