UX – Envato https://envato.com Design & creative inspiration Tue, 16 Jan 2018 05:40:59 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.1 https://assets.wordpress.envato-static.com/uploads/2016/08/cropped-favicon-32x32.png UX – Envato https://envato.com 32 32 A Busy Designer’s Guide to Building Websites More Efficiently with WordPress https://envato.com/blog/busy-designers-guide-building-websites-efficiently-wordpress/ Sun, 26 Nov 2017 21:10:26 +0000 https://envato.com/?p=59587 Tips and tricks for a smarter web design process.

The post A Busy Designer’s Guide to Building Websites More Efficiently with WordPress appeared first on Envato.

Image: Envato Elements

One of the great joys of being a web designer is booking a new project. You feel excited about the potential of your new journey. The process of designing the look, layout and functionality of a new website brings a creative high.

But what if you have multiple projects to work on? The reality is that most of us can’t afford to handle just one project at a time. More often, we’re forced to juggle different tasks simultaneously. It can be stressful and also drain you of creative energy.

When you have multiple projects to get done, you need to find efficiencies wherever possible. Fortunately, building websites with WordPress provides many opportunities to get things done faster without sacrificing quality (or your sanity). Here are some strategies and techniques for utilizing WordPress to create websites at peak efficiency.

Take Advantage of One-Click Installs

Installing WordPress the old-fashioned way is fairly simple, but it takes up precious time. Many web hosts now feature a one-click install that will do all the dirty work for you. Most often, you’ll find this feature in your hosting account’s control panel.

The entire process is quick and painless. Simply fill out a few fields with information such as the title of your site and desired login information. From there, the server handles the rest. No need to create a database or touch any configuration files.

Have an Unlimited Collection of Quality Themes

Starting from scratch for each new project is incredibly difficult and time-consuming. That’s why it makes sense to have a selection of quality themes on hand. Using the right theme will cover all the basics for you and get you off to a fast start. From there, you’re better able to focus on customizing things to match your vision for the project.

Image: Crispy | One & Multi Page WP

Of course, not every theme is suitable for every kind of website. Ideally you’ll want to acquire a healthy mix of both multipurpose and niche themes. That way you’ll be prepared to work on anything from a beauty salon or portfolio, all the way to a general business site.

It’s also important to have themes that are compatible with top plugins like WooCommerce, WPML and Visual Composer. You’ll get some peace of mind in knowing that the theme you’ve chosen can handle important functions like eCommerce and is able to be translated into other languages. Compatibility with a page builder plugin such as Visual Composer means that you can use it to build complex layouts in a remarkably short amount of time. The goal is to have enough flexibility to choose the best theme for your needs, rather than trying to fit a square peg into a round hole.

The rise of subscription services has made acquiring a large selection of premium WordPress themes much easier. For example, Envato Elements now has hundreds of WordPress themes included with your subscription for a flat monthly fee. So you’ll always have the perfect theme right at your fingertips.

Bonus Tip: Utilize Demo Content

Many WordPress themes include optional demo content that can be imported into your website. It provides you with a quick way to easily replicate a particular look that a theme offers. Some give you the choice of several demo types for a variety of specific uses. This can really save you some time and help when testing your site with different types of content.

Take Note of Reliable Plugins

Functionality needs differ from site to site, but it’s worthwhile to know which plugin works for a specific task. Experience is your friend here, as it will help you determine the right path.

There are also standbys that are common to just about every type of website. Think of contact forms, SEO, social media, image galleries, etc. These types of plugins are always in need.

Image: Super Interactive Maps Plugin

One challenge here is finding a reliable source for those plugins. While there are some outstanding choices available in the WordPress plugin repository, you often have to dig deep to separate the good from the bad.

You might benefit more from a subscription to a service offering premium plugins. There may be fewer options per category, but quality and consistency are much easier to find. It saves you from having to hunt around for the right plugin for things like booking appointments, creating forms or building Google Maps integration. Plus, this also allows you to try out various plugins without having to pay extra for a license.

Use Advanced Tools

Going a bit beyond the basics above, there are some more advanced options for rapidly building websites with WordPress. While they’re not for everyone, you may find that one or more of these tools makes life easier:


A command line interface for WordPress, WP-CLI lets you quickly perform tasks like installing and updating plugins – all without using a web browser. It’s particularly useful for managing multiple WordPress installations.

Automation Tools

Many busy designers and developers have turned to automation tools like Grunt and Gulp.js for greater efficiency. While they’re not solely for WordPress, they can be used alongside it to automate repetitive tasks such as updating WordPress core.

Bulk Install Plugins

If you have a standard set of plugins you install on every new website you build, Wp Favs could be a big help. It enables you to create lists of your favorite plugins that can be installed on your site with just a few clicks. Having multiple lists can serve as a way to categorize plugins based on need.

Get the Most Out of Your Time

Being busy with multiple projects is a good problem to have: It means that you’re in demand! But it takes organization and efficiency to truly thrive in this type of environment. Using WordPress combined with the tools and techniques above can help you successfully navigate your way through the process.

The post A Busy Designer’s Guide to Building Websites More Efficiently with WordPress appeared first on Envato.

Curated Collection: New Designs on Envato Elements This Month https://envato.com/blog/curated-collection-new-designs-envato-elements-month/ Fri, 24 Nov 2017 02:08:21 +0000 https://envato.com/?p=62077 So many new designs, fonts, Photoshop add-ons, WordPress themes, and more

The post Curated Collection: New Designs on Envato Elements This Month appeared first on Envato.

There’s a lot of designs on Envato Elements – it can be hard to keep track of what’s new!

We sorted through our library of 400,000+ assets to create this collection of some of our favorite recently uploaded items, including picks from our brand-new WordPress themes and plugins collection.

WordPress themes 

Ivy – Photography / Portfolio / Agency Theme

OGDEN Creative portfolio WordPress Theme

Unity – Multipurpose WordPress Theme

Franco – Elegant WooCommerce WordPress Theme

Bonfire – Creative Multipurpose WordPress Theme

Life – Boxed Portfolio WordPress Theme

WordPress plugins

LinkedIn Plus

Touchy – WordPress Mobile Menu Plugin

Apollo – Sticky Full Width HTML5 Audio Player


Ballet Ballerina Balance Posing Stretching Grace Concept

Two Women Shaping Blown Glass on the Blowpipe

