Adobe XD Wireframing

For most websites, even this one, before I write a single line of code or gather images or other media, a wireframe and XD mockups are created.

UI / UX Mockups have become essential in all phases of the planning process.

Today I design my websites’ UI / UX in Abode XD. Required media for these mockups are created / edited using either Illustration (SVG & icons) or Photoshop.

The linked XD mockup is an early stage prototype I used to plan a unique carousel widget for this website. Although the design is far from complete, it provides a look into my design process.

Later, as the design concept gelled, individual custom components were mocked up with basic animation to guide the graphic design and coding. The linked demo is an early design review to discuss animation css / Js requirement and mobile design issues.