Rather Listen? Click the play button below to listen Spotify.
There is so much that goes into the process of building a website and what's great about Chat GPT is that you can use it to streamline certain parts of your process.
I had no idea that you could even use ChatGPT to design a website until I ran into a video about how someone else was using ChatGPT to build their websites and it just completely blew my mind.
I'm really excited to share this with you, if you are also a web designer, this is going to be a game changer for your process or if you're building your own DIY website this will save you so much time. If you're not feeling creative, this will help jog your creativity and bring inspiration to your website. First things first, What is Chat GPT?
If you're wondering what ChatGPT is, it's an artificial intelligence website where you can ask questions, and it will spit out answers for you. Chat.openai.com is the website if you want to try it yourself. It's a great tool that you can basically use as a virtual assistant.
1. Create a Website Outline
Before you go and create any website, it's helpful to create some sort of outline or plan so you know what's going on each page. This is helpful so you're not staring at a blank page.
If I was creating a website for a photographer and I was creating the homepage I would plug into Chat GPT something like this, "I'm creating a website for a photographer. Can you create a website outline for all the sections I should Include for the home page? I want to make sure people get all the information they need on the homepage if it's the only page they visit"
then Chat GPTs answer is:
Of course! Here's an outline for the sections you could include on the homepage of the photographer's website:
1. Header:
- Logo or brand identity
- Navigation menu with links to key sections
- Contact information (phone, email)
2. Hero Section:
- Striking, high-quality photograph that represents the photographer's style
- Short tagline or headline showcasing the photographer's expertise
3. Portfolio Highlights:
- Grid or slider displaying a selection of the photographer's best work
- Thumbnails linking to full galleries or specific projects
4. About the Photographer:
- Brief introduction to the photographer's background, style, and philosophy
- Personal photo and a short bio
5. Services:
- List of services offered (e.g., portrait sessions, event photography, etc.)
- Concise descriptions and accompanying images for each service
6. Testimonials:
- Quotes or reviews from satisfied clients
- Photos or avatars of the clients alongside their feedback
7. Booking Information:
- Call-to-action button leading to the contact or booking page
- Brief instructions on how to inquire about availability and rates
8. Blog or News Section:
- Recent blog posts or news updates related to photography, tips, trends, etc.
9. Social Media Integration:
- Links to the photographer's social media profiles
- Instagram feed widget with recent photos
10. Contact Information:
- Contact form or contact details for inquiries
- Address (if relevant) and map widget for the studio location
11. Footer:
- Secondary navigation menu with links to privacy policy, terms, etc.
- Copyright notice and any necessary legal information
I mean, how cool is that? Not only does it give me the section but it gives me ideas for how to design the sections and what information I should use. Then from here, I would tweak the sections to my liking.
What's intimidating about starting a website from scratch is that there are unlimited options for everything. What do you put on a website? What sections should you include? What kind of pages should you have? But by having ChatGPT help guide your ideas you're going to save so much time in the brainstorming department. Then you can start actually designing quicker than you've ever imagined. Side note go and do this for every page. All you need to do is change your prompts. Instead of what should I include for the homepage, you can say what can I include on the about page. Then do it again with a service page. Let it do the work for you.
2. Help with Choosing the Right Images I briefly talked about this in the last episode but I want to mention this again.
A lot of the time when I build websites it's not in people's budgets just yet to invest in a brand photoshoot so I use a lot of free stock images or even paid stock images if needed.
What I get stuck on, is trying to find the right images to use that make sense with the website copy. Especially when it comes to using icons. I don't want to choose an icon that has no meaning. I want to make sure that I'm intentional in my choices so I will ask ChatGPT something like, "Give me ideas for what icons I can I use for this web copy: "Companies that prioritize content marketing efforts experience 6x higher conversion rates compared to those who don't."
Chat GPT gave me 10 options but here are my top 3 favorite answers:
1. Percentage Icon: An icon of a percentage sign with an arrow pointing upwards, symbolizing the growth in conversion rates.
2. Dollar Icon: An icon of a dollar sign with multiple dollar signs stacking up, showcasing the financial benefits of improved conversion rates.
3. Rocket Icon: An icon of a rocket taking off, symbolizing the rapid growth in conversion rates that can be achieved through content marketing.
By one, click of a button I am able to have an idea about what icons are intentional to the webcopy and that really does save me a lot of time and validates my ideas.
3. Writing web copy
I am by no means a copywriter but I also don't want to hand over a custom website where theres no copy at all. I at least want to guide my client with some filler copy so that they know what to put in each section.
What I do to create web copy is figure out what section I want to create it for, what tone I want it in, and the length I want whether it's a certain amount of characters or sentences. Here's what I ask Chat GPT: I'm designing a one page website for an Asian restaurant named Asiana Garden. Can you write 3 - 5 sentences for the about section on the homepage? Make sure it includes this information: $2.00 delivery to the valley only, dine-in, order to go, or delivery, there are two locations one in the valley and one downtown in a conversational tone. Something fun is that if you have a favorite Mentor with a large enough fan base, you can use their name as an example in tone so I could have ended my prompt with 'in the tone of Tony Robbins' if that works for your brand vibe. Chat GPT then gives me this: Welcome to Asiana Garden! We're thrilled to be your go-to destination for delectable Asian cuisine. Whether you're in the mood to unwind and dine in, grab your favorites to go for a quick bite, or have them delivered to your doorstep, we've got all bases covered. Oh, and speaking of delivery, if you're in the Valley area, enjoy the convenience of our special $2.00 delivery fee. And guess what? We've got not one, but two locations for you to choose from - a cozy spot in the valley and another one right downtown. So, let's dive into a world of flavors together! Know that I would not use this exactly as is. I always edit the output. I get rid of words that I normally wouldn't say or that I think the client wouldn't say and I use Chat GPTs answer as a base to get me started rather than using it completely as done for you website copy.
If you want to use the text as is thats fine but I definitely think it's missing the human touch it needs. 4. Writing Meta Descriptions for SEO Writing meta-descriptions for SEO is super boring and having ChatGPT as an assistant to create meta-description for me has saved me hours of work. All I do is give it the key words that I want to include, some background information, and then how many words I want it to spit out. I do have to sometimes run the output through again when Chat GPT gives me more words than I asked it for but I get it. Computers aren’t perfect either and a human touch to refine the output is what's needed.
Here's an example.
I would tell Chat GPT
'Write the meta description for the about page in 500 characters or less. Please incorporate all or some of these keywords
- savannah kittens for sale
- kittens for sale in alaska
- savannah cats for sale near me
- luxury cats for sale
- savannah cat kittens for sale
It spits out: Welcome to our About Page, where you can find high-quality Savannah kittens for sale in Alaska. We specialize in breeding luxury Savannah cats, ensuring you have access to top-notch feline companions. Discover more about our cattery and explore the availability of Savannah cat kittens for sale near you.
Then I would go in and get rid of unnecessary text and end up with:
At North Star Savannah you can find high-quality Savannah kittens for sale in Alaska. We breed luxury Savannah cat and have top-notch cats and kittens. Discover more about our cattery and explore taking home a Savannah cat or kittens for sale near you.
5. Create Custom Code I am not a coder what so ever. I don't use it to build websites at all but I thought it would be worth it to mention that you can use Chat GPT to create custom code for you. Let's say that you want scrolling text on your website. You can ask Chat GPT 'Create the HTML code for scrolling text on a web page' And it will spit out the code for you along with a description of what parts of the code mean and how to modify it to your liking. It's the coolest thing and is definitely mind blowing.
6. Creating the Frequently Asked Questions Section
It's super important to have a Frequently Asked Questions or FAQ section on your website. The more information visitors have and the more they have their questions answered the more likely they are willing to hop on a call with you or book your services directly.
But it can be hard to come up with FAQs if you haven't had a lot of clients yet or just need some inspiration.
I love going into Chat GPT and saying something like, 'What are the 15 most frequently asked questions for a Peer Support Service website. Make sure to include the answers' Then bam it spits out and I add it to the site.
I like to have atleast 10 questions on the website but of course it's up to you. I also make sure to go through the questions and answers to make sure it works for the specific client.
Recap And there you have it the 6 ways for How to use Chat GPT to design a website. 1. Create a website outline
2. Help with choosing the right images
3. Writing web copy
4. Writing Meta Descriptions for SEO
5. Create Custom Code
6. Creating the Frequently Asked Questions Section Chat GPT is a great tool. It doesn't, and shouldn't be used as an exact replacement for web copy but it's a great brain storming assistant that will save you so much time and energy. As long as you put your own touch on the copy and ideas it's a great way to scale without hiring a team member.
AI is here to stay so we might as well learn how to use it our advantage.
Next week I have one more Chat GPT episode for you and we will be talking about how I use Chat GPT for my business in general so stay tuned for that. Talk to you later and happy designing.
Z Squared Studio is a Brand and Web Design Studio based in Juneau, Alaska. Check out www.zsquaredstudio.com for custom brand design, logo design, or web design.