1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Fri, 06 Dec 2019 14:43:39 -0500 en-US hourly 1 https://wordpress.org/?v=5.3 40+ Best eCommerce WordPress Themes for 2019 https://1stwebdesigner.com/best-ecommerce-wordpress-themes/ https://1stwebdesigner.com/best-ecommerce-wordpress-themes/#respond Fri, 06 Dec 2019 13:52:04 +0000 http://1stwebdesigner.com/?p=118328 Whatever you are selling, eCommerce WordPress themes will suit perfectly with your brand. WP themes will make sure that your products are always available to the customers with a single click.

The internet has proven to be a very convenient place to shop. People have now started to buy almost everything with the click of their mouse. Because of this, websites are becoming more responsive to their customers.

We have also published these collections of Premium WordPress Themes and Free WordPress Themes.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets




Biagiotti – Beauty and Cosmetics Shop theme

Biagiotti WordPress eCommerce Theme

This gorgeous eCommerce theme is specifically designed to fit every cosmetics shop and beauty website out there. Not only does it come with complete WooCommerce compatibility, but it also contains all-encompassing homepage and shop layouts ideal for showcasing all your products and services. Plus, the theme’s elegant inner pages will allow you to introduce your brand, your team, pricing plans, and anything else you think would be relevant to your future customers in a clean and streamlined manner. In short, Biagiotti is just the theme you need to emphasize all the strengths and professionalism of your beauty business.

Some of Biagiotti’s most important features:

  • Big custom shortcode collection
  • Simple One-Click Import of Demo Content
  • Slider Revolution Responsive WordPress Plugin included ($26 value)
  • WPBakery Page Builder Plugin for WordPress included ($64 value)
  • Compatible with YITH WooCommerce Quick View, Wishlist and Color and Label Variations plugin

WineStore

WineStore

  • Mega menu
  • Demo content
  • Unlimited colors
  • Nivo Slider with new style
  • 500+ fonts with Google Font

Mr. Tailor

Mr Tailor

  • Sharp Retina graphics
  • Powerful Theme Options panel
  • Integrated Font Awesome Icons (369)
  • Child theme included
  • Sticky header navigation

GoodStore

GoodStore

  • Tested for WordPress 3.6+
  • Catalog mode
  • Fullwidth and boxed variation
  • Powerful & detailed styling options
  • 2 types of mobile menu

Genuine

Genuine

  • WordPress 3.8+ compatible
  • Build in HTML5 CSS3 and Bootstrap Twitter
  • Retina display ready
  • Shortcode Elements
  • Social Media Friendly

Mega Shop

Mega Shop

  • Google-rich Snippet
  • SEO ready
  • Applicable for Multilanguage
  • Smart responsive product grid
  • Free lifetime support

Smarty

Smarty

  • Full width and sidebar layout
  • Possibility to show or hide
  • 15 widgets available
  • Detailed sales, customer and stock reports
  • Coupon management system

Lookz

Lookz

  • 4 Pre-Defined Homepages Included
  • Fully responsive theme
  • 45+ Visual Page Builder Components
  • No core modifications
  • Different gallery layouts

Mommerce

Mommerce

  • 9 Awesome skins
  • WooCommerce support
  • Parallax bands
  • Slick animations
  • Highly customizable pages

Martha

Martha

  • Unlimited colors
  • Font icons in menu
  • Product zoom
  • Latest Carousel-integrated
  • Scroll to top button

Blaszok

Blaszok

  • Responsive and retina display
  • WPML ready
  • Easy customization
  • Shortcodes/Addons
  • Multiple portfolio

Computer

Computer

  • Pre-Defined page layouts
  • Build with Bootstrap
  • Font Awesome icons
  • Custom Layout
  • Unlimited Sidebar

Branchy – WooCommerce Responsive Theme

2015_06_15_13_22_29_Home_Demo_Store

Branchy is based on WooCommerce plugin. It is a multi-purpose theme ideal for mobile, electronics, cosmetics, and other types of eStores. It uses HTML5 and CSS3 and is fully responsive adapting to any types of devices and platforms. It is compatible with different types of browsers as well as with WooCommerce 2.3 version.

Branchy Theme Best Features:

  • No Core Modifications needed
  • More than 1500 Font Awesome Icons
  • Optimized for fast loading using CSS Sprite
  • Different portfolio and gallery layouts
  • Supports multiple language
  • Full PSD files

Queen – Responsive Shopify Theme

queen

This theme truly deserves its name – graceful, beautiful, and high resolution. As one customer says,

The features, customer support, documentation, flexibility, the powerful ability to customise, design/code quality are all A+ rating. If you are selling a small range, large range, or single range product, try this theme out.

Queen Theme Best Features

  • Responsive layout
  • Mega menu
  • Theme internationalization
  • QuickShop
  • Power admin panel
  • Bootstrap v.3

Granada – Responsive Magento Theme

2015_06_17_09_13_07_Granada_Home_One

Granada is a fully responsive theme based on Bootstrap 3, and compatible with any types of devices. It is one of the themes with the highest quality of graphics, which displays well even in ultra-high Retina display. With 35 different PSDs, six different layouts, and unlimited color options, you can make your own unique website even without coding knowledge.

Granada Theme Best Features:

  • Blog Extension Ready
  • Magento 1.7 – 1.9 Ready
  • Unlimited Header Types
  • Touch Friendly to All Mobile Devices
  • Social Bookmarks for Products
  • More than 300 Admin Features
  • Compatible with Zeon Manufacturer Extension

Organic Web Shop – A Responsive WooCommerce Theme

2015_06_17_10_27_33_Organic_Web_Shop_A_Premium_WordPress_Theme_with_WooCommerce_Webshop_integratio

Designed by Colibri Interactive, Organic is optimized for iPad and iPhone. It has WooCommerce Webshop Integration with features and options for easy customization. This is an ideal theme for eStores which sell coffee, farm products, cosmetics, food, and many more. It also contains an extensive them option panel so you can easily choose from an unlimited number of colors as well as change the background image and other elements.

Organic Theme Best Features:

  • A lot of extra plugins
  • Extensive theme option panel
  • WooCommerce 2.3 compatible
  • Multilingual including .mo & .po files

Flatastic – Versatile WordPress Theme

flatastic