Man with dog on the trip in the mountains


Merry Christmas, Christmas balls vector design

Abstract Watercolor Pattern Collection

Happy New Year Greeting 2018

Photoshop actions

Toxic Potion Glitch Effects Pack

Aesthete Collection

Celebratum 2 – Christmas Snowflakes Photoshop Action

Photoshop & Illustrator brushes

Charcoals Brushes Set for Adobe Illustrator

50 Watercolor Brushes

50 Vector Dot Brushes


Rouged Brush

Zembood Vintage

Sisterfields Script

Splasher + WhiteFill version

Graphic templates

Business Card – Gym, Fitness and Health Vertical

Business Card

3D renders

Perennial Rye-Grass

5 Pound Note

Rubber Mallet

Check out the library for recently uploaded designs and templates.

The post Curated Collection: New Designs on Envato Elements This Month appeared first on Envato.

Figma: How It’s Changing the Way We Collaborate in Design https://envato.com/blog/figma-changing-way-collaborate-design/ Wed, 08 Nov 2017 21:39:40 +0000 https://envato.com/?p=59575 Improving collaboration and efficiency throughout the design process

The post Figma: How It’s Changing the Way We Collaborate in Design appeared first on Envato.


Source: Figma Design

Figma is a vector application which allows you to design, prototype, and feedback. The product contains many features to improve collaboration. These include team libraries, developer handoff, real-time collaboration, and cross-platform compatibility. This combination of features and accessibility has lead to increasing adoption of Figma. One of Figma’s primary targets is designers working within teams. It’s having a significant impact on the way we design and empowering other individuals to contribute to the design phase of a project. We’re going to look at the different ways Figma is changing the landscape in terms of how we collaborate.

Team Libraries

Team Libraries is a feature similar to that launched by Sketch recently. It enables designers to produce components which can then be shared across a team inside Figma. For other members of the team, they can then pull these components into a design file at any point. This increases efficiency while also ensuring consistency of design elements across documents. If the designer or designers wish to update a library component, they can do so just once. It will then push these changes to all files containing the component. The team member working on this document will then be notified of the update.

Source: Figma Design

Once the primary design elements such as buttons are defined, the impact on workflow is impressive. New screens and mockups can be produced quickly and with ease. No time is wasted recreating elements or copying updates from another file. Everything is kept up to date in real-time and there are no backward steps as with traditional design softwares.

Creating a design system with Figma is particularly useful when working with multiple designers or alongside other teams. In these cases it’s incredibly easy to lose sight of design changes. Over time it can lead to gross inconsistencies between design files and hurt your final product output. Not to mention the mess it can contribute to on the development side.

Top companies like Microsoft, Uber, and Slack are using Figma for its collaborative features such as Team Libraries. These companies are renowned for establishing some of the most high quality design language and systems. It offers an insight into how Figma can work across teams, even at some of the world’s largest technology firms.

Developer Handoff

In the product design industry, collaboration with developers is an integral part of the build process. If it’s easy for developers and engineers to work with a design file, the end product will be more representative of the original design. Figma has a specific tab which is titled ‘Code’. From here, they can inspect, export, and copy CSS, iOS, and Android code. It speeds up their workflow considerably. It also ensures that your carefully-defined styles are reproduced with accuracy.

Source: Figma Design

The prototyping feature inside Figma also aids the handoff process to developers. Designers can link elements and screens to produce a comprehensive interactive mockup. This helps communicate the flow and transitions to developers. It can reduce the typical back and forth as it’s attempted to be explained via text or phone.

Real-time Collaboration

Figma’s real-time collaboration is an impressive feat of modern computer engineering. It allows multiple team members to work on a design file at once. All the while, the application remains quick and snappy as a result of its web-based architecture.

It’s not just designers who can collaborate in this manner. You can have team members ranging from developers to marketers, all working on the file in real-time. This is all possible without having to worry about your original design files being disrupted in any way. Along with the version history which Figma stores, it’s also possible to enable advanced permissions. You can set a team member the ability to only edit text components when you give them access to the Figma. This is especially useful for marketers and copywriters who can work on the written aspect of the designs.

Source: Figma

Features like this are making the design process not just more efficient, but more inclusive too. As collaboration is aligned and improved, the end product will also improve.

Cross-platform Compatibility

A sticking point for many potential instances of collaboration is cross-platform compatibility. Take Sketch, for example. It’s a Mac-only product. This means it instantly excludes any team members from the process who uses Windows, Linux, or Chrome OS. This restriction inhibits the important aspect of collaboration. A large number of developers and marketers use these operating systems as their daily driver. The exclusion of support for them makes the design process much less open.

Source: Figma

Figma supports Mac, Windows, Linux, and Chrome OS. It’s also accessible via the Chrome browser. This means collaborators are not required to download or install the application. This is particularly useful in traditional workplaces, educational institutions, and public spaces. In these circumstances, new applications are often not allowed to be installed.

It’s not just cross-platform compatibility that can be an excluding factor. Other aspects such as cost can contribute to this. Someone wishing to collaborate via Adobe Photoshop or Illustrator would be set back around $25/month. A Sketch licence would cost $99, and an Affinity Designer licence around $60. Figma is not excluded from this issue but does offer an ongoing cost as opposed to a one-off fee. This costs $15/month/user but allows collaborators to rescind their licence when no longer required.


Feedback is a crucial aspect of collaboration and working within a team. Most designers use a tool like Marvel or InVision to source feedback. The issue here is the designs must be uploaded or synced first. This process has been refined for Sketch and Photoshop users with the release of plugins. However, it is still not perfect and InVision in particular is known to be sluggish with large projects. Put simply, it’s another step which requires another payment payment plan and login. Not to mention the process of organising image files and managing users and invites.

Source: Figma

Figma incorporates this into its application. Users can feedback directly onto the design and discuss changes, ideas, and additions. This eliminates the need for a secondary tool and allows you to spend more time designing as opposed to managing a feedback platform. It also integrates with Slack. This allows team members to collaborate just by signing in with their Slack login. It also pushes configurable comment notifications to Slack so team members can review and respond to them.

Figma is building an all-in-one tool which encompasses the entirety of the product design process. It’s eliminating third-party tools like Zeplin and InVision. These were previously a necessity for developer handoff and feedback. The design process is more collaboration-based than ever before. The benefits of using a tool based around this are becoming apparent to design-driven firms.

