Skip to content

How to design an app · Medical Students Making an App - Episode 4

2017-08-03 · Long video (solo, talking head or whiteboard) · Ali · recording, 5:15 · watch on YouTube

Topic: Business and entrepreneurship (also: Tools, apps and tech) · mode: Explanation and tutorial · tags: His own products discussed, Aimed at students

Ali explains how he and Ben designed Cut and Paste: for lay people designing an app is just drawing boxes on a page, first with pen and paper, then in software such as Sketch or the free Figma, using a free component template rather than starting from scratch.

What is said

The parts of the video and what is said in each (★ — how much it matters to the video).

00:00:00 — The series and the aim: a high-level overview, not app tutorials

  • ★★ Ali says the Medical Students Making an App videos give a high-level overview of taking an app idea to a product, not button-by-button tutorials, which exist elsewhere for tools such as Sketch and InVision. — 00:00:24 · Medical Students Making an App, Sketch, InVision

00:00:54 — Paper sketches of the screens; designing an app is drawing boxes on a page

  • ★★ Ben spent an afternoon sketching Cut and Paste on A4 paper taken from a hospital printer: boxes for the home screen, the logbook page and the add-operation page with a patient ID field. — 00:00:54 · Ben, Cut and Paste

  • ★★★ For lay people who just want to turn an idea into reality, Ali says designing an app is effectively just drawing boxes on a page, first with pen and paper, then as a digital copy. — 00:01:23

    “designing an app is effectively just drawing boxes on a page”

00:01:56 — From sketches to software: Sketch, Figma, PowerPoint and Word

  • ★★ After Ben's paper sketches, Ali and Ben held a session to discuss the ideas, suggest improvements and drop what they did not want, then moved to a computer design. — 00:01:56 · Ben, Cut and Paste
  • ★★ Ali says the software for the computer design hardly matters as long as it can draw boxes on a screen; he personally likes Sketch, a Mac-only web and app design tool. — 00:01:56 · Sketch
  • ★★ Ali believes a Sketch licence costs about £40 with the student discount. (hedged) — 00:02:25 · Sketch
  • ★★ Instead of paying for Sketch, Ali suggests the free, web-based Figma, which runs on Mac and Windows, or even PowerPoint and Word, since they also let you draw boxes. — 00:02:25 · Microsoft PowerPoint, Microsoft Word

00:02:54 — No need to start from scratch: free component templates; the finished design

  • ★★★ Ali says that in 2017 there are so many good free resources that there is little point starting an app design from scratch: free iOS and Android component templates give you the boxes and buttons. — 00:02:54
  • ★★ For people designing an app as a side project next to a full-time occupation, Ali advises taking a template off the internet, free or a nicer one for a few pounds, and customising it. — 00:03:53
  • ★★★ After a few hours of Ben's paper sketches and a few hours of Ali and Ben working together in Sketch on one computer, copying in template components, they had a reasonable-looking Cut and Paste design. — 00:04:22 · Sketch, Cut and Paste, Ben

00:04:51 — Next episode on prototyping; sign-off

  • ★★ Ali says the next video in the series will show how they prototyped the Cut and Paste app, making its screens link from one to the other. — 00:04:51

In the description and comments

  • ★★ The free component template Ali and Ben used for the Cut and Paste design was the Ionic Framework components for Sketch. — video description · Sketch

Threads in this video

Where the stories that moved here went next

Mentioned

Central: Ben · Cut and Paste · Medical Students Making an App · Sketch

Also: Figma · InVision · Microsoft PowerPoint · Microsoft Word

Only in the description or credits: Ionic Framework

Replies to

Replied to by

← Previous: The Temple in the Sky (Cambodia) - Cambridge Medical Elective #04 · Next → Coffee & Sushi (Cambodia) - Cambridge Medical Elective #05