Designing a Website in the Age of AI: My Journey with ChatGPT

4 min readJul 12, 2024

In an era where artificial intelligence is becoming an integral part of our lives, I decided to embark on an adventure into the wild world of UX design, leveraging the power of AI. As a UX designer, the thought of creating a website without writing a single line of code or using a traditional website builder seemed like a thrilling challenge. This post chronicles my journey of designing and launching the Brady UX website, entirely through conversations with ChatGPT.

The Vision

The idea was simple yet ambitious: create a leading UX design agency website that exemplifies our core values of simplicity, efficiency, and empathy. Brady UX aims to deliver exceptional design solutions, and I wanted our website to reflect that commitment.

The Process

Setting the Foundation

The journey began with laying down the basic structure of the HTML document. I needed a clean, responsive design with elements that would dynamically change based on user interactions, such as light and dark mode toggles. Here’s how it started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brady UX - Leading UX Design Agency</title>
    <meta name="description" content="Brady UX is a leading UX design agency dedicated to improving user experiences with simplicity, efficiency, and empathy. Contact us for exceptional design solutions.">
    <meta name="keywords" content="UX design, user experience, UI design, web design, app design, Brady UX">
    <meta name="author" content="Brady UX">
    <link rel="icon" href="Vector 11.png" id="favicon">

This was followed by defining the meta tags for SEO and adding the necessary styles for a responsive design.

Dynamic Interactions

One of the key features I wanted was a toggle for light and dark modes. This required a seamless change in the favicon and the overall theme of the website. ChatGPT guided me through this with a series of JavaScript functions and CSS adjustments:

function toggleMode() {
    const body = document.body;
    const logo = document.getElementById('logo');
    const favicon = document.getElementById('favicon');
    const modeToggle = document.querySelector('.mode-toggle');
    const skipLink = document.querySelector('.skip-link');
    
    if (body.classList.contains('light-mode')) {
        body.classList.replace('light-mode', 'dark-mode');
        logo.src = 'Vector 11.png';
        favicon.href = 'Vector 11.png';
        modeToggle.textContent = '☀️';
        modeToggle.setAttribute('aria-pressed', 'true');
        skipLink.style.backgroundColor = '#000';
        skipLink.style.color = '#fff';
    } else {
        body.classList.replace('dark-mode', 'light-mode');
        logo.src = 'Vector 7.png';
        favicon.href = 'Vector 7.png';
        modeToggle.textContent = '🌙';
        modeToggle.setAttribute('aria-pressed', 'false');
        skipLink.style.backgroundColor = '#fff';
        skipLink.style.color = '#000';
    }
}

Accessibility and Usability

Accessibility is a cornerstone of our design philosophy at Brady UX. To ensure our website met high standards, we included features like skip-to-content links and language selectors. These elements needed to be both functional and aesthetically pleasing. Through ChatGPT’s assistance, we crafted elements that were intuitive and user-friendly:

<a class="skip-link" href="#main-content">Skip to main content</a>

.skip-link {
    background-color: #000;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: top 0.3s, background-color 0.3s, color 0.3s;
    opacity: 0.6; /* Reduced opacity */
}
.skip-link:focus {
    outline: 2px dashed #fff;
    opacity: 1; /* Full opacity when focused */
}

The Result

The final product was a sleek, responsive website that encapsulated the essence of Brady UX. It showcased our dedication to exceptional design, accessibility, and user experience, all crafted through the dynamic capabilities of ChatGPT. See it in action at: bradyux.com

Reflection

This journey was a testament to the evolving landscape of UX design in the age of AI. It highlighted the potential of AI tools in transforming how we approach design and development. The Brady UX website stands as a beacon of what’s possible when innovative thinking meets cutting-edge technology.

Conclusion

Creating this website was an enlightening experience, proving that with the right tools and mindset, we can push the boundaries of what’s possible in design. As AI continues to evolve, so too will our capabilities as designers. At Brady UX, we are excited to be at the forefront of this transformation, continually exploring new ways to enhance user experiences through innovation and empathy.