Adding More Assets to Animated Menu from Design Accelerator

Best Practices + Tips & tricks
1

I tried searching for information relating to this question in the Help Center and Ask the Community already, if it is covered elsewhere, please send link.

Often when I am resizing or adding assets to a design accelerator, I find that everything gets messed up when I make a small layout change. In general, what are some strategies to follow when making changes to the composition of a design accelerator? I find grouping doesn’t really work in most cases. Am I missing something?

Here are the specifics of this instance. I am using the design accelerator “Sub-Category Menu - Left”. I am going from 3 subcategories under each category to 18. The asset type of the categories and subcategories is a toggle button. Being that this is an animated menu, not only do the boundaries and groups have to be resized and relocated, but also each of the actions that move them. I will brute force it if that is the only way. If anyone has tips or tricks to keep in mind before that, it is very much appreciated. Would love to keep the clean menu column but I might just switch to a large grid of hidden subcategory toggle buttons that become visible after pressing the larger category button and save myself the headache…

Hoping this answer will benefit the community as a whole. If it’s not right for this setting, let me know if I should contact support or set up a design consultation.

Cheers!

  • Alex / Pavek Museum
3

After reading the following article, I have decided to slide the sub menus out to the side rather than having the other larger category buttons slide down the menu column.

Feel free to share any general concepts for making layout changes to a design accelerator.

4

Usually, when I have to put something into a group (for trigger/action purposes for instance) I make myself sure that everything that is going to be grouped is done, designed, finished, over.

I try to never move or resize after grouping.
If I have to do a complex layout change, I usually copy paste the triggers/actions somewhere else, ungroup, do my changes, re-group, then paste back the T/As.

Also, I must admit I have some OCDs (Hi @megan :wink: ) and I hate when you resize a group and the element inside have values (X,Y,W,H) with commas, I want it to be pixel perfect :roll_eyes:

5

Hi @Alex! No shame in having OCD. :wink: I’d never thought of that technique before of copying triggers somewhere else, I’ll have to start trying that. I also hate having to resize a group/or do complex layout changes. I always take in a big breath and pray that everything is locked down before I hit that ctrl+g to group items! :pray: :cold_sweat:

To @general, I don’t know how familiar you are with Intuiface, so please don’t take offense/think I’m being patronizing, I promise I’m not! :slight_smile: One thing I try to keep in mind when making or editing actions/triggers- esp. when I’m doing just a move of a graphic- is to think “backwards.” I’ll start off by putting an element where I want it to go (say your slide out submenu- place the submenu the way it should look when it’s all the way “out”) then add a trigger (on the menu item that causes the submenu to slide out- “when released > move submenu to x,y”) then put the element where it should be at the start. Then it’s all ready to go! I hope that makes sense. When I first started, I tried starting by putting the element where it should be at the beginning, adding a trigger, then where it should be after, adding another trigger… Yikes! This way helps cut down on a trigger.

How’s the revision going?

Megan

1 Like
6

@Alex, I guess it pays to put a little forethought into the build… I usually like to dive right in and sort it out later. Appreciate your feedback.

@megan, thanks for the idea to work backwards. That makes sense because its the small that gets tedious trying to tie into the large.

2 Likes
7

Sometimes, I even start with pen&paper and/or whiteboard for a quick sketch before starting Composer (good habit from my previous life).

1 Like