I normally don’t get very personal in this blog, but one feature of the new Artisan Shopify theme really has me really excited — the new vector shapes and overlays!
I’m not quite sure, other than just being a good old design nerd, what I love so much about this feature. Maybe it’s just how flexible they are. Or maybe it’s how the incredible design and development team here at Out of the Sandbox put their heads together to come up with such an elegant way to offer flexible design options. Or maybe it’s because they are just so darn cool.
But I digress.
Getting back to the topic at hand, the new shapes and overlay shapes feature in Artisan is all made possible using a technology called Scalable Vector Graphics or, as they are lovingly known as in the design community, SVG.
What this means, in simplified terminology, is that the shapes are not made up of bitmapped pixels — like a typical PNG or JPG file. Instead, a set of mathematical instructions and coordinates tell the browser what shapes to make and what color they should be, all the way down to how many sides they should have.
In a sense, instead of requesting an image from a server, the browser takes care of creating the image on the fly in the background — and all of this happens in milliseconds.
If you’re familiar with Adobe Illustrator’s ability to handle vector graphics better than, say, Photoshop, then you’re already familiar with some of the concepts behind SVG.
Using SVG has several key advantages:
- In general, it’s a much more efficient and fast way to generate solid shapes over creating bitmapped image files. Since the image data is stored as X and Y coordinates, rather than pixels, there’s no file to download and rendering the images is typically quick and efficient.
- Because the shapes are rendered dynamically, you can experiment with different shape settings, colors and other options and see the results almost instantly, rather than having to use a program such as Photoshop to change the design, save the file, upload it to Shopify and preview it — only to find out you don’t like how it looks and have to repeat the entire process again.
- SVG images are generally more crisp and clear — particularly on high resolution devices such as Retina-enabled Apple devices. The calculations that go on behind can easily create large image files without adding pixels, which are typically what make files larger.
Many of Artisan’s Shopify theme sections use SVG shapes as a background element, accent or overlay.
All shapes come with a variety of options, including color, opacity, size and what shape option is used. Since most of these are implemented on the section level, each section can have unique settings that are independent of each other, making it possible to really liven up your homepage with a myriad creative looks.
In addition, when used in the background, the shapes use a parallax-like effect as users scroll down the page — almost making them feel like bubbles or confetti suspended in air. As an added bonus, this effect also works on most mobile devices, again thanks to the flexibility of SVG.
It’s important to note that, by default, all theme styles of Artisan — Phoenix, Victoria and Barcelona — all ship with shape colors set to gray, so don’t be surprised when you to start out. That said, it’s just the matter of a few clicks to start exploring all of the options and creating an awesome color palette.
When used as a background overlay, the shapes have slightly different options that background shapes and also automatically handle placing text in the best position for legibility.
Artisan also incorporates SVG shape overlays in the banners at the top of collections, pages and other content. It’s important to note that these banners must share the same overlay shape settings, though the heading text and featured image still change on a case by case basis.
Although not related to shapes, these banners also have an added bonus feature — an alternate image can be specific for mobile users and, for maximum legibility, the text moves below the image inside of a box with your choice of color.
Incidentally, a more subtle use of shapes involves unique, vertical lines that can optionally be used above and below section headings. These elements give your site a sense of elegance, but also emphasizes to users that there’s more see as your scroll down the page.
The dynamic nature of Artisan’s shape features are quite extensive and a bit difficult to explain in writing — or even display all the possibilities in examples or our demo stores, so one of the best ways to explore all that’s possible is to start using a trial version today and experimenting with different combinations of settings.
