Tag: Webdesigner Depot

Brainstorming the Wiki

Before the blog took off, before Tumblr became the face of fandom, but around a year after Geocities launched as a platform for Justin Timberlake fan sites, there was The Wiki. We looked upon The Wiki, and we saw its potential as a platform for crowdsourcing knowledge, collaborating, and educating. We saw that it was good.

Then Wikipedia was founded at some point, and the rest is history.

I love well-maintained wikis to a fault. Wikis have been a large part of my continuing education in web design, random trivia, and the minutiae of video game mechanics for a long time, now. Anyone who learns stuff on the Internet owes a lot, directly or indirectly, to wikis and their less-community-oriented cousin The Knowledge Base.

Even though many of the publicly available wiki software options are dated and confusing to operate and organize, they continue to power much of the educational portion of the web. There are more modern options, but most of the ones I’ve found are SAAS platforms for building in-organization private wikis.

Ladies and Gentlemen, wikis and knowledge bases need all the love we can give. That’s what this article is about: brainstorming ways to give back to the platforms that have given us so much. I’ve got some general ideas, and some very specific tweaks to the wiki formula that you might consider implementing on your own wikis, should you ever need to build one.

General Front and Back-end Upgrades

Wikipedia still uses a theme that doesn’t have a maximum width on the content area. In fact, I’ve looked at theme options for MediaWiki (the software that runs Wikipedia), and most of them are incredibly dated and not terribly user-friendly. Ditto for DokuWiki (though to be fair, there have been some fairly good themes adapted for it), PhpWiki, and many others.

This is at least in part because most of the wiki software still in use is ancient by IT standards. It can be difficult to adapt modern front-end code to old platforms (depending greatly on how they were made). The age of these platforms shows in the back-end, too, as they were clearly designed by software/data engineers, and tend to be harder for anyone else to use.

Oh, just about anyone can still learn these systems, but it’s a royal pain. To put it simply, we need new options. We need a whole new generation of (preferably self-hosted) wiki software that combines everything the older projects have learned with everything we now know about usability, UX, and content management. And for the love of all that is holy and good, we need something easier to design and code new themes for.

Take Wiki.js, for example. It’s a relatively new project which is definitely on the right track. Now if only there was a PHP version, or at least an easier way to install Wiki.js, I’d be a happy camper.

(If you’re a dev working on a new wiki project, please link it below.)

In-Page Search for Long Pages

I know, I know. I’m actually about to recommend adding a JavaScript-dependent feature to a website. But I’ve been on some very, very long wiki pages that really could have used an in-page search function. Yes, most browsers have this sort of thing built in already (and there’s your fallback), but many users don’t know all or even half the features of their browsers. Having an in-page search would be just plain useful for when you need to find a very specific bit of information, and the table of contents isn’t cutting it.

Sortable tables

Depending on what your wiki is about, you may find yourself dealing with tables a lot more than you’re used to. Sometimes, a table really is the best way to showcase a large amount of data. If you’re cataloging, for example, all of the best books in a particular genre on one page, that table is probably going to get really long.

So (and it pains me to say this) it’s not unreasonable to spice up your tables with some JavaScript to make getting to the information you want easier. If you can restrict, say, the data visible in your table to specific year, or a specific author, you’re going to save your users a lot of time.

Favorites and Recently-Visited Pages

When I find myself returning often to a wiki or knowledge base (that’s not Wikipedia), I often return to the same pages as before to refresh my memory on the minutiae of one thing or another. For example, I might need to look up a more obscure CSS property a few times before it really sticks in my brain. If you have users doing that, it may be helpful to provide them with a list of recently-visited pages for easy access, or a way to build a list of favorites.

If member sign-ups are a thing that you want, you could use these features as something of a selling point, even. You may have noticed that all of the tweaks I’ve listed so far are tied to convenience. Never underestimate the power of convenience.

Final Thoughts

