One can argue that 2015 was a year of flat style. Designers showered the web with site and mobile app designs that were elegant, tidy, clean and skeuomorphic-free. Along with this dominating tendency, Material design, principles presented by the Google team, also gained popularity. Vibrant colors, intuitive icons, layout with carefully outlined blocks, and handy navigation patterns empowered every second concept. Together they produce beautiful aesthetics and a pleasant user experience.

Predictably, those two set the tone for freebies. As a result, all the GUI packs that are featured in our roundup meet the mainstream at full extent. They are bright, gorgeous, and include components that boast of a harmonious alliance of design and usability. See it for yourself.

Liquid UI

Creator: Jonathan Shears
License: Declared as Free, no proper license given.

Music UI Kit

Creator: astract
License: Declared as Free, no proper license given.

OSX Yosemite Ui kit

Creator: Stan Yakusevich
License: Declared as Free, no proper license given.

Pantone UI Kit

Creator: Aleksandra Gabric
License: Declared as Free, no proper license given.

Colorful Tiles

Creator: Filip Korzycki.
License: Declared as Free, no proper license given.

Flat UI Kit

Creator: David Minty
License: Declared as Free, no proper license given.

55+ Elements UI KIT

Creator: Tomasz Mazurczak
License: Declared as Free, no proper license given.

Ui Araby V 2.0

Creator: Salah Elimam and Lio IT
License: Declared as Free, no proper license given.

Groom UI Pack

Creator: Zine El Abidine FALOUTI
License: Declared as Free, no proper license given.

Digix UI/UX Pack

Creator: Zine El Abidine FALOUTI
License: Declared as Free, no proper license given.

Winter UI Kit

Creator: Alan Podemski
License: Declared as Free, no proper license given.

Mayssam UI Kit

Creator: Elyounssi Wahib
License: Declared as Free, no proper license given.

Noha UI Kit

Creator: Elyounssi Wahib
License: Declared as Free, no proper license given.

Azure UI Kit

Creator: Yolqin Alimov
License: For personal and commercial use.

Chameleon UI Kit

Creator: UIChest
License: Declared as Free, no proper license given.

Eye Candy UI Kit

Creator: alienvalley
License: For personal use.

Monica Web UI Kit

Creator: visual hierarchy
License: For personal use.

Vonn Material Design UI Kit

Creator: visual hierarchy
License: For personal use.

Sketch UI Kit

Creator: inVision
License: Declared as Free, no proper license given.

Free UI

Creator: Shakuro
License: Declared as Free, no proper license given.

Stark UI Kit

Creator: baianat
License: Declared as Free, no proper license given.

A1 Free UI Kit

Creator: Vahan Hovhannesian
License: Attribution-NonCommercial.

Archive Concept

Creator: Anton Oleinik
License: Declared as Free, no proper license given.

Smart UI Kit

Creator: Epic Pxls
License: Declared as Free, no proper license given.

Rusty UI Kit

Creator: Epic Pxls
License: Declared as Free, no proper license given.

E-commerce UI Kit

Creator: Epic Pxls
License: Declared as Free, no proper license given.

Material Design Dark UI Kit

Creator: Epic Pxls
License: Declared as Free, no proper license given.

Dashboard UI Elements

Creator: Craftwork
License: Declared as Free, no proper license given.

Perfect Kit

Creator: Stelian Subotin
License: Declared as Free, no proper license given.

Trend UI Kit

Creator: Nano
License: Declared as Free, no proper license given.

Kul Wireframe Kit

Creator: Kürsad TATAR
License: Attribution-NonCommercial.

Neon UI Kit

Creator: Chrometaphore
License: Declared as Free, no proper license given.

Sliders

Creator: Hezy
License: Declared as Free, no proper license given.

IM-Chat Dashboard

Creator: Matt Thompson
License: Declared as Free, no proper license given.

Minimalist Blog UI

Creator: STEFAN KUHL
License: Declared as Free, no proper license given.

Blog UI Kit

Creator: Thomas Budiman
License: Declared as Free, no proper license given.

Ecommerce Kit

Creator: Thomas Budiman
License: Declared as Free, no proper license given.

MFD UI Kit

Creator: Thomas Budiman
License: Free to use both commercial or personal.

Free UI Kit for Sketch 3

Creator: Kristaps Elsins
License: Declared as Free, no proper license given.

Pages UI Web Kit

Creator: Mark Thomas McEwan
License: Declared as Free, no proper license given.

Google Maps UI Kit

Creator: Evgeny Lobanov
License: Declared as Free, no proper license given.

Simple UI Sketch Generator

Creator: Emmanuel Roy
License: Declared as Free, no proper license given.

Wireframing Template Sketch Resource

Creator: Garret Voorhees
License: Creative Commons Attribution license (CC-BY).

WYSIWYG Editor

Creator: Dimart Studio
License: Declared as Free, no proper license given.

Food and Drink UI

Creator: Sergiu Firez
License: Attribution-NonCommercial.

UI Kit Free

Creator: Maria Wasik
License: Declared as Free, no proper license given.

Atelier Sketch Template

Creator: Owen Wassell
License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

Admin Dashboard UI

Creator: Sergiu Firez
License: Attribution-NonCommercial.

Crystallize Free Material Ui Kit

Creator: Alon Ashkenazy
License: Declared as Free, no proper license given.

Spot UI Kit

Creator: cssauthor
License: Attribution 4.0 International.

XboxU Project

Creator: jmaple4
License: Declared as Free, no proper license given.

Material Design Widgets Ui Kit

Creator: Elad Izak
License: Declared as Free, no proper license given.

Nakropol – Free UI Kit (Web / Mobile)

Creator: Orkan Çep
License: CC BY-NC 4.0.

Beatz – Online Music Concept

Creator: Mohammed Gouse
License: Declared as Free, no proper license given.

ThemePanda Dashboard

Creator: Raaz Das.
License: Declared as Free, no proper license given.

Flowchart Kit for Sketch

Creator: Arthur Guillermin Hazan
License: Declared as Free, no proper license given.

Material Design UI Kit

Creator: Designtory
License: Free for personal and commercial use.

Creative Mind UI Kit

Creator: pixel buddha
License: Feel free to use and modify it for personal and commercial projects.

