5 Design & Development Skills to Learn This Summer

Summertime is here – at least in the northern hemisphere. And while our thoughts often turn to vacations and outdoor activities, this time of year is also a perfect opportunity to learn something new.

Web design and development is ever-changing, with new techniques and technologies coming out all the time. This places us in a constant struggle to figure out where to train our focus. Nevertheless, it’s critical that we continue to educate ourselves in order to level up our skills. After all, the future waits for no one.

With that in mind, let’s take a look at 5 design and development skills worth your time this summer. While you may already be familiar with them, there’s likely at least some aspects of each that you’ll want to explore more deeply.

1. CSS Grid

CSS Grid

For some of us, there’s always a little trepidation when working with new CSS goodies. We want to use the latest features, but there’s also the fear of leaving out users on older tech. But there also comes a point when we simply need to take advantage of something that’s better than what we’ve been using.

The time has come for CSS Grid to be widely adopted. It’s no longer an edge-case, as the last several versions of all major browsers have supported this powerful new layout feature. And the advantages of using it are just too great to ignore.

CSS Grid makes even the most complex layouts possible without the need for overly-complicated code. The syntax takes some getting used to, but really is quite simple once you get the hang of it (a major improvement over the useful-but-finnicky Flexbox). This one is here to stay and will be an important part of a designer’s repertoire for years to come.

Learning Resources:

2. JavaScript

JavaScript

Indeed, JavaScript has been with us for quite a while. It’s a language that has many flavors and popular frameworks that we leverage to enhance our sites. But it’s also becoming even more important as some new tools are bringing JS out of the background and into the spotlight.

For one, the new WordPress Gutenberg editor relies heavily on JavaScript for the creation and use of custom content “blocks”. That the world’s most widely used CMS is turning to the language is reason enough to take a deeper dive into it. But it’s also, in one form or another, powering all sorts of web applications these days.

That does make it a bit more difficult to decide where to focus your energy, though. Some applications are tied to specific frameworks such as React or Vue. So, where you spend your time should really be specific to what you want to accomplish. If your desired skill requires knowledge of a framework, that should point you in the right direction. Otherwise, there’s nothing wrong with learning the fundamentals of plain old vanilla JS.

Learning Resources

3. Micro-Interactions

Micro-Interactions

Among the finer details of design are micro-interactions – those little visual cues that go along with various user actions. It might be the effect you see when clicking a button, providing visual confirmation of what you just did. It could also be a progress bar that fills up as you move through a multi-step form.

These items are small in stature but can perform wonders for the user experience. They give users confidence in what they’re doing, which in turn makes them more likely to interact with your site again and again.

Learning Resources

4. Design Systems

Design Systems

If you’re looking for absolute consistency in the look of your website or app, a design system can get you there. Sometimes referred to as a “pattern library” or “styleguide”, it’s a visual language that helps you to document UI elements so that they can be reused. This ensures that fonts, colors, shapes, icons, etc. are consistent across all platforms. This is especially important when working as part of a team on large-scale projects.

For example, when everyone on your team knows what a call-to-action button should look like, it makes the job of implementing such an element much easier. Designers don’t have to approximate or conjure up their own solution because the standard is right there in the documentation.

We often design things in a bit of a haphazard way – coming up with various elements as we need them. That may work well enough for some projects, but just about everyone can benefit from a design system – even if you’re the only one on the “team”. The more well-organized you are, the better your work will be.

Learning Resources

5. Typography

Typography

Many of us self-taught designers never formally learned best practices when it comes to typography. We use what looks good to us – but there’s more we could be doing. Responsive text, for instance, is something we all need to be aware of.

Taking some time to review the fundamentals, along with the latest techniques, is a worthwhile endeavor for all designers – formally trained or not.

Learning Resources

Fresh Skills for the Summer

As the Fresh Prince once opined, “Summer, summer, summertime / Time to sit back and unwind”. That may be fine for some, but web designers need to keep their hustle on all year round. Sure, take some time and enjoy warm weather and the great outdoors. But don’t miss the opportunity to improve those mad skills.

The post 5 Design & Development Skills to Learn This Summer appeared first on Speckyboy Web Design Magazine.

5 Things to Look for in a Great Web Design Client

So often, we like to discuss the worst in people. And it certainly makes sense that, as a freelance designer, you’re sure to deal with any number of clients from hell. In its own way, these stories tend to bring us together as a community. We can swap tales of disaster and have a laugh about them after all is said and done.

But, in my 20+ years in the industry, I’ve dealt with far more good clients than bad. And, just like those devilish ones have their own traits, so do the best. So today, instead of providing you with a list of things to avoid, let’s have a look at some things that make for a great web design client.

1. They’re Willing to Listen

When someone hires you on to build and/or maintain their website, it’s nice to know that they have a firm trust in your expertise. A designer is more than just someone who takes direction. Part of your role should be advisory in order to make the most out of a project. After all, you know what works and what doesn’t. You have experience with different tools and techniques that could be of great benefit to a client.

The best clients tend to seek out your professional opinion and, at the very least, seriously consider what you have to say. It doesn’t mean that they’ll always do things your way, but your voice should be included in the discussion.

They're Willing to Listen

2. They Have Tangible Goals

Some of the most difficult projects are ones that don’t have a clear goal. That often seems to be the result of a client who isn’t really sure what they want – they just know that they need a website. For designers, the result is that you’re forced to put together whatever pieces of the puzzle are provided while being left to fill in the gaps.

On the other hand, a client who has specific, tangible goals for what they want their website to accomplish brings clarity to the process. When you know what someone’s needs and expectations are, you can create a plan of action to make it happen. Here’s to no more guessing games!

