Journal

Let us keep you in the loop with whats happening in our world.
We will also share interesting things you can apply to your business

15 Small Mini Icon Sets for Your Web Projects

Icons and visual clues are important additions to any web app, but they can be difficult to create yourself because of the tiny dimensions.

Luckily there are stacks of free high-quality icon sets out there on the web, that have been created by talented designers. You can be sure that you’ll find almost any style of the icon you need in this collection of packs.

We gathered here different mini icon sets with various designs such as flags (for multi-language websites), common icons (print, save, download), and more. Most of these small icons come in .ico files, vector EPS and even flash SWF formats. Also, they can be used on personal and community web sites, in free and open source software applications, but make sure you check their licenses individually. Some of these sets include small business icons, small star icons, small pixel icons, small menu icons and much more.

Download them using the links below and add them to your icon freebies collection.

Mini Icons by FamFamFam

Download the icon pack High Quality Mini Icon Sets

Download the icon pack High Quality Mini Icon Sets

FamFamFam is your go-to site if you’re in need of a mini icon. This is the website of Mark James, a web developer from Birmingham, UK. This particular set contains 114 small GIF icons which are free to use for both commercial and personal projects.

Mono Icons by Tutorial9

108 Mono Icons Tutorial9

108 Mono Icons Tutorial9

On Tutorial9 you can find this set of 108 nice and minimal mono icons. If you’re looking for a colorful icon you don’t have to worry, they can be easily customized. This pack of small icons is free for using in your personal and commercial projects and can be used without attribution.

Greyscale Icons by Brand Spanking New

HoHoHo! Design High Quality Mini Icon Sets

HoHoHo! Design High Quality Mini Icon Sets

Brand Spanking New also has a set of small greyscale icons for anyone who has been good this year and will be in those years yet to come. There are 113 10×10 greyscale icons in .gif format in this set.

Flag Icons by FamFamFam

Download the icon pack

Download the icon pack

This is another set FamFamFam has to offer you. If you’re ever in need of a flag icon you’ll definitely find the one you’re looking for in this set. This set contains 247 small icons — in GIF and PNG formats. You will find most countries in the world as small pixel icons.

SweetiePlus Icons by Sublink Interactive

Sublink Interactive High Quality Mini Icon Sets

Sublink Interactive High Quality Mini Icon Sets

This new set from Sublink Interactive is as sweet as it can get. If you’re trying to find an icon with a clean and adorable design this is where you should have a look. These small icons have clean and simple shapes an the set is made up of 120 icons, perfect for use in websites or apps.

Fugue Icons by P.Yusukekamiyamane

p.yusukekamiyamane Free stock icons High Quality Mini Icon Sets

p.yusukekamiyamane Free stock icons High Quality Mini Icon Sets

This set from p.yusukekamiyamane contains so many mini icons it would be hard not to find the one you’re looking for. It has a huge number of 3,570 icons in PNG format (16×16 pixels) + 352 bonus icons.

Icons by app-bits.com

APP-BITS 1100+ stylish, modern mono line icons

APP-BITS 1100+ stylish, modern mono line icons

This is a set of really nice mini icons from app-bits. They are free to use as long as you don’t alter or resell them. Icons come in 26px and Retina 52px sized PNGs and you can use them for commercial or personal projects.

Icons by Picol.org

 High Quality Mini Icon Sets

 High Quality Mini Icon Sets

Picol.org also has a nice library of mini icons but besides this set, you’ll find out they can help you create the icon of your dreams.

eCommerce Icons

FREE!-E-Commerce-Icons-pack-by-Chanut-is-Industries-on-Behance

FREE!-E-Commerce-Icons-pack-by-Chanut-is-Industries-on-Behance

This is a bundle of mini icons that can be used in web design, mobile applications, and other projects. They are available in AI, EPS, PDF, PNG file formats.

Icons by Androidicons.com

 High Quality Mini Icon Sets

 High Quality Mini Icon Sets

These icons come in many sizes and colors and they were handcrafted just for you. This set contains so many mini icons it would be hard not to find the one you’re looking for. It is packed with 250 small free icons in 5 sizes and 14 colors as well as its own icon font.

Icons by Defaulticon.com

www.defaulticon.com High Quality Mini Icon Sets

www.defaulticon.com High Quality Mini Icon Sets

On defaulticon.com it is impossible not to find the mini icon you’re looking for. This site is a repository of minimal, black icons which can be used for UI design. There are a total of 653 mini icons available, ranging from arrows to various shapes, small printer icons, small camera icons, mini male / female icons, ice cream icons, mini medical icons such as first aid and others, mini file icons (add, upload, resize, etc.), small file icons and so much more.

Web Icon Set by SEM Labs

Free Web Design Icon Set

Free Web Design Icon Set

This is a really cool set of  small icons from SEM Labs. You can use them for prints and web design as you please. There are 310 icons here, all 16 by 16 pixels, in PNG format.

Splashy Icons by Splashyfish

Splashy Icons - free icons for prototyping

Splashy Icons - free icons for prototyping

Splashy Icons will definitely have the icon you’re looking for. This set contains at least 483 tiny icons that come in all shapes and colors, including mini map marker icons, small folder icons, mini arrows, settings icons, add to favorites icons and so much more.

Icons by iconsweets.com

 High Quality Mini Icon Sets

 High Quality Mini Icon Sets

Designed with care, these free icons are a must-have for your next web project. Take a look at these 60 free mini icons you can download and use in your own projects. Some of them include mini social buttons icons, tiny email icons, small arrows and more.

Icons by gentleface.com

Free toolbar icons for interface or gui designer

Free toolbar icons for interface or gui designer

This set is another monochrome example for icons. Even though they’re black and white they can be easily customized. The entire set contains 304 icons in 32-bit PNG format. They are all optimized for 16×16 pixel size and available in 16×16, 32×32 and 48×48 pixel sizes. It includes .ico files and vector icons in EPS and flash SWF formats. The set also includes transparent PNG versions. This mini icons set contains many navigation arrows, heart icons, close button icons, mini smiley face icons and more.

Adding mini icons to your website designs can really make a big difference for some websites. Finding the right small icon pack may be difficult sometimes, but we hope we’ve made this task easier for you.

  Image Inq   Aug 28, 2017   Design   0 Comment Read More

Top 10 jQuery Lightbox Plugins & Scripts

Everyone loves lightbox JavaScript effects and since the original Lightbox script, there have been countless plugins and clones generated for all the popular JavaScript libraries. This collection rounds up the top ten jQuery lightbox plugins and scripts in particular, so remember to keep it bookmarked for your next design project!

Lightbox is a script used to overlay images on the current page and works on all modern browsers. This popular JavaScript library displays media content in a pop-up, by filling the screen and dimming out the rest of the web page.

These jQuery lightbox scripts and plugins will enable your Lightboxes to become easily viewable on all devices screen sizes and some even make it easy for your media content to be shared on social sharing networks. Plus, most of them come with fully customizable skins and you can include your own custom JavaScript and CSS for further customization.

You should also check out jQuery and JavaScript resources to get some more help with JavaScript and jQuery. 

Fancybox

fancyBox - Fancy jQuery Lightbox Plugin

fancyBox - Fancy jQuery Lightbox Plugin

fancyBox is a jQuery lightbox script that offers a way to add zooming functionality for images, HTML content and multi-media on your web pages. This was built on the top of the popular lightbox JavaScript framework.

nyroModal

Nyromodal jQuery Lightbox Plugin

nyroModal v2 works with filters that let you define totally new possibilities for the plugin. It is packed with useful features such as Ajax Call, images gallery with arrows for navigating, form in iframe (or with targeting content and with file upload), Dom Element, manual call, iframe, stacked modals, and more.

piroBox

Pirobox jQuery Lightbox plugin

