UI

Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 3 of 4

June 5, 2018 by Simon

How can you measure VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 3 of 4

Read Part 1, Part 2, Part 3 or Part 4

I used these commands to generate bonnie++ reports from the data in part 2

echo "<h1>Bonnie Results</h1>" > /www-data/bonnie.html
echo "<h2>Vultr (Sydney)</h2>" >> /www-data/bonnie.html
echo "1.97,1.97,servername,1,1528177870,4G,,656,99,308954,68,113706,33,1200,92,188671,30,10237,251,16,,,,,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,26067us,119ms,179ms,29139us,26069us,16118us,1463us,703us,880us,263us,119us,593us" | bon_csv2html >> /www-data/bonnie.html
echo "<h2>Digital Ocean (London)</h2>" >> /www-data/bonnie.html
echo "1.97,1.97,servername,1,1528186398,4G,,699,99,778636,74,610414,60,1556,99,1405337,59,+++++,+++,16,,,,,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,17678us,10099us,17014us,7027us,3067us,2366us,1243us,376us,611us,108us,59us,181us" | bon_csv2html >> /www-data/bonnie.html
echo "<h2>UpCloud (Singapore)</h2>" >> /www-data/bonnie.html
echo "1.97,1.97,servername,1,1528226703,4G,,1014,99,407179,24,366622,32,2137,99,451886,17,+++++,+++,16,,,,,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,11297us,54232us,16443us,4949us,44883us,1595us,264us,340us,561us,138us,66us,327us" | bon_csv2html >> /www-data/bonnie.html

Image of results here

Network Performace

IMHO Network Latency is the biggest impact on server performance, Read my old post on scalability on a budget here. I am in Australia an having a server in Singapore was too far away and latency was terrible.

Here is a non-scientific example of pinging a Vultr, Digital Ocean and UpCloud server in three different locations (and Google).

Test Ping Results

Vultr 132ms Ping Average (Sydney)
Digital Ocean 322ms Ping Average (London)
UpCloud 180ms Ping Average (Singapore)

Latency matters, run a https://www.webpagetest.org/ scan over your site to see why.

Adding https added almost 0.7 seconds to https communications in the past on Digital Ocean (a few thousand kilometres away). The longer the latency the longer HTTPS handshakes take.

Deploying a server to Singapore (in my experience) is bad if your visitors are in Australia. But deploying to other regions may be lower in cost though. It’s a trade-off.

Deploy servers as close as you can to your customers is the best tip for performance.

Also, consider setting up Image Optimization and Image CDN plugins (guide here) in WordPress and using Cloudflare (guide here)

Benchmarking with SysBench

Install CPU Benchmark

sudo apt-get install sysbench

CPU Benchmark (Vultr/Sydney)

Result

sysbench 0.4.12:  multi-threaded system evaluation benchmark

Running the test with following options:
Number of threads: 1

Doing CPU performance benchmark

Threads started!
Done.

Maximum prime number checked in CPU test: 20000


Test execution summary:
    total time:                          39.1700s
    total number of events:              10000
    total time taken by event execution: 39.1586
    per-request statistics:
         min:                                  2.90ms
         avg:                                  3.92ms
         max:                                 20.44ms
         approx.  95 percentile:               7.43ms

Threads fairness:
    events (avg/stddev):           10000.0000/0.00
    execution time (avg/stddev):   39.1586/0.00

39.15 seconds

CPU Benchmark (Digital Ocean/London)

sysbench --test=cpu --cpu-max-prime=20000 run

Result

sysbench 0.4.12:  multi-threaded system evaluation benchmark

Running the test with following options:
Number of threads: 1

Doing CPU performance benchmark

Threads started!
Done.

Maximum prime number checked in CPU test: 20000


Test execution summary:
    total time:                          33.4382s
    total number of events:              10000
    total time taken by event execution: 33.4352
    per-request statistics:
         min:                                  3.24ms
         avg:                                  3.34ms
         max:                                  6.45ms
         approx.  95 percentile:               3.45ms

Threads fairness:
    events (avg/stddev):           10000.0000/0.00
    execution time (avg/stddev):   33.4352/0.00

33.43 sec

CPU Benchmark (UpCloud/Singapore)

sysbench --test=cpu --cpu-max-prime=20000 run

