Leanne Nedeau

Creations by Terri Merrick

ROLES

• Concept
• Research
• UX Design
• Branding
• Visual Design
• Front-End Development
• Back-End Development

PROJECT OVERVIEW

Creations by Terri Merrick is a gallery site for a local jewelry artist. The home page offers an Admin login, which allows the artist to login and add, edit or delete product listings right from the site. This is accomplished through the CRUD method with PHP and a MySQL database. 

All product photography is original. 

You can log into the admin portion of this site using the Username ‘Guest’ and the Password ‘Password’.

UX Highlights

SITE MAP

This project visually simulates an eCommerce site and has two main sections—the guest section and the admin section. 

WIREFRAMES

Simple wireframes were created before visual styling was applied.

Visual Design Highlights

BRANDING

Terri Merrick’s personality and jewelry exudes creativity, an appreciation for nature, and a touch of whimsical. I attempted to convey this through the visual design using muted colors, a whimsical typeface for headings, and a utilization of ample white space to direct focus where it belongs—the beautiful pieces of handmade jewelry.

COLOR PALETTE

The color palette was compromised of muted colors, a dark grayish brown and white. 

TYPOGRAPHY

Open Sans—courtesy of Google Fonts—was chosen for the body copy and several secondary headings. Open Sans large apertures and consistent line width offers a very legible typeface. 

To contrast the clean even lines of Open Sans, the Madelyn typeface—courtesy of Font.com Monotype subscription—was chosen. Madelyn’s hand-drawn aesthetic, along with its chalk-like appearance offers a whimsical touch that is representative of Terri and her creations.

DESIGN COMPS

Design mockups were created for all unique pages within this project.

Development Highlights

FRONT–END

HTML5, CSS3, JavaScript and the jQuery UI library were used in the front-end development of RinTin. SCSS was used to write the styling rules and compiled.

RESPONSIVE DESIGN

Mobile first design method utilized. The responsive breakpoints were built from scratch using @media queries.

PHP & MySQL

PHP and MySQL databases were used for several features of this website.

• The creations catalog page was created through a combination of HTML and PHP. PHP was used to pull the product image and price from the database and sort the products by category.
• The product pages were also created with HTML and PHP. Again, the PHP pulled the product details—name, image, description, price, and dimensions—from the MySQL database product table.
• The user inputs from the contact form were emailed to the artist through use of PHP. 
• The admin Login and Logout pages were created using PHP.
• The Admin or Product Listing page was generated through use of PHP and HTML, similar to the creations(catalog) page.
• The Add Product and Edit Product pages were also created through use of HTML forms and PHP to relay that information to and from the MySQL database.