Great designers understand human emotion; AI does not. AI cannot replicate genuine emotional intelligence, and struggles with subtle cues that designers use to create context and guide intent. This limitation doesn’t mean we can’t use AI to produce better work. From creating web copy and images to structuring and developing code, here are four ways designers and developers can amplify their productivity using AI.
Wireframes that Work Harder
Designers use wireframes (a basic visual representation of a website or app layout that serves as a blueprint) to communicate functional and content priorities. During a design process, they help project stakeholders to understand the design strategy and provide feedback for changes or design approval prior to development.
When high fidelity is needed to communicate key information, a wireframe may include web copy to show how a webpage or app screen will appear once populated with content. It can also be used to demonstrate how important interaction points, such as a lead gen form preceded by a compelling call to action, fits into a layout.
Traditionally, designers have used lorem ipsum as placeholder text in such instances. Lorem ipsum is a scrambled Latin text used as a placeholder to show visual form without relaying specific meaning. But meaning provides context, and context is important. So instead, use AI-generated copy to make design intent explicit.
As a real-world example, Cantilever worked with a company that is pioneering non-surgical treatments for long-term inflammation in the nose and sinuses. To provide very clear context for key layouts of their web design, we provided wireframes enhanced with AI-generated copy.
This proved invaluable for both the client and our team. It aided collaboration by adding important context to wireframes about an important aspect of the site’s user experience, and bridged a gap between abstract layouts and the intended outcome.
The client planned to populate the final design with their content, but by demonstrating the design with context-relevant placeholder copy, we were able to give them clear guidance about their content migration.
This approach helped the client visualize design intent while also streamlining content creation. The client used the AI-generated copy as a framework, ensuring their final content aligned with the design’s structure without extensive back-and-forth revisions.
Lack of visual context forces a designer to explain rather than show. This can lead to client confusion and frustration, and can extend the design cycle. Replacing lorem ipsum with AI-generated web copy is a “show don’t tell” approach that reduces ambiguity, provides a stronger basis for generating feedback, and makes for a more efficient design process.
Text to Images
It’s more effective to show an idea than tell it, and clients often don’t have image repositories you can readily dip into. In such instances, craft a great prompt so gen AI can create conceptual images that convey a tonal or aesthetic design direction.
For example, when images are used in a high-fidelity wireframe or design comp, this method conveniently provides consistency while incorporating brand-aligned elements that do a lot of storytelling about design intent. You talk less while your design work says more.
These are not meant to be production-ready images. The idea is to provide something directional but also material enough to convey the intended aesthetic. The output is conceptual yet clear enough for a client to then source photography or illustration.
As with web copy, using an AI to create visual assets should begin with a clear vision of the end result. When using this method, we develop detailed prompts based on our understanding of the client's brand, audience, and goals.
To provide another real-world example, we used AI to address key design needs when working with Humphrys Awnings, a 145-year old company with both residential and commercial audience segments.
We needed context-relevant visuals to showcase a commercial focus, and wanted a cost-effective alternative to photoshoots. We used an AI to deliver quality, relevant images within a design layout that the client could understand easily and respond to effectively.
Another text-to-images scenario came about when a client sent us images for use on a website as corporate portraits. The team was large, and the images showed varying degrees of quality and different perspectives. We needed a way to achieve consistency that wasn’t present, and turned to AI.
Using a good prompt, we processed these images into a batch of corporate portraits that looked very consistent (and that wowed the client, who was aware of what we were working with).
Code Development
AI tools can make coding more efficient and help you solve problems faster. They’re a compliment to human developers – they make errors and have other limitations that require oversight – and can effectively support and enhance our work.
Not all AI are equal. Some are good for unravelling complexities, while others can rapidly generate code, for example. To maximize their potential, it’s essential to understand the distinct roles these tools can play and how to integrate them effectively into your processes.
Designing the architecture of a new system or finding the best way to structure a feature can be a complex task. When weighing different database architectures for a web application, for example, the o1 model can simulate trade-offs, explore use-case scenarios, and help you iteratively refine into the best strategy before any significant development begins.
This model excels in bouncing ideas back and forth due to its advanced reasoning capabilities. When confronted with intricate design decisions or architectural dilemmas, the o1 model can break a big-picture challenge into smaller pieces, propose different approaches, and predict potential pitfalls by simulating high-level reasoning. Its ability to understand context, evaluate trade-offs, and generate hypotheses makes it an ideal partner for brainstorming sessions and strategic planning.
For more hands-on coding support, AI tools like Cursor integrate directly into your code editor and offer context-aware suggestions, autocompletions, and refactoring options to help streamline the development process. This makes the implementation of specific components and features much more efficient.
When a developer is adding a new feature to an existing application, such as implementing an API endpoint, Cursor can analyze the surrounding code, suggest the best way to structure it, and make sure it aligns with existing conventions. It’s especially handy for scaffolding boilerplate code, catching bugs early and cleaning up messy functions. This AI-assist speeds up development and reduces errors.
The beauty of these tools is how much they can improve your workflow. They help us to focus on creative and strategic parts of development, work faster and smarter when coding, and maintain high standards of quality.
Focused Feedback
Tools like tl;dv use AI to record, transcribe, and analyze meetings, which can be a huge time-saver and great facilitator for a more focused and productive session.
During that important client review or team meeting, turn on tl;dv and your note-taker will be busy behind the scenes, allowing you to remain focused on the discussion. The quality of your sessions will improve thanks to this.
Afterwards, a searchable transcript is distributed to your team – no more time spent on post-meeting communication and synthesis. The key feedback has been summarized, too, adding efficiency to the iterative design process.
You can then return to the transcript or meeting video at any time to revisit and utilize key discussion points or information that was shared during the meeting.
When Not to Use AI
Cantilever’s hope and desire is that our industry adopts a uniform standard for use of AI in creative work. It’s obviously an emergent application of technology that’s still being explored and developed. Until such standards exist, we have defined specific ways in which we will not use AI:
- We do not use unaccompanied AI for anything related to client work - everything always has an eye on it
- We do not use AI to generate “‘production” imagery – images of people, places or products that will be used on a public-facing website. An exception to this may include background images – images used behind the main content of a webpage.
- We do not use AI-generated imagery or copy in any context directly related to the marketing of a service or sales of a product (i.e. imagery used for online product imagery).
- We do not produce code using AI without rigorously checking it for accuracy and errors.
Conclusion
AI can’t replace human creativity and oversight, but can amplify our productivity. Human expertise and knowledge within the field that an AI has been applied to remains important. Prompts need to be accurate and well-informed to attain good outcomes. Because AI results are error-prone, human oversight is an important set of guardrails.
Despite these limitations, we’re excited for future innovation with this technology that can make creative work become even more efficient.