Wikis in general are a smart system. Make a link to a page that doesn’t exist yet, the page is generated automatically, then you go and add stuff to it. It’s an “organic” way of creating content and navigating it, too. Knowledge bases are usually more hierarchical, and that formula works for them. These systems do not, in my mind, need a complete revolution.

The theory behind them is sound enough that these systems are still in use despite the inconvenience presented by older (and sometimes incredibly complex) platforms. I’m eager to see what designers and developers could do with wikis and similar platforms while knowing what we know now. We’re accumulating new knowledge all of the time, and with all due respect to blogs, sometimes we just need a good wiki for it.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/brainstorming-the-wiki/


How to Tackle a Redesign

Stepping into a website that’s already well-established isn’t always easy. For starters, you have to be careful about not stepping on anyone’s toes (the client’s or even the previous designer’s) when providing feedback or suggestions on a new direction for the site. Secondly, there’s much more at stake with a redesign. Not only could a wrong turn hurt an established brand’s identity, but there’s also the disruption to SEO to consider.

That said, redesign projects can be incredibly rewarding. With from-scratch designs, there’s really no baseline to compare your work against. With a redesigned website, you can look back at the performance of the last iteration and compare it against what you’ve been able to accomplish.

If you’re intrigued by the prospect of tackling a redesign project, but spooked by the potential to do damage or get lost in the process, this guide breaks down what you need to do.

Phase 1: Ask Why

When approached with a redesign request, the first thing you should find out is, “Why?”

When it comes to redesigns, there are a number of reasons a client might be dissatisfied with the site as it stands:


Businesses don’t always maintain the same direction or goals. And sometimes a brand discovers its true identity after launch.

Asana’s branding story is an example of this. This is how their website and SaaS platform looked before:

As they explained, the true personality of the brand wasn’t effectively communicated through the logo, colors, and overall design. After assessing how they wanted their brand to be viewed, they pushed ahead with this redesign:

Missing Functionality

When the site was originally designed, your client perhaps hadn’t considered that they would need some key functionality for it.

Outdated Design

Design trends change so much in such a short amount of time. Clients that are cognizant of these changing trends may approach you if they feel their site is being left behind.

Not Responsive

The original designer failed to anticipate the move to mobile-first and now your client is in a bad spot. The Deep End’s case study demonstrates how even the most technologically savvy of agencies could have missed this opportunity. But they were quick to remedy the problem:

Conversions Suck

They were initially excited about the launch of their website. Then, a month passes. A few more months pass. And, soon, a year has gone by and they have seen no results from it. They want to know what’s wrong and get it fixed immediately.

Be sure to get them to explain how they believe this redesign will help them achieve the website’s goals (and define exactly what those are, too).

Phase 2: Check the Data

Your client tells you what the perceived problem is with their site. Now, you need to dig into the data to see if it checks out. The client may be unhappy with a certain aspect of the site or the design as a whole. Their intuition is likely right, but you have to verify that the problem doesn’t lie somewhere else.

During this phase, dig deep into the following areas:

  • Google Analytics
  • Competitive landscape
  • Keyword research
  • UI design
  • UX organization

Then, look at the entire website. Every. Single. Page. Do a full audit of what they have.

From this, you should be able to draw a conclusion about the true problem areas. Are there too many pages? Is the design misrepresenting what they do? Does the font need a refresh? Is there a key feature missing? Are images outdated or unoriginal looking? Build your redesign proposal from this and bring it to the client.

Phase 3: Devise a Plan

If you’ve never done a redesign project before, use the project workflow and checklists from your standard design projects. Review the steps and milestones against what you need to do in this redesign. Then, amend the steps, establish new milestones, and shape the redesign plan.

The tricky thing about this is that each redesign project will target different elements of a web design, which means adjusting your workflow from project to project. For instance, the redesign might only target:

  • Branding like the logo, color palette, typography, imagery, iconography, etc. in which case, it might only be a superficial redesign;
  • Navigation structure for improved user flow or a complete breakdown of the navigation to remove unnecessary pages;
  • Home page content for clearer messaging and user persona targeting;
  • Customer flow which was preventing the brand from capturing more conversions.