Pirobox jQuery Lightbox plugin

This is the extended version of the original PiroBox script. Use it to create awesome lightbox effects for your image galleries.

prettyPhoto

PrettyPhoto jQuery Lightbox Script

prettyPhoto is a jQuery lightbox that also supports videos, flash, YouTube, iframes, and Ajax. It is very easy to setup and flexible for customization. The script is compatible with every major browser. It also comes with useful APIs.

Lightbox is a script used to overlay images on the current page. If you want to change any of the default options, you can easily do that. Lightbox2 has been tested successfully in the popular browsers. Check it out and start using it in your web projects.

Featherlight

Featherlight jQuery Lightbox Plugin

Featherlight jQuery Lightbox Plugin

Featherlight is a very lightweight plugin with only 400 lines of JavaScript, 100 of CSS, and less than 6kB combined. This plugin is smart, responsive, supports images, ajax and iframes. It is also easy to customize, due to the low specific CSS selectors and little code.

jquery-lightbox

jQuery Lightbox Plugin for Websites

Use this jQuery plugin to display an image on the same page simply and elegantly. If you want to customize this plugin, all you have to do is set the show_linkback option to false.

Colorbox – a jQuery lightbox

Colorbox - a jQuery lightbox script

Colorbox - a jQuery lightbox script

This is a lightweight customizable lightbox plugin for jQuery, compatible with jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. It supports photos, grouping, slideshow, ajax, inline, and iframed content and its appearance is controlled through CSS.

Swipebox

Swipebox jQuery Lightbox Plugin

Swipebox is a touchable jQuery light box plugin for desktop, mobile, and tablet. It supports Swipe gestures for mobile. Its main features are swipe gestures for mobile, keyboard navigation for desktop, CSS transitions with jQuery fallback, retina support for UI icons, and easy CSS customization.

iLightbox

iLightBox jQuery Lightbox Scripts

iLightBox adds a responsive Lightbox capability to your HTML and WordPress-powered website. It automatically resizes on all screen resolutions and comes with a wide range of media with gorgeous skins and a user-friendly API. IE7+ (including IE10), Firefox, Safari, Opera, Chrome, IOS4+, and Android are supported. It also works for swipe events and Youtube and Vimeo integration for HTML5 video. Another great thing about this plugin is that each window has social sharing icons with Facebook, Twitter, Google+, Delicious, Digg and reddit.

  Image Inq   Aug 26, 2017   Design   0 Comment Read More

30+ Horizontally Scrolling Websites Showcase

Love them or hate them, horizontally scrolling websites are scattered around the net, and there are some fantastic examples. Unlike the traditional layout of a website that scrolls up and down, horizontal websites flip things around and scroll from left to right. Sometimes they’re enhanced with Javascript to offer an even richer user experience, such as auto-scrolling effects. Check out this collection of 30 inspiring examples, and follow on to a hand full of brilliant tutorials that give an insight into the theory and practice of creating a horizontal site of your own.

The usability of such sites is often questioned, but I personally think they’re great, although one important factor I’d advise considering is to tap into the user’s mouse scroll wheel to enable it to scroll the website horizontally. This is a technique employed by a bunch of the sites in this showcase, and as you’ll find when browsing, it makes them much more usable.

Weblogement van het Elfletterig genootschap horizontally scrolling websites

Elfletterig is a horizontal website that uses navigation keys to scroll from left to right. It has a lot of content and images displayed in a unique layout.

Horizontal scrolling humor by Handmade Interactive

This is Jason Love’s creative horizontal scrolling website. He presents a story with 2 ends with a lot of illustrations along the way

Magpie Studio horizontally scrolling websites

Magpie-studio has an interesting way of presenting content to their readers. They have a one-page website made of horizontal images that slide as you click them.

Zand Studio horizontally scrolling websites

Zand uses animation and a horizontal scrolling layout for their website. They’re a UX team who love design and are focused on finding the best solutions for their clients.

Choice horizontally scrolling websites

Appd is a Russian horizontal scrolling website dedicated to children health care. This is also an interactive website that combines illustrations with good design.

Norgram Digital Design Studio horizontally scrolling websites

Norgam focuses on forming design language for the digital era that we’re in. They have a horizontal scrolling website that showcases all their projects.

Archidirectors horizontally scrolling websites

This horizontal website is dedicated to the work of the contemporary illustrator, Frederico Babina. You can scroll through a gallery of impressive artwork while listening to a carefully picked soundtrack.

Benvigut Bisgràfic Barcelona horizontally scrolling websites

This website has a minimalist yet unique design. They focus on presenting key information about themselves and their work.

Maison Poulé horizontally scrolling websites

Maison-poule is an interactive website that invites their readers on a gastronomic adventure with their online food truck.

Build in Amsterdamn horizontally scrolling websites

This horizontal website works as a design and development agency’s portfolio and it stands out with a creative and unique design.

Identity Print

This is yet another good example of a horizontal website that focuses on print related content and uses the navigation keys to scroll left and right.

STUDIO NEWWORK

This website also uses navigation keys to scroll through their content. They have a nice gallery of projects that can serve as good inspiration.

See the horizontally scrolling website

This website gives you the impression that you’re reading a book or a flier. They’re specialized in bottles which they photograph at a price that makes everyone happy of their investment.

Magic Realism scrolling website

Magic Realism also uses a horizontal website on which they post content in a good looking minimalist way, similar to an image gallery.

the boxdoodle project scrolling website

Neu-e is a horizontal website that encourages their readers to make something out of an ordinary box. The results are very nice and each object is posted on their page.

zupadupa - web design & web development scrolling website

Zupadupa is a web agency from Cluj, Romania and they have a horizontal scrolling website that uses a minimalist design.

Hipstamatic - Camera scrolling website

Hipstamatic uses both vertical and horizontal navigation on their website. They have a creative way of posting content especially through animations, pictures and typography.

The Horizontal Way scrolling website

The horizontal way, as their name implies, is a project that aims to showcase a list of horizontal websites like their own one.

Movement of Data

This is another example of an interactive horizontal website that focuses on sharing a story about the movement of data and how it became what it is today.

Guillaume JUVENET - Portfolio

Guillaume Juvenet’s personal website uses doodles on a horizontal layout to create a beautiful and responsive page for himself.

See the horizontally scrolling website

This website has a horizontal layout that uses navigation key to scroll through a gallery of photos taken by Alex Flueras.

Anders Drage scrolling website

With a minimalist design, Anders Drage’s horizontal website presents an impressive portfolio of his latest projects.

WWF scrolling website

This is yet another interactive horizontal website that focuses on raising awareness about what we eat, how we produce it and how we could protect our planet and our most iconic species.

See the horizontally scrolling website

LoveBento’s aim is to showcase through their horizontally scrolling website some of most loved stuff in around the world, such as music albums.

25 Years of The Internet - Onyx scrolling website

25 years of internet tells the story of internet starting with the first proposal in 1989 to nowadays using a horizontal layout and an interactive way of presenting content.

Me You and the Zoo - Chester Zoo History scrolling website

Chester Zoological Society shares their story, starting from 1930 to nowadays through a horizontal scrolling layout on their page.

Lucuma

Lucuma uses a more minimalist design that only has a horizontal scrolling galleries.

hasrimy.com scrolling website

Hasrimy specialize in web design and they don’t only think outside the box but also outside of this world. They use a horizontal layout for their website on which you can scroll to find out more about themselves.

Archi Graphi Communication créative scrolling website

This website focuses on presenting architecture projects from France in a horizontal scrolling website. The images are showcased on a grid layout, very frequently used in portfolios.

See the horizontally scrolling website

Last but not least, Dean Oakley’s website is yet another example of using horizontal scrolling in a user-friendly manner.