It’s also worth noting that, even if a client isn’t quite sure of what they want, you do have the opportunity to help guide them in the right direction. Therefore, don’t be too discouraged by a slow start. There’s still time to develop those goals.

They Have Tangible Goals

3. They’re Willing to Spend for Quality (Within Reason)

Even the biggest projects have at least some budgetary restrictions – it’s something we all have to deal with. But there are circumstances where a project’s expectations have simply outgrown the amount of money that’s been allotted to it. While the available free solutions are often hyped, they aren’t necessarily going to be the best tool for the task at hand. Without an investment in quality, the end product is going to suffer.

You’ll gain an appreciation for those clients who understand that there are certain times when money has to be spent in order to do things the right way. This is especially true when it comes to eCommerce, as a little extra spent early on can save a lot of extra costs (and headaches) down the road.

This also goes hand-in-hand with clients who are good listeners, as noted above. Part of our advisory role is to provide the best information possible when it comes to recommending tools and services that help to ensure everything works the way it should. The hope is that your client will take your advice to heart and make the best decision for their business.

They're Willing to Spend for Quality (Within Reason)

4. They Value You and Your Time

When someone looks at you as just hired help, you don’t feel much like a valued member of a team. It shows up in the form of your ideas being dismissed and your concerns tossed aside. You may even find yourself completely out of the loop when big decisions regarding the project are made. Why’d they even bother to bring you in if they don’t need you?

On the other hand, it’s a wonderful feeling when a client treats you as part of the family. They understand that you’re busy and don’t take up your time unnecessarily. And when something happens in your life (good or bad), they offer words of encouragement.

In my own experience, I’ve witnessed both the birth of my daughter and the passing of my mother. In both instances, it was truly wonderful that several clients took time out for either congratulations or condolences. It makes for a stronger relationship – one where everyone feels like they matter.

And, of course, it helps when clients routinely make a good faith effort to pay your invoices. Doing so is another sign that they both value and respect you.

They Value You and Your Time

5. They Tell Their Friends About You

One of the biggest compliments you can receive as a freelance designer is a client referral. It says that someone enjoyed working with you and are happy with the results you helped to provide. More than that, you get the sense that your client genuinely wants to see you succeed in the future.

This one certainly has to be earned, though. Hard work, honesty and a job well-done are what can get you there. But it takes a special person to both recognize what you did and take some extra time to put in a good word or two with someone else. Even if that referral ultimately doesn’t work out, it’s still the thought that counts.

They Tell Their Friends About You

A Great Client is a Gift

We all have our own idea of a “dream” client. Maybe it’s one that pays well and asks for little in return. Or it could be someone who provides you with a lot of creative freedom. Maybe they drive a Ferrari and let you take test drives.

Fantasies aside, it’s important to recognize those who value what we do. Because, the greatest clients are the ones who enable us to work for ourselves as freelancers. Without their trust in us, we wouldn’t be here in the first place.

So, let’s raise a glass to our best clients and say thanks for being part of our journey!

The post 5 Things to Look for in a Great Web Design Client appeared first on Speckyboy Web Design Magazine.

Amelia – a WP Booking Software that Lets You Manage Appointments While You Sleep Sponsored

Taking appointments might appear to be a low-level task. It involves little more than picking up the phone or responding to an email. The problem with that point of view is that it generally takes up more of your time than you realize. Managing those appointments can take up a lot more time and cost your business money.

In addition, a variety of problems can arise when appointments are managed manually. Making an appointment may not be possible during non-business hours or on weekends. It might be the case that there’s no one there to take them. Or, if your appointment-taker is away from the phone or busy on another line. Here, a potential client may lose patience.

People sometimes forget appointments too. It is a different kind of problem, but a problem nevertheless.

Put an automated booking specialist like Amelia in place. These problems will become history.

Introducing Amelia

Once Amelia is installed, you’ll begin to wish you had such a flawless system in place years ago. This WordPress plugin is the brainchild of one of Code Canyon’s Elite authors. The latter is the creator of its best-selling wpDataTables WordPress plugin. It is also an author that has sold more than 17,000 licenses.

Amelia was created with businesses in mind that are dependent on bookings. Businesses like coaches, gyms and fitness clinics, consulting firms, and spas. For businesses like these, a booking system must be easy to install and super-easy to use. Amelia is such a system. Once installed and set up, it’s 100% automated and ready to go.

You will love your new automated booking system. Your clients can book make appointments from their computers and smartphones 24/7. You can view and manage these appointments from a central, perfectly organized place.

2.0 Amelia’s Key Benefits

You’ll save a surprising amount of money

The person assigned to take and manage appointments obviously expects to be paid. It simply makes more sense to pay a one-time fee for the most professional booking specialist you’ll find. This is a booking specialist that’s on the job morning, noon, and night and on weekends and holidays too. This specialist always gets things right and never complains. That’s Amelia we’re talking about!

You can Devote More Time to Key Tasks and Assignments

The time taken away from a key task to answer the phone or check your email may not seem like a problem. But interrupting work in progress to manage an appointment can be an annoyance.

You can always ignore a ringing phone and wait for a more convenient time to check your email. But you are likely to lose potential clients by doing so. Amelia will keep humming right along booking and managing appointments. All this is while you are attending to other tasks.

Your Business Environment Looks and Is More Professional

Amelia’s UI is a pleasure to view and work with. This automated booking system gives your business operation a much more professional look. Clients can book appointments in seconds at any time and they don’t have to wait for someone to answer the phone. They don’t need to wait until the next day for an email confirmation. They also won’t listen to elevator music when they’ve been put on hold.

Everything is in Its Place – in One Place

With Amelia in place, you’ll remember the hard times you had to look through notebooks to find what you need. Or, you needed to scroll through endless Excel tables. All in hopes of finding an appointment you made and can’t remember.

