How We Use AI to Augment Our Web Design Process

Date
Aug 10, 2023
Author
Time
7 Minutes
hero image with a humanoid reptile in the background. The letters AMPBK center the foreground in bold.

Our Ethos

As we venture into the latter half of 2023, integrating AI tools into the workplace has become less about morality and more about increasing productivity. A resounding question has begun to echo throughout many industries, with many creatives asking "How do we?" rather than "If we should."

At Psychoactive Studios, our attitude has always been to innovate and master our field. AI is just the next step in embracing the next phase of metamorphosis. 

Today's deep dive will showcase how our studio members leverage AI tools like Midjourney, Photoshop Beta, Upscayl and ChatGPT daily, helping us take web development projects from inception to launch. Our approach to using AI tools goes beyond seeking shortcuts; it encourages thoughtful reflection on how we can enhance our productivity and project quality. 

Step #1 - Getting Started 

Every successful design project starts with clearly understanding the client's background, needs, and goals. We must answer these questions before turning to any design tools or software. By understanding what we're creating and who we're creating for, we can design a bespoke user experience that helps our customers achieve their business objectives. 

The following questions lay the groundwork for the project and ensure the end product is suitable for its users. We aim to create a website that is a natural extension of the client's brand identity and intended target audience. 

  • Who is the client? 
  • What is their background?
  • What industry are they operating in? 
  • What challenges are they facing, and what do they aim to achieve by creating a new website design? 
  • What type of aesthetic is suitable for the industry they're in? 
  • What type of messaging do website visitors need to absorb?

Step #2 - Collecting Design References & Keywords

Once we understand the client's background, we look for website design references for their industry. Usually, our go-to source of inspiration is Awwwards.com.

During our search, we look at style and composition, animation and interaction, drawing inspiration from the highest calibre. From this selection, we start developing keywords surrounding styles, layouts, and colour schemes that align with the client's vision and branding. We feed these keywords to Midjourney to generate assets that will help communicate the overall mood and style in combination with graphic design, layouts and composition. This helps us imagine what type of UX and UI we can create for the client. To showcase our process, we gathered the following references to aid the creation of a fictional website.  

https://kprverse.com

https://kprverse.com

https://www.hape.io/about

https://joinvalhalla.com/clans

Step #3 - Concepting with AI

We do tons of extra hand-holding when using AI tools to ensure that what we create meets the client's visions, expectations and, most importantly, budget. We always keep technical considerations at the forefront when mocking potential functionality or UX. 

As an example, our mock client is a video game industry developer who wanted a WebGL-inspired UI to promote the release of their new game — AMPBK Sports Ball. We used Midjourney as our primary concept tool and Photoshop Beta for touch-ups and embellishments.

We've found we spend the same amount of time creating a concept in Midjourney as we would without AI tools. Without clear prompts and keywords, AI can and will go off on weird tangents requiring a human co-pilot to help maneuver and steer. However, what we can create during that time is of higher quality, thus allowing us to communicate vision, mission and concepts to the client much more easily.

When working with an actual client, we feed Midjourney a mixture of tangible assets (supplied by the client) and concept imagery selected by our design team. This process ensures that AI is consistent with the client’s existing assets or wanted assets style. This recipe provides our team with higher-quality options to work with and produces impactful imagery consistent with the client's brand.

Step #4 - Touchups & Image Resolution

Even with AI's many benefits, some generations still need touch-ups to take them from good to great.

Our designers at Psychoactive prefer Upscayl, a free and open-source tool. After we create the first round of concepts, Upscayl can easily adjust the resolution of each image to give them an end product sheen.

Step #5 - Copywriting with ChatGPT

When it comes to proposals and website copywriting, our team integrates ChatGPT as more than a mere tool; it becomes a partner in the creative process. It transcends simple grammar corrections and placeholder text generation, functioning as another mind that we can collaborate with for innovative ideas and insights.

By feeding ChatGPT detailed information about clients and projects, it crafts project-specific content that helps identify and strengthen gaps in proposals, even aiding in project scoping.

For website copywriting, it can write content based on the architecture and wireframe structure, improving SEO, and recommending additional sections and CTAs. This personalisation takes the content strategy to a new level, enabling us to move beyond the traditional Lorem Ipsum. It ensures that website copy leads the design, rather than following it. This alignment between content and design fosters a more effective and targeted output, tailored to client needs.

The Takeaway

Psychoactive embraces AI tools as part of our process, but we know they are not an A-to-B solution. Instead, they enrich our toolbox, allowing us to solve our client's unique challenges effectively. As designers and developers, we will always find ourselves going back and forth on creative ideas. AI doesn’t put this process on autopilot; it just helps us approach it in a more modern and efficient way, as all impactful tech has and will continue to do. After all, just as a painter adopts a new method but never loses the essence of their stroke, we integrate AI without compromising our creative core.