AI Tools in Web Design and Development
‍

Introduction to John D. Saunders, the instructor:

• Creative Director / Founder
• Geek / Family-Man
• Founder:

• 5Four Digital
• Black Illustrations
• Pigeon’s Mission
• Urbanwallet - acquired

‍

Using ChatGPT for Website Copy

• ChatGPT is a chatbot based on a large language model, it enables users to refine and steer a conversation towards a desired length, format, style, level of detail, and language. 
• This is our definitive process for creating quality website content and copy by leveraging existing client content, tone of voice and brand discovery content to create content for websites.

• Recommend paying for ChatGPT 4, worth the price
• Things you need - website sitemap, copy template with breakdown of each page, brand discovery (questions about vision, goals for website), brand guideline doc (targeting, services, introduction to company, services)
• Prompt/copy template for homepage:

‍

We’re working on the homepage copy for our business (CLIENT NAME). Here’s a bit more about the business [ABOUT, SERVICES, OVERVIEW, TONE OF VOICE, VISION, ETC…]

‍

Please create the following sections for our HiFi wireframe of the homepage:

• Main tagline
• Overview
• Testimonial
• Solutions section featuring tagline
• Provide an overview tagline of my business [BUSINESS NAME]
• Provide a description of who we are
• Create a Features section tagline/headline and include 6-10 bulleted features
• Testimonial

‍

Vector Images with Midjourney

• Midjourney is a generative artificial intelligence program that generates images from natural language descriptions, called prompts, similar to OpenAI's DALL-E and Stability AI's Stable Diffusion. 
• We figured out how to create beautiful illustrations for website mockups. 
• Here are the prompts…

• Skeuomorphic (realistic design/icon) icon of a camera, purple and blue hue, minimalistic, clear background, vector, v 6.0
• Once have option that like, can hit “v1” to see four more versions similar to that design
• Can click upscale to get high res version of design

‍

Sitemaps in Minutes

• Create a marketing website for any company in minutes using systems you already love with Relume. 
• Build a sitemap and wireframe in minutes with the help of AI. Easily export to Figma and Webflow once you’re done.
• Go into site builder in Relume

• Go to chatGPT and ask to write brief overview of website and what pages to include
• Enter that into Relume site builder prompt space
• Can continue generating pages
• Can take this, send to client in Figma and get feedback
• Can also click wireframe, this will be filled with copy as well, can be exported to Figma

‍

ChatGPT Prompts

WEBSITE COPY:

We’re working on the homepage copy for our business [CLIENT NAME]. Here’s a bit more about the business [ABOUT, SERVICES, OVERVIEW, TONE OF VOICE, VISION, ETC…]

Please create the following sections for our HIFI wireframe of the homepage:

• Main Tagline
• Overview
• Testimonial
• Solutions section featuring tagline

• Create an overview of [SERVICE 1] staffing
• Create an overview of [SERVICE 2]Vendor management
• Create an overview of [SERVICE 3]manage staffing
• Create an overview of [SERVICE 4]transportation

• Provide on overview tagline of my business [BUSINESS NAME]
• Provide a description of who we are
• Create a Features section tagline/headline and include 6-10 bulleted features
• Testimonial

Modifier: Can all the sections be a lot more detailed and descriptive?

MIDJOURNEY:

/image prompt: skeuomorphic icon of a camera, purple and blue hue, minimalistic, clear background, vector, hi res, --v 6.0

/image prompt: gradient background, slight grain, purple and blue hues, black background, HD, hi-res, hyper-realistic v 6.0

/imagine prompt: Silhouette of a man dressed in luxury fashion, inspired by a hypothetical collaboration between Nike and Balenciaga. The background is a solid black, while the clothing stands out in a vibrant purple hue. The figure is subtly visible, with dark shadows casting over him, enhancing the mysterious aura. He is accessorized with contemporary fashion eyewear. The image is captured using a 28mm wide-angle lens effect, —v 6.0

‍