What’s pleasing about those memories is knowing that with Amelia, you won’t ever have to go through any of that again. You’ll be able to see at any time who’s in charge of a client. You will know the time, place and duration of a scheduled appointment, and what the service is costing.

3.0 Amelia’s Top Features

The Search Booking Wizard: This wizard gives you a convenient way to search for a suitable service or employee. You can easily find the perfect time to fit the occasion.

A Step-by-Step Booking Wizard: This wizard gives you alternatives in scheduling appointments. You can do so based on a chosen parameter – Service, Employee, Date; at each step.

The Dashboard and Reporting Feature: You can get a quick overview of your business’s performance on Amelia’s dashboard. This includes charts that will help you track key financial and conversion-related KPIs.

Workflow Calendar: Amelia provides multiple workflow options. You can track by day, week, or month, or by timeline, calendar view or by an interactive list of appointments.

Catalog View: This feature generates an online catalog of services along with your booking form. It does so by using a shortcode and adding information about your service and images.

Employees Management: This feature manages employees contact data that is stored in the WordPress database. It also configures personal work schedules including days off.

Locations Management: It makes no difference to Amelia if you have several business locations. Your automated system will still manage your appointments and contact data.

Group Appointment Booking: Amelia manages both individual and group appointments. You can specify minimum or maximum capacities or group sizes.

Minimum Booking and Cancelling Times: This feature lets you configure your booking and cancellation periods.

Automated Notifications: Amelia sends email notifications to clients when an appointment has been booked. It also notifies them when the appointment is pending, canceled, or rejected. Notifications are also sent for appointment follow-ups, birthday greetings and other reasons.

Schedule Settings: This feature ensures employees are aware of standard business hours. It informs them about non-work days and the like, and any schedule changes.

Online Payments: Payments for services rendered can be made via PayPal or Stripe.

Customizable Design: Amelia’s frontend interface can be customized. Make your booking controls match your businesses brand style and your WordPress theme!

Why It’s a Good Reason to Try Amelia Now

There are many good reasons to use Amelia. One of them is the opportunity to advance your business’ professional look.

Amelia doesn’t require any training to use, and there’s little effort involved in setting it up. Thus, it’s easy to take it on a trial run to see how it will work for you and your team.

You’ll also discover how easy it is for Amelia to fit your business needs. It can easily manage your appointments around the clock.

Missed or misplaced appointments will be history. You can empty your wastebasket into the trash bin without fear of losing a slip of paper.

With Amelia, you will have everything in its place and perfectly organized. Just like that, you can turn your attention back to the must-do tasks and assignments.

The post Amelia – a WP Booking Software that Lets You Manage Appointments While You Sleep <span class=”sponsored_text”>Sponsored</span> appeared first on Speckyboy Web Design Magazine.

A Collection of Unique Password Field & Form Utility Code Snippets

If your website enables users to have their own accounts, then passwords are an important part of both security and the UI. You’ll certainly want users to adopt strong passwords to make things more difficult on hackers. But there are also some little touches you can add to a password field that improve usability. Plus, you wouldn’t want to treat your login area as an afterthought.

Perusing the archives of CodePen, there are a number of password-related snippets worth checking out. Below, you’ll find a combination of attractive, unique and useful items that range from simple password fields to utilities that will generate secure passwords for your users.

The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets


Checking Password Requirements

One of the most frustrating situations for a user is when a password isn’t strong enough, but it isn’t clear what they need to do in order to meet the requirement. Here we have a field that uses JavaScript in conjunction with a listing of requirements to automatically “check off” each item as you type. This pen is actually a few years old, but still a great example of providing users with the information they need.

Show Me

When we’re creating complicated passwords, it can be quite useful to see what it is we’re typing. So often, fields that offer this feature do so with an eyeball icon or some other non-verbal method. What’s nice about this particular login form is that it actually says “Show Password” on the password field toggle. It’s never a bad idea to make things as obvious as possible.

The Password Genie

There are plenty of choices out there if you want to randomly generate a password. But what makes this Vue.js example so cool is that you have a user-friendly options panel for selecting length, number of digits and symbols. There’s also a real-time strength meter, the ability to generate password after password and click-to-copy functionality. What else could you possibly need?

Wrong Password? Get Outta Here

Micro-interactions are sort of a big deal these days, and this password field uses them in a creative manner. Enter in the wrong password and the lock icon swings, pendulum-like, and “kicks” the invalid entry away. It’s mainly for fun, but interesting nonetheless.

Create Passwords in Bulk

If you’re in a situation where you need to generate several passwords, you will love the functionality of this example. Set the number of passwords you want to generate, how many characters they should be and even list the characters you want the generator to use. And, oh yeah, you can even save your password list as a text file or print it out. What a time saver!

Confirm and Validate

In scenarios where a user is either registering or changing their password, adding a second confirmation field is pretty standard practice. This form takes it a step further by adding several features, including the ability to show/hide the input text, a strength meter and a check to make sure the password in both fields match. The only suggestion here would be to also display the requirements for a “strong” password.

Super-Secret

When you combine interesting design and solid functionality, you’re on to something good. This password generator offers up a great mix. It can be configured by clicking the various icons at the bottom of the form (the features do work in the example) – that’s the functionality portion. The UI is also very slick, using animation to make the whole experience feel more interactive.

Just Like the Movies

This last selection is purely for entertainment purposes. This pen is a tribute to all of those movies and television shows that have made password cracking look like a futuristic endeavor. To use it, just click as the random characters pass by – once for each spot in the password. The result is a fully “cracked” password!

Password: Protected

There you have it, a mix of password fields that can enhance the usability and maybe even the security of your next project. Not to mention some interesting password generation tools that can help you create better passwords and do so in short order. Now, just don’t share them with anyone 😉