BONUS: How to Create Your Own Horizontally Scrolling Website

Fancy building a horizontal site of your own? Check out these handy articles and tutorials. Each one offers expert advice on the coding techniques used, and the best practices when considering going the horizontal way.

Smooth horizontal scrolling - YouTube

This first example might come in really handy if you’re considering making a horizontal page. From this video, you’ll learn how to make a smooth horizontal scrolling page using Bootstrap and some jQuery magic.

Vertical and Horizontal Scrolling with fullPage.js

From this article, you’ll learn a lot of new techniques about making a vertical and horizontal scrolling website using fullPage.js.

The next example is another video tutorial, which will help you learn how to make a webflow dynamic horizontal scrolling portfolio.

How To Create a Horizontal Scrolling Menu

This is yet another helpful tutorial from w3schools which will teach how to code and create a horizontal scrollable menu with CSS.

  Image Inq   Aug 25, 2017   Design   0 Comment Read More

Showcase of Websites with Illustrated Backgrounds

One of my favorite styles of web design is the combination of hand drawn elements with digital interfaces. This showcase rounds up a collection of web designs with illustrated backgrounds. Check them out and see what makes them special, practical and eye-catching for the visitors. These websites all use illustrated backgrounds and different styles you’ll be inspired by, from using cartoonish illustrations, to detailed, modern vector art.

Sparetime

Sparetime Illustrated Backgrounds

Check out this interactive website that will calculate how much your spare time is worth through a series of questions and illustrations. The font and buttons are highly animated and the background is made of a repeating pattern created using a vector drawing.

Deborah Cavenaugh

Deborah Cavenaugh Illustrated Backgrounds

This is website is Deborah Cavenaugh’s gallery and blog and uses one of her paintings as background. The painting is very high quality and because it is so colorful and complex, the rest of the layout is quite simple and minimalist.

Keepearthquakesweird

Keep Portland Weird Illustrated Backgrounds

This site focuses on raising awareness on calamities through an interactive website that uses illustrations both as background but also as part of a game that readers can play on this website.

Ilovethisfame

I Love This Fame Illustrated Backgrounds

Ilovethisfame is another example of using illustrations on your website. In this case, you can play an online basketball game and become famous. It has a cartoonish style and it’s very kid-friendly!

Mygrandmotherslingo

My Grandmother’s Lingo Illustrated Backgrounds

My Grandmother’s lingo is a website that uses illustrations to teach readers one of oldest languages in the world. This is a fun website with an interactive design. It has a balck and white color palette and lots of illustrations and animations worth checking out.

Fleximize

Experience Fleximize Illustrated Backgrounds

Fleximize is a site entirely made of illustrations. Not only do they have a pretty interesting interactive menu that but you can also try out their game. Get inspired by this unique, interactive, gaming website design.

Smallman Records

View the website Illustrated Backgrounds

This website uses illustrations as its background giving Smallman Records a really good look. It doesn’t have such a modern design, like the rest of the examples in this list, but the way the header was designed, reserved it a position in this roundup

Creativecruise

Creative Cruise Illustrated Backgrounds

Creativecruise is another example of using illustrations as your background and in an interactive way. This website has a very colorful and fun design and emanates pure creativity.

Faber-Castell

 Faber-Castell Illustrated Backgrounds

Faber-Castell is a website that uses illustrations in a creative way to reach its readers. This website has a friendly vibe and even though it takes a while to load, it’s worth it! The navigation s very interesting, as the website guides you through the most important parts of its design.

Daydream designs

Daydream Designs Illustrated Backgrounds

Daydream designs are a full-service creative agency that uses illustrations on their website’s background. They share their friendly attitude and passion for the job through their website.

Malika Favre

Malika Favre Illustrated websites

This website belongs to and artist that showcases her illustrations in a gallery that covers the website’s background. The grid gallery she used also has some cool transitions and hover effects worth seeing.

Books at Work

Main _ Books@Work Illustrated websites

Books at Work focuses on bringing literature seminars to workplaces and communities to build confidence, creativity and so much more.

Denise Chandler

Denise Chandler Illustrated websites

Denis Chandler’s passion is creating beautiful and functional websites. Her website best shows her love for web design both through illustrations and the way of presenting information to readers.

Mike Poss

 Illustrated websites

Mike Poss’s website is dedicated to music. This website uses a layout with a series of illustrations. It has a dark, slightly grungy look, but the header design and the way the sidebar is illustrated, made it earn its position on this list.

Majorsavage

 MajorSavage Illustrated websites

This website has a blue animated background and you can also find some impressive illustrations if you keep scrolling. Also, check out the cool text animations and the creative image gallery at the middle of the homepage.

Pixel Lab

Pixel Lab Illustrated websites

Pixel Lab focuses on creating simple and intuitive experiences for the web. The website uses a horizontal blue band to present an illustration that best describes them.

Pure.dating

PURE The Hookup App Illustrated websites

Pure Dating uses a gallery of horizontal content sections that contain monochrome animated illustrations to connect to their readers. The vector illustrations also have subtle animations for a plus of dynamism.

Make Your Money Matter

Make Your Money Matter Illustrated websites

Make Your Money Matter is another interactive website that uses illustrations on its background in order to raise awareness about what happens to your money.

Slaveryfootprint

Slavery Footprint Illustrated websites

This website functions as an online survey that raises awareness on slavery through some interactive illustrations. The CTAs have unique designs and also the navigation system is worth checking out.

Reverend Danger

Reverend Danger Illustrated websites

The Reverend Danger is a digital agency’s interactive website. They use a series of illustrations to connect to their readers. Go ahead and take a look! You’ll love it!

Daniel Diggle

Daniel James Diggle Illustrated websites

This website belongs to a designer, illustrator and animator called Daniel James Diggle and presents a gallery of his projects. The design combines interesting illustrations to create patterns and backgrounds.

Interactive Ear

Interactive Ear tool by Amplifon Illustrated websites

This website is a guide to human hearing that will teach you through a series of illustrations everything you need to know about the ear.

In Space We Trust

In Space We Trust Illustrated websites

In Space We Trust is an interactive website that has a main character who goes in time and presents everything related to space and its history

Caramel Budgie

Caramel Budgie Design Illustrated websites

Caramel Budgie focuses on creating elegant web designs for their clients. Their site is as elegant as it could be and presents a series of interesting illustrations.

Web Designer Wall

 Illustrated websites

The Web Designer Wall is a web designer’s site and it uses an elegant fading illustration on the background to point out his newest articles.

N.Design Studio

View the website Illustrated

This website uses a huge illustration as its background to present the blog and portfolio of Nick La. It may look cluttered but it isn’t The rest of the layout is quite simple.

Doudoublues

Doudou blues Illustrated websites

This website has a sensitive design that uses illustrations in an interactive way to present a story and its characters. It has a clean design, so the illustrations are the main point of attraction.

McWhopper

McWhopper Illustrated websites

This website presents a unique day in history when two burgers made peace and became one called McWhopper. This is a campaign website for McDonald’s.

Intromusique

Intro Musique émergente Illustrated websites

This website aims to present future music concerts or shows in an interactive way through a series of illustrations. On this website, you can also buy your next ticket to a concert.

Tati-express

l'univers de Jacques Tati Illustrated websites

This website focuses on teaching you everything there is to know about French filmmakers through an interactive illustrated website.

  Image Inq   Aug 24, 2017   Design   0 Comment Read More

Guide on How to Design an eCommerce Website and Online Store

Websites are not simply a trend which should be followed. They are the first interrelation between vendors and customers; the visual story of one company; and the basic source of information. Every vendor who wants to be successful needs a well-designed website to assist its efforts; and to liberate users from all confusion or concerns. Attractive and functional websites are the shortcut to successful communication. The outstanding ones among them can certainly teach us how to become unique, interesting, and how to provide a rich visual experience for our online shoppers and users.

