Developing applications with After Effects has it's challenges. Not every native feature of AE is supported. 3rd party plugins, CPU intensive effects, and some default presets may not be available at the time of production. However, a designers ability to composite, layout, animate, and develop applications has never been better.
When building user interfaces it's a good idea to put yourself in the shoes of the user. Follow best practices, keep the application functional, fluid, and practical. Consistency is a huge part of a good UI. Motion should make sense, highlight features and establish hierarchy, without interfering, delaying or inhibiting user actions.
Good design is universal, whether it's setting type, designing a logo, or animating an interface. Everything movement should be justified in it's intent.
Typography is a vital part of design. Be mindful of visual design best-practices when setting type. Consider the following: font size, leading (the space between lines of text) and kerning (the space between letters).
It's important to establish & follow design patterns to remain consistent when setting type. Many designs will follow style guides for headers, sub-headers, and body copy.
Best practices indicate following the designs established during the visual design phase of the project, but sometimes it is necessary to deviate from these guidelines. Some cases may call for a larger font for better reading... or a smaller font to increase the amount of text that can fit in a certain area. Simply use discretion and think ahead.
Use Paragraph text instead of Point text wherever possible. Paragraph text will automatically wrap to fill the size of it's container
- 1 style can be applied to a text box at a time. Rich text formatting is only supported through layer comments.
- Not all text options are supported. Text type, size, alignment, and the all-caps toggle work fine.
- Leading can be controlled in the layer comments. e.g. leading:72; kerning:20 (project specific).
- Dynamic text should use the following naming convention: Placeholder-LabelName. Text with the precursor 'Placeholder-', by default, will be stripped and replaced with the appropriate string via code. You can randomize this text in preview mode by pressing 't'.
- Localization is supported by static text - the text can be used as a key into a translation table for multilingual support. This requires developer assistance.
- Text can be formatted / constrained using layer comments
- class:CYITextSceneNode (turn on anti-aliasing for rotated or scaled text)
- Point text will run on 1 line unless otherwise specified. e.g. text-overflow:ellipsis; width:400; height:200
- Keep it clean. Delete unused footage, layers, compositions, solids, and assets.
- Communicate. Speak with the associated designer or developer to ensure all requirements are being met. Keep notes when working on a file for hand-off.
- Precompose. For example, a list control would be its own composition, as would the list item, and the button within that list item, and so on.
- Be consistent. Areas to consider: naming conventions, file structure, 60fps frame rate, etc. File to file, project to project.
- Avoid renaming layers affected by code.
- Avoid altering paths to dynamic content.
- Use solids instead of raster images whenever possible.
- Reuse existing components whenever possible. Avoid creating unique instances and strive for flexibility.
- Consider creating a library or assets .aep for commonly used elements that can be dynamically loaded into containers throughout the application.
- PNG format is preferred to JPG.
- When saving images from Photoshop ALWAYS use 'save for web' ('save as' bloats image size with useless metadata.)
- Leverage 9 patch wherever possible. Use N-Patches when graphics needs to stretch while preserving corners and sections. Great for borders, backgrounds and modal windows.
- Test your work. Always export and build your files before committing to GitHub.
- Exports should be warning & error free. Warnings predict inefficiencies, errors predict crashes.
- Specifying layout break points is done using a folder structure in the projects window (comps and assets in the root folder are used as the default, fallback source and differences per break point are specified using folder names.)
- It is highly recommended that you make your main composition either with the smallest (4:3) or biggest (16:9) aspect ratio. This will make the responsive layouts a lot easier to manage since your screen is only going to grow/shrink in one direction.
- Avoid duplicates. Duplicate compositions in the same folder can result in irregular behaviour. Duplicate layer names within the same composition must be avoided. You can differentiate between duplicate items within a composition by assigning unique layer names.
- Keep your compositions short (under 1 minute.) This makes it easier to find markers and adjust keyframes.
- Sometimes layers intercept touch inputs, we can disable this by using the layer comment: 'Interactive:off'.
- Masks are not supported by default. However, a layer marked 'Clipping' will act as a clipping range when inside a list. This can be done outside of lists, but requires code to work.
- Animated masks are not supported.
- Compositions, by default, are NOT clipped to the viewable area. For example a 1000x1000 pixel solid within a 500x500 pixel composition will not be clipped to its container. Lists, however, are defaulted to clip to the size of the container composition.
- Some projects support clipping by adding 'clip:true' to a composition comment.
- Use composition markers to indicate multiple animation states on a single timeline.
- Frame '0' is the default starting position for all compositions unless otherwise specified.
- Do NOT set animation markers at Frame 0, as there is a difference between 'object loaded' & 'animation started'.
- Animations can play forwards and reverse.
- If an animation has a reverse, e.g. AnimateUp / AnimateDown, and they are symmetrical, consider only having one, and notifying the developer involved to play the one in reverse.
- Layer animations can be asynchronous. Each layer has its own timeline that can play independently from each other.
- Nested animations aka 'precomposed' animations must be triggered by code to play, and can play independently from other compositions.
- If you add tracks:keyframes to the marker, it will only export tracks that have active keyframes within the marker.
- Markers should have spaces between timelines, eg. 1 marker should not butt up to or overlap with another marker.
- It's possible for a timeline to jump to the last or first frame of a marker. Best practices indicate you should set an initial and end keyframe for every transformation property that is animated. This will help prevent any mismatched states.
Transferring Compositions From One .aep to Another
- Save out the .aep file with the desired composition as a temporary file.
- Select the composition you'd like to save in the Library, e.g. Btn-CrazyGood.
- With the composition highlighted, in the AE menu, select 'File > Dependencies > Reduce Project'. This will delete all unused footage, leaving you with the desired composition and all of its dependencies.
- Re-save the .aep.
- Open the destination .aep and import the temporary file. The imported .aep will appear in a folder in the library with all dependencies.
At this point, it's best to consolidate all footage. The imported composition can be housed with the other comps. Same goes for the solids. It's possible to have duplicate layers, compositions, and images. You can easily consolidate footage through: 'File > Dependencies > Consolidate All Footage'.