Result

sysbench 0.4.12:  multi-threaded system evaluation benchmark

Running the test with following options:
Number of threads: 1



Doing CPU performance benchmark

Threads started!
Done.

Maximum prime number checked in CPU test: 20000


Test execution summary:
    total time:                          23.7809s
    total number of events:              10000
    total time taken by event execution: 23.7780
    per-request statistics:
         min:                                  2.35ms
         avg:                                  2.38ms
         max:                                  6.92ms
         approx.  95 percentile:               2.46ms

Threads fairness:
    events (avg/stddev):           10000.0000/0.00
    execution time (avg/stddev):   23.7780/0.00

23.77 sec

Surprisingly, 1st place in prime generation goes to UpCloud, then Digital Ocean then Vultr. UpCloud has some good processors.

Processors:

UpCLoud (Singapore): Intel(R) Xeon(R) CPU E5-2687W v4 @ 3.00GHz
Digital Ocean (London): Intel(R) Xeon(R) CPU E5-2630L v2 @ 2.40GHz
Vultr (Sydney): Virtual CPU a7769a6388d5 (Masked/Hidden CPU @ 2.40GHz)

(Lower is better)

(oops, typo in the chart should say Vultr)

Benchmark the file IO

Confirm free space

df -h /

Install Sysbench

sudo apt-get install sysbench

I had 10GB free on all servers (Vultr, Digitial Ocean and UpCloud) so I created a 10GB test file.

sysbench --test=fileio --file-total-size=10G prepare
sysbench 0.4.12:  multi-threaded system evaluation benchmark

128 files, 81920Kb each, 10240Mb total
Creating files for the test...

Now I can run the benchmark and use the pre-created text file.

sysbench --test=fileio --file-total-size=10G --file-test-mode=rndrw --init-rng=on --max-time=300 --max-requests=0 run

SysBench description from the Ubuntu manpage.

“SysBench is a modular, cross-platform and multi-threaded benchmark tool for evaluating OS parameters that are important for a system running a database under intensive load. The idea of this benchmark suite is to quickly get an impression about system performance without setting up complex database benchmarks or even without installing a database at all.”

SysBench Results (Vultr/Sydney)

sysbench 0.4.12:  multi-threaded system evaluation benchmark

Running the test with following options:
Number of threads: 1
Initializing random number generator from timer.


Extra file open flags: 0
128 files, 80Mb each
10Gb total file size
Block size 16Kb
Number of random requests for random IO: 0
Read/Write ratio for combined random IO test: 1.50
Periodic FSYNC enabled, calling fsync() each 100 requests.
Calling fsync() at the end of test, Enabled.
Using synchronous I/O mode
Doing random r/w test
Threads started!
Time limit exceeded, exiting...
Done.

Operations performed:  385920 Read, 257280 Write, 823266 Other = 1466466 Total
Read 5.8887Gb  Written 3.9258Gb  Total transferred 9.8145Gb  (33.5Mb/sec)
 2143.98 Requests/sec executed

Test execution summary:
    total time:                          300.0026s
    total number of events:              643200
    total time taken by event execution: 182.4249
    per-request statistics:
         min:                                  0.01ms
         avg:                                  0.28ms
         max:                                 18.12ms
         approx.  95 percentile:               0.55ms

Threads fairness:
    events (avg/stddev):           643200.0000/0.00
    execution time (avg/stddev):   182.4249/0.00

SysBench Results (Digital Ocean/London)

sysbench 0.4.12:  multi-threaded system evaluation benchmark

Running the test with following options:
Number of threads: 1
Initializing random number generator from timer.


Extra file open flags: 0
128 files, 80Mb each
10Gb total file size
Block size 16Kb
Number of random requests for random IO: 0
Read/Write ratio for combined random IO test: 1.50
Periodic FSYNC enabled, calling fsync() each 100 requests.
Calling fsync() at the end of test, Enabled.
Using synchronous I/O mode
Doing random r/w test
Threads started!
Time limit exceeded, exiting...
Done.

Operations performed:  944280 Read, 629520 Write, 2014432 Other = 3588232 Total
Read 14.409Gb  Written 9.6057Gb  Total transferred 24.014Gb  (81.968Mb/sec)
 5245.96 Requests/sec executed