People enjoy eye-pleasant sceneries. It is a rule which is equally applicable in both the real world and the virtual one.

Creating an eCommerce website - example 1

They may equally love the way you present the new collection in your clothes store; or the new service on your mobile app. If the design is attractive and nicely wrapped, it is very likely to become popular and to bring you profit.

Deciding on how to design an online shop is essential for generating sales. A good choice is likely to increase a product’s perceived value and to inspire trust among customers. Therefore, consider designing an online shop as your new challenge!

Designing an eCommerce website

The first step towards grabbing attention and generating sales is the creation of a beautiful, but also functional and user-friendly eCommerce website – whether you are using one of the popular eCommerce platforms or creating a completely custom solution.

How to make eCommerce websites

However, ecommerce is not a field of unlimited possibilities. In fact, it is a highly competitive area since it takes almost no time (or effort) for a customer to change the vendor. You have to give customers what they expect. Otherwise, they will have no second thought on whether to buy products from someone else.

In online sales, price and priority don’t really matter. What matters is whether navigation is simple and unlikely to confuse users.

You can provide the cheapest/best product on the market – if users are not able to locate it, you’ve already failed to generate sales.

How to create online stores

Providing usability means you’re facilitating the purchase. It will take nothing more than few clicks for users to buy your product.

We gathered a list of tips and tricks which can explain to you how to design an eCommerce website which will be usable enough to provide significant conversion rates.

Ecommerce is the future of business. It started like a suspicious trade concept, but it became an inclusive part of our online presence, just like checking our emails.

Obviously, not everyone likes doing shopping online, but most people find it convenient and more affordable. Very soon, there will be no person without a single online purchase.

An overview on eCommerce design

It sounds challenging, but in fact, ecommerce design is not so different than any other web design you could think of.

Fitbit - example of proper eCommerce design

However, there are certain principles which ought to be considered and determined before ‘jumping’ on the design process.

Ecommerce websites should be approached with special care, since they require sensitive information from users (their credit card data and the personal information accompanying it). Designers are therefore challenged to produce a beautiful site which is worth of their customers’ trust.

Design is somehow easier for already established brands, whose products/services are known to the audience. At the same time, there is the burden of reconfirming the reputation through expected design constructs.

However, it is up to the designer to decide whether he’s going to stick to that perception, or go for a completely new solution (new slogans, logos, images, etc). The decision will most probably depend on the budget.

Second example of good eCommerce design

Another consideration which is essentially important is the length of the checkout procedure. You need to have as little pages between the homepage and the checkout as possible, and you should highlight this advantage from the very beginning.

Trying to design the perfect ecommerce website? Make sure you have the answers of the following questions:

1) Is the type of products I offer known to the visitors in the first five seconds?

2) Would I trust this website enough to insert credit card information?

3) Is my site purpose-friendly? Is 30 seconds enough for customers to find the information they need?

4) Do I provide enough suggestions/options for random visitors?

5) Is the content original and attractive for the visitors?

A single negative answer to these questions is enough to indicate a serious design problem which could chase shoppers away and affect the conversion rates. Therefore, deal with these questions in the best possible manner and ensure that users will return to your website.

The three essential elements of every online store

1. Trust: eCommerce websites cannot be successful, unless they gain users’ confidence. The issue is so sensitive that it takes a single distraction for users to move away and to shop on another website. That is is why it is of utmost importance that every single elements of your eCommerce store conveys trust to the user.

Three essential elements of every online store

2. Simplicity and usability: simplicity doesn’t refer so much to design, as it does to technical operations. The purchase should be intuitive and there should be absolutely no confusion from the customer’s side. Once again, any sort of distraction here can result in abandoned shopping cart and lost sales.

3. Transparency: remember that online communication is a two-way road. You need to be there for your customers and to convince them they can contact you at any moment. Some of the most popular ways to do that include online chat, phone number clearly visible in the top right corner and a visible “contact us” button. You also need to provide information about your store / business so that your online shoppers know that you are a real business and not some sort of scam.

Provide your data in a clear and concise way and highlight shipping and returning options. If nothing else, such behavior can bring recommendations and positive feedback, and it can increase the popularity of your website.

Suggestions and recommended practices for eCommerce websites

As you probably concluded, designing an eCommerce site can turn into the most complicated part of your marketing agenda.

However, there are piles of excellent practices which apply to each eCommerce site and almost every product available for online purchasing. Let’s check few of them:

Leave no space for second thoughts on providing personal information

Walk a bit in your customer’s shoes.

Would you be confident to provide confidential information on a relatively new, unfamiliar and questionable website, and a clerk on the other side of the desk who offers only words in exchange for your cash? Would you register and pay?

Indeed, it is a shady procedure. It is absolutely natural for a visitor to feel scared and to look even for the tiniest inconsistencies to justify his or her suspicion.

It is also normal for them to browse contact information and to spend time checking the images to see whether they are available on some other sites.

We recommend designers to be as detailed and clear with introduction as they possibly can, so that users will have no problem jumping straight on the purchase.

Go big with images

Yes, you need piles of large, great quality images to present to your potential customers.

Have in mind they have no chance to see the product they’re buying, and photos are a great strategy for bringing the product closer to them.

Use of big images in eCommerce websites

As for all other things, people can hardly resist beautiful and attractive sceneries, so make sure you provide the best possible photos.

Be detailed. Photograph the product from every angle and make sure the photos are zoom-friendly. Create an entire gallery and make it accessible from every page of the purchase process.

Save your users’ time

As you know from personal experience, almost 90% of users browse with no purpose. What really matters to you as a producer are those 10% that ‘land’ on your homepage with a clear idea of what they want.

Example of user friendly eCommerce website

The least you can do is to facilitate navigation and to help them locate their information in less than 30 seconds.

Also your website’s header should be flawless and answer the questions that the visitors might have when they arrive on your site: What is this site selling? Who are they? Why should I trust them? Of course, there may be more or other questions, depending on your audience.

This obligation should never be compromised for uniqueness and beautiful appearances. Even the coolest, most sophisticated site will be abandoned if it failed to deliver the necessary information.

Highlight related products

Proper eCommerce website creation

Unless you’re specializing in one product/service, link the product pages with related ones (shoes with handbags; earrings with necklaces, etc).

Beware that the relationship needs to seem natural and default, rather than representing an ‘out-of the-blue’ link on the bottom of the page.

Uniqueness comes with relevance

On average, the bounce rate of visitors ‘landing’ on recently introduced websites is no more than 40%.

Example of unique eCommerce website

Translated in a designer’s terms, 40% of people are likely to leave your site at the same moment they check it. The crucial question is: How to keep them on the website?

Be unique when describing your products. Descriptions seem cliché, but it doesn’t mean they have lost their power.

Instead of applying standardized manufacturer’s descriptions, be creative and write original ones which solidify the relation with your brand. This tactic will certainly help you stand out from the crowd, and it will enable users to enjoy the purchase.

Last, but not least – checkout

The simplicity rule also applies to the checkout. In the perfect case, checkout should take no more than a single page, filled with reviews, cart and billing information, or shipping details. It is also important to include an additional confirmation button, so that there will be no feeling that the purchase happened too fast.

Large checkout funnels are one of the most common mistakes of ecommerce websites. They usually consist of too many pages, redirecting users to billing, shipping, or cart information before placing their final orders. Such procedures scare users.

They lead them from one complication to the other, and they are therefore likely to quit their purchase.

As short as you intend to make the checkout process, don’t forget to include a review section, where the customer can check their order before placing it. Practice shows that the lack of reviewing options is very likely to de-motivate users.

Test your website first

Designing eCommerce websites - best practices

Here are few easy and relevant tests you could use before launching an ecommerce website:

