Category Archives: resource

American Cancer Society Launches Major Redesign

A medical website is only as good, and helpful, as the clarity of the information presented there and the navigability of the site. In acknowledgment of this, the American Cancer Society recently redesigned its site in order to serve its site visitors more effectively. When you’re searching for information about cancer for yourself or family members, you need to find what you’re looking for easily and efficiently.

The Society sought to better serve patients, medical professionals, caregivers and others who are searching for cancer resources. The ACS’s site didn’t only get a facelift; it also was moved onto another platform: Adobe Experience Manager (AEM) to achieve this goal—more than 10,000 webpages were also moved over from the legacy content management system of ACS to AEM. The site is one of the most highly trafficked sites for cancer information, so it was crucial that the UX and mobile friendliness were improved for faster searching success.

While UX and navigability across all devices were primary redesign goals, so was making the site bilingual, specifically to serve the Hispanic audience. The solution? The redesign also resulted in the creation of a Spanish-equivalent site that’s fully functional.

The redesign was quite a challenge because it involved a slew of different objectives.

Finding information on particular forms of cancer is a high priority for many visitors, so the redesign focused on creating better navigation paths that empowered them to discover the information they wanted more easily, including launching the new Cancer A-Z Glossary.

News on cancer is a big part of patient and doctor education. The redesign made sure to establish a lively news center where the content is tagged by cancer type and other, vital particulars. This allows visitors to efficiently filter the news via one-touch access.

Along with the above, 12 unique templates were created to provide ACS site managers with the flexibility the required to create custom pages. At the same time, they were able to stick to ACS design and brand guidelines for a consistent look and feel across the redesigned site.

The end result is a faster site with better information architecture. Part of that is attributable to the clean, minimalistic design approach, too. The homepage features a lot of white space, which helps visitors focus on important site elements like:

  • The navigation bar
  • The headline (mission statement)
  • The Donate CTA
  • Contact info
  • The hero image

Scroll down below the fold, and you’ll also see a card-based design that easily chunks content into different information groupings and sections for a seamless transition.

The site’s color palette is also accordingly minimalistic, with red, blue and white being the main colors repeated throughout the design.

Overall, the ACS’ redesign is a study in how good design makes life easier for visitors by improving usability. For a medical resource site like the ACS, there’s no more important task to be accomplished by the designers, as millions of people around the world depend on its high-quality information to help them make educated decisions about their health.


The document has moved here.

Apache Server at Port 80


Essential design trends, March 2017

Here’s the point of emphasis…

That’s the theme this month. This collection of trends focuses on adding emphasis to the design with specific detailing from italics to split screens to stark, minimalist backgrounds paired with a trick or two.

Here’s what’s trending in design this month:

1. Split Screens

Split screen design was something that started gaining traction in mid-2016 and now it is a big deal. Browse through collections of website design and split screen outlines are everywhere.

What’s nice is how quickly the style has evolved. Early split screen designs featured mostly symmetrical designs with a yin and yang style aesthetic. The new split screens have a more “anything goes” feel to them.

The three examples below show three very different ways to use the same trend.

  • Rency uses a split design to contain a loop video and the main navigation. The contrast between the white area and red is stark and forces the eye across the screen. It also ensures the user will find the navigation because it is the only element within the colored portion of the design.
  • GECN is a complex governmental site that uses a split screen to convey two different ideas with two links immediately in the design. While the split isn’t full-screen and contains a lot of text, this is a good alternative for a design with lots of calls to action, user bases or complicated content.
  • Bashful uses a concept similar to Rency but with a twist: The design features a full-screen video loop and half of it is covered with a tinted color box. All the clickable elements are inside the tinted area and the navigation menu is hidden in the top right corner of the video.

What each of the examples have in common is that the split screen design adds emphasis to the content. It helps drive the users to specific elements in the design through use of color and with actual or perceived movement, thanks to contrasting “screens.”

The best part of the newer split screen designs is that there’s an asymmetrical flow to them. Designers aren’t stuck in a yin and yang format and the result is much more interesting visual patterns.

