I have blogged about using Adobe XD to prototype mobile apps. Recently, I found an attractive collection of ready to go Wireframe screens from Proforma to use alongside Apple UI Kit elements in Adobe XD
Check Out Platforma
Platforma has been in the industry for years providing developers with prototype products for Mobile, Web and HTML templates. Check out https://greatsimple.io/ for other prototyping products.
You can buy (or try) versions of Platforma at https://platforma.ws/#buy Below are screenshots from the Bundle version.
Performa has loads of ready to go samples screens that you can use in Adobe XD like..
- Start Screens
- Sign up Screens
- Walkthrough Screens
- Loading Screens
- Feed Screens
- Activity Screens
- Profiles Screens
- Posts Screens
- Chats Screens
- Contacts Screens
- Search Screens
- Lists Screens
- Settings Screens
- Create Screens
- Catalog Screens
- Discover Screens
- Products Screens
- Shopping Carts
- Check Out Screens
- Filters Screens
- Navigation Screens
- Maps Screens
- About Screens
- Popovers Screens
- Photos Screens
- Media Screens
- Social Screens
- E-commerce Screens
- Charts and More (there are over 100 screens)
Adobe XD, Platforma and iOS Prototypes
The post below will focus on creating iOS prototypes using Adobe XD and Platforma Wireframe kits.
Other posts will focus on creating Android, and Web Prototypes etc. After you purchase Platforma, you can download a zip file (I have the bundle) containing all related design files.
Tip: Save your activation code if you eceive one.
Extract the Zip file.
Files are located in each products folder (I will focus on XD in iOS assets until I learn the others).
Adobe XD iOS assets are in two files.
You can now open either Platforma .xd file to view prototype elements available.
You may get a Fonts Missing dialogue (install the fonts and the error goes away).
fyi
- I downloaded Roboto font from here
- SF UI * font can be downloaded from here
- Apple San Francisco Font from here.
All font packs are free, the Apple San Francisco font needs you to run an install wizard, SF UI needs you to download and install TTF file from GitHub, Roboto needs you to double-click on a number of TTF files to install them in your fonts library.
The fonts are now installed (verified in my fonts app on OSX).
I am now free to open the iOS “Platforma for iOS – Categories.xd” file that came from Proforma.
Performa iOS Categories (Zoomed Out)
Oh my, there are loads of sample screens and elements you can use in an app prototype (I’d count them but I’d be here all day, I had to zoom out to 2.5% to see them all).
Now time to open the second file (“Platforma for iOS – Demos.xd”)
Performa iOS Categories (Zoomed In on Maps)
I had a look at the sample “Maps” screens and they are amazing.
Performa iOS Demos (Zoomed Out)
Here is a complete zoomed out view of the “Platforma for iOS – Demos.xd” file.
Performa iOS Demos (Zoomed in on Social Samples)
Here is a sample of some of the screens in the Social category in the “Platforma for iOS – Demos.xd” file.
Let’s Start an App Prototype in Adobe XD
I open the “./Platforma for iOS/XD/Platforma for IOS/Platforma for iOS – Categories.xd” and “./Platforma for iOS/XD/Platforma for iOS – Demos.xd” xd files that you downloaded from https://platforma.ws/
Also, start a new iOS blank project in Adobe XD.
I positioned windows so I could see all Adobe XD projects.
Tip: If you are using the Apple iOS (or Android etc) UI components then you can open them too (see my Adobe XD guide to see how to get the oficial iOS controls from Apple).
Personally, I would suggest before you start prototyping that you have a “validated list” of things that you want to prototype (if you are designing a prototype for a client then ask them what they want). Check out the awesome http://joinagile.com/lean-and-mean-agile-podcast/ for tips on Collecting, grooming, prioritizing app tasks. Don’t waste time developing unwanted features. Manage tasks around Outcomes and not tasks. I have blogged about developing software and staying on track and how to get feedback for your ideas.
Also, I have a so you have an idea for an app graphic and blog posts on Atlaz.io BETA Project Management Tool For Cross-Functional Teams the Trello and Atlassian JIRA Killer? and How to develop software ideas. I would suggest you listen to the Lean and Mean Agile Podcast to get extra product backlog grooming, prioritization tips etc.
TIP: I use the MoSCoW method for capturing and prioritizing tasks.
- snip from: https://en.wikipedia.org/wiki/MoSCoW_method
- Must have
- Requirements labelled as Must have are critical to the current delivery timebox in order for it to be a success? If even one Must have requirement is not included, the project delivery should be considered a failure (note: requirements can be downgraded from Must have, by agreement with all relevant stakeholders; for example, when new requirements are deemed more important). MUST can also be considered an acronym for the Minimum Usable Subset.
- Should have
- Requirements labelled as Should have are important but not necessary for delivery in the current delivery timebox. While Should have requirements can be as important as Must have, they are often not as time-critical or there may be another way to satisfy the requirement so that it can be held back until a future delivery timebox.
- Could have
- Requirements labelled as Could have are desirable but not necessary, and could improve user experience or customer satisfaction for little development cost? These will typically be included if time and resources permit.
- Won’t have (this time)
- Requirements labelled as Won’t have been agreed by stakeholders as the least-critical, lowest-payback items, or not appropriate at that time. As a result, Won’t have requirements are not planned into the schedule for the next delivery timebox. Won’t have requirements are either dropped or reconsidered for inclusion in a later timebox. (Note: occasionally the term Would like to have is used; however, that usage is incorrect, as this last priority is clearly stating something is outside the scope of delivery).
end snip.
Starting your Prototype in Adobe XD
Based on your MoSCoW list you can (I do) create empty screens ( I usually add a label in the top left indicating the screens MoSCoW status so I can prototype needed features now and start planning future versions later from the one prototype file). I am not a big fan of using multiple app prototype files.
Now you can copy and paste in example screens over the empty screens.
Within minutes you can have a nice mockup of your app using Adobe XD and Platforma assets.
Drag as needed, change as needed.
Customizing sample screens
Of course, you can edit the sample screens and rename, add, remove or change individual items in Adobe XD (Nice work Platforma/Adobe). Ignore the Yellow “Should Have” on the screen below, it looks out of place but I get in the habit of adding a floating “Must Have”, “Should Have”, “Could Have” and Won’t Have” labels to screens.
Preview
You can preview the rough prototype in Adobe XD on your desktop or on a real mobile device.
Don’t forget to wire up screens to generally goto and return to the main screen.
Or you can wire up individual screen elements to go to different screens. You will need to be in Prototype mode in XD first.
If you saved to the Adobe Cloud you can now open the prototype app on the Adobe XD app on a mobile device (or simulate it in Adobe XD on the desktop). Open Adobe XD on your mobile device and open your project from your Adobe Creative Cloud folder.
You can now view fabulous looking application prototypes on a mobile device screen with minimal invested time and effort.
Conclusion
I am very impressed with the https://platforma.ws Wireframe Kit, I’d strongly recommend app developers buy a copy and use the pre-setup templates look impressive and will save you loads of time (no more messing with UI Kits to make app prototypes look good). I can’t wait to check out and review the other assets in the Full Platforma Bundle.
Read More
Still reading?
Read: Quick guide to using Adobe XD CC to design a prototype iOS app.
More to come.
Donate and make this blog better
Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]
Revision History
v1.0 Initial Post
etc
