HOW I CREATED A PHOTOGRAPHY WEBSITE IN 2 DAYS

There's always a silver lining :')

I created the blog for VOSI Media Calgary in two days using AI. You may think that this is a simple task, but there are many pitfalls that will lead to small visual problems and increasing technical debt, ultimately having a negative effect on your business and affecting future turnaround time.

In this blog, I will give some advice for creating business websites using generative AI, in case you want to avoid problems such as:

• Generic-looking websites
• Un-maintainable code and visual artifacts

HOW I BUILT THIS WEBSITE

This photography website was built using Google Gemini using their Antigravity interface. However, generated code was manually reviewed, edited for visual style and cleaned up for easy future maintenance. Designs were drafted in Figma to allow the AI to achieve the intended look.

AVOID: GENERIC-LOOKING WEBSITES

If you tell AI to build a website with no further instruction, users will often be able to easily tell that the site is made with AI, which can affect the integrity of your brand. However, you can fix this by drafting a design of the website beforehand, and guiding the AI through the site design.

I achieved this by creating design documents for the AI to reference. Figma is a free design software that many designers use to generate site mockups for software engineers to reference, and it is helpful in guiding AI outputs. Since I am specialized in computer science, and am not too well-versed in design, I referenced some other websites for interesting design elements, and added a unique pink color scheme, sidebar and photo layout to create a personalized look for this website. After, I created a design document, detailing every single page I wanted to create, the exact site paths to those pages, as well as the user experience of each component for the AI to reference.

By leaving no room for AI interpretation, it is easier to get a desired output. However, this means you must be more hands-on in the design and coding process.

If you are interested in professional guidance for creating a personalized site, please message Kevin for a free consultation.

AVOID: UNMAINTAINABLE CODE AND VISUAL ARTIFACTS

AI-generated code has a tendency to produce small, noticeable issues. For example, you may have a scroll bar visible where it shouldn't be, there might be text going off the screen when it shouldn't be, and there may be a plethora of other issues that arise when viewing the site though multiple devices with different-sized screens.

Furthermore, AI typically lacks foresight, making it difficult to make changes to its' code. For example, if I wanted to change the font of this website in the future, but every single paragraph had its own "font" attribute when the AI generated it, it would take a lot of work to make the changes.

This leads to a situation where only the AI is able to read through the code and maintain it, making future changes a nightmare, involving a combination of praying and cussing out the AI. The solution to this is to ask the AI for minimal changes, and to simply read the AI code.

When designing this site, I would do a few things to ensure visual fidelity and maintainable future code:

• Inspect the website at different screen levels(phone, tablet, laptop) to ensure no visual problems arise
• Tell the AI to generate minimal changes on every feature request to avoid extraneous outputs
• Check code differences to make sure few lines of code were changed, to verify AI outputs
• Inspect code differences to make sure the AI did not change extraneous things, leaving comments to be corrected
• Manually adjust outputted code for dimensions, font colors etc. to properly style the site.

Above all this, the most important thing I did is create and guide the code design process. Generative AI is not very good at identifying reusable code, structuring the codebase and identifying opportunities for cleanup. To solve this problem, it's important to manually look through the generated code, identify these opportunities early on, and inform the AI. Otherwise, the AI will continue messily adding new features and eventually the codebase will become impossible to adjust.

Overall, although AI is able to "automatically" make a website, it is important to correctly add human intervention from a professional software developer to guarantee that the site has no problems, either blatantly visible or potentialy problematic in the future.

If you are considering constructing a website for your business, please please message Kevin for a free consultation, to learn about potential problems you may face.