One of the things I love to do is design fabrics. I first learned to make repeating patterns for web design, but when I started sewing, and then discovered Spoonflower to print my own fabrics– a whole new world was opened to me. My patterns are bright and eye-catching, and I’m proud of them. Spoonflower has a nice website, but it doesn’t really show my designs in their full glory. So, I wanted to show them off nicely on Guerrillathreads.com. But…
I didn’t want it to look like the other products sold on the site. That design also leaves a lot to be desired when it comes to a real “onscreen swatch.” With the brand identity already in place to work with, and some brief and simple goals in hand, I set off to redesign my fabric pages.
Goals
To show my fabric designs larger and reasonably accurate on my website, instead of the regular product display or the Spoonflower product display. I also wanted to:
- Feature the repeat large and in the background, should watermark if possible.
- Tile the background, don’t scale it to fit– the point is that it repeats.
- Consider the labels used in professional swatch books like those from Fabricut and Robert Kaufman, imagine it.
- Link to the Spoonflower product where customers can buy fabric yardage in all available fabrics.
- Link to the whole Spoonflower shop with all products. Explain it and use the shop banner button supplied by Spoonflower.
- Use the “Related Products” feature to offer other color choices of the same fabric, or similar fabrics.
Technical Needs
- Modify the WooCommerce product template for all products of a select category (fabrics).
- Use an optional custom field to insert the page background. If no value supplied, the fallback of a text description will be used. Every fabric WILL have a bg image though.
- Like the homepage, it needs to grow the height of the first section to the height of the browser window– whether on desktop, tablet or phone. This is essential to the design.
Sketches
While there’s lots of tools out there for making wireframes, many of them interactive, sometimes it’s better to use a pencil and paper, or whiteboard. I use Autodesk Sketchbook for wireframes that don’t need to be interactive, like this one. Their tool set is pretty powerful, but also really simple things such as ruler guides and selection/transform features. With hand drawn wireframes, you can make things a little more eye catching to the audience (like product owners), but you don’t want to make any commitments to design elements and decisions at this point, so you’re really just moving the viewer’s eye and emphasizing actions.
I start by noting my goals and technical needs. Then I draw the desktop version, very rough with the ruler tool to lay lines and boxes. I’ll use a couple tones of gray, a highlight color, and maybe a color for notes about the visuals, but try to let those speak for themselves. Then I scale, cut, redraw and compose the mobile versions, making more notes about how things function if necessary. These wireframes are very simple, and that’s okay. It’ll come together and look great because we’ve created a blueprint.
Code
Suffice it to say, I have coding skills. I won’t share the code here, but it’s definitely custom functionality. The gist of it: a background image is set on a WooCommerce product, along with some other specific settings for the product. This product is also an affiliate product, so you can’t put it in your cart and it links off to Spoonflower to make a purchase. Then, the product’s display is modified.
Live Site
Checkout the screen captures below. The scroll bars are a glitch of the screen capture plugin, but you can see how it has translated from the sketches. NOW, I look forward to putting up a fabric every time I finish one. You can check out this design by viewing any of the my fabrics found at Guerrilla Threads.