2. Italics

One of the least used character styles is getting more play as a display option.

Italics are making their way into the typography palettes of designers, and not just for the occasional point of emphasis. More italics are being used for display typefaces, secondary elements such as links or menu items or for broader emphasis.

Italics are a fresh take on your typical type styles. Because they aren’t so widely used, this trend is one that is sure to grab the attention of visitors, even if they aren’t sure what about the lettering got their attention in the first place.

Italics are a subtle change that don’t even require a new typography palette. They do come with some cautions and suggestions for best practices.

  • To make the most of italics use them sparingly for small blocks of text.
  • Use a highly readable typeface if you plan to italicize; novelty options can get tricky.
  • Use the typeface italic and don’t try to create your own version by slanting letters. (That can get messy in a hurry.)
  • Use italics to represent commonly italicized elements, such as the title of something, as showcases in many of the examples below.
  • Pair italics with a simple effect, such as an animation or color, for even more emphasis.
  • Because italics can be a little more difficult to read, make sure there is plenty of contrast between the type and background.
  • Pair italic type options with a simple serif or sans serif typeface as to not detract from the italic.

3. Solid Backgrounds with a ‘Trick’

One of the easiest ways to create visual emphasis is with contrasting elements. While a solid color background might seem plain or flat, it can be the perfect canvas for a design trick, such as animation, illustration or sound.

The contrast between the starkness of the background and the trick, helps bring the user interface element to life. From the simple bouncing squares in the 3K design to the fun cartoon from Retrace Health to the parallax scrolling of Florian Monfrini.

Each of the effects stands out because of the simplicity of the background. Further, these backgrounds don’t get in the way of the design either. Each one is white or pastel and fades out of the foregrounds so that users focus on the messaging of the primary content. (Black or simple dark backgrounds can work equally well.)

This is why it works: Users aren’t caught up in the canvas and the design almost pops off the screen. It’s almost like art on a wall. If the wall is painted with wild colors and patterns, it can be tough to see the framed image that you are there for, but a piece of art on a white wall is a showpiece.

This design trend creates a showpiece for that trick you’ve been wanting to incorporate into a project. It can be almost anything. And it will be the highlight of the design with a simple canvas to display it on.

One caution when planning a color choice for a simple background: For the most impact stick to a white, black or neutral color. Bold, bright colors are almost a design trick in themselves and might detract from your goal.


Every design needs to place emphasis on something. That’s why this group of trends is so refreshing. Each underlines something important for users with an easy to understand way of providing emphasis. Users know exactly what italics mean and they can see variance in split screens or backgrounds that contrast with user interface elements.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.


The document has moved here.

Apache Server at Port 80


Popular design news of the week: February 20, 2017 – February 26, 2017

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.

55 CSS Checkboxes


Do Responsive Sites Have to Be so Tall on Mobile?


How I Started Drawing CSS Images


CSS Cheatsheet for Box Alignment


Responsive CSS Patterns Without Media Queries


The Circular Design Guide


Design Patterns for Humans


Netflix’s New Design Series Spreads the Wrong Idea About Design


The Value of Design Constraints


5 Essential Steps to Building a UX Design Portfolio


How to Build a Freelance Website that Actually Drives Leads


The Most Creative Newsletters by Designers for Designers


Curated List of Best Tools for Launching your Website


How to Start a Large Code project


Stop Talking and Start Sketching: A Guide to Paper Prototyping


Air Canada Unveils Sleek New Brand Design – Forbes


Leaflet.js is the Simplest Map Library You’ll Ever Find


6 Reasons Why You Should Never Use an Online Website Builder for your Business


A Branding Tool for Everything and Everyone


48 Free Tattoo Fonts for your Body Art


Website Builder Wix Acquires Art Community DeviantArt for $36M


The Programming Interview from Hell


How the Freelance Generation is Redefining Professional Norms


User Research is Overrated


Am I a Real Developer – Ever Wonder if You’re a ‘Real’ Developer


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