The post A Collection of Unique Password Field & Form Utility Code Snippets appeared first on Speckyboy Web Design Magazine.

Great Tools and Resources that Designers and Design Teams Should Start Using

Web designers face a peculiar set of circumstances with respect to technology. New tools, resources, and techniques make their work easier. They also provide opportunities to create improved products.

At the same time, changing technology can present challenges. One of them being the need to keep up with changing times if one is to keep up with or stay ahead of the competition.

As one example, let’s take graphics. It has almost replaced text as the preferred method of presenting information on the web. Team collaboration is another example. Here, interactive prototyping, video, and live chat have taken over. They have replaced phone calls, email, and in some cases, meetings and business trips.

Keeping up with the times can be easy and even fun when you have the proper tools and resources at your disposal, like any of the following.

1. Mason

Mason

Mason promotes project collaboration, adaptability, and agility. Its pre-packaged solutions of common digital product requirements address today’s most comment digital product requirements.

One of the areas where Mason differs from the rest of the pack is the ability of team members and even clients to make changes to Mason modules during the design/development phase or after deployment. Registration and login features give you total control over who is authorized to make these changes.

These features enable you to streamline your collaboration activities by allowing changes in requirements to be handled by others.When designers, developers, clients, marketing organizations, and others are authorized to build, ship, and edit a Mason feature, it eliminates the necessity of requiring repetitive deployment cycles to keep a digital product up to date.

The modular content (pre-coded blocks of content) helps to speed up project workflow by simplifying page management for every page you build. You’ll be able to get your deliverables to your clients more quickly and your clients will be able to get their products in front of their customers as well.

2. Mobirise

Mobirise

Small customer projects like small websites, portfolios, landing pages and the like shouldn’t require having to use a variety of tools and resources for successful completion. The end products must still adhere to high design and development standards, but that is not an excuse for having less than total control over your projects from start to finish.

Mobirise offers an easy way to create small projects such as these. It features 1200+ templates and blocks and a huge library of images, fonts, and icons. It’s offline and has everything you need to work with on a single platform.

You can host your products wherever you want, since it’s so way to work with it’s a great tool for non-techies, and its an ideal choice for those who prefer to take a visual approach to design. Best of all, Mobirise is free for both commercial and personal use.

.

3. Elementor

Elementor

When more than 900,000 users jump on board during a WordPress plugin’s first two years on the market, you know there must be a good reason for it. Elementor, currently the #1 WordPress page builder, not only has all the website-building features and functions you’ll need, but it won’t cost you a dime.

This free, open source frontend builder is destined to become even more popular, thanks to a host of new features being introduced incrementally throughout 2018 as part of the latest version, Elementor 2.0. Since you’ll have all the freedom and creativity you want, you won’t feel limited by the way a theme is designed. The goal of Elementor’s authors was to make website building painless and effortless, and that is precisely what they achieved.

Elementor comes with a host of beautiful templates, 800+ Google fonts, 400+ icons and plenty of color options.

4. A2’s Fully Managed WordPress Hosting

A2's Fully Managed WordPress Hosting

A2’s fully managed hosting service is well known for easy site staging and fast, super-reliable and scalable hosting expertise and capacities. A2 Hosting can claim up to 20 times faster page loading speeds than most of its competitors.

This service’s prices are quite affordable, and in most cases, A2 can move you over from your existing host at no charge.

5. Goodiewebsite

Goodiewebsite

Goodiewebsite is a software development service offering cost-effective coding at competitive prices. This service specializes in small to medium-size (1 to 10 page) websites; a size common to many small businesses and creative agencies.

Prices start at $999 for which you can expect reliable service and top-quality deliverables.

6. monday.com

monday.com

Whether your team consists of yourself and one other guy, or is huge and dispersed around the globe, monday.com is a team management tool that should fit your project needs like a hand in a glove.

Your team needn’t be particularly tech-oriented to use it, and it will relieve you of the burdens often associated with managing multiple Excel files, doing your project planning on whiteboards, and attending one overly-long meeting after another.

7. The Hanger

The Hanger

You don’t often hear the terms “modern” and “classic” used to describe the same thing, but The Hanger manages to answer to both descriptions. Since this WooCommerce theme is almost ridiculously easy to set up, you can have a customized eCommerce WordPress site that perfectly aligns with a client’s brand up and ready in a very short time.

8. LayerSlider

LayerSlider

The LayerSlider plugin serves as a platform on which awesome sliders, image galleries, attention-getting slideshows, animated page blocks, and even complete websites can be created.

Its features include a visual drag and drop editor, versatile layout options, and handcrafted slider templates covering everything from personal to corporate needs. LayerSlider is responsive, retina and high-resolution ready, and SEO friendly.

9. Uncode – Creative Multiuse WordPress Theme

Uncode – Creative Multiuse WordPress Theme

Uncode is a powerful, user-friendly theme that has all the functionality needed to build an outstanding portfolio to showcase your work in a very few hours. New features like the powerful Gallery Manager, Slides Scroll, and Shape Dividers have created even more design options that are guaranteed to give your products a professional and uniquely creative look.

Visit Uncode’s user showcase for ideas and inspiration. Be prepared to be impressed!

10. Houzez

Houzez

Houzez is a WordPress-based real estate and property management system that provides realtors with the functionality needed to administrate a real estate marketplace, coordinate their agents and accept submissions.

Features include advanced search filters and options, listings options, a custom search composer, and a custom fields builder that gives you the ability to add custom fields to display whatever information your business model requires. You will also be impressed by Houzez’s customer support!

11. Fluid UI

Fluid UI

