CONAN BREITMEIER DESIGN CHALLENGE
When designing any UI or UX, communication with the project manager or developer will be hugely important. We will layout what we are wanting to accomplish (like the design brief you gave me) and then together bounce of ideas that I can turn into sketches. We can work through challenges together and I can make sure that I design in a way that makes it easier on the developers to make our work live. But since this was a test more or less, I tried to do the steps that I would take with a team and apply them to my workflow.
For this project, I used photoshop and Invision. I can, of course, us any program
that the developers prefer to work in. While building my version of the backend, I tried to keep it conformed to what Hostwinds has currently, while adding some of my design "flare". I try to keep my PSD files organized, labeled and have several artboards within the file to keep all screens together. That way, if I am passing on the PSD to the developers, it is easy to navigate and find any asset needed.
I utilized Invision for a few reasons. We can easily import the PSD file I created, we can quickly create a working prototype, and all the assets, measurements and even the code is there for the developers to pick through. We can post notes to each other and I can easily update the files and assets.
Again, communication is key and I find utilizing programs like Photoshop and Invision make the process easier and quicker on us all!
A FEW NOTES
Look for the clickable hotspots.
If you click anywhere on the page
blue boxes will appear showing
you where to click.
On the bottom right of the screen, you will see a few bubbles; Comment, Inspect and Screens. I have left comments throughout the design to show my train of thought, etc.
To fully be able to view the inspect panel (where all the assets are stored as well as all the details and properties of the design) you may need to sign in to an account (free). Below I will give a little preview.
As you can see this is a great way to streamline the prototype to implementation.