Images, showcases and buttons are all important elements for your website design, but they are all secondary considerations. See your vision come to life from begging to end by starting with a customized site layout. We'll show you how.
Always start with a planCreating a new design for your online store may sound like just choosing the photos, fonts and colors you want. While those elements are incredibly important to establish your brand and set you apart from the competition, the very first step you should take in thinking about your site is making a plan for the layout.
The layout of your site is like the frame of a house. Before getting into things like bricks, trim style and paint colors, builders frame out windows, doors and the floor plan of a new house. Web designers do the same thing on a new website.
The picture below shows a site design at the very beginning. We call it a wireframe, and it marks out where information, photos and navigation menus will go.
In order to come up with a good plan that will serve your business and increase conversions, you need to do a little research and ask a few questions, like
- “How will people navigate my store?”
- “What is most important to my customers?”
- “What kind of photography do we have?”
- “What needs to be visible from every page?”
Let’s take a look at two very unrelated businesses to see how their layouts differ based on their needs.
The site on the left, Stens Parts Warehouse, sells lawn mower and power equipment parts. On the right is Delaware Valley Grown Farm Share, who works with farmers to provide fresh, local food for their customers. These merchants differ in everything from business model to target customer, so it’s no surprise that their websites would have totally different layouts.
Here are some quick wireframes of these sites without any styling or photos.
Stens Parts Warehouse
Stens’ target customer is someone who will likely know what part they need when going to the site, so easily moving from the homepage to product page is important. Here are some things in their layout that work for them:
- They have a lot of top level product categories, so it makes sense that their plan includes a left navigation menu that can hold them.
- Stens offers flat rate shipping, which is important to customers who may be ordering heavy parts. They make that benefit very visible by having it in the header of the site and as a graphic on the homepage.
- There is a section of featured products on the homepage where popular and top selling parts can be easily accessed.
- Contact information and a live chat tab are in the header and footer so they are available from every page for customers who have questions about the parts.
Delaware Valley Grown Farm Share
For Delaware Valley, the target customer will probably want to learn some things from the homepage rather than jumping straight to a purchase. Informing potential customers on how farm sharing works and the benefits of buying local foods is essential to Delaware Valley’s business model, so their layout reflects that.
- They don’t have too many top level categories, and large beautiful photography is more important here, so they opted for a top navigation menu to save space and show off that large image.
- The homepage is long and broken into sections of content in order present their information in an appealing and easy to digest way.
- They give a lot of space to photography to enforce a feeling of fresh farm produce.
- They push social media by having it in both a dedicated homepage section and in the footer. Customer engagement through Facebook, Twitter and Instagram helps spread the word about Delaware Valley.
- Camri Hinkie, Senior Web Designer