It’s not as if you don’t have experience with each of these elements. However, it’s the manner in which you work on each or how many of them you work on that will differ from a traditional web design. So, create your documentation, but leave it open to adjustment per the project’s requirements.

Phase 4: Implement the Redesign

Unless the website was a complete mess or total failure previously, chances are good your client will ask you to be careful in how dramatically you alter the design and content. To preserve the business’s integrity, you’ll have to strike a balance between creating a stronger identity for the brand while not completely destroying all recognition they’ve established with customers.

Site maps, storyboards, and prototypes should all factor into your process now (if they hadn’t already). These tools give you a chance to tackle the redesign in incremental steps and to check in with the client before moving on. You might even want to think about running A/B tests on the live website to confirm theories you have about problematic elements before implementing anything in the redesign.

Also, don’t forget how these changes will affect SEO. Unless the site is moving to a completely new domain, you will have to do what you can to preserve link juice. This means putting 301 redirects in place, maintaining the URL structures for the most popular pages and posts, putting a greater focus on the most successful keywords, and so on.

Should You Accept That Redesign Request?

I see no reason why you shouldn’t start accepting redesign requests, especially if you appreciate the problem-solving aspect of the work. That’s, of course, not to say you can’t flex your creative muscle here, but this sort of work will definitely appeal to those of you who like to strategize and test theories in design.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/how-to-tackle-a-redesign/

10 Data Visualization Best Practices for the Web

Data visualization has quickly become a standard for disseminating information on the web. It’s used across a range of industries, from business intelligence to journalism, to help us understand and communicate the insights within data.

Our brains are primed to process information that’s presented visually, making it much easier for us to understand data visualized in charts and graphs than data listed in tables and spreadsheets. A great data visualization should leverage these strengths of the human visual system to display data so that it can be readily absorbed and understood. It should take into account what we know about visual processing to enhance and ease the viewers’ experience of the data.

With so many tools and frameworks now available for building these graphics, it’s time to go back to basics. What makes data visualizations effective? What guiding principles should we follow when designing with data?

The following best practices will help you design rich, insightful data experiences.

1. Design for a Specific Audience

Visualization is used to reveal patterns, provide context, and describe relationships within data. While a designer holds no influence over the patterns and relationships within a given set of data, she can choose how much data to display, and what context to provide, based on the needs of the audience. After all, just like with any other product, a visualization is meaningless if its viewer can’t use it.

Visualizations for novices should be structured, unambiguous, and engaging. They should spell out directly, in words, what viewers should take away from the data.

Visualizations for expert audiences, on the other hand, can show a more granular view of the data to allow for reader-driven exploration and discovery. Detail and data-density should trump simplicity and clarity.

2. Use (but Don’t Rely on) Interactivity to Facilitate Exploration

Here’s a sobering number: only 10-15% of visitors to interactive visualizations on the New York Times website actually click buttons. The New York Times graphics team produces some of the best work in the business, and hardly anyone interacts with them!

The New York Times graphics team produces some of the best work in the business, and hardly anyone interacts with them!

What this suggests about interactive visualization design is that we cannot rely on interaction for building understanding. Key data must not be hidden behind interactive elements, and instead should be available without interaction.

What interaction is great for, however, is allowing for the integration of additional data (that might otherwise be excluded), to allow interested viewers to explore a dataset more deeply. Nathan Yau of Flowing Data has cornered the market on this style of interactive visualization, as seen in his graphics on causes of death and life expectancy.

Alternatively, interaction can be used as a hook; an attention grabber that gets your audience personally invested in the project before they can navigate far, far away. Check out this playful piece on handwriting and culture from Quartz. The piece kicks off by asking readers to simply draw a circle, before going on to outline an analysis of cultural shape-drawing that features some simple, but effective, visualizations.

