How to draw an element?

Question

Design

Tell the beginner how to draw elements that drop down in the layout (example as in the photo, or the "read more" button, when clicking on the link, the text continues to open down). Separately, pages are drawn for each element, or how can this be done differently? Thanks in advance for your reply!

Answer 1

Tell the beginner how to draw elements that drop down in the layout (example as in the photo, or the "read more" button, when clicking on the link, the text continues to open down). Separately, pages are drawn for each element, or how can this be done differently? Thank you in advance for your answer!)
The essence of the question is exactly how to show two states (hidden and revealed) in the layout. The software is not specified, therefore I will write about Photoshop , for example.
The easiest way : in layers, make two folders with a normal (hidden) state and an expanded one (well, a state on hover, if required). Most of them use it.
The most convenient way: using layer comps. Those who are better versed with Flash, read the manual, watched the lessons or talked with more experienced colleagues know about it.
You can read it here https://helpx.adobe.com/ru/photoshop/using/layer-c... and see different online lessons.
When presenting to the client, it is better to show all the states and behavior of the interface. You can animate - great. For a layout designer, it would be nice to add a text description about how something should behave.
In Figma , you can do this through components and their states . There are also many tutorials on the Internet.

Answer 2

If for layout, then I think it will be enough to indicate this in the layout (with arrows and notes), having previously made two options (hidden and open spoilers), and if for presentation, then it is better to make an animation.