Table of contents
Table of Contents | ||
---|---|---|
|
...
Design tips
Thinking ahead
Before opening PhotoShop, GIMP or any other graphic editor, you should sit at a desk with a pen and a sheet paper, and think of the your shop's sitemap, making it as flexible as possible (not all shops have the same amount of categories, or of products per category).
A complete PrestaShop them theme requires at least 10 30 pages or page sections:
- Home page
- Category page
- Product page
- Product comparison page
- Search results page
- "My Account" and its inner pages:
- My vouchers
- Orders history
- Personal information
- "My Cart"
- Authentication page
- Account creation
- Checkout pages:
- Addresses list
- Shipping costs
- Payment choice (check, bank transfer)
- One page checkout
- Address creation
- Delivery page
- Maintenance page
- Manufacturers list and single manufacturer page
- Suppliers list and single supplier page
- The 404 page ("Page not found")
- "Best sales" page
- "New products" page
- "Current promotions" page
- "Forgotten password" page
- Legal notice
- Sitemap
- Stores page
- Contact form
Please do take all these into account, so as to not forget any of them. Failing to take some page into account may result in an incomplete theme, and thus a bad experience for your users.
To get a better sense of the page you should take into account, dive into the
Once you feel good about your sitemap, make a few sketches of the interface, in order to get a feel of where the various elements will be placed: new products, promotions, pictures, text, etc.). Also, include the important details, such as the various mentions on the product's page: on sale, promotion, new product, stricken price...).
...
In order to ensure that you can easily share your creation with others (designer, integrators, client), we advise you to save them as a PhotoShop file (RGB, 75 72 dpi, non-flattened).
You should work with the 980px width resolution in mind.
...
That being said, you may start off with a handful of basic text sizes:
- 8px for smaller text
- 10 to 12px for regular text
- 14px for sub-titles
- 18px for titles
- etc.
...