Similarly, The Pudding recently released a interactive visualization to teach readers about the birthday paradox. While most non-statisticians probably find the birthday paradox, a standard problem in probability theory, quite dry and unintuitive, this visualization makes it seem downright fascinating. The way the creator incorporates the interactions of recent users makes the whole experience quite relatable.

Both of these interactive examples work because they allow the viewer to participate in the data, without requiring interaction for understanding.

3. Use Visual Salience to Focus Attention and Guide the Experience

Visual salience, the characteristic that makes a visual element stand out against its surroundings, is a powerful tool in data visualization. It can be used to guide the user’s attention to the most important information in a visualization, to help prevent information overload. By using visual salience to highlight some details and suppress others, we can make our designs clearer and more easily understood.

A few visual variables—color and size, primarily—are our keys to creating and controlling visual salience.

Color schemes are key to great data visualizations because color, as we all know, is particularly good at breaking camouflage. We can use warm, highly saturated colors to highlight key data points, and apply cool, desaturated colors to push less important information into the background.

Size is also pretty self-explanatory. Large elements demand more attention than small elements, so scale up elements that you’d like viewers to read first, and scale down text and elements that are less pertinent.

4. Use Position and Length to Encode Quantitative Information and Use Color to Encode Categorical Information

Cleveland and McGill’s well-known work on information visualization investigated the effectiveness of visual encodings (i.e. the mapping of data dimensions to visual properties). In their findings, they ranked different types of visual encoding according to how accurately we perceive them, giving us this (simplified) list:

  1. Position along a common scale
  2. Length
  3. Angle
  4. Area
  5. Color

What this suggests for data visualization design is that our first choice for displaying quantitative information should be to encode data by position (as seen in the classic scatterplot and bar chart). As opposed to angle-based encodings (like pie charts) or area-based encodings (like bubble charts), position-based encodings help viewers make more accurate comparisons in less time.

That isn’t to say, however, that all visualizations must be bar charts or scatter plots. It’s just a good idea to keep these fundamentals in mind when exploring new and exciting ways of visualizing data.

What I really want to emphasize here is that color should not be used to encode quantitative information, and instead may be used to encode categorical information. That is, we can use color to show that different bits of data belong to different categories.

5. Make Structural Elements Like Tick Marks and Axes Clear but Inconspicuous

Whether or not you support Edward Tufte’s extreme approach to minimalism in design, do yourself a favor and strip the visual clutter from your charts. Make your data shine by creating visual contrast between data elements and non-data elements, like Nadieh Bremer has done in her award winning visualization on birth times in America.

Remove any structural elements (like backgrounds, lines, and borders) that don’t work to clarify the data. Attenuate essential structural elements (like axes, grids, and tick marks) that would otherwise compete with your data for attention. Style grids in light grey at a maximum weight of 0.5 pt, and style axes in black or grey with a maximum weight of 1 pt.

6. Directly Label Data Points

Every visual element that encodes some data needs to be labelled, so that the viewer understands what it represents. Simple, right?

Wrong. Far too many designers rely on legends to tell readers which symbols or colors represent which data series in their charts. Legends, while easy on the designer, are hard on the reader. They force readers to scan back and forth between the legend and the data, putting unnecessary strain on readers’ working memories.

A better alternative is to label data series directly on the chart. It’s often more of a challenge, but hey, you’re the designer. Your job is to do the work so the reader doesn’t have to. In the example below, Nathan Yau has done the work to avoid using a legend, creating an interactive small multiples display with lots of direct labeling.

7. Use Messaging and Visual Hierarchy to Create a Narrative Flow

The best visualizations tell compelling stories. These stories emerge from the trends, correlations, or outliers in the data, and are reinforced by the elements that surround the data. These stories turn raw data into useful information.

At face value it might seem like data visualization is all about the numbers, but a great data story cannot be told without words. Messaging, with a clear visual hierarchy, can be used to lead the reader, step by step, through the data.

