Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

Popular Design News of the Week: May 25, 2020 – May 31, 2020

Posted:Sun, 31 May 2020 10:45:07 +0000

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

10 Excellent Font Pairing Resources for Designers

20+ Beautiful Color Combinations for your Next Project

8 Tips for Designing Instagram Stories that Don’t Suck

Timeless Web Design: Online Portfolios Today - and in the Year 2000

10 Symptoms You Might Be a Designer

From Pentagram, 5 Data Visualizations that will Give You Hope During COVID-19

10 Design Systems You Must Know in 2020

100 Startup Ideas, from VCs and Founders

37 Inspiring Star Logo Designs

Little UX Crimes: A Collection of Dark Patterns in Design

Creating Modern Color Schemes for Websites (with Examples)

104 Photo Editing Tools You Should Know About

17 Tips for Designing with Type on a Photo

Colour Palette with Names and HEX Code

5+ Great Website Logo Makers for all Purposes

Editmode: Make any Website Editable Inline

Responsive Web Design Turns Ten

A Designer’s Guide to Creating Effective Dashboards

25 Beautifully Designed Ecommerce Website Examples

The Current State of Checkout UX

Pure CSS Oil Painting

Rules for Effective Design Choices

I Wrote a SAAS Product Because the Internet Made Me Believe it’d Make Me Rich

How I Accidentally Built a Tech Startup – Without any Technological Knowledge

How to Stop the Battle Between Product Managers and Designers

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source
Should Your Site Be Using Dark Mode?

Posted:Thu, 28 May 2020 10:45:52 +0000

Taking a stab in the dark is taking on a new meaning with the rise of dark mode design. One of the most requested features over the past few years, both Apple and Google have made a dark theme an essential part of their UI. But why is this? What are the benefits? Are there any pitfalls? These are the top things to consider when designing for dark mode…

Why Use Dark Mode At All?

We are on our phones almost constantly. The average person spends over four hours a day on their device and scrolls the height of mount Everest every year. These stats aren’t particularly shocking, and it only takes a walk down the high street or a journey on public transport to see almost everyone with their necks bent, staring intently at screens. We use phones for everything from phone tickets to entertainment, meaning we need them at all times. This is where dark mode can help…

The average person…scrolls the height of mount Everest every year

It Can Reduce Eye Strain

Apart from the aching neck and slight cramp of the thumb, being on our phones so often is also bad for our eyes and it’s predicted 2 in 3 will experience eye strain caused by excessive phone use. Dark mode is here to help with this, making the screen easier to see in low lighting such as in the night or early morning. It can be a lot easier on the eyes, causing less strain and is better in the long run.

It Can Save Battery

Dark mode has also been found to improve battery life. According to a recent test conducted by PhoneBuff, iPhone batteries can be extended by up to 30%. This is only true, however, if users have an OLED screen. This is where the pixels that are black draw no power, whereas the LCD counterparts draw the same amount of power no matter the color they are displaying.

You Can Play Around More With Designs

By implementing dark mode to a site, you can have a play around with different features. It’s about a lot more than just inverting white to black. You can play around with the colors and the look side by side and see which looks better. It could mean you are inspired for certain changes with the light site too.

Things to Consider

Switching to dark mode isn’t a magic fix, and it isn’t right for every project. It’s important that you consider the use of dark mode carefully.

Focus on Your Content

Dark mode puts more of an emphasis on the content areas of your interface, allowing certain content to stand out, while the surrounding areas fade more to background. It’s important to remember this when designing for dark mode and ensure the content which will be at the forefront has a strong focus.

Test Your Design in Both Light and Dark Mode

We’ve already established you can’t just invert your colors to make a site work in dark mode. But you can’t forget to test your sites in both modes too — after all, you don’t want the two interfaces to be so aesthetically different you can’t tell they are the same site, or that users get confused.

Work Out Your Color Palette

Ensure your default color palette is defined by function and not by color — don’t be afraid to add in new colors that work better. In dark mode you will be working with a color palette that has lighter foreground colors and darker background colors. Find a soft color scheme that works well and doesn’t have too many colors to it — it’s best to keep it simple. If you need a white background, ensure it is a slightly darker and softer white, so it prevents the background from glowing against surrounding dark content. Best practices recommend using a contrast level of at least 15.8.1 between the text and background.

Light text on a dark background can appear bolder…use a lighter weight for dark mode

Don’t Forget The Text

You need to ensure the text is still legible if the user turns the screen brightness to its lowest. After all, you want it to be dark, but still usable. Check if it has enough contrast and certain elements that are meant to be distinguishable from each other, are. Ensure the primary and secondary colors are separate from each other and easy to separate. Light text on a dark background can appear bolder than the other way around, so you may want to use a lighter weight for dark mode — experiment and see what looks best.

Ensure Users Can Switch Between Regular and Dark Mode

Some companies have adopted the approach of letting the system decide when to turn off and on the dark and regular theme, switching between the two when it thinks is best. This can be frustrating for the user and leave them not wanting to use the site or programme anymore. While it may be designed for optimum usage at certain times, let users make up their own minds and have control. Some may prefer to use dark or light mode all the time and not want to switch around; allow users to turn the dark theme on or off easily and based on their needs. Make the switch easy to find or users may get frustrated and close the site.

Ensure the Target Audience Are Kept in Mind