1) Test the ‘Add to cart’ button, especially in terms of size, color or placement;

2) Test each of the product categories which appear while a user is navigating the website, and try to add a new one and see how it looks;

3) Choose a bestseller and promote it on the homepage;

4) Introduce a special: offer subscription and invite people to try it;

5) Try using coupons and estimate their effect on your conversion rates.

Call to action

Calls to action are vital to the success of any ecommerce website. If they are not efficient, the toll will most likely be taken from sales and conversions.

Proper call to action in eCommerce

Most generally, ecommerce web design employs two basic types of action calls: specific ones for each product (when the site is selling more than one product); or a unified action call for all products, available on each browse/result page.

Both types look similar and involve terminology such as ‘Add to cart’. Websites which opt for originality choose specific wording, such as ‘buy now’; ‘make an order’, etc.

Final thoughts

The most important and memorable interaction with users is their first impression of your website. It consumes around two seconds of their time; and it lasts forever.

Example of successful eCommerce store

Yes, it’s not fair. As an eCommerce web designer, you have nothing more than two seconds to grab attention and to increase conversions. Those two seconds are the only time at your disposal to show something beautiful, functional, and affordable.

This challenging task leaves no space for errors to introduce your online store and make a great first impression.

Again – it is cruel, but the success of your design and users’ shopping decisions rely almost completely on visuals and appearance.

In order to obtain this ‘wow’ effect, you need to familiarize with the essential elements of eCommerce design and to come up with original ideas at the same time. Overlooking basic rules and principles will not lead to satisfying results, but may instead disappoint customers rushing to find a decent substitute.

  Image Inq   Aug 23, 2017   Design   0 Comment Read More

Top 5 Web Design Debates That Cause the Most Riots

The world that surrounds the topic of Web Design is home to many debates and opinions on best practices or generally how things should and shouldn’t be done. While many of these opinions are accepted and taken on board by everyone, there are some that end up being split into two opposing camps. One camp will provide an expert opinion for one side of the argument, while the other contradicts with an equally valid argument. Let’s take a look at the five most popular debates; the ones that often end up developing into digital riots with opinions flying like arrows across the vast no-man’s land known as the comments section.

web design debates

Camp one says:

Links to external sites should always open in new windows. There’s nothing more annoying than browsing a website, clicking a link and being whisked off to a totally new site, losing the page you wanted to revisit. Internal links should maintain the browser session in the current page, but anything that leaves the site should open in a new tab or window.

Camp two says:

As web designers we shouldn’t take the control away from the user. Whether a link needs opening in a new window is their choice. There’s nothing more annoying than a website taking control of my browser and opening a new tab or window for a link without my permission; if I wanted to open it in a new window, I’d do so! The problem only gets worse with inexperienced computer users, new windows break their trusty ‘back button’.

The mediator says:

In general, opening a new window should be avoided, but is recommended for some situations such as opening a help link in a shopping cart or opening a non-html document such as a PDF. To further aid the usability of your site, use a small icon to identify links that do open in a new window, or provide an options panel that’s configured with Javascript.

Further reading:

web design debates

Camp one says:

‘Click here’ has been proven to provide a higher click through ratio than descriptive anchor text. ‘Click here’ is a call to action people associate with the web, so it should be used on links to achieve the highest click through results.

Camp two says:

Using the words ‘Click here’ hinders the usability of a site. Instead of being able to see where the link goes and what it does, the user has to read the surrounding text to gain an idea of what’s going to happen. Quality guidelines suggest that anchor text should explain what a link offers.

The mediator says:

A descriptive link should always be used to help increase your site’s usability, accessibility, and optimization for search engines. It is interesting to hear that ‘Click here’ performs better on banner ads, but I’d imagine that bounce rates would also be in favor of descriptive links.

Further reading:

web design debates

Camp one says:

If your aim is to make a word bold, use the <b> tag. It’s not correct to use the <strong> tag if the word doesn’t have any extra value or importance. Screen readers pronounce the <b> and <i> tags differently, and they are also included in the HTML5 specification.

Camp two says:

Bold and italic tags are often used to make text appear bold or italic, so semantically anything that is being used for visual aesthetics should be reserved for the CSS stylesheet, and not included in the HTML markup. If an element has of specific importance or requires emphasis, the <strong> or <em> tags helps identify it with meaning.

The mediator says:

<b> and <i> tags shouldn’t be used to make text appear bold and italic for the sake of it being bold or italic, this visual styling should be left to the CSS. If a word or passage of text is of high importance, either the <strong> or <em> element would be the best use. The <b> and <i> can and should be used when no other tags fit the situation (eg: <cite>, <var>, <dfn>). An example might be text in another language.

Further reading:

web design debates

Camp one says:

Logos shouldn’t be wrapped in a header one, the <h1> element should include a description or title of that particular web page. This is the best approach for SEO, otherwise, the primary header for every page would be the same – the company name.

Camp two says:

The main identifier of what website you’re on is the logo. With the <h1> being the largest level of headers, it’s natural to place the logo and site title inside a <h1>. This way, when the page is viewed without CSS, it still holds the same visual structure and hierarchy.

The mediator says:

The definitive use for a <h1> is to describe the subsequent content. Therefore if a particular website has a title or heading that describes the content and appears in the design, this should be placed in the <h1>, otherwise the next highest structural and descriptive item would be the logo.

web design debates

Camp one says:

Internet Explorer / Edge make up just 4% of the market share, but it’s still crucial that a website is made to work in older IE versions, as well as newer browsers. There lots of major corporations who have large networks running older IE versions, as well as lots of computer users who don’t know how to upgrade.

Camp two says:

Outdated Internet Explorer is considerably out of date and doesn’t support the technologies that are present in web design today. It poses a risk to the user’s online security and is the never ending nightmare for all designers. Large companies including YouTube are phasing out support, so should you! With just 4% universal usage, IE is not something you should worry about.

The mediator says:

Older IE version usage is definitely on the decline, and its death will be quicker with large websites dropping support. Whether you support Internet Explorer depends on your own user statistics. Alternatively, consider offering more basic page styling to older IE version users rather than fixing complicated layout and CSS problems.

Further reading:
  Image Inq   Aug 22, 2017   Design   0 Comment Read More

A Showcase of Beautiful Typography in Web Design

We all know how important typography is in web design and design in general. Choosing the right typeface(s) for web, colors and, if necessary, applying the right type treatment can help tremendously in conveying your message to your audience.

Most of the websites showcased today use large typography mostly in their headers, but also in other places such as subheadings and other elements to draw attention to areas of importance. Let’s take a look at some of the best examples of typography in web design.

 Kidd81

kidd81 home typography in web design

Kidd81 is a creative designer’s personal web site. This is a nice example of using both typography and a vast color palette of striking colors in your project. It has a childish design, but it matches the designer’s style perfectly.

Get Finch

Finch - Designer typography in web design

This website is an excellent example of using the right typography and colors to highlight important facts and present information to its readers. The important groups of words are emphasized using different shades of blue, to catch the readers’ attention.

Thisisjamhot

Creative Design & Digital Agency typography in web design

This website uses typography to establish a link between itself and its readers through a warm ‘hello’. Furthermore, this site uses horizontal bands which build jamhot’s portfolio.

PolarGold

polargold.de typography in web design

Polargold is a website that presents a digital agency for contemporary marketing through typography, color, and a minimalist design.

Demotive

Demotive. Toiling since 1975 typography in web design

Demotive is a single page website that displays a compact and lightweight design through both bolded and regular fonts. It’s a great example on how to combine bold fonts with thin ones.

Fernandosilanes

Fernando Silanes typography in web design

Fernando Silanes’ website also has a good choice of typefaces, color and design to information about himself and his line of work. He uses both large fonts and normal-sized ones in this design.