The title of a visualization, for example, should kick off the narrative by explicitly stating the single key insight the reader should take away from the visualization. Tiny annotations scattered amongst the data can provide support to that narrative by drawing attention to outliers or trends.

What I’m trying to say here is: give the viewer a hand and tell them exactly what to look for in the data!

8. Overlay Contextual Information Directly onto the Chart

As I just mentioned, we can use annotations in a visualization to help create a narrative flow. Sometimes we can add graphical elements to make those annotations even more meaningful—to connect that information to our data more directly.

Take this graphic from Susie Lu, for example. The “Summer Blockbusters” and “Oscar Season” overlays give meaning to peaks and valleys that might otherwise seem random. They help the viewer understand the significance of the data in a way that’s more direct than captions or annotations alone.

9. Design for the Mobile Experience

Static visualizations, typically published in bitmap image formats like JPG and PNG pose an obvious challenge for mobile viewers. The beauty of many data visualizations lies in their visual details—in tiny data points and subtle encodings—and many of these details are lost on small screens in static formats.

Case in point: Accurat studio’s beautifully complex work on Nobel prizes, which looks fabulous full-size in print and on a high-resolution retina display, is next to illegible on a mobile device.

To design for the mobile experience, either build responsive visualizations with a JavaScript visualization library like D3.js or Highcharts, or create multiple variations of the same static visualization for print, desktop, and mobile.

10. Balance Complexity with Clarity to Foster Understanding

All of the best practices I’ve touched on today boil down to one thing: finding the right balance between complexity and clarity that aligns with the needs of your audience.

It’s always tempting to make a beautifully detailed, subtle, exploratory visualization, but that’s rarely the most appropriate approach. Be considerate when designing your graphics—allow the knowledge and goals of the audience to dictate which and how much data should be included, and curate the data to tell the story you want to tell.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/

What’s New for Designers, July 2018

What kind of projects are you working on? It might be the hotter days (with more time at a computer) that have me focused on ways to enhance productivity. In this month’s roundup of new design tools and information, you’ll find plenty of helpful items that relate to workflow.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!


UnDraw is a curated collection of SVG images that you can use for free, without attribution. All of the images fall under the MIT license and the site is packed with scalable images for web projects. Embed tiny SVGs or edit the code and make each image your own before adding it to your design. (One of the most fun features? You can browse SVGs by color.)


Placid allows you to create custom social media share card images via API. Choose a pre-designed preset and automate image creation (and show social users exactly what you want). The tool is free with limited use and there’s special beta pricing for more power users.

HTML Email

HTML Email is an email design system for Sketch. Download one file and get 10 templates for mobile and desktop emails with plenty of reusable components to make building HTML emails easy. Using the system will help create more consistency in email design, saving you time with a reusable grid, modules, styles and colors.

Gradient Joy

Gradient Joy is a placeholder image generator that puts pretty gradient boxes in image areas. Just add an image size, pick a color (if you like) and pop the simple code in as a placeholder.


ColorSpark is a fun color gradient tool that helps you generate cool color combinations. (And it makes this list as the second gradient tool because they are just so nice) Start with a color you know or click the “generate” button for a random, but well-paired, color combination.

MapKit JS

MapKit JS allows you to embed Apple Maps on your website and search using location-based tools. The JavaScript API allows for direct embedding of interactive maps; it does require authorization via JSON Web Tokens for initialization and come API calls.

Open Logos

Open Logos is a project to help you find free logos and divots for other open source projects. There are a few rules to make sure that each logo only goes to one project, so make sure to read the instructions to get started and claim a logo.

Scrolling Gradient

Scrolling Gradient is a fun little pen with a background gradient that changes color as the user scrolls down the page. It works by using two gradients that are overlaid to create a nifty scrolling effect.


Sensorama collects samples from all the sensors on your iPhone and sends the data to you via email. It activates with your prompt and the developer is looking for additional help on GitHub. Plus, it is fun for data geeks.


