Tattoo Machine
This web interactive explains the main types, parts and functioning of the modern tattoo machine. The actions and commands activate with mouse click, roll over and scroll. The animations feature the parallax scrolling effect for a more interactive approach for the user.
It is aimed to explain the user basic and interesting information about the tattoo machine with the fewest amount of text, through pictograms, illustrations and animations that can be controlled by him/her.
Graphics and illustrations
Simple lines and flat colors were chosen for the graphics and illustrations in order to make them more clear and understandable, for the user to pay attention to the most important parts of each section, and to maintain a good visual balance.
Types of tattoo machines. These illustrations picture the main three types of modern tattoo machines, in which each differentiating mechanism is highlighted in blue.
Buttons. These flat buttons show a simple pictogram of some of the main parts of the tattoo machine system.
System parts. These illustrations picture some of the main parts of the system that appear on each individual section, their details become highlighted when the user interacts with them (you can observe this in the demo video).
Final result
The next demo video illustrates the functioning of the web interactive and describes the elements included.
Main tools:
Tumult Hype: web interactive, animations, demo video editing
Adobe Illustrator: texts, graphics, illustrations
Adobe Premiere Pro: demo video editing