Test execution summary:
    total time:                          300.0024s
    total number of events:              1573800
    total time taken by event execution: 160.5558
    per-request statistics:
         min:                                  0.00ms
         avg:                                  0.10ms
         max:                                 18.62ms
         approx.  95 percentile:               0.34ms

Threads fairness:
    events (avg/stddev):           1573800.0000/0.00
    execution time (avg/stddev):   160.5558/0.00

SysBench Results (UpCloud/Singapore)

sysbench 0.4.12:  multi-threaded system evaluation benchmark

Running the test with following options:
Number of threads: 1
Initializing random number generator from timer.


Extra file open flags: 0
128 files, 80Mb each
10Gb total file size
Block size 16Kb
Number of random requests for random IO: 0
Read/Write ratio for combined random IO test: 1.50
Periodic FSYNC enabled, calling fsync() each 100 requests.
Calling fsync() at the end of test, Enabled.
Using synchronous I/O mode
Doing random r/w test
Threads started!
Time limit exceeded, exiting...
Done.

Operations performed:  994320 Read, 662880 Write, 2121090 Other = 3778290 Total
Read 15.172Gb  Written 10.115Gb  Total transferred 25.287Gb  (86.312Mb/sec)
 5523.97 Requests/sec executed

Test execution summary:
    total time:                          300.0016s
    total number of events:              1657200
    total time taken by event execution: 107.4434
    per-request statistics:
         min:                                  0.00ms
         avg:                                  0.06ms
         max:                                 15.43ms
         approx.  95 percentile:               0.13ms

Threads fairness:
    events (avg/stddev):           1657200.0000/0.00
    execution time (avg/stddev):   107.4434/0.00

Comparison

sysbench fileio results (text)

Read

Vultr (Sydney): 385,920
Digital Ocean (London): 944,280
UpCloud (Singapore): 944,320

Write

Vultr (Sydney): 823,266
Digital Ocean (London): 629,520
UpCloud (Singapore): 662,880

Other

Vultr (Sydney): 1,466,466
Digital Ocean (London): 3,588,232
UpCloud (Singapore): 2,121,090

Total Read Gb

Vultr (Sydney): 5.8887 Gb
Digital Ocean (London): 14.409 Gb
UpCloud (Singapore): 15.172 Gb

Total Written Gb

Vultr (Sydney): 3.9258 Gb
Digital Ocean (London): 9.6057 Gb
UpCloud (Singapore): 10.115 Gb

Total Transferred Gb

Vultr (Sydney): 9.8145 Gb
Digital Ocean (London): 24.014 Gb
UpCloud (Singapore): 25.287 Gb

Now I can remove test file io benchmark file

sysbench --test=fileio --file-total-size=2=10G cleanup
sysbench 0.4.12:  multi-threaded system evaluation benchmark

Removing test files...

Confirm the test file has been deleted

df -h /
Filesystem      Size  Used Avail Use% Mounted on
/dev/vda1        40G   16G   23G  41% /

Bonus: Benchmark MySQL (on my main server (Vultr) not on Digital Ocean and UpCLoud)

I tried to run a command

sysbench --test=oltp --oltp-table-size=1000000 --db-driver=mysql --mysql-db=test --mysql-user=root --mysql-password=#################################### prepare
sysbench 0.4.12:  multi-threaded system evaluation benchmark

FATAL: unable to connect to MySQL server, aborting...
FATAL: error 1049: Unknown database 'test'
FATAL: failed to connect to database server!

To fix the error I created a test table with Adminer (guide here).

< Previous – Next >

Read Part 1, Part 2, Part 3 or Part 4

Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 2 of 4

June 5, 2018 by Simon

How can you measure VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 2 of 4

Read Part 1, Part 2, Part 3 or Part 4

Measure Disk Performance with Bonnie++

Installing Bonnie++ on Ubuntu

apt-get install bonnie++

Read this. post on using Bonnie++

Benchmark disk IO with DD and Bonnie++

Starting Bonnie++

bonnie++ -d /tmp -r 2048 -u username

Bonnie++ Readme.

Disk io with bonnie++ on Vultr/Sydney