Fluid UI is a web and app prototyping tool you can apply to significantly speed up your design workflow by sharing wireframes, mockups, and prototypes with team members and other project stakeholders. Information sharing and feedback can be accomplished via interactive video presentations and live chat. Fluid UI features extensive libraries of web, desktop, iOS and Android design components.

12. Pixpa

Pixpa

Creatives look for tools that will enable them to showcase their work in the best possible manner. Pixpa’s all-in-one platform is more than up to the task. Not only is it a top portfolio website builder with drag and drop design tools, but it offers so much more- integrated e-commerce store, blog, and even client proofing.

With Pixpa you’ll save time and money by not having to bounce back and forth among several tools to get the results you want. Get started for free with the 15-day trial.

13. wpDataTables

wpDataTables

wpDataTables is far and away the premier WordPress plugin for creating tables and charts. It is so good at managing huge amounts of complex data in minutes if not seconds to create beautiful, responsive, interactive, and maintainable charts that many of its users switched over to WordPress simply for the opportunity to use it.

wpDataTables accepts data in most formats and from many different sources, including massive MySQL tables.

14. WhatFontis.com

WhatFontis.com

Thousands of designers access WhatFontis.com’s database every day to locate fonts they wish to use but don’t know the name of, or are looking to find the closest possible match. Although the WhatFontis.com directory is huge (450,000 commercial and free fonts at last count), an automatic artificial intelligence system takes your image and identifies the font by name quickly and efficiently.

Unless you enjoy looking for needles in haystacks, you’ll appreciate the time you’ll save using this powerful resource.

15. FFonts.net

FFonts.net

FFonts.net is far and away the best source of free fonts on the market. This online directory places thousands of fonts at your fingertips. The fonts have been assigned to 87 smartly-defined categories, enabling you to quickly zero in on a specific font or browse through several fonts that have a similar style.

Once you find a candidate, you can create a string of text with it to see how it will appear in actual practice.

Conclusion

What are your thoughts on this collection of tools and resources? Here, you should be able to find one or more that will speed up your workflow. Some of them can provide optimum hosting for your needs. Others are focused on helping to improve the quality of your deliverables.

You might be looking for a multi-purpose theme, a specialty theme, or a team management tool. Whatever it is, you’ll find it here. You can be confident that whatever you select, it will be the best of the best of its type.

The post Great Tools and Resources that Designers and Design Teams Should Start Using appeared first on Speckyboy Web Design Magazine.

15 Free Gesture Icon Sets for Mobile App Designers

With the rapid rise in popularity of touch devices, from mobile phones and tablets to the many laptops and monitors that support touch, developers need to find a quick way of explaining the many touch-enabled interactions that add extra functionality and improve the experience and productivity of many of the latest applications to new users. Many developers use gesture icon sets, or interaction icons, to teach new users how to use their app.

In this short post, we have collected 15 free gesture icon sets for you. The gesture icons come in many different styles, sizes and, most importantly, formats. And just like all free resources, please do check the license, they can change from time-to-time.

If you’re looking for more icons, you might also like to take a look at the top 50 free icon sets for web design.

Unlimited Downloads:
500,000+ HTML Web TemplatesIcon Sets, Web Templates & Design Assets


Touch Gestures Icons By Jeff Portaro (100 Icons, AI, EPS, CSH, PSD, PNG, SVG)

Touch Gestures Icons mobile app development designer

Gesture Icons By Frexy (38 Icons, EPS, SVG)

Gesture Icons mobile app development designer

Gesty By Mariusz Ostrowski (43×8 Icons, AI, CSH, SVG, EPS)

Gesty gesture icon set mobile app development designer

Free Gesture Icon Set By Rena One (14 Icons, PSD, AI, PNG)

Free Gesture Icon Set mobile app development designer

Gesture Icons By Theme Raid (50 Icons, AI)

Gesture Icons mobile app development designer

Hand Gesture Icons By Abdus (12 Icons, PSD)

Hand Gesture Icons mobile app development designer

Gesture & Transition Icons By NOGA (19 Icons, Sketch)

Gesture & Transition Icons mobile app development designer

Free Touch Gestures By Tom Loots (9 Icons, AI)

Free Touch Gestures mobile app development designer

Flat Hands Illustration Vector (AI, EPS)

Flat Hands Illustration Vector mobile app development designer

UX Gesture Icons By Gaoyoungor (12 Icons, PSD)

UX Gesture Icons mobile app development designer

iPhone Gestures By Julian Burford (12 Icons, AI)

Gestures free icon set mobile app development designer

iPhone Gestures By Suleiman Leadbitter (12 Icons, Sketch)

iPhone Gestures icons mobile app development designer

Hand Gesture Pack By Tom Johnson

Hand Gesture Pack mobile app development designer

Material Design Hand Gestures By Oxygenna (8 Icons, PSD, PNG)

Material Design Hand Gestures mobile app development designer

Righteous Gestures By Martin Cajzer (56 Icons, AI, PSD)

Righteous Gestures icon sets mobile app development designer

The post 15 Free Gesture Icon Sets for Mobile App Designers appeared first on Speckyboy Web Design Magazine.

MapSVG Brings Incredibly Powerful and Flexible Maps to WordPress Sponsored

Maps play an integral part in creating a great user experience. Whether they are used to show multiple retail locations, detail a specific attraction or visualize statistics, they help users to get the information they need.

Working with WordPress, however, creates a classic dilemma. Each type of map you want to use on your website requires a different plugin. This can lead to both difficulty in maintenance and decreased site performance. Not to mention that these various tools all work independently of one another. Combining the features of different map types just wasn’t possible – until now.

With MapSVG, you’ll find a complete solution for creating virtually any type of map you can imagine – all in one powerful WordPress plugin. Let’s take a deeper look:

MapSVG