Start collaborating with Figma by importing premium Sketch design assets.

The post Figma: How It’s Changing the Way We Collaborate in Design appeared first on Envato.

A Beginner’s Guide to Sketch https://envato.com/blog/beginners-guide-sketch/ Mon, 28 Aug 2017 10:31:44 +0000 https://envato.com/?p=57341 Since its inception in 2008 it has grown considerably, both in terms of users and as a product.

The post A Beginner’s Guide to Sketch appeared first on Envato.

Woman designer using computer by vadymvdrobot

It’s an exciting time for the design industry. More and more high quality tools and software are making their way to market and competing with the large industry names like Adobe Creative Cloud. One of these tools is Sketch by Bohemian, a professional digital design package for Mac. Since its inception in 2008 it has grown considerably, both in terms of users and as a product. It’s won an Apple Design Award, been rated 4.5 stars by DigitalArts, and been named App of the Year at the .net awards. It was even featured in Apple’s most recent keynote presentation.

As Sketch continues to disrupt the conventional design software industry, it’s important to consider it as a potential option for your primary or secondary design tool. In this article we are going to outline the following:

  • What is Sketch?
  • Who uses it?
  • Where can I find Sketch resources?
  • Where can I find Sketch courses and learning resources?

This beginner’s guide should help you obtain an understanding of whether Sketch is the right tool for you and give you some pointers for getting started with it.

What is Sketch?

‘Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package.’

First of all, Sketch is entirely vector. This meaning that if you design an app or website, you can easily scale it up or down in resolution without losing any quality. This differs from Photoshop, a predominantly raster-based program which is more focused on set artboard dimensions.

Complementary to the vector aspect is the ability to enable resizing. Take a responsive website, for example. By anchoring the logo to the left, and the navigation to the right, you are then able to resize the artboard and see exactly how it would work as a completed responsive website. It’s important to discuss the vector aspect as it is a significant benefit over more traditional softwares, especially in today’s environment which relies heavily on designs scaling and adapting to different resolutions and devices.

Another significant feature of Sketch is something called Symbols. These are groups of elements. You can change an aspect of one of the groups, and rest of the groups will also change simultaneously.

An example would be designing a website with 30 different pages. The client has contacted you and asked to change the logo to a different color. By using a Symbol for the logo you only have to change the color of one. The other 29 will update simultaneously. It’s incredibly useful when used throughout your designs and can save a considerable amount of time throughout the design process.

Styles act in a similar way to Symbols. You can define styles for elements such as buttons. Then when you create a new button this style can then be applied to it in just one click. Want to change the border color of every button in your design? Style have you covered and allow you to do so in a matter of seconds. It’s extremely helpful in maintaining consistency throughout your designs.

The final feature I want to outline is export settings. Often a tedious process, exporting your designs and assets is simple and easy with Sketch. You can export multiple slices and artboards at once, each with different scales (e.g. @2x) and file types. To see just how simple it is, watch the video below:

This outlines just some of the main features that Sketch offers. There are a wide range of other great features outlined on their website – definitely worth a look if you are interested in learning more.

Who uses it?

Given Sketch’s focus around vector and resizing functionality, it makes it a great choice for UI, UX, product, web, and mobile designers. The vector boolean operations (union, subtract, intersect, exclude) and export settings also make it a pleasure to use for icon design. In summary, it is a definite primary option for any designers working with web or mobile, and certainly also a viable option for icon designers too.

To give an idea of the type and scale of some top companies using Sketch, see the section below featured on their website.

Companies like Apple, Google, Dropbox, and Twitch are listed amongst other top brands.

Sketch would not be so appropriate for designers working with great amounts of photo editing, or illustrators who need more specific features such as live paint or custom strokes. Despite this, many designers find Sketch useful as a complimentary design tool. With its rise to prominence, there’s a great likelihood that you will someday be sent a .sketch file type and so having it in your suite of design tools may be worthwhile.

Where can I find Sketch resources?

One of the primary pull factors of Sketch is its complementary market of resources. There are a vast quantity of high quality plugins and design files, both free and premium. Sketch has a great collection of the top plugins listed here. For free design resources, Sketchappsources is an excellent site with thousands of files available for commercial use. For more advanced, premium resources, Envato Elements has an excellent library of high quality templates available for download.

As well as this, Sketch’s vector functionality handles SVG icons brilliantly. Apps such as The Noun Project integrate with Sketch to provide your designs with icons and vectors quickly and easily.

Below are a selection of hand-picked Sketch resources to get you started.

HERO Google Pixel Mockups

These Google Pixel Mockups are perfect for presenting your Android designs in a portfolio or on sites such as Dribbble. The well organised layers and groups make it perfect for a Sketch beginner. If you find yourself confused with the Sketch version you can simply switch back and to between this and the included Photoshop version.

Business One Page Web Template

This stunning one page web template is great example for what can be achieved in Sketch. It uses a wide range of layer effects and styles, making it perfect to play around with if you are just beginning to learn how Sketch works.

Boon – Gift Card Mobile App Kit

For mobile designers, this app kit is a beautiful resource for basing your first app design upon in Sketch. It uses complex gradients and subtle layer effects to create a unique visual style.

Where can I find Sketch courses and learning resources?

There is a great community behind Sketch and lots of designers who have been kind enough to share their knowledge and expertise with others in the design industry. As a user of Sketch myself, I know how daunting the switch can be from a software like Photoshop. I’d used Photoshop for around seven years prior and so the courses and learning resources were invaluable when transitioning across.

I’ve split my favourite courses and learning resources into a few categories below. Give some of them a try and see how you get on. If you ever get stuck with Sketch, know that their support team is exemplary and they will help you as much as they possibly can.

Getting started

Sketch Official Guide

Up and Running With Sketch Course from Envato Tuts+

Getting Started with Sketch from Megumi

Helpful Guide To Getting Started With Sketch on Medium

The Ultimate Guide to Getting Started In Sketch (With Free 99-Point Cheat Sheet) from TryDesignLab

App design

Designing an iOS App in Sketch from Speckyboy

Food App UI • Sketchapp Tutorial / Sketch 4 Tutorial on YouTube

Build a news reader app from Sketch to the App Store from DesignCode

 A Step-by-Step Guide for Starting a New App Design Project in Sketch on Medium

Designing an iOS Fitness Application with Apple Watch Compatibility from Envato Tuts+