Before jumping straight into re-building an interface to the new dark-mode, it’s important to consider who the users are. If they are a younger and more chic audience who are on their phones more during the day and evening, dark mode is probably a good idea, however if they are older and more traditional, they will probably prefer the more “paper-like” interface. Do some research and figure out who uses the site and what for. Dark modes tend to decrease readability so is less likely to do well if the site in question is a blog or news piece. If it has simple content or is focused heavily on images or video, dark mode works well – Netflix is one of the best examples of this.

Pitfalls of Dark Mode

Dark Mode Doesn’t Work Well For All Sites

If the site you are designing is a very text-heavy or data-heavy or contains a vast variety of elements such as text, images, data and dropdowns etc. it can be a challenge to design. The main reason for this is trying to maintain a sufficient contrast which works well for all elements. Generally, all colors (except the palest, which are hard to see) work on a white background, whereas a dark background greatly eliminates the amount you can use.

Dark Mode Isn’t Always Better Eyes

While it can be better for those using regular mode in situations were light is softer (such as when you are going to bed or waking up), it has been found dark mode doesn’t always fix the problem. In bright light conditions the text can appear washed out which actually increases eye strain.

Dark Mode Might Not Align With Existing Branding

Due to the fact you need a more restricted color palette and many logos are designed with a white background in mind, dark mode might not align with a company’s existing branding. When the platform has many elements, this can be challenging, and the site may seem very inconsistent when switching modes.

Dark Mode Doubles Your Workload

As a designer, there is already plenty to be done when it comes to designing a site in normal mode, without the addition of a whole new site too. While yes, core elements are the same, it will still need to be re-worked and altered to sufficiently adapt to dark mode. This is a whole extra segment to the job which might not have been accounted for.

Featured image via Unsplash.
Source
8 Useful WordPress Plugins Worth Checking Out

Posted:Tue, 26 May 2020 10:45:43 +0000
WordPress plugins are both great for adding functionality to WordPress and by extension reducing website designers’ workloads, as well as reducing costs to their clients.

There’s certainly no shortage of plugins. 55,000+ currently reside in the official WordPress repository and more are added with each passing day.

Some of these plugins are free, some are quite affordable, and some are premium products that can be quite expensive. Most provide good value for the money.

Picking a plugin or two, or three, that would make your work easier could be quite a challenge if you have to sift through all 55,000. Finding the best ones for the work at hand would be even more so.

Which is why we’re here to help. We believe every web designer and WordPress user should be aware of the 8 plugins addressed in this article for the remainder of 2020 and beyond.

1. Amelia WordPress Booking Plugin

Booking is an important task for many types of businesses. Although a single booking is not time consuming, multiple manual bookings can be, and managing multiple bookings that involve changes, cancellations, special requests, etc., can take time, energy, and require human resources.
- Amelia is a WordPress booking plugin that can give a health clinic, gym, beauty parlor, or spa an error-free, reliable booking solution 24/7.
- Amelia not only manages clients’ bookings but employee scheduling as well, taking into account hours worked, special days, and days off.
- Amelia can manage bookings and appointments for a single business location, or multiple locations.
- Amelia provides business owners or managers with up-to-date graphic depictions of the business’s key performance indicators (KPIs).
- Amelia provides each business’s customer with its own Frontend Customer Panel
This remarkable automated booking system is easy to use and is currently used by 12,000+ businesses. It is GDPR compliant.

Click on the banner to find out more.

2. wpDataTables – Table and Chart WordPress Plugin

Crafting a table or chart can take time, and especially so when large amounts of complex data are involved or data is taken from more than a single source. wpDataTables is a fast, easy-to-use plugin that can not only save you a ton of time and frustration but will organize your data and present it in attractive, informative, and editable tables and charts.

A few of WPDataTables’ many popular features and capabilities:
- Conditional formatting in which data of particular importance or interest is color-coded or highlighted
- Multi-criteria filtering of data
- Managing data from multiple separate Database connections
- Creating tables and charts based on Excel files, CSV files, SQL queries, and Google spreadsheets
- Creating tables and charts based on PHP arrays, JSON feeds, and XML feeds
With WPData tables you can build tables and charts using a single, rather than multiple plugins and organize data the way you want.

Click on the banner to find out more.

3. Go Dash – Makes Your Dashboard Fast

On the average, WordPress users spend 5.7 minutes searching for what they need after they log in. Time wasted.

Power users seldom have that problem. They can complete some tasks in 3 or 4 minutes that might take you 15 or 20. They finish their work faster and seemingly never have to ask where to find something.

Maybe it’s time to stop feeling envious of power users and invest in Go Dash, a revolutionary new plugin that gives you instant access to every post, product, page, and screen on your site

With Go Dash you can:
- Power Search all your pages, posts & products – Even admin pages!
- Create favorites & groups for fast access
- Open multiple pages with a single click
- Access recently viewed pages and posts
Take the first step toward finishing tasks more quickly, never having to ask where to find some obscure WordPress setting, and becoming a full-fledged WordPress power user by clicking on the above banner.

4. Logic Hop – Content Personalization for WordPress

Logic Hop brings the power of content personalization to WordPress by using on-site activity and real-time data to show the right content to the right person at the right time. Fully integrated into WordPress, Logic Hop is a complete personalization solution.
- Logic Hop’s free add-ons enable uses to personalize with WooCommerce, Divi, Elementor, & more
- It’s the only tool that enables unlimited personalization with geolocation at one low price
Click on the banner to find out more about this powerful plugin.

5. MapSVG WordPress mapping plugin

MapSVG lets you significantly spice up your site by helping you create custom content that you can show on a Google, Vector, or image map.
- MapSVG has a build-in database and content manager
- Map filter and search capabilities are included
- Maps and information can be edited and maintained within MapSVG
Click on the banner to find out more about adding interactive maps to your site.