Writing a byte at a time...done
Writing intelligently...done
Rewriting...done
Reading a byte at a time...done
Reading intelligently...done
start 'em...done...done...done...done...done...
Create files in sequential order...done.
Stat files in sequential order...done.
Delete files in sequential order...done.
Create files in random order...done.
Stat files in random order...done.
Delete files in random order...done.
Version 1.97 ------Sequential Output------ --Sequential Input- --Random-
Concurrency 1 -Per Chr- --Block-- -Rewrite- -Per Chr- --Block-- --Seeks--
Machine Size K/sec %CP K/sec %CP K/sec %CP K/sec %CP K/sec %CP /sec %CP
servername 4G 656 99 308954 68 113706 33 1200 92 188671 30 10237 251
Latency 26067us 119ms 179ms 29139us 26069us 16118us
Version 1.97 ------Sequential Create------ --------Random Create--------
servername -Create-- --Read--- -Delete-- -Create-- --Read--- -Delete--
files /sec %CP /sec %CP /sec %CP /sec %CP /sec %CP /sec %CP
16 +++++ +++ +++++ +++ +++++ +++ +++++ +++ +++++ +++ +++++ +++
Latency 1463us 703us 880us 263us 119us 593us
1.97,1.97,servername,1,1528177870,4G,,656,99,308954,68,113706,33,1200,92,188671,30,10237,251,16,,,,,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,26067us,119ms,179ms,29139us,26069us,16118us,1463us,703us,880us,263us,119us,593us

Disk io with bonnie++ on Digital Ocean/London

Writing a byte at a time...done
Writing intelligently...done
Rewriting...done
Reading a byte at a time...done
Reading intelligently...done
start 'em...done...done...done...done...done...
Create files in sequential order...done.
Stat files in sequential order...done.
Delete files in sequential order...done.
Create files in random order...done.
Stat files in random order...done.
Delete files in random order...done.
Version 1.97 ------Sequential Output------ --Sequential Input- --Random-
Concurrency 1 -Per Chr- --Block-- -Rewrite- -Per Chr- --Block-- --Seeks--
Machine Size K/sec %CP K/sec %CP K/sec %CP K/sec %CP K/sec %CP /sec %CP
servername 4G 699 99 778636 74 610414 60 1556 99 1405337 59 +++++ +++
Latency 17678us 10099us 17014us 7027us 3067us 2366us
Version 1.97 ------Sequential Create------ --------Random Create--------
servername -Create-- --Read--- -Delete-- -Create-- --Read--- -Delete--
files /sec %CP /sec %CP /sec %CP /sec %CP /sec %CP /sec %CP
16 +++++ +++ +++++ +++ +++++ +++ +++++ +++ +++++ +++ +++++ +++
Latency 1243us 376us 611us 108us 59us 181us
1.97,1.97,servername,1,1528186398,4G,,699,99,778636,74,610414,60,1556,99,1405337,59,+++++,+++,16,,,,,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,17678us,10099us,17014us,7027us,3067us,2366us,1243us,376us,611us,108us,59us,181us

Disk io with bonnie++ on UpCloud/Singapore

Writing a byte at a time...done
Writing intelligently...done
Rewriting...done
Reading a byte at a time...done
Reading intelligently...done
start 'em...done...done...done...done...done...
Create files in sequential order...done.
Stat files in sequential order...done.
Delete files in sequential order...done.
Create files in random order...done.
Stat files in random order...done.
Delete files in random order...done.
Version 1.97 ------Sequential Output------ --Sequential Input- --Random-
Concurrency 1 -Per Chr- --Block-- -Rewrite- -Per Chr- --Block-- --Seeks--
Machine Size K/sec %CP K/sec %CP K/sec %CP K/sec %CP K/sec %CP /sec %CP
servername 4G 1014 99 407179 24 366622 32 2137 99 451886 17 +++++ +++
Latency 11297us 54232us 16443us 4949us 44883us 1595us
Version 1.97 ------Sequential Create------ --------Random Create--------
servername -Create-- --Read--- -Delete-- -Create-- --Read--- -Delete--
files /sec %CP /sec %CP /sec %CP /sec %CP /sec %CP /sec %CP
16 +++++ +++ +++++ +++ +++++ +++ +++++ +++ +++++ +++ +++++ +++
Latency 264us 340us 561us 138us 66us 327us
1.97,1.97,servername,1,1528226703,4G,,1014,99,407179,24,366622,32,2137,99,451886,17,+++++,+++,16,,,,,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,+++++,+++,11297us,54232us,16443us,4949us,44883us,1595us,264us,340us,561us,138us,66us,327us