The document has moved here.

Apache Server at Port 80


Comics of the week #380

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…

The more the merrier

Designer drool


Tough choice

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


The document has moved here.

Apache Server at Port 80


3 ways to win customers with content

Content marketing is a marketing technique focused on creating and distributing valuable content to attract and retain visitors, and turn these visitors into customers. It has proven very effective, at least if you know what you’re doing.

The advantages of content marketing are:

  • It’s good for SEO, especially for targeting long-tail keywords.
  • Content marketing can help attract links and improve your website’s authority in the search results.
  • The content can be used as fuel for social media (Facebook, Twitter, Instagram, etc), newsletters, magazines and other media.

3 types of content marketing

Content marketing can be divided into three categories:

  1. Basic blogs
  2. Creative formats
  3. Side products

These three types are based on the amount of effort they require and the potential rewards. For example: basic blogs are easy to create, while side products are much harder and more costly (more about that later). Conversely, side products can be enormously successful, while the same level of success is harder to achieve with basic blogs.

1) Basic blogs

Simple blogs are the most basic type of content marketing. Businesses often publish articles about new products, industry trends, and tips ‘n’ tricks on their website. They share this information in order to attract visitors and improve their top-of-mind awareness (TOMA).

This type of content marketing is easy to produce. Hire a copywriter to write the article or look for someone in-house, format it, add some images and you’re ready to go. The cost of these articles is low, but so is the chance of success.

2) Creative formats

The second type of content marketing is based on the first. Words are the simplest form to spread information. So why not try something a bit more creative? There are other ways to spread your ideas that help you stand out from the crowd. Some examples:

  • Infographics: Infographics might be yesterday’s news, but if executed correctly, they can be very powerful.
  • Animated infographics: Looking for something fresh? Why not try an animated infographic. Head over to Jacob O’Neal’s Animagraffs for inspiration.
  • Video: If a picture is worth a thousand words, video is worth a thousand pictures. Attract new customers by displaying your expertise in a video. Moz uses this technique in their Whiteboard Friday.
  • Quiz: Add some interactivity to your content marketing with a quiz. There are plenty of tools that can help you create one of these.
  • Interviews: Interviewing a celebrity in your field can be a great way to get some extra visibility for your brand.

This second type of content marketing is all about the creative distribution of information. It requires a bit more work than the first type, but the rewards can be much greater.

3) Side Products

The most advanced type of content marketing are side products. As the name suggests, side products are new products or services that expand and/or are linked to the original products and services of the company.

Take Crew, for example; their goal is to attract customers who have a project that needs high-quality creative work and put them in touch with freelance designers and developers. They had trouble finding customers, no marketing budget, and were 3 months from bankruptcy. So what did they do?

They decided to give away all the extra stock photos they created for their website redesign… for free! They did this on the domain called Nowadays, unsplash is one of the biggest websites for free stock photography. What’s more; this side project generates over 40 percent of Crew’s revenue.

The technique behind this content marketing technique is simple: give something valuable away in order to sell something related (a quote from Brian Clark). Stock photos is something the target audience of Crew needs. It helped them create brand awareness and attract new customers.

There are plenty of other businesses that are using the content marketing strategy. For example: dmlights, a webshop for lighting, created a 3D Homeplanner where visitors can design their dream home (of course with light fixtures from their webshop). Or what about Buffer, who created a tool called Pablo that automatically generates images for social media?

Value creation is at the core of side projects. As Crew’s founder Mikael says:

It’s more likely you’ll use a good product many times than read a good blog post many times. This repeated usefulness is what makes side products so valuable.

Most of these side projects require quite a bit of time and money. Nevertheless, they can achieve amazing results when it comes to brand awareness and customer acquisition.


  • Content marketing is much more than simply publishing articles.
  • Don’t put all your eggs in the same basket – mix different types of content marketing.
  • For side products: try to find a link between your core product/service and other unfulfilled needs of your target audience.


The document has moved here.

Apache Server at Port 80