Web design

Using Sketch to Design Beautiful WordPress Websites from wpmudev.org

How To Design A Web Template In Sketch App from PixelHint

Hopefully this guide has helped you understand a little more about Sketch and allowed you to determine whether it is a good fit for your area of design.

Browse Sketch-compatible templates in our library.

The post A Beginner’s Guide to Sketch appeared first on Envato.

Using Directional Cues in Web Design to Improve UX https://envato.com/blog/use-directional-cues-web-design-improve-users-ux/ Wed, 16 Aug 2017 10:25:31 +0000 https://envato.com/?p=57142 Use directional cues in web design to improve your users’ UX If we had to define the common struggle of all web designers, it would be: is there a way to improve user experience? User experience has become the central part of every design project since designers have to ensure users will follow their cues: […]

The post Using Directional Cues in Web Design to Improve UX appeared first on Envato.

Manhattan looking up by dibrova

Use directional cues in web design to improve your users’ UX

If we had to define the common struggle of all web designers, it would be: is there a way to improve user experience?

User experience has become the central part of every design project since designers have to ensure users will follow their cues: read the content; perform the action; click the call to action. Otherwise, websites would be absolutely useless.

Provide the best experience you can

You have to plan the user experience in advance since it is the essential factor for the success of your design.

The hunt for functional solutions doesn’t finish once the site is ready. It goes on improving, and trying to predict answers to all questions that may arise in future.

Well-executed user experience is what distinguishes great websites from the rest. You’ve probably witnessed it yourself: some websites are quite easy and straightforward to use; while others make it too complicated to find what you’re looking for.

Honestly, designing user experience is not fast, but it is worth to invest time in trying to make a user-friendly environment which will inspire conversions.

Sounds confusing, but there are many tricks and best practices to consider making your design work flawlessly.

The way the two guys are positioned makes you look in the center of the page.

The most recommended trick is to improve UX with directional cues.

These cues are an important part of the overall user experience, which might seem difficult to notice at first site, but they’re the basics of your website’s functionality.

For example, you can use a background photo with people looking in a certain direction. This is where you’ll place your core message and CTA.

What are directional cues in web design?

A directional cue is not a particular item – it’s a role which can be performed by almost every element on your site, thanks to shape and size variations.

Therefore, you have directional cues which are explicit and obvious; and such which are less visible.

Arrow on the left of the secondary CTA “Watch the video”

Here are some of the web elements which can act as explicit directional cues:

  • Pointers (arrows, finger pointers)
  • Calls to action buttons (direction providers)
  • Curves
  • Lines

How can directional cues improve user experience and maximize conversions?

Believe it or not, conversion opportunities ‘hide’ in the first impression you’ve tried to create for your users.

You need to use this ‘first encounter’ to direct users towards booking, reading, or purchasing.

A flawless visual hierarchy: Large tagline, followed by good copy and the CTA.

Boosting conversions is the dream of every website, and it is such a powerful concept that it redirected design’s efforts from great visual appearances to usability and functionality.

Why would users follow your directional cues?

Directional cues are beneficial for the site’s owner because they boost conversions and they improve the user experience.

IFTTT has never been shy about their buttons.

However, how could users be motivated to follow the directional cues? You should include copy near the directional cues that will tell them why they should click on a button and what they should expect after that.

People don’t like to waste time or to perform actions whose result they cannot predict. This is why you as a designer should never overlook directional cues. As we already pointed out, directional cues can enhance the experience; and they can lead you to better conversion rates.

Lattice placed their CTA right near the people illustration

Your users already have a purpose when visiting your site. You should design the page in a way that will help them accomplish that goal. Create a workflow that is easy for them to understand and use.

A user who accomplished their aim and is satisfied by their experience is likely to return and to recommend your website.

Users care about their experience because they’ve awarded you with the most expensive thing they have: their trust and time. Employing directional cues is the best tactic for improving their experience, and to avoid misuse and misinterpretations.

Make things easy for the visitors

Let them find what they came for, and then give them a reason to come back.

Keep the cues clear – introduce familiar elements, such as arrows, finger points, or other pathways which leave no space for confusion. Usually, these cues are placed in your website’s header, where the CTA is as well. However, this doesn’t mean that you should create limits for your layout.

Since a lot of designers and marketers place the CTA below the fold, directional cues work well there as well.

Opendoor makes it easy for its visitors by placing an arrow to direct its users

Choose such cues that can be clearly associated with the aim you’re trying to achieve. For instance, if you want to obtain more direct bookings, employ a functional and accessible search button.

The art of directional cues can be really adopted by observing direct marketers and their sale campaigns. They are certainly the ones who rely most on visual guidelines, in order to motivate people to take action and to buy their products.

You need to develop an agenda for communicating with users, and you need to provide clear guidelines for the actions you want them to perform.

Standardized forms, such as ‘go’, or ‘subscribe for more information’ are efficient, but visual cues with minimal text are significantly better.

How to use colors as directional cues

Everhour uses an accent color only on its CTA

It may sound difficult to believe, but your color palette is one of the most powerful tools which could improve user experience and the way how people interact with your product.

You need to understand their psychological effect and to make a color scheme that can trigger action or motivate conversions. Consequently, the revenue of your business and your profit will increase. Isn’t that exactly what you wanted?

Provide a ‘proof of quality’ to your customers

Stripe’s layout contains the tagline and the CTA inside the colorful header illustration

The same as purchasing a service from a physical store, customers would appreciate seeing your performance before opting for your offer. You could use feedbacks, videos, or testimonials to convince users they’re making the right choice. Your legitimacy and the trust people invest in you is your biggest asset for boosting conversion rates.

Stripe, shown in the image above, mentions that they handle billions of dollars every year for forward-thinking businesses around the world. If that isn’t trustworthy, I don’t know what is.

Remember there will be many users on your website who have absolutely no clue what your activity is about.

You need to provide them with all necessary information and clear directions toward quality previews so that they’ll have no second thought on whether to accept your offer.

Evernote makes a summary of what you could be getting from them

People say eyes are the window to the human soul, and that’s exactly what directional cues are to the website. Users need your messages, images, or videos in order to estimate whether you’re worthy of their attention.

Even the tiniest cues, such as pointers or gestures can be powerful directional cues. Once users are there, you have to use every opportunity to make them stay on the website.

Final thoughts