Maze adds analytics to your design prototypes so that you can think about projects in progress in the same way you would monitor live websites. Create actionable paths and test the results with real users, then analyze results in a live dashboard. And you can do it all without adding code to your design. Maze is free for a single project and also offers paid plans.


Roller is a Sketch plugin to help you find and fix inconsistencies in design projects. The creator calls is “spellcheck for Sketch.” The free plugin is easy and pretty effective.

Free Illustrations

Free Illustrations is a collection of icons and images that you can use for projects. All of the illustrations are vector-based and the collection is updated weekly. (So there’s always something new to play with.) The project is thanks to Lukasz Adam.

Tropical Icons

Tropical Icons is a set of 50 free scalable vectors that evoke feelings of summer fun. The set includes icons in outline, outline with color, and color settings. Plus the design make it easy to switch the color palette to match your website colors.

150 Vector Icons

150 Vector Icons is a fun set of line icons in 15 different categories. Every style is easy to edit, customize and make your own for pretty much any project. Each icon also comes in color and monochromatic styles in AI, EPS and PNG formats.


API.video is billed as a way to create your own Netflix using a scalable webservice with an API based on the REST standard. You can host and broadcast videos anywhere in the world. Toll pricing is based on encoding, hosting and streaming needs.


Whimsical is a visual design workspace that can help you mange projects. Create flowcharts or wireframes in a collaborative environment. The tool is adding new elements all the time and has promised a Sticky Notes feature next. The tool is free for up to four diagrams a month, after that the model switches to paid plans.


Sonar is now open source. The tool is Facebook’s creation and is designed to debug mobile apps. Plus, you can do it all from a single desktop interface. It is available for us as-is or through a plugin API.


Overflow is a collaborative design tool that’s currently in beta. Use it to help create user flow diagrams to help clients or team members better understand projects. (You might not go back to your old method of showing mobile app user patterns.)


Tenori-Off is a fun little distraction. The smart music sequencer uses some back-end machine learning to match drums to a melody. It might be the most interesting thing you play with all day.


DevTube might be your new go-to video channel. It’s a lot like YouTube, but all the videos are made for web developers with topics, talk and tutorials that will make your work life better or inspire you to try new things. Sort by type of information, favorite speaker or even channel.


Codementor is designed to connect developers to programming and freelance jobs. The website is an interface to find someone who can help you solve design problems as well as workplace connector. The site claims to already have 8,000-plus developers on board.


Alpha is a fun and modern sans serif typeface. It includes four styles – medium, regular, light and inline – with a full upper- and lowercase character set.

Fivo Sans

Fivo Sans is a neo-grotesque sans serif with a strong stance and high style. It is fairly neutral and with multiple weight and styles, can be used for almost anything. The complete font – including six families – is free to use and packed with characters.


Heptal is designed as a multipurpose typeface for wide usage. The thick stroke, block style makes an excellent display option. The character set includes letters, numbers and some punctuation, but is otherwise somewhat limited.


Leira is a hand-drawn style typeface with an all uppercase character set. It makes a fun and interesting option for display uses. The font also includes numerals and some basic punctuation.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/whats-new-for-designers-july-2018/

Popular Design News of the Week: July 9, 2018 – July 15, 2018

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.

Visual System


You Know a Web Site Sucks If…


Physics-Based Background Scroll Effects




Visitors – Google Analytics in your Menu Bar


Getting a 99/100 Google PageSpeed Score


Design Systems: Everything You Should Know


How to Use Color Fonts on the Web


How to Choose the Right Technology for your Next CMS Project


700 Screenshots of Developers’ Websites


The Design Tool Dilemma


The Mythology of Design


Making Lists Easy


Procreate – Now with Warp, Liquify, Symmetry, and More 


You Peeps Agree?


10 Creative Branding Hacks to Help You Stand Out from the Crowd


Ryeboard – A Virtual Whiteboard for your Ideas


Top 25 Tools for UX Designers


17+ Awesome Examples of Circular Menu Elements in Web Design


