Presentation

Essentials of Adobe XD

Want to learn how to use Adobe XD in your workflow? I will be giving an online training course through UXPA on August 1 and August 8, 2018. This workshop will first introduce you to its design tools, once we have our design in place, we will use its built-in prototyping features to create an interactive demonstration of our design. We will go further by showing how we can share our concepts with teammates, clients or even conduct user tests. Finally, the workshop will teach you how to take your project and export the content to the development team, as well as create a design spec.

Register Now

Price: Students: $70; UXPA International Members: $280; Non-members: $500

Course outline

Session 1 Session 2
  • Welcome and set up check
  • What is XD?
  • Overview of the UI
  • menus
  • tools
  • property panel
  • UI kits
  • Creating Artboards
  • Working with vectors
  • Working with text
  • Working with bitmaps
  • Understanding layers
  • Using symbols
  • Exploring the assets panel
  • Using the repeat grid
  • Working with other programs
  • Using CC libraries
  • Exercise: create a simple five screen design.
  • Prototyping
  • Creating interaction flow
  • Adjusting transitions
  • Previewing the prototype
  • Recording a walkthrough
  • Previewing on Device
  • Sharing a prototype
  • Reviewer comments
  • Manage links
  • Exporting assets
  • Creating a design spec
  • Using Zeplin with Adobe XD
  • Wrap up

Speaking on Adobe XD!

BigDesign_340

I am honored to be speaking on Adobe XD at this year’s Big Design Conference in Addison, Texas in September. With my long history of user experience prototyping, Adobe XD is a welcomed addition to my arsenal of tools. Here is the description of the talk:

Go from idea to prototype faster with Adobe Experience Design CC (Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps. In this session, Chris Griffith will show you how to design and prototype a complete experience using the new Adobe XD app. Learn tips and tricks to immediately be more productive creating a great user experience. He will introduce you to the capabilities of this rapid prototyping tool from its repeat grid to the built-in UI kits. He then will go further and show you how to share your work, gain feedback and even view it on your mobile device.

For more information on the event, visit: http://bigdesignevents.com/

What is the Ionic Framework?

I am giving a presentation at the next San Diego JS Monthly Meeting, May 2 @ 7:30 pm. If you have ever been curious about what Ionic is and how it works, this talk is for you.

What is the Ionic Framework? The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.

In this talk, I will give you an overview of the Ionic Framework, show how to install it, and finally build a quick app and deploy it to both iOS and Android using some of the additional Ionic.io services.

Hope to see you there!

Live Online Training: Building Hybrid Mobile Apps with Ionic, Angular, and Cordova

 

I am pleased to announce I will be giving live online training on Ionic through O’Reilly training. The online sessions will be held on June 5 & 6, 2017 from 7:00 am – 10:00 am PDT.
By the end of this live, online course, you’ll understand:
  • How Ionic, Cordova, and Angular work together to create hybrid mobile apps
  • How to design and program Ionic apps
  • How to publish your applications to the app stores
And you’ll be able to:
  • Generate Ionic applications using the Ionic CLI
  • Use common Ionic UI components
  • Extend your Ionic applications with Ionic Native
  • Preview your applications on your devices
  • Compile your applications to ready them for submission to mobile app stores
Here is the course outline:
The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Introduction to Ionic (20 minutes)

  • Lecture: What’s new in Ionic 2; introduction to the Ionic CLI; Ionic file structure
  • Hands-on exercise: Create an Ionic blank template

Introduction to Angular and TypeScript (30 minutes)

  • Lecture: Introduction to Angular and TypeScript
  • Hands-on exercise: Short quiz

Building your first app (30 minutes)

  • Lecture: Building your first app with Ionic2Do; using Ionic serve to preview your application
  • Hands-on exercise: Compile and run your Ionic2Do app locally in the browser

Break (10 minutes)

Styling your Ionic app (30 minutes)

  • Lecture: How Ionic apps are themed; using Ionic View to quickly preview the app on your device
  • Hands-on exercise: Preview your app on your mobile device (with data stored remotely)

Ionic Native (30 minutes)

  • Lecture: Adding native touches to your application using Cordova plugins via Ionic Native; publishing the application to the app stores
  • Hands-on exercise: Replace the JavaScript dialog with a native dialog

Debugging Ionic applications (20 minutes)

  • Lecture: How to debug your application
  • Hands-on exercise: Use Chrome or Safari to remote debug your application

Wrap-up and Q&A (10 minutes)

DAY 2

Building your second app (30 minutes)

  • Lecture: Building an app with IonicParks; exploring Ionic Tabs; loading data; Ionic Lists
  • Hands-on exercise: Build an application using the local data file and rendering the park list

Ionic navigation (30 minutes)

  • Lecture: How navigation works in an Ionic application; using the Ionic generate command to improve your workflow; designing the park details screen
  • Hands-on exercise: Generate and populate the park details screen of the app

Google Maps integration (30 minutes)

  • Lecture: Adding a map to your application; custom classes
  • Hands-on exercise: Add a live Google map to your application

Break (10 minutes)

Exploring other Ionic components (30 minutes)

  • Lecture: Common Ionic components (slides, popover, date and time, toast, grid, and gestures)
  • Hands-on exercise: Short quiz

Accelerate your application’s development and features (30 minutes)

  • Lecture: The larger elements of Ionic that can accelerate your application’s development and features (exploring Ionic.io, deploy, build, notification, and users)
  • Hands-on exercise: Short quiz

Next steps, wrap-up, and Q&A (20 minutes)

I hope to see you there.
To sign up for the course, visit Safari Online.

Making Things Move!

ocmma-logo

On Tuesday, April 21st, I will be leading a hands on session on animating with CSS for the Orange County Multimedia Association. Although our phones and tablets may not be able to run Adobe Flash-based animations, the mobile web is far from static! This presentation is going to explore the use of CSS-based animations as a way to bring motion back into your web design.

We are going to explore using CSS to bring your web-based projects to life. I am also going to demonstrate some additional solutions that you can explore to help bring the web to life!

Details here: http://www.ocmma.org/

Like a Pro(totyper): Prototyping for Lean UX

sandchi

Like a Pro(totyper): Prototyping for Lean UX

I am pleased to be on a panel discussing one of my favorite topics, prototyping! Here are the details about the event:

Wednesday, October 29, 2014
6:00 PM to 8:30 PM
The Creative Group
4225 Executive Square, Suite 300, San Diego, CA

Happy October, UXers! We hope you’re keeping your cool during summer’s last stand, and maybe vacationing someplace where the leaves do that thing that leaves are supposed to do this time of year.

This month, we’re proud to offer up a panel of professional prototypers. These designers do prototyping in their daily work, either as their primary role or a fundamental part of their process. They often work within lean UX teams to design and test in collaboration with more traditional UXers. You’ll get to pick their brains, learn more about prototyping as a methodology and deliverable, and get advice on how to incorporate the practice into your own work.

This idea came from our Intuit lab tour event — which hey, by the way, thanks for attending! — where we heard a lot of feedback from folks who wanted to know more about the UX prototyper role that Intuit hires for. You’re smart cookies to be curious: prototyping is a hot topic these days, steadily gaining traction in design circles, and sometimes even replacing wireframes and mockups as a main deliverable. And since caring for our community is the name of our game, we wanted to throw together a little something to help you learn more about it.

We rounded up an awesome group of designers to make this possible, including:
Hooman Anvar
Principal, Hooman Anvar User Experience Design and Strategy

Adam Armstead
Senior Interaction Designer, Intuit, former Design Manager at TakeLessons

Elina Kim
Experience Design Prototyper, Intuit

Heather Daggett
Senior Experience Design Prototyper, Intuit

Chris Griffith
Staff Engineer, Qualcomm UX

And our shiny new president, Paul Hong, as moderator.

Beverages and light appetizers will be served.

RSVP now to ensure you get to attend!

Park in the 4225 parking structure just across Executive Square from the 4225 building. Your parking will be validated.