By upgrading the old Flash website, you can maintain a recognizable climate and simplify your use of the site. See how to select items worth moving to a new project.
Name elements building the nature of the page
The former Flash page may have distinguished itself by the colors, rhythm of animation, typography or way of presenting photos. Before upgrading it is worth indicating which of these elements are actually related to the brand. Not every feature of the old performance must be preserved.
Collect examples of screens and describe their task. “We like this movement” is the beginning of the conversation, but the designer needs to know whether it is about dynamics, a calm transition or focusing attention on the product. This particular direction can be translated into a modern interface.
Separate content from binding
The most important information should have a clear character independent of animation. The user should not wait for the sequence to finish to know the offer or find contact. First plan a layout that works without movement and then add effects supporting the orientation.
For example, old moved screens can become sections with bright headers. Instead of hiding the description in moving graphics, you can show the text next to the illustration and use a short decoration input. The character remains, but the information does not depend on the precise moment of animation.
Example: presentation of a product with a strong colour
Let us assume that the recognisable element of the old page is the navy background and green accent indicating the selected product. In the new project you can keep the palette and the method of marking the choice, while changing navigation to ordinary buttons and readable cards.
You do not need to copy the size of the screen or the previous order of all scenes. On the phone, the graphics can appear under the description, and the comparison of products in a simpler form. The consistency results from the visual principles and importance of interaction, not from the identical frame on each device.
How do you see if movement helps?
Watch the project while performing a specific task. Does the transition show a change of status? Does it highlight the selected option? Does it distract you from reading the text? Give up effects that do not have a clear role or hinder service.
- Keep a few brand-specific features.
- Design a full readable version without animation.
- Test the layout on a small screen and with longer content.
- Check the behaviour after re-entry and step back.
Preparation of old materials describes inventory of the website in Flash. You will read about moving more complex functions in the text interacting in a new site.
