{
  "trx_id": "9e58421cce04201958f39be9366c4e141bab9f28",
  "block": 106147715,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-05-18T03:49:36",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "7005.362514 VESTS"
    }
  ]
}

{
  "trx_id": "8b9e4b6505bfc91dbbd5296bc698b64e431707ec",
  "block": 105993059,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-05-12T18:19:45",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "4293.152109 VESTS"
    }
  ]
}

{
  "trx_id": "90b2c5c34eb1ce501b716e208f0f5653e0ef5d57",
  "block": 105515267,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-04-26T03:04:57",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "7017.878270 VESTS"
    }
  ]
}

{
  "trx_id": "6cb7daa5e5ad3dd740c6741ce800978e651ec45f",
  "block": 102863302,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-01-23T17:23:27",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "4334.698928 VESTS"
    }
  ]
}

{
  "trx_id": "95afb6bc120766fb197be1852d7147b7bd535249",
  "block": 91309565,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2024-12-17T12:36:03",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "4498.918125 VESTS"
    }
  ]
}

{
  "trx_id": "07cb3bb3f898d6180bf0a0a3c0341184d10a6568",
  "block": 79863739,
  "trx_in_block": 10,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2023-11-14T04:17:48",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "4668.051657 VESTS"
    }
  ]
}

{
  "trx_id": "1b877459b3a475f0dbd7d0bbb16bcbcf6dff34ab",
  "block": 78359375,
  "trx_in_block": 7,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2023-09-22T07:28:21",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "7604.960443 VESTS"
    }
  ]
}

{
  "trx_id": "deaedf3a9a2967ada1588a49516c95007fffb0b5",
  "block": 69117570,
  "trx_in_block": 3,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2022-11-03T15:18:42",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "7827.011881 VESTS"
    }
  ]
}

{
  "trx_id": "e4c39279f71c052ee9cb479d851df6c4e432a40c",
  "block": 60821108,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2022-01-17T20:45:09",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "8047.119482 VESTS"
    }
  ]
}

{
  "trx_id": "2d8d19703cfb6f3e1db307e71fe6217875b73c9a",
  "block": 54611571,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2021-06-14T04:02:27",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "8231.313770 VESTS"
    }
  ]
}

{
  "trx_id": "0fded49365d5bacfacf32e8b3a574e0d0c7dfce5",
  "block": 49358908,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-12-11T14:17:12",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "8418.735744 VESTS"
    }
  ]
}

{
  "trx_id": "18a5ce11ad6c4ec2682c17b83bf7ca098cb1c612",
  "block": 49210437,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-12-06T07:53:06",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "1912.543513 VESTS"
    }
  ]
}

{
  "trx_id": "f6c7cde611375bdb63f557a906bd40fa564b8fd9",
  "block": 49193990,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-12-05T17:54:51",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "8424.943598 VESTS"
    }
  ]
}

{
  "trx_id": "b59de6a7f13ec9b6f5dc03c0f3d7d4d00c9eb209",
  "block": 48265522,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-11-02T22:11:39",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "1920.017158 VESTS"
    }
  ]
}

{
  "trx_id": "933c2e68408458f9efd4b65bd4db90fa11d22a06",
  "block": 43220740,
  "trx_in_block": 16,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-09T08:54:06",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "8627.748957 VESTS"
    }
  ]
}

{
  "trx_id": "126372c2715a702be797f53ad8116944c13e0454",
  "block": 43197403,
  "trx_in_block": 9,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-08T12:59:06",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "1953.311140 VESTS"
    }
  ]
}

{
  "trx_id": "cf9739be687eb1433b0b502d2343c95515205ee2",
  "block": 33968340,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-06-20T15:43:36",
  "op": [
    "comment",
    {
      "parent_author": "mindandmagicltd",
      "parent_permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "author": "steemitboard",
      "permlink": "steemitboard-notify-mindandmagicltd-20190620t154335000z",
      "title": "",
      "body": "Congratulations @mindandmagicltd! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@mindandmagicltd/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@mindandmagicltd) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=mindandmagicltd)_</sub>\n\n\n**Do not miss the last post from @steemitboard:**\n<table><tr><td><a href=\"https://steemit.com/steemitboard/@steemitboard/the-steem-community-has-lost-an-epic-member-farewell-woflhart\"><img src=\"https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmQWnM36SWCPGn98nY83M1ArgweMz5fnovQEp2E4FiDdug/Wolfhart_header.png\"></a></td><td><a href=\"https://steemit.com/steemitboard/@steemitboard/the-steem-community-has-lost-an-epic-member-farewell-woflhart\">The Steem community has lost an epic member! Farewell @woflhart!</a></td></tr><tr><td><a href=\"https://steemit.com/steemtoolbar/@steemitboard/steemtoolbar-update-display-bug-fixed\"><img src=\"https://steemitimages.com/64x128/http://i.cubeupload.com/7CiQEO.png\"></a></td><td><a href=\"https://steemit.com/steemtoolbar/@steemitboard/steemtoolbar-update-display-bug-fixed\">SteemitBoard - Witness Update</a></td></tr><tr><td><a href=\"https://steemit.com/steem/@steemitboard/do-not-miss-the-coming-rocky-mountain-steem-meetup-and-get-a-new-community-badge\"><img src=\"https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmUphCGZFWgt6bJ1XTtunV7esnwy6bxnGqcLcHAV3NEqnQ/meetup-rocky-mountain.png\"></a></td><td><a href=\"https://steemit.com/steem/@steemitboard/do-not-miss-the-coming-rocky-mountain-steem-meetup-and-get-a-new-community-badge\">Do not miss the coming Rocky Mountain Steem Meetup and get a new community badge!</a></td></tr></table>\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}"
    }
  ]
}

{
  "trx_id": "bbc4ddced8347034aafb7a32403ebb37bc569b57",
  "block": 33840054,
  "trx_in_block": 24,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-06-16T04:31:00",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "8816.249600 VESTS"
    }
  ]
}

{
  "trx_id": "d05ff0e20cddd5a9b65d72dbaa57b859813e77cf",
  "block": 23602708,
  "trx_in_block": 24,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-06-24T12:41:00",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "9015.343082 VESTS"
    }
  ]
}

{
  "trx_id": "747e3beec67f26d14cee786f019268e904e70bde",
  "block": 22547391,
  "trx_in_block": 35,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-05-18T20:15:00",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "29381.222633 VESTS"
    }
  ]
}

