Subscribe Now!
...with web-based news readers. Click your choice below:
...with other readers:
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
-
6 Best Browsers for Developers in 2020
Posted:Wed, 19 Feb 2020 10:45:25 +0000
On the surface, web browsers seem very similar. They all provide you with a relatively straightforward way to get online and search for the content that you need. However, the more time you spend building your skills as a designer/developer, the more you’ll recognize the need for a unique kind of browsing experience. Fortunately, we’ve found some of the best browsers for web developers, to get you started.
Let’s take a look at what each option can offer.
Firefox Developer Edition
Among developers, Firefox is probably the world’s most popular browser.
On it’s own, Firefox is a pretty powerful browser. Deemed a lot faster than the average web browser, Firefox helps you to track down information and create stunning websites in a fraction of the time of something like Edge.
However, if you really want to get the next-level Firefox experience, then it’s worth upgrading to Firefox’s own developer edition.
Like Google Chrome for Developers, Firefox’s Developer Edition comes built for the open web.
Additionally, with Firefox Developer Edition, you get access to a next-generation CSS engine (written in RUST), an inactive CSS system that grays out CSS declarations that don’t impact the page, and more. There is also a host of “Firefox DevTools” to access.
With your new browser, you can access a best-in-class JavaScript debugger, a Master CSS Grid, and various other features too. In fact, Firefox is the only browser that is specifically built with tools that help developers to build and design with their own CSS grid. These tools make it easier to visualize information, display area names, and preview transformations too.
Polypane
Finally, Polypane is a unique kind of browser, specifically designed for developers and designers. This browser is a cross-platform solution and Devtool that experts can use to develop, test, and debug sites as quickly as possible.
Created to help developers and designers increase both the quality of their work and their productivity, Polypane is packed full of useful features. What’s more, it works with any code editor and technology stack.
In an age where user experience is more important than ever, Polypane helps companies to build higher-quality websites through everything from WordPress, to Drupal and Angular.
Because tools for developing and debugging are built into the browser already, you don’t have to worry about finding and adding extra extensions.
For those who aren’t sure about using a new and proprietary browser experience, Polypane does come with a free trial. However, as with most specialist tools for web developers, you will need to pay if you want to continue accessing advanced features long-term.
On the plus side, like Google Chrome’s developer edition, Polypane benefits from regular updates, so you know that you’re always going to be on the cutting edge of the web industry.
What’s more, you can also access different packages depending on whether you’re using Polypane as an individual or an agency.
Google Chrome for Developers
Google Chrome stands out as one of the world’s most widely used browsers.
Chrome has more than 58% of the market share, according to the latest estimates. With figures like that, it must have something special to offer.
While Chrome might be particularly popular among everyday consumers, it also has something special to offer people in the web development and design world too. For instance, Google now has it’s own “Chrome browser for Developers” product.
Created for the open web, Google Chrome for Developers helps professionals to design websites that are specifically optimized for the next version of the digital world. With Google Chrome, you can test cutting-edge APIs for web-based platforms in real-time.
What’s more, Google Chrome is packed with endless tools and add-ons that you can implement into your browser. That includes PHP consoles for WordPress, screenshot tools for collecting web design inspiration, and even LastPass for password control.
Not only do you have endless opportunities to get creative with Google Chrome, but you also have access to updates that happen on a weekly basis, so you know you’re always on the cutting edge.
Opera
Opera might not be as popular as Chrome or Firefox for developers, but it has a number of benefits to consider. If you’re not looking for too many advanced development features, then Opera could give you everything you need for a quick and effective experience online.
Numerous stress and speed tests have placed this browsing solution right in the middle of the pack. You’re not going to get life-changing performance with Opera, but you will get a connection and browsing experience that you can rely on.
Unlike Chrome and Firefox, Opera also relies more heavily on in-built features. That means that you don’t need to worry about adding extra functionality to your browser on your own.
The Opera Developer browser gives today’s design experts a chance to get started with some of the latest tools and features as they roll out from Opera.
If you want to be on the cutting edge of early experiments with web browsing, the developer stream is a perfect choice. However, it’s worth noting that some of the developer features you can access from this browser won’t be as stable as they should be.
Blisk
Blisk is an interesting alternative to many of the major browsers on the web today.
Compared to Opera, Chrome, and Firefox, Blisk doesn’t have nearly as much attention online. However, it may be worth consideration if you’re a growing developer. This browser is specifically designed to give designers a development-first workspace where they can develop and test modern applications as quickly as possible.
Blisk is the only developer-focused web browser that allows you to access all of the functionality you need for creating sensational online experiences. You can view what your website or app is going to look like on virtually any phone design, from Google Pixel, to the iPhone. What’s more, there are viewing options in landscape or portrait mode too.
Blisk also shows mobile and desktop designs side by side, so you can compare the UI that users will get whenever they approach a website – no matter where they’re connecting with you from. Other features include:
- State of the art URL and scroll sync: Blisk automatically synchronizes scroll and URL positions for desktops and mobiles.
- Auto-refresh: Whenever you save code changes when working in a browser, Blisk will refresh your tabs and update CSS changes.
- DevTools: Blisk delivers DevTools similar to Chrome, you can launch separate DevTools for mobile and desktop and use them to simultaneously inspect the performance.
- Error notifications: Blisk automatically monitors potential page errors in JavaScript and resources that fail to load.
- Page inspector: Blisk delivers page inspector tools, powering quick inspection of any element on mobile or desktop.
Safari for Developers
Believe it or not, Safari for Developers is a very powerful tool – depending on the kind of websites and online experiences that you want to build. Although this browser option isn’t quite as broad or comprehensive as some of the other options we’ve mentioned so far – it has its benefits.
For instance, Safari is the best way to make sure that your sites are going to perform amazingly on iPhone, Mac, and iPad technology.
As Apple becomes an increasingly popular brand around the world, Safari will allow you to connect with viewers in a very specific landscape. Additionally, the Safari developer edition helps you to experiment with a host of advanced features too.
With Safari for Developers, you can add things like Apple Pay to websites, giving customers more ways to check out online. This could be an excellent way to increase conversions for your ecommerce clients.
Additionally, picture-in-picture functionality means that you can float a video window from Safari over your desktop or a full-screen app. This makes it easier to follow specific guidelines when you’re working in Safari.
Safari even has it’s own tab on the Mac App store, where you can explore things like Xcode for creating unique Safari extensions that work specifically for Apple customers.
Exploring Different Development Browsers
As a developer, you’re going to need a very unique selection of tools within your browser to help you get the most out of your designs.
The average browser simply won’t give you the advanced experience that you need online. That’s why it’s important to experiment with solutions ranging all the way from Google Chrome for developers, to modern solutions like Blisk.
Whether you decide to go for something tried-and-tested, like Firefox, or something a little more innovative, you’re sure to find that a developer-focused browser helps you to accomplish more.
Source -
The Latest Research for Web Designers, February 2020
Posted:Mon, 17 Feb 2020 10:45:11 +0000
In the following roundup of the latest research for web designers, I’ve included reports and surveys that shed light on: The battle between mobile and desktop, Why so many websites keep getting hacked, What’s keeping ecommerce business owners awake at night, and What Google is now saying about mobile-first indexing.Hootsuite Puts a Spotlight on Mobile
Although Hootsuite is a social media marketing tool, its Digital 2020 report (created in conjunction with We Are Social) reveals much more about the state of marketing as a whole than just social media.
As of January 2020, the total number of users has reached 4.5 billion. That’s a 7% growth from the same period in 2019.
A huge contributor of that growth is the increased adoption of Internet-connected devices all around the world:
This graphic alone demonstrates why it’s crucial for websites to be able to cater to a global user base and not just those in developed nations.
Another telling statistic from this report shows how much more Internet users are coming to rely on their mobile phones:
Between December 2018 and December 2019, there was an 8.6% leap in the amount of mobile web traffic. Laptops and desktops shrunk in popularity during that same timeframe as did tablets, which saw a massive dip in usage.
It’s not just the amount of traffic on mobile vs. web that’s seen changes either. It’s the amount of time users spend on those devices. As a whole, consumers spend 6 hours and 43 minutes online every day; 3 hours and 22 minutes of which is from their mobile devices.
Key Takeaway
If you’re not already building progressive web apps for clients, 2020 may be the perfect time to learn how to do so. Not only do they provide a superior experience for mobile users, but they also are capable of serving users who may not have the best Internet connectivity or live in close proximity to your web servers.
Sucuri Reveals What Was Going on with Hacked Sites in 2019
The Sucuri Hacked Website Threat Report just came out with some interesting data on the state of web security.
Let’s start by looking at the integrity of the content management systems web designers commonly use:
Out of all the infected websites Sucuri found last year, 56% of them had an outdated CMS. As you can see above, some users do a better job of protecting their core by updating their CMS technology. Others… not so much.
It’s not just content management systems that users are failing to update either. More than two-thirds have websites using PHP versions that are no longer supported (i.e. 5.x and 7.0).
Then, there’s the fact that websites with vulnerabilities weren’t just found to have one vulnerability. 44% of vulnerable websites had at least two vulnerable components and 10% had four or more.
Considering this, it’s no surprise that once-infected websites have a tendency to be reinfected.
Key Takeaways
On average, Sucuri cleaned up 147 files and 232 database entries for every malware infection detected. Even if those numbers are improvements from previous years, think about how costly the cleanup is going to be for your clients if or when that happens to them.
So, rather than focus strictly on web design or development in the coming years, start thinking about how you can weave website security into the mix. Whether you want to provide maintenance services for live websites or you want to build security measures into a websites in development, it’s up to you.
But something needs to be done to fix this systemic issue.
A Better Lemonade Stand Shares Results from eCommerce Survey
For those of you working with ecommerce clients (or who want to), this survey from A Better Lemonade Stand is one to pay close attention to.
Right off the bat, the survey reveals that 62.1% of people who want to start an ecommerce business have yet to do so. As for why they haven’t, there are a variety of reasons given:
Pay close attention to these reasons as you can use them to sell your ecommerce design services as a solution:
- The monetary investment
- A lack of know-how
- A lack of time to do so
You can also use survey data from current ecommerce owners to better position your business before prospective clients:
Here you can see what ecommerce business owners report as their biggest struggles. Five of the top ten you can easily help them out with:
- Getting traffic
- Conversion optimization
- Strategy & analytics
- Branding & design
- Operations & customer service (through the website, at least)
Key Takeaway
You can present ecommerce business owners in the making with a cost-effective done-for-you option as well as proof of how quickly you can get them an ROI (like with a case study) if they’re really worried about cost. They need to see how your expertise will save them time and make them more money in the long run.
The same goes for clients with existing businesses. You now know what their top concerns are. If you see a flailing ecommerce site, use this knowledge to get the conversation started and to pose your own solution. Again, just make sure you have proof to back up what you promise to do.
Google Updates Mobile-First Indexing Best Practices
Think you know all that you need to know to design a mobile-first website? Well, Google just updated its mobile-first indexing best practices.
Here’s a high-level overview of what the new best practices state:
- If you’re using the robots metatag, make sure it’s the same for mobile and desktop.
- Use the same URLs for your mobile and desktop sites.
- Use the same content on mobile as you do on desktop. If you think there should be less content on mobile, just make sure that whatever is desktop-only isn’t critical for Google or visitors to know about as it won’t factor into indexing at all.
In other words, Google is strictly using mobile for the purposes of indexing. If you do anything that compromises what Google can scan on your mobile website, your rank will suffer as a result.
By keeping things consistent between mobile and desktop, you can reduce the chance of any issues arising.
Be sure to check out the full report for all of Google’s new recommendations. There’s information in there about what kinds of image and video formats to use along with information on lazy loading.
Key Takeaway
If you were adhering to Google’s former guidelines, it’s a good time to check back in with what it’s currently recommending. You may need to reconnect with old clients to let them know about the changes and to provide them with an update strategy.
Wrap-Up
There’s always new industry or consumer research that can help you do better work for your clients and make more money in the process. It’s just not always easy to keep your eyes peeled for it when you’re trying to focus on your job.
If you stay tuned to WebDesigner Depot each month, though, you’ll get a roundup of the latest research for web designers to give you a hand.
Featured image via Unsplash.
Source -
Popular Design News of the Week: February 10, 2020 – February 16, 2020
Posted:Sun, 16 Feb 2020 09:45:34 +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.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Avoid these 10 UX Design Fails
15+ Best Sites to Download Mockups
UX 101: Norman Doors
Neumorphism: A Trend that is Already Over?
A New Approach to Color (inspired by Dark Mode) in Our Design System
Drop.lol – Easy WebRTC File Transfer
Preloader Design Tips and Inspirations
Google Earth Just Released 1,000 Beautiful Wallpapers You Can Download for Free
How Deceptive UX Patterns Trick You into Doing What Companies Want
Design System Subtasks, by Step
UX Debt 101
How to Automate your Workspace and Write Less Code
Google Maps is Turning 15! Celebrate with a New Look and Features
Sketch 63 — What’s New?
Redesign: Gridniking
Youtube Tag Generator
Glitch Art Generator
New Marvel Eternals Logo Leaked
Brandless, the Pioneering Amazon Alternative, Shuts Down
A Dark Web Tycoon Pleads Guilty, but How was He Caught?
Facebook Buys AR Startup Building a 1:1 Digital Map of the Physical World
How to Save on Business Expenses as a SaaS Company
The Case of the Stolen Domain Names
Our Obsession with ‘Color Trends’ is Killing the Planet
Forecasting the Future of Design
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source -
5 Pitfalls of User-Generated Content (And How to Avoid Them)
Posted:Thu, 13 Feb 2020 10:45:46 +0000
It brings with it a host of benefits. UGC can greatly increase engagement with websites, as well as shareability and authenticity. Of course, along with benefits are a host of pitfalls, from having to take the time to moderate content, to establishing an engaged community to submit the content in the first place. It’s important to know the pitfalls of user generated content and how they can be avoided. With a clear strategy, and contingency plan in place, it can end up being a very successful and profitable way of driving engagement to a website.Here are the pitfalls of user-generated content and how to fix them.
1. It Needs To Be Moderated
In an ideal world, all user generated content would stick to the rules and adhere to the site’s standards. Sadly, that’s not the case. Users will upload whatever they like, from inappropriate sites, to offensive words, or totally irrelevant content.
How To Avoid It
Ensure you build in features where content can be moderated. For example, review companies such as TripAdvisor rely on pre-moderation. This means that all reviews which are submitted are sent through a screening process before being put live for everyone to see. This can take a couple of days to sift through depending on the levels of content which has been uploaded, but ensures the site holds its reputation and doesn’t post offensive, random or meaningless content.
You can also implement functions for the UX of a site which means users can report content themselves. This is the system many large companies such as Facebook and Instagram have built in. The pros of this is that content is available instantly for other users to see and engage with but means unwanted content can also get through.
2. People Use It For Their Own Personal Gain
Once user generated content begins to roll in, it can soon increase the site’s popularity, raise the share count, and have numerous benefits. And this will be something others will latch onto. Users can submit their own content for personal gain, rather than that of the site. For example, a competitor could be promoting a service or running a competition and pretend to be a random user to publicise and promote their own products or services.
How To Avoid It
This comes under careful moderation again, but instead of just looking out for offensive or inappropriate content, you look at the context of what has been submitted and whether it’s for personal gain of the contributor. It’s worth adding in code so that any links submitted, automatically default to “no-follow.” Otherwise you’ll have people uploading content purely for a backlink to their own site. Also check the links they are submitting, where they are pointing to and if they are promoting, selling or advertising anything. You can build in a script that picks up certain keywords and blocks them from appearing or flags up certain comments. This can be a useful feature to easily filter through the genuine and the spam content.
3. You Need An Engaged Community To Continuously Generate New Content
It can take a while for a community to become engaged and known enough to submit content. Many companies rely on user generated content as part of their marketing strategy, yet don’t account for the initial time taken to gather loyal readers and contributors. With no users, there will be no user-submitted content. Simple, but true.
How To Avoid It
Get people to know the company and build a loyal following before requesting content. If those wanting to submit something stumble across your site and see it is under-developed, you have hardly any social media followers and no presence, they won’t see the worth in submitting anything. Build a solid base and learn what motivates people to want to submit content and get them excited about joining part of your community. Users want to have their work, ideas and submissions featured on an aesthetically pleasing site that has been well-designed and feels premium. Ensure plenty of thought has gone into the design process of the look of the site, as well as making the user journey to actually submit the content an easy one. People that find the process easy and rewarding will be likely to return and recommend it to others.
4. Copyright Infringement
With an in-house content creation team, submissions usually have to go through a process before they reach publication. They will be checked, assets confirmed as royalty-free and they will have a knowledge of what you can and what you can’t do. By allowing users to submit content you can be opening yourself to a myriad of copyright infringements on everything from duplicate content to image usage.
How To Avoid It
To avoid receiving a hefty copyright infringement lawsuit in your inbox, it’s important you put certain steps into place. With user generated content there are many questions about who is liable for third-party content if it turns out to be false, improper or harmful; unless you make it clear initially, the blame could fall on the website owner. Ensure you have a contract and guidelines in place that stipulates any content users submit is their own responsibility and they are liable should any issues arise. Make guidelines that states images should be royalty-free and available for re-use before they submit them.
5. Unverified Sources Can Damage Website Credibility
When users are free to submit whatever content they like, there is bound to be a fair amount of fake news. You can never really know who every person who submits something is, nor where they are getting their facts and statements from. Negative comments or sources can damage a brand, particularly when other users have no way of knowing if the contributor is trustworthy or not. After all, “If it’s on the internet, it must be true…”
How To Avoid It
Many sites have come across issues with this, with popular social media sites having many users create fake profiles of companies or celebrities. This can be very damaging to a brand and is why it is an idea to have verified users. Twitter and Instagram are known by the well-recognised blue tick which ensures other users know exactly who is posting content. Other sites such as Waze and TripAdvisor award badges to those who are loyal and regular contributors. Not only does this give an incentive to continually contribute, but other users (and moderators) know they are more trustworthy and less likely to post spam or malicious content that could damage the reputation of a site.
Featured image via Unsplash.
Source -
5 Web Design Trends For 2020 That Are Here To Stay With Us
Posted:Wed, 12 Feb 2020 10:45:00 +0000
We are always looking for ways to improve our skills and services and what we create. Sometimes that desire to improve is a conscious one. Most of the time it’s in the back of our minds, yet active.Short term results can be OK, but good long term results are what you want if you are to grow in your profession. In terms of web design, that means subscribing to, and adhering to, design trends that have staying power.
You might have to stray from your comfort zone a bit to ensure your website users are engaged and allowed to remain in theirs.
And “What’s in it for me?” you might ask?
It’s not about you – but you’ll do just fine.
Browse BeTheme’s collection of 500+ pre-built websites to see what we’re talking about. These professionally-crafted design aids have precisely what we’re talking about – staying power.
Trend #1: Skip The Urge To Overkill. It’s Better To Take A Minimalist Navigation Approach
Web designers didn’t so much lead the way into minimalist nav design approaches as were pushed into it because of mobile design requirements. One result is that websites viewed on desktops have over time become much easier to navigate.
It’s something like trying to shorten sentences when writing, where you find you can convey as much information in fewer words and even do it better.
In the case of mobile navigation, it’s a matter of working with fewer links and less allowable space. Designers addressed the issue by limiting the number of pages in the primary menu and relegating links to sidebars or footers.
The result? An equally effective but much cleaner design.
BeRepair is an excellent example. This pre-built website tucked its nav menu neatly away beneath the hamburger menu icon.
Open the pop-out menu and you’ll see a good example of the increasingly popular less-is-more design trend with the easy-to-navigate links in a sea of white space.
BeGarden’s non-traditional navigation also benefits from the minimalist approach it utilizes in its left-aligned menu.
Trend #2: Use White Space To Add Greater Emphasis To Your Message
Brevity rules here. It’s all about doing more with less.
This even applies to videos; as illustrated at the bottom of this BeWine pre-built website.
The BeWeddingPlanner site demonstrates the power simple imagery can have in telling your brand’s story.
This example also shows how extremely effective a bare minimum of text can be.
Trend #3: Give Visitors A Human Face To Connect To
Avoid a “reader board” website design approach. Give your site a personality.
Adding warmth to your site is almost always effective. BeEcoFood’s lively header coveys a warm, personal message.
BeCatering also does a good job of adding a human touch. Doesn’t it appear as if the food is being prepared just for you?
Trend #4: Use Common-Sense, Universally-Accepted Typography To Create A Harmonious Viewer Experience
The point here is that not all font styles are 100% browser or device friendly. You need to test them or stick with sans-serif fonts like Arial and Tahoma, or a serif font like Times New Roman. There are others of course, so you should consider doing a little research.
Make it a point to pick a web-safe font so you can devote your creativity to other tasks. BeParty’s animation for example.
Or, an attention-getting design like you see on BeTheme’s website page with its minimal text, generous white space, and appealing and informative imagery.
Trend #5: Dark Mode Is Here To Stay. Don’t Just Try To Live With It, Embrace It
The dark mode trend is relatively new. It’s also very popular. So much so that it’s easy to see why it definitely has staying power.
It’s easy on user’s eyes; a good thing since it appears to these same users will be spending even more time looking at their screens and not less.
Although darker websites tend to be popular, good design dictates it is accomplished in the proper contexts. As is the case with this powerful BeBoxing hero image.
In this BeHosting example note how the dark mode trend can be used to make a site’s key messages dramatically stand out in a delightfully pleasing way.
Which Web Design Trends Are You Thinking Of Adopting This Year?
The nice thing about the 5 trends discussed in this article is that you won’t be wasting time and energy in investing in any of them as none show any signs of becoming a passing fad.
When traffic and/or conversions start to drop off it may be because a design trend has stopped working for you; in which case it’s time to try something else.
That should never be a problem if you stay focused on those design trends that aren’t going away any time soon. That will always be the case whenever you select one of BeTheme’s 500+ pre-built websites for the foundation for your web design.
[– This is a sponsored post on behalf of BeTheme –]
Source -
Exciting New Tools for Designers, February 2020
Posted:Mon, 10 Feb 2020 10:45:49 +0000
Are you starting 2020 off on the right foot? How about keeping up with those resolutions to learn or try something new?Either way, you’re in luck. This roundup is packed with new tools to help you through projects or learn new tricks to enhance your skillset. Here’s what’s new for designers this month.
Calcolor
Calcolor is a color tool that provides deeper information and meaning for every color in your palette so you can make better color choices. The tool has a contextual description for every HEX color code. You can use it to create and save digital color palettes or find better options for colors before you get too deep into the design.
Invisible Line Editor
Invisible Line Editor is a tool that helps you align text in a specific manner. You can click and drag to center, justify, or right- of left-align text. You can even download text and share. If nothing else, it is fun to play with to see how blocks of text might look in different alignments.
YourStack
YourStack, which is in public beta, is designed to help you share your favorite products with others. It’s a neat concept for reviewing tools and products. Plus, it has a nifty design that’s fun to peruse.
FlowMapp Personas Tool
FlowMapp’s Personas Tool helps you better understand your target audience by building distinct user personas. It’s deep mapping in a premium tool that can help create better design experiences.
Kinetic Slider
Kinetic Slider is a fully customizable WebGL slider based on PixiJS and Gsap. It creates an effect that lets you swipe to navigate between slides, include regular prev or next navigation, use a background or cursor displacement effect or background to titles RGB split effect.
Learn CSS Positioning
Learn CSS Positioning is an interactive article/game/tutorial to help you make the most of how CSS positioning works. Developer Ahmad Shadeed did an excellent job with this tool and presentation. It’s an amazing learning tool that’s actually fun to use.
LambdaTest
LambdaTest is an automated scheduler for screenshot testing. You can set specific time intervals and the tool will take screenshots of the desired URL. Results go to your inbox. It’s a good way to monitor websites.
Remote Stash
Remote Stash is a database of tools for contractors, freelancers, and remote workers to help increase productivity when you don’t work in an office with other people. Tools are sorted into categories to help you find what you need to do better work.
Flow Fields
Flow Fields uses a particle simulation to visualize a field of directional vectors. It uses Perlin Noise to construct a field of random (but related) forces in horizontal and vertical directions (that change over time). Go play around and watch the lines draw themselves.
BinarySearch
BinarySearch, which is still in beta, is a game to help you and your peers create rooms to practice mastering algorithms. Create problems and race to the answers. It’s a fun learning tool for sure.
Snack This
Snack This is a tool to generate text gifs in seconds that you can download and use online or on social media. Type in your words and get a screen of generated options, pick the one you want and download or export.
Shimmery Text
Shimmery Text uses SVG and GSAP to create a cool animated text element with editable controls.
Design Password
Design Password is a practical tool that’s just plain fun. It’s a tiny generator that creates passwords that are easy for designers to remember, with a description and visual cue to match.
No-Code Coffee
No-Code Coffee is a daily email newsletter packed that features a daily tool that is code-free and can help with projects. It’s free and can be a nice source of inspiration.
Monday Hero
Monday Hero is a tool that converts Sketch designs into Swift code so you don’t have to. Use it to create mobile code fast. The tool supports multiple languages, including Swift, Kotlin, Flutter, and React.
Motion
Motion is a free and simple animated SVG editor. It’s a downloadable tool that works on Mac or Windows. It comes with icons that you can edit and adjust to your liking. A premium version is also available.
Screenie
Screenie is a Mac app to manage screenshots. But the best feature is that you can search text inside screengrab images.
Greenhouse Vector Icons
Greenhouse Vector Icons is a set of flat icons in two formats and three versions with a “green” theme. If you are already starting to think about spring, this is the icon set for your projects.
All Design Conferences
All Design Conferences is just what it sounds like – a giant list of all the conference opportunities for designers in 2020. It’s based on a google sheet with a sortable, searchable design to help you plan training opportunities for the year.
Magical Rainbow Gradients
Magical Rainbow Gradients is a tutorial to help you create this fun effect. It uses CSS Houdini and React Hooks to create buttons with a rainbow effect and animation.
Chocolate Valentine
Chocolate Valentine is a fun comic-style font with fat letterforms and an almost child-like feel. It includes upper- and lower-case letters and numbers.
Dark Light
Dark Light is a handwriting style typeface with interesting letterforms and a thin structure. It includes a full character set and some alternates.
Giant
Giant is a trendy outline style typeface with an extremely high x-height. The character set is somewhat limited but could make for a fun display use.
Jet Brains Mono
Jet Brains Mono is an open source typeface designed for developers. It has an increased height for a better reading experience, weights with matching italics and is usable in 145 languages.
Red Hook
Red Hook is a double layer font with a light fill and slab outline. The design said it is inspired by the brick walls of Red Hook.
Thicker Black
Thicker Black is a super-sized extra black typeface that works for display. The free version has four variants for noncommercial use and the full version is robust with 10 weights.
Source
-
How to Deal with Confrontational Feedback
Posted:Fri, 07 Feb 2020 10:45:05 +0000
Sadly, some clients can be just as sensitive, and triggered as online trolls; You recommend an update to a logo they designed themselves (even though you didn’t know that at the time); You disagree with their suggestion that paying for backlinks is a legit marketing strategy; You ask them to clarify what “I don’t like it” means in response to the mockups you delivered.Before you know it, they’re providing irrelevant feedback, slinging insults at you, or poo-pooing every action you take. It’s not really professional or fair, but it is what it is, and now you’re left having to deal with it.
I recently had someone respond to an article I wrote, calling the design concept I was proposing “evil” and “s***”. It’s not like that hasn’t happened before. I’ve had my content written off as “stupid”, “pointless”, and once had someone feel the need to tell me they wouldn’t read an article I wrote because dating apps (the subject of the piece) only cater to “the attractive 1% of the population”. It’s not just trolls that will direct illogical and unfair criticisms at creatives either. I managed web design and marketing projects for years, and encountered a number of clients who were more than happy to personally attack our team, or voice unhelpful feedback when they weren’t satisfied.
So, today, I want to look at how web designers, and creatives in general, can more effectively handle unfair or unhelpful criticism of their work. Wherever your unfair or negative criticisms come from, keep the following in mind before you respond to any of them:
1. Understand Where the Negativity Comes From
Let’s be honest: People are super sensitive these days and it’s very easy to “trigger” highly emotional and volatile responses.
Social media is partially to blame for this as it makes it easy for people to hide behind their screens and avatars as they spew hate speech, abusive comments, and generally try to stir up trouble.
You also have to consider the state of the world — on a global scale as well as the personal worlds we build for ourselves. I think it’s a lot easier for some people to nitpick about something trite or something that goes against their personal beliefs than it is to deal with real problems in the world.
This doesn’t justify or excuse any unfair comments made of your work. But it helps to understand where the underlying anger, jealousy, or nastiness is coming from.
2. Remove Yourself from the Criticism
When people make comments about you or your work that’s irrelevant, illogical, or mean-spirited, it’s a tricky situation to be in. The same thing goes for clients who give vague, unhelpful, or hurtful feedback like “I could’ve done that myself” or “You don’t get it”.
Unfortunately, the response you have to these kinds of unfair criticisms could end up hurting you in the long run if you:
- Get defensive and fight back, potentially compromising positive relationships you worked hard to build;
- Take it personally and let it feed into insecurities you’ve tried to tuck away “Why should anyone pay me to build their website?”;
- Become fearful of taking risks and pushing boundaries and, thus, become stifled creatively.
Instead of letting your emotions run amok, you need to remove the “you” from the criticism. This goes for any kind of feedback you receive.
You are not the one under the microscope here; it’s your work that’s under scrutiny. If you can take yourself out of the equation, then the response you give becomes less about defending your personal integrity, skills, etc., which makes you more likely to respond calmly and professionally.
3. Choose the Best Response for the Situation
Whether a comment has come from a troll or a bad client, you need to quickly work through your options.
Here’s what you can do to determine the best response:
Is the Argument Clear?
For now, don’t focus on the validity of the argument. You just need to establish if the commenter is thinking clearly or being driven solely by raw emotion.
If the argument is something like “This is stupid” or “This isn’t good”, you know it’s going to be like pulling teeth to get a clear explanation of the grievance. The comment is vague and hurtful for a reason.
If it comes from a troll, it’s probably not worth responding to. They’re just looking for a fight. If it comes from a client, you will need to respond. The best thing to do is to ask, “Why?” Again, you don’t want to get personal. Just focus on getting them to give you specific details or examples of what isn’t good and what they actually want.
Is the Feedback Relevant?
Nothing is more frustrating than putting something out there, only to receive feedback on something else entirely… or something that doesn’t matter.
I recently wrote an article on a controversial subject, so I expected a lot of heated debate around it. There’s absolutely nothing wrong with that. What I hadn’t expected, though, was that someone would try to reduce everything I’d written to a spelling error in the piece.
Now, spelling and grammatical errors happen. When someone is nice enough to call them to my attention, I make sure they’re fixed right away. However, this person wasn’t looking for that. The comment was phrased so as to make my argument seem invalid because of one typo.
This is the kind of commenter that doesn’t want you to say, “Hey, thanks for pointing that out! We fixed the error.” They want you to open up the conversation and give them the floor to point out more issues with what you’ve done.
When you receive this kind of feedback or comment — one made for the sake of meanness or to demonstrate dominance over you — it’s probably best to leave it be. They just want to nitpick for nitpicking’s sake.
Is it Worth Debating?
Let’s say that you’ve received a comment that you don’t agree with, but is valid enough in its own right. Is it worth responding to?
If it sounds as though they genuinely want to have a conversation or healthy debate, then yes, it’s worth responding. That’s part of the reason why art is created: to get people thinking and talking.
Just remember to check yourself before you respond. This isn’t about you. You can certainly disagree with what they have to say and you can bring data to back up your argument, but you don’t need to be defensive.
Here’s what I always remind myself before I engage with someone who has a counter-argument for something I created:
There’s a lot to learn when you step outside the bubble of your work and look at it from someone else’s perspective.
I actually find that responding to feedback and comments makes me better at my job and I think this is something that would be especially helpful for web designers. Why? For starters, it helps me figure out what people like and dislike (especially as the market changes). I also enjoy getting to learn more about other people’s perspectives as it almost always inspires future work of mine.
Wrap-Up
Don’t be afraid to put yourself out there and to take risks in your work. I know it’s hard when one voice comes through so clearly, casting doubt on your body of work or your talent overall. But that’s just one person who’s made up their mind to be mean-spirited or unfair.
If you’re ever feeling down about something someone said and you can’t shake the comment, take a step back and look over the good feedback you’ve received. These are the people who appreciate what you do. And even when the feedback isn’t always positive, they’re the ones who’ve chosen to share feedback that’s productive because they want to help you become better at your job.
These are the people worth listening and responding to.
Featured image via Unsplash.
Source -
3 Lessons UX Designers Can Take From Netflix
Posted:Wed, 05 Feb 2020 10:45:57 +0000
If we look at this from a design perspective, there’s definitely something about the way the user experiences are designed that makes them more attractive than other movie or TV viewing options. Especially Netflix.Today, I want to put the spotlight on Netflix and give you 3 lessons you can take away from the platform’s design and features.
1. Make Onboarding Painless
Obviously, Netflix is a household name, so it doesn’t need to mince words on its website.
While you won’t be able to get away with a navigation-less website, what you can do to emulate the Netflix UX is to deliver just as brief and benefits-driven of a message above-the-fold.
Unlimited movies, TV shows, and more. Watch anywhere. Cancel anytime.
It perfectly sums up what users get while also taking the risk and fear out of it with “Cancel anytime.” Can you do the same? Totally.
While you’re at it, build a shortcut to the conversion point (e.g. newsletter subscription, SaaS purchase, schedule an appointment, etc.) in the same banner. Most of your visitors will need some time to educate themselves, but this will at least shorten the signup process for those who are ready to take action.
When that happens, make sure your conversion funnel is streamlined, too.
In the first step of Netflix’s signup process, it lets customers know how many steps there are while reiterating the benefits. The interface is distraction-free and easy to follow.
Next, users see plan options. Again, the UI is simple and easy to follow. The table comparing the features and value of each plan is a nice touch, too.
The final step is just as minimally designed. With a clean and clear interface, and a benefits-driven message, there’s no reason a user should have any problems getting through this process nor should they have any doubts along the way.
2. Use Your Data to Create a More Personal UX
Every year, it seems like we have a new law that sends web designers and business owners scrambling to strengthen their website privacy and security policies. And while it might feel like we’re losing control over all that big data we’ve gained access to in recent years, that’s not really the case.
What’s happening is that consumers want businesses to more carefully protect their data. Plain and simple.
There’s nothing in these laws that’s telling us to stop collecting user data. If that happened, I think consumers would be just as outraged. Personalization is one of those things consumers actually look for in the user experience — and the better a website can deliver on it, the more loyal they’ll be as customers.
As far as being responsible with user data, that’s up to you and your clients to manage. As for using the data you’re given, Netflix has shown us a number of ways to use only the most necessary data points to create a very personal experience.
First, you need to start collecting data that’ll help you refine the experience. Netflix empowers customers to help with this here:
With each movie or show’s page, users can:
- Add it to their personal viewing list;
- Rate it with a thumbs up or thumbs down.
Netflix uses this information to provide helpful recommendations throughout the platform.
The first spot it does this is here:
When customers are rooting around for a new movie or show to watch, this percentage should give them a clue as to how much they’ll like or dislike it. This, in turn, encourages them to rate more programs so that Netflix’s ranking algorithm can become more attuned to their preferences.
The second spot Netflix provides personalized recommendations is the main page. It actually uses this page in a couple of ways to deliver custom suggestions to users.
The first is with “Because You Watched” categories:
If a user spends enough time with a particular product, service, or content on your site, there’s a good chance they’ll like similar ones. So, this is a great way to build those suggestions into the UX.
The other way Netflix uses this page to deliver a personalized experience is through its categories. Note the categories I was shown above:
- Totally Awesome 80’s;
- Violent Asian Action;
- True Bromance.
I have a history of watching movies and shows in these highly specific categories, so it’s pretty awesome to see these aggregated lists ready to go for me. If you can deliver a tailor-made list of recommendations, you’ll find it much easier to keep customers engaged with your product.
3. A/B Test All New Features
I’ve been a Netflix customer since 2007, so I’ve seen it go through a ton of changes over the years. WebDesigner Depot has, too:
From branding to layouts, and pricing to features, Netflix always seems to be switching things up. But here’s the thing: Netflix always implements changes that are meant to enhance the user experience. And when they don’t? It simply rolls the platform back to the way its customers preferred it.
One of the first times I remember this happening was with Max, Netflix’s talking bot:
This wasn’t a feature that was shoved onto users. It would sit in its dedicated space, waiting to be interacted with. Max would then welcome you back and ask what you’re in the mood to watch. You could pick a genre or you could let the bot provide recommendations based on how you rate other movies.
In all honesty, I was on the fence about Max. It was entertaining and I loved finding hidden gems through it. However, there were too many nights where I’d use Max hoping to find the perfect movie… only to abandon it and find something on my own.
That’s why it was no surprise when Max quietly slipped away. I have a feeling other users were just as ambivalent about it as I was.
There are a number of lessons, UX or otherwise, you can take away from this:
- Be careful of trying the latest AI fads, they’re just too costly to invest in without hard data that proves that’s what your users want;
- Give a new feature enough time to build up steam and provide you with reliable metrics — I remember Max being available for about six months, that’s more than enough time to gather user feedback and decide if a feature is worth keeping or not;
- Personalization is great, but not necessarily if it’s at the expense of your customers’ time, sometimes the simpler feature is better.
Max isn’t the only example of Netflix playing around with its features. Do any of you recognize this?
This appears when the opening credits and theme song play at the start of a TV show. There’s really not a lot of value in sitting through this every time, and I’m willing to bet that Netflix saw that most of its users were manually fast-forwarding through them when it decided to try out this feature.
Here’s another recent feature that I think has some staying power:
While streaming services are responsible for the epidemic of binge-watching, it’s not necessarily in their best interest to allow customers to do so. Think of this “Are you still watching?” wake-up call as a form of ethical design.
This feature has been around for over a year, and it’s still going strong.
Bottom line? It’s really important to research your users when you’re in the process of building a website. However, there’s nothing more valuable than real user input from a live website.
Whether you plan to roll out a new feature or simply want to test the validity of one that exists, don’t run on assumptions. Use the new data coming in every day to further improve your design and features.
Invaluable Lessons UX Designers Can Take from Netflix
Although Netflix’s market share is slowly being chipped away at by the competition, it continues to reign supreme when it comes to streaming video services. I don’t see that changing anytime in the future either, considering how how long it’s demonstrated its willingness to innovate alongside evolving consumer needs.
And that’s really the key point I want to make in this post. While I could’ve pointed out its dramatic color palette or use of a responsive layout, we already are familiar with these concepts. The most important UX lessons we should be taking away from Netflix are the ones here.
Source -
3 Essential Design Trends, February 2020
Posted:Mon, 03 Feb 2020 10:45:19 +0000
Designers are embracing big, bold concepts with oversized elements, bright color, and even a little rule-breaking. (The best part? Most of these trends seem to overlap somewhat.) Here’s what’s trending in design this month.Homepage Headline Heroes
Homepage hero areas are shifting again from website entryways with plenty of text, CTAs, and options for users, to simple displays with big headlines (and maybe not much else).
Use of oversized headlines and text elements make it clear from the start what a website or design is about, but doesn’t provide a lot of opportunity for users to explore without scrolling. And that might be okay. Thanks to mobile dominance, users have become accustomed to the scroll. It may even be shifting to the preferred method of digesting content. (Even more than clicks or taps.)
Scroll is fast and allows users to glance at content and information with little delay or interaction.
Each of the website examples below are designed for just that:
Whiteboard opens with a large headline that encompasses their vision statement and nothing else. On scroll you get access to projects and a deeper dive into information about the brand.
Self-Evident Poems doesn’t actually scroll but moves into prompts for usability. It’s rooted in the same homepage headline hero area that’s designed to draw you into the content.
Illume has additional content below the scroll beneath a giant headline in the hero area. What this design does differently is that it does include some imagery, although it is still secondary to the text because of typography size.
Peachy Tones
Beat the Winter blues with a dose of Spring color! Peachy tones seem to be everywhere.
While this trend might be an evolution from other bright colors such as pinks and oranges that have been popular, it has a lot of practical application. Use it as a dominant color such as Grain & Mortar, and Monokai, or to create an accent like Kevin van der Wijst’s portfolio.
Peachy tones provide plenty of options and can be more pinkish or push toward orange. The color can be highly saturated or fairly pale. The nice thing about peachy tones is that they aren’t that overpowering, and work equally well as background or foreground color. Peach can get a little tricky when used for typographic elements, depending on the font style and contrasting elements.
Larger swaths of peach tend to stand up against other elements better than tiny ones. Note that even as an accent in the featured portfolio below, peach tones encompass a significant portion of the canvas. (You might also want to click through and play with that design, which also includes cool liquid animation. You can even make the peach area take up most of the screen.)
Outline Fonts
This trend is exploding in use from small projects to big brands. Outline fonts are a big deal. It’s one of those trends that you would shake your head at and say “no way” if you didn’t see it in action … and used so well.
Outline fonts can be a challenge. They create an effect that’s almost the opposite of the oversized typography in another trend mentioned here. But they do create an eye-catching effect that draws you into the words on screen.
Outline fonts are almost always paired with the same font filled. It creates and yin and yang effect that can help keep users reading longer and engaging with content. The contrast between and outline and filled font also put specific emphasis on the bolder element in the lettering pair.
The trick to making it work is not to get too crazy with the design and design outline fonts so that there’s plenty of contrast for the letters to remain readable.
Fitlab is the busiest of the examples of this trend with multiple use of outline fonts and even a quick-moving video roll. Put it all together and the emphasis is on “personal” training. It works.
Chilly Source uses an outline font for its brand name so that you get another intro to it without too much brand in your face. (The name is mentioned three time on the homepage.)
Vitesse Trucking uses outline text to tell you what they do throughout the design. Text is information but also serves as an art element with movement in the parallax-style scrolling design. Outline type elements mirror smaller filled words and even include some layering and overlays to keep the eyes moving. It’s an interesting use of this trend in an industry where you might not expect it.
Conclusion
I’ll be the first to admit, you probably won’t find me designing with a lot of peachy coloring. While it works for these projects, it’s not a favorite of mine.
On the flip side, I adore all the outline font options. It’s funky and provides depth to text elements that we haven’t seen a lot of. How about you? What design trends can you see yourself using in the coming months?
Source -
20 Freshest Web Designs, January 2020
Posted:Thu, 30 Jan 2020 10:45:03 +0000
January 2020 is picking up where 2019 left off, with lots of animation and even more bold, bright color schemes. We’re also seeing an unusual number of luxury sites this month, and as always there’s a strong set of startups trying to break into the market. Enjoy!Plink
To take on giants like PayPal, you need a compelling brand and a simple message, that can also wow with its first impression. Plink hits the nail on the head with its 3D animation.
Madame Turfu
Are you wondering what 2020 will hold for you? Why wait to find out when Madame Turfu can predict the future with this wonderfully fun set of digital tarot cards.
Nathan Taylor
What’s not to love about Nathan Taylor’s playful site? There’s so much to explore and do, but our favorite part is the different lighting modes.
Meatable
Selling Meatable is a tough prospect; it’s real meat, grown in a lab instead of taken by animal slaughter. The simple step-by-step site does a great job of explaining.
Sussex Royal
Whatever your view of Harry and Megan, there’s little doubt that their website oozes class. For a promotional site that isn’t actually selling anything, it’s a strong presence.
Emotive Feels
This fantastic manifesto from design agency Emotive Brand illustrates an A–Z of potential brand emotions with simple animations that would grace the cover of a Bluenote release.
UN\REAL
Swiss design agency UN\REAL’s site is a wonderfully chaotic love affair with web animation. It’s the type of site we can click around for hours, enjoying the sharp transitions.
Kate Jackling
Sometimes the best design takes a step back and allows its subject to bask in all the attention. Kate Jackling’s site does this, letting her gorgeous photography take center stage.
Helias
Helias has fully embraced the blob trend with a flood-filled area of color supporting each of its various products. It’s appropriate, engaging, and breaks up the formal grid well.
Klokki
Sometimes the hardest sites to design, are the ones for products about which there’s very little to say. Klokki is one such product, but its site is bold, confident, and persuasive.
Jonnie Hallman
Jonnie Hallman’s simple résumé site benefits greatly from the household names he’s worked for. We really like the details, like the way the monogram changes color as you scroll.
eaast
eaast is a design and development partnership from Paris that’s fully embraced the Memphis style. Their simple site proves you don’t need years’ worth of work to sell yourself.
Pantheone Audio
Proving that elegant scrolling is still very much a thing in 2020, Pantheone Audio uses the scroll to seamlessly navigate a luxurious site with a complex grid underpinning it.
Leaf
After decades of the best a man can get, the half of the species that shaves daily seems to be obsessed with reinventing the process. Leaf taps into that simple marketing approach.
Mociun
Most sites that sell jewelry miss the spirit of the pieces by focusing on the financial value. Mocuin gets it right with an on-trend color palette and stunning product photography.
Jon Way
Jon Way’s portfolio features work from over a decade of art direction. There’s a clear, consistent aesthetic thanks to a lovely ‘static’ effect that plays across the whole site.
Kota Yamaji
There’s some amazing work in Kato Yamaji’s portfolio, but what really strikes home is the amount of color he manages to squeeze in.
Robb Owen
We’ve seen lots of animated vector avatars over the last couple of years, but rarely do we see one with as much personality as Robb Owen’s. The cursor tracking makes it feel real.
Glasgow International Festival 2020
The Glasgow International Festival takes place between 24th April and 10th May 2020. Its site features some distinctly celtic typography, and tons of bold color.
Megababe
Megababe is taking on the beauty industry with a range of body products that are insanely popular, and as positive as its super-confident sales site.
Source
FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.