Flatastic has a modern and clean design coupled with powerful layouts, color settings, easy-to-use visual composer, and advanced WooCommerce platform. The theme is available in four different versions – Drupal, VirtueMart, Magento, and HTML/CSS3.

The theme is Retina-ready with multiple and powerful plugins to make your online store more customer-friendly. Other features include child theme support, slider revolution and layer slider, Google Rich Snippets plugin, and unlimited footers together with a variety of header styles and layouts.

Flatastic Theme Best Feature

  • One Click Theme Install
  • One Page and Multiple Pages Layouts
  • Mega Menu
  • 4 Different Color Schemes
  • Unlimited Portfolios
  • Contact 7 Form
  • Attractive CSS3 animation

Edify – Responsive Zen Cart Theme

2015_06_17_13_17_09_Home

This is a modern and stylish Zencart theme based on Bootstrap 3 and compatible with a number of browsers. You can choose from the three layout versions, which are easy to install and customize. One of the best-rated themes on ThemeForest, Edify is also a winner when it comes to customer service. As one client says,

Edify Theme Best Feature:

  • Compatible with latest Zencart v1.5.4
  • Easy Install Sample Data
  • Three Homepage layout
  • Cloud Zoom 1.0.3
  • Font Awesome Icon Fonts
  • Lightbox for Product Images
  • Google Web Fonts
  • Mailchimp Integrated

Pts Mixstore – Multiple-Purpose Prestashop Theme

2015_06_17_14_00_26_Theme_Demo_PTS_Mixstore_Prestshop_Theme

Pts Mixstore is a multi-purpose Prestashop theme with five pre-built sites. Powered by Prestashop Page Builder and a new web-only technology, the theme is easy to install and maintain. It has an admin panel filled with features, which include a mega menu, live theme customization, custom font, layout configuration.

It also contains a powerful and well-structured code base for better programming, customization, and performance. These codes are also built with an anti-hacking system to protect your online store as well as the security of your customers.

PTS Mixtore Theme Best Features:

  • First Page Builder tool for Prestashop
  • One Click Installation
  • Powerful Grid System
  • Multiple Header Types
  • Flexible Layout System
  • CSS and JS compression
  • Custom font
  • Support CSS development

Unicon | Design-Driven Multipurpose Theme

2015_06_17_19_24_43_UNICON_Design_Driven_WordPress_Theme

Developed by Minti, Unicon is marketed as the first design-driven multi-purpose WordPress theme filled with powerful features and intuitive user interface. Unicon is not only ideal for building an online store, but also for your portfolio, blog, or business website. Its professional and amazing design is coupled with powerful features to help you design your website and keep it running smoothly.

Unicon Theme Best Features:

  • Drag and Drop Page Builder
  • Full WooCommerce Support
  • Boxed and Wide Layout
  • 50 Page Builder Elements
  • More than 650 ultra sharp icons
  • WPML Ready
  • Multiple Header Designs

Classico – Responsive WooCommerce WordPress Theme

classico

Classico is an elegant and modern theme with a wide collection of variants and layouts that suit your preferences. It allows you to combine themes using different layouts, structure, headers, and sidebars. Other features this theme has included an improved admin module which allows you to edit your portfolio and other pages easily. There is also a lot of options to your product page for customization and modification, such as the sidebar position, layout, wishlist option, and hover effects.

Classico Theme Best Features:

  • Visual Composer Plugin
  • Wide, Boxed, or Framed Layout Option
  • SEO Optimized
  • Different Footer and Header Combinations
  • 24/7 Support
  • WPML Ready
  • Portfolio Functionality

Regolith — Responsive Horizontal Shopify Theme

2015_06_18_14_41_50_Unique_Horizontal_Theme_Regolith

Regolith is a unique theme because of its horizontal orientation. Built with the latest technologies, you have a wide range of options to choose from to make the products in your website stand out as well as providing you more screen space to utilize. Regolith is easy to customize and has beautiful parallax effects to make your posts and products look even better. Products are automatically split into clean and even newspaper-style columns, which automatically reshapes itself to fit your screen.

Humbleshop – Minimal Retina Shopify Theme

2015_06_18_15_15_39_The_Humble_Shop

The Humbleshop theme is a play on words reflecting what it offers – clean, minimal, and simple. However, it has all the necessary features you need to create a modern and unique online boutique or store. Living up to its name, its Theme Settings are easy to configure allowing you to customize within five minutes. If you are after a simple and clean store which effectively showcases your product, Humbleshop is definitely for you.

Humbleshop Theme Best Features:

  • Retina Theme
  • Minimalist, and clean design concept
  • Responsive design, built based on mobile-first theory.
  • Automated meta open graph tag and SEO ready
  • Unlimited Google Font
  • Two preset theme as a base to start; light and dark version
  • Rich snippets ready for products

Shopfast – Responsive Zencart Template

2015_06_18_15_46_34_Zen_Cart_The_Art_of_E_commerce

Shopfast is a Zencart template with features, such as unlimited color options and multiple language support. It also uses the lates technology including HTML5, CSS3, jQuery, and Ultimate SEO URL Ready.

Restaurant – Responsive OpenCart Theme

2015_06_18_16_08_53_Your_Store

Restaurant theme, as the name suggest, is a perfect theme for any restaurant or food business with its clean and professional look as well as its great color combinations. Set in a white background and with Cloud Zoom to enlarge the products, your food presentations will surely look delectable using this theme. It is also optimized for fast loading to give your customers and visitors a truly enjoyable user experience.

Restaurant Theme Best Features:

  • Flex Slider
  • Cloud Zoom
  • Unlimited Banners and Sliders
  • CMS Blocks module
  • Full PSD files included
  • Related Product Scroller
  • Featured Products Slider Show
  • No core modifications needed

View Demo and Purchase Theme Here

Coffee – Opencart Responsive Theme

2015_06_18_16_25_00_Your_Store

Own a cafe or coffee shop? The Coffee theme is the perfect theme to use when you want to showcase your products and business online. It has all the right color combinations which seem to capture the strong aroma of various coffee blends as well as the mouth-watering cakes that go along with your java.

