Skip to main content
Bacchinif
Bacchinif
Known Participant
May 30, 2023
Question

UX/UI Redesign / Which Programs (XD, AE and / or Illustrator)?

  • May 30, 2023
  • 3 replies
  • 2788 views

Hey everyone, 

I am opening this thread because I need some help to figure out what programs I should be using for a small UX/UI redesign project I am working on.

 

I am posting in the Adobe XD section because I know for sure that the desired outcome is an interactive interface that changes "scene" after the press of a button / a certain action happening - therefore I know the final "assembly" should take place in Adobe XD, but the main problem is that I have never used this app, which makes harder to me to figure out what's possible in here or not.

 

I will try to provide an example of a scene that I want to achieve (peraphs, the "most complicated" one) to get you an idea of what tools I may be needing:

 

Output Device: Android Tablet (2560x1600 px)

 

Scene 1

Animated gradient background

Animated text 

Call to action button (static)

Other static elements: logos, pictures, static text

 

Action: Button Press 

Effects: 
1. Feedback sound is played

2. Scene 1 transitions to Scene 2

 

Scene 2
Progress bar runs automatically (duration 6 seconds)

Other animated elements

Other static elements

 

Scene 3

Appears when the Scene 2 has been displayed for 6 seconds

Other elements are shown in Scene 3

 

Now, my question is: how can I achieve all of that?

I know that a combination of Illustrator and Adobe XD is usually the way to go for most of the elements, but I am a bit unsure if After Effects is also required.

Considering that I am not looking to achieve an extremely fancy and polished result, I am wondering if After Effects can be completely skipped in the process.

 

Also, how to maximize the quality of it? I would be prefer working with vectors only and not with rasterized elements (i.e. videos exported from AE).

 

Thank you very much in advance.

This topic has been closed for replies.

3 replies

Bacchinif
BacchinifAuthor
Known Participant
June 4, 2023

Hi @Spas K. , @AkinGn I won't open a new thread but I am trying to figure out if it's possible to run something with Auto-Animate (created in XD) and at the same time a Lottie file on loop for the duration I want.
As you can see from the attached video, I managed to let the bar loading (it's a draft), but the Lottie works only at the beginning and at the end although its duration is shorter than my circle animation. Is there a way to let the Lottie keep running also in between my circle animation is complete?

AkinGn
Community Expert
AkinGnCommunity Expert
Community Expert
June 4, 2023

Hi @Bacchinif, can't say I worked with lottie animations much but I'd first try to complete circular animation in two artboards and see how lottie behaves. Another way would be building lottie animation (maybe a simpler version) also in XD, that way you could control what and when changed in each artboard, after all auto animate checks all the elements in the artboard and animates all of them. Maybe you can also check with lottie community: https://lottiefiles.com/community?utm_medium=web&utm_source=navigation-community Hope this helps!

Bacchinif
BacchinifAuthor
Known Participant
June 4, 2023

Thank you for you reply @AkinGn .

What I am basically asking here is if it's possible to run two animations at a time in a single artboard. This is what confusing me now.

    Bacchinif
    BacchinifAuthor
    Known Participant
    June 1, 2023

    @Spas K. , @AkinGn sorry to bother you again... but - after having tried to implement some audio effects when tapping some buttons - I have realized that they don't play on a mobile / tablet preview.

    Any workaround?

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    June 2, 2023

    Check if something isn't blocking the sound (settings on the device, auto-mute in browser, etc). Are you viewing it through a browser on the mobile device, or in the Xd app?

    Bacchinif
    BacchinifAuthor
    Known Participant
    June 2, 2023

    XD app.

     

    How do I share and view it through the browser on my tablet?

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    May 31, 2023

    Hi @Bacchinif, to me only "playing audio on button press and transition to scene 2" looks tough in terms of doing all in XD, as we can only assign one trigger for an action, in this case, you can either play a sound or make a transition on button press/tap. Maybe you can try playing audio on tap and making transition on drag on the same button (for demonstration purposes obviously, it doesn't sound like it'd be a proper solution for a real use case). Hope it can give you an idea to explore, feel free to update us or ask if you have any follow up questions, happy designing!

    Bacchinif
    BacchinifAuthor
    Known Participant
    June 1, 2023

    Hi @AkinGn , thank you for your prompt response.

     

    So, generally speaking, do you think that everything I want to design can be achieved with the usage of Adobe XD only and not After Effects?
    What about the "import" format? Is it always better to import .AI files (I am assuming) instead of JPEGs, PNGs? Sorry for asking that, but I am unsure if Adobe XD works like all of the other Adobe's apps in which the links "auto-update".

     

    So, summing up, the questions I have are the following:

     

    - Is it always better to import .AI files into the canvas rather than rasterized images?

     

    - How do I achieve the motion of complex shapes that cannot be recreated in Adobe XD? Does it make sense to generate several .AI artboards similar to a "stop-motion sequence" and then plugging everything in Adobe XD?

     

    Sorry for the questions that may seem a bit generic, but as a total newbie I truly don't know what's possible and what not.

     

    I think it may be wiser if I post some more specific problems I have in the upcoming hours / days.

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    June 1, 2023

    Hi @Bacchinif, let me check your summarized questions (thanks for listing them 🙂 

     

    - I wouldn't say it's always better to import one format, it certainly depends, you don't want to bloat your file size/loading times for an object that's going to be used as an image, so if it has many complex vector elements and you don't need a huge size (which usually is the case for web/app designs) just a rasterized small image will work better. Or, if you have just a small icon and you think you might need other sizes of it exporting an svg might work better (for both flexibility and file size)

     

    - For complex animations that doesn't include/require interaction, I'd say (guessing you're also an AE user from what you say) using AE makes more sense. For other usages auto animating in XD sounds better since you already can'T use complex animations for interactive elements etc

     

    As I said before in another post, I think it wouldn't be unrealistic to suggest also you checking Figma since I'm one of the designers can't wait it to be included in Adobe CC (considering also XD is in "support only" mode and it's not going to be improved/developed anymore) If you never checked, here's a 5 minutes absolute beginner tutorial: https://www.youtube.com/watch?v=7TF2ZmtkZz0 

     

    Hope this helps!

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices