Using AI to build websites? 🤖

🤖 Building websites with AI

Things are really starting to get weird with AI.

No less than two years ago, using AI wasn’t even a conversation. We were doing things 100% manually like the simple humans we are.

Then came along tools like Jasper, which made AI-assisted content creation accessible to everyone.

While it wasn’t always perfect, and made for some lazy content production…

… it gave us the first glimpse of what could become possible with AI.

I’ve been using Jasper ever since it first came out, and it’s really made writing more enjoyable for me.

Now things seem to be moving at an exponential pace.

Even in just the couple weeks since my last Lab Report, there have been some advancements that make you think “holy sh*t, this is getting scary good.”

Half my Instagram feed is people posting their Lensa selfies, and even more of my Twitter feed is people interacting with ChatGPT.

AI now has real-world use-cases that reach far beyond generating simple blog post introductions.

Just last week I needed to share a draft guest post, and got AI to write a PHP snippet that lets me share drafts in WordPress without a plugin.

MKBHD scripted a recent video using AI that felt 99% authentic.

And this YouTuber created a mostly-automated book recommendation site.

So what does that mean for the future of web design?

Naturally, I decided to let AI come up with a few ideas. Here’s a collection of the most interesting ones:

“One of the most exciting applications of AI in web design is the use of machine learning algorithms to automate the creation of design elements.

With machine learning, designers can train algorithms to create design concepts, custom graphics, wireframes, layouts, and even entire websites based on a set of input parameters.

This allows designers to quickly and easily create unique and engaging designs, without having to spend hours or even days on manual design work.

Another way that AI is being used in web design is through the use of natural language processing (NLP) algorithms.

These algorithms can analyze large amounts of text and extract key information, such as keywords and phrases, to help designers understand user preferences and tailor their designs accordingly.

For example, an NLP algorithm might be used to analyze user feedback on a website and identify common themes and trends, which can then be used to improve the design of the site.”

Additionally…

“AI could be used to optimize the performance of a website, making it load faster and run more efficiently.

AI could be used to help with search engine optimization by analyzing user behavior and providing insights into which keywords and design elements are most effective at driving traffic to a website.

AI could be used to improve accessibility for users with disabilities, by automatically generating alternative versions of a website that are optimized for different devices and accessibility needs.

AI could be used to create intelligent agents that are capable of providing personalized recommendations for products, services or even blog posts based on previous purchase history, browsing behaviour, and interests.

Similarly, these agents could also identify user frustrations or potential problems they may encounter while browsing a website and offer suggestions on how they might resolve them faster or easier.

Overall, the use of AI in web design is likely to lead to more personalized, efficient, and accessible web experiences for users.”

Cool, I think?

I know reading stuff like this can also be concerning.

Are we going to be replaced? What role will us simpletons play?

While the dystopian imagination in me thinks all human input for every job in the world could eventually be replaced (which isn’t necessarily a bad thing), the realist in me thinks this:

Every tool needs a creator, architect, and operator.

We will need to adapt in order to keep up, but as web designers, that’s something we’ve grown accustomed to all along.

This means being open to experimentation with tools that are available to us today, and not being stuck in our ways.

If the ideas above are any indication, I’m quite hopeful that building websites will be more fun and more impactful than ever before.

*Update: I just published a new post with a list of the top AI site builders available today.

💡 Incorporating light into your designs

Ok, let’s snap back into the ‘real’ world for a second.

I’ve noticed a trend lately where websites that feel world-class have done a great job at adding depth & dimension through interactive lighting effects.

Here are a couple examples:

You’ll notice the animations when scrolling down the page.

This makes the overall design feel more immersive.

Though it’s a really subtle effect, it definitely helps draw attention and bring focus to certain areas on the page.

Interactions like these are an area I’d personally love to get better at.

You could accomplish them using a plugin like Motion.page for WordPress or natively inside of Webflow.

If you look at the source code, they’re often done using simple transform and opacity effects.

It’s story-boarding the animation that can be the hard part.