Made by Nomad

Project Summary

Made by Nomad is a personal site of mine. I've made jewelry for years and decided to sell some while I was in school to make a little money on the side. I thought it would be nice to have a site to display all of my pieces, so, of course, I built one for myself. Each piece was linked to product pages on Etsy for purchasing.

The purpose of the site was to display all of my pieces for sale, give info about shipping and return policies, and provide a way for people to contact me for custom jewelry designs. It needed to be a simple, clean site that showcased my jewelry while providing the necessary information.

What I Did

  • Wrote Content
  • Photography
  • Photo Editing in Photoshop
  • Logo & Graphics in Illustrator
  • UI Design
  • Front-end Build
  • Back-end Build

Technologies Used

  • Photoshop, Illustrator
  • HTML
  • CSS
  • JavaScript, jQuery
  • Vanilla Masonry plugin
  • PHP
  • responsive site

UI Design

1440px:

Made by Nomad 1440px wide

320px:

Made by Nomad 320px wide

690px:

Made by Nomad 690px wide

Front-end Build

The build of this site was very simple. The only tricky part was figuring out how to get the images on the homepage to tile without weird gaps. I learned the true limitations of the CSS float attribute while working on this project. I tried using CSS3 columns but wanted my images to align horizontally instead of vertically, so I searched for a different solution and found the Masonry plugin. It was exactly what I needed, so it was as easy as including it and adjusting a couple settings.

I used jQuery and CSS to get the figcaptions to display on top of the figures upon hover. I made sure that the default state of the figcaptions was to display below the figures if JavaScript was disabled.

HTML:

<figure>
    <img src="img/jewelry/B001b.jpg" alt="necklace" />
    <figcaption>19" necklace made with gold–filled metal and brown cultured baroque pearls. <span>$48.00</span></figcaption>
</figure>
<figure>
    <img src="img/jewelry/A002b.jpg" alt="earrings" />
    <figcaption>Gold–filled earrings made with a soft, glowing chalcedony quartz and deep, colorful tourmaline. Approx. 2.5 inches. <span>$41.00</span></figcaption>
</figure>

jQuery:


//automatically hide figcaption & no background for figures
$('#figures').find('figure').css({'background': 'none'});
$('#figures').find('figcaption').hide();

//change css upon hover
$('figure').hover(function(){
    $(this).find('figcaption').addClass('altFigcaption').animate({opacity: 'toggle', height: 'toggle'}, 'slow');
});

The site was also built responsively. The code was very simple in structure, so it was pretty easy to add media queries to adjust it for smaller screen sizes. If I had started this project more recently, I would have built it with the mobile first approach.