{
  "trx_id": "27c479f31c52ee33a9b061a640122cecb9f0e3e8",
  "block": 20981194,
  "trx_in_block": 40,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-25T10:17:30",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "6b1517831fbae1b2fd9d160c1241b418eb453021",
  "block": 18819650,
  "trx_in_block": 21,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-01-09T06:42:42",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "29586.892000 VESTS"
    }
  ]
}

{
  "trx_id": "722c46d9ab678c37114bdbdfc8620db7ea138b19",
  "block": 14473849,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-08-11T06:18:15",
  "op": [
    "custom_json",
    {
      "required_auths": [],
      "required_posting_auths": [
        "mindandmagicltd"
      ],
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"mindandmagicltd\",\"following\":\"knaki\",\"what\":[\"blog\"]}]"
    }
  ]
}

{
  "trx_id": "2a3175eb3d8c542fbdef246b8fd84890430e7395",
  "block": 14271440,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-08-04T05:18:09",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "mindandmagicltd",
      "vesting_shares": "29837.702708 VESTS"
    }
  ]
}

{
  "trx_id": "d63391ea52c2e0d1dd0cd421390b153f15949de4",
  "block": 14049785,
  "trx_in_block": 15,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-27T12:28:12",
  "op": [
    "claim_reward_balance",
    {
      "account": "mindandmagicltd",
      "reward_steem": "0.000 STEEM",
      "reward_sbd": "0.068 SBD",
      "reward_vests": "103.298717 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 14045855,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 4,
  "timestamp": "2017-07-27T09:11:45",
  "op": [
    "author_reward",
    {
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "sbd_payout": "0.030 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "49.582483 VESTS"
    }
  ]
}

{
  "trx_id": "0000000000000000000000000000000000000000",
  "block": 14026788,
  "trx_in_block": 4294967295,
  "op_in_trx": 0,
  "virtual_op": 3,
  "timestamp": "2017-07-26T17:18:06",
  "op": [
    "author_reward",
    {
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "sbd_payout": "0.038 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "53.716234 VESTS"
    }
  ]
}

{
  "trx_id": "cf2a43b5a8e37d2dce6a85d3df2aaa7c477f0e24",
  "block": 14003997,
  "trx_in_block": 20,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-25T22:18:09",
  "op": [
    "vote",
    {
      "voter": "playtowin",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 1000
    }
  ]
}

{
  "trx_id": "c4b9f94d2b086a1dc0d415714820831a4284cb2d",
  "block": 13991796,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-25T12:07:42",
  "op": [
    "vote",
    {
      "voter": "promoted",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 5
    }
  ]
}

{
  "trx_id": "ed38eceafa938e39ff259ca7224c8fecee64efeb",
  "block": 13991762,
  "trx_in_block": 37,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-25T12:06:00",
  "op": [
    "vote",
    {
      "voter": "promoted",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 7
    }
  ]
}

{
  "trx_id": "7ce6407f5ebdd14a628e4852bc772e3528568cd6",
  "block": 13860186,
  "trx_in_block": 14,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T22:20:12",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "93da11851e65b042428aafeb7c77e70a17f03374",
  "block": 13860185,
  "trx_in_block": 8,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T22:20:09",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 0
    }
  ]
}

{
  "trx_id": "411f3a29152192317d5123b59dd0ccf5b504d654",
  "block": 13845774,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T10:18:12",
  "op": [
    "custom_json",
    {
      "required_auths": [],
      "required_posting_auths": [
        "mindandmagicltd"
      ],
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"mindandmagicltd\",\"following\":\"kozak\",\"what\":[\"blog\"]}]"
    }
  ]
}

{
  "trx_id": "cb7567d4ea0997a798cc8980274991c8a63cd408",
  "block": 13845746,
  "trx_in_block": 16,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T10:16:48",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "kozak",
      "permlink": "why-is-ux-design-more-related-to-business-than-to-design",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "84542051bccafc92e05ef1345f29c9f5bcb10e8e",
  "block": 13845393,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:59:09",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "knaki",
      "permlink": "re-mindandmagicltd-prototyping-apple-watch-notifications-in-framer-part-2-20170720t092251146z",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "0a7250bc7ce5d94671253edffb549fd1943e2ad0",
  "block": 13845341,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:56:33",
  "op": [
    "comment",
    {
      "parent_author": "knaki",
      "parent_permlink": "re-mindandmagicltd-prototyping-apple-watch-notifications-in-framer-part-1-20170719t172711775z",
      "author": "mindandmagicltd",
      "permlink": "re-knaki-re-mindandmagicltd-prototyping-apple-watch-notifications-in-framer-part-1-20170720t095632371z",
      "title": "",
      "body": "Merci :)",
      "json_metadata": "{\"tags\":[\"ux\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "6b783db76b399b147095429cd9ecb35afa5ea19c",
  "block": 13845332,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:56:06",
  "op": [
    "comment",
    {
      "parent_author": "michaelol",
      "parent_permlink": "re-mindandmagicltd-2017720t12123205z",
      "author": "mindandmagicltd",
      "permlink": "re-michaelol-re-mindandmagicltd-2017720t12123205z-20170720t095604626z",
      "title": "",
      "body": "Thanks @michaelol!",
      "json_metadata": "{\"tags\":[\"ux\"],\"users\":[\"michaelol\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "b1d5ea18fc1f6c30b8e78dbaaa1bae161d48ef85",
  "block": 13844809,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:29:54",
  "op": [
    "vote",
    {
      "voter": "alphacore",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 10
    }
  ]
}

{
  "trx_id": "f2b3d7ae429f028a7668b488870a355a1afdf8fc",
  "block": 13844795,
  "trx_in_block": 18,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:29:12",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "technology",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "title": "Prototyping Apple Watch Notifications in Framer - Part 2",
      "body": "@@ -4267,23 +4267,9 @@\n t;= \n-Screen.height/2\n+0\n )%3Cbr\n",
      "json_metadata": "{\"tags\":[\"technology\",\"ux\",\"uxdesign\",\"prototyping\",\"framer\"],\"image\":[\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_06.gif\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_07.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_08.gif\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_09.gif\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_10.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_11.gif\"],\"links\":[\"https://steemit.com/ux/@mindandmagicltd/prototyping-apple-watch-notifications-in-framer-part-1\",\"https://framer.com\",\"https://blog.framer.com/introduction-in-framerstudio-utils-modulate-55387f41fdaa\",\"https://www.facebook.com/groups/framerjs/\"],\"app\":\"steemit/0.1\",\"format\":\"html\"}"
    }
  ]
}

{
  "trx_id": "4cae64f39467b8b696edbaf417969a631127e3da",
  "block": 13844668,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:22:51",
  "op": [
    "comment",
    {
      "parent_author": "mindandmagicltd",
      "parent_permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "author": "knaki",
      "permlink": "re-mindandmagicltd-prototyping-apple-watch-notifications-in-framer-part-2-20170720t092251146z",
      "title": "",
      "body": "Very good and the post is neat. Well done genius!",
      "json_metadata": "{\"tags\":[\"technology\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "5eea17db2942edcdf31866eca71cd4a15171593e",
  "block": 13844624,
  "trx_in_block": 24,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:20:39",
  "op": [
    "vote",
    {
      "voter": "knaki",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "03caf922921c332b26c8436b2bf14702058c161c",
  "block": 13844600,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:19:27",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "227f0d3c27dc006a15d1238cae754db486492126",
  "block": 13844592,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:19:03",
  "op": [
    "vote",
    {
      "voter": "mindandmagicltd",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "561c8fb8645b922ff536256960f6e8a8ec6ef3a6",
  "block": 13844528,
  "trx_in_block": 10,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:15:51",
  "op": [
    "vote",
    {
      "voter": "zeeshankhan",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "91c85b63ef817419c7e7c4ca4458fcdd90c7be7b",
  "block": 13844528,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:15:51",
  "op": [
    "comment",
    {
      "parent_author": "mindandmagicltd",
      "parent_permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "author": "zeeshankhan",
      "permlink": "re-mindandmagicltd-prototyping-apple-watch-notifications-in-framer-part-2-20170720t091549126z",
      "title": "",
      "body": "Glad to see you,I hope you enjoy here as much as i do !! Nice post, i will follow your account, please follow me at @zeeshankhan",
      "json_metadata": "{\"tags\":[\"technology\"],\"users\":[\"zeeshankhan\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "33a3cc4a96709f55af5f6dd4bebf3f6c06e0a9df",
  "block": 13844446,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T09:11:45",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "technology",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-2",
      "title": "Prototyping Apple Watch Notifications in Framer - Part 2",
      "body": "<html>\n<p>In <a href=\"https://steemit.com/ux/@mindandmagicltd/prototyping-apple-watch-notifications-in-framer-part-1\">Part 1</a> of this series of tutorials on <a href=\"https://framer.com\">Framer Studio</a>, I showed you how to set up your screens using the Design interface, add targets to reference them and their elements in code and use States for transitions between screens and UI animations.</p>\n<p>In this tutorial, we are going to further customise our screens and add a little polish to our design and code to make our prototype look and feel like a real notification on watchOS!</p>\n<p>Let's get to it!</p>\n<h1>Modulate and Refine</h1>\n<p>As the long look screen pops up, several things also happen simultaneously on the Apple Watch. The digital clock at the top right of the screen fades in and the app title from the short look slides up and fades out.</p>\n<p>Framer has a great functionality called 'modulate', which allows you to define an object's behaviour and values relative to another object's behaviour and values.</p>\n<p>Diving deep down into Framer's modulate utility function is beyond the scope of this tutorial and there are plenty of articles out there. If you want to learn and find out more about it, be sure to check out my friend Sergei Voronov's excellent post \"<a href=\"https://blog.framer.com/introduction-in-framerstudio-utils-modulate-55387f41fdaa\"><strong>Introduction to FramerJS Utils.modulate</strong></a>\".</p>\n<p>The clock's behaviour depends on the long look's y position: as the long look elements appear by sliding up on the screen, the digital clock fades in at the top right. Add the following lines to your code:</p>\n<pre><code>long_look_container.on \"change:y\", -&gt;<br>\n &nbsp;clock.opacity = Utils.modulate(long_look_container.y, [170, 19], [0, 1])<br>\n &nbsp;AppName.y = Utils.modulate(long_look_container.y, [170, 19], [111, 24])<br>\n &nbsp;AppName.opacity = Utils.modulate(long_look_container.y, [170, 19], [1, 0])</code></pre>\n<p><br></p>\n<p>Check out the result in the Preview window: things are looking smoother and smoother!</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_06.gif\"/></p>\n<h1>Customising with Vector Graphics</h1>\n<p>Next, we're going to take care of our app icon. Right now, a white circle is looking rather bland. But we can't draw much with Framer Studio's design tools - there isn't any bezier tool for example.</p>\n<p>We could import bitmap images but those might pixelate in the final renderings. So, instead, we are going to import some vector graphics. The other advantage is that those are going to scale perfectly when we animate.</p>\n<p>Let's say we have the following design in Sketch:</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_07.png\"/></p>\n<p><br></p>\n<p>Click the 'Make Exportable\" <strong>+ </strong>button at the bottom right of the screen and export the whole folder as an SVG graphic.</p>\n<p>Now, it's as easy as dragging the exported file onto your artboard in Framer Studio, delete the white circle object we have been using so far and, finally, resize, rename and target our vector graphic.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_08.gif\"/></p>\n<p><br></p>\n<p>When you go back to the Preview window, you can see how it is now integrated into our notification and how it scales and animates perfectly without having to add or change a single line in our code!</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_09.gif\"/></p>\n<p><br></p>\n<h1>Finishing Touches</h1>\n<p>All that remains now is to finish up by adding some watch face elements to our Face artboard so we are not starting our notification from a black screen.</p>\n<p>Using the same import technique as above, we're going to place some watchOS elements. I recreated them by doing some vector drawings over an Apple Watch screen grab and exporting each element as an SVG graphic.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_10.png\"/></p>\n<p><br></p>\n<p>Finally, add the following lines to your code to hide the bottom of the \"6\" clock face digit when the short look screen bounces in:</p>\n<pre><code>Short.on \"change:y\", -&gt;<br>\n &nbsp;if (Short.y &lt;= Screen.height/2)<br>\n &nbsp;&nbsp;&nbsp;Face.opacity = 0</code></pre>\n<p><br></p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_11.gif\"/></p>\n<h1>And... Voilà!</h1>\n<p>Using Framer Studio's mix of design and minimal code, we have been able to recreate the Apple Watch notification screen with an unparalleled level of fidelity.</p>\n<p>I hope that you have found this tutorial helpful.&nbsp;</p>\n<p>For questions and interacting with the Framer community, be sure to check out their <a href=\"https://www.facebook.com/groups/framerjs/\">Facebook group</a>.</p>\n</html>",
      "json_metadata": "{\"tags\":[\"technology\",\"ux\",\"uxdesign\",\"prototyping\",\"framer\"],\"image\":[\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_06.gif\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_07.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_08.gif\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_09.gif\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_10.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_11.gif\"],\"links\":[\"https://steemit.com/ux/@mindandmagicltd/prototyping-apple-watch-notifications-in-framer-part-1\",\"https://framer.com\",\"https://blog.framer.com/introduction-in-framerstudio-utils-modulate-55387f41fdaa\",\"https://www.facebook.com/groups/framerjs/\"],\"app\":\"steemit/0.1\",\"format\":\"html\"}"
    }
  ]
}

{
  "trx_id": "2c80fc9b2520586eaecdabda3609a2038c3577da",
  "block": 13844029,
  "trx_in_block": 14,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T08:50:51",
  "op": [
    "vote",
    {
      "voter": "knaki",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "1baebeb2bccc0998b090bb31f7abb35b95dd368e",
  "block": 13844028,
  "trx_in_block": 25,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-20T08:50:45",
  "op": [
    "vote",
    {
      "voter": "knaki",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 0
    }
  ]
}

{
  "trx_id": "9a9fd57ba156a7496353698972dbebb62d952d85",
  "block": 13826857,
  "trx_in_block": 7,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T18:31:54",
  "op": [
    "vote",
    {
      "voter": "proctologic",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 100
    }
  ]
}

{
  "trx_id": "4b1c4985ef80facfe049e7bdaa0d60f75af8a7d3",
  "block": 13826833,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T18:30:42",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "ux",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "title": "Prototyping Apple Watch Notifications in Framer - Part 1",
      "body": "<html>\n<p><em>The great people at </em><a href=\"https://framer.com\"><em>Framer</em></a><em> recently introduced </em><em><strong>Framer Studio</strong></em><em>, adding a visual design interface to the existing coding tool. Although not quite as extensive as Sketch, it still offers speed and flexibility for designing screens with vector graphics and text.</em></p>\n<p><em>In this post, I am going to show you how to create an entire Apple Watch notification presentation from scratch. Along the way, I will also share some tips and tricks for extending the built-in vector design capabilities of Framer Studio's Design tab.</em></p>\n<p><em>Let's get to it!</em></p>\n<h1>Anatomy of an Apple Watch Notification</h1>\n<p>On watchOS, &nbsp;notifications happens in 2 stages - <strong>short looks</strong> and <strong>long looks</strong>. The short look happens when the user raises their wrist and consists of a very short animation displaying the app icon and app name. If the user keeps their wrist raised, the short look then transitions into the long look, which displays more information about the notification by way of a message and optional action buttons.</p>\n<p>For our prototype, we are going to need 3 screens: the watch face, the short look and the long look.</p>\n<h1>Designing the Screens</h1>\n<p>Fire up Framer Studio, which will start in the Design tab and present you with a blank canvas.</p>\n<h2>Step 1: Setting Up the Stage</h2>\n<p>Click on the <strong>Artboard</strong> button in the left-hand column. This will toggle a list of existing devices and screen sizes on the right-hand side of the interface. Choose 'Apple Watch 38mm' - this adds the corresponding artboard onto the canvas.</p>\n<p>Set its fill colour as <strong>#000000</strong>.</p>\n<p>Repeat the process 2 more times and keep the artboards slightly separated.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_01.png\"/></p>\n<p><br></p>\n<p>Rename the screens \"Face\", \"Short\" and \"Long\" respectively. (You can either double-click and edit the names from the canvas or from the elements list on the left-hand side of the canvas.) Finally, you need to add a target for each of them so we can reference each screen in code. You do this by hovering over each screen name in the elements pane. Right-click and select 'Create Target' from the pop-over menu. A tooltip reading \"Short in Code\" appears, confirming it is now set as a code target.</p>\n<h2>Step 2: Designing the Short Look Screen</h2>\n<p>This screen is made up of 2 elements: the app icon and the app name.</p>\n<p>For the app icon, simply use the 'Oval' design tool to draw a circle with the following attributes:</p>\n<pre><code><strong>x:</strong> 24<br>\n<strong>y:</strong> 18<br>\n<strong>width:</strong> 88<br>\n<strong>height:</strong> 88<br>\n<strong>fill:</strong> #FFFFFF<br>\n<strong>opacity:</strong> 100%</code></pre>\n<p><br></p>\n<p>Next,&nbsp;we're going to add the app name using the 'Text' tool. Apply the attributes below:</p>\n<pre><code><strong>color: </strong>#FFFFFF<br>\n<strong>font: </strong>SF Compact Text<br>\n<strong>style: </strong>Regular<br>\n<strong>size: </strong>18<br>\n<strong>text-alignment:</strong> center<br>\n<strong>y: </strong>111</code></pre>\n<p><br></p>\n<p>Rename each UI element from the Elements panel list on the left-hand side of the canvas: \"AppIcon\" for the application icon, \"AppName\" for the application name.</p>\n<p>Hover your mouse over each element. You will see a small 'target' icon appear to the right of the element's name. By clicking on it, Framer generates a variable you can now use in code to refer to the element. Do this for each one. You should have the same screen as below:</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_02.png\"/></p>\n<h2>Step 3: Designing the Long Look Screen</h2>\n<p>Next, we're going to take care of the long look screen. First, insert a small app icon - same colour and shape as the large one but with the following attributes:</p>\n<pre><code><strong>x:</strong> 8<br>\n<strong>y:</strong> 2<br>\n<strong>width: </strong>40<br>\n<strong>height: </strong>40</code></pre>\n<p><br></p>\n<p>Second is the time display. Insert a Text element and write any time you want with the below attributes:</p>\n<pre><code><strong>x:</strong> 98<br>\n<strong>y:</strong> 1<br>\n<strong>color: </strong>#AAAAAA<br>\n<strong>font: </strong>SF UI Text<br>\n<strong>style: </strong>Regular<br>\n<strong>size: </strong>14</code></pre>\n<p><br></p>\n<p>Next on the list is the sash rectangle:</p>\n<pre><code><strong>x: </strong>0<br>\n<strong>y: </strong>19<br>\n<strong>width: </strong>136<br>\n<strong>height: </strong>27<br>\n<strong>background-color: </strong>#4F4156 (<em>you can customise it to any colour you want)<br>\n</em><strong>border-radius: </strong>6, 6, 0, 0</code></pre>\n<p><br></p>\n<p>For the message body background, we use a Rectangle too:</p>\n<pre><code><strong>x:</strong> 0<br>\n<strong>y:</strong> 46<br>\n<strong>width: </strong>136<br>\n<strong>height: </strong>70<br>\n<strong>background-color: </strong>#02151A<br>\n<strong>border-radius: </strong>0, 0, 6, 6</code></pre>\n<p><br></p>\n<p>Inside, you're going to draw (by clicking-dragging the mouse) a text box. Type in any text you want inside but keep it to 3 lines and make sure you input the correct attributes:</p>\n<pre><code><strong>x: </strong>4<br>\n<strong>y: </strong>8<br>\n<strong>width: </strong>128<br>\n<strong>height: </strong>54 <strong><br>\ncolor: </strong>#FFFFFF<br>\n<strong>font: </strong>SF UI Text<br>\n<strong>font-style: </strong>Regular<br>\n<strong>font-size: </strong>16</code></pre>\n<p><br></p>\n<p>You will notice that the above x and y values are not in relation to the screen itself but, rather, in relation to the containing rectangle. Framer has a nifty way of automatically placing an element as a child (see the left indentation for the element in the left-hand pane) if it is positioned within another element. Here, our text box is smaller than the rectangle underneath so Framer considers it as a child element of the coloured rectangle. X and y position values are relative to the parent element.</p>\n<p>Let's continue with setting up the Long Look UI elements with the action button. For our prototype, we are only going to use one button but Apple Watch notifications can contain several.</p>\n<p>Our button has the following attributes:</p>\n<pre><code><strong>x: </strong>0<br>\n<strong>y: </strong>124<br>\n<strong>width: </strong>136<br>\n<strong>height: </strong>38<br>\n<strong>background-color: #</strong>4B4B4B<br>\n<strong>border-radius: </strong>6</code></pre>\n<p><br></p>\n<p>To wrap up, insert a Text element inside your sash rectangle:</p>\n<pre><code><strong>x: </strong>49<br>\n<strong>y: </strong>7<br>\n<strong>text-align: </strong>right<br>\n<strong>font: </strong>SF UI Text<br>\n<strong>font-style: </strong>Regular<br>\n<strong>font-size:</strong> 11</code></pre>\n<p><br></p>\n<p>- and type in you app name, as well as the action button title - \"Dismiss\":</p>\n<pre><code><strong>font: </strong>SF UI Text<br>\n<strong>font-style: </strong>Regular<br>\n<strong>font-size:</strong> 15</code></pre>\n<p><br></p>\n<p>Use your mouse and the canvas guides to center it inside the button.</p>\n<h1>Coding the Animations</h1>\n<p>We are going to use Layer States to manage screen transitions and animations.</p>\n<h2>Step 1: Animating the Short Look Screen</h2>\n<p>Switch over to the Code tab and enter the following code:</p>\n<pre><code>Short.states.start =<br>\n &nbsp;x: 0<br>\n &nbsp;y: 340<br>\nShort.states.end =<br>\n &nbsp;y: 0<br>\n &nbsp;animationOptions:<br>\n &nbsp;&nbsp;&nbsp;curve: \"spring(80, 15, 6)\"<br>\n &nbsp;&nbsp;&nbsp;delay: 1.0</code></pre>\n<p><br></p>\n<p>The 'start' state defines the initial position of the Short screen. The 'end' state brings it up with a spring animation. (For more on animations in Framer, check out Jay Stakelon's excellent blog article <a href=\"http://www.stakelon.com/2014/05/animating-with-framer-js/\"><strong>Animating with Framer.js</strong></a>).</p>\n<p>You will see that, despite adding this code, nothing happens in the Preview window. That is because we have not added any instructions to trigger the transition animation yet. Under the previous lines of code, add:</p>\n<pre><code>Short.stateSwitch(\"start\")<br>\nShort.animate(\"end\")<br>\nShort.onAnimationStart -&gt;<br>\n &nbsp;Short.placeBefore(Face)</code></pre>\n<p><br></p>\n<p>You can now see the result in the Preview window. We are starting from the blank Face screen (we will customise it a bit later) and can see the spring animation transition to the Short screen.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_03.png\"/></p>\n<h2>Step 2: Animating the Long Look Screen</h2>\n<p>We are going to be animating the app icon from the short look screen and have it overlap the long look screen animation. To do this, our artboard requires a few adjustments.</p>\n<p>First, we will hide the 'AppIcon_small' by unchecking the <strong>Fill</strong> attribute. This leaves the element on the stage so we can reference its frame attributes later.</p>\n<p>Next, we need to group the sash banner, title, message and action buttons together. Unfortunately, Framer Studio does not have a grouping functionality (like Sketch has for example). The trick is to create a parent rectangle that will contain the UI elements listed above.</p>\n<p>Name it 'long_look_container' and uncheck it's <strong>Fill </strong>attribute in order to make it invisible.</p>\n<p>Finally, drag the 'AppIcon_small' element so that it is above all the other artboard elements.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_04.png\"/></p>\n<p><br></p>\n<p>For the app icon transition attributes, add the following code:</p>\n<pre><code>AppIcon.states.end =<br>\n &nbsp;borderRadius: 20<br>\n &nbsp;frame: AppIcon_small.frame<br>\n &nbsp;animationOptions:<br>\n &nbsp;&nbsp;&nbsp;&nbsp;curve: \"spring(75, 15, 9)\"<br>\n &nbsp;shadowX: 1<br>\n &nbsp;shadowY: 1<br>\n &nbsp;shadowColor: \"rgba(0, 0, 0, 0.75)\"<br>\n &nbsp;shadowBlur: 5</code></pre>\n<p><br></p>\n<p>Then add the states code for the 'long_look_container\" group:</p>\n<pre><code>long_look_container.states.start =<br>\n &nbsp;x: 0<br>\n &nbsp;y: 170<br>\nlong_look_container.states.end =<br>\n &nbsp;y: 19<br>\n &nbsp;animationOptions:<br>\n &nbsp;curve: \"spring(75, 15, 9)\"</code></pre>\n<p><br></p>\n<p>Finally, we are triggering the long look transition once the short look screen has finished its animations:</p>\n<pre><code>Short.onAnimationEnd -&gt;<br>\n &nbsp;Long.x = 0<br>\n &nbsp;Long.y = 0<br>\n &nbsp;Long.bringToFront()<br>\n &nbsp;AppIcon.parent = Long<br>\n &nbsp;long_look_container.stateSwitch(\"start\")<br>\n &nbsp;AppIcon.stateCycle()<br>\n &nbsp;long_look_container.animate(\"end\")</code></pre>\n<p><br></p>\n<p>As you can see from the Preview window, things are shaping up and are almost complete!</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_05.gif\"/></p>\n<p><br></p>\n<h1>Next steps</h1>\n<p>In Part 2, I will show you how to customise the application icon with an imported vector graphic and tweak the UI elements and their animations for smoother transitions and higher fidelity to the watchOS notifications.</p>\n<p>I have posted the <a href=\"https://framer.cloud/mZtSm\">live Framer project</a> so you can download the source code and play with it.</p>\n<p><br></p>\n<p>Hope you enjoy!</p>\n</html>",
      "json_metadata": "{\"tags\":[\"technology\",\"ux\",\"uxdesign\",\"prototyping\",\"framer\"],\"image\":[\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_01.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_02.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_03.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_04.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_05.gif\"],\"links\":[\"https://framer.com\",\"http://www.stakelon.com/2014/05/animating-with-framer-js/\",\"https://framer.cloud/mZtSm\"],\"app\":\"steemit/0.1\",\"format\":\"html\"}"
    }
  ]
}

{
  "trx_id": "f1c314cf32e7a711043bde9ab18de1b00885443c",
  "block": 13825653,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T17:31:42",
  "op": [
    "account_update",
    {
      "account": "mindandmagicltd",
      "memo_key": "STM6eueUsYkUSRdPCn7DHzHgzuYjUWvd96GrUjHoDCwCTncQXtKfw",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://www.dropbox.com/s/9q8pt8oaznz23nz/IMG_3208.png?dl=0\",\"name\":\"Mind & Magic Ltd\",\"location\":\"London\",\"about\":\"I am a User Experience Designer with over 10 years experience and skills on how to combine creativity and technology resulting in compelling user experiences.\"}}"
    }
  ]
}

{
  "trx_id": "2f10d01c0d570037faf28ee90ac7d7715c1a2621",
  "block": 13825563,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T17:27:12",
  "op": [
    "comment",
    {
      "parent_author": "mindandmagicltd",
      "parent_permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "author": "knaki",
      "permlink": "re-mindandmagicltd-prototyping-apple-watch-notifications-in-framer-part-1-20170719t172711775z",
      "title": "",
      "body": "Great post and very well explained !!",
      "json_metadata": "{\"tags\":[\"ux\"],\"app\":\"steemit/0.1\"}"
    }
  ]
}

{
  "trx_id": "451edd83685cd005fcc47b582333ff798f495f77",
  "block": 13825515,
  "trx_in_block": 18,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T17:24:48",
  "op": [
    "vote",
    {
      "voter": "knaki",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "0c480106e325f00d8d0a7a7a145d27f91e367e4c",
  "block": 13825451,
  "trx_in_block": 14,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T17:21:36",
  "op": [
    "vote",
    {
      "voter": "michaelol",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "weight": 8006
    }
  ]
}

{
  "trx_id": "d73f0270569ad6731affea81ab6ad8673dabad52",
  "block": 13825448,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T17:21:27",
  "op": [
    "comment",
    {
      "parent_author": "mindandmagicltd",
      "parent_permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "author": "michaelol",
      "permlink": "re-mindandmagicltd-2017720t12123205z",
      "title": "",
      "body": "Very informative!",
      "json_metadata": "{\"tags\":\"ux\",\"app\":\"esteem/1.4.6\",\"format\":\"markdown+html\",\"community\":\"esteem\"}"
    }
  ]
}

{
  "trx_id": "b6f446156311cf69c68d85b16e63d5c87c7f4b74",
  "block": 13825381,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-19T17:18:06",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "ux",
      "author": "mindandmagicltd",
      "permlink": "prototyping-apple-watch-notifications-in-framer-part-1",
      "title": "Prototyping Apple Watch Notifications in Framer - Part 1",
      "body": "<html>\n<p><em>The great people at </em><a href=\"https://framer.com\"><em>Framer</em></a><em> recently introduced </em><em><strong>Framer Studio</strong></em><em>, adding a visual design interface to the existing coding tool. Although not quite as extensive as Sketch, it still offers speed and flexibility for designing screens with vector graphics and text.</em></p>\n<p><em>In this post, I am going to show you how to create an entire Apple Watch notification presentation from scratch. Along the way, I will also share some tips and tricks for extending the built-in vector design capabilities of Framer Studio's Design tab.</em></p>\n<p><em>Let's get to it!</em></p>\n<h1>Anatomy of an Apple Watch Notification</h1>\n<p>On watchOS, &nbsp;notifications happens in 2 stages - <strong>short looks</strong> and <strong>long looks</strong>. The short look happens when the user raises their wrist and consists of a very short animation displaying the app icon and app name. If the user keeps their wrist raised, the short look then transitions into the long look, which displays more information about the notification by way of a message and optional action buttons.</p>\n<p>For our prototype, we are going to need 3 screens: the watch face, the short look and the long look.</p>\n<h1>Designing the Screens</h1>\n<p>Fire up Framer Studio, which will start in the Design tab and present you with a blank canvas.</p>\n<h2>Step 1: Setting Up the Stage</h2>\n<p>Click on the <strong>Artboard</strong> button in the left-hand column. This will toggle a list of existing devices and screen sizes on the right-hand side of the interface. Choose 'Apple Watch 38mm' - this adds the corresponding artboard onto the canvas.</p>\n<p>Set its fill colour as <strong>#000000</strong>.</p>\n<p>Repeat the process 2 more times and keep the artboards slightly separated.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_01.png\"/></p>\n<p><br></p>\n<p>Rename the screens \"Face\", \"Short\" and \"Long\" respectively. (You can either double-click and edit the names from the canvas or from the elements list on the left-hand side of the canvas.) Finally, you need to add a target for each of them so we can reference each screen in code. You do this by hovering over each screen name in the elements pane. Right-click and select 'Create Target' from the pop-over menu. A tooltip reading \"Short in Code\" appears, confirming it is now set as a code target.</p>\n<h2>Step 2: Designing the Short Look Screen</h2>\n<p>This screen is made up of 2 elements: the app icon and the app name.</p>\n<p>For the app icon, simply use the 'Oval' design tool to draw a circle with the following attributes:</p>\n<pre><code><strong>x:</strong> 24<br>\n<strong>y:</strong> 18<br>\n<strong>width:</strong> 88<br>\n<strong>height:</strong> 88<br>\n<strong>fill:</strong> #FFFFFF<br>\n<strong>opacity:</strong> 100%</code></pre>\n<p><br></p>\n<p>Next,&nbsp;we're going to add the app name using the 'Text' tool. Apply the attributes below:</p>\n<pre><code><strong>color: </strong>#FFFFFF<br>\n<strong>font: </strong>SF Compact Text<br>\n<strong>style: </strong>Regular<br>\n<strong>size: </strong>18<br>\n<strong>text-alignment:</strong> center<br>\n<strong>y: </strong>111</code></pre>\n<p><br></p>\n<p>Rename each UI element from the Elements panel list on the left-hand side of the canvas: \"AppIcon\" for the application icon, \"AppName\" for the application name.</p>\n<p>Hover your mouse over each element. You will see a small 'target' icon appear to the right of the element's name. By clicking on it, Framer generates a variable you can now use in code to refer to the element. Do this for each one. You should have the same screen as below:</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_02.png\"/></p>\n<h2>Step 3: Designing the Long Look Screen</h2>\n<p>Next, we're going to take care of the long look screen. First, insert a small app icon - same colour and shape as the large one but with the following attributes:</p>\n<pre><code><strong>x:</strong> 8<br>\n<strong>y:</strong> 2<br>\n<strong>width: </strong>40<br>\n<strong>height: </strong>40</code></pre>\n<p><br></p>\n<p>Second is the time display. Insert a Text element and write any time you want with the below attributes:</p>\n<pre><code><strong>x:</strong> 98<br>\n<strong>y:</strong> 1<br>\n<strong>color: </strong>#AAAAAA<br>\n<strong>font: </strong>SF UI Text<br>\n<strong>style: </strong>Regular<br>\n<strong>size: </strong>14</code></pre>\n<p><br></p>\n<p>Next on the list is the sash rectangle:</p>\n<pre><code><strong>x: </strong>0<br>\n<strong>y: </strong>19<br>\n<strong>width: </strong>136<br>\n<strong>height: </strong>27<br>\n<strong>background-color: </strong>#4F4156 (<em>you can customise it to any colour you want)<br>\n</em><strong>border-radius: </strong>6, 6, 0, 0</code></pre>\n<p><br></p>\n<p>For the message body background, we use a Rectangle too:</p>\n<pre><code><strong>x:</strong> 0<br>\n<strong>y:</strong> 46<br>\n<strong>width: </strong>136<br>\n<strong>height: </strong>70<br>\n<strong>background-color: </strong>#02151A<br>\n<strong>border-radius: </strong>0, 0, 6, 6</code></pre>\n<p><br></p>\n<p>Inside, you're going to draw (by clicking-dragging the mouse) a text box. Type in any text you want inside but keep it to 3 lines and make sure you input the correct attributes:</p>\n<pre><code><strong>x: </strong>4<br>\n<strong>y: </strong>8<br>\n<strong>width: </strong>128<br>\n<strong>height: </strong>54 <strong><br>\ncolor: </strong>#FFFFFF<br>\n<strong>font: </strong>SF UI Text<br>\n<strong>font-style: </strong>Regular<br>\n<strong>font-size: </strong>16</code></pre>\n<p><br></p>\n<p>You will notice that the above x and y values are not in relation to the screen itself but, rather, in relation to the containing rectangle. Framer has a nifty way of automatically placing an element as a child (see the left indentation for the element in the left-hand pane) if it is positioned within another element. Here, our text box is smaller than the rectangle underneath so Framer considers it as a child element of the coloured rectangle. X and y position values are relative to the parent element.</p>\n<p>Let's continue with setting up the Long Look UI elements with the action button. For our prototype, we are only going to use one button but Apple Watch notifications can contain several.</p>\n<p>Our button has the following attributes:</p>\n<pre><code><strong>x: </strong>0<br>\n<strong>y: </strong>124<br>\n<strong>width: </strong>136<br>\n<strong>height: </strong>38<br>\n<strong>background-color: #</strong>4B4B4B<br>\n<strong>border-radius: </strong>6</code></pre>\n<p><br></p>\n<p>To wrap up, insert a Text element inside your sash rectangle:</p>\n<pre><code><strong>x: </strong>49<br>\n<strong>y: </strong>7<br>\n<strong>text-align: </strong>right<br>\n<strong>font: </strong>SF UI Text<br>\n<strong>font-style: </strong>Regular<br>\n<strong>font-size:</strong> 11</code></pre>\n<p><br></p>\n<p>- and type in you app name, as well as the action button title - \"Dismiss\":</p>\n<pre><code><strong>font: </strong>SF UI Text<br>\n<strong>font-style: </strong>Regular<br>\n<strong>font-size:</strong> 15</code></pre>\n<p><br></p>\n<p>Use your mouse and the canvas guides to center it inside the button.</p>\n<h1>Coding the Animations</h1>\n<p>We are going to use Layer States to manage screen transitions and animations.</p>\n<h2>Step 1: Animating the Short Look Screen</h2>\n<p>Switch over to the Code tab and enter the following code:</p>\n<pre><code>Short.states.start =<br>\n &nbsp;x: 0<br>\n &nbsp;y: 340<br>\nShort.states.end =<br>\n &nbsp;y: 0<br>\n &nbsp;animationOptions:<br>\n &nbsp;&nbsp;&nbsp;curve: \"spring(80, 15, 6)\"<br>\n &nbsp;&nbsp;&nbsp;delay: 1.0</code></pre>\n<p><br></p>\n<p>The 'start' state defines the initial position of the Short screen. The 'end' state brings it up with a spring animation. (For more on animations in Framer, check out Jay Stakelon's excellent blog article <a href=\"http://www.stakelon.com/2014/05/animating-with-framer-js/\"><strong>Animating with Framer.js</strong></a>).</p>\n<p>You will see that, despite adding this code, nothing happens in the Preview window. That is because we have not added any instructions to trigger the transition animation yet. Under the previous lines of code, add:</p>\n<pre><code>Short.stateSwitch(\"start\")<br>\nShort.animate(\"end\")<br>\nShort.onAnimationStart -&gt;<br>\n &nbsp;Short.placeBefore(Face)</code></pre>\n<p><br></p>\n<p>You can now see the result in the Preview window. We are starting from the blank Face screen (we will customise it a bit later) and can see the spring animation transition to the Short screen.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_03.png\"/></p>\n<h2>Step 2: Animating the Long Look Screen</h2>\n<p>We are going to be animating the app icon from the short look screen and have it overlap the long look screen animation. To do this, our artboard requires a few adjustments.</p>\n<p>First, we will hide the 'AppIcon_small' by unchecking the <strong>Fill</strong> attribute. This leaves the element on the stage so we can reference its frame attributes later.</p>\n<p>Next, we need to group the sash banner, title, message and action buttons together. Unfortunately, Framer Studio does not have a grouping functionality (like Sketch has for example). The trick is to create a parent rectangle that will contain the UI elements listed above.</p>\n<p>Name it 'long_look_container' and uncheck it's <strong>Fill </strong>attribute in order to make it invisible.</p>\n<p>Finally, drag the 'AppIcon_small' element so that it is above all the other artboard elements.</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_04.png\"/></p>\n<p><br></p>\n<p>For the app icon transition attributes, add the following code:</p>\n<pre><code>AppIcon.states.end =<br>\n &nbsp;borderRadius: 20<br>\n &nbsp;frame: AppIcon_small.frame<br>\n &nbsp;animationOptions:<br>\n &nbsp;&nbsp;&nbsp;&nbsp;curve: \"spring(75, 15, 9)\"<br>\n &nbsp;shadowX: 1<br>\n &nbsp;shadowY: 1<br>\n &nbsp;shadowColor: \"rgba(0, 0, 0, 0.75)\"<br>\n &nbsp;shadowBlur: 5</code></pre>\n<p><br></p>\n<p>Then add the states code for the 'long_look_container\" group:</p>\n<pre><code>long_look_container.states.start =<br>\n &nbsp;x: 0<br>\n &nbsp;y: 170<br>\nlong_look_container.states.end =<br>\n &nbsp;y: 19<br>\n &nbsp;animationOptions:<br>\n &nbsp;curve: \"spring(75, 15, 9)\"</code></pre>\n<p><br></p>\n<p>Finally, we are triggering the long look transition once the short look screen has finished its animations:</p>\n<pre><code>Short.onAnimationEnd -&gt;<br>\n &nbsp;Long.x = 0<br>\n &nbsp;Long.y = 0<br>\n &nbsp;Long.bringToFront()<br>\n &nbsp;AppIcon.parent = Long<br>\n &nbsp;long_look_container.stateSwitch(\"start\")<br>\n &nbsp;AppIcon.stateCycle()<br>\n &nbsp;long_look_container.animate(\"end\")</code></pre>\n<p><br></p>\n<p>As you can see from the Preview window, things are shaping up and are almost complete!</p>\n<p><img src=\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_05.gif\"/></p>\n<p><br></p>\n<h1>Next steps</h1>\n<p>In Part 2, I will show you how to customise the application icon with an imported vector graphic and tweak the UI elements and their animations for smoother transitions and higher fidelity to the watchOS notifications.</p>\n<p>I have posted the <a href=\"https://framer.cloud/mZtSm\">live Framer project</a> so you can download the source code and play with it.</p>\n<p><br></p>\n<p>Hope you enjoy!</p>\n</html>",
      "json_metadata": "{\"tags\":[\"ux\",\"uxdesign\",\"uidesign\",\"prototyping\",\"framer\"],\"image\":[\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_01.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_02.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_03.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_04.png\",\"http://www.equinoxe.media/steemit/MIN-notification_tutorial_05.gif\"],\"links\":[\"https://framer.com\",\"http://www.stakelon.com/2014/05/animating-with-framer-js/\",\"https://framer.cloud/mZtSm\"],\"app\":\"steemit/0.1\",\"format\":\"html\"}"
    }
  ]
}

{
  "trx_id": "ad2311d0c4de21f81a894c1a0e1f127b198fd59f",
  "block": 13707302,
  "trx_in_block": 7,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-07-15T14:52:00",
  "op": [
    "account_update",
    {
      "account": "mindandmagicltd",
      "memo_key": "STM6eueUsYkUSRdPCn7DHzHgzuYjUWvd96GrUjHoDCwCTncQXtKfw",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://www.dropbox.com/s/9q8pt8oaznz23nz/IMG_3208.png?dl=0\",\"name\":\"Mind & Magic Ltd\",\"location\":\"London\",\"website\":\"http://www.equinoxe.media\"}}"
    }
  ]
}

{
  "trx_id": "c975f427870ec502cc8bfff5458d1fffb5a73f1e",
  "block": 12988027,
  "trx_in_block": 14,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2017-06-20T14:12:15",
  "op": [
    "account_create_with_delegation",
    {
      "fee": "0.500 STEEM",
      "delegation": "57000.000000 VESTS",
      "creator": "steem",
      "new_account_name": "mindandmagicltd",
      "owner": {
        "weight_threshold": 1,
        "account_auths": [],
        "key_auths": [
          [
            "STM8f2wiwxLUA3NvCaNzki5ARHxoV6Ha7kkdPne6tQ8CJPpZ4VuPu",
            1
          ]
        ]
      },
      "active": {
        "weight_threshold": 1,
        "account_auths": [],
        "key_auths": [
          [
            "STM5g2tSjjkFVT4n2eb3psRqa5YcioqCAtrdH7oM6mCyo9BCqHimt",
            1
          ]
        ]
      },
      "posting": {
        "weight_threshold": 1,
        "account_auths": [],
        "key_auths": [
          [
            "STM61r3aFYVVUe4uXmNnn5x5nWenE1n4iAF7uCZmQJfEyrRPnDRhV",
            1
          ]
        ]
      },
      "memo_key": "STM6eueUsYkUSRdPCn7DHzHgzuYjUWvd96GrUjHoDCwCTncQXtKfw",
      "json_metadata": "",
      "extensions": []
    }
  ]
}