Turning Ideas into Reality by Nick Floro
Completely unformatted notes below:
Sketching a mock-up
– help tell a story and explain a concept to stakeholders – get fancy, use colors
Buttons, text = squigglyAccordian – touch button that expandsHamburger menu (Designers don’t like this- it implies additional navigation), play button, blind/modal= alert or a warningreq’s- text on top- so be aware of real estate on a mobile device. They wanted multiple choice, drag and drop, and photos. Take a photo of your sketch on your phone
Free app: office lens- allows you to take a picture from the side and squares it off and you can safe it various ways- as pdf.
-templates: phone, tablet, and screen. We work with stakeholder and audience- show the users feedback as early as possible, after a conversation on what they needed or want. You want to share with the users, what you are doing, get buy-in and feedback, start with 20 users, then narrow down to 10. Then when you get to development and launch, everyone is happy.
Brainstorming- sticky notes, we each have a different color, or you can use “post-it, the app, you can take a photo of your post-its and move it around, or organize the post-its. its only $4 and great for online collaboration.
Taking to audience and stakeholders: What are you goals, what is the challenge/problem you are trying to solve? What are the options (timelines- which tools and techniques work with this audience, in order to creat a better experience for the learners)
Come up with a plan!
Present, Feedback, Develop (Agile Process)
3 Key factors when you start to design and prototype:
Audience: computer, iPhone, touch screen?Technology: does your LMS, LRS work with the technologyUser stories; translate what you learned about the audience whit tecnology in mind. Describe how a user would go through the process and what would the user achieve.
Ask Why! DO they want it mobile friendly? DO they Have mobile devices.
Brainstorming session, have just one person taking notes, not everybody.
Sharing what works. Context, and content strategy (what is the audience using? Consider the rotating of the device, how does that affect the usability of where the buttons are. If you rotate and buttons move to top of screen, that is annoying
Keep it Simple. MVP- Minimum Viable Product (software development term) What is the basic functionality that we need to launch the product/course/app. We can add bells and whistles in phase 2 or 3.
Mobile apps:
Adobe Illustrator Draw- sketch on phone or tablet.
Paper by Fifty Three for iOS- Draw on your mobile device – easy for sketching- they sell a pen for about $30.
If you have a Microsoft surface pro or iPad pro. it has a pen to sketch and draw.
Notebook programs Take a pic of screen and sketch it u on iPad, then screen share with your Web Ex
Sketchbook- similar to photoshop as it has layers you can turn on and off. Free or a few bucks for cloud storage and additional features.
Carbo: Handwriting – you can draw, and lasso part of your image and move it around or reposition on the screen. Has filters too
Using mobile devices you can share.
Marvelapp.com– web based prototyping product that uses chrome/firefox. Name project- add some designs. photo of hand sketch, or grab pen tool…add multiple screens. you can add links between the screens. You can add transitions between the links. Touch and hold- Free for up to three projects at any time. and users can share/email. Pretty cool touch navigation.
Wireframing (Low and high fidelity) – translate sketches into real screens. Prototyping screen with boxes and words.
Keynote/power point are great tools.
“this is my question, here are the answers, here is an image on the right”
This is a good way to show stakeholders what happens when there is too much on a screen for mobile device.
Keynote Kung-Fu – library of images and objects to start prototyping faster, buttons, accordions, etc. $12 toolset.
**Best: Keynotopia 12-150. Templates and entire library. Simple, you can edit the objects like button names.
Keynote template for wire framing. includes his buttons, notes, images, etc. (Add link – to hyperlink)
Power Point and Keynote allow for interactivity. Hyperlinking between slides (same as Marvel app) but i can export it as a pdf to the stakeholders so hey can see how they like it. Not necessary to program it these days.
Sketchy & imockups: not the best tool, but good to experiment as an option.
Envision app.com allows you to prototype on the web and share a link so stakeholder can try on their computer- managed environment, a team can collaborate and provide feedback. Great for larger projects with lots of people involved
Proto.io– advanced prototyping tool swipe, inch and zoom, three fingerr touch.
Adobe Acrobat- link tool called add link. add same navigation as in keynote.
Sketch- best app for a mac ever. Keynote/power point/ photoshop and illustrator in one product. Lots of ux designers use this today $99
Craft for Photoshop or Sketch app- a plugin from envision. Good for designing for a platform. Design an ecosystem and ou want to design tiles for courses we might have. Fills in with real data. offers step and repeat… so “make what i just made again”
Adobe XD experience Design, included in cloud environment subscription. Zoomed out sketch board. quick and fast to navigate through different panels.
Start to create content-
Screenshot/screengrab- as you are looking at things to build a library of image.
Understand how to interact with our devices, finger motions, etc. using your fingers makes you feel more connected with the content, rather than using the mouse. Most devices support up to 11 touch points. So how can you use those to creat more interesting content.
User Experience: how does the user feel as they interact with the content. I want them to smile, add some emotion in the course!
Responsive design: Tools like captivate allow us to do this. Uses pixel size depending on device. If videos are not accessible on phones, without wifi, remove the video- so be aware of what happens on each device.
Get Skeleton.com– build standard html page, it will rearrange your content based on orientation of the device- they use get bootstrap.com from Twitter, but also has build in UX, “add alert box, or menu”. It optimizes for different templates, and devices. Can rearrange panels for phone versus desktop.
Parallax- technique where you can tell a story with the user scrolling up and down, like facebook. Look at marketing for product called “Home” Different elements come to life as you scroll, so it keeps the users attention. Apple Retina 5k site is pretty cool. Do research- Apple has some great design- borrow from their text, layout, etc.
Design for Flexibility, how will the user update the content if the course changes: UI/UX: Apple weather app, forecast, etc. look at the Yahoo father app. It just has an image, high, low where you are. (Shows key data) scroll down to “dive deeper”
Swipe left or right- in this case it is cities, but it could be topics or modules.
Resources: Prototypingforlearning.com
mobileappsforlearning.com 12 apps for your phone- to create content, breainstorm and even generate stuff.
Book: Don’t Make me Think: Steve Krug Creating intuitive navigation and information design.
Slideology, Resonate, Presentation Zen, Garr Reynolds
Chrome browser: view, developer, developer tools, it will show you the code in CSS, and you can pick to simulate different devices so you can see how it will appear for spot-checking. You can select your network speed to replicate speeds for various users in different locations.
Browser Stack.com use to spot check courses on all devices, but $40 a month per user.
ABookApart.com Design,, content strategy for mobile, designing for emotion.
Other Tools:
Linea:
Wink: create, concepts, browse, sketching, passing the iPad back and forth and adding photos.
Explaineverything.com: record, records what you do on the app, and has a built in mic. That is pretty damn cool. Draw and record audio and screen. Create several slides. Grab photo from library and edit it. Just for a quick little micro learning video. Share, and can save as MPEG4 for captivate, storyline, etc. You can do fine editing in the audio tool. You can use a web-browser course (an LMS) and highlight stuff. Feedback on a course or website. Draw and record. The classic version is $5 works on phone and iPad.
Reflector App, recording device for a tutorial/training
Ipsum generator- cupcake ipsum.com
It doesn’t work! install Jingproject – screen sharing.
Or Snagit