Using AI to Your Advantage in Website Projects

If you feel like there is always some new trending AI tool and you can’t keep up, you’re not alone. Although AI can be traced back to the 1950s, there has certainly been a surge in development and buzz about it thanks to generative AI, like OpenAI’s content-creating models. Still, it may seem intimidating and your instinct might be to avoid using it. However, team Barefoot believes there are many powerful tools that can help your web design projects stand out when combined with human intelligence. Here’s why you should embrace AI in your website projects.

AI can clean up your code

Every day we get smarter, faster and more complex. This is reflected in web development too. We are entering an age of more sophisticated website projects that require more intricate designs and code. We can now brainstorm, outline projects, write content, understand sitemaps and validate code within a matter of seconds. 

I asked ChatGPT to write me some CSS (code used for visually styling websites) to use as an example for this blog. I asked for both messy CSS and a refined version. Here’s what it gave me:

#mainContent div p {
font-size: 16px;
color: blue;
line-height: 1.5;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
border-width: 2px;
border-style: solid;
border-color: green;
background: yellow;
font-family: "Times New Roman", Times, serif;
width: 80%
margin-top: 10px;
margin-bottom: 20px;
float: left;
clea: both;
display: block;
}

#mainContent p {
font-size: 16px;
color: blue;
line-height: 1.5;
padding: 10px 15px;
border: 2px solid green;
background-color: yellow;
font-family: "Times New Roman", Times, serif;
width: 80%;
margin: 10px 0 20px;
float: left;
clear: both;
display: block;
}

Key Improvements:

1. Syntax Errors:
   1. Added missing semicolon after width: 80%;.
   2. Fixed clea to clear.
2. Selector Simplification: Changed the selector from #mainContent div p to #main-content p to avoid overly specific and verbose selectors, which are harder to maintain.
3. Shorthand Properties:
   1. Combined padding-top, padding-right, padding-bottom, and padding-left into a single padding shorthand.
   2. Combined border-width, border-style, and border-color into a single border shorthand.
   3. Combined font-size and font-family into a single font shorthand.
   4. Simplified margin-top and margin-bottom into a single margin shorthand.
4. Consistency & Readability: Grouped related properties together (e.g., font properties, border properties) and used consistent naming (e.g., changed background to background-color for clarity).
5. Naming Conventions: Changed #mainContent to #main-content to follow a more standard naming convention (kebab-case for IDs and classes).

It took ChatGPT less than 20 seconds to come up with that CSS, think of a messy version, an improved version and tell me the key improvements it made.

AI can help boost your site’s SEO

If you want more hits on your website from robots crawling the internet, why not ask a robot for help? AI can help you improve your SEO rankings by giving you new keyword ideas you might not have thought of — in seconds. While you will always need to proofread the keywords you use and tailor them to your website and content, asking ChatGPT for ideas can be a great start.

AI can provide creative inspiration for designers

AI can also be used for more creative applications. Fontjoy is a great tool that uses machine learning to suggest font pairings. If you need visual inspiration, you can try image generation tools like DALL·E, Canva’s Magic Studio, or even play with Adobe Firefly’s generative AI if you’re a Photoshop or Illustrator user. Disclaimer: AI-generated images are not the best look for a nonprofit website, and you should always use authentic imagery on your site. 

Using AI wisely

Now that I’ve boasted all of the reasons AI is super innovative, interesting and intelligent, it’s time I advise you to remain cautious. As with any technology, it’s important to use AI wisely. AI can make mistakes. It should not be the only tool you utilize in your website project. Most importantly, AI could never replace you or your organization’s voice and tone. After all, nobody knows your audience and values like you do.

Written by Mayte Porragas Paseiro, Web Design Associate at Barefoot PR