All of the arrows, curves or images you use to attract attention are not just unnecessary clutter. They’re more powerful than you think, and it is likely that your conversion success will depend on them. Nowadays, a designer’s knowledge doesn’t consist of creating beauty; but something that is really useful and it eases user experience.

Be brave and take directions personally! They are not just instructions that tell users what to do – orders can be drawbacks for your users, but hints and motivating items look natural, and they are less pushy. Therefore, make use of all tools that you have and enhance the user experience.

By providing excellent user experience, you’re motivating users to take action; and you’re improving your conversion rates. Directional cues are essential for every design project.

Related reading:

The post Using Directional Cues in Web Design to Improve UX appeared first on Envato.

A Checklist for Creating the Best User Onboarding Experience https://envato.com/blog/checklist-creating-best-user-onboarding-experience/ Fri, 11 Aug 2017 10:04:57 +0000 https://envato.com/?p=56719 User onboarding is a vital element of any web-based service.

The post A Checklist for Creating the Best User Onboarding Experience appeared first on Envato.

Red balloon in the sky by goinyk

User onboarding is a vital element of any web-based service. By getting users to this stage, it means they have decided that the service as described on the landing page is worth their time to try out.

Therefore, the importance of effectively bridging this gap between landing page and using the product or service cannot be underestimated. Frustration or difficulty in the onboarding phase can lead to potential customers giving up or even trying a competitor instead.

Many companies fail to create an optimal – or even satisfactory – onboarding experience, allowing countless customers to leave before even trying the service. In an era where users can easily let their dissatisfaction be known to thousands of others, the negative implications of such can be extremely damaging to a brand and its reputation. For users who do still complete the onboarding, their very first interaction with the product or service is a negative one, and it leaves a lot to be rectified before they are to recommend or positively rate the service.

User experience is at the heart of any great onboarding flow, along with other criteria such as a carry-through of brand elements. In this article, we are going to outline and discuss a definitive checklist for creating the best user onboarding experience for your web-based product or service.

☑ What happens if the user makes an error?

☑ How can the interface be kept simple for the user?

☑ What happens if the user accesses the onboarding via different browsers and devices?

☑ What happens if the user wants to sign up quickly?

☑ What happens if the user doesn’t want to complete all the steps?

☑ What happens after completion of the onboarding?

☑ How can copy be kept understandable for the user?

☑ How can users be assisted when they don’t understand an input or option?

☑ How can branding consistency be ensured?

☑ How can I use onboarding to impress and differentiate from competition?

What happens if the user makes an error?

Image: Shopify

When a user inputs a value which serves up an error, it is extremely important that the following is applied:

  • Clear and concise description of the error with detail on how to rectify
  • Use of icons and/or text, as well as color, to communicate the error state to colorblind users
  • Pre-select the error field so users can quickly re-input a value without navigating back to the field
  • Store the inputted value to prevent the user from having to re-enter when only one or two characters are invalid or absent

How can the interface be kept simple for the user?

Image: Academia

Avoid designing steps which contain too many inputs or options. Group each section into a step with adequate back and next navigation options. The fewer inputs and options there are, the easier it is for the user to digest. This serves not to overload them with too many options and unrelated steps at once, decreasing the chance of them becoming overwhelmed and giving up mid-way through the onboarding.

What happens if the user accesses the onboarding via different browsers and devices?

Image by halfpoint

It goes without saying, the web user onboarding experience should be consistent in its user experience across browsers and devices, both new and old. One of the worst onboarding experiences is to have to switch browser or use a desktop computer instead of a mobile device. Ensure your onboarding works across as many browsers and devices as possible. If you are having trouble in doing so, your onboarding may be overly complicated. As a last resort, and potentially for very old browsers, warn users that there may be difficulties before they start the process and to switch browsers. Being upfront will save them a great deal of time and frustration.

What happens if the user wants to sign up quickly?

Image: Airbnb

The integration of one-click sign ups through social accounts is an optimal user experience for most web services. While not applicable to all instances, social integration for sign up can significantly increase onboarding completion through its ease of use and security. It also serves as an easy way for the user to log back in after onboarding completion.

The disadvantage for users is when they are bombarded with steps after their details have been collected via their social media account. Be sure not to take advantage of this by keeping any surplus steps to a minimum with options to skip any that are not vital.

What happens if the user doesn’t want to complete all the steps?

Image: Airbnb

Allowing users to fill in certain information after completion of the onboarding can be extremely beneficial. It streamlines the process and appreciates that the user may prefer to fill in extra details at a more convenient time. It also gives the user a chance to effectively trial the service before committing to sharing more intricate details.

In a phase where awareness surrounding privacy and data handling is at an all-time high, users may be skeptical to share too much information up front. It is preferable to first allow them to trial the product and build up a level of trust through good design and onboarding.

What happens after completion of the onboarding?

Image: Discord app

The onboarding is not concluded upon obtaining all the user information and selections. The subsequent stage is then to explain to the user how to get started. A simple dismissable modal with two or three steps will often suffice in educating the user before they begin using the product.

Image: Discord app

A tooltip tutorial can also be used, however these can feel more of a nuisance to dismiss for users who do not want their assistance and therefore should be implemented carefully with this in mind.

How can copy be kept understandable for the user?

Image: Atlassian

The language and conciseness of step titles, descriptions, and error messages, is an often underrated aspect of a great user onboarding flow. By using short titles and descriptions, the visual noise and information is significantly reduced. This makes it easy to digest at a glance and emphasises the fields and inputs themselves.

Simple language makes the information more accessible, particularly to those of whom are not native English-speaking, and those whose vocabulary is not familiar with more specialist or technical words such as ‘onboarding’ or ‘JSON’.

How can users be assisted when they don’t understand an input or option?

Image: dribbble

Microcopy is the text that sits below a field, or behind an information icon or link. Simply put, it is an added layer of explanation if a user requires further understanding on how or what to enter into an input. It reduces confusion and should prevent any input becoming a sticking point at any stage. It’s important to keep this small and secondary, hence the name, but readily accessible should a user need an extra pointer during the onboarding experience.

How can branding consistency be ensured?

Image: Google

Less focused around usability, the carry-through of branding elements is still an important aspect of a great user onboarding experience. It conveys a sense of familiarity and trust when users are inputting sensitive and encrypted data. In a time where scam sites and phishing attacks are routinely frequenting the news, the more comfortable the user can be in doing so, the better.