2015 Devices – Screen Resolution Wireframe Kit

Creator: Dustin Hoffmann
License: Declared as Free, no proper license given.

Free UI KIT based on bootrstrap

Creator: Kamil Koperwas
License: CC BY 4.0.

teracy wireframe kit v0.2.0

Creator: teracyhq
License: BSD License.

EVENTPRO INTERFACE KIT

Creator: dtailstudio
License: Declared as Free, no proper license given.

Retina UI Kit

Creator: Bradley Bussolini
License: Declared as Free, no proper license given.

Joocy UI Kit

Creator: Matthew Skiles
License: Declared as Free, no proper license given.

Flat UI Kit

Creator: Nik Pletikos
License: Attribution is not a must, but highly appreciated.

Mini UI Kit

Creator: Karina Baylocq
License: Declared as Free, no proper license given.

“Land.io” UI Kit + Landing Page Design

Creator: Peter Finlan
License: Creative Commons Attribution 4.0 International License.

iPad Dashboard PSD

Creator: Creative Boxx
License: Declared as Free, no proper license given.

55+ Elements FREE UI KIT

Creator: Tomasz Mazurczak
License: CC BY-NC 4.0.

UI Kit

Creator: Apostol Voicu
License: Declared as Free, no proper license given.

LEAFEE UI KIT

Creator: webflow
License: Declared as Free, no proper license given.

Summeric Material Ui Kit

Creator: Kien Tran
License: Declared as Free, no proper license given.

Mega Collection of Free Infographic Vector Elements

Creator: Mats-Peter Forss
License: CC BY-NC 4.0.

Admin DashBoard Free UI

Creator: Baraa Bilal.
License: Declared as Free, no proper license given.

UI Kit

Creator: Hervé // Crelcreation
License: Declared as Free, no proper license given.

Simple UI Kit

Creator: treehouse
License: Declared as Free, no proper license given.

Corporate UI Kit

Creator: Mehmet Ç?nar
License: Declared as Free, no proper license given.

LifeStyle UI Kit

Creator: Mehmet Çinar
License: Declared as Free, no proper license given.

World infographics retro style

Creator: Peecheey
License: Free for personal and commercial use.

Sketch freebie for material theme paper

Creator: sergey voronov
License: Declared as Free, no proper license given.

Set of Infographics elements retro style

Creator: peecheey
License: Declared as Free, no proper license given.

Retro infographic set

Creator: peecheey
License: Declared as Free, no proper license given.

Statistic infographic set

Creator: peecheey
License: Declared as Free, no proper license given.

Recipe UI Kit

Creator: madefordesigners
License: Free to use both commercial or personal.

Pocket

Creator: Georgemaine Lourens
License: Free to use both commercial or personal.

Material UI Kit

Creator: Wanghuanbar
License: Free to use both commercial or personal.

WPF UI Framework

Creator: icons8
License: Special terms and conditions are declared on the official page.

Get Shit Done Kit

Creator: Creative Tim
License: Declared as Free, no proper license given.

UTKIT

Creator: Darius Dan
License: Declared as Free, no proper license given.

Creative UI Kit

Creator: Chris Braniff, w3layouts
License: Creative Commons Attribution 3.0 Unported.

My Secret Spot UI Kit a Flat Bootstrap Responsive Web Template

Creator: Florentin Steiner, w3layouts
License: Creative Commons Attribution 3.0 Unported.

Lucid UI Kit

Creator: MGADALA
License: Declared as Free, no proper license given.

Apollo UI KIt

Creator: uipixels
License: free to use in both personal and commercial projects..

Vivid Soft Material Ui Kit

Creator: Paul Flavius Nechita
License: Declared as Free, no proper license given.

100 Days UI

Creator: Paul Flavius Nechita
License: Declared as Free, no proper license given.

Amazing Blue Ui Kit PSD

Creator: Patryk Wasik
License: Declared as Free, no proper license given.

Vector UI Components

Creator: Balraj Chana
License: Declared as Free, no proper license given.

Flat UI Kit

Creator: Codevz
License: Declared as Free, no proper license given.

MixKit – Ui Kit

Creator: creativecrunk
License: Free for personal and commercial projects.

eShop – Ui Kit

Creator: creativecrunk
License: Free for personal and commercial projects.

Sketch aficionados will be excited to learn that there’s an update to their favorite app awaiting them. Today makers of Sketch, Bohemian Coding, announced the availability of Sketch 3.5.

Although the update is a minor release covering bug fixes and GUI enhancements—no enticing new features have been added—it is evidence of the tool’s growing maturity and Bohemian Coding’s commitment to perfecting the existing codebase before introducing new toys.

Most importantly, some of the bugs that leave many professional designers wary of Sketch have been resolved: images won’t be lost in between saving a document and reopening it, and you won’t have to keep deselecting the export size field before its value is applied to the export.

How Sketch (mis)handles typography is a key obstacle for many designers considering trialling the app for professional work, so it’s great to see some improvements on that front, most notably that line height now scales correctly along with text layers, and the list of fonts in a document now includes the fonts on every page.

Further useful additions include: artboard refinements; improved performance and rendering for complex operations; subpixel anti-aliasing deprecation; dragging a shape onto another shape in the layers list now triggers a union operation; and a new shortcut has been added for aligning layers to the pixel edge.

The first update since Sketch deserted the Mac App Store, the update is free, but you will need to transition your license in order to enjoy the new features, and bug-fixes. (To transition your license, you need to download Sketch direct from Bohemian Coding, open it, and then enter the email address associated with your App Store account. Bohemian Coding will then send you your license.) Sketch files aren’t backwards compatible, so if you’re working with others, make sure your whole team upgrades at once.

57 Display Fonts, 230 Textures & 100s of Design Extras – only $29!

Source

These days more and more retailers are establishing their business online. Running an eCommerce website has become an indispensable part of their successful marketing strategy. Since the majority of today’s shoppers prefer to read about their preferred products and compare pricing on the web, a website is the first place that the users will check out before making their final decision whether they need to buy something from you or from a different company. So, as you may appreciate, the way your website is designed and how your products are presented has a great impact on the customers’ decision-making.

