Rapid Prototyping in the Chrome Browser for UX Designers
4.2 (20 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
423 students enrolled

Rapid Prototyping in the Chrome Browser for UX Designers

Learn how to quickly create ux design prototypes using the Chrome Dev Tools and share them with others.
4.2 (20 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
423 students enrolled
Created by Drew Koch
Last updated 2/2018
English
English [Auto]
Current price: $11.99 Original price: $19.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Quickly and easily try out new designs in your Chrome browser
  • Modify existing designs by tweaking HTML and CSS
  • Utilize reusable components in new locations on your site in the blink of an eye
  • Learn how to save your prototypes and revive them later
  • Learn how to share your prototypes with others in your company or for user testing
Requirements
  • Basic knowledge of HTML and CSS
  • A Mac or PC
  • Chrome browser
  • Code editor (like Sublime text 2 or Brackets)
Description

Would you like to create real web prototypes really fast? Are you tired of recreating entire pages in Sketch just to make a few modifications? Would you like to make changes to an existing website with ease? Do you want to learn a new and exciting way of improving your design process? If so, this course is for you!

My name is Drew, and I am a Product Designer with more than 5 years of experience working at startups (currently working at Udemy designing the site you are on right now!). In this course, I will teach you how to quickly and easily create prototypes live in your Chrome browser using the Chrome Dev Tools. This will allow you to test out ideas in the real context that a user will experience them by:

          - Editing text live

          - Editing the styling of elements in real-time

          - Changing the style of multiple elements at once

          - Changing the order of elements on a page

          - Changing the hover state of elements

          - Creating and re-using components from other parts of your site or your style guide

Additionally, I will show you how to save and share your work with others for quick feedback, whether it is with other designers in your company, product managers, VPs, or end users.

Getting to a super quick yet high fidelity prototype will allow you to iterate and get feedback more frequently and easily, and as a result, build a better product overall.

I hope you enjoy the course, and if you have any questions, I am here and willing to help!

***BONUS!*** I will provide you with a chrome extension I built myself to help you avoid a common pitfall of using the chrome dev tools :)

Cheers,

Drew Koch

Product Designer, Udemy


Who this course is for:
  • Product designers / ux designers who want to test out their designs quickly and easily, right in their browser
  • Product managers who want to validate ideas quickly
Course content
Expand all 17 lectures 01:18:46
+ Prototyping in the Browser
9 lectures 44:59
Editing Classes
00:56
Affecting Repeating Elements
05:42
Editing HTML
01:15
Moving Elements
09:20
Editing CSS of Pseudo States
02:47
Reusing Components
11:09

Quiz description

Quiz
6 questions
+ Saving and Sharing your Work
3 lectures 14:59
Saving your Prototypes
05:38
Saving CSS
06:41
Link Disabler Chrome Extension
02:40
+ Working Locally
5 lectures 18:48
Working Locally - Part 1
05:41
Working Locally - Part 2
05:50
Working Locally - Part 3
03:41
Sharing your Local Prototype on AWS S3
03:02
You did it!
00:34