How can I use onboarding to impress and differentiate from competition?

Image: Lookback.io

Design is as significant a differentiator as it has ever been. Companies are realising the importance of great design, both on a usability level, but also on an emotional level. The user needs to be impressed by the design: the typography, colors, user interface elements, and iconography. Now, more than ever, it’s an expectation and users want to be wowed with the consistency and creativity of the onboarding. This means going the extra mile with subtle animations and interactions, delightful illustrations which serve to explain each step, and any other details that can positively impress upon a user.

By following this checklist, you should be able to create a great user onboarding experience for your product or service, and give it the best chance possible at converting new users and subsequently retaining those users. Like many other aspects of designing for users, it is important to test onboarding flows and listen closely to any user feedback. It is an area that can constantly be improved and simplified, and differing approaches based on this checklist will be more effective for one web service and its users than the next.

Tip: start your web product with a pre-built dashboard with integrated, customizable onboarding.

The post A Checklist for Creating the Best User Onboarding Experience appeared first on Envato.

How Design Simplicity Improves UX https://envato.com/blog/future-design-simplicity/ https://envato.com/blog/future-design-simplicity/#comments Thu, 03 Aug 2017 22:26:13 +0000 https://envato.com/?p=50359 The future of design is simple.

The post How Design Simplicity Improves UX appeared first on Envato.

Image: Simple Line Handdrawn Patterns by Youandigraphics

Design trends come and go but great design is always easy to recognize. Print work that catches your eye and naturally intuitive interfaces will always be in demand.

But how you create these products can change based on each project’s needs and the current design trends. Right now we see a big push towards minimalism on mobile and web interfaces. These minimalist layouts focus on simplicity and user experience over glossy icons and 3D gradients.

But what does this shift look like? And how can designers create simple interfaces that also work well for each project? I’d like to share my thoughts on the matter along with some examples and tips for the future.

How Simplicity Improves UX

A great user experience doesn’t require simple aesthetics. It does require clarity and user intention, but the design can follow any style and still work well.

The big push behind minimalism is that it’s easy for any designer regardless of skillset to create create amazing interfaces. You don’t need to master repeating textures, custom text effects, or detailed icons to make a simple interface that serves the user.

But this doesn’t mean icons and patterns can’t improve a design. Rather these should enhance the design and be used as extras to draw the user’s eye through the page.

Spark template.

Take a look at the Spark template and how it uses minimalism. It has a very simple color scheme, no gradients, and the vector illustration in the header is completely flat.

Many of the inner pages are also full of custom icon designs. But they all rely on simplicity to blend naturally into the design.

If users aren’t distracted by shiny graphics and overly-detailed typography they’ll be more invested in the content. This should be your ultimate goal to keep visitors engaged with the site and easily navigating their way through pages.

By focusing on simplicity first you’ll have a much easier time planning navigation text, placement, and page hierarchy to improve the overall experience. This will always be more important than aesthetics and more designers are coming around to this fact.

The Growth of Material Design

Google’s release of material design was a game changer for web and mobile app designers. This visual library came with guidelines and best practices for creating interfaces that focused on the user experience rather than pretty aesthetics.

Google’s introduction to material design.

And this move towards raw minimalism has been hastened through material design. Google even has their own Google Design page full of tips and resources for designers.

Material design pushes the idea that great design should be intentional with the user experience in mind at all times. Minimalism just makes this process easier by laying down rules and guidelines for the most common interface elements.

Take a look at the Fugiat mockup which relies solely on material design principles.

Fugiat, a design mockup with material design principles.

This seems like a very minimalist design but it does have accentuated features. The call to action buttons are vibrant yet not strong enough to overtake the whole page. The color scheme matches with material color palettes and they even use the layered drop shadow effect.

It’s common to conflate material design with flat design because both interfaces move away from textures and gradients. But Google actually recommends using depth and visual hierarchy with drop shadows to create designs that mimic real behaviors.

This idea is still very new but it’s a unique way of looking at digital design which is inherently made for a flat viewing surface.

Regardless there’s no getting around the fact that Google’s material design paved the way for modern user-focused minimalist design trends.

Simple Design Elements

Every design project whether print or digital has its own series of elements. These can be typefaces, icons, or effects used to accentuate the page.

With minimalism quickly becoming the norm these basic design elements are following suit. Most design projects take advantage of minimalist typography like the Ridley Font. Or instead of using a textured background the designer might go with a geometric pattern repeating over a solid color.

Simple Line Geometric Patterns by Youandigraphics

These might seem like accessories to the overall design, but the little things add up fast.

These minor accessories actually make the design what it is and really round out the minimalist features.

If you want to design for simplicity then make sure it permeates your entire design. Fonts, icons, colors, and patterns should all feel very simple and approachable. This makes the technical design work a lot easier so you can put more effort into the user experience.

Future Trends in Simplicity

It’s hard to predict the future and nobody can do it with complete accuracy. But based on current trends I think future designers will latch onto minimalism and simple design aesthetics for the sake of improved user experience.

We can already see the flat design trend in iOS app interfaces and iOS icons. With Google’s adoption of material design this is likely the future of Android app UIs too.


The web is a different beast altogether but it follows closely with other design trends.

Do I think every website should be flat and simple? No of course not. Different ideas work better with different projects and diversity only improves the design world.

But there’s something to be said about minimalism and flat design because these styles help designers focus on the experience first. It’s easy to get lost creating beautifully polished icons and vectors, and in the process you can lose sight of the bigger picture.

So the future may hold a lot of simpler designs and minimalist interfaces. But it also holds a much greater focus on great user experience using flat/material design as a visual language for each project.

This is true of typography and web/mobile mockups along with all other related design elements.


And since minimalism is so easy to create, it won’t take as much time to polish an interface. Designers can focus more on the experience and put their energy towards creating an interface that’s intuitive and easy to use.

Wrapping Up

Whether you’re an experienced designer or just getting into the industry you can look forward to a lot of minimalist design work. The best projects understand which aesthetics work best and implement a great user experience around those design ideas.

But if you’re ever struggling with an idea then minimalism is usually a safe bet. It keeps users engaged with the interface and places focus right where it belongs: on the content.

And it’s for this reason I think minimalism and simplicity will usher in a new era of user-focused design for every single project. Instead of designers obsessing over aesthetics they can instead focus on content, engagement, and the overall user experience for every project.