6. AdSanity

The AdSanity plugin supports Image Ads, Ad Networks, HTML5 ads, and Text Ads. It’s easy-to-use because it functions seamlessly with WordPress Custom Post Types.
- Ads can be inserted automatically
- Multiple methods can be called upon to embed ads
- 12 Add-ons significantly extend AdSanity’s functionality
- Templates and filters help AdSanity users size and format ads
Click to learn more.

7. Slider Revolution

Slider Revolution 6 is much more than a slider builder. It’s a full-fledged, powerhouse website content builder and a potential game changer if your websites have taken on a certain sameness.
- Slider Revolution’s cutting edge designs can create exciting, dynamic solutions to everyday design problems.
- Create everything from sliders, carousels, and content modules to full websites.
- Features include 2000+ royalty-free media assets
Click on the banner to learn more about this powerhouse website builder.

8. Ads Pro Plugin – Multi-Purpose WordPress Advertising Manager

AdsPro is the largest ad management plugin for WordPress is terms of the sheer flexibility provided through its many features

Highlights include
- An order form
- 25+ Ad templates
- User’s panel and user statistics
- 20+ Ad Display Types
- PayPal, Stripe, Bank Option, and WooCommerce payment methods
AdsPro is 100% responsive and provides geo targeting, ad filtering and scheduling, and ad duration management.

Click on the banner to learn more about this powerful time-saving plugin.

*****

A discussion about which plugins and solutions are best for WordPress users can often lead to a healthy debate. That’s not terribly surprising since there are so many fantastic WordPress plugins on the market. Also because different people use them in different ways.

The WordPress plugins we bring you today are in our opinion MUST-HAVE tools. We have crowdsourced from some of the most successful online entrepreneurs and bloggers we know.

[– This is a sponsored post on behalf of BAW Media –]
Source
Is it Time to Redesign Your Portfolio?

Posted:Mon, 25 May 2020 10:45:08 +0000
For many professionals looking for new work opportunities, they know that prospective employers are going to ask for proof of their credentials; where they went to school; how long they worked in the field; who they worked for; a résumé communicates these details nicely.

For web designers, though, a list of jobs and accolades isn’t sufficient.

Imagine if you created a resume that listed off your skills and experience as a designer:
- I have 10 years of experience building responsive websites;
- I’m an Adobe certified expert;
- I’m proficient in HTML, CSS, and JavaScript.
None of these things would mean much to prospective clients unless they themselves are designers or developers. It’s the same reason you don’t talk to clients using web design “speak”. They want to know what you’re going to do for them, not how you do it.

Below, you’ll find five signs that it’s time to update or redesign your portfolio website again:

Sign #1: Business Has Been Slow

There are many reasons why business may be slow for you. What I’d suggest is taking a look at your Google Analytics account to get a sense for why.

Do You Have Steady Traffic?

If the answer is “no”, then there’s an issue with visibility in search. You’ll need to address either your indexing issues or problems with SEO to fix the problem.

Is Your Bounce Rate High (>90%) & Time on Page Low (< 10 seconds)?

There’s likely something wrong with loading speeds. Check your speed through PageSpeed Insights and Google will tell you how to repair the issue.

Do You Have Traffic But Zero Leads?

Then the issue is most likely your portfolio. Even then, there are so many things that could be happening here. The work samples might be underwhelming, outdated, or not geared towards the audience you’re targeting. The copy might be too confusing or vague. Next steps might be unclear or inaccessible (like a broken contact form).

Use Google Analytics to look at your Users Flow (under Audience > Users Flow):

This will help you visualize where your traffic is going within your portfolio site and to see where most of it is dropping off. If you find that people are viewing your work, but aren’t taking action, then it’s definitely time to give the site a rework.

Sign #2: Business Has Been Extremely Busy

When you first built your portfolio website, you probably selected the best of the best to represent your body of work, right? But that was then. What about now?

As business picks up, it’s easy to lose sight of your portfolio because you’re so busy tending to clients that need help. However, if you want to keep those numbers up, then you should make time to update your portfolio so it accurately reflects your best work up to the minute.

Let me show you an example:

This is 10up’s “Work” page as of May 2020:

Helen Keller International, Politico, WCG, FiveThirtyEight Live Blog, The Saturday Evening Post, and Investor Place are the first samples you see.

Now, let’s go back to February 2019. This is what the “Work” page looked like then:

Motor Trend, WAMU.org, Smarter Travel, FiveThirtyEight, Windows Launch Event, and Maine Today Media are in the top spots.

If you scroll down the page as it stands today, you’ll find these projects there. It takes about three scrolls to find them. So, it’s clear that 10up updates its portfolio at least once or twice a year with fresh work.

Sign #3: You Recently Acquired a New Skill

A portfolio should be a reflection of your current skill set. And what that translates to is showing off websites that align with current web design practices and ideals. It also means redesigning your website so that it accurately depicts what’s going on with web design today.

Considering how quickly design trends come or go, this means you’ll need to update your portfolio site about once a year or so. It doesn’t need to be a major overhaul, but it should at least help you “sell” new clients on more modern designs and website features. For example:

Client: My friend has a chatbot on her site and she said it’s been a big help in getting her more appointments. Is that something we can do?
You: As a matter a fact, it is. And it’s something I’ve personally had a lot of success with.

You would then show the prospect your portfolio site equipped with a chatbot.

That said, you don’t need to litter your site with all the trendy new features. All you need is a portfolio site that reflects the very best in design today.

