Rapid Prototyping in the Chrome Browser for UX Designers
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
- Preview00:32
- Preview05:22
- Preview07:56
- 00:56Editing Classes
- 05:42Affecting Repeating Elements
- 01:15Editing HTML
- 09:20Moving Elements
- 02:47Editing CSS of Pseudo States
- 11:09Reusing Components
- 6 questionsQuiz
Instructor
![Drew Koch](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 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