If you’re looking for a new web design, check out these simple free WordPress themes

This article was originally published in November 2016. 

The post How Design Simplicity Improves UX appeared first on Envato.

https://envato.com/blog/future-design-simplicity/feed/ 1
How to Learn UX Design https://envato.com/blog/learn-ux-design/ Wed, 05 Jul 2017 12:38:33 +0000 https://envato.com/?p=56096 Understand the user-centered design process with these tutorials.

The post How to Learn UX Design appeared first on Envato.

User experience, commonly referred to as “UX”, describes anything to do with a user’s interaction with a product such as a website, web app, mobile app, even a company itself. A UX designer, therefore, designs those experiences.

As a discipline UX design has exploded over the past few years; more and more organizations are opening their eyes to the fact that the success of a product relies on understanding its users. In-house teams are branching out and including UX professionals among their ranks, and UX consultants are being employed to train web professionals of all types (after all, UX touches every aspect of what designers, developers, and managers do). Whether you’re new to the industry and are keen to become a UX designer, or you’re a designer, or developer, and would like a better appreciation of how UX can improve what you do, now is the perfect time to jump in and educate yourself.

So how do you go about learning UX design? The following steps and tutorials will get you started!

Step 1: Understand What UX Actually Is

There’s a fair amount of confusion around what is and what isn’t UX design, so begin by making sure you’re clear on the subject.

Step 2: Learn to Empathize

We talk a lot about “empathy” and understanding users’ needs, but who exactly are those users? Answer: they are many and they are varied. They are people of all ages, from all across the globe, with differing motivations, abilities, situations and perspectives. Truly understanding all of them is no mean feat.

And let’s not forget about the stakeholders; they have needs too. It’s no good tailoring everything for the users’ needs if you haven’t considered the business goals.

Step 3: Recognize the User-Centered Design Process

Different individuals might use slightly differing stages in their process, but one thing always holds true: UX design doesn’t end when the product is shipped. It’s a process of researching (discovery), collecting data, forming hypotheses, applying and repeating. Over the years various methodologies have emerged (you may have heard the terms “waterfall”, “agile” and “lean”) so it’s a good idea to understand these approaches.

Whichever workflow is used, at any given point decisions are made with the users in mind. This is true of the first stages in the process and continues right throughout a product’s life, well beyond its first launch.

Step 4: Make Research Your Best Friend

Research is perhaps the most important stage in any design process, and yet the one voted “most likely to be ignored” by its highschool classmates. Researching is crucial. Do it.

Step 5: Acquaint Yourself With Deliverables

The term “deliverables” refers to the design artifacts handed over by UX designers. These may be wireframes, personas, customer journey maps, prototypes, and they can be delivered at any point during the UX design process.

Supporters of a “lean” approach to UX design will argue that deliverables weigh the process down in paperwork, ultimately at the expense of the final experience. Whether you use them or not, they’re an important part of many UX designers’ workflows.

Step 6: Fill Your Toolbox

So you understand what UX is, the UX designer’s process, now let’s talk about the tools a UX Designer uses on a daily basis.

Go Forth and Learn!

There they are: 18 tutorials and articles to help you on your way to becoming a UX designer. Let us know in the comments if you have any unanswered questions and don’t forget to check back for more learning guides in the future!

The post How to Learn UX Design appeared first on Envato.

8 Tips for Improving Accessibility for Your Web Designs https://envato.com/blog/8-tips-improving-accessibility-web-designs/ https://envato.com/blog/8-tips-improving-accessibility-web-designs/#respond Tue, 21 Mar 2017 09:43:30 +0000 https://envato.com/?p=52638 Web accessibility is a key component that is perhaps the most important aspect of modern web design.

The post 8 Tips for Improving Accessibility for Your Web Designs appeared first on Envato.

Web accessibility is a key component that is perhaps the most important aspect of modern web design. Without applying proper consideration during the design process, certain people can be excluded from using your website easily, or even at all. Below, we will be discussing some quick and easy tips that you can implement into your designs to ensure all users have equal access to your website and its content and functionality.

1. Always include Alt tags for images

This is especially important as it allows screen readers to provide a visual description of the image when the user is unable to view it. The description should be concise but descriptive.


<img src= “tropical.png” alt= “Palm trees with the sea and sunset behind”>

2. Use H tags consistently and appropriately

The structure of H tags should be consistent throughout your designs. Page titles should typically use a H1 tag, headings a H2 tag, subheadings a H3 tag, and minor subheadings a H4 tag. This allows a screen reader or other assistive technology to effectively and accurately convey the hierarchy of the content to the user.

3. Design easy-to-use web forms

There are three main points to consider when designing a web form.

The first is to structure forms intuitively. Keep them simple, generic, and consistent with standard form flows.

The second is always including labels with each and every field. A common mistake can be to include labels in the placeholder section of a field. This, however, will likely not be picked up by a screen reader and can lead to confusion and issues for the user. Be sure to place the label outside but near to the field, and use the placeholder section to provide further cues such as example content. Also remember to always include visual cues such as asterisks alongside required inputs.

The final point is to include a large and prominent button below the fields with a descriptive label for the action to be committed. A typical form action button would use a label such as ‘Submit’ or ‘Post’.

4. Use larger font sizes for body text

The default browser font size is set at 16px, or 1em. Try to stick to this for content where the design will allow. People with good eyesight will typically have no trouble reading 11px, 12px, or 13px text, but it can very quickly restrict users with poorer eyesight from reading your content easily or even at all. This is great practice, easy to implement, and will instantly make your web designs more accessible.

5. Implement high contrast colors

The most common issue with contrast is using tones of grey which are too light for many users to read with ease. Practice picking high contrast colors for text and buttons. Use this tool by WebAIM to measure contrast in your designs.

6. Avoid ‘Click here’ links

Using ‘Click here’ as link text poses difficulties for all users, particularly those using screen readers. Always ensure links are descriptive and unambiguous.

7. Don’t rely solely on color for visual feedback

For field error states, sites often only convey the error through color feedback, such as red outlines or red text. This can make it hard for colorblind users to understand the error. As such, it’s important to provide other visual cues, such as error descriptions below the field, and/or appropriate use of icons.

This example is a well executed and accessible error state which provides three different forms of visual feedback: color, iconography, and a descriptive error message.

8. Include focus states for all input fields