Coffee Theme Best Features:

  • HTML5 and CSS3
  • Support Multiple Language
  • Included RTL Language Support
  • Optimized for Fast Loading + CSS Sprite
  • Smart Responsive Product Grid
  • Unlimited Banners + Sliders
  • Featured Products Slider Show
  • Easy Shopping Cart Drop down from header
  • Avoid Javascript Conflict

Shine – Responsive Multipurpose PrestaShop Theme

2015_06_18_16_36_16_Shine_Responsive_Multipurpose_PrestaShop_Theme

Shine is a fully responsive theme filled with features, some of which allows you to change the color of almost every element. A PrestaShop theme, it is compatible with any PrestaShop store and displays flawlessly across all types of devices and browsers. It has a simple way to configure how your product detail page looks and what they have on them.

Shine Theme Best Features:

  • Powerful admin panel
  • Integrated Google fonts
  • Unlimited Colors
  • Custom Slide Show
  • Drop-down shopping cart
  • Product detail page
  • Lightbox or CloudZoom integration

Canvas Interior & Furniture Portfolio WP Theme

2015_06_18_16_48_38_Canvas_Affordable_Solutions_for_Better_Living

Canvas theme is specially designed for furniture and interior design portfolio and stores. Canvas developers understand that interior designers need a website filled with features that enhance and showcases the works of interior designers to impress clients and visitors. The theme has a clean and simple design as well as helpful features, such as full catalog, detailed portfolio item page, and eCommerce support.

Canvas Theme Best Features:

  • WordPress v4.1
  • High speed and extra optimized
  • WooCommerce support
  • One click demo import
  • Color management
  • More than 600 Google font support
  • Gallery Albums

Sport and Grunge

4

Some features:

  • Built-in simple shopping cart (PHP script)
  • Google Map and driving directions on the contact page
  • Working contact form
  • Photos in this website are using Javascript and CSS classes to apply a pre-made grunge border to your plain rectangle images.

Kids Toys

6

Some features:

  • WordPress shop payment methods: PayPal, Bank Transfer and Google Checkout
  • Unlimited number of products
  • 5 widget areas

Quickshop – Responsive Shopify Theme

Quickshop

  • Count-down on the slider
  • Discount exchange
  • Single product support
  • Responsive layout
  • Zoom Box

Polihop – Responsive OpenCart Theme

Polishop

  • Auto complete field
  • 2-product grid view style
  • 350+ Google fonts
  • Cloud Zoom plugin
  • Boxed and full-width layout

Black&White – Responsive & Retina Magento Theme

Black And White

  • Retina-ready Display
  • One-page checkout
  • Currency switcher as select box and flag bar
  • ‘Sale’ label for special priced products
  • Slider for displaying ‘Related products’

Control – Flexible Responsive PrestaShop Theme

Control

  • Detailed design of all pages
  • Google Fonts integration
  • Ajaxed search with product thumbnails
  • Includes SimpleBlog ($17 worth)
  • Unlimited colors

Kronan – Responsive PrestaShop Theme

Kronan

  • List and Grid views
  • Extended search with image and product price
  • Swipe on products at front-page for smartphones
  • Brand logo module
  • 5 built-in color themes and 16 patterns

Cosmetico – Responsive OpenCart Template

Cosmetico

  • Based on Bootstrap 3
  • Single or multi-column theme layout
  • Product ‘Sale’ badge
  • Refine search engine
  • Unlimited colors and patterns

MT Belano Responsive Parallax Magento Theme

MT Belano

  • Ajax shop by price slider
  • Custom layout and check-out pages
  • Customizable product image size
  • Different layouts for categories
  • Ajax add to cart, wishlist and compare

METROS – Minimalist Responsive CS-Cart Theme ($63)

METROS

  • Multi-store-ready
  • Fluid grid system based on Bootstrap framework
  • Unlimited colors, backgrounds, fonts
  • Flexible banners
  • One-click install including sample data

Kids Store Responsive Prestashop – CentriKids

CentriKids

  • Responsive Web design
  • Quickshop
  • Products in Grid and List view
  • Module CS theme editor
  • CS Quick search

Petsy Shop Responsive Magento Theme

Petsy

  • Ajax layer navigation
  • Featured Products Slider home page
  • Back to top button
  • Additional Navigation Link
  • Cloud zoom Images with Lightbox

Yoming – Technology Responsive Magento Theme

Yoming

  • Two layouts for main page
  • Flexible slideshow
  • Different layouts for categories
  • Previous/next navigation for product page
  • Custom layout and check-out pages
]]>
https://1stwebdesigner.com/best-ecommerce-wordpress-themes/feed/ 0
10 Places to Find Beautiful Free SVG Icon Sets https://1stwebdesigner.com/10-places-to-find-beautiful-free-svg-icon-sets/ Thu, 05 Dec 2019 16:43:41 +0000 https://1stwebdesigner.com/?p=150876 Looking for beautiful vector icons for your next web design project? Every website in the making could use some icons to help spruce things up a bit and add visual interest. Even subtle icons draw eyes to your UI and help users navigate.

And SVG vectors scale to any size, which means unlike PNGs and JPEGs, they’ll never get blurry if you make them smaller or larger. Place them anywhere throughout your site, and never worry about them looking bad on other devices and screen sizes.

If you want to add icons to your website design, here are some of the best places to find them. Just make sure to check the license on each to see if you’ll need to include attribution.

UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets


Material.io

Example of Material.io

Material Design offers a set of open source UI elements to help you build a beautiful website, including this awesome icon kit. These well-made vectors span several categories and can fit almost any kind of website. There are also five different styles to choose from just to add a little variety.

Simple Icons

Example of Simple Icons

Looking for SVG icons for popular online brands like Spotify, Skype, or Firefox? You can find hundreds of them here, all creatively sorted by their brand’s color scheme. You can also search the list or organize alphabetically.

Zondicons

Example of Zondicons

Forever free and constantly being updated, Zondicons is set of consistently designed geometric icons for any website or app. These vectors are scalable, pixel perfect, and seamlessly blend in with a modern style.

Ikonate

Example of Ikonate

With over 300 customizable icons to choose from, Ikonate has a little something for everyone. Besides the sheer variety here, you can also change icon and border size, corner softness, and color right on the webpage. These are totally free to use and lightweight.

Feather Icons

Example of Feather Icons

Feather is a set of beautiful, minimal UI icons perfect for adding some subtle flair to your website or app. With nearly 300 icons, decorating your site’s interface will be easy.

