Using screenshots from the live website to create mockup designs can be helpful for web designers or businesses that need to get things done quickly.
However, this method should only be applied if there are no existing UI assets or design systems, it takes less than half an hour to complete, and the tweaks are simple and have minimal impact on the overall page and the journey.
Screenshots can be used for high-level detail presentations, visual cues, a/b testing, and conversation starters with key stakeholders or colleagues.
In this video, we will use a mobile product detailed page of an online store to illustrate how screenshots can be used to create a website design.
In summary,
- Get as much context on the work that needs to be achieved for the task.
- Explain the current situation, negotiate with the stakeholders for a design that is achievable with the current state, and get approval before the work starts.
- Identify and take screenshots of the pages and information needed for the tasks.
- Crop the screenshots that make sense for you to achieve the design outcome.
- Move and combine the screenshot pieces.
