Some trends become popular because they just work and they work because they are easy to build, users are already accustomed to them, can be scaled easily across all viewports and present information in a meaningful, simple and pleasing way.
Table of Contents
What makes any site appealing and functional? Well behind this lies several design decisions such as:
Images
Visual maturity
Minimal design
Color choice which matches the brand
Responsive design
A website whose goal is sell products images forms the most important part of that site. An image gives simple easy to red impression but having an image is not enough, it has to be a right image which can convey the right story and product qualities not just what the product is.
As a popular trend large photos are very popular because they are easy to read and at the same time mobile base websites use smaller photos because of the bandwidth issue, opening a heavy site will cost user more on their data plan.
So, how the issue of bandwidth can be solved without compromising the quality?
The answer lies in minimalism.
Now, with minimalism it is not only do more with less but the challenge is to communicate the same amount of information with less. One popular way is to use the muted colors which coordinate well with the images, design elements and typography of the web site.
The technical benefit of this is that images with the mute colors i.e. less contrast compresses better than the high contrast images and are small in size and download faster whether it is desktop, laptop, tablet or mobile. This also means that we can use the high quality images with the least possible bytes in them.
Designing elements with uniform simple colors across the website helps in eliminating the distractions and they appear to sit flat against the background and help the user to focus more on the product and the content. It also makes the website look more elegant, serene, professional and mature.
For example, a bold background image with the text sitting in white on top of it will make the text stand out and will draw the attention of the user to the same. It is hard for the user to not notice it.
Card based design started with the concept of grid in which screen is divided into rows and columns. Creating a card design based on grid is very simple and there are plenty of frameworks are available in the market the most famous being the bootstrap. Card based or grid based design offers following advantages:
Adaptive design: This design is simple, flat and compresses well on small screens and is very effective in displaying the information.
Bite size: Small information is easy to remember and with this design one can display small information per card/grid. They are also very useful for comparing the two products.
Some best practices for the card based design are:
One single idea can be communicated through one card.
Make cards sit side by side o better convey the information.
Set some space between the cards to make them separate. They are usually known as gutters.
As such, cards, HD images and minimalism are great tools and when used correctly can create great user friendly and responsive websites.