The portfolio website for Kati Forner Design, for example, went under the knife to reflect this type of modernization of design:

This was how the website looked in 2019:

And this is how the studio’s “Works” were displayed:

It’s an attractive website and one I’m sure did very well with its target audience. That said, a lot changes over the course of a year, so it’s no surprise to see that the studio has adopted a new look in 2020:

The same goes for its portfolio page:

The style of the website and portfolio page have a bolder and more confident look to them these days. This could be a reflection of the times and it very well could be a reflection of a change in their audience demographic. Both are valid considerations when updating a portfolio website.

Sign #4: You Recently Switched Niches

For web designers that work on their own, it makes a lot of sense to niche down. By carving out a singular niche for yourself, it’s easier to find clients as you’re not having to sell yourself as a jack of all trades or to constantly be changing gears from job to job.

Design agencies, on the other hand, may decide that it’s worth catering to various niches because they have the amount of capacity to do so. And that’s fine, too, so long as the resources and expertise are there.

Regardless of which boat you find yourself in, a change in niche or an addition of a new one is not unheard of. When that happens, though, your portfolio website needs to reflect this change.

Let’s look at the example of Gravitate Design.

This was Gravitate’s areas of expertise in 2016:
- Medical
- Financial
- Creative
- E-commerce
- Non-Profit
- Construction
- B2B
- Start-Ups
Let’s fast forward to 2020. The list of niches has changed (as has the overall look of the site):
- Medical
- Financial
- Travel/Tourism
- B2B
- e-Commerce
- Nonprofit
- Construction
- Legal
Creative and Start-Ups are now gone. In their place are Travel/Tourism and Legal — and each page comes with information on how the agency serves the niche, information on a sample project, and a custom contact form.

Whenever it comes time to change up your niche, just make sure you’re prepared with all of the details needed to sell prospective clients on it.

When In Doubt, Update Your Portfolio Website

I know it’s not easy finding the time to give your design business the love and attention it deserves. But your portfolio website is something you can’t afford to ignore. It’s the web designer’s version of a résumé and it’s an essential part of your marketing and sales strategy.

Just keep in mind that a portfolio website is just like any other website. There’s no setting it and forgetting it. It needs to be updated so that it’s always the most accurate reflection of your body of work, skills, and area of expertise.

Even if you take a few hours every year to look in on it and make sure the design, copy, and samples are up to snuff, that may be all you really need to do to maintain it.
Source
Popular Design News of the Week: May 18, 2020 – May 24, 2020

Posted:Sun, 24 May 2020 10:45:18 +0000

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Spotify in Neumorphism

The Most Popular CSS Framework Comparison 2020

The Fastest Google Fonts

Blush, Illustrations for Everyone

New.css

Facebook Releases Avatars – Here’s How to Get Yours

Redesigning the Zoom Experience

Responsive Design Checklist: Your 7-Item List for Responsive Design

8 Certifications for Web Designers to Level up their Resumes

Product Design: How to Build a Customer Journey Map

COVID-19 has Spawned a Mental Health Crisis. Can Branding Break the Taboo?

Ikea Releases Instructions on How to Build Homemade Forts for Children

Design Systems: From Definition to Distribution

How to Build a Social Media Presence: Tips for Designers & Creators

UX Best Practices During COVID-19

Top 40 Favorite Ecommerce Sites in 2020

Automated Accessibility Checker for Web Projects

6 Web Accessibility Features that Benefit More People

The Kawaiization of Product Design

How to Create a Custom Bootstrap Theme from Scratch

A “contrary” Typographic Identity for Oslo’s Munch Museum

How Graphic Design Contributes to Better Branding

Markdown Tutorial

43 Habits of Successful Web Designers

Exploring Data Visualization Psychology

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source
19 JS Libraries/Plugins for Typography

Posted:Fri, 22 May 2020 10:45:39 +0000

Typography is an integral part of website design. The typography and fonts you use play a huge role in multiple aspects of a website design. It affects factors such as readability, user experience, and even the perceived length of an article or page. It is very important that web designers get it right with typography to adequately convey the purpose of the website and its content.

As with almost every part of web design, there are several tools available to help make you more effective. Typography is no different.

In this article, we would be looking at 20 JS Libraries/Plugins for typography to help you create awesome web pages. Some of these tools even deal with the dreaded stuff like widows and orphans.

1. FlowType.js

FlowType is a responsive jquery plugin that helps you to automatically resize font size based on a specific element’s width. For website typography to be readable, there should be approximately 45 to 75 characters per line. For most screens with only CSS media queries, this can be difficult to achieve. Flowtype adjusts your font size to ensure that there is a perfect character count per line no matter the kind of screen or browser the reader is using.

2. Blast.js

Blast.js allows you to do: typographic animation, juxtaposition, styling, search, and analysis. The tool allows you to separate text to enable typographic manipulation. It has character, word, sentence, and element delimiters built-in. Blast also matches phrases and custom regular expressions.

3. Textillate.js

Textillate.js is a simple plugin for creating CSS3 text animations. The plugin combines different libraries to help apply CSS3 animations to any text. To make use of it, all you need to do is add textillate.js and its dependencies to your project.

4. Widowtamer.js

Widowtamer.js is a JavaScript plugin that would automatically fix typography widows on your web pages. The plugin is designed to work with only responsive sites.

5. jQuery WidowFix

JQuery WidowFix is a jQuery plugin to help you fix widows. It fixes them by adding a nonbreaking space between the last two words. The tool is lightweight and easy to use.

6. Slab Text