How to Use Chrome DevTools like a Pro


“Make it Pop”: How to not Suck at Giving Feedback


Affinity Designer for iPad is Out Now


Pattern Library First: An Approach for Managing CSS


I Created a Font Memory Game, How Fast Can You Complete It?


Creative Burnout is Inevitable. Here are 10 Ways to Beat it


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

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/popular-design-news-of-the-week-july-9-2018-july-15-2018/

Comics of the Week #237

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

No extra costs

You get what you pay for


Low tech budget

Can you relate to these situations? Please share your funny stories and comments below…

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/comics-of-the-week-237-2/

Help! I Can’t Stop Wasting Time…

There are so many distractions when you are a freelancer. From kids coming into your home office or time sucks like Facebook, you need to focus and be more efficient. The key is arming yourself with the right tools for the job.

Here, we’ve gathered a list of online time savers (productivity tools for the win!) plus tips for managing distractions.

Create the Right Working Space

Freelancers, if you want to work from home, you need an actual work space. Using the kitchen counter or just putting a desk in your bedroom is a recipe for distraction. (You’ll see the dishes piled up or find 10 other things that need your attention when what you should be doing is working.)

  • Create a dedicated workspace—preferably one with a door and that isn’t used for anything else.
  • Look for a room with a window. Natural light will keep you feeling refreshed and focused.
  • Make sure you have an ergonomic setup with a good chair, appropriate desk setup and comfortable temperature.
  • Keep your work space clean and clear from clutter. Spend the last few minutes of each day tidying up so that every day starts with a fresh place to work. Dirty spaces are not productive spaces.

Set Office Hours

You need to set office hours and enforce them to family, friends and clients. Put a sign on the door if you have to.

Office hours don’t have to be a standard 9-to-5 workday (that would take some of the flexibility out of freelancing), but you should have some work hours that fall during the work times of your clients so they get information and can communicate with you easily.

Set a workday schedule and honor it. That means kids and spouses need to stay away from your work space during posted office hours unless it is pre-planned or part of a break or lunch time. Creating this flow will help give you the space you need to focus.

Set additional office hours for times when you actually answer the phone. A staff of one can get overwhelmed with phone calls. Set a schedule for answering and returning calls each day and let everything else go to voicemail. (You can even post phone hours in your email signature so clients know the best time to call.)

Turn Off Push Notifications

The easiest way to avoid distractions is to remove them from your devices. From mobile push notifications to pop-ups on your desktop, these tiny distractions eat away at the day.

  • Freelancer rule No. 1: Turn off push notifications.
  • Freelancer rule No. 2: Turn the volume off on mobile devices.
  • Freelancer rule No. 3: Use a blocking app if you can’t do it alone.

Tool to try: Freedom allows users to schedule the amount of time on specific apps and websites. If you have a bit of an “addiction” to Facebook, give it a try and put some real limits on usage.

Put on Headphones

Block out the world with a little white noise. Invest in a good set of headphones and use them to help avoid noise distractions.

Find music that fades into the background. (Something without ads is best for most people because you won’t hit periods of loud sounds or over stimulation.) Avoid podcasts or audiobooks that can actually become a distraction while working.

There’s another bonus to headphones as well: When you are wearing them people immediately think you can’t hear them or are busy and they might be less likely to disturb you.

Use a Time Tracker

Do you know exactly how you are spending time or where those distractions are coming from? Do you ever ask where the day went? (And why you don’t have anything to show for it?)

If you want to get a good handle on what you are doing—particularly for designers and developers that spend most of the day on a computer—enlist the help of a time-tracking app or tool.

