ARTIST WEBSITE
Website UX Design

Design and code a website using CSS, HTML & Javascript.

PROCESS & OUTCOME

The website design process started with wireframes and mockups to plan layout and content. Development began with a template, later customized with features like rounded buttons and vibrant colors inspired by the artist’s work. A cohesive color palette and font styling supported visual hierarchy. Usability features include consistent navigation, sticky headers, and a to-the-top button.  

The website was built using HTML, CSS, and JavaScript with a customized W3 template, designed to highlight the artist’s work in a scrollable, user-friendly format. It includes eight pages covering the artist’s profile, macramé pieces, process, tutorials, blog, commissions, and contact info. A minimal, cheerful color palette and League Spartan typography create a visual hierarchy and maintain focus on the art. The overall design prioritizes clarity to create an engaging yet accessible portfolio.

Mindful Craftsmanship
Each of the artist’s featured macramé pieces is handcrafted with intention, reflecting a commitment to mindfulness and the therapeutic aspects of knotting. This practice serves as both artistic expression and a form of grounding.
Community Engagement
She values building artistic communities, fostering connections among creators, and sharing knowledge through tutorials and workshops.
Intuitive Creator
Nikole's journey as a fiber artist began in 2018, driven by personal exploration and a desire to find meditative practices through art. Her approach is deeply intuitive, often allowing emotions to guide the creation process.

Authenticity
Her work is deeply rooted in genuine emotion, personal experience, and cultural heritage. Her website reflects this commitment to authenticity by offering an honest, relatable look into her creative journey. This approach creates a strong emotional connection with visitors, making the work feel accessible, memorable, and meaningful to a wider audience.
- Art Direction
- Layout Design
- UX Design
- HTML
- CSS
- Javascript
- Indesign
- Illustrator
- Github

WEBSITE IN ACTION

LOGOS

For the wordmark, Kepler Std Condensed was selected for its refined elegance and structural clarity. This typeface strikes a balance between classic serif sophistication and modern restraint, aligning with the brand’s identity as both reflective and contemporary.

The logo’s varying thickness and elegant serifs give it a confident and timeless feel, reflecting a brand built on care and connection. Kepler’s font style creates a clear yet friendly voice, echoing a creator who is both thoughtful and involved with their surroundings.

TYPOGRAPHY &
COLOR PALETTE

The color palette uses warm tones to create a welcoming atmosphere that complements the artistic and community-focused content. Rosy evokes warmth, comfort, and expression. Misty conveys trust, tranquility, and professionalism. And Pear adds a welcoming vibe full of energy and optimism.

WIREFRAME SKETCHES

Before building the website, I created wireframes to map out the layout and structure of each page. This allowed me to focus on functionality and user flow without the distraction of design details. Wireframing helped identify key content areas, prioritize information, and ensure a cohesive navigation system.