If a ready-made website template sounds like a more lucrative solution for you (compared to a custom-made or a self-made design), then you’ve reached the right post. Below you will find 30 of the most appealing and powerful eCommerce themes that could make your store shine in 2016. Look through the compilation of PrestaShop, Magento, WooCommerce, Opencart, Shopify, VirtueMart and ZenCart themes and, who knows, maybe your dream design is listed somewhere below.

PrestaShop Themes

***
Styler PrestaShop Theme

Styler is a professionally built PrestaShop template that was designed with the user in mind. A clear and easy-to-follow layout structure makes users focus their attention on the content. The main navigation panel is fixed to the top of the page. Shopping cart, live search and back-to-top functionality also remain in a fixed position in a sticky panel on the right side of the template. The theme features several variations of the home page, product page, product listing, about, and other pages of the theme. Styler runs on a fully responsive framework, comes with a package of PrestaShop modules, detailed documentation and a set of layered PSD files.

Demo | More Info

***

Tools Market PrestaShop Theme

Tools Market is a clean theme best suited for online stores selling electronics, car parts and accessories, and other products on the web. The template features a sticky MegaMenu, which, to a great extent, facilitates navigation. In order to make it possible to organize plenty of data on one page, grid-based content positioning has been applied. The template is flexible and dynamic. The fully responsive framework will adjust to any screen size and resolution effortlessly. The theme’s fully customizable interface can be tweaked in literally any way that you wish. Thus, with the help of this theme, you will attain a design that matches your brand image perfectly.

Demo | More Info

***

Lingerie PrestaShop Theme

Lingerie theme is intended to bring a sensual and captivating look to fashion and beauty stores. The layout has been built in light tones, which are so pleasing to the eye. The parallax scrolling effect adds a more interactive look and feel to the theme. Thumbnails have been supplied with the hover effect. Star ratings help the users with decision-making. In addition, the theme includes the Quick View functionality, which allows the online shoppers to look through the key specifications of the desired items without the need to leave the front page.

Demo | More Info

***

Reebo PrestaShop Theme

Sport related eCommerce websites would look stylish and user-friendly when built with the help of Reebo. This responsive PrestaShop template was developed using valid HTML5 and CSS3 practices, which will make it possible for your web resource to reach the top of search results and appeal to a wider audience. The theme has been made responsive and crossbrowser compatible. Clear product categorization and functional MegaMenu help the users to find the right products in a matter of clicks. Readable fonts and images surrounded by white space make the template so quick and easy to scan.

Demo | More Info

***

Furniture Responsive PrestaShop Theme

This sleek and stylish PrestaShop template is best suited for design and furniture online stores. Content heavy web resources will work flawlessly when built with its help. The lazy load effect was integrated with the purpose of making your entire site’s data load quickly on multiple devices. The front page of the site has been made informative and functional. Here you will find Quick View, Product List Gallery, Product Badges, Sticky MegaMenu, Ajax Search, and so much more.

Demo | More Info

***

Computer Store Responsive PrestaShop Theme

Ecommerce sites selling electronics will look smart and usable when developed using iShop as its foundation. The template was created in the classic black and white color palette. Content is surrounded by white space, which brings the store’s items and their descriptions to the forefront. The grid-based content positioning and lazy load effect make it a pleasure to navigate the page. In order to make the users dig deeper into the atmosphere of your site, and better understand its objective, the header has been integrated with a large slider.

Demo | More Info

***

Hair Care PrestaShop Theme

Creative, grid-based structure of this Hair Care PrestaShop Theme is best suited for beauty and fashion websites. Featuring HTML plus JS animation, the theme’s layout has been enhanced with parallax scrolling, lazy load and cool hover effects. For quicker and more effortless site browsing, the theme has been supplied with MegaMenu, Cloud Zoom, Categories Accordion, Live Search, Online Chat, and a variety of other smart options. Theme Color Switcher is also available to make quick theme adjustments with a click.

Demo | More Info

***
These were some of the most popular PrestaShop themes that we recommend you to try. Coming packed with a full array of options, all of them can be customized to fit any of your eCommerce projects. If you would like to take a look at more stunning PrestaShop designs, welcome to the gallery.

Magento Themes

***
Ketty Clothing Magento Theme

This Magento theme features a neutral color palette, which helps to bring the store’s products to the visitor’s attention. Responsive and functional, the theme comes loaded with advanced functionality, which will make it a pleasure both to customize and browse a site built with its help. The front page has been designed with the purpose of captivating the users’ attention with the store’s offerings. A large hero slider with bold banners placed below it, an easy-to-scan product list, as well as readable blog highlights, are intended to encourage your audience to become interested in your project.

Demo | More Info

***

Garden Furniture Magento Theme

Garden Furniture is an eye-pleasing Magento theme that will be a perfect foundation for interior and exterior design sites. Fully customizable, crossbrowser compatible and 100% responsive, it can be adjusted to fit any of your eCommerce projects. The theme’s pack comes loaded with an array of advanced options like custom page templates, layered PSD, commenting system, social options, newsletter subscription form, social integration, online chat, and much more.

Demo | More Info

***

T-Shirts Magento Theme

Designed in clean style, this responsive Magento theme will become a rock-solid foundation for your fashion store. The user-friendly layout was created with a focus on details. The theme is rich in visuals, which allows you to showcase your store’s products in a captivating way. A full-width header slider, product banners placed right below it, a grid-based list of featured products and a slider featuring a list of brands that you have on offer, are all intended to provide the users with a seamless online shopping experience.

Demo | More Info

***

Online Warehouse Magento Theme

The theme is best suited for electronics online stores. The layout of the theme was made simple and intuitive in navigation. The product categories have been organized into a sidebar MegaMenu. For the users’ convenience, the store’s products were supplied with badges and star ratings, which appear on the mouse-over. The home page of the theme features a Quick View option, a list of brands that you have on offer, social sharing options, newsletter subscription form, and more.

Demo | More Info

***

Stilex Magento Theme

Stilex is a responsive Magento template that was designed in a way that will make your eCommerce project leave competitors behind. Optimized for all types of browsers and devices, it will make your site look sharp and stylish on the retina ready screens. The layout is photo-centric. The theme’s header is enhanced with a fancy slider. Right below it, there are several bold banners enhanced with the hover effect. Shopping cart, live search and social sharing options remain in a sticky position on the right side of the layout.

