It is a truth universally acknowledged, that designers who code and developers who design don’t exist. However, if you look at job requirements for designers, you might think otherwise — that these unicorns do exist. Many job requirements for designers ask for experience with HTML/CSS/Javascript.
HTML/CSS are declarative languages used for creating static web content. Javascript is what makes web content interactive. It requires coding and using logic. Creativity is right-brain; logic is left-brain. For most designers, logic and programming are not their forte.
There are designers who know about code and there are developers who know about design. Designers who know about code understand HTML/CSS. For hiring managers who create job requirements for designers, asking for HTML/CSS is ok. If you want Javascript too, that is two distinct job requisitions. It is possible to save money and hire one unicorn and what you will get is a poorly designed and unresponsive website.
No-code platforms have made it easier for designers to create interactive websites without the need to code in Javascript. Designers and non-programmers routinely use no-code Content Management Systems (CMS) to design and build websites. CMS platforms make it easy to design websites with static content and provide templates for dynamic content. The templates allow for adding blogs, updated news and stories, galleries, and more to a website.
No-Code Content Management Systems
In addition to the templates, CMS supports plugins for creating interactive widgets like slideshows, accordion tabs, forms, charts, grids, maps, etc. If a custom interactive experience is required, then it has to be coded and requires Javascript programming.
Today, there are many no-code content creation platforms that can be used for creating custom interactive web content. These platforms enable designers to create and publish interactive web content that make the website experience more engaging without writing any Javascript code. An interactive digital experience increases customer engagement and improves marketing performance. No-code platforms generate the Javascript code, which can be copied and embedded into websites using a CMS.
No-Code Content Creation Platforms
The primary use of many of these tools is not to create interactive content for websites. Adobe XD, for instance, is for designing user interfaces and wireframes. All these tools, however, allow you to generate Javascript code that can be embedded into websites. The generated code may have limitations when embedded— it may not allow the content to be resized, may not display because of cross origin issues, or may not be responsive. We will see how a designer can use ChatGPT to modify the generated Javascript code to address these limitations.
Stacking Plan
In commercial real estate marketing, floor plans, site plans, and stacking plans help prospective clients visualize a property, interpret the property data, and make informed decisions about the listing. We have covered floor plans and site plans in an earlier article. Stacking plans describe the layout of a multi-storied building by showing a floor-by-floor breakdown of space and tenancy.
Stacking plans are information dense. The information may include tenancy, available space, dimensions, financials, and the layout. When creating PDF documents for print, the information usually spans multiple pages.
Stacking plans are information dense and may span multiple pages
The optimal way to illustrate the layout and tenancy is by using custom interactive elements that are embedded in a website. The challenge is to be able to present the information on a website in a way that is compact, interactive, engaging, and informs prospective clients.
Interactive Stacking Plans
One way of creating an interactive stacking plan is by using a standard CMS plugin. The accordion plugin allows you to add text or image-heavy content without requiring you to scroll. The figure below shows an interactive stacking plan created using an accordion plugin in Weebly.
Interactive Stacking Plan using an Accordion plugin in Weebly
A stacking plan requires an image of the front facade of the building and photographs and floor plans from each floor of the building and data on tenants and available space.
The accordion plugin restricts the interactivity to within the plugin. The above figure separates the building from the information about the building. No-code content creation platforms allow you to build custom interactive stacking plans where the building itself can be made interactive.
The animation below shows a custom interactive stacking plan created using Adobe XD. The stacking plan is made compact by providing contextual information on user interaction as needed.
Interactive Stacking Plan using Adobe XD
Publishing to a Website
Once you are done creating the interactive content, the no-code content creation platform can generate Javascript code that can be embedded into a website. The animation below shows how to generate the Javascript code in Adobe XD. Select Share and click on the Copy Embed Code icon in the right-side toolbar and the code will be copied to the clipboard.
Copying the embed code from Adobe XD
The embed code generated by Adobe XD is shown below.
<iframe width=”1920″ height=”1080″ src=”https://xd.adobe.com/embed/2e7b7573-d96b-48d5-b3f9-f21029a688b2-7b28/?fullscreen” frameborder=”0″ allowfullscreen></iframe>
The embed code that Adobe XD generates is of a fixed size. The code is not responsive and will display with scroll bars on most devices. We will now modify the code generated by Adobe XD by prompting chatGPT to make it responsive.
Using ChatGPT to make Adobe XD generated code responsive
The ChatGPT-generated code can be inserted into a website using the CMS embed tool. The figure below shows that the generated code is responsive and displays correctly on all devices.
ChatGPT-generated responsive code displays properly on all devices.
Designers who Code
No-code platforms are enabling designers to create digital experiences without writing a single line of code. Recruiters should stop focusing on Javascript competence for designers and instead focus on familiarity with no-code tools. The addition of Generative AI to these tools will further lower barriers to adoption and accelerate development cycles. The simplicity of the visual drag and drop of no-code tools combined with the power of natural language prompt-based Generative AI models will allow designers to go beyond interactive websites to prototyping applications and customer experiences.
To be successful with Generative AI tools, designers must be able to precisely articulate what they want. Designers don’t need to code. They need to know the right question to ask and know how to frame it right.
* Header image uses photos by Hal Gatewood | Unsplash, Markus Spiske | Unsplash
