AI in Graphic Design Process - Design Development - Website Design

From AI Testing to Webflow

In my preliminary research, I stumbled upon AI website generators like Framer and 10Web, both promising the allure of crafting full-fledged websites in mere minutes. But the reality was a tad disappointing. The outputs felt templated, lacking the dynamic flair I envisioned for CosmoBites. Moreover, the inability to choose a my own color palette or personalize the design to my satisfaction left me dissapointed. However the ability to quickly generate full website under a minute is definitely nothing to overlook and should be getting only better as the AI advances even further.

Framer generated websites - prompt 'A product page for space food company Cosmobites'



10Web

Here you first have to choose type of your business, then you are choosing theme and structure - barely any options. Before entering company name and description - for which they allow AI enhancement - pressumably through ChatGPT APi or smh. But yeah it describes based on the first type of your business. For which there was not space food. But milion of food trucks. Results take some time (minutes) but they are still quite basic. Better colour balance though


At least these trials made something clear: I wanted a website with movement and life. I initially thought about using complex JavaScript animations. However, given the tight project timeline, I needed something more straightforward and decided to use Webflow.

Webflow

Webflow is a web design and development platform that allows users to design, build, and launch responsive websites visually, while writing clean, semantic code for them.

This code-less platform was a game-changer, striking the perfect balance between customization and user-friendliness. With its intuitive interface, I crafted a one-page showcase website that truly encapsulated CosmoBites' principles. I began by creating 3D Animation of the main brand's imagery in Maya before exporting as image sequence and then transformign into Lottie sequence in After Effects. This animation served as the initial welcome screen, rotating as visitors first enter the site. In addition to this I have incorporated micro animations into all key blocks of the webpage. With these two paired together, the website experience was both immersive and engaging. In addition to that I have managed to sure to optimize the website across different platforms and resolutions including phone, where it doesn't look pretty but still works




 

But, as with all tools, Webflow had its limitations. Being on the free version meant I couldn't fully explore its potential, from custom settings to hosting options.

Comments

Post a Comment

Popular posts from this blog

Research - Graphic Design Process

Graphic Design Process Graphic design is an ever-evolving field where creativity meets technology. Today, designers are not only expected to create visually compelling designs, but also to navigate a rapidly changing landscape of digital tools and technologies. Among these emerging technologies, artificial intelligence (AI) holds significant promise for transforming the way graphic design is done. The graphic design process is a series of steps that designers follow to solve visual communication problems or meet specific objectives. This process can generally vary depending on the project or the designer, but it generally involves the following stages: 1.      Briefing : The first step is to understand the design brief. This includes understanding the client's objectives, target audience, the message they want to convey and will guide the entire design process. 2.      Research : Once the brief is un...
Read more

AI in Graphic Design Process - Ideation

Image
Brainstorming The initial phase of brainstorming led me to ChatGPT. By feeding the AI the entire organized brief, it managed to produce some intriguing concepts, such as rocket launch and the planet infusion idea. While these served as an excellent foundation, the AI's capacity to switch rapidly between varied concepts - a critical facet of brainstorming - was found wanting. Nevertheless, I found value in these AI-generated ideas, using them as foundational stones for further development.   Mindmapping For the mind mapping phase, I turned to an AI tool named MyMap (MyMap.ai, 2023), which promotes AI-driven conversations in a 2D map format with branching capabilities. But instead of fluidly branching from my inputs, it offered verbose, AI-generated points. This produced a cluttered mental landscape, prompting a return to the time-tested method of manual mind mapping. Additionally they offer complete mindmap generation based on input keyword but these results were more or le...
Read more

Research - AI Ethics & Impact of AI on Graphic Design Industry

Image
AI Ethics AI ethics is a field of study that considers the moral issues arising from the use of AI. It involves questions about decision-making in machine learning systems, bias in AI, transparency, accountability, and the impact of AI on society: Transparency : It's important that AI systems are transparent, meaning that people can understand how decisions are being made. This is also referred to as "explainability". Accountability : There should be clear lines of accountability when AI systems make decisions, especially in high-stakes situations. This includes who is responsible when an AI system makes a mistake. Bias and Fairness : AI systems should be designed and trained in such a way that they do not perpetuate or exacerbate existing biases. This includes being mindful of biases in the data used to train AI systems. Privacy and Security : AI systems often handle sensitive data, and it's crucial that this data is handled securely and pri...
Read more