Now read this site on how to make sense of this data

< Previous – Next >

Read Part 1, Part 2, Part 3 or Part 4

Using Platforma Web Wireframe Kit to build a website (prototype)

November 24, 2017 by Simon

I have blogged before about building a server for users to install WordPress, optimizing images in WordPress, deploying WordPress via CLI, moving WordPress, speeding up WordPress and securing WordPress but what do you do if you want a non-WordPress site without the support hassles?

Recently I gave the https://platforma.ws iOS prototyping library extensions a test. I was delighted to find they had a Web Wireframe Kit (generation suite) for prototyping and exporting working websites. You can try the free version or buy a licence here.

Creating a Website with Platforma Web Wireframe Kit

Goto https://platforma.ws and click HTML Generator (or click here)

You will be presented with an empty website ready for your attention.

Adding Website Elements

It’s as simple as clicking a purple add button.

This reveals a number of HTML templates samples that you can drag and drop to your website design.

You can then choose a category (e.g “Header”) and see the elements of the available sample.

Simply drag and drop the elements out into your design.

Now, Let’s click the purple Add (in the top left) button and add a sample Header section, sample Contents, sample Slider, sample Body, sample first Call to Action section, sample Pricing Table, sample second Call to Action section, sample Footer section.

30 seconds later and I have generated designed a site ready to edit the exported HTML.

Exporting Your Site from Platforma

Click on the Export button (in the top right).

I was greeted with the following export screen, this page explains the difference in export options: http://app.platforma.ws/docs/

I don’t need “node.js” or “gulp” “Advanced Version” (PUG + STYLUS) so I’ll choose “Simple Version” (HTML + CSS + JS).

You will need to enter a licence key to continue the export.

The website export download came down just fine.

Code

The code looks ok, I did notice that images were missing alt tags so I added those in.

Any Errors in the Code (in Chrome)?

Nope, Chrome loads the code with no errors.

Testing Online

How about HTML5 and WCAG 2.0 AA

I uploaded the zip file to my server (using the scp command), I could have used SFTP.

scp /local/folder/local-file.zip [email protected]:/www/destination-folder/

I unzipped the site with

sudo apt-get install unzip
unzip filename.zip

The site loads just fine in a web browser

Accessibility

I used https://achecker.ca/checker/index.php to test the site with WCAG 2.0 AA, the only remaining issues I found were in relation to the multiple H1, H2 etc tags (this can be fixed by moving the H CSS code to custom classes and removing H1, H2 etc tags altogether (and reference the custom class matching the H* tags)).

fyi: The potential WCAG problems that were being alerted were in relation to…

My alt tags were potentially short
Potential Colour warnings
Potential Contrast warnings
Missing a “Skip to content” block
Reporting of placeholder graphics and alt tags (a checker is smart)
etc

I tested the sites HTML compliance with https://validator.w3.org/, the code passed with flying colours.

Customizing

I could not find a way to edit the elements in the http://app.platforma.ws/# like the Platforma iOS Adobe XD Kit but you can quickly edit in your HTML after exporting (using your editor of choice like Dreamweaver, Sublime or Notepad).

Conclusion

Platforma Web Wireframe Kit is an essential tool for anyone wanting to build quick web prototype (or even live sites) website for themselves, clients etc. I am very impressed with the code created.

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.1 Added more, fixed a bit.

etc

Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app

November 23, 2017 by Simon

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

Quick guide to using Adobe XD CC to design a prototype iOS app.

October 25, 2017 by Simon

Adobe has introduced (v1.0.x) Adobe XD CC, Adobe claims you can turn your best ideas into beautiful experiences — fast. Let’s give it a try.

Adobe Experience Design (Beta) is now Adobe XD CC. You can now design, prototype, and share amazing user experiences for websites, mobile apps, and more — all in the same app. Adobe XD CC is similar to Balsamic Mockup software.

Adobe XD Intro

Here is a great video demoing Adobe XD.

Install Adobe XD

If you don’t already have Adobe CC installed you can download a trial here. If you are wanting to install on Windows you will need Windows 10 (Anniversary Edition). Adobe has minimum system requirements listed here.

