Slider Syncing

There is another way to implement slick which is rather clever and will work well with the product page and the original designs,  this comes in the form of slider syncing. essentially there is two sliders both have the exact same images, but one acts as navigation for the other. It’s a bit of web design trickery. the jquery makes the larger image area display the active image of the lower image area. A bit of styling was also done to create the illusion of navigation. When really the sliders are exactly the same, with the same image for both.

which looks a-something like this:

Problem Solving With Slick

With slick comes the arrows for scrolling through the carousel, this creates a bit of an issue. In the case of this project, it would be nice to have a full screen slider to show off the clients products and really give them a lot of space. Because of this, it is pushing the width of the page ever so slightly. Which, if you’re an OCD maniac like myself this creates a problem.

To resolve this, there were two solutions, put the whole thing in a wrapper and style said wrapper so that the the images and arrows would only go so far, or drop the arrows entirely. The latter option was picked. This was because the concept of a carousel is now recognisable to users, plus the slider comes with “slider nav”, in the shape of dots. this creates enough user feedback to warrant the removal of the arrows.

Slick Sliders – Client

For this project there needed to be an image area for displaying products. This required a responsive carousel that could be easily implemented with foundation.

Introducing – Slick Sliders! http://kenwheeler.github.io/slick/

Slick is an easily integrate-able slider that works with foundation, simply download the code reference the scripts at the bottom of your page, then make sure t create the same class for wherever it is going, to make it work. Which ends up looking like this;

The Grid – Client

The first thing to sort was implementing a bit of content to the site, using foundations grid system this is fairly simple. it’s simply a case of finding the right class, which again is easy enough to find out when one has a look at foundations comprehensive documentation. This then ends up looking something like this:

http://foundation.zurb.com/sites/docs/

The Nav – Client

Because of the way foundation comes, it was a bit of a nightmare to create the navigation I wanted to, without essentially overwriting their entire styling, for buttons. Until I figured this out however i was crating  simply trying to find each individual class and changing that part. This took far to long so what I actually ended up doing was commenting out there button styles and essentially formatting my own, which looks a little something like this:

 

 

 

 

 

 

 

That ends up turning the left buttons into my own on the right

Downloading Foundation – Client

The decision was taken early on to use foundation for it’s fluid grid system and it’s responsive design. Downloading foundation gives users certain styled elements. this includes buttons the grid system and some other elements. Quite a lot of downloading frameworks means i’ll be overwriting some of the styling but that is to be expected.

Client Appraisal

After producing the designs, it was time to show the client and get his views on the overall appearance.

As this is a moderate sized project it was important there was more than one design to show the client, as to do less would be a little unprofessional and bad practice.

The client didn’t really like the navigation layout on version 2, and favoured version 1. Which works out well from my perspective as I believe this will transfer easier to mobile. Furthermore the client favoured the full screen design of version 1’s products page. Overall the client preferred the look of version 1 . Which from my perspective was a good thing, as it will look better mobile. the full page imagery and scrolling pages are much more on trend in the web right now. Whats next is to create some high fidelities for mobile and then on to the build!

MKM Group Page

the MKM group page details the standards of which the company operates and there relation to THE MKM Group, that being the other parts of a wider company . with this page the challenge was producing a very readable experience as it is text heavy, so the kerning of the print has been increased and also line height. Ultimately it was about giving the text as much room as possible.

Version 1

Version 2

Supply Chain Page

The supply chain management page is another text based page, it details more about where the company sources material and also information about delivery options. For this page i decided to implement product and another button to the products page as an enticement.

Version 1

Version 2

Products Page

The Products page was a little more tricky, The client requested and area whereby there are the newer products displayed whilst still having an read with older products,  Both versions have a different aesthetic, however both are tailored to suit foundation, with columns being a feature of foundation it was important the design would match this in a sense. Version was a large area for new proucts while scrolling down, there two columns with a list of products sold and the older products. While version two has been split in right and left, new on the left, old on the right.

Version 1

Version 2