Slab Text is a jQuery plugin to help you create big, bold headlines. You can also resize your viewport width so that regardless of the viewport size, the combinations of words within your headline will remain on the same line.

7. Kerning.js

Kerning.js is a simple jQuery script that allows you to scale your web type with real CSS rules automatically. It comes with no dependencies so when you add it to your web page and add some CSS rules, your page will be automatically beautified.

8. Lettering.js

Lettering.js is a jQuery plugin for radical web typography. The plugin offers you complete down-to-the-letter control. Some of the things that can easily be done with Lettering.js are Kerning Type, Editorial Design, and Manageable Code.

9. React Text Gradient

React Text Gradient is a cool plugin that allows you to add text gradients to your site. It’s a React component that creates text gradients with CSS. The component will detect if a website background-clip is available and would then apply the gradient over the text.

10. Typed.js

Typed.js is a JavaScript library that types out sentences in a browser, deletes them, and moves on to the next string. The tool is pretty easy to use and you can create an unlimited number of strings. The library is great for storytelling.

11. FitText

FitText is a jQuery plugin used for inflating web type. The plugin automatically scales text so that it fills the width of a parent element. The plugin ensures that the layout of the page is not broken no matter the kind of browser you are using.

12. TypeButter

TypeButter is optical kerning for the web. This plugin allows you to create beautifully designed texts. Typebutter also allows you to Kern your headlines and removes spaces between characters that make text hard to read. All you need to do is install the plugin and your fonts would lose unnecessary spacing.

13. Font-To-Width

Font-To-Width is a script that allows texts to fit within their containers. Instead of scaling the font size to make text fit, Font-To-Width chooses a width or width variant and then allows for letter and word adjustments as needed. Note that this script is made for headlines or short pieces of text. It is not meant for multi-line body of text. It also works best in browsers that support subpixel spacing like Chrome. Browsers that round spaces to integer values will show rounding errors.

14. Font Flex

Font Flex is a jQuery plugin for dynamic font sizes. The plugin makes your text flexible and adaptable to any screen. The lightweight jQuery extension is intended for use with responsive or adaptive CSS layouts.

15. TextTailor.js

TextTailor.js is a jQuery plugin that allows text to fill the height of the parent element or truncate it when it doesn’t fit. It works perfectly with posts that have images and fixed fonts.

16. Type Rendering Mix

With Type Rendering Mix, you can decrease the font-weight for browsers that use Core Text to render text. It also allows you to disable web fonts when no anti-aliasing is applied. You can also disable web fonts if they render badly with some text rasterizers.

17. Textualizer

Textualizer is a jQuery plugin that transitions through blurbs of text while animating each character. When the text is transitioning, any character that is common to the next blurb is left on the screen and moved into its new position. Some of the effects it has are slideLeft, slideTop, fadeIn, and random.

18. Jumble

Jumble is a jQuery plugin that adds colors to your headlines and also animates them. You can set parameters for the color shuffle based on brightness and saturation hue. You are also provided with a good range of colors you can jumble from.

19. Arctext.js

Arctext.js is a jQuery plugin that allows you to curve text using CSS3 & jQuery. You can curve text up to a radius of 300, change the direction of the text, create non-rotated letters, and set or animate text. The plugin will calculate the right rotation of each letter and distribute it across the arc of the set radius.

Exploring Typography With Different JS Libraries/Plugins

As a web developer, you need to have an arsenal of tools to be efficient and get the best out of your web designs.

Relying on just your skills might make web typography difficult to circumvent. When you use the JS libraries/plugins for typography, you have control over the look, feel, and function of your text. You can easily tackle widows and orphans, add special effects, and create a friendly UX.
Source
Building Brand Trust with Transparency: What Web Designers Can Do

Posted:Wed, 20 May 2020 10:45:11 +0000
The web has made it all too easy for consumers to look up anything and everything they’re interested in or have questions about. “Pet stores near me.” “Best web hosting 2020.” “Tom Brady net worth.”

And it’s with this easy access to data that consumers have grown pickier about who they do business with. Because if they can get answers to all the other questions in their lives, why can’t they find out everything there is to know about a company they intend to buy from?

As such, we’re going to see more companies lean more towards honest and straightforward approaches than they have in previous years… And that means web designers need to be ready to help clients communicate that transparency through their websites.

What Web Designers Can Do to Help Brands Build Trust

Transparency and trust go hand-in-hand in the minds of consumers. A report from SproutSocial provides additional insight into why it’s so important to them.

Although the report focuses on transparency in social media, at its core it’s looking at how brand transparency translates into consumer trust.

Here is one of the key takeaways:

When brands are honest with consumers about things like their internal workings, pricing, values, and so on, their customers become more loyal. And, not only that, they become active advocates for the brand.

As for what your visitors and prospects consider as “transparency”, here are the most common things they look for:

We can use this information to better present information on clients’ websites. Here’s how:

1. Be Clear About the Solution First Thing

53% of consumers define brand transparency as clarity. And what better way to be clear than to address their pain and provide your solution right away?

In fact, you could take a page out of RE/MAX’s book and take all other distractions out of the way:

There is no navigation for the RE/MAX website save for the customer portal link. While you might not be able to get away with that exact design choice on your website, you could tuck your navigation under a hamburger menu to make sure the main thing in view is the call-to-action.

By removing other options from view, and painting a very strong argument for why your solution works (e.g. “Each year, our agents help hundreds of thousands of families buy or sell a home”), there’s no reason for visitors to get right to it. You’ve created the shortest, easiest, and clearest pathway to their pain relief.

