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.
The following two images show the animation for the slide out menu and the early hyperlinks in the mockup.
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.
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 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.
Here you can see the new version of the mockup. There are multiple components and animations linking the pages together.
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.
Once again, everything so far in an interactive prototype.
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.
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.