UX Design for Web Developers

Cut through complexities of web centered designs, build interactive, mobile friendly sites with UX design best practices
3.9 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
257 students enrolled
Take This Course
  • Lectures 38
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

User experience (UX) design is a theoretical understanding of how users interact with websites. The major challenge developers building a company website face is finding the right balance that fulfils the objectives of the company as well as the needs of their users. A poor user experience leads to losing out on customers and in turn the company losing out on money.

User experience design underpins all major decisions taken by web designers when laying out web pages. It is governed by fundamental principles and practical approaches including wireframing, bootstrapping, and even pen and paper designs that gives an indication about the user experience that a successful site needs to offer to its users.

UX Design for Web Developers is a breakthrough guide that reveals the fundamental rules that govern how most people read and work with websites, through the process of redesigning a mobile friendly website.

We’ll start off our journey by understanding why we need UX, how UX came to be, and where it fits in the business and web development. We’ll explore the fundamental skills for structuring and defining a website along with content strategy. We’ll take a look at a variety of media touch points that have potential to engage and influence your audience’s experience.

With an overall review of some of the best practices of UX design we’ll start building our application with screens that allow us to think about the interactions. We’ll touch down on the important concept of setting up wireframes and fix the loophole of static application by building a simple clickable, prototype using the Invision tool. We’ll complete our journey with a finished website plan ready for testing and feedback.

By the end of this course, you will gain the ability to think like a UX designer, through engaging human centered design practices, UX methodologies, useful UX tricks, as well as skills required for interactive web designing.

About The Author

Chris R Becker is an imaginative and creative interaction designer / UX designer / Design researcher and educator. A conceptual thinker, he has the ability to design across media platforms for solutions within experience design, interaction, information architecture, business and brand strategy, web and app design, advertising, systems design, and print. He is organized and passionate for following design problems from concept to finished product. He is also well versed in prototyping, design research, human-centered design methodologies, and user testing for taking ideas from the drawing board to the real world. He is competent in pre-press and production and is not afraid to get his hands dirty, with a strong communication background through positions in versed industries.

Chris teaches at the Loyola Marymount University, UCLA – Extension & Art Center College of Design. His clients include Vitasigns, Apple, Beats by Dre, Nissan, VW, STEAM Carnival, Theranos, CB2, Men's Wearhouse, Hyundai, Toyota, and more.

What are the requirements?

  • Familiarity with HTML and CSS is all that is needed to kick-off this amazing journey!

What am I going to get from this course?

  • Understand the important concepts of human psychology, HCI, design and product thinking that make up UX
  • Build a website structure keeping in check user flows and sitemaps
  • Exploit wireframes and build a solid one for responsive web design
  • Get to grips with UX best practices and incorporate them in your web design
  • Apply heuristics and usability to create a successful web plan
  • Learn how to build a clickable wireframe prototype to enhance responsiveness
  • Apply user testing and design iteration to ensure smooth web experience

Who is the target audience?

  • This video course is a complete package for web developers who are interested in gaining a foundation, or growing an understanding of user experience for the web.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: What Makes a Great User Experience?

A quick overview of UX, what it is, and who is involved in it.


Technology is changing our world and UX practices are a way through the changes.


Web design is a process that starts with information architecture and ends with a finished website.

Section 2: Applying Human-centered Design

Build your observation skills and learn how to improve empathy for your users.


The definition of UX problems and why empathy matters.

Watching a user use a website.
Reviewing your defined problem.
Section 3: Enhancing Site Navigation and Laying Out Our Site

Understanding the definition of UX problems and why structure helps solve problems.


Building a sitemap.


Reviewing your sitemap.


What design patterns are they?


What SERPS is?


Understanding the importance of a landing page.

Section 4: Wireframing 1 – Using Responsive Web Design

Why mobile first matters.


What this means.


Why you should use a wireframe grid and its components.

Section 5: Designing the Home Page

Why wireframing home page is important?

Creating content that connects people and making it work for them. Formatting a home page using mobile through desktop

Formatting a home page using mobile through desktop.


Why we need forms?

Section 6: Using Media

Understanding how media should be considered and used during web design.


Understanding how a content media connects with people.


Introducing PNGs, web icons, webGL, and vectors.

Section 7: Best Practices and Usability

Go through the best practices in place for UX design.

Why mobile first best practices matter.

Reviewing a list of best practices.


Defining usability.


Reviewing the heuristic scale in your home page.

Section 8: Wireframing 2.0

Defining your system pages.


Expanding mobile screens onto larger tablets.


Expanding desktop screens.

Section 9: Prototyping – Clickable Wireframes

Connect your wireframes into a clickable prototype.


Improve your wireframe prototype for a clickable prototype.


Exporting website pages as .png to organize folders.

Section 10: The LEAN UX Prototype User Testing and Iteration Process

Learn from prototyping and test ideas quickly.


Testing clicks through a prototype and defining test metrics.


Gathering feedback and making changes to your wireframes.


Reviewing the process steps.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course