designsbyben.co.uk
Photoshop Illustrator Invision
Devices mockup

Spidersnet Advanced 4

‘Advanced’ websites are the mid-weight package Spidersnet sells - a customer is confined to a template, but has control over the colouring of elements, and imagery. Having designed the second and third templates a few years prior to this, I wanted to create something that brought the brand up to date, but still felt somewhat familiar.

The most obvious starting point was the form elements: enlarge, soften the edges and make the font a few shades lighter and bolder. These are sorts of subtle UI differences that have come in in the last few years. That and some increases in heading and body text to make it more legible across devices. A good start.

Homepage
Website navigation

One of my current concerns was customers using flat text on images in slideshows, which inevitably would become too small to read on smaller devices. My proposal was to allow for html heading, body text and button to overlay the slideshow image if used, which neatly drops below the image on mobile (this also carries the added search engine optimisation benefits). This feature was also used with icons on the promo blocks, which, if no icon is selected, would display just the image, but if an icon is used, would overlay in a similar way to the slideshow above it. The idea enabled greater theme customisation not seen prior to this.

I also dropped the traditional header and body layout the previous themes were using, in doing so utilising the full screen space available outside of the grid, the header becoming part of the inital frame of the homepage slideshow.

Search result examples
Vehicle details on iMac

Above: A vehicle search result, and the top of the vehicle details page. Both received significant improvements over the previous themes, including better grouping of elements, tidied font hierarchies and consistent looking page elements. The use of icons also made their debut in Advanced 4, making the statistics more digestible.

The nature of the project bought about its limitations. Coloured elements had to be grouped for colour picker functionality in the back end, and all situations of colour usage had to be considered, limiting what could be used where. Considerations also had to be made as to how text would behave if images were or weren’t added, and if a dealer would want to use all available theme options at once. This lead to some huge mockups; a real challenge to keep looking consistent.

Macbook with Photoshop document

Another limitation was the large span between each breakpoint. Trying to keep features looking sensible, that may contain lots of or no text, across a broad range of widths is very difficult. In one instance, the best solution for the promo blocks on tablet display was to offset them by 1 column either side to keep them proportionate. Also, the lack of ‘x-small’ grid in Foundation 5 meant that creativity was limited when it came to the mobile mockups. 768 pixels down to zero is quite a difference!

The previous templates were later updated to bring in line with the advances made in this project, a testimony to how Advanced 4 took Spidersnet’s template sites forward.

Custom icon font large

An Iconic Afterthought

Advanced 4, like Spidersnet’s other solutions, uses Fontawesome for its icon font set. This works adequately, but I felt some of the metaphors were a bit watery. I wanted Advanced 4 to take our product the extra mile, and felt this was a small detail that would add to that. In spare time after the handover to development, I crafted a set of icons that were specific to the spec items on the site. An engine icon for engine type, as opposed to an electric bolt? Or a fuel pump for fuel type, as opposed to a water droplet?

I created 2 versions of these; one for scenarios where larger icons were needed (pictured), these contained more detailing. The second type were for use with inline text (like the spec items mentioned earlier), and had more defined features so as not to be lost at the base font size.