It is common to work with a development partner when setting up your shop. This can either be a freelancer or an agency. In this section we give some pointers to get the best result when working with such a partner. We will not go into details about project management or communication as that is a huge subject outside of the scope of this book, and also highly dependent on how involved you want to be in the development of your shop.
In this section we will discuss two possible tasks:
- Creating a design and theme
- Creating a functional enhancement
When you're working with a development partner, you will generally have both of these tasks for them as they probably will be building a theme and some functionalities.
This is the situation where you are not using a premade theme, but rather a custom-built one. When you're doing this, a good theme developer will go through the following steps with you:
- Making a wireframe of your website: This is a schematic view of the layout of your site's most important pages. The amount of detail in a wireframe depends on the amount of analysis work that is agreed upon. Even a rudimentary sketch of your home page, category page, and product detail page is highly useful to quickly agree on what information is to be shown and where.
Ensure that any parts of the site that are important are present in the wireframe, such as customer account links, layered navigation, buy buttons, and so on. A proper wireframe ensures the graphic designer understands what he/she is designing. Magento is a big software package and most graphical designers do not know every detail about how Magento functions. An example wireframe can be found in the following diagram:
- Making the graphical design: Based on your preferences for the look and feel of your store and the wireframes from step 1, a design is made. Often a sketch of the home page is made first, feedback is collected and processed, and after that subsequent pages are designed.
- Making the Magento theme: The graphical design is cut up into logical blocks, and based on that the different parts of the theme (layout XML, HTML, and CSS) are made. Usually this step takes most of the time. The delivery time (and costs) of this step can be lessened by having your wireframe stick close to the default Magento theme.
- Installing and refining the theme: In this step, the theme is copied into your Magento installation and activated. Now your store will not look like a default Magento store anymore! Usually in this stage minor design tweaks have to be made to fit your product catalog perfectly.
Your product detail page is one of the most important pages of your store, as it is usually the place where your visitor decides to buy your product. Think about what you want your product page to look like. Visit other e-commerce sites you admire and try to determine the similarities between the ways they display information on their product pages. Also, try to think about whether the kind of product you will be selling should be displayed differently or not! After you have determined the ideal product page layout, make a simple wireframe or sketch that indicates the positions of the various page elements.
Note
Coming up with a good layout can be hard. If you are in doubt about the layout of a particular segment of your site, it's a good idea to stick to something that resembles the biggest stores in your niche. In general, it's a good idea to have your store look and function as normal as possible, as familiarity breeds trust.