This article is the first from a series of articles that will address the concepts and best practices for creating Magento theme design. In this one, we’re talking about prerequisites for designing a custom Magento theme, the difference between custom and off-the-shelf themes and the decoupled approach for Magento theme design and development.
This is not a development article, but rather a UI designer’s view on creating a Magento theme. So, if you’re looking for how to develop or install a ready-made Magento theme, you won’t find it here. Please check some of our other pages or get in touch if you need any assistance with the theme development.
Creating a Magento theme design from scratch isn’t exactly rocket science, but it does require some prerequisites. It’s not as simple and straightforward as making a showcase design for you to show off to your friends and social media followers.
If you don’t keep the things listed below in mind, chances are you’ll make one of these two mistakes:
1) You’ll create a wonderful and sophisticated design. However, it will be difficult or nearly impossible for a development team to implement it in the given deadline.
Don’t get me wrong, there probably isn’t a highly complex design that couldn’t be worked into a solid frontend experience. But, time and budget will always be a factor in real-world projects.
2) You’ll create something aesthetically pleasing that people won’t know how to use.
Prerequisites for creating a custom Magento theme design
1) Know the medium
It’s not necessary to be a code ninja yourself. However, as with other design jobs, web designers benefit from knowing the medium they are working for. In this case, it means having decent knowledge and understanding of HTML and CSS.
“Should designers code?” is still debated, and will probably never reach a sound conclusion. However, without a doubt, knowing the medium you’re designing for makes it a lot easier for you to understand the technical possibilities and limitations of the medium. It also helps you to coordinate and communicate with the development team that’ll need to code the design.
2) Know the platform
You also don’t have to be knee-deep in Magento to design a theme, but similarily to designing for any specific platform, you do need to get familiar with the platform you’re working for. Learn about its capabilities, advantages, and of course, its constraints, because this is where most problems come to life. One of Inchoo’s benefits is that we have design and development teams under the same roof. This makes it much easier for us to handle any issues that may arise in the process.
3) Know the job specifics and the end goal
Last but not least – you’ll want to be familiar with the best usability practices and distinct eCommerce features. You’re not creating a design for the sake of design itself, you are creating an actual product people of different backgrounds will use, and a merchant will earn from.
Ready-made themes vs custom theme design
If you’re thinking why not simply buy a ready-made theme for $100 – well, you can always go down that road. Some merchants may very well find a decent match for their needs. But keep in mind that ready-made themes are made for masses. This means they need to fit a lot of features to cover a variety of businesses. You lose most of the abilities to influence store usability, performance, and effectively the entire user experience because these themes are not made specifically for your store and your customer groups. On the other hand, custom theme design gives the entire team more control over every aspect of a web store.
Ready-made themes are made for selling themselves. This is why you can easily find aesthetically pleasing themes with a lot of built-in features. However, when it comes to usability and performance, and sometimes even common sense, most of them will fail. Hard. Not to mention the technical implications of a possible messed-up code base and the need to actually make additional purchases of 3rd party extensions to have the theme look and work the way you saw in the demo.
Add to this the cost of fixing issues (because these themes seldom work without any issues upon installation) and difficulty to implement incremental changes and you’re off to a bad start.
Magento decoupled
Magento is a robust and powerful open-source platform with many built-in features, that works quite decently out of the box. To take full advantage of the platform, your best bet is to have a Magento theme design and features tailored to your business and customer needs and expectations.
While it’s quite complex under the hood, from a designer’s point of view it can be decoupled to several main pages (such as homepage and a product page), number of key components (such as forms and buttons) and overall typography and general style (such as color scheme, iconography or imagery).
A thing to keep in mind while working with such complex platforms is consistency. One can not simply create a few different pages using different styling and unrelated elements, but rather use reusable components, predefined typography, and consistent element styling. An entire system that works and exists together in symbiosis together with business and customer needs. If the former is what you’re looking for, check out our design services.
In the meantime, check out the rest of the articles from this series:
- Best practices for Magento Homepage design
- Best practices for Magento Category page design
- Best practices for Magento Product page design
- Best practices for Magento Cart page design
- Best practices for Magento Checkout page design
Cheers!