Heroicons UI

Example of Heroicons UI

Here are 100 assorted icons in a thick, friendly-looking style, with enough elements to flesh out your site. This set is free for use under an MIT license, which means you can include them in commercial projects too.

Entypo

Example of Entypo

Entypo features over 400 premium icons comprising of general UI elements as well as assorted objects. There’s also a socials extension with logos for sites like Twitter and Instagram. With just a small attribution on your site, these quality icons are available for any project.

GitHub Octicons

Example of GitHub Octicons

GitHub has created their own set of icons for use in your projects. Mixed in with UI objects like arrows and chevrons, you’ll find icons based off GitHub’s logo and others inspired by technology.

Hawcons

Example of Hawcons

500 professional, carefully crafted icons, in two styles as well as two colors. What more could you need? This icon pack is sorted into six categories, and available in 4 vector and bitmap file types as well as a font file, offering ultimate versatility.

Linearicons

Example of Linearicons

These simple line art icons look great, and they’re super easy to install too. All you need to do is add a line of code to your site and the icons will be delivered by CloudFront, or you can download the icons you want as a vector, PDF, desktop font, or web font.

Free Vector Icon Packs for Any Project

Images and icons are the best way to make your website look better. A site chock full of text with nothing to break it up is boring and hard to read. Insert a few elegant icons in the right spot and you’ll find that your website looks a lot more interesting. It’s amazing what a few small images can do.

]]>
What to Look for in a Gutenberg-Compatible WordPress Theme https://1stwebdesigner.com/what-to-look-for-in-a-gutenberg-compatible-wordpress-theme/ Wed, 04 Dec 2019 21:44:45 +0000 https://1stwebdesigner.com/?p=150640 With the Gutenberg block editor now the default option within WordPress, it’s important to think about how it works with the other components of your website. Themes are of particular concern, as they directly display the content you create.

In a broad sense, most themes (even older ones) are likely compatible with the new editor. At least in terms of avoiding breakage. However, that doesn’t mean that your theme can take advantage of every feature.

So, how should a Gutenberg-compatible WordPress theme work? What features can you expect to find? Today, we’ll introduce you to some basics that you can use as a guide when shopping for your next theme.

Cover the Basics

In the Classic editor, all of the content within a post was more or less considered a singular entity. While there may be various HTML elements included in that post, they are still tied together within the editor itself. That’s why adding goodies such as multicolumn layouts were so difficult. You had to be extra careful when making changes, as the whole thing could easily break.

Getting around this used to require either a page builder or even custom fields to create layouts that were more flexible and stable. Gutenberg’s block-based approach to content fixed this issue, but also requires themes to make some changes under the hood to support various block styles and features.

Among the most common features you’ll want a theme to support are wide alignment blocks, which can stretch content across the entire screen. Other items include preset color palettes, font sizes and custom editor styles that better reflect the front-end design of the website.

Beyond offering support for the default blocks, a well-thought-out theme will provide extra styles and customization options for them, as well. Items such as the Pullquote or Cover blocks are a perfect opportunity for a theme to add some extra personality.

A full-width Cover block in the Gutenberg editor.

Inclusion of Custom Blocks

One of the most exciting features of Gutenberg is the ability for developers to create custom blocks. They can run the gamut in terms of functionality. Everything from complex layouts to simple design elements (like buttons), or preset content types (such as testimonials or staff profiles) are possible.

If nothing else, most WordPress themes are all about pouring on the extras. Well before blocks became a part of the discussion, theme authors were cramming in loads of custom widgets and shortcodes into their products.

These items have served users well, providing an extra level of high-end function. Thus, it only makes sense that authors will shift these features towards custom blocks instead. They can be placed anywhere within content, easily moved around and even used in multiple instances.

The bottom line is that both widgets (at least, as we’ve come to know them) and shortcodes are going to be phased out over time. If you’re shopping for a new theme, look for one that is embracing blocks over legacy solutions.

A custom FAQ block within Gutenberg.

Makes Other Editors Optional

WordPress themes, particularly of the commercial variety, tend to bundle page builders. This is certainly a nice bonus – that is, if you want to utilize one.

But sometimes, authors declare these plugins to be “required” in order to use their theme. Now that Gutenberg can cover at least some of this ground, users should no longer be forced into installing plugins they don’t need.

To clarify, page builders and Gutenberg can successfully coexist on a website. There’s nothing inherently dangerous about using both. It’s just that users should be the ones to make that choice.

Person typing on a laptop computer.

Stays in the Loop

A theme that offers routine bug fixes and feature additions is always worth looking for, but it’s especially so when it comes to the block editor. Why? Because it’s in a constant state of change.

Since the day it officially rolled out in WordPress 5.0, Gutenberg has been a work-in-progress. So much so that the code deprecation log is full of things that have been removed over a relatively short period of time. Of course, care is taken to maintain some backward compatibility, but it’s something to be mindful of.

Therefore, just because a theme implements a specific feature today does not mean it will still work a few releases into the future. Theme authors need to stay vigilant to ensure that their products take advantage of new features and potentially refactor code where needed.

The block editor’s evolution doesn’t look like it will slow down anytime soon. Themes will need to keep pace.

Gutenberg changelog.

A Simpler Experience?

Over the years, themes have become rather complicated. There are often tons of included options and companion plugins. Some even make cosmetic changes to the WordPress edit screen itself.

But perhaps Gutenberg offers a chance for simplification. Part of its aim is to standardize how themes (and plugins) interact with the editor. Blocks can offer similar functionality to most of those aforementioned extras and can be implemented in a much more uniform way.

In theory, taking advantage of what Gutenberg does best could lead to cleaner, less bloated themes. Or at least ones that are better organized. And above all, that may just be the biggest feature to look for when searching for your next WordPress theme.

]]>
The Ultimate Collection of Free Texture Downloads https://1stwebdesigner.com/the-ultimate-collection-of-free-texture-downloads/ Mon, 02 Dec 2019 16:43:00 +0000 https://1stwebdesigner.com/?p=150889 Every designer could use some high-quality textures for their projects. You can use them as backgrounds, overlays, or just to make your graphics a little more interesting. And they look great in posters, banners, or even as part of a website.