There are two categories of time trackers:

  • Time tracking apps that help you manage tasks and billing for your freelance business. These tools help you know exactly what time you spend on what projects (and who should get billed.) Look for a tool that will track across multiple devices (if you tend to lose time in sneaky places or work from more than one place) and one that offers reporting that’s easy to understand. Tool to try: TopTracker is a free tool designed for remote workers and comes with productivity reports.
  • The other type of time tracker really gets to the root of what you are doing and when. It’s less for billing clients and more for helping you manage your time for efficiently. Most of us don’t even realize how many distractions are keeping us from our best work. Tool to try: RescueTime runs in the background of your computer and on mobile devices and then provides a report of what websites and software you are using and how much time is spent with each. (The number of hours on Instagram might be a little shocking.) Plus, you can use it to help limit time on websites or with apps that you need to avoid a little more.

Use More Visual Tools

Freelance designers can spend a ridiculous amount of time trying to explain the way something looks to clients or other team members. Cut out all that wasted time and effort by using a tool that allows you to collaborate visually.

A digital whiteboard can set the tone of an in-person meeting online. (You can even brainstorm and work out solutions to problems on different schedules.) Real-time collaboration takes some of the loneliness out of freelancing and give you the accountability of working with a team—which is great for keeping projects on task and on time.

Tool to try: Mural is an easy to use digital white boarding tool that you can use to share ideas in a visual space. Not only is the space designed for quick sketching and sharing, but users can see everything in real time, plus set a timer so that meetings stay on schedule.

Browse Incognito

Most website design and development freelancers are online all the time. It just comes with the territory.

Try browsing in incognito mode (it keeps popups and notifications at bay) or use a browser add-on to take control of your productivity.

Tool to try: StayFocused is a Google Chrome extension that restricts how much time you can spend on certain websites. So while you might have to be online all day, you won’t be hanging around on Twitter. You can block websites, types of content (no more cat videos at work) or set time limits so that you are allowed some free browsing time.

Automate As Many Business Tasks as Possible

For freelance designers and developers, one of the places where distractions loom is in the management of business tasks. (Mostly because we don’t like them.)
From preparing and sending invoices to filing paperwork and contracts, try to automate as many business functions as possible so you don’t waste time avoiding these tasks. The right software and tools can go a long way to helping you stay focused and manage these chores with ease.

Tools to try: TermsFeed allows you to create basic legal documents such as privacy policies or terms and conditions; Slack is great for managing chats and sharing in one place, so that you don’t have a bunch of client text messages; use invoicing software such as Invoicely to bill clients and manage revenue and expenses.

Create a Routine

Start each day with a plan for that day. What do you need to accomplish before you call it quits?
Every freelancer will have a routine that’s slightly different, so you might have to play with daily schedules some to create a routine that works for you.
Here’s what a sample routine might look like:

  • First part of the day: Do a quick check of social media (work accounts) and follow up with posts or messages, where applicable. Check and respond to all emails that can be handled quickly.
  • Move on to bigger project work. Start with things that need the most brainpower while you are feeling fresh. Spend a few hours working through this work and plan for a break or two during that time.
  • Take a long break for lunch or to take a walk. The mid-point in the day is a good time to re-energize.
  • Check and respond to email again.
  • Use the afternoon period to finish up tasks and knock out low-hanging fruit items.
  • Dedicate some time to business or bookkeeping tasks, to returning phone calls or client meetings and check email one last time.
  • Create a plan for tomorrow as you wrap up the day so that you can leave knowing what is coming up and come into the next day ready to move forward on projects and tasks.


Sadly, much of the time freelancers waste isn’t even recognized. It’s spent in places that don’t really need our attention at all.

Using the right tools and creating the right work environment and habits can go a long way to helping you avoid distractions when you are supposed to be working. And if these tips don’t help you get more done, it might be time to evaluate your freelance work location. A home office isn’t for everyone; if all the little things are keeping you from work even after trying to focus, it might be time to look for a co-working or shared office space so you can jump to the next level professionally.

Remember, if you are more productive during work hours, you’ll spend less time playing catch up after hours. Making little changes can go a long way when it comes to managing your freelance design business.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!


p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot https://www.webdesignerdepot.com/2018/07/help-i-cant-stop-wasting-time/