Web Design x ChatGPT
Did you know ChatGPT can write HTML, CSS, and other coding languages? As web designers this can seem concerning, but is it a good thing? Here are some examples of how we played around with ChatGPT to create custom stylings on different elements of a website.
Styling a Navigation Bar
I wanted to explore if ChatGPT could code and design a navigation bar for a fast food concept. I was curious to see what fonts and colors it would choose with the only guidance being a fast food concept. I was impressed by how fast it was able to come up with a design with a little help from the prompts. The design notes it provided, explaining the color choices and fonts, were equally as impressive and informative. One issue I noticed was it didn’t automatically make the color scheme ADA-friendly, so I added it to the prompt. This is one example where a designer’s eye is still necessary to catch these important details. I could see ChatGPT being very helpful for web designers as far as writing and debugging code, but I would still be wary of using it for design choices and applications.
Written by Leanna Myers
Creating Complex Animations
I wanted to use ChatGPT for something that it was best suited for. Designers often spend a great deal of time working on, fine-tuning, and troubleshooting complicated keyframe animations, so I thought it would be a perfect use of AI code writing to automate this. In the past we have had several customers request a neon-style flicker animation for a piece of text or graphic on their website. Anything involving a repetitiveand irregular pattern like a flickering sign is usually a huge headache to write an animation for manually. Using ChatGPT I was able to generate an intensely complex neon flickering animation in just about 30 seconds. While the animation could definitely use some slight fine-tuning, the time-saving potential here is huge. I would love to explore complex animations and pseudo-element styles like this, and the potential time AI could save designers here more!
Written by Kai Malowany
Designing a Menu Page
I spent some time trying to get ChatGPT to create a menu page that is well-designed and has a good user experience. Unfortunately, after multiple prompts, I still struggled to achieve something I was happy with or could create myself in a shorter amount of time. Although the code was clean and well-written, the creative capabilities were far from impressive. The one thing I did find impressive was its technical skills, such as finding ways to improve your code, simplify it, or add unique animations. But when it comes to overall design layouts and styles, it’s still far from perfect.
Written by Chris Nervegna
Takeaways
Overall, there are many benefits to using ChatGPT to assist in web design. It can help with speed and efficiency since you don’t have to manually type every div, class, and style. It can also serve as an educational tool for beginner designers learning how HTML and CSS structures work. It’s great for troubleshooting and debugging, saving hours of frustration. All these features are amazing, but there still needs to be a person on the other end QA’ing any design choices. It still relies heavily on the prompts to create specific designs and also ensures the design meets ADA standards. It was surprising it didn’t include ADA standards without a prompt which can lead to inaccessible design choices. Overall ChatGPT is a great tool to assist web designers, but it’s not equipped to take on the full role of a web designer.
