In today's fast-paced digital world, user-centric and adaptable websites are no longer a luxury – they're a necessity. By embracing UX and responsive design, you'll unlock the potential to elevate your websites, boosting user satisfaction and engagement. This, in turn, leads to higher conversion rates and a stronger online presence for your clients or organization, as well as better collaboration within your team, bridging the gap between designers, developers, and stakeholders. UX Design & Responsive Design for Experienced Web Developers is a three day, engaging hands-on workshop designed to equip you with the latest skills and best practices in User Experience (UX) and Responsive Web Design required to create seamless, user-friendly websites that adapt effortlessly across devices. This course will immerse you in the latest skills, best practices, and hands-on activities, empowering you to create exceptional, accessible websites that excel across devices and captivate users.

starstarstarstarstar

* Actual course outline may vary depending on offering center. Contact your sales representative for more information.

Learning Objectives

Working in a hands-on learning environment led by our expert UX coach, you’ll learn to:
Understand and apply UX principles and user-centered design processes: Participants will learn to identify the needs and preferences of users, create user personas, and apply UX best practices to develop intuitive, user-friendly web experiences.
Design and implement responsive web layouts: Participants will gain the skills to create fluid grid layouts, use flexible images, and apply media queries to design web pages that adapt seamlessly across various devices and screen sizes.
Optimize web performance for responsive designs: Participants will learn techniques to improve website performance, including image optimization, responsive images, and minification and concatenation of assets, ensuring a fast and smooth user experience across devices.
Implement accessible web designs: Participants will understand the importance of accessibility in web design and learn to apply WCAG principles and accessible design patterns to create websites that are usable by a wide range of users, including those with disabilities.
Collaborate effectively with designers, developers, and stakeholders: Participants will gain insights into design collaboration and handoff processes, enhancing their ability to communicate design decisions, provide and receive feedback, and work efficiently with team members and clients.

1

  • INTRODUCTION TO UX AND RESPONSIVE DESIGN: UNDERSTANDING USER EXPERIENCE

  • What is UX?

    Importance of UX in web development

    UX principles and best practices

    User-centered design process

2

  • RESPONSIVE WEB DESIGN BASICS

  • What is Responsive Web Design?

    Importance of Responsive Design in modern web development

    Fluid grid layout, flexible images, and media queries

    Hands-on Activity: Creating a Responsive Layout

    Designing a simple responsive layout using HTML, CSS, and media queries

    Breakdown and explanation of the code

    Testing responsiveness across different devices

3

  • MOBILE-FIRST VS. DESKTOP-FIRST APPROACHES

  • Pros and cons of each approach

    Deciding which approach to use

4

  • DESIGNING FOR DIFFERENT DEVICES AND SCREEN SIZES

  • Common breakpoints and device considerations

    Accessibility and usability across devices

    Typography, color, and other design elements in responsive design

    Hands-on Activity: Designing for Different Devices

    Modifying the previously created responsive layout to optimize for various devices

    Discussion and feedback on designs

5

  • ADVANCED UX AND RESPONSIVE DESIGN TECHNIQUES: UX RESEARCH AND TESTING

  • Importance of UX research

    Usability testing and user feedback

    A/B testing and heatmaps

6

  • NAVIGATION AND INFORMATION ARCHITECTURE

  • Designing effective and user-friendly navigation

    Organizing content and information

    Common navigation patterns in responsive design

    Hands-on Activity: Designing Navigation for Responsive Websites

    Adding navigation elements to the previously created responsive layout

    Testing navigation on different devices and screen sizes

    Discussion and feedback on navigation designs

7

  • RESPONSIVE WEB DESIGN FRAMEWORKS AND TOOLS

  • Overview of popular frameworks (Bootstrap, Foundation, etc.)

    Pros and cons of using frameworks

    Introduction to design tools (Sketch, Figma, Adobe XD)

    Hands-on Activity: Exploring Frameworks and Tools

    Experimenting with a chosen framework or design tool

    Redesigning the responsive layout using the selected framework/tool

    Sharing experiences and discussing the benefits and drawbacks

8

  • UX AND RESPONSIVE DESIGN BEST PRACTICES: DESIGN PATTERNS AND UI COMPONENTS

  • Common design patterns in responsive web design

    Designing reusable UI components

    Consistency and usability in UI components

9

  • PERFORMANCE OPTIMIZATION

  • Importance of performance in responsive design

    Image optimization and responsive images

    Minification and concatenation of assets

    Hands-on Activity: Optimizing Performance (1.5 hours)

    Applying performance optimization techniques to the responsive layout

    Testing the improvements in performance

    Sharing results and discussing best practices

10

  • ACCESSIBILITY IN UX AND RESPONSIVE DESIGN

  • Importance of accessibility in web design

    Accessibility principles (WCAG)

    Accessible design patterns and techniques

    Hands-on Activity: Evaluating and Improving Accessibility Assessing the accessibility of the responsive layout

    Implementing accessibility improvements

    Testing and discussing the results

11

  • DESIGN COLLABORATION AND HANDOFF

  • Collaborating with designers, developers, and stakeholders

    Effective communication and documentation

    Design handoff tools and techniques

    Hands-on Activity: Simulating Design Handoff

    Participants will work in pairs to simulate a design handoff

    Reviewing, discussing, and providing feedback on each other's responsive layouts

    Sharing experiences and lessons learned

Audience

The intended audience for this course is experienced web developers who are new to User Experience (UX) and Responsive Design principles. These professionals typically have a solid understanding of front-end development technologies such as HTML, CSS, and JavaScript but seek to expand their skillset to create more user-centric, adaptable, and accessible web experiences. Roles that would benefit from this course include: Front-end Web Developers Full-stack Developers Web Designers Team Leads and Project Managers Freelance Web Developers

Language

English

Prerequisites

Proficiency in HTML and CSS: Participants should have a strong understanding of HTML and CSS, including the ability to create semantic markup, style web elements, and apply basic styling concepts such as the box model, positioning, and the cascade. Familiarity with JavaScript: Participants should have a basic understanding of JavaScript and its role in web development, including concepts like variables, functions, loops, and events. Although the course will not focus heavily on JavaScript, a foundational knowledge of the language will help participants grasp some of the more advanced UX and responsive design concepts. Experience in Web Development: Participants should have prior experience in developing websites or web applications, as the course builds upon existing web development knowledge and focuses on introducing UX and responsive design principles. This experience may include working on personal, professional, or open-source projects, or having completed a web development course or certification program.

$2,195

Length: 3.0 days (24 hours)

Level:

Not Your Location? Change

Course Schedule:

Schedule select
25
Oct
Wednesday
10:00 AM ET -
6:00 PM ET
Filling Fast
Available
Schedule select
13
Dec
Wednesday
10:00 AM ET -
6:00 PM ET
Filling Fast
Available
Loading...