Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design User Experience Design

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.
Rating: 4.2 out of 54.2 (22 ratings)
426 students
Created by Drew Koch
Last updated 2/2018
English
English [Auto]
30-Day Money-Back Guarantee

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

3 sections • 17 lectures • 1h 18m total length

  • Preview00:32
  • Preview05:22
  • Preview07:56
  • 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
    6 questions

  • Saving your Prototypes
    05:38
  • Saving CSS
    06:41
  • Link Disabler Chrome Extension
    02:40

  • 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

Instructor

Drew Koch
UX Designer @ Udemy
Drew Koch
  • 4.2 Instructor Rating
  • 22 Reviews
  • 426 Students
  • 1 Course

Hey there! 

I'm Drew, a Product Designer with more than 5 years of experience working in tech, and I currently work right here at Udemy! 

In the past, I have also done UX Design and Front End Development at Amazon,com and founded and sold my own food-tech startup. 

I am passionate about the intersection of design and technology, and prototyping is the best way to try out ideas fast and experience them just like your end user. Prototyping ftw!

-Drew

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.