We may earn an affiliate commission when you visit our partners.
Course image
Joe Natoli

The principles, practices and real-world techniques I'm going to show you here are the same ones that have informed graphic design for hundreds of years. And while that may sound like blasphemy to some of you, I guarantee you'll see why and how they apply equally to the world of digital design — especially for mobile devices and their small screens. 

Read more

The principles, practices and real-world techniques I'm going to show you here are the same ones that have informed graphic design for hundreds of years. And while that may sound like blasphemy to some of you, I guarantee you'll see why and how they apply equally to the world of digital design — especially for mobile devices and their small screens. 

I'm going to give you 50 lessons across 5 hours, packed with timeless, ironclad, unchanging rules for good UI design that you can apply to anything and everything you ever work on. You’ll learn how to create and apply hierarchy, color, contrast, typography, and gestalt principles to design appropriate visual cues for your users — and that's just for starters.

You'll learn how to make it easier for people to interact with what they see on the screen – whether they know what to tap, swipe or click, and whether what happens meets their expectations and moves them closer to their goals. You'll learn how to create and apply hierarchy, color, contrast, typography and gestalt principles to design appropriate visual cues so people know where and how to take action.

I'll show you how to make good visual decisions for even the most challenging applications, from simplifying complex visual information to designing with data. My goal with this course is to give you everything you need to know to make great UI design decisions, no matter what the content, context or product may be. 

Trends will come and go, and it won't matter: your UI will still be useful, usable, appropriate and relevant for its users. From this point forward, you'll be equipped to make strategic, impactful User Interface designs that communicate, guide, encourage, motivate and educate. Anything else is decoration, and decoration has a very short shelf life.

When it comes to User Interface (UI) design, your job — whether you're a designer, developer, UXer or a mix of all those things — is to make sure that no aspect of someone’s onscreen interaction happens without explicit intent. The UI design choices we make have to reflect the user’s motivations, expectations, environment and possible actions.

All of those things manifest themselves in the User Interface — so what people see on the screen is usually the sum of their understanding about what this is and how it works.

So what we show them has to do a hell of a job communicating what’s there for them, how it’s organized, how they get to it and what they can do with it once they do.

By the time you finish Design Rules, you'll be able to do much more than create a more beautiful User Interface. Instead, you'll be able to design a UI that truly works for the people who use it. One that it allows them to easily figure out where to start and how to get what they need — quickly, efficiently and intuitively. 

Of course, it'll also just happen to be beautiful ;-)

Enroll now

What's inside

Learning objectives

  • Learn to create useful, usable and visually compelling ui design for any kind of app, site or system.
  • Learn how to properly balance form and function
  • Learn the critical rules for designing on small screens and mobile devices
  • Learn how to effectively organize and economize visual information
  • Learn how to apply the principle of balance to create visual order
  • Learn how to apply the principle of rhythm to establish and reinforce comprehension
  • Learn how to apply the principle of harmony to shape disparate ui elements into a unified, consistent experience
  • Learn how to apply the principle of dominance to direct user focus and enhance ux
  • Learn how to apply the principle of alignment to lead the user's eye and speed task completion
  • Learn how to apply the principle of proximity to signal relationships between screen elements and decrease users' cognitive effort
  • Learn to communicate with color, typography and imagery in the ui
  • Learn how color communicates and influences interaction
  • Learn how to choose the right colors for any ui design
  • Learn how to apply contrast properly to guide users and call attention to critical ui elements and interactions
  • Learn how to determine whether or not color and contrast are appropriate
  • Learn and apply the fundamentals of typography as a design element
  • Learn how to choose the right fonts and design appropriately with them
  • Learn and apply 7 crucial rules for great typographic design
  • Learn and apply 5 rules for choosing the right imagery
  • Learn and apply a core set of dos and don'ts when designing with images
  • Learn how to create and simplify visual cues that direct user focus and interaction
  • Learn the 3 kinds of data visualizations used in ui design and when they're appropriate
  • Learn how the context of the data presented determines its visual form
  • Learn and apply 6 rules for great data design
  • Learn how to simplify visual information to clarify meaning and improve ux
  • Learn how to visually separate content from controls to make interactions easier for users to understand and act on
  • Walk away with a set of "18 ui design mantras" that you can apply to anything and everything you ever design!
  • Show more
  • Show less

Syllabus

