Child pages
  • Design tips

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Do not use the CMYK color model, as it is only adapted to printing. Always use the RVB color model.

Fonts

Do not use atypical fontfonts! Keep it readable at all times!

N’utilisez pas de polices exotiques, pensez fonctionnel !

Pour du texte standard (type titre, sous-titre, texte courant, etc. …) limitez-vous aux polices suivantes afin que tous les visiteurs de votre site puissent voir la même chose, de même trop de polices dans une même page peut vite devenir illisible.Standard text (title, sub-title, regular text) should be limited to the followed fonts, in order to insure that all visitors can see the same thing:

  • Arial
  • Verdana
  • Helvetica
  • Georgia
  • Tahoma
  • Times News Roman

Keep the number of fonts to the bare minimum, for fear of making your website confusing and unreadable.

Units

When designing for the Web, the basic unit of measurement is the pixel. Do not measure in picas, points or centimeters.

Text size

Always keep in mind that the user has the final say on the text say, as modern browser can expand or reduce it at will. As a matter of fact, you should test your website with various browser variations, see how easy it is break your design... and therefore rework your design in order to avoid such easy breakage.

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.

Transparency

Transparent images do not work well with older browsers, particularly with Internet Explorer, so you should stay away from 24-bits PNG images. As for GIF images with transparency, use the over a plain background to ensure they work properly. Avoid 50% opacity by using the same matte color as the website's background color.

Misc.

  • Test your theme with all of PrestaShop's options activated, so as to see how the theme reacts.
  • Edit a product in order to see how the various options influence your design... if does at all.
  • Make sure to have an homogeneous style for your shop.

Ergonomics