But free, high quality textures can be hard to come by. That’s why we’ve put together this huge collection of texture downloads, free for use by any designer. Some require an email subscription to download, but that’s all.

Altogether there are nearly 300 textures and brushes here, sorted into three categories: nature and materials, abstract, and brushes.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


Nature and Materials

These photorealistic textures draw from nature, as well as man-made materials like brick and plastic. You’ll find woods, stones, paper, and dirt that make great natural backgrounds or overlays.

7 Plywood Textures

Example of 7 Plywood Textures

Crumpled Paper Textures Set

Example of Crumpled Paper Textures Set

5 Stone Wall Textures Vol.2

Example of 5 Stone Wall Textures Vol.2

24 Free Dirt Textures

Example of 24 Free Dirt Textures

Brick Wall Textures Vol.2

Example of Brick Wall Textures Vol.2

Plastic Transparent Textures

Example of Plastic Transparent Textures

Arctic Frost Textures

Example of Arctic Frost Textures

6 Weathered Textures Vol.1

Example of 6 Weathered Textures Vol.1

Vintage Paper Textures Set

Example of Vintage Paper Textures Set

Abstract

Rather than drawing from nature, these textures are more abstract and random. They make great background textures for websites and posters, or pretty overlays for objects. You’ll find noise, splatters, foil, and watercolors mixed in here.

10 Free Textures To Simulate Holographic Foil Print Effects

Example of 10 Free Textures To Simulate Holographic Foil Print Effects

Dust & Noise Overlay Textures

Example of Dust & Noise Overlay Textures

Free Ink Stamp Texturizer Smart PSD for Adobe Photoshop

Example of Free Ink Stamp Texturizer Smart PSD for Adobe Photoshop

6 Watercolor Textures Vol.2

Example of 6 Watercolor Textures Vol.2

Rose Gold Foil Textures

Example of Rose Gold Foil Textures

25 Free Speckle Textures

Example of 25 Free Speckle Textures

Voyager Textures Background Set

Example of Voyager Textures Background Set

Brushes

Last but not least we have textured brushes. These make it super easy to add shading, splatters, or grain to any image; just use the brush to draw it on, and add a little realism to your graphics.

Stipple Shading Brushes for Adobe Photoshop

Example of Stipple Shading Brushes for Adobe Photoshop

10 Free Grain Shader Brushes for Adobe Photoshop

Example of 10 Free Grain Shader Brushes for Adobe Photoshop

10 Free Halftone Texture Brushes for Adobe Photoshop

Example of 10 Free Halftone Texture Brushes for Adobe Photoshop

30 Free Vintage Shading Brushes for Adobe Illustrator

Example of 30 Free Vintage Shading Brushes for Adobe Illustrator

14 Free Subtle Grunge Texture Brushes for Adobe Photoshop

Example of 14 Free Subtle Grunge Texture Brushes for Adobe Photoshop

10 Free Ink Splatter Photoshop Brushes and PNG Textures

Example of 10 Free Ink Splatter Photoshop Brushes and PNG Textures

15 Free Grit & Grain Texture Brushes for Adobe Photoshop

Example of 15 Free Grit & Grain Texture Brushes for Adobe Photoshop

Beautiful High-Resolution Textures

Whether you’re using a brush to carefully draw realistic grain on an image, adding a pretty foil overlay to an object, or downloading a futuristic texture to use as a background, there’s something for every designer here.

Most of these are totally free for use, but make sure to check the licenses before you include any of these in a commercial project. Once you have the go-ahead, go crazy using these gorgeous high-res textures in your web and graphic designs.

]]>
Free Bootstrap Website Templates Worth Checking Out https://1stwebdesigner.com/free-bootstrap-website-templates-worth-checking-out/ Tue, 26 Nov 2019 17:23:14 +0000 https://1stwebdesigner.com/?p=150831 Web developers have long been using Bootstrap to create unique, beautiful websites. The HTML, CSS, and JavaScript framework offers an easy-to-use and even easier to implement toolkit for designers and developers to create responsive websites.

And where there’s a framework, there will always be free templates built by developers for anyone to use. Here are some of the best general-purpose Bootstrap themes online, totally free to download and edit for your own websites.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




Creative

Example of Creative

This simple yet beautiful one-page theme is made for small businesses. With a full-screen header, clean design, and working lightbox gallery, it makes a perfect mini-portfolio for any creative startups.

Grayscale

Example of Grayscale

Grayscale is an elegant multipurpose theme with a minimal dark palette. The template would work well to show off a project or introduce your brand. A beautiful header with a call to action button scrolls you right down into a small portfolio, followed by a newsletter subscription box and social media links.

Freelancer

Example of Freelancer

If you’re a freelancer, you’ll like this portfolio template. The flat, cartoony design is very appealing and will certainly make you stand out. And the portfolio section includes popup lightbox windows with room to describe all your projects, plus a contact form you can get working with a few PHP tweaks.

Resume

Example of Resume

Professional and elegant, this template is perfect for an online resume. The clean theme features fixed side navigation and sections to list experiences and skills, with a design that gets to the point while still being aesthetically pleasing. A great way to impress future bosses and clients.

New Age

Example of New Age

Need a template with a pop of color? New Age is filled with bright and vivid designs, including a beautiful header gradient that’s sure to capture attention. The modern one-page design was made to showcase your app, product, or anything else.

Tabler

Example of Tabler

Looking for a build-your-own Bootstrap admin panel with a clean dashboard interface? There are plenty of interface pieces and useful components already made for you. Just put them all together to create a unique template.

Coming Soon

Example of Coming Soon

Got a big project but aren’t quite ready to reveal it? Coming Soon is a great landing page, with room for a short blurb, newsletter sign-up, social icons, and a huge video background. The video includes a fallback image for mobile users so you don’t need to worry about performance.

NewBiz

Example of NewBiz

This professional business template comes with everything a startup will need. Eye-catching scroll and hover animations keep users interested, while each section has something unique like a lightbox portfolio or a scrolling slider. This is definitely a more feature-packed theme.

Regna

Example of Regna

Regna is a business-oriented template that opens with a beautiful header and transitions to a clean, professional look. There are plenty of animated effects, useful sections, and even a sortable portfolio gallery. The pro version comes with a working contact form and removed attribution.

CoreUI

Example of CoreUI

