These are new designs for the app they have evolved after further research into app and smaller screen design. I felt the initial designs were not engaging and did not offer the user experience I am looking to create. I have split the designs into two areas, Login New Account Screens and Search Results Map/List View.
Thoughout the course I have been learning and using Adobe Photoshop CC and some of the other Adobe products from the Adobe Suite of design products. When learning that Adobe XD or Adobe Experience Design CC was being launched in March 2016 as a beta version I wanted to use this product and learn how I could integrate it into both my project Client Project and my Final Master Project. Adobe XD is an application for designing and prototyping user experiences from wire framing through design to prototyping allowing sharing of projects so colleagues and clients can work quickly and easily together. A beta version means it has been tested in house and Adobe are happy for it to be released as an intended final product while still allowing them to roll out updates when needed.
Adobe XD – Go from idea to prototype faster with Experience Design CC (Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps. Test-drive the beta and watch the video to see how we’re evolving XD to bring you exciting new ways to collaborate and deliver a whole new experience in user experience. Source Adobe.com
When creating a new design or prototype using Adobe XD you are firstly prompted with all the different screen sizes you can choose from and use.
After selecting a device size an artboard is then created, this artboard below has two device screens as I copied and pasted the initial iPhone 6/7 1 page. The UI User Interface icons and functions do look similar to other Adobe products which helps when learning how to use the application. In Design Mode selected along the top menu bar the menu on the left side of the screen then allows you to select various options which you can adapt and make further adjustments to on via the menu and options on the right side menu.
After working and building up the screens and designs you can then select Prototype from the top menu bar and you are able to connect the screens to build up a prototype of how the project will function as below. When buttons and other interactive elements are added to the designs you can also select these to move to other areas of the project and design.
Using Adobe XD is a good way to move from wireframes through to a working prototype all within one application or suite of products. It allows you to easily drag and import images and files easily and quickly from Adobe Photoshop and Adobe Illustrator.
It allows you to connect via XD mobile preview for iOS and Android to run the prototype on these mobile devices, it then stores the last design/prototype that you previewed on the mobile device so you can demonstrate to a client or a colleague quickly as if live and in realtime.
I used the following Adobe XD video to help me get started and learn the basics Adobe Experience Design.