Adlucent

Premier Retail Paid Search Agency typography in web design

This website uses a large typography in their header to present not just their motto but also other important information as to what they do, how they do it, their resources and team.

Digital Mash

digitalmash.com typography web design

This website uses typography and color as a way to ease readers’ search through the gallery as each word represent a showcased project. It may be difficult to read the text with all those colors but the overall design definitely catches you attention.

Gummisig

Gummisig typography web design

This website belongs to a designer that designs, codes and loves what he does. It is also another good example of large typography used in web design. He uses huge fonts on the homepage and in the menu as well.

Electric Pulp

Electric Pulp - Responsive Web Design & Development

Electric Pulp not only tackles projects of all shapes and size but they have also put a lot of effort into mixing good design with good typography.

Kyle Steed

Kyle Steed typography web design

Kyle Steed’s website presents his passion through images, texts, colors, and fonts. Even the site’s logo is made of a playful typography.

Josh Hemsley

Josh Hemsley typography web design

Josh Hemsley’s website is another example of choosing the right typefaces and colors to present information to readers. On his site, you’ll find a list of projects, details about him and his interests.

Bradfrost

Brad Frost Web Design, Speaking, Consulting, Music, and Art

Bradfrost.com is yet another example of using typography in the site’s header. This one uses a bold white font over a colorful horizontal band before to express an invitation to finding out more about what he does.

Hellomonday

Hello Monday typography web design

HelloMonday website is a Digital Creative Agency’s mission to turn Mondays into the best day of the week. This site uses an animated design to showcase different projects the agency has had over the years.

Jhische

Jessica Hische Design & Illustration

This example is a website that presents the work of Jessica Hische, who’s love is typography. With a great interest for letters, Jessica’s website is a good example of combining web design with typography.

Jlern

JLern Design Creative Development for the Web

In my opinion, this is another way of using typography in your project. This website loads as a redacted file, letting you discover each category.

Mulletized

Mulletized Design Photo Chaos

Mulletized uses animations, static images and typography to create a sensitive web design to connect its readers with the image gallery.

DIBI Conference

DIBI Newcastle 2017 typography web design

DIBI conference is a website that gives you the opportunity to share your story in 30 minutes. Furthermore, this website is an excellent example of creating a playful design through colors and typography.

Natl.tv

National Television 2004-2013 typography web design

This website uses a bold white typography on a black background to mark the end of a broadcast day. It’s a simple an minimal aproach but it has been proven to be very effective.

Nosotroshq

Hello NOSOTROS typography web design

Nosotros’s website focuses on laying out information to its readers through a regular dark gray font on a light gray background. They are an experienced team that makes great websites and unforgettable brands.

Sparkcapital

Home Spark Capital typography web design

Sparkcapital focuses on investing in startups led by creative thinkers and their website surely expresses their aspiration towards creativity. They use large typography on a horizontal background that showcases images of their work.

Sourhaze EP

Sourhaze typography web design

This website is yet another example of choosing the right typeface, colors and web design to lay out information to your readers.

Srburns.es

SrBurns typography web design

Srburns uses an interactive web design using a creative typography to connect with its readers. It has a slightly vintage touch, due to the styling of the typefaces used.

Stripgids

Strip Turnhout typography web design

Stripgids uses typography to present information about a biannual magazine that showcases interviews, essays, news releases, columns, reviews and pre-publications, and with a very broad focus.

Supernormal

Supernormal typography web design

Supernormal uses typography and web design to present Dominic’s portfolio of friendly and functional interface design. He uses bot serfis and sans serfis combined.

Huge Inc.

Huge Digital Agency typography web design

Huge Inc.’s website uses typography in a creative and interactive way. Keep scrolling to find out more about what they do and in how many ways the letter ‘H’ can be creatively changed.

Switchmw

switch mediaworks typography web design

Swtchmw was founded by a team of design addicts whose aim is innovative design quality. Their website sure expresses their aspirations through the use of animations, changing backgrounds, fonts and colors.

Thingsthatarebrown

Things That Are Brown Matt Brown typography web design

This website is another good example of using typefaces to convey your message to your audience. It uses the same font in different ways to present information to its readers.

For A Beautiful Web

Fabulous web design UK, Stuff & Nonsense website design

Stuff & Nonsense express their taste for exquisite typography and experience in web design through their website. They specialize in creative design and have worked with clients from all over the globe.

Dkoo

dkoo dot net typography in web design

Derrick Koo combines typography and minimalist design for his business card website which only displays links to his other social profiles.

Design Woop

DesignWoop Web Design Blog typography in web design

Like most websites today, Design Woop uses large typography on a horizontal band, but also in other places such as the columns that showcase other articles the site is promoting.

Trentwalton

Trent Walton typography web design

Trentwalton is a website that combines typography and minimalist design to showcase a designer and web builder’s works and thoughts.

What’s my IP

what's my browser typography web design

This website also uses large white typography in their header but also in other places to draw attention to areas of importance such as the first row of the articles which explains what a browser is.

Typejockeys

Typejockeys - Type & Graphic Design

Typejockeys is a graphic and type design company. Their aspiration is towards an appropriate use of typography in their line of work. It is a fun design with cool typography.

Gabycastellanos

Gaby Castellanos typography web design

This is yet another example of using typography in a website’s header. This website uses different types of fonts, colors and illustrations to connect to its readers.

  Image Inq   Aug 21, 2017   Design   0 Comment Read More

Semi Web Safe Fonts to Spice Up Your Web Designs


Add to Flipboard Magazine.

We all know of the usual web safe fonts, you know, Arial, Verdana, Georgia, Times New Roman etc? They’ve been around for years and have become the standard for web typography, but there’s a bunch of fonts out there that are just waiting to be put to use in web design.

Semi web safe fonts is a term I’m using to refer to those fonts that aren’t usually found on multiple operating systems as standard but are often bundled with common software applications such as Office or the Adobe Creative Suite. How many people do you know who have Microsoft Office on their PC? Quite a few I’d imagine. The same goes if you’re creating a design related site, the users will all probably have the Adobe Creative Suite.

This means there’s a bunch of fonts on their system that can be targeted with CSS if the font is present it can spice up your website design a treat. If the font isn’t installed, simply specify secondary options so the font reverts back to the popular font stacks. Remember each font has different dimensions, so use them wisely to avoid too much line wrapping, particularly on titles. Let’s take a look at some of the common semi web safe fonts:

Myriad Pro

This is a sans serif typeface with 40 styles. It is also available in Adobe Typekit for sync and web use. This font includes Greek and Cyrillic glyphs, as well as adding old style figures. It is popular for both text and display composition ever since 1992.

Myriad

.myriad { font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif;
}

Garamond

Garamond is a group of many old-style serif typefaces. It has 6 styles, and as Myriad Pro, it is available in Adobe Typekit. Its design is based on the typeface first created by the famed French printer Claude Garamond in the sixteenth century.

Garamond

.garamond { font-family: Garamond, Times New Roman, Serif;
}

Palatino

This is another popular typeface, based on the Hermann Zapf’s own elegant calligraphy. This font family is included with modern versions of Microsoft software. The font was named after Giambattista Palatino – master of calligraphy. This font was designed over 50 years ago but it still remains beautiful and frequently used by designers!

Palatino

.palatino { font-family: Palatino, Palatino Linotype, Serif;
}

Impact

This is a sans-serif typeface designed by Geoffrey Lee in 1965. It looks really good for big, bold headers, in both print and web projects.

Impact

.impact { font-family: Impact, Haettenschweiler, Sans-Serif;
}

Tahoma

This is a free font for Windows and Mac. It is a humanist sans-serif typeface designed by Matthew Carter designed for Microsoft Corporation. It consists of two Windows TrueType fonts (regular and bold).