A Solution for Every Type of Map

Thanks to a recent update, MapSVG now enables you to create and combine three types of maps: Interactive vector maps (using SVG), Google Maps and image maps. This gives you the power to build the perfect map for your specific needs.

Interactive SVG Vector Maps

What makes SVG maps so useful is that they render perfectly at any size and they can include all sorts of interactivity. MapSVG comes loaded with a collection of country maps, but also lets you use your own SVG images. This opens up possibilities well beyond geography. Images of building floor plans or seating charts, for example, can be added to help users further explore a venue.

Plus, there are a wide array of interactive features that can be implemented. Use tooltips with custom HTML to make for an in-depth experience. Add markers and directory indexes to help users find what they’re looking for more easily.

Custom fields enable you add virtually any type of data to a map. Maps can also be searchable and filterable. This type of map makes even the most complex images easier to understand.

An interactive SVG map with a directory.

Google Maps

MapSVG lets you combine the power of Google Maps with the interactive possibilities of SVG. Vector maps can be automatically layered on top of any type of Google Map (road, satellite, terrain or hybrid) to bring even more usability and convenience.

Users can scroll, zoom and interact with your maps in new ways. Again, you can choose from the included library of country maps or add your own.

Using your own vector artwork provides even more choices for enhancing a map, such as displaying various landmarks and making them clickable. Visibility toggles enable users to turn various features on or off, letting them focus on what’s most important to them.

A Google Map with custom SVG artwork.

Image Maps

Interactive image maps are a great way to help users better understand a concept. Using MapSVG’s drawing tools, you can easily create clickable maps from any JPEG or PNG image – right from within WordPress. You have control over every aspect of the process, allowing for a fully custom UI.

Map functionality can also be extended with custom JavaScript and CSS. The possibilities for what you can achieve are virtually limitless.

An interactive image map.

Create Interactive Maps in Minutes

Of course, a tool is only as good as its interface. So, it’s good to know that MapSVG makes map creation quite easy and intuitive. Whether you’re working with one of the included SVG country maps or a custom image that you’ve uploaded, you’ll be up and running in no time.

As an example, I’m going to create a custom map of a place I’ve always wanted to visit – Australia. To get started, I select the map I want from the drop-down menu of included SVG maps. From there, it’s time to customize!

A new map of Australia, ready to customize

The first thing I notice is that all the regions of the map are clickable. This makes working with one of the included maps super easy. To the right, there are a number of options – including sizing, responsiveness and whether I want to allow features such as zooming, tooltips and popovers.

There’s also a menu that lets me navigate to other settings panels, where I can change the map’s colors, have a look at various regions or add custom code. Changing colors, for example, took all of a few seconds to master.

Color settings for a custom SVG map.

I also decided to add a clickable directory of the various regions, which will display on my WordPress page. Following the helpful tutorials on MapSVG’s website made this task a breeze. Within approximately five minutes, I had a customized interactive map of Australia that I can expand upon even further as I wish.

Map of Australia with directory feature.

Start Building Interactive Maps with MapSVG

Interactive maps are a tool that you can use to help increase user engagement and provide information in an easy-to-digest format. MapSVG is the only WordPress plugin you’ll ever need to create highly-customized maps that fit your exact specifications. They’re powerful, responsive and incredibly easy to build.

There’s no need to settle for anything less. Download your copy of MapSVG today and unleash the full potential of your maps.

The post MapSVG Brings Incredibly Powerful and Flexible Maps to WordPress <span class=”sponsored_text”>Sponsored</span> appeared first on Speckyboy Web Design Magazine.

20 Free Photoshop Layer Styles for Creating Beautiful Text Effects

Photoshop Layer Styles are a set of pre-configured commands that will take basic text and will quickly create typographical works of art for you. With just a single click of a button, you can apply unique layer styles to any text in Photoshop, and not only do they speed up the design process, applying these effects is just a simple case of clicking a single button, so you don’t have to be a Photoshop professional to use them.

There are many Photoshop text effect tutorials freely available, but the quickest method for creating beautiful text effects is to download one of the free Photoshop Layer Styles below.

The Photoshop Toolbox
Unlimited Downloads: 500,000+ Layer Styles, Actions, Brushes, Templates, Themes & Design Assets


Watercolour Text Effect Smart PSD

Edit the text or paste in your own design to instantly generate watercolour effects for your artwork from SpoonGraphics.

Free Photoshop Layer Styles PSD Watercolour Text Effect Smart

Photoshop Video-Game Text Style

Free Photoshop Layer Styles PSD Photoshop Video Game Text Style

Chalkboard Text Effect PSD

This free PSD template is a realistic chalk lettering text effect that will transform your text into stunning hand-written typography on a chalkboard.

Free Photoshop Layer Styles PSD Chalkboard Text Effect

Strips 3D Shadow Text Effect

With this free PSD you can add depth and a colorful effect to your plain text. All you need to do is type your text in the smart layer and save the changes.

Free Photoshop Layer Styles PSD Strips 3D Shadow Text Effect

Fancy Text Effect PSD

With this free PSD template you can convert regular text into a modern, colorful and stunning typographical style, giving you a unique and fun effect.

Free Photoshop Layer Styles PSD Fancy Text Effect

Free Stranger Things Photoshop Text Style

Following the original aesthetics of the hugely popular TV show, this free Photoshop text style captures the ambiance and the mood of Stranger Things perfectly.

Free Stranger Things Photoshop Text Style Layer PSD

American Vintage PSD Text Effect

These free Photoshop text styles perfectly embody old Hollowood movies, retro ad posters and those vintage street signs from the 1930s, 40s and 50s.

Free Photoshop Layer Styles American Vintage PSD Text Effect

Neon Text Photoshop Layer Styles