Demo | More Info

***

Business Card Printing Magento Theme

The flat style of this theme is best suited for setting up a business related web resource. Clean and minimalist, with the clever use of white space, the layout of this theme is pleasing to the eye and easy to follow. The store’s products are put front and center. Organized into a grid-based list, all products are enhanced with star ratings, badges and clear pricing details. The newsletter subscription form is placed on the parallax scrolling background image, which makes it more noticeable.

Demo | More Info

***
These were 6 of the most outstanding Magento themes. If you want to see more, follow this link.

OpenCart Themes

***
Electronic Store OpenCart Template

The clean and neat design of this theme is well suited for electronics eCommerce sites. Lazy load effect, with which the theme’s layout comes loaded, is intended to make your site load fast on any device. Content heavy web resources can benefit from this feature. Categories menu, specials and best sellers have been organized in the left sidebar. Each item is supplied with a star rating and pricing details. “Sale” and “New” badges have been added to the store’s products, providing online shoppers with more effortless decision-making.

Demo | More Info

***

Clothing for Everyone OpenCart Template

This clothing shop OpenCart template was designed to make your site shine. Photos of products on offer are the focus of attention. For more convenient site browsing, different types of products have been divided by means of the full-width background images, which were enhanced with the parallax scrolling effect. With the purpose of drawing the shoppers’ attention to calls-to-action, pricing details and other data, the theme’s developers made use of vibrant coral hues. Content hierarchy is achieved thanks to fonts of different sizes and colors.

Demo | More Info

***
Infant Clothing Store OpenCart Template

The bright and cheerful layout of this theme is best suited for online stores selling kids’ clothing, toys and gifts. The design features elements of the metro style. Categories MegaMenu was moved to the theme’s left sidebar. Below it you will find a list of brands and a newsletter subscription form, which were visually highlighted by means of the bold colored heading. In order to save on space and present more items on the front page of the theme, a filterable gallery was placed right below the block of product banners.

Demo | More Info

***
Electronic Store OpenCart Template

The parallax scrolling effect adds more depth to the clean and clear layout of this Electronics Store theme. Designed with pale and easy on the eyes white and blue colors, the template is best suited for eCommerce projects selling tech gear, tools and accessories. If you wish, you can adjust it to fit any other niche via the customizable admin panel. Products on the front page of the theme have been organized into two blocks of featured and special items. Each offering is supplied with a badge, short description, clear pricing details and thumbnails with the hover effect.

Demo | More Info

***
OpenCart themes gallery is so rich and diverse that it is impossible to include, in one post, all of the designs that appealed to us. If you want to see more, welcome to the collection.

Shopify Themes

***
Spice Shop Responsive Shopify Theme

The header of the Spice Shop theme has been enhanced with an eye-catching large hero image, which helps to introduce the audience to your business more effectively. In addition, the theme includes a functional MegaMenu that stays fixed to the top as a user navigates through the pages. To make it easier for the shoppers to come up with the desired type of spices, the latter have been organized into a grid-based list of banners.

Demo | More Info

***
Baby Store Responsive Shopify Theme

The theme looks very interactive and playful. Bold colors, parallax scrolling images and the store’s products and other elements with hover effect, make the theme look both captivating and visually pleasing. For a more effective product presentation, the theme has been loaded with sliders, galleries, audio and video support. MegaMenu is sticky. Fully customizable, all of its elements can be tweaked to fit your business perfectly.

Demo | More Info

***
Hundreds of other stunning Shopify themes are just a click away. Go and check them out.

ZenCart Themes

***
Housewares Responsive ZenCart Template

The minimalist style of this theme, with the main focus on the store’s products, will make a kitchen supplies eCommerce site both functional and user-friendly. Placed on a pure white background, vivid green design elements serve as great attention grabbers. The theme’s layout has been enhanced with the lazy load effect, which lets the site load faster on any device. Running on a fully responsive framework, all of the theme’s elements will adjust effortlessly to any screen on which they are being viewed.

Demo | More Info

***
Apparel Responsive ZenCart Template

A fashion store will look sleek, stylish and professional when built with the help of this fully featured Apparel ZenCart template. The clean and minimalist layout makes clever use of white space, which draws the user’s attention to the products that you have on offer. The template was designed in a way that lets online shoppers start making purchases right from the main page. A list of product banners, and visually separated featured products with hover effect, are all well-balanced and easy-to-scan.

Demo | More Info

***
Stylish Online Shop Zencart Template

The theme was designed with the user in mind. The site’s usability is our focus of attention here. The layout of the template is not overwhelmed by the heavy design elements. A drop-down sidebar categories menu, a list of special offerings placed right below it, neat and easy to reach social sharing options, a grid-based list of featured products, and live search added in the place where it’s expected to be found – all these and a whole lot of other elements are intended to turn your site into a powerful eCommerce platform.

Demo | More Info

***
Looking for more stunning ZenCart themes? Then this gallery is just for you.

WooCommerce Themes

Monstroid WordPress Theme

Monstroid is a multi-purpose WordPress theme that comes with full WooCommerce support. The variety of features that have been added to its pack is impressive. Intended for those users who are new to web design as well as those who have already launched a host of cool web projects, the theme is easy to install and use. It runs on Cherry Framework 4 and includes all the features of the latter. In addition, Monstroid owners get unlimited access to a gallery of child themes, which is updated with a whole lot of new designs on the regular basis.

Demo | More Info

***

Natural Foods WooCommerce Theme

The theme looks fresh and inspiring. The chosen clean color scheme with the use of vivid green design elements is perfectly suited for natural foods sites. The layout makes use of the retina ready visuals, which will make your store’s products shine on any device. Quality thumbnails and the parallax scrolling images immediately catch the users’ eye once they land on your page. With the purpose of making it easier for the shoppers to find the necessary item, all goods on the front page have been organized into two big blocks of Popular and New Arrivals. Over and above that, each item is supplied with a badge, hover effect that reveals CTA on the mouse-over, Quick View feature, and star ratings.

Demo | More Info

***
Motorsports Store WooCommerce Theme

The first thing that visitors will notice when reaching a website built with the help of this theme is a captivating large hero area featuring a full-width video background. The theme was built in neutral colors, which are so pleasing to the eye. A tile-based block of banners placed below the header video reveals all the basic product categories in an easy-to-follow way. Featured products have been visually separated from the rest of the content on the front page by means of the full-width background images with the parallax scrolling effect. Google map was also integrated into the design and placed at the bottom of the front page.

Demo | More Info

***
Gifts Shop WooCommerce Theme

Gifts, toys, fashion and beauty shops will look amazing when built with this theme. Its layout was designed in a clean and clear way, with the information that is worthy of special attention highlighted with bold colours. For example, in order to make pricing details more eye-catching, you can place these on the multi-colored banners on the front page of your site. CTAs were made large and vivid. Each product preview features a functional hover effect, which makes the site more user-friendly.

Demo | More Info

***
Traditionally, at the end of each block, we provide a link to a richer selection of WooCommerce themes for multiple niches.

VirtueMart Themes

Wegy Joomla Template

Much like Monstroid, Wegy is a functional multi-purpose theme that can be used for literally any web project that you have in mind. An online store is no exception. The template features full VirtueMart support and comes with a set of pre-designed product pages, which are ready to go live out of the box. The theme is lightweight and fast to load. A fully responsive framework guarantees seamless adjustment to any screen size.

Demo | More Info

***
Car Spares VirtueMart Template

This theme looks different from the rest of the eCommerce solutions selling car parts and accessories. While keeping the store’s products the focus of attention, it is visually pleasing through the use of an effective visual presentation. The parallax scrolling backgrounds, retina ready images, bold canary yellow colors, circular and sharp-edged design elements create a perfect harmony on the site.

Demo | More Info

***
Extreme Sports Responsive VirtueMart Template

The theme will be a perfect fit for those eCommerce projects that deal with selling goods for any sport, travel and active lifestyle. In order to make the audience literally feel the atmosphere of your site, the background has been enhanced with a neutral black and white photo taken somewhere on the top of a mountain. The header slider and quality product images enhance the appeal. The site’s navigation has been made intuitive and user-friendly. The main navigation bar is fixed to the top. Featured products have been organized into clearly defined blocks. Vivid red colors draw the users’ attention to CTAs and other information that matter the most.

Demo | More Info

***
Clothes VirtueMart Template

The theme is focused on the effective presentation of outfits on the web. In order for nothing to distract the users’ attention from your store’s offerings, the design is not overloaded with heavy elements. The header slider, banners and thumbnails on the front page of the theme are all intended to captivate the users’ attention and motivate them to make a purchase right from the home page. Ajax shopping cart, live search, categories accordion, cloud zoom, dropdown menu, grid and list based content positioning, and a variety of other cool options, have been integrated into the theme with the purpose of providing your audience with an enjoyable online shopping experience.

Demo | More Info

***
Do you want to see more cool VirtueMart templates? Follow the link for more web design inspiration.

*** *** ***

These were 30 awesome and powerful eCommerce themes that impressed us the most. All varying in their style, functionality and use, the templates come complete with all specifications that you will need for a quick start. Additionally, there will be no need to invest time thinking about the design of product pages since all these have been created for you. Just replace the default content with your products and your site is ready to go.

Have you ever come across other stunning eCommerce themes that could have been mentioned in this post? Feel free to share your thoughts with us below.

By the way, if you are looking for a free educational resource with guides and useful recommendations for the novice web developers, Startup Hub is ready to provide you with comprehensive answers to the most popular questions.

Read More at 30 Of The Best Premium Responsive eCommerce Themes for 2016

Microsoft has recently announced that its Computational Network Toolkit is now fully open source and accessible to anyone who might have an interest in it.

The Computational Network Toolkit, commonly known as CNTK, is something that Microsoft’s engineers evolved and developed in-house, as a form of artificial intelligence, to enable Windows devices to understand and interact with users in a better manner.

As far as Microsoft’s internal data is concerned, the CNTK is more efficient than almost all other forms of artificial intelligence, especially when it comes to detecting speech and images, as well as other forms of communication and recognition technologies.

For instance, here is how Microsoft’s internal assessment of the CNTK looks like:

Microsoft intends to use this toolkit to further improve the performance of its software and also for the betterment of GPUs. CNTK was already available for academic researchers under a limited license, but now it is fully open source and available to all the developers.

You can find the source code of Computational Network Toolkit on GitHub, or learn more about it on the official website.

Read More at Microsoft Releases its Deep-Learning Toolkit on GitHub

Yep, one of those mystery riddles again? To celebrate the launch of SmashingConf NYC, we’ve prepared yet another riddle, and this time it will be a matter of patience and following clues. As usual, we’ve hidden secret keys in a series of animated GIFs.

Below you’ll find the first animated GIF, containing a location clue. To move to the next level, you have to find a hidden hash tag and follow a link in a tweet containing it. Once you’ve reached the last level (you’ll know when), just tweet all of the keys in one single hash tag (or a screenshot if there isn’t enough characters left!) to @smashingmag on Twitter! Not that difficult, right?

The post The New Smashing Mystery Riddle: Have You Figured It Out Yet? appeared first on Smashing Magazine.

I suspect this is what many of us do (based on my own behavior and what I observe of others), but I’m not sure we outright say it or embrace it. Mood Driven Development: Work on what you feel like working on.

I should say: there is some inherent luxury to this. A lot of people don’t have jobs where you can do whatever you want whenever you want. Or have any flexibility at all.

But what is highly prized in our industry is productivity, in whatever form it takes.

“Hey, I refactored some of our mixins to be more efficient and made sure they are used properly site-wide.”

“Good morning, I looked over a lot of the copy around the site and have some ideas on what we can change to make it more clear and cohesive.”

“This afternoon I closed out a couple of long-standing bugs that have been bothering me.”

Any place I’ve ever worked, any of these things would have been applauded. Especially if they relate to the current team/project at hand. That’s what productivity is.

The danger is that you fight against urges to work on something different. You feel like you should be working on converting some layouts, and you feel guilty for tweaking some color palettes. You’re kind of into cleaning your inbox out right now, but feel like you are being lazy for not getting the JavaScript scaffolded out for that new thing. You’re finding a funny image to respond to a playful customer with, but you’re a little mad at yourself for not updating those docs.

That’s too bad, since you are being productive anyway. You’re following your mood.

I mention this, because I suspect that working on what matches your mood makes you far more productive and excited. If you’re fighting against your mood, you’re slower, more mistake-prone, and fueling burnout.

I also suspect that the mood to work on certains things balances out. Those things I really need to do? The mood to do them will come along. Perhaps even sooner if I’m not forcing myself to do them.

If your mood is: play video games all day. Then you’re probably already burned out or in the wrong job.

I can’t vouch for any particular employee embracing this way of working. Perhaps your manager will get pissy with you if you did some seemingly-random thing rather than what they envisioned you working on. I hope not, though. As working your mood is probably best for the both of you.

---

Mood Driven Development is a post from CSS-Tricks

While UX Designers are in charge of the overall functionality of the product, User Interface (UI) Designers are mainly concerned about how the product is laid out, and what the product’s visual communication elements are.

For example, a UI designer will make sure every page, screen or other step that a user will experience is designed within the path that the UX designer has created. They are also responsible for maintaining the overall consistency and implementing style guides across the whole visual communication of the product.

Another crucial difference is that, unlike UX designers, it’s not unusual for UI designers to have a good grasp of front-end development and coding skills. This is because they are responsible for actually building interactive interfaces, not just designing them based on what UX designers intend.

The Challenge

From the confusion that many have about the difference between UX and UI, it’s not a big surprise to see companies hiring one person to fill both shoes. This guide will help you clarify the differences between these two design practices and help you understand how to identify your new ideal UI designer.

User interface designer job postings tend to only include information about what the employer thinks a UI designer is, going in two opposite directions.

The first direction is thinking of user interface designers as their overall graphic designers. This leads to assigning such tasks as branding, illustrations and even print design.

The other direction ends up recruiting UI designers to do what UX designers do. This happens when employers don’t know the difference between the two, or for financial reasons: Hiring a two-in-one designer.

Needless to say, neither of these extremes is the correct way to look at your potential UI designer, and that, in fact, is the current challenge of the industry.

Luke Wroblewski, a Google Product Designer, explains it:

“Information architecture defines the structure of information. Interaction design lets people manipulate and contribute to that information. Visual design communicates these possibilities to people. The user interface is the sum of all these things.”

As you, hopefully, understand by now, UX designer and UI designer are two completely different roles and one person should not be hired to do both.

User Interface (UI) Designer Interview Questions

Responsibilities and requirements for UI designers are always expanding and changing, just like any other technology related job. So, here is a list of interview questions that your next UI designer should be familiar with and should be able to answer without confusion or surprise.

Q: Why is wireframing important? Do you use/create wireframes yourself?

In most teams, it will be the UX designer’s job to create wireframes once s/he has gathered necessary user information and data. Though it does not mean that your UI designer will not know anything about wireframing, because, in a lot of teams, it’s still a UI designer (or both) whose responsibility it is to create wireframes. After all, every UI designer has to know how to “read” and understand a wireframe given to them.

When asked the above question, your prospective UI designer should give an answer along the lines of the following:

A wireframe is ultimately a visualization tool or blueprint to present stages, steps, functions, structure and content of a web page, site or screen. Wireframes are intended to be simple and basic, lacking such design elements as typography, color or graphics, because the number one purpose for wireframes is to represent functionality.

Q: How do you implement prototyping in your workflow?

Similarly to wireframing, prototyping is, more often than not, provided by the UX designer. Therefore, any UI designer should be aware of why prototyping takes place, and how to utilize it, in the workflow.

Put simply, prototyping is for design exploration and time saving purposes. To make sure UI designers don’t waste their time designing and redesigning specific user interactions, prototypes are used to create mockups of how design elements will be used.

Prototypes allow UI designers to identify any potential issues that might come in conflict with what the UX designer or architect has intended.

Q: How do you collaborate with UX Designer(s) and Developer(s)?

Your prospective user-interface designer should feel comfortable answering this question, mainly because both UX and UI designers are design focused, so quite often they understand each other without much explanation.

When UI designers need to adjust, change, add or remove something provided by UX designer, they should focus their communication on wireframes, UI elements, personas and on how it will affect the entire user journey. UI and UX designers should also test the product and give feedback to the developer during development stages.

Q: What is Aesthetic-Usability Effect?

This is a phenomenon that states that a good-looking design will always be perceived as more usable than one that is less appealing, even though that might not be the case.

This phenomenon was demonstrated by two researchers, Kaori Kashimura and Masaaki Kurosu, in their study at Hitachi in Tokyo. They asked test participants to rate the beauty and usability of interfaces. The final study results proved that even when trying to evaluate the interface in its functional aspects, the user would still end up strongly affected by the aesthetic aspect of the interface.

A good UI designer will keep in mind that this effect might easily influence a user’s opinion more than expected. This, in turn, might affect a user’s behavior and their perception of how easy it is to use the designed system.

Q: What is Atomic Design and Its five components?

This is a fairly recent, yet widely recognized methodology introduced by Brad Frost in 2013. Atomic Design was created to design interfaces that focus on designing elements and their combinations, rather than designing web pages one by one. This is a basic explanation of what this methodology was created for. Knowing all five of its components should give your prospective designer some golden bonus points.

• Atoms: These are the smallest and most basic building blocks. These are applied to web interfaces as labels, input fields, text boxes, buttons, etc. They can also contain color, palettes, fonts, etc.
• Molecules: When atoms are combined, we get molecules: groups of atoms, bonded together that are the smallest fundamental units of a compound. Molecules can take on their own properties, too.
• Organisms: Organisms are formed by using molecules as our building blocks. When molecules are joined together, it becomes a relatively complex and distinct section of an interfaces that has been created: an organism.
• Templates: This stage should already make sense to clients. Understandably, templates are mostly groups of organisms put together to form pages. This is the stage that allows us to see things, such as layouts, coming together.
• Pages: This is used as specific instances of templates to give a precise understanding of what the final output will look like. Pages ultimately become the highest level of fidelity, which allows UX and UI designers, together, to test the effectiveness of the design system.

Q: How do you make sure you stay up-to-date with industry standards?

Digital design is always changing; its standards are always improving. So, the worst mistake your prospective designer could do is be out-of-date with the industry s/he represents.

A good answer to this question would include the candidate’s favorite resources, books, blogs, podcasts or YouTube channels s/he keeps an eye on for the latest industry information. It would also be useful to hear of designers that inspire the candidate. A good designer knows that there’s never enough inspiration, never enough creativity resources and never enough to know and learn; therefore, you would want to see your prospective designer “light up” at this question.

Q: What is Call To Action (CTA)? Should a UI Designer care about it?

CTA is one of the most important, if not the most important, element of why websites, platforms, applications and digital interfaces are created. In short, it’s an element that will prompt a user to take a certain, desired action; actions such as buying products, downloading reports, sharing content, donating money, and so on. Part of the UX designer’s wireframe and prototype should identify the Call To Action that, ideally, will persuade users to engage.

A good UI designer should always notice CTA indications and should make sure that it gets a lot of attention when designing this element. Most of the time, it requires a specific and, more prominent color styling, different size, typography, placement and alignment, all of which UI designers control.

Q: How much do you know about color theory and color psychology?

Answering this question should never be a problem to a good UI designer. This is foundational thinking. Color theory is, basically, a set of guidelines and laws that are intended to trigger emotions, set moods and guide someone’s attention by using colors in very specific ways.

Essentially, color theory and psychology consist of two color groups: warm colors and cool colors. Warm colors, such as orange, yellow and red, are known to awaken enthusiasm, energy, positivity and happiness. Cool colors, green, purple and blue, create a trustworthy, calm, relaxing and peaceful environment.

Individual colors, too, have their own inherent abilities to awaken certain emotions. For example, red conveys the suggestion of danger, caution and hazard.

All in all, a good UI designer will always use the power of color theory and color psychology to strengthen the desired message.

Q: What are your thoughts on user-interface (UI) style guides?

In answering this question, your candidate should cover such aspects as: What is a UI style guide, why was it created, what it is used for? What experiences has the candidate had when using style guides?

Similarly to Atomic Design, UI style guides are created, used and maintained to ensure consistency across a product, web site, applications or any other type of design project with different interface stages.

Style guides cover everything from branding, colors, typography, layouts to a set of standards specifically designed for a particular company. They are used to improve work efficiency across teams, and make new member’s onboarding process simpler, more effective and agile.

Q: How important do you think element mapping is in the work you do?

Every good UI designer will design elements considering their shape, form, size, color, location and alignment. This means that your candidate should understand that element mapping is a crucial part of the design work.

Simply explained, mapping is the implied relationship between controls and their effects. If an element creates an effect that the user expects, then the element has good mapping.

For example, think about a set of images aligned horizontally that can be moved to the left or right. Underneath should be controls or buttons indicating that these images can be moved to either side. To move the images to the left side you would expect to click on the button aligned with the left side. Therefore, actually aligning this button to the left would, indeed, match the user’s expectations, which means this element has good mapping.

Q: What is Minimum Viable Product (MVP)?

Sometimes, designers create ego-centric work. It happens when all the UX requirements are met by the UI designer, but s/he continues adding design work to use his or her creativity, or to test out new practices, or to add elements that the designer feels are necessary, based on taste and preferences.

MVP works the opposite way; it means creating and designing a basic version of a product that early adopters can use or buy. The main goal is to bring the product to the market as soon as possible without any non-essential features.

Additional features and design elements are added based on the feedback of real users rather than a designer’s ideas and assumptions. Many of the world’s most popular products have been developed using MVP practice; Twitter is an example.

Q: Do you think Mobile-First Design is effective, and why?

Ideally, your candidate will explain that when Responsive Web Design (RWD) was introduced and gained popularity, Mobile-First Design practice was created to make the designer’s job more effective and efficient.

In this practice, designing starts from the smallest anticipated screen size and only then follow with enhancement on larger screen sizes. This approach saves time and increases a designer’s efficiency; when the design process starts with a large screen, designers tend to get into difficulty later trying to place elements onto smaller screens.

Q: How do you apply Ockham’s Razor to your design work?

This principle is as simple as the Pareto Principle (also known as 80 / 20 rule). It simply says that whenever we have to make a decision between two options, the simplest should be selected.

UI designers use Ockham’s Razor when choosing between two designs or two design elements with the same function. Simplicity should always be chosen over complexity. Or in other words, s/he needs to choose the option which makes fewer assumptions.

Q: What is your personal experience with Participatory Design?

If not describing personal experience, your prospective UI designer should, at least, tell you in his or her own words what Participatory Design is and what it is used for.

Essentially, this term means having everyone (employees, partners, customers, stakeholders, end-users)involved in the design process to make sure that the end product matches their needs, expectations and can be freely used by them.

Q: When do you use Style Tiles?

Style tiles are similar to Atomic Design methodology, prototypes, wireframes or style guides. Style tiles are there to make it easier for the client (end-user) to understand what the initial website, product or application will look like. Style tiles are thought of as something between a mood board and a mockup.

In fact, they are often used to replace the traditional first mockups. In most cases, style tiles are generated very early in the design lifecycle, certainly earlier than mockups. Style tiles are also known for getting a better sense of feedback sooner.

Q: How Visual Weight should be used effectively?

Just like Call To Action (CTA) and Color Theory, Visual Weight is part of the fundamental knowledge a UI designer should have. Visual weight means giving a design element “power” to stand out and get user’s attention.

Not all elements have the same amount of “heaviness”. For example, CTA elements are more important than a simple label or an abstract image. Giving higher levels of “heavy” to certain elements are usually achieved by using contrast.

This isn’t necessarily a contrast of colors; it can be contrast of placement or size, too. A CTA button might look larger (or heavier) simply because it is designed to take up more space than surrounding elements. This puts more visual weight (more importance) on the CTA button.

Q: Can you walk me through your design decisions?

And finally, a great question to determine if your new designer knows how to make good design decisions. Ask the candidate to look at his or her portfolio, or a live product, website or application, that s/he designed, and walk you through while describing different aspects and elements.

Ideally, you should expect to hear the designer’s reasons for why s/he decided to give buttons a certain size, shape, color, placement and alignment. All design thinking should be revealed by this question. It would show that everything s/he designs is intentional, not experimental or accidental.

