The Artful Living website serves as the primary online hub for a talented artist. Through this portal, visitors are introduced to an exquisite collection of handcrafted products made using resin painting techniques.

The website showcases both available and past creations, providing customers with inspiration to request either an existing item or a unique, personalised creation from the artist. Contacting the artist is made easy through a contact form. The website design embodies the essence and ethos of Artful Living, showcasing artworks in a simple yet delightful manner for prospective buyers to peruse and acquire pieces that resonate with them.

Visit the deployed website here.

Objective: Introduce the artist and showcase her work, while providing a means for potential clients to inquire about her services. Display a gallery of her work, and ensure the website is visually appealing.

Scope: An 'About Me' section to introduce the artist, a gallery showcasing the artwork, contact form for inquiries and website aesthetics.

Structure: A simple three page structure with easy navigation, accompanying the visitor from the introduction on the homepage to the gallery and then to the contact form.

Skeleton: The interface design facilitates simplicity and purpose. The home page introduces the visitor to the artist and her work, the gallery showcases the artwork in two separate collections that are easy to look at without clutter and the contact page presents the available means for contact in separate clear sections.

Navigation is intuitive and available through a navigation bar at the top of the page.

The layout of the pages were done with pen and paper to sketch the elements and the look of the pages, while commenting on the features and functionalities of the elements to be implemented on the sides of the sketches.

Surface: blue and violet colours that convey calm with darker tones, a combination of 'Libre Baskerville' font for the headers and 'Source Sans 3' font for the text which go together really well, round edges of the elements convey smooth and calm, the content minimises cognitive overload and is intuitive to navigate.

• The website design is simple yet visually pleasing and features rounded edges and non-cluttered layout presenting the essential information.
• Dark colour scheme conveys movement and calm.
• Responsive design adjusts to different screen sizes.
• Accessibility ensured through aria-labels and alt descriptions.

• The header features a hero image generated using DALL-E 2 by OpenAI to mimic the essence of a resin painting and evoke a feeling of calm for the viewer through its purple and blue hues.
• Title and subtitle convey website's purpose and artistic philosophy effectively.
• 'Libre Baskerville' font-family by Google Fonts used with 1px letter-spacing for a relaxed reading experience.
• Font-size of title and subtitle scale with screen width for consistent appearance across devices.

• Consistent header with navigation bar on all pages
• Navigation bar placed under page title for artistic feel and easy access
• Links to home, gallery, and contact pages for simple navigation
• Responsive font size and spacing for different screen sizes
• Active page highlighted with underlining in navigation bar

• Offers an introduction to the artist and her creations.
• Invites the visitors to explore her artwork and reach out to her for purchases and custom designs.

• Has a darker colour to emphasise calmness.
• Quick access to connect via social media:
  • Instagram for current work and updates.
  • Etsy for direct purchases.
  • WhatsApp link for direct messaging.
• Links open in new tabs for easy browsing.

• Gallery divided into sections by category.
• Each section displays artist's work in photo collage.
• Responsive design with 2 columns for small screens, 3 for screens larger than 800px, and 4 for screens larger than 950px.
• Collage presentation is visually engaging yet simple.

• Artist message makes it easy to contact her
• Contact form asks for name, email, phone number and category of product
• Form checks validity of data before submission
• Drop-down menu for category selection useful for artist statistics
• Static address provided for direct contact or gallery visit

• As a first-time visitor, the website's title and subtitle strongly convey its purpose through clear language and cohesive color theme.
• The artists welcoming message and the introductory video effectively communicate what the presented work is about and what the visitor can get out of this experience
• The video does not auto-play as a good user experience should be
• The footer provides links to social media that open in new tabs, allowing visitors to connect without interrupting their browsing experience on the website.

• Embarking on the journey, the visitor navigates to the gallery from the navigation tab
• The gallery loads quickly thanks to compressed images that still offer high quality viewing
• The gallery sections are responsive to different screen sizes

• The message from the artist on the contact page makes it easy and fun for the visitor to send an inquiry
• The form has as little required fields as possible and the text area is big enough and inviting for the visitor to use
• The phone number and address are available as well if the visitor prefers those.

The website helps both the artist and the visitor to achieve their goals while enjoying this online experience.

• The website was tested on the following browsers: chrome, firefox, opera.
• All pages of the website were viewed on different screen sizes using the chrome devtool.

• The W3C Markup Validator returned no errors.
• The W3C CSS Validator returned no errors

• AI's help in writing text (ClickUp).
• AI's help in creating hero image (DALL-E).

• The knowledge I gained from Code Institute course.
• The help and guidace of my mentor Marcel.