Introduction
As the title of this post suggests, this post is about web design and the importance of knowing the platform that you're designing for. This will be a short post, but I wanted to highlight an issue I often encounter.
Knowing the platform
During my career I've been both a designer and a developer, so I feel that I'm in a unique position which has helped me to identify an issue that is not often discussed, but can prove to be costly.
When I was a designer, I wanted to implement visually exciting designs with interesting functionality, I would investigate competitor websites and research functionality and pull together a list and board of what I thought would be great for my designs.
However, because I was new to the web I hadn't considered the platform and now I've been a Frontend developer for many years I've seen the same mistakes being made over and over where designers will create designs that look visually great, but functionally is drastically different from the default functionality of the platform the site it using.
Why this issue is so common
In my example, I'm looking at this from working on eCommerce sites, there are a number of platforms used for these sites, examples of these are Magento 2, Shopify and BigCommerce. However, these platforms all offer different functionality and default frontends and themes which are typically used as a base to build out a site.
These bases don't all offer the same functionality, something you could commonly see on Shopify stores, might require scrapping whole sections of a Magento 2 site to implement something similar. This can mean that development time can be extended tenfold, which will also increase costs. For companies with a tight budget, this can be a huge problem, something that could have taken half a day to do if it was using default functionality, could take a week to implement entirely custom functionality, because the designs don't take the platform into account.
How to prevent this issue
The best way to prevent falling into this trap and become a better designer is simple, know your platform, but how can you do that?
Most of the major players will provide demo versions of their platforms, these will typically use the base themes and showcase functionality that is available by default. Using these demo sites to create a base design template from will give you an excellent starting point for your designs and will help you to identify areas which could be more complicated to implement and that can be communicated to developers and clients.
If you have doubts, it's also worth having conversations with the developers as they will be very familiar with the limitations and defaults of the platform you're designing for.
I also think it's important to have regular communication with the developers when creating a design, they could identify both potential opportunities to create something interesting and identify issues and offer solutions.