Every business needs a good admin panel, and CoreUI lets you build your own. Use their customizable components to put together a dashboard that has everything you want. Widgets, charts, cards and popups – and the pro version comes with even more elements.

Rapid

Example of Rapid

Rapid offers a light and sophisticated template made for businesses of any kind. Elegant animations are found on every scroll, and the theme includes all the sections you’ll need to present your brand. There’s a filterable portfolio, pricing section, contact form, and plenty more.

Beautiful Bootstrap Templates

Thanks to Bootstrap template designers, you don’t need to build a website from scratch. Just install one of these themes and tweak the images and text, or build on them to add your own elements. It’s a real timesaver. Try one of these beautiful, functional Bootstrap themes and make them work for you.

]]>
A Guide to Understanding GSAP JavaScript Animation https://1stwebdesigner.com/a-guide-to-understanding-gsap-javascript-animation/ Mon, 25 Nov 2019 17:27:08 +0000 https://1stwebdesigner.com/?p=150810 The use of animation is one of the best ways to make your website stand out. When smartly implemented, it can dazzle users and call attention to your most important content.

Of course, web animation has been around for years. But it’s really taken off with the spread of HTML5, CSS3 and JavaScript. Adding movement to your site has never been easier – or looked better.

Among the most powerful and fascinating tools for creating animation is the GreenSock Animation Platform (GSAP). It is known for its code-based approach and the ability to create some incredible special effects.

Today, we’ll cover the basics of GSAP. We’ll explain what it is and why you’d want to use it over other techniques. Plus, we’ll show you some examples of what it can do. Let’s get started!

GSAP Logo

Animation Through Code

At first, it may sound counterintuitive. Animation is a highly-visual art. So, why would we want to create this through code, rather than a traditional GUI-based tool? And what advantages does it have over good old CSS3 animation that has been built into the standard?

Here is why GSAP may be your best choice for creating animation:

It Works with the Elements Already on Your Page

Virtually any element on a page that can be accessed through JavaScript can be animated via GSAP. It doesn’t require you to create a separate canvas just for animation. CSS elements, SVG images and even JavaScript objects can be manipulated. This allows you to get up and running more quickly.

Compatibility Is Built In

GSAP has been tested across all the major web browsers – including legacy fare such as Internet Explorer. All of the browser-related tweaks and fallbacks have already been built into the platform. As such, you won’t have to create your own hacks to get things working across the board. This has all been done for you. If something’s not supported by a particular browser, it “silently” fails and won’t produce errors.

Meanwhile, GSAP also plays nicely with a variety of JavaScript frameworks and other technologies. So you can feel free to use it in conjunction with React, Vue or jQuery. Pretty much anything you’re already utilizing on your website is likely to be compatible.

It Uses Familiar, Easy to Learn Syntax

In addition to supporting CSS classes and IDs, GSAP also allows you to style animations using common properties. Formatting your code is a familiar mix of JavaScript and CSS. It even supports hex colors.

Fast Performance

Optimization is one of the key benefits of using GSAP. It offers a combination of HTML5 and JavaScript to allow for incredibly smooth animation. Support for hardware acceleration means that you’ll get great performance – even on slower devices. You can take a speed test to compare it other animation techniques such as jQuery and standard CSS.

Fine-Grain Control

When you start to explore GSAP, you may notice how detail-oriented it is. There is a large selection of built-in features that you can use to create virtually any type of animation. You can, for instance, choose to sequence multiple animations in a row or even randomize them. And that’s not even beginning to scratch the surface of what’s possible.

The documentation is deep and there are plenty of code examples you can use to get started. But to get a better understanding of what GSAP is capable of, this introductory video offers some terrific demonstrations:

There Are Plenty of Extras

The GSAP core package (which is free) is required to get started – and it’s plenty powerful. But there are also a number of available plugins that can help you do more. There are plugins for tasks like morphing elements, implementing physics and visually drawing motion paths.

It’s worth noting, however, that plugins are only available to paying members of “Club GreenSock”. This provides special access to both the plugins and extended commercial licensing.

Plus, features are constantly being added to core. Version 3, for example, offers up a simplified API, staggered tween animations and default animation properties, to name a few.

GSAP in Action

Now that we know a little bit more about what makes GSAP such a compelling option, let’s check out some examples of what it can do.

The great thing about each of the following snippets is that they are hosted on CodePen. So, you can feel free to study them, fork them and get a deeper understanding of how everything works.

Deconstructed Advanced Staggers Grid

See the Pen
GSAP 3 Deconstructed Advanced Staggers Grid
by Pete Barr (@petebarr)
on CodePen.

Crinkled Variable Font

See the Pen
GSAP 3 & ETC Crinkled Variable Font
by Pete Barr (@petebarr)
on CodePen.

Simple Camera

See the Pen
Simple Camera
by Blake Bowen (@osublake)
on CodePen.

GSAP 3 Radio

See the Pen
GSAP 3 Radio
by Kasper De Bruyne (@kdbkapsere)
on CodePen.

MotionPath Distribute

See the Pen
MotionPath Distribute GSAP 3.0
by Craig Roblewsky (@PointC)
on CodePen.

Heartbeat 3.0

See the Pen
Heartbeat 3.0
by Chris Gannon (@chrisgannon)
on CodePen.

Squiggle Text Animation

See the Pen
Squiggle text animation
by Cassie Evans (@cassie-codes)
on CodePen.

Cube Walk

See the Pen
GSAP 3 Cube Walk
by Pete Barr (@petebarr)
on CodePen.

Circle Packed Particles

See the Pen
Circle Packed Particles (GSAP3 + PixiJS v5)
by Steve Gardner (@ste-vg)
on CodePen.

DConstruct

See the Pen
DConstruct
by Cassie Evans (@cassie-codes)
on CodePen.

Powerful Animation Made Easier

When it comes to methods for animating your web projects, GSAP offers a rare combination. It’s more powerful than web standards alone, yet it is also optimized for performance. With most other libraries, you tend to sacrifice the latter to get the former.

This lack of compromise, combined with the shiny examples above, make it easy to see why so many developers have adopted GSAP. GreenSock says over 10 million sites are running the software, and one imagines that number will only continue to grow.