You'll learn to stop relying on other people's UI work, know how to properly balance form and function and see why less truly is more when it comes to big design challenges on small screens.
Read more

A fundamental understanding of what the word design really means — and why most people misinterpret it — is where you need to start.

The path to great UI design starts when you stop looking at other people's work.

Learn why "form follows function" as a UI design principle is flawed — and false.

Achieving balance between form and function in the UI means informed decision-making — not order-taking.

How to avoid the pitfall of assuming functional considerations should influence visual form.

Understanding what forces really impact visual form is the key to better UI design decisions.

Understand the very big challenges posed by small screens — and how to solve them through UI design.

Five timeless rules for designing anything well on small, mobile device screens.

Organizing Visual Information

Learn how the principle of Balance creates visual order — and why doing so is critically important.

Case studies showing how changes in visual balance significantly improve poorly designed interfaces.

Learn how rhythm is established in the UI — and why, when intentional, it significantly improves UX.

Learn how the principle of Harmony acts as the glue that holds individual UI elements together.

Learn how harmony establishes purposeful, intentional visual flow in the UI.

A case study detailing how changes in visual harmony makes a form faster and easier to scan and complete.

Learn why and how the principle of Dominance is critical to proper UI form and functionality.

Understand why using the principle of dominance properly decreases a user's mental effort, resulting in positive UX.

Learn multiple ways to establish dominance, beyond the most obvious method (size).

Learn to use alignment intentionally, to guide users through every part of the screen.

Case studies showing how changes in alignment make HUGE differences in the quality of UI design and UX.

Learn how proximity signals (or confuses) relationships between content, data and interactive UI elements.

Use the principle of proximity to speed up recognition and understanding of visual information.

Case studies showcase the principle of proximity to design effectively with negative space — and make browsing easier and faster.

Using Color and Contrast Appropriately

Learn why color can be a powerful emotional tool — and why it should never be an afterthought or an arbitrary choice.

Understand the key role color plays in users' ability to identify (and act on) opportunities to interact with the UI.

Color doesn't have to be difficult. Honest ;-)

Learn the common associations most of us have with color — and when they're the right place to start.

Emotional impact plays a big role in determining color effectiveness and appropriateness.

Everything around you is a potential source for appropriate color choices — the trick is knowing where to look.

Color choice can start with branding — but there's more to that than you think.

Why contrast trumps all else when it comes to visual design — and how to use that to your advantage.

Contrast is a powerful tool for guiding and enhancing usability and overall user experience.

The three critical functions of contrast you must apply properly when designing.

How do you know when color and contrast is appropriate? The method is simpler than you think.

Designing with Typography and Imagery

A crash course in proper typographic design — which is what separates great designers from merely good ones.

The right typeface has massive impact in how visual messaging is seen, perceived and interpreted in the UI.

Choosing the right font means understanding and recognizing its relationship to pattern recognition.

Learn these critical keys to speeding up scanning, encouraging reading and increasing comprehension.

Seven timeless rules to ensure you design appropriately — and effectively — with typography.

How to choose the right imagery, for the right reasons, for the right situations.

Hard and fast rules for using images of any kind in sites, apps and systems.

Creating and Simplifying Visual Cues

While icons can seem like easy solutions, they don't always work as intended — and aren't always appropriate.

Knowing these four types of icons is a big step in knowing when (and how) to use them in the UI.

Five rules you can use to tell when (and when not) to use an icon, along with how to judge effectiveness, usefulness and appropriateness.

How to navigate the many UI challenges that come with data-intensive websites and systems.

Five ironclad rules to follow when designing data displays of any kind.

Specific recipes for clearing clutter and simplifying data in the UI.

Part 02 of simplifying visual information.

How to establish clear visual differences (and cues) between things the user needs to see, and things they need to be able to do.

Part 2 of separating content from controls.

Things to Remember

A quick recap of the 19 UI Design Mantras you'll want to keep at your side during every project.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Examines the principles of graphic design from a historical perspective and demonstrates how these principles influence design for digital platforms
Designed by instructor Joe Natoli, who is recognized for expertise in UI/UX design
Assists students in understanding the tension between form and function and optimizing UI designs for small screens
Provides a comprehensive examination of visual information organization, including balance, rhythm, harmony, dominance, alignment, and proximity
Includes hands-on exercises that allow students to apply principles of color, contrast, typography, and imagery in UI design
Explores the use of icons and data visualization in UI design

Save this course

