Monday, October 28, 2013

E-commerce Web Design: Product/Service VS. Layout

I came across the article 10 Rock Solid Website Layout Examples which has great explanations and examples of different web layouts. Johnson gives an example of a grid and next he gives an example of an actual website to compare it to. I encourage any designers to check out this article for inspiration or just to gain some general knowledge about website grids. My question is what kind of layout does a business that sells products likely to use and what kind layout does a business that sells services use. How might the layouts be different from each other? I will start by explaining examples of different layouts and then talk about what types of products are more likely to use that layout.

Johnson's website layouts:

Sometimes the most simple of things can make the most impact. I believe that this is very true for all types of design, especially website design. The arrangement of elements on a page is something that can make or break a sale. The size and location of the call to action, using an intriguing photos at the top of the page, the arrangement of objects in the virtual store, and the location of the shopping cart button can make a big impact. An example of a product website would be clothing, amazon, sports gear, fishing supplies. Examples of service websites would be photography, technology sites, design, and marketing solutions.

Three Boxes
You may be thinking this is far too simple, but actually it is very effective. The three boxes can be filled with graphics or text. The larger box can be something like a slide show that features different products or services. The small boxes at the top can be used for logos, navigation, logins, and shopping cart links.
Product or service website? This website layout can be used for both e-commerce products and services. Products can be well-represented through images and if it is a website that provides services, professional photos that represent the business could be used. This would work well for the homepage of a product website and it could possibly be the product listing page of both products and services.



3D Screenshots
This layout uses a 3D slide show effect that one can flip through. The slideshow can consist of screenshots, photographs, and text. The small boxes at the top could include the logo, navigation, and shopping cart options.
Product or service website? This website layout can be used for both e-commerce products and services. The sideshow would be able to feature product and services images. This work work best as a homepage of a product site and it could be the product listing page of a services website.


Advanced Grid
The advanced grid can consist of many different elements. Once again, the gray boxes represent text or graphics. The boxes at the top represent logos, navigation, login, and shopping cart options.
Product or service website? This type of layout would work best for e-commerce websites that sell products. If there are many products, like a clothing store, there is a lot of room for creativity and being able to fit a lot of products on the page. This type of layout would work best for a homepage or even a product listing page.


Featured Graphic
The featured graphic website consists of a simple photo with text that relates to it. It is great for a site that does not have much content or graphics. The smaller boxes would consist of a logo, navigation, and shopping carts.
Product or service website? This would would great for a e-commerce business selling services. A service such as marketing solutions. This could also work well for a website selling one single product. This would work great for a homepage and an informational page.



Five Boxes
This is an advanced version of the three box layout. The large boxes can consist of graphics or images. The small boxes at the top could be for a logo, navigation, shopping cart, or login information.
Product or service website? This website layout can be used for both e-commerce products and services. If it is a services website, there would be a lot of content to put up. Different products and promotions can be displayed for a products website. This would work well for a homepage.


Fixed Sidebar
This layout uses a vertical navigation bar. This makes the access to the bar available at any point on that page. Any of the other layouts can be used on the right side of the page to display the product or service.
Product or service website? This would work for a product or service layout, mainly because you can use any of the layouts mentioned for the rest of the page. This would work well for any page on the website.


Headline and Gallery
The headline and gallery layout can use graphics or text in the gray boxes to display content. The small boxes on the top are for logos, navigation, log in, and shopping cart options.
Product or service website? This website layout can be used for both e-commerce products and services. It would work great to display products and photography/design options. This would work well for a product listings page.


Featured Photo
The gray space would consist of a photograph and the white boxes are for navigation.
Product or service website? This would work best for a services website, especially photography. The photo would be displayed in gray and then there could be a slide show app. This would work best for a homepage.


Power Grid
This is the most advanced grid, but it provides a lot of information in an effective way. Information can include photo, video, and text.
Product or service website? This layout would work best for a business that sells products. The would be able to display a lot of information if they have many products. This would work well for a homepage or a product listings page.


Full Screen Photo
This layout consists of an image in the background. The gray contains the content of the page.
Product or service website? This would work well for a services website such as photography. It would be great for a homepage view.



2 comments:

  1. I just found this blog and have high hopes for it to continue. Keep up the great work, its hard to find good ones. I have added to my favorites. Regards, from GrafWeb.

    ReplyDelete
  2. Thank you for the encouragement Kate. Unfortunatley I havent been writing for over two years but will consider your comment :)

    ReplyDelete