2. Openly Display Customer and Client Reviews

One of the problems with displaying testimonials on a website is that the clients’ words are filtered through the company before they reach prospective clients’ eyes. In addition, brands obviously only want to share the most flattering of reviews, which can lead to some deception (whether intentional or not).

More than anything, consumers want brands to be open (59% of those surveyed defined transparency as openness). So, we need to do away with these overly flattering portraits of brands and start being more honest with prospects.

For service-based businesses, the solution is simple:
- Encourage clients to leave reviews on the company’s Google or Facebook business page. You can put a link to those pages on the website so visitors see that honest reviews are welcome.
- Use a reviews widget to display your online reviews — the good and the bad — on your website.
For ecommerce businesses, this is a little easier to implement as product reviews are commonplace. So long as there’s no manipulation of the data and visitors are able to see true reviews, there’s not much else to do than to configure a product reviews and ratings system like the one Olay has:

When you include reviews on your website, make sure a ratings sorting feature is included. That way, if customers want to see what all the bad reviews are saying, they can quickly get to them.

3. Maintain Integrity When It Comes to Data Collection

Privacy has been a major concern for consumers for years. But companies (and their web developers) found a solution amidst the release of GDPR: the cookie consent bar.

The only problem is that the cookies consent request was everywhere. And as tends to happen with consumers, banner blindness has led to more and more visitors ignoring those requests and clicking “OK” or “Allow” simply to get them out of the way.

Blind acceptance of a website’s privacy policies is not good for the brand nor the consumer. So, what some websites do now to appeal to the 23% of people who consider integrity the most important part of transparency is this:
1. Use just-in-time privacy notices that display only when visitors are about to share their information.
2. Include a “Do Not Sell My Personal Data” link at the bottom of websites as Tide does.
With the passing of the California Consumer Privacy Act, these statements enable California residents to indicate which tracking cookies they want to enable:

There are some cookie consent tools that provided for this level of user control, but not all — which is why this CCPA statement is a big step in the right direction.

4. Be 100% Honest About Pricing and Other Fees

It’s not always easy for consumers to decide what they’re going to spend their money on, what with the variety of options and distractions suggesting it might be better spent elsewhere. So, when your website provides pricing that seems too good to be true, don’t be surprised when they abandon the purchase when they discover it really is.

With 49% of consumers equating transparency with honesty, you can expect unexplained discrepancies between the ticket price and the price at checkout to cause issues for your brand.

When designing product-related pages on an ecommerce site, consider the best way to inform your shoppers without compromising the on-page experience.

Ticketmaster, for instance, does an amazing job of this.

For starters, this pop-up is what visitors see before they ever get a chance to look at ticket prices for upcoming NFL playoff games:

It’s just one way the website prepares them for any surprises.

Another way the site handles this well is with this well-placed reference to ticket fees:

The word “Fees” is a hyperlink that takes customers to the FAQs — one of many places they can go on the site for pricing-related questions:

Then there’s this accordion dropdown before checkout that details the fees that bring the total from $360 to $424:

This way, Ticketmaster customers are 100% prepared for what they’re about to find when they pull out their credit card to pay.

If your website has a high cart abandonment rate, there’s a good chance the issue has to do with the final costs. So, if your website hasn’t gently reminded them along the way of what they’ll pay, it’s time to build in more of that along the journey.

Transparency and Trust: Making the Connection for Your Clients

It’s understandable why consumers want to give their money to trustworthy brands. There are just too many options out there today. Why should a purchase ever require a deep-dive analysis into every company, every option, every product or service? By finding brands they can trust, their lives become much easier.

As a web designer, you have an important role to play in bringing prospective customers or clients to that conclusion.

Featured image via Unsplash.
Source
Exciting New Tools For Designers, May 2020

Posted:Mon, 18 May 2020 10:45:53 +0000

There are plenty of new tools to speed up your work available now. From background patterns and icons to landing page templates and new fonts, we’ve got something for almost everyone here. And while some of these tools are premium options, almost everything is free and open-source.

Here’s what’s new for designers this month.

Pattern.css

Pattern.css is a CSS-only library that you can use to fill empty backgrounds. There are tons of pattern options available and you can search and sort by the type of pattern that appeals to you – grids, dots, lines, stripes, zigzags, and more.

Image Compare Viewer

Image Compare Viewer is a lightweight slider that lets you see changes to images in a before and after format. Use it for grading, CGU, and pretty much any other type of comparison. It uses vanilla JavaScript and has no dependencies. (There’s also a plugin for WordPress users.)

Scale Document

Scale Document is a secure platform for document processing. The coolest feature of this tool is that it can scan documents, “read” them, and turn them into digital data. It’s a paid tool with options for different use cases.

Screen Recorder

Screen Recorder is a minimal progressive web app that does exactly what you would expect. Allow access and record screens (and audio) with a click. It’s free and doesn’t include watermarks or ads.

Codespace

Codespace is an app to organize code snippets into folders. Then you can search, share, and access code anytime. It’s a paid app that works cross-platform.

GitKraken Timelines

GitKraken Timelines is a free tool to communicate milestones and deadlines. Create private or public shareable timelines. Plan product releases and provide visibility across your organization or just have fun.

Tara AI

Tara AI is a modern product development platform. As an alternative to Jira, it lets you run sprints and planned release cycles on time. (It’s still in beta and free to try.)

CSS Inspector

CSS Inspector lets you get the CSS code of any web element with the inspector. The premium tool is a quick and easy way to inspect and edit live webpages without coding.

BestTime

