Website Design (UI/UX)

Pro

Alwan Rosyadi

Contact for pricing

About this service

Summary

We offer UI/UX web design using Figma, creating fully responsive, interactive prototypes and detailed design files. Our service ensures that your website delivers an intuitive user experience, with a structured handoff for easy implementation by developers.

Process

1. Initial Research & Discovery
Client Brief Document: A document capturing the project's objectives, target audience, business goals, and any specific requirements or preferences.
Competitive Analysis: A report comparing similar websites or web applications to identify opportunities for differentiation and improvement.
User Personas: Detailed profiles representing the target users to guide design decisions.
2. Wireframes
Low-Fidelity Wireframes: Basic, rough wireframes that outline the layout and structure of key pages.
Clickable Prototype (Low-Fidelity): A basic, interactive prototype created in Figma to demonstrate user flows and layout.
3. UI Design
High-Fidelity Screens: Detailed designs of all core pages, including homepage, landing pages, and any significant user flows.
Responsive Design: Designs for multiple screen sizes, such as desktop, tablet, and mobile versions, ensuring the website works across devices.
Design Components Library: A collection of reusable design elements such as buttons, forms, icons, and other UI components created in Figma.
Color Palette: A custom color palette that aligns with the client's brand and user experience needs.
Typography Guidelines: A set of fonts, sizes, and line spacings chosen for readability and consistency across the design.
4. UX Enhancements
User Flow Diagrams: Diagrams that outline the navigation paths and interactions users will take within the website.
Interaction Design: Animated micro-interactions (using Figma's prototyping features) to show how users will interact with the UI elements.
Usability Testing Report: If applicable, a summary of usability tests conducted, along with insights and recommended changes.
5. Prototype
Interactive Prototype: A clickable prototype in Figma that simulates the user experience, showing how the website will function interactively.
User Testing Prototype (if applicable): An interactive version for conducting user testing with real participants.
6. Documentation & Handoff
Design Handoff File: A Figma file shared with the client or developer containing all final designs, user flows, and UI components.
Design Specification Document: A detailed guide outlining how to implement the designs, including dimensions, margins, padding, font sizes, colors, and interaction details.
Assets Package: Exported assets like images, icons, SVGs, and any other required design elements optimized for development.
7. Final Deliverables
Figma Design File: Fully organized, final Figma design files with layers, components, and pages structured for easy navigation and future modifications.
Branding & Style Guide (Optional): A guide detailing the visual identity, including color schemes, fonts, icons, and other design guidelines.
8. Post-Launch Support (Optional)
Feedback & Revision Sessions: Any changes based on client feedback after the design handoff (typically one round of revisions).
Ongoing Design Consultation: Optional consultation for updates or adjustments during the development phase.

FAQs

  • What is included in your UI/UX design service?

    Our service includes fully interactive Figma design files, responsive web designs for desktop, tablet, and mobile, high-fidelity prototypes, reusable UI components, and detailed handoff documentation to ensure a smooth transition to development.

  • Do you provide designs for mobile and desktop versions?

    Yes, we ensure your website is fully responsive. We design for multiple screen sizes, including desktop, tablet, and mobile, so your site functions seamlessly across all devices.

  • Do you provide revisions during the design process?

    Yes, we offer a round of revisions during the design phase to ensure the final product meets your expectations. Our goal is to deliver designs that align with your vision while optimizing user experience.

  • Will you work directly with my development team?

    Absolutely! We provide clear, organized handoff documentation and are available to collaborate with your development team to ensure the designs are implemented accurately and efficiently.

  • What happens after the design is completed?

    After the design is finalized, we provide you with the Figma files, exportable assets, and detailed documentation. If needed, we offer post-launch support to address any adjustments or updates required.

What's included

  • Figma Design Files

    A complete, well-organized Figma file containing all final UI/UX designs, ready for development. This will include all screens, layouts, and user flows.

  • Responsive Design Versions

    All pages designed and adapted for different screen sizes, ensuring a seamless experience across devices.

  • UI Components Library

    A library of UI components such as buttons, inputs, icons, and other elements, fully designed and organized for consistency and easy development.

  • Design Specifications

    Detailed specifications on spacing, typography, color codes, component sizes, and other visual details to ensure developers can implement the designs exactly as intended.

  • Interactive Prototype

    A fully interactive prototype showcasing how the user interacts with the website, including transitions, animations, and micro-interactions.

  • Exportable Assets

    All necessary design assets like icons, images, logos, and SVG files, exported and optimized for development use.

  • Handoff Documentation

    A detailed guide for developers explaining the Figma file structure, and how to navigate the design for efficient implementation.

Example projects

Designing & Developing Flowaps in Framer

a link to the video instead.

Designing a Brand Presence on Framer for Unravel Studio

Recommendations

(5.0)

Nicolò Beghetto

Client • Sep 15, 2025

Recommended

Working with Alwan Rosyadi was a great experience. He supported me in understanding the fundamentals of Framer and guided me through the creation of a well-structured and polished portfolio. His clarity, attention to detail, and practical approach made the process smooth and effective. I strongly recommend him to anyone looking for professional work, help and guidance in design and digital tools.

Joon Kim

Client • Sep 13, 2025

Recommended

I started using Framer on my own without much knowledge, but working with Alwan made all the difference. He quickly understood what I needed, explained things clearly, and helped me learn fast. His deep understanding of Framer and smooth communication made the process so much easier. I would confidently recommend Alwan to anyone. Working with him was not only productive, but genuinely enjoyable.

Ryra Bernadette

Client • Nov 19, 2024

Recommended

Alwan is an exceptional designer whose dedication and expertise shine through in every project. His proven design capabilities, coupled with strong teamwork skills under tight deadlines, consistently deliver user-centric solutions that exceed expectations. His ability to transform vision into impactful designs makes him an invaluable collaborator. I look forward to future opportunities to work with him.

Vhendy Vendira • Immerise

Client • Nov 17, 2024

Recommended

Alwan is a reliable coworker in designing UI Design. His design results are of high quality and he is able to complete his work quickly. Alwan is also responsible for every task given and has a good understanding of project needs.

Skills and tools

Product Designer

UI Designer

Web Designer

Figma

Figma

Jitter

Jitter

Industries

Marketing
Professional Services
Design

More services

Custom Framer Website Design & Development

Example projects

STARTING AT

$1,299

fixed rate

Figma to Framer Design & Development

Example projects

STARTING AT

$1,000

fixed rate