Free Photoshop Layer Neon Text Photoshop Layer Styles PSD

Free Hometown Vintage Text Effects

This free PSD template is bundled with three vintage text effects (and photo effects) that are the embodiment of good taste and simplicity.

Photoshop Layer Styles PSD Free Hometown Vintage Text Effects

Photoshop Chocolate Text Effect

Have fun with free PSD text layer template and give your text a tasty chocolate effect.

Free Photoshop Layer Styles PSD Chocolate Text Effect

Free Black Panther Text Effect

Free Photoshop Layer Styles PSD Black Panther Text Effect

Free Wall Neon Glow Text Effect

You can use the smart-object layer of this template to create your very own neon text within just a few seconds.

Free Photoshop Layer Styles PSD Wall Neon Glow Text Effect

Sandwich 3D Text Effect

With this free 3D Photoshop text effect you can add depth, as well as a sandwich texture, to your plain text. Type your text in the smart layer and save the changes.

Free Photoshop Layer Styles PSD Sandwich 3D Text Effect

Photoshop Letterpress Text Effect Template

To apply this letterpress effect, type your text and then apply the style from the styles palette. Super-simple.

Free Photoshop Layer Styles PSD Photoshop Letterpress Text Effect Template

Easy Casino Style Sign in Photoshop

Free Photoshop Layer Styles PSD Easy Casino Style Sign

Wood Chunks Free Text Style PSD

Open the smart object, type in your text, apply the changes and you will quickly have a fun wood text style typographical effect.

Free Photoshop Layer Wood Chunks Free Text Style PSD

Grunge Photoshop Layer Styles

Free Grunge Photoshop Layer Styles PSD

Yoyo Photoshop Text Effect Template

A simple, colorful and free 3D text effect, You just need to replace the preview text using the smart object.

Free Yoyo Photoshop Text Effect Template Layer Styles PSD

99 Text Effect Free PSD

Double click the smart-object layer and add your own text or graphic. You can also change the background color, text color and the 3D depth color.

Free Photoshop Layer Styles PSD 99 Text Effect

Metal Text Text Layer PSD

Free Photoshop Layer Styles PSD Metal Text Text


Browse More Free Photoshop Resources

The post 20 Free Photoshop Layer Styles for Creating Beautiful Text Effects appeared first on Speckyboy Web Design Magazine.

How to Find Out What a Client Really Needs

One of the most difficult aspects of dealing with clients can be determining what it is they want and need. Usually, the exploration phase of a project will reveal some clues. But there are times when everything provided to you is vague enough to leave some serious doubt in your mind.

That’s not an ideal situation. If you’re unsure of what a client needs, you’ll have great difficulty in building a website that serves both them and their users in the best possible way. It can also throw a major monkey-wrench in your ability to make progress.

Whether you’re dealing with someone who can’t make up their mind or just doesn’t know much about the process of developing a site, there are some things you can do to get the information you need. Let’s have a look at some ways to do just that.

Read a Client’s Cues and Expand Upon Them

When discussing a web project, you’ll undoubtedly have some pertinent questions to ask. But you won’t always get the most complete answers – at least, not right away. That’s why it’s important to provide clients with some solid follow-up questions.

To ask a good follow-up, you need to listen for those little cues in a client’s response. For instance, your initial question may be about the types of functionality they need from a WooCommerce-based store. They may respond that all the products will be set up exactly the same, but that there’s a new line of merchandise coming out that will be slightly different. The words “slightly different” are a cue that you need to explore a bit further.

If you just take them at their word without asking some relevant follow-up questions, you could be in for a major surprise later on. What is just a slight difference to them could actually mean that you need to build this site with a fundamentally different approach. So, ask them about that slight difference and see what it might mean to the project.

The goal is to ensure that you know the full scope of how everything is supposed to work. Even if you’re missing just one piece of the puzzle, it could mean having to rip things apart and start all over again.

Read a Client’s Cues and Expand Upon Them

Encourage Consistency

A website needs some level of consistency in order to be successful. Its design, content and functionality all need to come together in order provide a great user experience. That’s not to say that there can’t be some variation from page-to-page, but things shouldn’t be wildly different, either.

This is an area where some clients will really struggle. That’s somewhat ironic, as it’s one of the traits you’ll need from your client in order to do your best work.

Think of the areas where a consistent approach will play a key role in the development process. Customizing a CMS like WordPress (or the decision to use a CMS at all) calls for consistency. The very idea of a CMS is to make managing content much easier. Therefore, if a site’s content and related layouts are all over the map that makes it much harder to plan and develop for. And the more oddball exceptions you have to build in, the likelier it is that something will break down the road.

So, early on in the project (before development has even begun), it’s worthwhile to mention the importance of doing things in a somewhat consistent way. Explain that having a certain plan for building features, along with displaying and organizing content, will lead to a site that is easier to use and more cost-efficient to maintain. This is especially important for larger sites that have a lot of content.

Another benefit here is that, when a client has this picture of consistency in mind, they may just become better at articulating their needs. If they’re developing content in a similar way each time, it can lead to a less scattered strategy. Sometimes a little structure makes a big difference in quality.

Encourage Consistency

Introduce Potential Scenarios

Perhaps one of the worst things a web designer can do is to assume that they know what a client wants without having some tangible proof. While you certainly have a shot at making the right guess, you’ll more often end up with a mess on your hands when things don’t look or work as expected.

One reason that this happens is because sometimes, our lines of communication are a little too general in scope. For example, it’s one thing for a client to say that they need to export data. This provides you with a basic idea of what they want. However, it’s better to know exactly what data they’ll need, what format it should be in and how they want to access it, as it may require a more in-depth solution.

