Duration
3 Days
18 CPD hours
This course is intended for
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
Overview
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.
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. Throughout
the program you?ll explore the fundamentals of UX and responsive design,
including user-centered design processes, mobile-first and desktop-first
approaches, and design techniques for various devices and screen sizes. You'll
gain practical experience creating responsive layouts, optimizing performance,
and implementing accessible web designs, all while leveraging popular frameworks
and design tools. You'll also gain valuable insights into performance
optimization, accessibility, and collaboration strategies, ensuring you have the
complete toolkit to excel in your field.By the end of this workshop, you?ll have
gained a solid understanding of UX and responsive design principles, as well as
hands-on experience in applying these concepts to real-world projects. You?ll be
able to create more user-friendly, responsive, and accessible websites, and
collaborate more effectively with your design and development teams.
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
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
MOBILE-FIRST VS. DESKTOP-FIRST APPROACHES
* Pros and cons of each approach
* Deciding which approach to use
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
ADVANCED UX AND RESPONSIVE DESIGN TECHNIQUES: UX RESEARCH AND TESTING
* Importance of UX research
* Usability testing and user feedback
* A/B testing and heatmaps
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
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
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
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
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
*
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