Tahoma

.tahoma { font-family: Tahoma, Geneva, Sans-Serif;
}

Century Gothic

Century Gothic is a sans-serif typeface in the geometric style. It was released by Monotype Imaging in 1991. Its design was influenced by the font Futura. This font is also based on Monotype 20th Century, which was drawn by Sol Hess.

Century Gothic

.century { font-family: Century Gothic, Arial, Sans-Serif;
}

Gill Sans

This is another humanistic sans serif family with a British tone and concept. It was designed by Eric Gill and released by the British branch of Monotype. This toolkit family includes a different styles such as Light and a Regular.

Gill Sans

.gill { font-family: Gill Sans, Arial, Sans-Serif;
}

Lucida

This is an extended font family designed by Charles Bigelow. The Lucida fonts have a large height and wide spaces between letters. Its design was based on traditional Roman letterform shapes.

Lucida

.lucida { font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif;
}

Futura

This is a sans serif typeface with 22 styles. This geometric sans-serif typeface was designed by Paul Renner.

Futura

.futura { font-family: Futura, Verdana, Sans-Serif;
}

Baskerville

Baskerville is a serif typeface designed by John Baskerville, an accomplished writing master, and printer from Birmingham, in the 1750s.

Baskerville

.baskerville { font-family: Baskerville, Times New Roman, Serif;
}

Hoefler Text

This is a family of typefaces with a more digital design. It is free for Windows and Mac. This is an old-style serif font by Jonathan Hoefler and released by Apple in 1991.

Hoefler

.hoefler { font-family: Hoefler Text, Georgia, Serif;
}

Cooper

This is a font designed by Oswald Bruce Cooper with a heavily weighted, display serif design. It was influenced by Art Nouveau, Art Deco, and the Machine Age.

Cooper Black

.cooper { font-family: Cooper Black, Arial Black, Sans-Serif;
}

Rockwell

The Rockwell font family is a slab serif typeface influenced by the old Litho Antique font. This geometric slab serif design has a strong display face for headlines and posters.

Rockwell

.rockwell { font-family: Rockwell, Georgia, Serif;
}

Check over the examples to see if each font is installed on your system. No doubt there will be some discrepancies depending operating systems and software installed, but these semi web safe fonts are definitely worth considering for your next web design project.

  Image Inq   Aug 20, 2017   Design   0 Comment Read More

20 Most Commonly Used Plugins on WordPress Blogs


Add to Flipboard Magazine.

One of the best things about the WordPress platform is the extensive list of WordPress plugins available to extend and add new functionality to your site. You can add almost any kind of new function you may think of, and this can be done without any coding knowledge at all! Let’s take a look at the 20 most commonly used plugins on WordPress blogs across the web, including those that provide additional features, to those that simply alleviate the simple tasks of running a blog.

Let’s take a look at the 20 most commonly used plugins on WordPress blogs across the web, including plugins that provide additional features and also ones that simply alleviate the simple tasks of running a blog. You will find useful WordPress plugins in this list, for simplifying the SEO process, adding security to your blog, helping you with creating the sitemaps, adding contact forms, integrating your site with social media, increase usability, and more.

Want more WordPress plugin recommendations? Check out these best WordPress plugins for freelancers and designers.

All in One SEO Pack

All in One SEO Pack Plugins on WordPress Blogs

The All in One is a super handy plugin that instantly transforms your WordPress blog into a search engine friendly site. It offers support for XML Sitemaps, Google AMP support (Accelerated Mobile Pages), Google Analytics, SEO on Custom Post Types, advanced canonical URLs, redirection and more. It is probably one of most popular SEO WordPress plug-in used across the web, along with Yoast SEO plug-in.

Google XML Sitemaps

Google XML Sitemaps Plugins on WordPress Blogs

The Google XML Sitemaps plugin creates an auto-updating sitemap for the spiders to feast on, ensuring your latest contest is indexed by the search engines. Its purpose it to make it easier for the crawlers to see the structure of your site and retrieve it in an efficient manner so your site gets indexed faster. While WordPress pings your posts anyway without a sitemap, it is always a good idea to use a sitemap WP plug-in to make sure Google indexes all of your previous and new articles quickly.

Akismet

Akismet Plugins on WordPress Blogs

Akismet is the daddy of spam capturing, keeping thousands of blogs clean from unscrupulous robots and individuals aiming to tarnish your site with their comments and links. It automatically checks all comments and filters out the ones that look like spam – but don’t worry, you will be able to see a status history for each comment so you can un-spam the ones you want. Akismet is quite reliable and extremely good at detecting spam over legitimate comments, however there are still plenty of creative spam comments that get through (judging from our own experience on the Line25 blog). But, if you ever choose to turn Akismet off and try to have a WordPress blog without an anti-spam plug-in – just see how much spam you will get without it (we’ve tried it, and it wasn’t pretty).

Contact Form 7

Contact Form 7 Plugins on WordPress Blogs

Contact Form 7 is a simple but flexible contact form solution for WordPress blogs, easy to install and set up, and includes Captcha and spam filtering features. Most common use of this WordPress plug-in is to insert it into your contact page so that visitors can contact you. However, Contact Form 7’s use isn’t limited to your contact page and can be used to create various other types of forms that you can use on your WordPress sites.

GD Star Rating

GD Rating System Plugins on WordPress Blogs

Give users powers to vote and rate the articles and content on your blog with the GD Star Rating plugin. Especially useful for your design gallery website. This plug-in has many uses if you run a WordPress blog where you want to enable your users to rate something.

Add to Any: Share/Bookmark/Email Button

AddToAny Share Buttons Plugins on WordPress Blogs

With this WordPress plug-in, you can let your user share, bookmark and email your articles with their friends to increase traffic and gain higher visibility in the social media world. It includes networks such as Facebook, Twitter, Pinterest, Google, WhatsApp, LinkedIn, Tumblr, Reddit, and over 100 more sharing and social media sites & apps. There are quite a few social share plugins made for WordPress, and this is just one of them. You should give it a try and see if you prefer it over others. The one thing to keep in mind about WordPress social share plug-ins is how much they slow down your website. Make sure that the plug-in you choose isn’t “code-heavy” as its drawbacks can outweigh its benefits.

Jetpack

Jetpack by WordPress.com — WordPress Plugins

Jetpack is a WordPress plugin which will keep your site secure. Besides that, it can also help increase traffic with its automatic sharing and search optimization. It comes with multiple traffic and SEO tools, security tools, backup services, content creation tools, discussion and community features, and a great support team! It’s also a plug-in that can help you speed up your WordPress blog.

NextGEN Gallery

NextGEN Gallery Plugins on WordPress Blogs

Who doesn’t love lightbox galleries? Galleries are used in various types of WordPress blogs – either on the home page as a featured gallery or on dedicated gallery pages. They are also quite useful for WordPress sites that are portfolio websites for designers. The NextGEN Gallery allows easy insertion of fancy JavaScript image popups to WordPress through a single plugin. Create awesome image galleries it this easy to setup plugin!

Yet Another Related Posts Plugin

Yet Another Related Posts

There are plenty of related posts plugins out there, but this particular version is packed full of options and customization settings. It’s a great idea to use a WordPress plug-in on your website that shows other relevant content to users on the page which they’ve visited. This not only helps to improve your user satisfaction, but also helps to keep users longer on your WordPress site and to view more pages, thus decreasing your bounce rate. Many SEO professionals argue that time on website and your bounce rate are used by Google to determine your website’s rankings, although they are just some of the factors.

Google Analytics for WordPress

Google Analytics for WordPress by MonsterInsights