This is where you can introduce some different scenarios to your discussion. It’s a great opportunity to find out exactly what a client’s expectations are, and even help them make the right decisions early on. And the best part is that it’s not very difficult.

Sticking with the data export example, you might ask your client to walk you through exactly what they want to happen during that process. Their explanation might just lead to some follow-up questions where you’ll both develop a clearer picture of how things should work.

This puts you both on the same page, which should lead to fewer roadblocks as the project moves forward.

Introduce Potential Scenarios

Know the Individual

The most important part of assessing a client’s needs is in knowing a bit about who they are and what makes them tick. We’re all individuals with our own thoughts and ideas. And so what worked for Client A may not do the trick for Client B.

Overall, it’s about applying the tips above in a way that fits the person or people you’re working with. Doing so can streamline the entire process and provide you with the information you need to build the best website possible.

The post How to Find Out What a Client Really Needs appeared first on Speckyboy Web Design Magazine.

10 Amazing CSS Button Libraries & Collections

When you think about it, buttons are the drivers of online interaction. We use them to add products to our shopping carts, learn more about a service, confirm our decisions and submit contact forms.

In that way, a button click is sort of like the successful conclusion designers are trying to draw us to. That’s why it’s so important to choose buttons that both look great and provide obvious visual cues.

With that in mind, we’ve found a collection of CSS button libraries that you can use to drive interaction on your own web projects. Enjoy!

The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets


bttn.css – Awesome buttons for awesome projects

bttn.css is a collection of lightly-styled buttons that feature different shapes, sizes and colors. All styles can be called with simple class names. With the minified CSS file coming in at just 4kb, this library is also quite lightweight.

bttn.css - Awesome buttons for awesome projects

Buttons – A collection of CSS buttons

The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include the slightly-glassy Delta, the fun and sassy Theta, the roomy and minimal Mu and keyboard-like Phi. Be sure to check out the ultra-cool click effects in the demo.

Buttons - A collection of CSS buttons

Buttons – A CSS button library built with Sass & Compass

Not to be confused with the other library called, ahem, Buttons. This library contains simple and attractive CSS buttons in a variety of shapes. Extra goodies include icon button styles that utilize FontAwesome.

Buttons - A CSS button library built with Sass & Compass

Pushy Buttons – CSS Pressable 3D Buttons

Pushy Buttons may not be the fanciest set you’ll find, but they’re colorful and easy to spot in a crowd. Plus, they provide an oddly-satisfying bounce when clicked. In the end, isn’t that all we really need from a button?

Pushy Buttons - CSS Pressable 3D Buttons

btns.css – A small CSS button framework for both personal and commercial use

Personally, I like buttons that make use of smooth CSS transitions. btns.css does a great job with subtle color transitions on hover and even versions that will expand and contract size.

btns.css - A small CSS button framework for both personal and commercial use

Press.css – A flat, lightweight, scalable button library influenced by Google’s Material Design guidelines

Press.css provides great-looking flat buttons in whatever size, shape and color you need. With only three included effects, code size is kept to a minimum (12kb). They also work swimmingly with FontAwesome icons.

Press.css - A flat, lightweight, scalable button library influenced by Google's Material Design guidelines

CSS3 Button Hover Effects with FontAwesome

An interesting take on your traditional icon button, CSS3 Button Hover Effects with FontAwesome only reveals the icon during the hover state. Hovering on a button activates a smooth CSS transition that brings a FontAwesome icon into view – either alongside or in place of text. Part of a great CodePen collection of CSS buttons.

CSS3 Button Hover Effects with FontAwesome

Social Buttons for Bootstrap – Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome

Social Buttons for Bootstrap combine the goodness of the Bootstrap framework with FontAwesome icons. All the big social media networks are included, over 20 in all. There are classes for each network, along with classes for different sizes. Colors are made to match for each respective service.

Social Buttons for Bootstrap - Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome

beautons – A beautifully simple button toolkit

beautons is a button library that’s all about simplicity. Choose from various sizes, styles and button states. CSS classes can be combined to mix and match different styles.

beautons - A beautifully simple button toolkit

Obvious Buttons – A Bootstrap alternative between the gradient-opinionated 2.0 and the completely-flat 3.0

Built using LESS, Obvious Buttons are colorful, attractive and easy to customize. They also provide a simple animated effect when clicked.

Obvious Buttons - A Bootstrap alternative between the gradient-opinionated 2.0 and the completely-flat 3.0

Orman Clark’s Chunky 3D Web Buttons

Orman Clark’s Chunky 3D Web Buttons is not just a collection of sexy buttons. It’s also a full-blown tutorial demonstrating how they were made. So you can start with the basics and go on to add your own touches.

Orman Clark's Chunky 3D Web Buttons - The CSS3 Version

Radioactive Buttons – Create awesome looking and engaging buttons by using CSS animations

What separates Radioactive Buttons are the interesting hover effects that can be added in. For instance, hovering can result in a subtle pulsating color change (as if the button really were radioactive). This is done through looping a CSS transition a set number of times. The result is a fun, attention-grabbing button.

Radioactive Buttons - Create awesome looking and engaging buttons by using CSS animations

It’s All About Those Clicks

Buttons can often be a bit overlooked when putting together a website. After all, they generally don’t take up much screen real estate and are not the most exciting design element. Still, utilizing the right one can draw attention and encourage a click. Note how several of the libraries above use interesting hover and click effects. These types of effects can bring a bit of functional fun to buttons and improve the overall UX.

Next time you’re designing a website or working on a call-to-action (CTA), think about buttons as more than just a simple design element. Think of them as the gateway to your sites’ goals. Using one of the libraries featured above really can make a difference in your conversion rates.

The post 10 Amazing CSS Button Libraries & Collections appeared first on Speckyboy Web Design Magazine.