user interface

3 Hottest eCommerce Design Trends to Embrace in 2016

Posted on by Mario

9 eCommerce design trends toembrace in 2016

Since digital world is a fast changing world, it becomes difficult to predict the future. If you are a web designer who is currently working for eCommerce, you better catch up with this hottest design trends that are going to dominate 2016, so that you can stay up to date with the current trends.
1.) Rich Animations
If you are looking for something that can engage with and connect to users better, animation is the answer. In fact, this can be a good solution for making your designs more playable and enjoyable, especially for online shopping experiences. Moreover, animations which are used in the right time will make your customers feel that you really care about their interactions with your site.
Therefore, in order to leave a memorable impact on their customers many eCommerce websites creatively using animation, like button spins, icon rotation and loading bars.
2.) StoryTelling
Who doesn’t love story? Anyone loves it right. Therefore, using story to sell your brand will make your selling stands out from the crowd. But, be careful with your story, a salable story is the one who can establish an emotional connection between your brand and your customers but also increases loyalty and sales. Nowadays, there are many businesses which practice storytelling as their business strategies, two of the most successful ones that you can follow their footsteps are Bonobos and Greats.
3.) Dynamic Search
Another most recent and prominent design trend that caught a lot of attention is Dynamic Search. In fact, many eCommerce sites will be using JavaScript and Ajax-powered search to display products dynamically in 2016. Besides, when you have a very large inventory, this method is a very suitable to be used. You can take a look on JadoPado as the most compelling example of the eCommerce sites using this amazing feature.

3 Web Design Inspirations to Enhance Your Work

Posted on by Mario

Handpicked Web Design Inspiration to Get You Going

Engaging with audience is what every web designers and businesses online are looking for. One of the ways to obtain a better engagement with audiences is through creating creative web design elements that will never bore them. In this article, we are going to help you to get more inspired through new ideas of web design elements, such as below:

  • Supple’s Side by Side SEO Showcase

One of Melbourne SEO services has discovered a bright way to display the code behind a site which is intended to unveil the two things apart, between optimized HTML and disorganized HTML. The optimized setting and the non-optimized setting is displayed side by side since each image has an interactive slider which reveals how each site is coded.

You can see that the optimized sites code is much cleaner and even features interactive hotspots which you can hover over to reveal more information about how and why your site’s design can impact things like Google ranking and loading speeds. In fact, this really demonstrates the service Supple offers since the interactivity promotes user engagement.

  • Collection of Style Guides

Style guides is one web’s best brand which display links in a stylish format. Individual style guides links load and fold out from boxes that take their color from the brand’s own color palette.

To pop up a wave of loading links, you can scroll down the page and prepare to be amazed by its dynamic and interactive design which will catch your eyes and persuade you to keep scrolling.

  • Grabby.io-Smooth Transition from Hero Image to Banner

Are you looking for an effective yet a very simple idea? Maybe Grabby.io is the right solution for you. You can have your hero image as your navigation bar rather than having a navigation bar simply appear once you’ve scrolled down past a hero image.

In this web design, you will experience a smooth transition of your main menu into a slim navigation bar once you scroll down the page. The main menu usually will sit at the top of your screen as you continue interacting with the site.

Speed Up Your Web Workflow with Style Guides

Posted on by Mario

Speed Up Your Web Workflow with Style Guides

Any web designers or graphic designers know that style guide somehow is a bit contrast compared to any traditional static web design layout, like Photoshop. Style guide is a set of elements and components that when used together can form a complete layout or parts of that layout. In fact, because of its scalable and flexible, Style Guide is a perfect tool for building responsive designs. Besides, you can also use the terms ‘style guide’ and ‘design system’ interchangeably, since style guide works best when they form a system for managing existing designs and allowing the production of new ones with ease.

So why should we change from traditional design into style guide? Well, with style guide you will be able to get into the browser quicker and spend less time in desktop design tools. Moreover, with traditional approach, all of clients complain about the static layout will be dismissed. Even though you already try your best to make the final product sometimes type rendering and spacing may change which will make the client feels like they have been misled by the Photoshop.

By having style guides as a design deliverable eradicates these difficult discussions with a client which will automatically speed up your workflow. Here are some elements that make a good style guide.

Type

You can do a lot with style guide typographic hierarchy through covering headings, lists, block quotes and paragraph text. It should also cover any variations within these categories, such as captions, drop caps and any other special typographic treatments, and UI contexts like buttons, navigation and form fields.

Grids and Spacing

The grid systems include both horizontal and vertical layout. It even allows you to rapidly prototype and build layouts without the need to take a lot of time of adjustments to spacing and margins.

Color

Your primary color palette, including the main link colors, actions and element colors (for example, buttons, labels and icons). There will also be colors outside of this palette for circumstances outside of the ideal design state, like error and system messages, and validation.

Modules

Your modules should contain elements such as buttons, form fields, tabs and navigation, as well as collections of elements such as captioned images and blog post meta data. They also include combinations of elements working together – for example an article heading, date and introduction paragraph, a tooltip with a small heading and text, and so on. Ideally your style guide should give you everything you need to design and build a page at a moment’s notice, without having to open up Photoshop or Sketch. In regards to the format, a style guide should be live HTML, categorized in a manner that is easily maintainable for you and any other designers that might come into contact with it.