So, if you’re looking to up your animation game, give GSAP a try. You’ll be able to work your way up from basic movements all the way to high-end effects quicker than you may have thought possible.

]]>
Fascinating CSS Grid Layout Examples and Tutorials https://1stwebdesigner.com/fascinating-css-grid-layout-examples-and-tutorials/ Wed, 20 Nov 2019 15:26:54 +0000 https://1stwebdesigner.com/?p=150785 CSS Grid is one of the most powerful tools available to developers. The simple module allows you to create entire website layouts, responsive galleries, and other cool effects. With enough creativity, you can do a lot of interesting things using CSS grid.

Unlike flexboxes which can only work with a row or a column, CSS grids work in a fully 2D space, allowing you to divide a page into regions of columns and rows. This sounds simple, but it’s a huge deal since you can create web pages, tables, galleries, or other creative modules and layouts.

Developers have done a lot of cool experiments with CSS grids. Here are a few of the most fascinating CSS grid layouts and tutorials across the web.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


CSS Grid Template Builder

See the Pen
CSS Grid Template Builder
by Anthony Dugois (@anthonydugois)
on CodePen.

CSS Grid: Restaurant Website

See the Pen
CSS Grid: Restaurant Website
by Olivia Ng (@oliviale)
on CodePen.

CSS Grid Calendar

See the Pen
CSS grid calendar
by Mert Cukuren (@knyttneve)
on CodePen.

Layout-Fun with CSS Grid

Example of Layout-Fun with CSS Grid

How to Build a Calendar with CSS Grid

Example of How to Build a Calendar with CSS Grid

Isometric eCommerce CSS Grid

See the Pen
Isometric eCommerce CSS Grid
by Andy Barefoot (@andybarefoot)
on CodePen.

Building a Scrapbook Layout with CSS Grid

Example of Building a Scrapbook Layout with CSS Grid

CSS Grid Layout with @support Flexbox Fallback

See the Pen
CSS Grid Layout with @support flexbox fallback
by Gustaf Holm (@primalivet)
on CodePen.

Sophisticated Partitioning with CSS Grid

Example of Sophisticated Partitioning with CSS Grid

Building a Conference Schedule with CSS Grid

Example of Building a Conference Schedule with CSS Grid

Apple Keyboard

See the Pen
Apple Keyboard
by Jon Kantner (@jkantner)
on CodePen.

CSS Grid: Train Ticket

See the Pen
CSS Grid: Train Ticket
by Olivia Ng (@oliviale)
on CodePen.

Flexible Data Tables with CSS Grid

Example of Flexible Data Tables with CSS Grid

CSS Grid: Periodic Table

See the Pen
CSS Grid: Periodic Table
by Olivia Ng (@oliviale)
on CodePen.

CSS Grid: Floor Plan

See the Pen
CSS Grid: Floor Plan
by Olivia Ng (@oliviale)
on CodePen.

Faster Layouts with CSS Grid (and Subgrid!)

Example of Faster Layouts with CSS Grid (and Subgrid!)

Geometric Business Card with CSS Grid

See the Pen
Geometric business card with CSS Grid
by Liz Wendling (@Elwend)
on CodePen.

Grid Garden

Example of Grid Garden

Experiment with CSS Grid

Not enough designers use CSS grid. The responsive system is relatively new, but there are a lot of both fun and practical things you can do with it. From creating appealing page layouts to designing interesting modules, CSS grid is an untapped goldmine for web design.

Want to try it yourself? Follow these tutorials and learn how to use grids, or fork some of these pens and do some experimenting. See what you can pull off with a little CSS grid magic.

]]>
15 Mind-bending Three.js JavaScript Experiments https://1stwebdesigner.com/15-mind-bending-three-js-javascript-experiments/ Mon, 18 Nov 2019 14:29:57 +0000 https://1stwebdesigner.com/?p=150564 3D browser animation just keeps getting more powerful, and web developers are taking an interest. WebGL, Three.js, and other JavaScript APIs and libraries have been around for a while, but many browsers and computers didn’t have the capacity to run advanced animations without significant slowdown.

But as software and hardware becomes more effective at dealing with complex 3D environments, it’s now much more common to see websites rendering animations. Three.js is particularly useful thanks to its ability to run without any plugins. With this powerful library, web developers can create jaw-dropping animations or even simple video games.

Ready to have your mind blown? Here are a few examples of gorgeous Three.js experiments that take full advantage of the library’s capabilities.

Lab City 3D

See the Pen
City 3D
by Victor Vergara (@vcomics)
on CodePen.

Playing with Sound

See the Pen
Playing with sound and three.js
by Sarah Drasner (@sdras)
on CodePen.

three.js Points Anti-Gravity

See the Pen
three.js Points anti-gravity is applied ver2
by yoichi kobayashi (@ykob)
on CodePen.

WebGL Distortion Slider

See the Pen
WebGL Distortion Slider
by Ash Thornton (@ashthornton)
on CodePen.

Test of Three.js and Tween.js

See the Pen
Test of Three.js and Tween.js
by cx20 (@cx20)
on CodePen.

three.js canvas – particles – waves

See the Pen
three.js canvas – particles – waves
by deathfang (@deathfang)
on CodePen.

WormHole

See the Pen
WormHole
by Josep Antoni Bover Comas (@devildrey33)
on CodePen.

Wire Typo

See the Pen
Wire Typo
by ilithya (@ilithya)
on CodePen.

THREE.js Particle Stream

See the Pen
THREE.js particle stream
by Szenia Zadvornykh (@zadvorsky)
on CodePen.

Perlin Noise

See the Pen
Perlin Noise
by Victor Vergara (@vcomics)
on CodePen.

Three Js Point Cloud Experiment

See the Pen
Three Js Point Cloud Experiment
by Sean Dempsey (@seanseansean)
on CodePen.

Shader Moon

See the Pen
Shader Moon
by Victor Vergara (@vcomics)
on CodePen.

3D Floating Typo

See the Pen
3D Floating Typo
by ilithya (@ilithya)
on CodePen.

RetroFighter Gunship

See the Pen
RetroFighter Gunship
by Rainner Lins (@rainner)
on CodePen.

Pixel Particles

See the Pen
Pixel Particles
by Szenia Zadvornykh (@zadvorsky)
on CodePen.

Mind-Blowing Three.js Experiments