Save DESIGN RULES: Principles + Practices for Great UI Design to your list so you can find it easily later:
Save

Reviews summary

Helpful, practical ui design course

Learners say this course on UI design is very helpful in learning the principles and practices for great UI design. Students would like to see the inclusion of practical tests and exercises to help solidify and internalize their learning based on the material presented.
This course is said to be practical and features useful information.
"Very helpful."
Learners find this course very helpful.
"Sehr hilfreich."
Learners want to see more exercises and practical tests added to the course.
"Some practical tests and exercises though would help me to consolidate and internalize what I have learned."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in DESIGN RULES: Principles + Practices for Great UI Design with these activities:
Review the basics of typography
Ensure a solid understanding of the fundamentals of typography, which is crucial for creating visually appealing and effective UI designs.
Browse courses on Typography
Show steps
  • Review the different types of fonts.
  • Learn about font anatomy and terminology.
Review the principles of color theory
Refresh your knowledge of color theory to enhance your ability to create visually appealing and effective UI designs.
Browse courses on Color Theory
Show steps
  • Review the color wheel and its components.
  • Learn about color harmonies and how to use them.
Read Atomic Design
Provide a solid foundation for understanding the principles and practices of UI design.
View Atomic Design on Amazon
Show steps
  • Read the book in its entirety.
  • Take notes on the key concepts and principles.
  • Apply the principles to a personal project.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Redesign a mobile app using Gestalt principles
Develop a strong understanding of Gestalt principles and how to apply them to improve the visual appeal and usability of UI designs.
Browse courses on Gestalt Principles
Show steps
  • Identify an existing mobile app.
  • Analyze the app's current design.
  • Identify areas where Gestalt principles can be applied.
  • Redesign the app using Gestalt principles.
Develop a UI design portfolio
Create a visually appealing and professional portfolio to showcase your UI design skills and attract potential employers.
Browse courses on UI Design
Show steps
  • Gather together your best UI design work.
  • Create a website or online portfolio to showcase your work.
  • Write case studies or descriptions for each project.
Design a UI for a smartphone app
Gain hands-on experience designing a UI for a real-world project.
Browse courses on UI Design
Show steps
  • Define the scope and goals of the app.
  • Create wireframes and mockups of the app's interface.
  • Develop the app's UI using a design tool.
Design a mobile app for a local business
Gain real-world experience designing a UI for a local business, providing an opportunity to apply your skills and knowledge to a practical project.
Browse courses on UI Design
Show steps
  • Research the local business and its target audience.
  • Develop a design brief and style guide for the app.
  • Create wireframes and mockups for the app's interface.
  • Develop the app's UI using a design tool.

Career center

Learners who complete DESIGN RULES: Principles + Practices for Great UI Design will develop knowledge and skills that may be useful to these careers:
UX Designer
UX Designers are responsible for the user experience of websites and applications. This course can help you learn the principles of UX design, such as user research, prototyping, and testing. You'll also learn how to create UIs that are easy to use and navigate.
UI Designer
UI Designers are responsible for creating the visual interface of websites and applications. This course can help you learn the principles of UI design, such as balance, contrast, and hierarchy. You'll also learn how to use color, typography, and imagery to create effective and engaging UIs.
Front-End Developer
Front-End Developers are responsible for the code that makes websites and applications look and function properly. This course can help you learn the principles of front-end development, such as HTML, CSS, and JavaScript. You'll also learn how to use tools like Git and npm to manage your code.
Product Designer
Product Designers are responsible for the overall design and development of products. This course can help you learn the principles of product design, such as user research, prototyping, and testing. You'll also learn how to create products that are both useful and desirable.
Web Developer
Web Developers are responsible for the development and maintenance of websites. This course can help you learn the principles of web development, such as HTML, CSS, and JavaScript. You'll also learn how to use tools like Git and npm to manage your code.
Graphic designer
Graphic Designers are responsible for creating visual content, such as logos, brochures, and websites. This course can help you learn the principles of graphic design, such as composition, color theory, and typography. You'll also learn how to use tools like Adobe Photoshop and Illustrator to create your designs.
Content Writer
Content Writers are responsible for creating written content, such as articles, blog posts, and website copy. This course can help you learn the principles of content writing, such as storytelling, grammar, and SEO. You'll also learn how to use tools like WordPress and Google Docs to create your content.
Marketing Manager
Marketing Managers are responsible for planning and executing marketing campaigns. This course can help you learn the principles of marketing, such as market research, advertising, and public relations. You'll also learn how to use tools like Google Analytics to track your results.
Art Director
Art Directors are responsible for the visual direction of products and campaigns. This course can help you learn the principles of art direction, such as composition, color theory, and typography. You'll also learn how to use tools like Adobe Photoshop and Illustrator to create your designs.
Sales Manager
Sales Managers are responsible for the sales and marketing of products and services. This course can help you learn the principles of sales management, such as lead generation, customer relationship management, and closing deals. You'll also learn how to use tools like Salesforce and LinkedIn to manage your sales pipeline.
Product Manager
Product Managers are responsible for the development and management of products. This course can help you learn the principles of product management, such as user research, prototyping, and testing. You'll also learn how to create products that are both useful and desirable.
Business Analyst
Business Analysts are responsible for analyzing the needs of businesses and developing solutions to improve their operations. This course can help you learn the principles of business analysis, such as data analysis, process improvement, and project management. You'll also learn how to use tools like Microsoft Excel and Power BI to analyze data.
Project Manager
Project Managers are responsible for planning, executing, and closing projects. This course can help you learn the principles of project management, such as project planning, resource management, and risk management. You'll also learn how to use tools like Microsoft Project and Asana to manage your projects.
Data Analyst
Data Analysts are responsible for collecting, analyzing, and interpreting data. This course can help you learn the principles of data analysis, such as data mining, data visualization, and statistical modeling. You'll also learn how to use tools like Python and R to analyze data.
Software Engineer
Software Engineers are responsible for the development and maintenance of software applications. This course can help you learn the principles of software engineering, such as software design, coding, and testing. You'll also learn how to use tools like Git and npm to manage your code.