Easily insert your Analytics tracking code and keep an eye on stats from links, comments, and your blogroll. MonsterInsights is the most popular Google Analytics plugin for WordPress, having over 15 million downloads. Of course it’s possible to simply hard-code your Google Analytics code into your WordPress theme, however most people choose to simply enable a plug-in and insert the tracking ID from Google. This plug-in is a must have plug-in for any WordPress website owner.

BuddyPress

BuddyPress

BuddyPress is a fun and flexible plugin for creating online communities, teams, and groups. This is an open source social networking software, perfect for creating social networks, communities and forums on WordPress websites.

WP Super Cache

WP Super Cache

WP Super Cache protects your site from large traffic influxes by loading static files in place of the dynamic pages. It does this by generating static HTML files from your dynamic WordPress blog. It also does miracles in speeding up your WordPress blog. There are several caching plug-in for WordPress that are very popular, and WP Super Cache is just one of them (there is also WP Fastest Cache and a few others that are quite popular). You absolute must have a caching plug-in on your WordPress blog if you want your pages to load quickly. Don’t forget that page speed is a Google ranking factor, so having your pages load fast via a WordPress caching plug-in will help you rank better and keep your users happier as your pages load faster. It will also decrease your bounce rate, because users will not wait too long for your pages to load if they load slowly – they will click the “back” button and go to the next search result.

Use this WordPress plugin to add social share buttons to your website. It allows you to instantly add various buttons through one simple plugin file. This can significantly increase your website’s traffic. As we mentioned earlier, there are numerous social share plug-ins available for WordPress blog owners, so choose the one you like the most and the one that doesn’t slow your blog.

Social-Share-Buttons-by-Supsystic-—-WordPress-Plugins

Broken Link Checker

Broken Link Checker

The Broken Link Checker does exactly what it says on the tin, monitors your WordPress blog and informs of any links getting lost in cyberspace. After activation, the plugin will begin parsing your posts, bookmarks, and other content and looking for links. If you blog has a lot of articles, be prepared to wait quite a long time for this WordPress plugin to check all of your links. You should also take its findings with a little grain of salt – it may not always detect all of your broken links. It’s always a good idea to check your old content once a while to make sure your WordPress blog doesn’t get out of date. Finally, make sure you don’t select settings that make this plug-in check links too quickly – this will put a heavy strain on your website server’s resources and may slow down your WordPress blog temporarily until the plug-in finishes checking. Use reasonable settings and be patient while this plug-in checks for your broken links.

Google Analyticator

Google Analyticator

Google Analyticator is another super handy plugin providing instant analytics tracking. Additional features include admin dashboard with detailed stats. It has over 3.5+ million downloads.

WP e-Commerce

WP eCommerce

Transform your blog into an e-Commerce system with this great plugin. This plugin is complete with elegant and easy to use features typical of any full blown cart solution. It’s perfect for those of you who want to sell digital downloads, physical inventory, or subscriptions and memberships.

Smart Slider 3 WordPress Plugin

This is a very useful slider plugin that allows you to build responsive sliders that will automatically adapt to any screen dimensions. You can also use it to create YouTube and Vimeo slides and slides from your WordPress posts.

Smart-Slider-3-—-WordPress-Plugins

Free Tools to Automate Your Site Growth

-Free Tools to Automate Your Site Growth — WordPress Plugins

This plugin comes with all the tools you need to market your blog! It has a list builder, which makes it easy for you to build email subscriptions and can be integrated with all major email providers, a Share function, which adds social sharing buttons on your site, a Welcome Mat, which displays a full-screen call-to-action that shows when visitors land on your site, heat maps, to help you see where people are clicking, a scroll box, smart bar, highlighter and even an image sharer!

WP-PageNavi

WP-PageNavi

Easily add more page navigation functionality to your blog with the WP PageNavi plugin. Allows custom page numbering and wordings amongst more.

VaultPress

VaultPress offers great solutions for backing up your information. You can also schedule automated security scans and get support at all times.

VaultPress-—-WordPress-Plugins

This completes are roundup of must-have and most popular plug-ins for WordPress blogs. If you have more WP plugins to add to this list, please feel free to give your input in comments. Please note that this plugins list is by no means exhaustive – there are many other useful WordPress plugins out there.

  Image Inq   Aug 19, 2017   Design   0 Comment Read More

Coming Soon Page Design: How to Make it Awesome and Successful


Add to Flipboard Magazine.

Unlike the traditional under construction pages from the early days of the web, a coming soon page can nowadays prove to be a handy tool when launching a new website.

If you plan on launching a new online business, you have to think about social marketability. For having a successful business online it helps to let people know what it is you are doing, even before you actually launched your product or services. How can you do this? Easy! That’s when coming soon pages come in handy. They will help you market your business even before it is actually available to the public! You can catch leads and gain social media followers before your business is actually live.

Forget yellow hard hats and flashing signs, let’s take a look at what benefits can be seen from some of the best coming soon pages! These coming soon page designs have unique approaches and concepts which will surely inspire you to create your own awesome coming soon page! Also, learn what you should include on a coming soon page in order to make it more effective and let it help you in your marketing efforts, even before the website is actually live.

Please note that the coming soon pages examples we’ll showcase below may not be visible live on the websites because the websites are already launched. However, you can see how they looked like in the photos below. They will surely offer you the inspiration you need!

What’s a coming soon page?

Coming soon pages are in essence a teaser for what is due to come once this fabulous thing has been finished. So it’s important to give an insight on what the site-to-be is all about. They usually have a design which matches the company’s branding and also some other key features, such as newsletter subscription form and social media buttons.

View the coming soon page

Develop a brand from day one

One benefit of placing something on your domain is that it gives the opportunity to develop a logo and brand that can be embedded into the minds of your viewers before the final site is even live. This is very important and makes your business easy to remember. See the example below! This coming soon page has a large logo and a simple footer which has the purpose of catching leads. It’s simple but effective – pretty much everything a coming soon page needs.

View the coming soon page

Provide email notifications or signups

It’s no use posting up an awesome coming soon page, but not providing any way of following up. It’s more than likely the viewer will have forgotten all about it by tomorrow, so being able to say ‘Hey, the site is now live – Check it out’ is super important. That’s why many coming soon pages offer newsletter subscription forms. Make sure you email the new followers right away or soon after, to give an update on how the site is going, or otherwise they’ll forget they even subscribed in the first place and you may end up with lots of unsubscribes or spam complaints.

View the coming soon page

Go to town on the design

It might only be a temporary placeholder for what is coming, but this doesn’t mean it shouldn’t be given the same amount of time and effort as the completed site. Creating something interesting and enticing will help generate interest. Do this well enough and you’ll capture a few ‘Oh, this actually looks pretty good!’ sign ups. This will increase the interest for your business and you will be able to collect even more emails! Take the websites below as an example! They are simple, yet beautifully created.

View the coming soon page

View the coming soon page

Do something fun or different

Coming soon pages aren’t anything new, there are thousands of them out there already. With this in mind, it’s important to make yours stand out. Do something unique or fun. People share stuff they like, so give them a reason to pass on the link. Be creative! These coming soon pages examples can inspire you!

View the coming soon page

Offer links to social networks

Email isn’t the only method of communication in today’s world of web. Social networks are important tools for communicating with users. Sites like Twitter and Facebook will allow viewers to learn more behind the scenes of the website. This way you will be able to gather some new followers, even before your business is actually launched! Make them visible and even encourage visitors to follow you on Twitter, Instagram or Facebook to find out more about your site.

View the coming soon page

View the coming soon page

This was the coming soon page design for our website, Line25. It was simple and with a pretty straightforward call to action message – Follow us on Twitter! It worked! We managed to gather lots of new Twitter followers even before launching the site. This helped us a lot after because Twitter was our main source of traffic at the beginning.

  Image Inq   Aug 18, 2017   Design   0 Comment Read More
Page 26 of 28« First...1020...2425262728