BestTime is a neat API that forecasts how busy a business will be at any given hour. It looks at week, peak, busy, quiet hours, and provides live busyness comparisons and dashboards.

Cakeurl

Cakeurl is a link shortener that adds “superpowers” to your links, such as calls to action, retargeting pixels, and analytics.

Brandfetch for Adobe XD

Brandfetch for Adobe XD lets you pull the brand assets into your software. Just enter the company name and add everything instantly. The tool is free for small companies and developers and has paid plans for power users.

Free HTML Landing Page Templates

This roundup of 40 Free HTML Landing Page Templates is a great collection to help jumpstart website design projects. The best part is every option is open source and the collection includes a variety of page types for different products and services.

Animockup

Animockup is a tool to create free, animated product mockups using your images and information. Use it to make animated videos to showcase new or upcoming projects.

Database Schema Templates

Database Schema Templates is a collection of real-world databases that you can use when developing the architecture of an app. Everything is open source.

Sitesauce

Sitesauce converts your dynamic website (such as a blog) into a static website in one click and keeps the site updated when content changes. This will help reduce server costs and page load times and increase scalability and security.

SQL PD

SQL Police Department is a game where you solve crimes using SQL, while learning more about the language.

LineIcons 2.0

LineIcons is a set of 2,000 line icons in 20 categories and two weights. Icons come in SVG, Web Font, AI, and React formats. This kit includes free and pro versions.

GitHub Writer

GitHub Writer is a browser extension that changes GitHub’s default editor to a WYSIWYG rich-text editor. You can use it when creating, editing, or commenting on GitHub issues, pull requests, and wikis.

Caddy 2

Caddy 2 is an open-source web server with automatic HTTPS written in Go. Plus, it renews certificates automatically.

Swiftify

Swiftify is a tool to convert a storyboard to SwiftUI in just three steps: Upload, output, apply fixes. That’s it.

Alejo

Alejo is a beautiful line typeface for display use. (It also includes a solid option.) With curved lines and a thick style, it is made to use large.

Good Boy

Good Boy is a novelty font for dog lovers. The character set includes letters and numbers but is somewhat limited after that.

Lovely Ampersand

Lovely Ampersand is a beautiful handwriting-style typeface that would be lovely for invitations. Take special note of the glyphs with long tails for a more elaborate feel.

Macklin Pro

Macklin Pro is a new superfamily that includes desktop, web, and variable fonts. It’s versatile, highly readable, and with serifs, sans serifs, slabs, and some beautiful italics, it might be the only font you need for projects. (And while this font is new, they are offering it at a stellar deal of less than $50.)

Source
Popular Design News of the Week: May 11, 2020 – May 17, 2020

Posted:Sun, 17 May 2020 10:45:52 +0000

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Lite – A Lightweight Text Editor

The 50+ Best Free Resources for Learning Design

How to Use Git: A Beginner’s Guide

I Hate Photoshop

Pose Animator: A Web-Based SVG Animation Tool

10 Ultimate Tips for Designers to Create Effective Logo

10 Best Webflow Templates for your Next Portfolio

5 Exercises to Level up your Design Skills

Affinity Lockdown 2020 is the Online Festival We all Need

How a Simple UX Design Can Take your App to the Top

When Figma Isn’t Enough for Product Teams

Convincing-Looking 90s Fonts in Modern Browsers

Linux on the Desktop as a Web Developer

Write Libraries, not Frameworks

10 Tips to Build a Killer Website

Rebuilding Our Tech Stack for a New Facebook.com

Art Deco will Be the Visual Language of 2021

Useful Sections for a Design System Reference Site

How to Convince Others not to Use Dark Patterns

Neumorphism in Mobile Design Concepts

Design Sprints Complete Guide

5 Personality Quizzes to Uncover your Creative Potential

8 Ways your Design System Can Fail (and How to Avoid Them)

101 Cognitive Biases & Principles that Affect your UX

Resources to Help Remote Designers

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source
Design for Wearables 101

Posted:Fri, 15 May 2020 10:45:54 +0000
Wearable devices are some of the hottest tech on the market today. We’re living in a world where people want access to endless information as quickly as possible. Glancing at your watch and being able to check everything from your heart rate, to your text messages can be incredibly convenient.

As of 2019, the latest numbers revealed that around 1 quarter of adults used a wearable device at least once a month in the US. What’s more, the number of options available for wearable devices is increasing. It’s not just smart watches anymore, but wristbands, glasses, earphones, and smart rings.

Wearable devices present a unique set of challenges when it comes to development and design. If the chances are that you’ll need to start branching into wearable apps one day soon, the following tips will help to keep you on the right path.

Design for Glanceability

Glanceability is a strange term to consider when you’re a digital designer.

Most of the time, you want people to do a lot more than just glance at your content. If you’re designing a website, for instance, then you want people to keep looking at what you have to offer for at least a few minutes.

However, when you’re designing for a smartwatch, you’re appealing to a selection of people who want to spend as little time interacting with tech as possible. Making your UI glanceable means reducing the interface to its most basic visual level, so that people can consume information as fast as possible.

For instance, the Bring Grocery Shopping app for smartwatches converts items on your shopping list to visual icons so that you can instantly see what you need to buy. Once you’ve picked up an item, you tap it on your watch to turn it from red to green.

Focus on making sure that your audience can consume any of the content on their smartwatch within a period of five seconds or less. If it takes more than 10 seconds for someone to interact with your smartwatch app, you might need to go back to the drawing board.

Keep it Simple

The principle of KISS (Keep it Simple, Stupid), is pretty common in web design.

