O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

UX Design for Web Developers

Video Description

Cut through the complexities of web centered designs and build interactive, mobile friendly websites using UX design best practices

About This Video

  • Analyze human-centered design methodology and implement it to construct powerful, user-friendly websites

  • Explore aspects such as empathy mapping, problem definition, and intervention planning to ensure efficient usability

  • Create powerful sitemaps using wireframes and website planning documentation

  • In Detail

    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.

    Table of Contents

    1. Chapter 1 : What Makes a Great User Experience?
      1. The Course Overview 00:02:09
      2. UX Design Fundamentals 00:07:41
      3. Fundamentals of Building a Website 00:12:46
    2. Chapter 2 : Applying Human-centered Design
      1. Essentials of Human-centered Design 00:03:12
      2. Empathy Mapping 00:07:48
      3. Problem Definition- User Flows, Decision Tress, and Screen Flows 00:14:57
      4. Intervention Planning 00:11:19
    3. Chapter 3 : Enhancing Site Navigation and Laying Out Our Site
      1. Understanding the Need for Structure 00:02:24
      2. Structure and Information Architecture 00:05:34
      3. The Essential Elements 00:04:47
      4. Design Patterns – Don't Reinvent the Wheel 00:04:42
      5. SERPS as Home Pages and Location-free Browsing 00:05:37
      6. Landing Pages, Templates, and Page Clustering 00:06:48
    4. Chpater 4 : Wireframing 1 – Using Responsive Web Design
      1. Responsive Web Design 00:03:07
      2. Wireframing 00:04:53
      3. Building Your Setup 00:03:19
    5. Chapter 5 : Designing the Home Page
      1. Home Page Wireframes 00:02:23
      2. Envisioning an Information Ecosystem 00:06:06
      3. Formatting Pages and Content Chunking 00:04:25
      4. Creating Interactions 00:06:40
    6. Chapter 6 : Using Media
      1. Media Types 00:04:58
      2. Media Annoyances 00:05:54
      3. Using Graphics 00:05:18
    7. Chapter 7 : Best Practices and Usability
      1. Discuss Best Practices in UX Design 00:05:45
      2. Mobile Best Practices 00:04:41
      3. Desktop Best Practices 00:03:54
      4. Usability 00:06:12
      5. Applying Usability to the Home Page 00:04:26
    8. Chapter 8 : Wireframing 2.0
      1. Wireframe Your Mobile Screen 00:08:49
      2. Wireframe Your Tablet Screen 00:06:45
      3. Wireframe Your Desktop Screen 00:07:24
    9. Chapter 9 : Prototyping – Clickable Wireframes
      1. Wireframe Setup for Prototyping 00:04:23
      2. Flushing Out Your Wireframes 00:04:31
      3. Connecting and Building Your Clickable Prototype 00:10:04
    10. Chapter 10 : The LEAN UX Prototype User Testing and Iteration Process
      1. LEAN User Testing 00:05:11
      2. Test Your Prototype 00:03:44
      3. Validate and Iterate Your Prototype 00:06:30
      4. UX Course Review 00:05:13