Developers are always creating awesome new code experiments that do cool new functions or are just made to look beautiful. It’s a good idea to keep up with sites like CodePen so you can see how devs are pushing the limits of libraries like Three.js. There’s always someone trying something new and interesting.

And the best part is you can also use pens in your own open source websites and projects, or learn from them yourself and try making your own experiments. Learn from your fellow developers, fork their code to try your own ideas, and you’ll quickly learn the nuances of Three.js animation.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




]]>
Premium Flat Business Icon Sets https://1stwebdesigner.com/premium-flat-business-icon-sets/ Wed, 13 Nov 2019 14:42:56 +0000 https://1stwebdesigner.com/?p=150585 In the market for some high-quality icons to add to your business website, app, or infographic? Little graphics like these can go a long way in enhancing a design. They fill out the boring white space with visual appeal, and overall make your project look a lot more professional.

But even if they’re small, designing hundreds of little icons like this can take a long time. These minimalistic icons will fit into almost any kind of project. There’s no reason to waste hours meticulously creating tiny icons when there are thousands available online. Try some of these premium and free sets and add them to your project to instantly make it look a lot more interesting.

UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets


Ultraviolet: 60 Business Icons

Example of Ultraviolet: 60 Business Icons

Free Ecommerce Icon Pack

Example of Free Ecommerce Icon Pack

Business Collection Icon Pack

Example of Business Collection Icon Pack

Referral Business Icons

Example of Referral Business Icons

30 Isometric Icon Set

Example of 30 Isometric Icon Set

Smashicons: 80 Material Office Icons

Example of Smashicons: 80 Material Office Icons

Business and office icons set

Example of Business and office icons set

120 Business and Finance Pixel Perfect Icons

Example of 120 Business and Finance Pixel Perfect Icons

Capitalist Icons – Free Sample

Example of Capitalist Icons – Free Sample

Thin Line Business Icons

Example of Thin Line Business Icons

Graph Icon Pack

Example of Graph Icon Pack

Magicons: 100 Business Icons

Example of Magicons: 100 Business Icons

Seo Icons Icon Pack

Example of Seo Icons Icon Pack

Smashicons: 170 Retro Business Icons

Example of Smashicons: 170 Retro Business Icons

Minimalist Business Icons

The great thing about flat, minimalistic icons is that they look great in almost any situation. Their simplicity pairs well with many styles. And since vector icons are small but scalable, you can pop them into uninteresting white space to make it look more interesting, or even scale them up and make them the centerpiece of your graphics.

Whether you go with free or paid icon packs, there are thousands of them online. If you’re short on time, you should definitely download a few instead of wasting time making your own graphics. Enhancing your project with beautiful flat icons is just a few clicks away, so don’t hesitate to test out one of these packs.

]]>
10 Beautifully Clean Websites with Minimalist Designs https://1stwebdesigner.com/10-beautifully-clean-websites-with-minimalist-designs/ Tue, 12 Nov 2019 18:53:30 +0000 https://1stwebdesigner.com/?p=150568 Minimalism is always in. The universally appealing, clean web design trend has dominated the internet for many years, and will certainly continue for many years to come. While there’s plenty of bright, flashy, experimental web design emerging as well, nothing beats simplistic, clean, and beautiful.

Looking for some inspiration for your own designs? We’ve collected these elegant, minimalistic web designs for you today. Take a look at these websites and their own spins on the trend.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




Pitch

Example of Pitch

Pitch opens with a unique full screen intro that scrolls out and transitions into the rest of the site content. It uses clean, white design as a base but builds on it with plenty of colorful and lively animations. This is a great example of what you can do with a simple white base and a little creativity.

Hello Monday

Example of Hello Monday

Great animation has the power to make a simple website vivid and memorable. The intro animation alone will capture your eye, and all the beautiful transitions and hover effects round it out perfectly. This is the perfect portfolio for a branding company: one that leaves a lasting impact.

OpenAI

Example of OpenAI

Clean doesn’t have to mean boring. OpenAI uses vivid images and a gorgeous gradient background while still being efficient and elegant. Scrolling transitions to white to give you a break from the rich colors, and blog pages blend a simple background with interactive elements and bright images to keep things fresh.

Outline

Example of Outline

Check out this website if you’re aiming for minimalism and elegance balanced against vivid imagery. It introduces itself with a simple animated header, then drops you into softly scrolling sliders and bold full screen design. Product pages are intensely colorful with crisp HD pictures, and that same elegant aesthetic.

StoryCode

Example of StoryCode

A little innovation is all it takes to make a simple, clean UI interesting. StoryCode opens with a cool scroll animation that pulls away to reveal their branding tagline. The three-color palette of orange, black, and white provides consistency and contrast in this design.

Jamie McLellan

Example of Jamie McLellan

You’ll definitely remember this designer’s name, as it hovers boldly behind his project images. Click a picture to see its project page, and again to zoom in closer. The whole site is in black and white barring images, but the unique UI does more than enough to make it appealing.

Okalpha

Example of Okalpha

Minimalism doesn’t just mean a white background or a subtle two-toned palette. Okalpha goes all out, starting out with just a pop of color before plunging right into the bright, cartoonish hues. This definitely isn’t an easy aesthetic to pull off, but this site does it by consistently using only three bright colors to balance the intensity.

Good On You

Example of Good On You

If you’re going for a more sophisticated, muted design, look here for inspiration. This fashion website uses pale browns and blues, with each carefully picked image having just the right intensity of color to accent them.

Mozilla Dot Design

Example of Mozilla Dot Design

Clean design is all about the UI, and Mozilla Dot Design does it right with a bold and image-focused appearance. Its palette is striking and multi-toned, but it uses it to great effect on every single page.

Bold

Example of Bold

Bold uses fresh and professional design to create a stunning aesthetic. The site opens to black and white tones, with a crisp video that also begins in a monochromatic palette. The middle of the page is filled with bright and beautiful colors, before transitioning back into black and white as it reaches the footer. It’s an awesome effect and great for branding.

A Fresh Take on Minimalism

Minimalism is definitely a style can be overdone, but with a unique little twist, you can breathe life into this popular trend. Take note of how each of these websites include a fresh new spin on things. A pop of color, an intriguing intro, a beautiful scrolling animation – add your own touch to it, and your site will stand out.

]]>