This course teaches User Experience (UX) and User Interface (UI) rules for software. It helps students learn to find and fix UX/UI problems and use good practices in their software. It's designed for software engineers who focus on the front-end, and anyone who wants to improve their software's UX/UI.

Overview of the course and objectives

Brief Introduction to NextJS, TailwindCSS, and Shadcn

The Importance of Good UX/UI

Setting up the project

This module introduces the course objectives, provides a brief overview of NextJS, TailwindCSS, and Shadcn, and discusses the importance of good UX/UI. You'll also set up your project environment.

Intro & Getting Started

Identifying Common UX/UI Flaws

Enhancing Visual Hierarchy

The importance of Typography

Learn how to apply UX/UI principles to improve the flow and hierarchy of your software. Explore techniques for enhancing navigation and creating effective visual hierarchies.

Applying UX/UI Principles - Flow & Hierarchy

Identifying Common UX/UI Flaws in Cluttered Interfaces

Decluttering the Interface - Jakob's Law and Miller's Law

Decluttering the Interface - Law of Uniform Connectedness

User Feedback - Doherty Threshold

Discover how to apply UX/UI laws and principles to improve and declutter interfaces. Learn about creating more aesthetically pleasing experiences and providing effective user feedback.

Applying UX/UI Principles - Decluttering & User Feedback

Identifying Common Accessibility Issues

Making Websites Accessible

The Importance of Color in Accessibility

Explore the importance of accessibility in software development. Learn about web accessibility principles, testing methods, and how to choose accessible color palettes.

Applying UX/UI Principles - Accessibility Considerations

Overview of the Transformed App

Review and Next Steps

Review the transformed app, address common questions about UX/UI design, and explore next steps for continuing your UX/UI journey. Wrap up the course with key takeaways and encouragement for future projects.

Final Touches and Review

Learn about the principles of conversion-centered design and how they can help you create more effective web pages that drive conversions.

Principles of Conversion-Centered Design (Part 1)

Principles of Conversion-Centered Design (Part 2)

Principles of Conversion-Centered Design (Part 3)

This module covers principles of conversion-centered design. You'll learn about creating focus, building structure, and designing for trust to optimize your forms and pages for better conversion rates.

Advanced Package - Conversion-Centered Design

Learn how to leverage UX/UI techniques to enhance your website's design and improve conversion rates.

Using UX/UI Techniques to Improve Conversion Rates

Learn how to create multi-page forms to improve user experience and increase form completion rates.

Multi-Page Forms

Learn about the importance of speed in UX and conversions, and how you can optimize your website for better performance.

Page Speed

This module explores advanced UX/UI techniques to improve conversion rates. You'll learn about the Von Restorff Effect, multi-page forms, and the importance of page speed in enhancing user experience and conversions.

Advanced Package - UX/UI Techniques to Improve Conversion Rates

Learn how to set up Posthog for A/B testing and analytics in your web application.

A/B Testing and Analytics: Setting up Posthog

Learn about the key functionalities and features of Posthog, a powerful analytics platform for tracking user behavior and improving conversions.

Posthog Functionalities Overview

Learn how to create an A/B test using Posthog and analyze the results to improve your web application's performance.

Creating Your A/B Test and Learning from Results

This module introduces A/B testing and analytics using Posthog. You'll learn how to set up Posthog, create A/B tests, define meaningful metrics, and interpret results to make informed design decisions.

Advanced Package - A/B Testing and Analytics with Posthog

Welcome to "UX/UI Concepts For Engineers In A Hurry"! This isn't your average, dry online course. 
It's more like sitting down with a fellow developer (that's me, Lucas!) to chat about making software that users will love.

We've packed **5 modules** with **17 lessons**, giving you nearly **2 hours** of UX/UI goodness. It's a whirlwind tour through 
the world of user-friendly design, perfect for busy engineers or anyone curious about UX/UI.

Here's a sneak peek at our adventure:

After joining me on this UX/UI quest, developers are creating interfaces that users actually enjoy using. Here's what they have to say about their journey:

What Our Fellow Developers Are Saying

tailwindcss

shadcn-ui

Learn how to make important elements stand out and guide users through your interface.

Creating a Visual Hierarchy That Makes Sense

Discover how to create intuitive navigation that helps users find what they need without getting lost.

Building Navigation That Doesn't Confuse Users

Join me in exploring UX/UI principles and bringing them to life with modern web tech. Let's make the digital world a friendlier place!

17 Video Lessons on UX/UI (No Boring Lectures, I promise!)

Hands-on Projects with NextJS, TailwindCSS, and Shadcn

Real-World Examples and Code You Can Actually Use

As I mentioned before, in this course we're going to take a small deep-dive into UX/UI concepts that are crucial for creating software that users love!

For me, you're probably one of:

- A front-end developer looking to level up
- A software engineer who struggles with design
- A solopreneur who wants to make their software more user-friendly

Our lessons are bite-sized and focused, perfect for you to give a small commitment, and leave with a huge vision change. We'll talk about real-world examples and explore one of the most common case scenarios: the Landing Page.

Besides all that gain in terms of knowledge, you'll also improve in your cross-team communication, as we'll talk about how to bridge the gap between designers and engineers, making the whole process smoother and more enjoyable for everyone involved.

See you there ;)

Join me on a journey through the world of UX/UI design, where we'll explore essential concepts and bring them to life with modern web tech!

Hello there, dear reader! I'm Lucas, a full-stack and front-end focused engineer from Brazil with a lot of passion for UX/UI, Writing and JavaScript. In this course, we'll explore essential UX/UI concepts that every software engineer should know, whether you're a front-end focused as me or just a curious learner. We'll dive into practical ways to spot design issues early and enhance communication between designers and engineers, where, the focus here is going to be to make our software not just functional, but user-friendly and enjoyable too!

UI/UX Foundations for Frontend Engineers

A responsive, user-friendly interface that converts like hell

A knowledge base of UX/UI principles that will make you stand out

An impressive collection of libraries and tools to make your life easier

How to spot common UX/UI hiccups (and fix them!)

Why good UX/UI design matters (and how it makes users happy)

Awesome tooling with NextJS, TailwindCSS, and Shadcn

The ins and outs of various UX/UI principles

Real-world problems and cases that good UX/UI can solve and has solved

Simple tricks to create interfaces users will love

The Importance of Speed in UX and Conversions

Page speed is a critical factor in user experience and conversion rates. Faster loading times lead to:

---
title: Page Speed
description: Learn about the importance of speed in UX and conversions, and how you can optimize your website for better performance.
code: https://gitlab.com/fullstackio/books/newline-course-apps/reigniting-your-web-skills-with-nextjs-tailwind-css-and-shadcn-app/-/tree/main/Course%20App/module_07/lesson_03?ref_type=heads
---