{"id":7231,"date":"2023-06-17T21:44:44","date_gmt":"2023-06-17T13:44:44","guid":{"rendered":"https:\/\/wings-xiii.com\/ui-ux-design\/"},"modified":"2026-01-20T17:49:33","modified_gmt":"2026-01-20T09:49:33","slug":"ui-ux-design","status":"publish","type":"page","link":"https:\/\/wings-xiii.com\/en\/ui-ux-design\/","title":{"rendered":"UI\/UX Design"},"content":{"rendered":"\n
<\/div>\n\n
\"\"<\/span>
\n
\n

UIUX APP<\/strong><\/h2>\n\n\n\n
\n
\n
\n
Android UI<\/a><\/div>\n\n\n\n
iOS UI <\/a><\/div>\n<\/div>\n\n\n\n
\n
Web\u3001Wap H5<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n
<\/div>\n\n
\n

UI\/UX Workflow: Planning, Design, Animation, and Prototyping<\/strong><\/strong><\/h2>\n\n\n\n

Design files are delivered to developers via Zeplin, Figma, or Adobe XD, with ongoing collaboration throughout development to ensure accurate implementation.<\/h2>\n<\/div><\/div>\n\n
<\/div>\n\n
\n
<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n
<\/div>\n\n
\n
\n
\"\"<\/figure>\n\n\n\n

\u2460 User Story >> <\/h3>\n\n\n\n
\n

User Needs & User Stories<\/p>\n\n\n\n

User stories and scenarios translate abstract needs into clear design directions. UX designers refine priorities through interviews, competitor analysis, traffic data, and A\/B testing to continuously optimize design strategy.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

\u2461 Functional Map >><\/strong><\/strong> <\/h3>\n\n\n\n
\n

\u283f Feature Architecture & Specifications<\/strong><\/strong><\/p>\n\n\n\n

Using mind maps, we collaborate with PMs to define, break down, categorize, and prioritize all required features. This gives designers a clear view of the product structure and feature relationships, ensuring designs fully address real needs and reducing rework later.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

\u2462 UX Flow>><\/strong><\/strong><\/h3>\n\n\n\n
\n
\n

\u283f Product Flow<\/p>\n\n\n\n

UX Flow is the umbrella term for flow design. Based on project needs, PMs create User Flows or Wireflows to map the end-to-end journey by function. This process also involves defining Logic Flows to handle edge cases and conditional logic. During handoff, UI designers provide UI Flows to specify interface interactions, navigation details, and animations.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

\u2463 WireFrame >><\/strong><\/strong> <\/h3>\n\n\n\n
\n

\u283f Wireframes \u00b7 Design Preparation \u00b7 Low-Fidelity Prototypes<\/p>\n\n\n\n

Stronger upfront planning leads to smoother execution. Even under tight timelines, teams can quickly focus on priorities and deliver practical solutions. PMs may adopt waterfall or agile approaches based on project needs, while the UI team iterates with each Scrum cycle to keep progress steady and respond quickly to change.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

\u2464 Mockup >><\/strong><\/strong> <\/h3>\n\n\n\n
\n

\u283fUI & Visual Designs \u00b7 UI Kit, Guidelines & Library<\/p>\n\n\n\n

UI design is developed from wireframes, covering interface and visual design while building the UI Kit, design guidelines, and component library. Designers work closely with UX to refine experience details, proactively propose improvements, and balance design quality with delivery efficiency under project timelines and urgency.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

\u2465 Prototype >><\/strong><\/strong> <\/h3>\n\n\n\n
\n

\u283f High-Fidelity Prototypes \u00b7 Interaction Docs<\/p>\n\n\n\n

\u201cIf a picture is worth a thousand words, a prototype says even more.\u201d Interactions and animations are often interpreted differently, and text alone can cause misalignment. High-fidelity prototypes demonstrate behavior directly, giving developers clear values, interaction logic, and implementation cues\u2014significantly reducing communication costs.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

\u2466 Design Review >><\/strong> <\/h3>\n\n\n\n
\n

\u283f Design Fidelity Review & Report<\/p>\n\n\n\n

The final safeguard is a full design review of the development output to ensure faithful implementation. Layout, spacing, colors, components, typography, interactions, motion, and feedback are checked and documented with design references, screenshots, and exact values to support precise adjustments.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

\u2467 Ongoing Reviews >><\/strong> <\/h3>\n\n\n\n
\n

\u283f Good Is Never Enough<\/p>\n\n\n\n

There is no perfect product\u2014only evolving design. Through continuous reviews and feedback, we turn every issue into an opportunity for improvement, steadily enhancing quality and moving the overall experience forward.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

\u2468 Feature Iteration & Refinement >><\/strong><\/h3>\n\n\n\n
\n

\u283f Optimizing functionality to deliver better experiences<\/p>\n\n\n\n

Feature optimizations are evaluated against real resources and team capacity. We consider development workload and feasibility to ensure proposals are actionable\u2014not just ideal. Clear communication and coordination help each improvement deliver maximum impact within real-world constraints.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n

<\/div>\n\n
\n\n
<\/div>\n\n

Six Types of UI\/UX Motion<\/strong><\/h2>\n\n
<\/div>\n\n

These motion techniques are detailed in our \u201cPrototyping\u201d and \u201cMotion Design\u201d articles, with guidance on real-world use and solution selection.<\/p>\n\n

\n\n

Purposeful motion brings products to life, clarifying system states, smoothing transitions, and improving usability and user experience.<\/p>\n\n

\n
\n
\n

01<\/strong><\/h3>\n\n\n\n

Lottie Animations<\/h4>\n\n\n\n

Lottie is a JavaScript-based JSON vector animation format and one of the most effective solutions for UI motion today. It is lightweight and fast-loading, reducing performance overhead, while allowing developers to directly control animation parameters for easy integration and maintenance. As a vector format, it remains sharp at any scale and works across platforms and devices. Currently, After Effects fully supports Lottie, with Animate gradually adding support.<\/p>\n<\/div>\n\n\n\n

\n

02<\/strong><\/h3>\n\n\n\n

SVGA Animations<\/h4>\n\n\n\n

SVGA is a high-performance animation format supporting iOS, Android, Flutter, and Web platforms\u2014ideal for cross-platform projects requiring smooth motion. Created with Animate (formerly Flash), SVGA is more performance-efficient than AE in many cases. It delivers stable playback across devices while balancing performance and visual quality, making it well suited for mobile and web animations.<\/p>\n<\/div>\n\n\n\n

\n

03<\/strong><\/h3>\n\n\n\n

High-Fidelity Interactive Prototypes<\/h4>\n\n\n\n

\u201cSo real, it feels already built.\u201d<\/p>\n\n\n\n

High-fidelity interactive prototypes help clients clearly understand product interactions early and provide concrete feedback. Once validated, designs are handed off to development\u2014reducing misalignment, rework, and ensuring the final product meets real needs.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

04<\/strong><\/h3>\n\n\n\n

Motion Video<\/h4>\n\n\n\n

Motion video captures attention quickly, communicates brand messages clearly, and strengthens recall. Beyond marketing, it also supports UI\/UX explanation\u2014helping users intuitively understand interface interactions and logic. Its flexibility and visual impact make motion video an essential element of modern digital products.<\/p>\n<\/div>\n\n\n\n

\n

05<\/strong><\/h3>\n\n\n\n

Animated GIFs<\/h4>\n\n\n\n

Photoshop is suitable for quick, basic animations. For more complex motion, Animate is recommended. When complexity increases further, video formats are preferred to avoid large GIF files that impact performance and loading speed.<\/p>\n<\/div>\n\n\n\n

\n

06<\/strong><\/h3>\n\n\n\n

HTML5 Canvas<\/strong><\/h4>\n\n\n\n

After Flash was phased out, many overlooked Animate\u2019s evolution into a key tool for HTML5 Canvas animation. Animate supports HTML5 workflows and is moving toward Lottie export. While technical challenges remain, it has become a mature option for web animation\u2014balancing performance and interactive quality.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

UI\/UX Workflow: Planning, Design, Animation, and Prototyping Design files are delivered to developers via Zeplin, Figma, or Adobe XD, with ongoing collaboration throughout development to ensure accurate implementation. \u2460 User Story >> User Needs & User Stories User stories and scenarios translate abstract needs into clear design directions. UX designers refine priorities through interviews, competitor analysis, traffic data, and A\/B …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"avo-builder.php","meta":{"footnotes":""},"class_list":["post-7231","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/pages\/7231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/comments?post=7231"}],"version-history":[{"count":0,"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/pages\/7231\/revisions"}],"wp:attachment":[{"href":"https:\/\/wings-xiii.com\/en\/wp-json\/wp\/v2\/media?parent=7231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}