Graphic Design Research

Exploring Deceptive Patterns in Web Design

Overview

For my Advanced Graphic Design course, I designed a website to demonstrate and educate about deceptive design patterns often used to manipulate users online. My goal was to create an engaging, interactive site that highlighted common dark patterns and educated users on how to avoid them.

The Challenge

  • Demonstrating Deceptive Patterns: How to exaggerate common online manipulative patterns like misleading pop-ups, false calls-to-action, and misleading buttons in a way that’s engaging and educational.
  • Interactivity: Making the site interactive enough to grab attention while also delivering a clear message on the ethics of web design.
  • Performance Optimization: Ensuring the website ran smoothly with the added interactivity and complex features.

The Solution: Con-Art

https://github.com/arimlujan/Con-Art

  • Real-World Inspiration: Drew inspiration from real deceptive design patterns listed on resources including deceptive.design and other databases, incorporating actual examples of manipulative patterns into the website’s design to showcase how they affect users.
  • Custom Website Development: Built the website from scratch with HTML, CSS, and JavaScript, using exaggerated examples of dark patterns to create an educational and interactive experience.
  • Interactive Modes: Designed two modes:
    • Dark Mode: Showcases exaggerated deceptive design elements.
    • Light Mode: Offers educational content on how these manipulative elements work and how to avoid them.
  • Coding Assistance: Used AI to assist with the basic structure of the website, but customized the design and functionality extensively to debug and create a uniform experience.

Results & Key Takeaways

  • Engagement: Users could interact with the site and toggle between modes to gain an understanding of how dark patterns operate in real-world sites.
  • Educational Impact: Provided a visual, engaging way to teach users about web design ethics and how to recognize manipulation online.
  • Improved Skills: Strengthened my coding and web development skills, especially in creating interactive elements with JavaScript.

This project was an excellent learning experience and helped me further my skills in web development, particularly in interactive design and creating engaging user experiences.