Read More at The Vital Guide To User Interface (UI) Design Interviewing

Alex Russell on the current problem with testing experimental web features:

Prefixes “look” ugly and the thought was that ugliness ?—? combined with an aversion to proprietary gunk by web developers?—? would cause sites to cease using them once standards are in place and browsers implement. But that’s not what happens.

Tools like Autoprefixer compound the problem that we developers use prefixed-anything as soon as we can get our hands on it.

He talks about some strategies for solving the problem, but admittedly they still don’t sound perfect to me. As a tiny bit of anecdotal evidence: I’m less inclined to play with new features until they feel like they have some permanence. Ughgk, I guess that’s the problem.

In the web platform, the missing ingredient has been the ability to limit the experimental population. Experiments can run for fixed duration without fear of breaking the web if we can be sure that they never imperiled the whole web in the first place. Short duration and small, committed test populations allow for more iteration which should, in the end, lead to better features. The web developer feedback needs to be the most important voice in the standards process, and we’ll never get there until there’s more ability for web developers to participate in feature evolution.

Direct Link to Article — Permalink

---

Doing Science on the Web is a post from CSS-Tricks

Illustrations are taking over the Web. Designers are creating websites with everything from full-screen illustrations to hand-drawn divots that are used throughout projects. It’s a trend that’s likely to keep growing because illustrations make a design feel custom (even if it’s not).

Here’s how to make the most of them in your design.

Website illustration 101

Illustrations are a versatile and fun way to create a custom website design. From hand drawn images, to elements, to lettering, everything about a fully-illustrated or sketched image, looks and feels one of a kind. That’s one of the reasons it is so popular.

But there are plenty of other reasons designers are jumping on the illustration trend:

• Illustrations allow users to picture themselves in the scene you are setting because it does not focus on actual other people.
• There’s an element of whimsy that can only be accomplished with a drawing.
• Illustrations can mesh reality and imagination for a design that is extraordinary.
• Customization is easy when you are drawing the art elements.
• Illustrations are often quite colorful and can help you take advantage of the big, bright color trend.
• The technique is usable even if you aren’t an illustrator thanks to design kits or packs that are full of illustrated parts that can be used throughout a project.
• Illustrations can take on many different moods or styles, from sketches to elaborate drawings to computer-generated graphics.

Hero-style illustrations

Because hero headers are big, this is one of the easiest places to see the illustration trend. It’s also being used for a large number of sites from portfolios to retail to app preview pages.

What’s nice about an illustrated hero image is that there’s enough room for a quite complex piece of artwork. Small details, shading and color and interactions all have room to breathe, making it easier for users to explore each element.

There are a few tricks to all this complex illustrating:

• The artwork has to be good. Users aren’t going to spend any time looking at an illustration that they don’t get or is just a sloppy mess. So take time and care with it.
• While the illustration may have depths of complexity, the overall message should be simple. Know what the image is supposed to say and make sure the elements contribute to the message.
• Work with a professional. Just because you can draw hearts on a napkin does not mean you are ready to draw a full-scale website illustration. This process takes time and planning to really work. (And it can be expensive, so make sure this is the right aesthetic before you dive in.)

Add simple animation

While a static drawing can have a lot of impact on its own, the Web is alive with movement these days. Pair an illustration with subtle animations or scroll effects to encourage users to click around.

Small subtle movements, such as the spinning text in the website for The Hugo, helps draw the eye into the design. Small animations can also help users understand what actions to perform while visiting a site. This can be especially true for illustrations that include a lot of elements or have an overall “busy” design.

These little surprises can encourage site visitors to linger and look around as well. Hover animations are a particularly nice bonus for users that can serve both as a fun element and navigational tool.

Illustrated icons or UI elements

If an all-out illustrated website design is not your thing, consider a few illustrated icons or user interface elements. This is a simple way to ease into the trend. (And there are plenty of icon and UI kits out there that feature illustrated styles to help you get started.)

Illustrated elements can add a touch of whimsy to a site that might otherwise feel too formal. Something to try is an illustrated outline icon. This style is easy to drop in almost any design, works great with images and any color scheme, and provides a consistent visual theme from page to page.

If you want to go a step beyond icons, think oversized UI elements. Iqor, uses illustrated buttons in larger sizes to guide users and make the site a little more fun. The illustrated style flows from page to page with large elements using the same three pops of color. The result is fun and consistent and just a little bit unexpected from the customer care business.

Hand-drawn lettering

Another big trend in website design is custom typography. Combine the concepts of illustration and lettering for a hand-drawn logo, main text block or typographic art element. This text-based visual can have a big impact (especially when it is oversized or used as the main art element in the design).

The trick here is moderation. With the hand-drawn lettering style, you’ll want to stick to a single block of text or text element for this effect. Multiple uses of a custom text block can be overwhelming for users and can impact readability. It’s important to make sure that words are still quite clear and that users have no trouble understanding the message.

Both Day of the Dead and Stand Up to Cancer, do a great job with hand-lettering for a simple message. Day of the Dead uses other illustrations, easy sans serif typography and photos to help pull users through the rest of the site. The end result is fun and easy to follow. Stand up to Cancer uses more of a watercolor style that is all illustration based, but relies on more standard typefaces for readability. Both are good options for working with custom-style lettering.

Conclusion

While breaking into the world of illustration for website design projects might seem a little intimidating at first, it is something that many designers can do. From drawing by hand to having computer assistance or working with a kit, the options are pretty limitless.

It’s something to think about when it comes to those projects that demand doing something a little different. And it’s trendy enough that you might get asked about creating something in this style. So this is a good time to freshen up your sketching skills and think about ways an illustrated website design framework could work for you.

57 Display Fonts, 230 Textures & 100s of Design Extras – only $29!

Source

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. We can solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

The lives of web developers aren’t getting any simpler as the number of different devices and potential screen resolutions increase. The high-resolution arms race seems to be never-ending as vendors try to top one another with innovations in laptop and mobile device screens. New devices such as TVs and smartwatches are entering the market, making the race even more complex.

The post Responsive Image Breakpoints Generator, A New Open Source Tool appeared first on Smashing Magazine.