Before you start placing images and text haphazardly onto your website, stop and think about the best possible way to organize your content. Below are a few tips and tricks on how to do just that!
Website Grid
A website grid is a system for organizing the content of a product on a webpage and creating alignment and order. Website grids are great for creating a cohesive, functional, and aesthetically pleasing website.
Grids are a tool you will use to help guide you on how and where to place certain elements and information on the page. Guidelines, such as margins, spaces, and columns will provide a consistent framework for your page’s content, making it easy for customers to navigate your site, and buy your product.
How to use a Grid System
The grid system will help align the page elements based on columns and rows. Once the structured framework is in place, you can place text, images, and any design element in a neat and consistent manner. Additional considerations include types of text, images, and design elements and how to implement them into your website design.
Common Grid Layout Vocab
Columns: Columns are the vertical sections that span the height of the content area. The more columns there are in a grid, the more flexible the grid will be.
Rows: Rows are the horizontal sections of a grid.
Modules: Modules are the units of space created from the intersection of rows and columns. Modules are considered to be the building blocks of a page. This is where you would place text, images, buttons, etc.
Gutters: Gutters are the space between columns and the space between rows. The role of gutters is to form negative space between the columns and rows.
Margins: Margins are the negative space between the format and the outer edge of the content.
Now, with an understanding of what a grid system is, you can start applying your images and text according.
Tip #1: Attention Grabbing
The first 20 seconds are the most important when someone clicks on your website. You need to grab their attention. The most efficient way to do so would be to display the most important information about your product near the top of the webpage. This could be the description of your product, product images, the price, and a ‘call to action’ such as a “add to cart” or “buy now” button.
In the English Language, most people read/ view information from left to right. When designing your website you want to consider that by placing the most valuable content on the left, product images and videos, followed by secondary information such as your product specs, functions, and overall description.
Tip #2: Product Photography
When customers are viewing your website they cannot interact with your product physically. They rely on the photos you provide to help convince them to buy.
You don’t need a fancy camera or professional photographer to produce high-quality product images. Most smartphones come with a quality camera and internal photo editing software. It is important to keep in mind when photographing your product to include textures and size. Some sites even attempt to capture scents.
Secondly, a good rule of thumb is to have three or more images of your product showcasing different angles and make sure to include in-scale images. Most customers will try and determine the size of your product via the photos.
Lastly, create a narrative of your product using photography. This is called “Lifestyle Images.” Tell the story of your product to help your customers imagine how they might use it in their everyday lives.
Tip #3: Choose Your Words Wisely
The next most important information on your website would be the product description. The main point; be direct. The first sentence of your product description should be clear and to the point. Leave the cliché marketing sayings to a minimum, be straightforward.
Give all the information customers will need to make their purchasing decision.
Another great way to make your product description stand out is to answer any questions a possible customer might have. Customers want to know exactly what they are buying. Anticipate what questions they might ask and provide the answer, proactively. You probably can’t anticipate every possible question that they may have but you want to make sure that customers have enough information to buy with confidence.
Tip #4: Call to Action
Design your website with an easy flow in mind. Having an easy-to-navigate website will keep your customers coming back for more. Yes, you want your website to be beautiful and have great images and descriptions, but if your “call to action” isn’t easy to find, you probably won’t get the results you’re looking for.
A ‘call to action’ is a piece of content intended to induce or persuade a viewer or reader to perform a specific act, in this case, purchasing your product.
A good ‘call to action’ button should make it easy for customers to add an item to their cart with just one click. It should be prominently positioned on the page to stand out from other content. Use simple action-oriented language, such as ‘add to cart’ or ‘buy now.’
Color is a great tool to use to help direct viewers’ attention to where you want it on a page, however, make sure you use it correctly. Here is a link to another talking about Color Theory and how to apply it to your website. https://enhancepdblog.com/its-all-about-that-color-psychology/
Tip #5: More the Merrier
Once you have placed your images and product description at the top of your webpage, the viewer will more than likely scroll down. This is where you will provide even more product information. Get specific. Explain the product’s specs and function with words and/ or icons. Provide a short video demonstrating how to use your product.
This is also a great place to have past customer testimonies and even a place for someone to write a review. Take all the positive feedback you’ve received and put it in a customer review and testimony section. A lot of customers will appreciate this and associate you and your product with trust and will feel confident in purchasing again.
Your Turn
That’s the gist! It’s your turn, now, to start building your product website to be cohesive, functional, and aesthetically pleasing.