No matter what kind of interface you might be designing for, it’s crucial to ensure that you’re not cluttering any visual space with information that your users don’t want or need. However, if you’re designing for smartwatch apps, then it’s even more important to keep things simple.

The KISS Principle means making sure that you don’t add more actions or information to your wearables than your user needs. Think about how you can keep the interactions between the user and the device as brief as possible.

For instance, if users need to reply to a message on their smartwatch, then they’re going to want to avoid wasting time typing on a tiny screen. That’s why apps like Telegram for the Android watch allow you to send canned responses and emojis instead.

Design for singular, focused tasks that allow your users to get things done fast.

Reduce User Interactions

Web designers are often focused on making websites and mobile apps that make users want to click, interact and engage as frequently as possible. However, you need to take a very different approach when you’re designing for wearable apps.

The most effective apps on wearable devices require as little action as possible for users. This means that you need to think about how people are going to use your app with as little effort as possible. The less time users have to fiddle around with an app, the more time they spend using it.

When designing for wearable UX, utilize not only touch, but vibration and sound to get things done. You can also consider using things like voice input to schedule activities and compose messages too. In the Dark Sky Weather app for the iWatch, all you need to do is swipe from one page to another to see more information about your forecast.

Notably, when keeping your wearable apps as interaction-free as possible, you’ll also need to think about the kind of wearables that you’re creating for. Different devices provide very different capabilities and experiences.

Follow the Rules of Minimalism

Users interacting with a wearable display love minimalism.

That’s because minimalist designs mean that there isn’t a lot of clutter on a tiny screen for your user to contend with. If you’re minimalist in your choices, you can ensure that everything from the colors on the app, to the typography you choose, is selected for its clarity and impact.

Contrast is particularly important on smaller screens, as it helps to make various elements easier to read at a glance. Make sure that you take your UI out and test it in real-world environments to examine how easy it is to read. Other points to think about include:
- Straightforward typography: When it comes to the typeface on your wearables, a simple sans-serif selection is usually the best option. For instance, check out the kind of fonts you get on the Apple Watch app for Evernote.
- Space between elements: White space can make or break your design strategies for small screens. If you put too much space between elements, there’s not going to be enough room for any other content. However, if you put too little space between elements, they’ll be hard to read.
- Easy access: Any buttons, links, or other tappable functions need to be very easy to use with a wearable app. Don’t make people struggle to use your content.
Follow Platform Design Guidelines

In order to be successful with app development, you need to consider a handful of requirements. Remember, there are dozens of different companies experimenting with wearable development these days. What’s more, various tools work in very unique ways. Just because the app you build works for the iWatch, doesn’t mean that it’s going to work for a watch from Samsung, and so on.

Thinking about which tools you want your app to work for ahead of schedule will help you to design apps that target your users’ specific desires. Remember that the end goal is always to produce a well-functioning, easy-to-use application that’s perfect for your intended audience.

Remember though, while you do need to focus on a specific platform, you shouldn’t be designing your applications in isolation. It might be worth thinking about interactions with other devices too. For instance, do you want people to be able to use their smartwatch to control functions on their phone? Should your consumers be able to upload data from their phone straight to their computers?

The Lifesum app works as a diet and meal planner for your Android watch, but it can also provide useful tips on how to reach your nutritional goals on your phone based on the information it takes from your watch.

Reduce Interruptions

Let’s face it, even on smartphones and tablets; constant incoming notifications can be annoying and disruptive. While we do rely on our devices to keep us informed, too many interruptions can sometimes make us abandon our tech. It’s one thing to have a mobile device buzzing in your pocket, and another entirely to have a vibration constantly pulsing against your wrist or finger.

It’s one thing to have a mobile device buzzing in your pocket, and another entirely to have a vibration constantly pulsing against your wrist

Keep the number of notifications that you send to your users as low as possible. The frequency of notifications need to be kept minimal, so the device doesn’t constantly irritate the person wearing it. When you do need to notify a user, make sure that the notification is as valuable as possible. Pointlessly pushing irrelevant information to your customers will cause them to uninstall your app.

If you’re not sure exactly what your customers need, you can always consider letting them configure the timing and kinds of notifications that they receive with a helpful user interface. You could even let your users choose whether they want a notification to come with a vibration, a tone, or just a screen glow.

Some tools, like iTranslate, avoid notifying their users at all. That means that customers only get alerts when they choose to interact with the app.

Concentrate on Convenience

Finally, think about how you can make your wearable apps as convenient and useful as possible for your target customer. The more comfortable your users feel using your app, the more it will become a natural part of their routine.

For instance, it’s rarely a good idea to design an app that’s going to eat up all of the battery life on your user’s wearable the moment that they start using it. Think about how much power your app really needs to use to remain valuable.

Additionally, consider how the features on your app can genuinely solve problems for customers. It’s not just about translating messages from a smartphone to a smartwatch, so people don’t have to fumble with their phone. If you’re offering a messaging app, help people send information to friends faster with pre-configured responses, and voice recognition; If you’re giving your customers a maps app, let them instantly swipe to the right route when they’re walking, driving, or getting public transport, you could even offer handy tips on things to see as they continue on their journey.

Get Ready to Design for Wearables

Preparing for the new age of web design isn’t just about getting yourself ready for things like AI and 5G. You also need to consider how today’s users are going to be interacting with applications and interfaces on a host of different platforms.

Learning the basics of designing for wearables will help you to earn more jobs, impress more clients and expand your portfolio in the years ahead.

Featured image via Unsplash.
Source