Magento Design Tips | Design Magento Easily

Magento Design – Tips and Examples

When you’re designing a Magento website, there are things you need to consider before putting anything to the “drawing board”. We can do the complete Magento design for you, but if you opt to do it yourself, here are a few tips that can make your work easier.


Complexity of the Magento design

Decide on the complexity of your web site – in practice, this means you’ll have to know whether you need only one single-language store, multiple related single language or multilanguage stores, or several independent stores in your Magento installation. You’ll need to create a sitemap of your pages for the entire installation. In this Magento tutorial, you will find guidelines and terminology help.



You’ll need to decide whether you want a ready-made theme or a theme package to be used on your website or you want to design the look of your store by yourself. We can develop a theme for you, a custom theme to suit your store perfectly, using our own design, or you can give us your design and we will turn it into a custom theme.


Structural and Content Blocks in Magento design

If you decide to design your store by yourself, you’ll need to know how Magento layouts and blocks work. In the abovementioned Magento tutorial, you have it in details, but the essence is the following – When you’re designing a page, you have to decide on the position and size of the structural blocks, which are blocks such as header, left column, main column and footer. You have to decide on the content blocks as well. One important thing about these is that you have to decide on the layout as well, which is the way content blocks are positioned within the structural blocks. Content blocks are things such as navigation, product listing, footer tags…


(The following two images were taken from Magento tutorial)


example of structural blocks
The example of structural blocks.



example of a layout
A layout example.


Here’s how the structural blocks look like on a website:


an example of structural blocks on a website done by ExtensionsMall
An example of structural blocks on a website done by ExtensionsMall.


These are the very basics of Magento design. If you want to create your own themes, you can find the instructions in the Magento tutorial, linked above. Also, you can use this great article by Mike Smullin. These are the basic guidelines for creating a PSD file programmers can use while turning your design into reality.

And here are some additional articles on how people see your website, what do they look at most, which are the mistakes to avoid and some usability tips.


Leave a Reply

Your email address will not be published. Required fields are marked *