This is a key visual indicator, particularly for users who are accessing your website solely with a keyboard. Without a focus state, keyboard users will have no visual indication of their position as they press the Tab key to navigate down the page.

This functionality is included by default in browsers, but CSS resets can often remove them in the belief that they will be replaced with something better. Ensure you test this particular use case on your website.

These are just a few tips to help you improve accessibility in your web designs, and take a step towards building a more inclusive web environment. Hopefully this gets you started with accessibility and is something you consider in the foremost phase of your next web design project.

The post 8 Tips for Improving Accessibility for Your Web Designs appeared first on Envato.

https://envato.com/blog/8-tips-improving-accessibility-web-designs/feed/ 0
10 Inspiring Design Conferences to Attend in 2017 https://envato.com/blog/10-inspiring-design-conferences-attend-2017/ Thu, 16 Mar 2017 12:24:49 +0000 https://envato.com/?p=53464 From Canada to Australia, the best design conferences around the world this year.

The post 10 Inspiring Design Conferences to Attend in 2017 appeared first on Envato.


Looking for renewed inspiration? Want to expand your network of both contacts and of ideas? Hoping to gain more clients or learn about a new technology? Then book yourself a spot at one of the awesome design conferences taking place around the world in 2017.

Whether you’re full-time employed or part-time freelancing, attending conferences is a core part of professional development that will advance your creativity and reaffirm your dedication to design. Once you’ve settled on the conference, cost, and dates, pitch the idea to your boss or to your clients as a way to both garner potential funds or simply boost their view of your commitment to your craft. As a freelancer, you may be eligible for tax deductions, so make sure to save those receipts. For those adventurous and ambitious designers out there, take a look at ways to further boost your resume by presenting a poster, being on a panel, or even giving a featured speech.

Now that you’re motivated and excited to engage with your design tribe, here are the best upcoming conferences each month to get in on the action:

March 22-26: IA Summit

Vancouver, Canada

The Information Architects annual conference this year is a perfect union of design, technology, and UX philosophy with its theme of “Designing for Humans.” Taking a futuristic look at the interaction between rising artificial intelligence technology and user-experience, the 18th annual IA Summit will particularly call into question how you to innovate your career to stay relevant throughout the the 21st century. With Keynote Speakers from Google, Harvard University, and Pinterest, this fast approaching conference will start your creative juices flowing right off the bat!

April 24-28: TED

Vancouver, Canada

Sticking around another month in Vancouver? Maybe you’ve already registered to attend the mecca of design thinking and human experience, the annual TED: Technology, Engineering, Design conference. Even though this year’s conference focused on “The Future You” is already sold out, you can still participate in the action at TED2017 cinema screenings at select theaters. Otherwise, look out for the famous TED 18-minute talks to be permanently available on on their website or register for an another upcoming event of the TED conference series.

May 25-26: The Design Conference

Brisbane, Australia

Still available at an early-bird price, Brisbane’s Design Conference is a great opportunity to connect into the creative wavelengths down under and hone your skills at a growing conference that was originally organized for university students. Between talks, workshops, and breakout sessions, you’ll get an intimate view at unique techniques around Brisbane and the Billy Blue College of Design. Plus, don’t forget to RSVP for the nightlife events where you’ll be able to get your informal networking on and make the most of your TDC experience.

June 7-9: 99U

New York City, NY, USA

99U is a total NYC experience with opportunities to soak up all the creative city that never sleeps has to offer. With a call for “Anyone in a creative field working to: put an idea into action, get inspiration from creative leaders, connect with potential collaborators, manage an effective team, or understand the trends affecting the future of creativity,” there will be sure to be plenty of like-minded thinkers there with you. Plus, you’ll get to explore some of the offices around NYC at Studio Sessions with Buzzfeed, Spotify, Shake Shack, and Refinery29.

July 11-17: World Domination Summit

Portland, Oregon

Looking for a little bit of all-around everything? Then, the World Domination Summit is for you to let loose and do some personal research about what it means to be a creative. WDS will not only provide you with the tools to live the freelance lifestyle you’ve always wanted but also the community to push you to be your best. No fear though if you don’t have a full week to spare, organizers recommend committing to at least Friday-Sunday to get the most of your experience and to start the Big Adventure.

August 29-Sept. 1: UX Week

San Francisco, CA, USA

Head to the UX Week conference in San Fran to get close enough to almost touch the behemoths of Silicon Valley. After 15 years, UX Week has mastered its program to provide you with action-items and tools to flawlessly incorporate into your workflow. Although the registration fee is quite steep, you’ll have all the ground-breaking speakers, workshops, coffee, and lunch to power your brain throughout these jam-packed 4-days.

September 14-15: Brand New Conference

Chicago, IL, USA

Do you love the Brand New Blog or simply have a thing for marketing, design, and branding? Returning to the Chicago after 2 years away in NYC and Nashville, the BNC is sure to liven up the Windy City with some of the strongest design firms and artists in the world. Look out for the announcement of the 2017 theme and how it will transform the logo for some design inspiration from the get go!

October 16-25: World Design Summit

Montreal, Canada

If design is more than just a way of working for you, then the World Design Summit might just be the conference that you need to expand your work philosophy to be your life philosophy. With 6 major themes centered around applied design thinking, the WDS explores how your outlook can have a major impact on civic participation, the environment, beauty, the economy, and global transformation, both subtle and extreme. The second call for papers and presentations opens on March 13th, so don’t miss the exciting opportunity to not only attend but also take a stand.

November 3-6: Summit

Los Angeles, CA

Take your creative career to the next level at the heart of all things elite: Summit 2017 in LA. Although attendance requires an application, the quick form is definitely worth your time to hear from and rub shoulders with celebrities from industries ranging from professional sports to journalism to international relations. Try your luck for a once-in-a-lifetime creative experience amongst the stars themselves in sunny Downtown LA.

December 11-13: An Event Apart

Denver, CO, USA

“Three days of design, code, and content”…what more could you want in a conference? An Event Apart runs conferences all around the USA throughout the year, but the closeout Denver event features an extra 6 speakers and the ski slopes are not far away! Despite its limited scope, AEA events welcome a wide-range of design professionals and offer an intimate experience. Seating is limited so register now to get your spot at this special edition event.

Wherever your design adventures lead you this year, remember to soak up all the professional development that these conferences offer!

The post 10 Inspiring Design Conferences to Attend in 2017 appeared first on Envato.