Designing – Building From The Wireframes
In our last blog we took the initial project brief and created the wireframes that would guide us in the design.
The brief called for a clean design with a strong emphasis on product images. The goal for this stage was to build in the brand and create an attractive overall design that didn’t compromise the simplicity of the initial wireframes. Of course a few things were tweaked here and there and not all things translated directly from the wireframes to the design. But overall the main ideas were kept in place.
The brand only has one main colour, a vibrant pink. This created its own challenges with the design as differentiating different areas of the design can be difficult without using color. In the end this design choice was a great restriction as it meant we had to think more about the user and priorities on a page. Sometimes restrictions can aid design, as they create a more focused product. Liberal use of white text on black allowed the main messages of the homepage to be easily seen. This was punctuated with pink call to actions. The header was kept very simple and with such a simple navigation it allowed us to bump up the font size keeping in line with the H1 font size. Our initial ideas were that we were going to have the main copy on the homepage in square boxes. When designing however, it became apparent, that this wasn’t soft enough, and created some harsh angles. So it was decided we would use a circle. This small decisions then carried on through the rest of the site with the buttons, add to cart drop downs, and smaller product images.
In essence the design stayed true to the wireframe concepts and this continued on the category page. With such a small amount of product on the page, there wasn’t much to design. A few design flourishes were created, for instance the view button that appears on rollover of a product. Keeping it off the page, and only when the user interacts with the page, was a decision taken to keep the visual clean, simplicity was paramount. It also means there isn’t too much to write about here!
The product page was slightly more complex, but the changes from the wireframes were still subtle.
The main product image was kept very large, with the 3 thumbnail buttons on the bottom. A small line was added to denote the active image. Keeping the add to cart and price high on the page was important. We began with it just floating on top of the image, but later a circle similar to the one used on the homepage was added to bring the price off of the page. Another change to the original wireframe was the addition of colour choices to the product page. The products chosen early on in the brief did not have multiple colour options and this was added later on after the project brief and wireframing was completed. A small box out with colour options was added to the top right hand side. Other things that required design were some of the functionality additions to the pages. This included a drop down displaying the cart contents when the shopping basket icon is hovered over.
Along with the other many design decisions made this helps the site to remain simple and only give the information to a customer when and if they decide they require it. This was the same thought process used with the Added to Cart info box. Moving to the cart page after a product has been added to cart can be time consuming and frustrating to customers buying multiple products, so we simply brought in the choice when the customer needs to make it.
This design solution informs the customer that they have added a item to the cart and gives them the option to proceed to the cart page or simply continue shopping.
We found we were adding many features like this to the site throughout this phase as it adds simplicity to the site, which was an important part of the project brief. Also at Red Monkey Goo we care about the user and understand that making a site a joyful experience is important. Respecting your customer base and understanding their wants and needs then most importantly, building that into the site is key. Trying to win them with cheap tricks and dark practices is a very short sighted strategy. One that we do not stand behind.
In our next post we’ll show more of the finished design, as well as the beginning of the coding stage.