As part of the website, I'm looking into the design of e-commerce websites, to see what's appropriate. I want to see what works, and what doesn't work, and how I might apply the designs and the styles to the website I'm designing for codex books.
// Privateer
I first looked at Privateer's website, a small e-commerce, website which markets cycling related goods. You're greeted with a full page image, which changes every few seconds, marketing a project on each slide. The navigation bar, and the logo are applied to the header of the website.
The header features links, which spread out to the other pages of the site, the navigation is fairly clear, and you can see then easily on the home page, using the white on black, as a simple contrast. The menus, when hovered over, offer a drop down menu, which you can go a specific search field within the product page, for easy navigation.
The main image and the navigation bar remain static, whilst the lower content area scrolls, floating on top of the image, covering it as you scroll, revealing additional content.
The page continues to scroll to reveal more images and more content. The navigation bar remains to be static, throughout the entirety of the website. The images all extend to the edges of the screen, which gives the website a modern look, in my opinion. The full images really help to market the product, in my opinion.
The footer of the website is well designed, and follows the consistent grid throughout the website. It features alternative links to the pages, and to other external sites. It also has a search bar, to filter through the website, respectively.
Finally, the product page, which features a tiled layout, following the grid system throughout the website, there is a drop down menu which you can use to sort the products, for easy navigation.
// Bold & Noble
Bold & Noble is another example of e-commerce website, it uses an image slider on the homepage, which displays the product on a large image, taking up the majority of the page. A gird is clearly used as the images and the type like up respectively, with a the arrows being separated from the image by a gutter, the same width of that separating the links in the navigation bar.
Each link had a drop down menu, which spans the width of the page, and follows the grid system. It allows the user to navigate around the site in a few simple clicks, rather than scrolling through thousands of pages, and clicking hundreds of links, whilst using endless search fields to find a specific product.
The top of the page, it has a currency guide, which allows the user to suggest the correct currency for them. It makes the site easy and usable for international users. Rather than going to an alternative store, this updates the prices, without losing your place on the site - I've not seen this before, It's rather handy.
The footer of the website displays social media links and external links to other sites. It follows the same grid system as the rest of the website. It displays copyright notices and a newsletter sign up, which might be appropriate, of my content, as the client will be able to update existing buyers and collectors with existing products.
The site seems to use an off-black and white as the main two colours for the site, being applied at different opacities on top of images, it works quite well to imply the feeling of sophistication. The arrows which navigate the image slider turn black upon rollover. It looks very modern, and extremely elegant and professional.
The website also links to a blog, when you've selected a page, I've noticed the link turns a green/yellow colour, which works with the basket count and the checkout button, and the third 'highlight' colour on the website. Codex Books would like to work with a french blue on the site, and this style of design, using a colour to highlight specific parts of the site might work well. (Back to the blog) It uses the grid system and works in a tiled fashion, vertically scrolling, using a preview image and title of the post.
The website's store page follows a similar layout to the blog, a tiled layout, with a vertical scroll. Displaying the product and the price under a large image of the product. Colour swatches are displayed underneath, to show the variants of the product.
The final page I looked at is the story page, which features large images through, with text overlaid. The pages uses a power scroll to navigate through the images, to tell the story.
// So Worth Loving
So Worth Loving is another web store I looked at. The homepage features a standard layout, however, to do the minimalist nature of the website, to looks rather effective. The logo is displayed in the centre of the header, with links below, and a search field.
The products are displayed using the grids, four horizontally, the rest in these vertical lines. Although, the spacing seems to be off. The spacing between the free shipping and the products should be the same as the free shipping and the nav-bar. Although, it could be double spaced, which might be why it doesn't look terrible.
The blog for the website doesn't match the rest of the design. It looks like it was designed by a different agency, or two different people, with no communication. Perhaps either the site or the blog is out of date - we'll never know.
The contact page is rather odd. It uses a large image with an email address on it. Rather than provided a form to fill in, which sends directly to the companies' email account.
The websites footer contains quick links to the pages, and the social media accounts. It also appears to have an (inactive) twitter feed, and a news letter subscription engine. Whilst displaying the copyright notices at the bottom of the page, which will allow users to become informed of the payment methods.
Leave your comment