Reading list

We've selected 14 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in DESIGN RULES: Principles + Practices for Great UI Design.
Classic in the field of design and provides a comprehensive overview of the principles of good design. It is particularly useful for understanding the cognitive and psychological factors that influence how people interact with products and systems.
Practical guide to web usability and provides clear and concise advice on how to design websites and apps that are easy to use. It is particularly useful for understanding the importance of user-centered design and how to avoid common usability pitfalls.
Provides a comprehensive overview of the user experience design process and covers topics such as information architecture, interaction design, and visual design. It is particularly useful for understanding the different roles and responsibilities of UX designers and how to create user-centered products and services.
Provides a set of 100 principles that can be applied to any design discipline, including UI design. It is particularly useful for understanding the fundamental principles that underlie good design and how to apply them to your own work.
Provides a comprehensive overview of the human-computer interaction field and covers topics such as user research, interaction design, and interface design. It is particularly useful for understanding the cognitive and psychological factors that influence how people interact with computers and how to design interfaces that are both使いやすいand efficient.
Provides a practical guide to designing human-centered products and services. It is particularly useful for understanding the importance of empathy and user research in design and how to create products and services that are both useful and enjoyable to use.
Provides a catalog of reusable design patterns that can be used to solve common software design problems. It is particularly useful for understanding the principles of object-oriented design and how to create software that is both flexible and extensible.
Provides a fun and engaging introduction to design patterns. It is particularly useful for understanding the concepts of object-oriented design and how to apply them to your own work.
Provides a comprehensive guide to software development. It is particularly useful for understanding the principles of software engineering and how to develop high-quality software.
Provides a classic perspective on software development and the challenges of managing large software projects. It is particularly useful for understanding the importance of planning, communication, and teamwork in software development.
Provides a practical guide to managing software development teams. It is particularly useful for understanding the importance of team dynamics and how to create a productive and collaborative work environment.
Classic in the field of computer science and provides a comprehensive overview of the fundamental principles of computer programming. It is particularly useful for understanding the theoretical foundations of computer science and how to design and implement efficient algorithms.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to DESIGN RULES: Principles + Practices for Great UI Design.
UX & Web Design Master Course: Strategy, Design,...
Most relevant
UX Design & User Experience Design Course - Theory Only
Most relevant
User Experience Design - Learn UI UX App Design with Figma
Most relevant
Learn UI Design
Most relevant
UI UX Design & Prototyping using Adobe XD
Most relevant
Visual Elements of User Interface Design
Most relevant
Learn UI/UX Design in a weekend
Most relevant
User Experience Design Essentials - Adobe XD UI UX Design
Most relevant
UX Design Fundamentals
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser