Darren Halstead UI / UX / HTML / CSS / Accessibility

Design Process Example

This is an example of the process I use when designing something from scratch. For this example I used Adobe XD. I will walk through the design process from wireframe to final mockup, all in XD using design components.

For this example I designed a basic chat app, similar to Slack or Discord. I worked through a few basic features to walk through my design process.

Early Version

The first wireframe goes over some basic features using components and component states as well as one small animation. Below you can see the first screens of the wireframe. The main area of the design is a single component with three states. In this case, the states allow me to show the main screen with no messages, one message or many messages. Additional states could be added, as well as scrolling if needed.

an example of two screens in XD showing a component

The following two images show the animation for the slide out menu and the early hyperlinks in the mockup.

animation basics the link structure

Before moving on to other features, the wireframe can be seen as a demo below. This shows some basic linking, states and animations in low fidelity.

The first demo version of Chatty, made with Adobe XD.

Adding Features

The first new feature I added was a way to access a user’s profile and set their online status. The images here show the essential pages and some of the animations, as well as all the links currently in the document.

the new screens of the mockup. all of the links in the document

The status indicator component was built with states. This will make it easier in the future to ensure the status indicator is always the same everywhere in the application.

the status component has states to allow easy consistency

Here you can see the new version of the mockup. There are multiple components and animations linking the pages together.

The second demo version of Chatty, made with Adobe XD.

Another New Feature

I added a simple new chat component, once again using states to manage all the variations in one place. Later this will allow me to control it from one place.

The new chat component

Once again, everything so far in an interactive prototype.

Added the new chat function.

Adding Some Color

Using the existing components I quickly reskinned the design into a more finalized design. The images below show all the links and a closer view of the design.

the profile page with some color all the links in the final prototype.

With the components in place, the mockup can be easily reskinned or redesigned. New features can be quickly created, and the components can be shared without the design file to the entire design team to be used by all and controlled from a single source of truth.

Below you can use the final version. I had to remove some of the embedded images because there was lag in the screen loads. I suspect a bug in XD, because not all images were affected.

The final version.

Adobe XD Enthusiast

Enjoying a quick design session with some new features.


Timeframe: One day

Challenge:I wanted to design something to show some of Adobe XD's new features.