Start a Project

After you start an iOS project you will be looking for controls to add to your prototype. Adobe XD CC offers where you can download UI Kits direct from vendors (a shame when you are used to XCode or Visual Studio having controls preloaded).

Installing the Apple UI Design Resources

You will need to download the Apple UI Design Resources for Design XD from the Apple site (use the menu in the screenshot below or click here), they do not come with Adobe XD CC.

Here is more information on using Adobe XD CC UI Kits.

Download the iOS 11 UI resources for Adobe XD CC from the Apple site.

You can now extract the iOS resource files from Apple for use in Adobe XD projects. When iOS 12 and Android 9 comes out you can download new UI Kits.

Once you extract the files from the zip file, run the ./iOS-11-AdobeXD/Fonts/San Francisco Pro.pkg file to install iOS 11 font on yoir system.

I could not find a way to install the UI Kits permanently into Adobe XD CC (Searching revealed you need to open templates (as a separate process or open file in Adobe XD (double-click on the file)) and paste elements into your project). This seems clunky.

Why use Adobe XD

You can use Adobe XD to prototype interfaces around the common activities, a person may perform while using the apps you are prototyping. You can design an app’s onboarding, intro or user screens before actually developing the app.

http://bundle.greatsimple.io/

https://platforma.ws/ also has an extension for Adobe XD to allow you to get a prototype fast with ready to go layout elements. I will write a new blog post using https://platforma.ws/ in Adobe XD.

iOS Prototype Project

Let’s create an iOS project. Start a new iPhone 6/7 Project AND open up a UI template file in a second Adobe XD program (e.g ./iOS-11-AdobeXD/UI Elements + Design Templates + Guides/UIElements+DesignTemplates+Guides.xd).

Now you can drag and drop elements from the UI template (from Apple) into an XD CC app prototype project

TIP: Apple has a great site explaining how you can design and deliver apps (open the Apple Human Interfaces – iOS Design Themes page here). Apple also has assets and guidelines available for marketing your apps here.

To make buttons interactive you will need to click the Prototype tab and then drag the blue tabs to the right of interactive elements to the target screens.

You can learn more on making interactive prototypes here.

Tip: Don’t forget to add interactive links back to the home screen.

You can then press the play button to preview the app prototype simulated in software.

Export

You can now save and export your prototype app project to PNG, PDF, Web or other formats to others to send for review.

Adobe XD is big on saving to the Adobe Cloud allowing others to see changes in real-time. If you have linked assets in your prototype project (say Photoshop files) anyone viewing an XD prototype on the Adobe Cloud can automatically see changes in real-time (see then Adobe XD intro video above).

Running Prototypes on Real Devices

I was able to install Adobe XD app onto iOS, log in with my Adobe ID and the prototype popped up when I connected my iOS device to my Mac. More info here.

I was able to install the Android Adobe XD app and also sync a prototype app (Android was a bit slower to find the project but still the same process as iOS).

More Help

Adobe XD CC Official User Guide

https://helpx.adobe.com/xd/user-guide.html

30 Adobe XD CC/Adobe Comp tablet app tips

Conclusion

Pros

Adobe XD comes with Adobe CC.
Ope to feature enhancements.
Loads or 3rd party tools and user forums.
Automatic detection of duplicate actions (copy and paste grid items) and suggestion of repeating grids by pressing Command+R.

Cons

Unable to import UI Kits permanently into Adobe XD (I have to run multiple XD apps and paste UI elements between). Why would I no just stick with Adobe Photoshop?
Placement of UI elements like fonts feels clunky when compared to XCode and Visual Studio.
Duplicating prototype forms was not an option in the right-click (copy and Paste worked and so did ALT+Drag).

On the positive side, Adobe is openly allowing people to suggest and vote on features here https://adobexd.uservoice.com

But with Adobe XD you have the flexibility of having a design and prototyping product in one package with new monthly features.

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.2 added https://platforma.ws/ information.

etc

Short: https://fearby.com/go2/prototype/

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

UI

Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 3 of 4

Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 2 of 4

Using Platforma Web Wireframe Kit to build a website (prototype)

Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app

Quick guide to using Adobe XD CC to design a prototype iOS app.

Popular

Security

Code

Tech

Wordpress

General