We have discovered that sketching can be an excellent method toward establishing content layout in a fast, efficient, and iterative manner. Sketching can be achieved through pen and paper and is primarily a good starting point when iterating concepts. After sketching, digital tools are used to create higher-fidelity wireframes.

Digital design tools such as Figma, Adobe XD, Sketch, and Balsamiq are commonly used to create wireframes. Digital tools also allow us to transition from wireframe to prototype because initial work and design ideation has been established on a digital platform.

Design tools are constantly evolving and adding new features that streamline the process for developers, such as generating CSS code associated with specific design elements.

When creating wireframes, we suggest using whatever approach works best for you. We encourage designers to sketch concepts before creating refined wireframes. This approach is preferred by many designers, however, it is not mandatory.