Building Anna's Art Website - Episode 6: Update On Home Page

Introduction

This is Episode 6 of our mini-series. I’ve made more progress on the homepage of Anna's new website, so let’s dive right in and see what's new!

Recap and Updates

In the last episode, I showed you the hero section and introductory section I built. For this episode, I’ve focused on the category artwork section, contact form, and contact details section.

Current Website Issues

When we looked at Anna's current website, we noticed that the category section has some alignment issues, especially when viewed on smaller devices. Some images are misaligned, and when you click on a category, it opens in a new tab instead of staying on the same page. We will try to avoid these issues in the new website.

New Homepage Design

Let’s take a look at the new homepage design. We’ve already covered the hero section and introductory section in the previous episode. We plan to replace the current video with a more engaging introductory video.

For this episode, I’ve created a new category section where you can click on different tabs to see a big image of Anna's paintings. This allows visitors to appreciate the artwork in greater detail. It’s crucial that this section looks good on various screen sizes, so I’ve made sure it adapts well on different devices.

In the meantime, I also created an option for a cards view where you will see cards for different painting/drawing categories, similar to how it is laid out on Anna's current website.

So, here’s how it looks so far:

• Tabs View: You can click on different tabs to view a large image of the artwork.
• Cards View: Alternatively, we have a card layout that displays different categories. This layout looks quite nice and adapts well to smaller screens.

I will discuss with Anna which one she prefers. For now, I will keep the cards view for the homepage.

Contact Form and Details

We’ve added a contact form with essential input fields such as name, email, and message, along with a "Contact Me" section that includes social media icons. Ensuring visitors have an easy way to reach out is crucial for engagement and connectivity. This section is designed to be user-friendly and responsive across various devices, making it simple for users to get in touch with Anna no matter where they are.

Backend Content Management

The backend content management system allows us to control what we show on the website. You can switch between the tabs and cards layout for the artwork category section with just a few clicks, so we can always come back to the artwork category section later.

Artworks Page and Category Details Page

I also created the Artworks page, which serves as an introductory page for all the different categories. On this page, we use the tabs layout for the categories that I created earlier. Since these are reusable components, I can place them wherever we like on the website.

I have not yet started working on the detailed pages for each category, but we will be covering this in the next episode.

Auditing and Performance

Let’s check the auditing status of the homepage so far:

• Desktop: Almost perfect, with a slight improvement needed in SEO.
• Mobile: Good, but performance can be improved. I’ve made some changes, like adding smaller images for mobile, but there’s still room for improvement.

Next Steps

In the next episode, I’ll be working on the artwork category detail page. Stay tuned for more updates!

Thank you for following along with the progress on Anna's new website. Your feedback and suggestions are always welcome!