Archive for Data Management

You start by typing your worries into a large star. Soft music plays in the background as the user is guided through a short, gentle meditation. As the story unfolds, the star becomes smaller and smaller, as does the problem within it. Eventually the problem and the star completely disappear into the galaxy, reminding the viewer how small one problem can be in comparison to the vastness of the universe.

Created by San Francisco-based web developer and designer Marc Balaban, Pixel Thoughts recently soared to the front page of Reddit and quickly amassed almost one million unique visitors.

The mindfulness project took Balaban less than 36 hours to create. It’s an example of how powerful simple web design can be in telling stories and connecting with an audience.

“Marshall McLuhan said the medium is the message, and right now the web is the ultimate medium,” Balaban said. “The reason why I love web development is it gives you instant access to tell stories and to create feelings and emotions out of people.”

“The web combines a really unique way to tell a story and to have a captivate audience,” he continues. “You can tell some really engaging stories in a very short period of time because so many people have access to it.”

Six Ways To Make Your Narratives More Effective

1. Know What Your Message Is

It can be hard to understand at first what your message is, Balaban said. “I wanted to create something for myself to help remind me that as stressful as a thought may be at any given moment, the universe and the world is so much grander.”

He was inspired by another Reddit user who posted in the meditation subreddit about how small he feels when he looks up and realizes the magnitude of the size of the moon. Balaban realized the potential of this message and wanted to capture and share it with an audience.

2. Keep It Simple

“Keep it minimalistic, keep your point very succinct and make sure you don’t clutter the page with useless information or things that are not necessary. Only include elements that are necessary for your narrative or your tale,” Balaban said.

3. Combine Design and Text Elements

“Initially for Pixel Thoughts, I was just going to [have the stars fade] away without the text, but when I tried it I felt it wasn’t engaging. It worked a lot better when people were guided with my message or the point I was trying to drive across, which is that this thought is small compared to the entire length of the universe. People instantly said it helped them understand what my point is and it helped the story.”

4. Do It Quick

“This is something I built in a very short period. I made the project a little bit of a hackathon where you build a project in two days. It wasn’t perfect, but it was good enough, and so I posted it [on reddit] and sure enough it skyrocketed it to number two.”

5. Keep It Short

“You don’t need a long time to really engage people and to really touch them. A whole bunch of people [have emailed me] talking about how much they wept when they saw the application. One girl tweeted me and said, ‘For a moment, I forgot I had MS.’”

Like a short story, it is possible connect with people’s emotions within constraints.

6. Don’t Worry If You’re Not The Best Designer

“I wouldn’t consider myself the best designer,” Balaban says. “I think there are a lot of elements you can look at and borrow, and understand how to combine elements to tell a really interesting story in a very short period of time.

“I think it’s very easy to do, a lot of people just need to understand exactly what they’re trying to present then go ahead and do it.”

If you want to play with designs and get a feel for visual storytelling, try using Adobe’s free Slate app, which turns text-heavy content into beautiful visual stories.

slate

The Future of Storytelling Through Web Design

“As we progress further with web technologies, we’ll see a lot more interactive storytelling on the web,” Balaban said.

“Right now storytelling has always been a one-way flow where the viewer is taking in the author’s point of view and there’s no two-way communication, but I think we’re at a point where the user can start typing in things and helping unfold the narrative as it comes.”

Comments (0)

When I started developing websites way back when, I noticed that there were similar chunks of code and page structures that I would use over and over again. I had this grand idea that I would create templates to reuse for similar projects. The closest I got to this was to create code snippets for my text editor. (See how to create snippets with Dreamweaver here.)

Though creating snippets are really useful, getting from design to code faster or creating quick prototypes can be achieved using front-end frameworks.

What is a Front-end Framework?

In web development, the term front-end generally refers to the content you can see and interact with in the browser (e.g. clicking a green button) and is usually written in HTML, CSS and JavaScript.

A framework is a set of pre-written templates, code snippets and modules that are meant to aide in creating websites and apps faster while still using standards-compliant code. Frameworks are useful to get you up and running quickly. Also, looking at the source code and reverse-engineering the code is also a great way to learn!

There are many to choose from ranging from basic frameworks that provide just a grid to full scale frameworks that include modules such as typography styles, buttons, forms styles, tabs and JavaScript functionality. Find a framework that suits your needs and also has good documentation for usage.

Getting Started with Bootstrap

Bootstrap is a popular, full-scale framework that is also free and open-source.

To use Bootstrap, you must download the files first. Much of the framework styles & functionality come from adding specific CSS classes or data-attributes to your HTML, so in order for the these features to work, the CSS and JavaScript files must be included in your project.

Before you get to all the fun stuff, you must make sure that all the framework files are downloaded and properly linked in your project.

There are three download options (Bootstrap, source code or Sass) to choose from based on different expertise level and/or your particular needs.

Option 1: Download Bootstrap

This option is the easiest way to get up and running quickly. Once downloaded, unzip the compressed folder. The files included look like this:

bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

All the font files in the fonts folder should be added to your project but not all of these CSS and JavaScript files are required.

Frameworks are usually made up of many different parts. Often the CSS and JavaScript code are broken down into many separate files for organization (e.g. a button.css for only buttons styles) or written using a CSS preprocessor (more on this later). The precompiled files consolidate all the related CSS and JavaScript partial files into one standard file.

bootstrap.css: precompiled file for all of the framework styles

bootstrap-theme.css: precompiled file of all the theme styles

bootstrap.js: precompiled files for all of the JavaScript plugins

So what are those other files?

The “.min.css” and “min.js” files are the same as the three mentioned previously but they are minified files. Unnecessary characters, such as line breaks and spaces, are removed from the source code to make the file size smaller and improve performance. Adding these spaces make the code easier for humans to read but the computer doesn’t need it!

When using a framework, it’s best not to make changes to the original files. You can always create a separate CSS or JavaScript file to add your own customizations. Because of this, it’s recommended to use the minified version in your projects instead.

The “.css.map” files are source maps and can be used with some browsers’ developer tools for advanced debugging.

jQuery is required!

jQuery is a popular JavaScript library and is required for Bootstrap’s JavaScript plugins to work. According to the documentation, you can consult the bower.json file to see which versions of jQuery are supported.

At the bottom of the file, you’ll see something that looks like this:

"dependencies": {
    "jquery": ">= 1.9.1"
}

This means it will support versions 1.9.1 and up.

Option 2: Download the Source code

This option is useful if you’re more experienced with front-end development, familiar with Less and/or want more control over customizing the framework.

It contains the same files as option 1 but also includes the source files for the documentation, example files, CSS and JavaScript. The CSS source files are written using Less, a CSS preprocessor. The are various other files included to provide support for packages, license information, and development.

This option requires a Less compiler, some setup using and is documented here.

Option 3: Download Sass

This version is ported from Less to Sass (another CSS preprocessor) to include in Sass-only projects.

(Learn more about preprocessors here.)

Build a Basic Bootstrap Project

Now that you’ve downloaded all of the required files, you’re ready to create a Bootstrap powered project. Try following along with this exercise example below.

Create a project folder and add all the required Bootstrap files. Also, in your text editor, create a new blank html page and call it index.html. Your folder structure should look something like this:

my-project/
    ├── css/
    │   ├── bootstrap.min.css
    │   └── bootstrap-theme.min.css
    ├── js/
    │   └── bootstrap.min.js
    ├── fonts/
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   ├── glyphicons-halflings-regular.woff2
    └── index.html

In your newly created index.html file, start with the basic HTML tags required for all web pages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- page information here -->
    <title>My web page title</title>
  </head>
  <body>
    <!-- page content here -->
  </body>
</html>

Then add three <meta> tags: for character encoding, Internet Explorer compatibility mode and mobile device support.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head -->

      <title>My web page title</title>
  </head>
  <body>
    <!-- page content here -->
  </body>
</html>

Next, add the Bootstrap CSS files and HTML5 shim to support IE8. The bootstrap-theme.min.css file is optional but should be added to use Bootstrap’s theme options.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head -->

      <title>My web page title</title>

      <!-- Bootstrap CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/bootstrap-theme.min.css" rel="stylesheet">

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  <body>
    <!-- page content here -->
  </body>
</html>

And finally, add the jQuery and Bootstrap JavaScript plugin files right before the closing </body> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head -->

      <title>My web page title</title>

      <!-- Bootstrap CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/bootstrap-theme.min.css" rel="stylesheet">

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->

  </head>
  <body>
    <!-- page content here -->


    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Phew! Now you’re ready to go!

The full basic template and documentation can be found here.

What next?

When using frameworks, be sure to read all the instructions and documentation to see what options are available. The main reason for using frameworks is to avoid re-inventing the wheel.

For example, if you want a round image, all you have to do is add an img-circle class to the <img> tag.

<img src="..." alt="..." class="img-circle">

But there’s so much documentation!

Here are some recommendations for where to start:

  • Grid System – Grid systems are used for creating page layouts through a series of rows and columns that house your content. Also includes responsive options.
  • Buttons – Bootstrap has all kinds of button styles! Different sizes, colors and even states (active, disabled). The button styles are consistent whether using a <button>, <a> or <input> tag.
  • Images – Images can be made responsive and also include different image styles.
  • Typography – Various typographical styles.
  • Glyphicons – Icon fonts.
  • Navs – Many different navigation styles ranging from tabs to pills to navigation bars.

If you want to add your own customizations, create your own css file and include if after the Bootstrap files. Use your own classes or use the Bootstrap classes to add your own styles.

Frameworks are great for common styles but don’t let that limit your imagination. Try out the different options, use what you want to use and leave out what you don’t need.

Experiment and have fun!

Comments (0)

While every project and client will have unique needs, there are a few crucial questions you can ask yourself at the outset of any undertaking to make sure the user experience is getting off on the right foot.

1head-1

Who am I designing for?

It is called user experience after all! The most important piece of creating great UX is understanding your audience or users. There are several ways to do this.

  • Analytics data: Where are people coming from? How long do they spend on the site/app?
  • Marketing information or demographics: Who are the target audience? How old are they? What do you know about their habits?
  • Research with users: Best of all is getting up close and personal with end users. You might be able to do this through contextual inquiry, interviews or informal testing of existing products/sites.

The nuggets of information that you are trying to capture are understanding your users’ needs, behaviours and what they are trying to accomplish.

1graphs

What are the goals of this experience?

When working with a client, these can be seen as the business requirements. When working on a personal project, these are what you hope to achieve with the site, application or software. Is the aim to increase sign ups? Get more traffic to a certain page? Decrease drop off in the ecommerce flow?

  • Setting out key goals and prioritizing them will be useful input when designing. This can help to ensure that the UX is serving business as well as user needs.
  • Identifying ways to measure whether these goals are met can help with evaluating the UX in the long run.

1screen

Content – what’s the story?

Content is at the core of any great digital experience. At the beginning of a project, understanding content processes and what content you are working with will set you up for success.

  • Take stock of existing content – this can be done with a content audit.
  • Understand the content production workflow – who is writing new content, and sourcing images? Does the content timeline align with the rest of the production timeline?

Understanding the raw material you are designing with, and how that fits into an overall workflow, will ensure smooth progress.

1eye

How will I keep accessibility in mind?

Accessibility is a crucial component in a great experience. An accessible experience makes for a better experience for all users. Accessibility should not be an afterthought. For great UX bake it in from the get go!

  • Pick the tools you will use to consider accessibility in your workflow. Colour contrast checker and HTML code sniffer are great places to start.
  • Understand the legal requirements in terms of accessibility in your location.

1gears

What are the technical requirements?

The platform and technical constraints that you are designing for will provide context for the UX choices you make.

  • Are there platform design guidelines I should be familiarizing myself with? Users will be familiar with platform conventions of their device and sticking to these can aid in creating a frictionless experience.
  • What kinds of databases are being accessed? How rigid are the database fields? This can have a particular impact when designing web forms.

Bearing these five questions in mind at the start of a project can help to uncover some opportunities for creating a great user experience.

Comments (0)

Like many pros before him, Alexsander Andrade started young. He completed his first course in design and development at the age of eleven. By the age of 13, he’d managed to acquire paid gigs pushing pixels and bringing websites to life. These days he’s still doing just that, working as a freelance designer on a handful of international projects.

“I fell in love with creating after that first course,” said Andrade. “It happened naturally, and since then I have worked in digital and offline agencies, newspapers, marketing departments and design studios.”

Andrade is hooked on the challenge of creating something for the commercial market that is beautiful and not only sells a product, but an idea. Ideally, he prefers to take on research-driven projects so they can be designed to really speak to a target market.

“It’s amazing to me that while people consume creative work each day, they rarely have an idea how much thought and time was put in to get it on the market,” said Andrade.

We talked to Andrade about a project just like this. As part of the team at DSUP Design Studio in Brazil, Andrade designed and developed a campaign website for Maggi FIAT, a car dealership, with the help of Dreamweaver, Illustrator, and Photoshop.

While Andrade had a lot of creative freedom on the project, he felt his biggest challenge was to show the client something different. At the time, he felt that agencies were trying to sell cars online by simply showing visitors features like ABS Brakes and Airbags.

dw_customer_fiat2

“I wanted to show something more than just the typical specifications – I wanted to show the pleasure that this new car could provide a driver,” said Andrade. “The main idea of the campaign was to connect the consumer to the car model best suited to their lifestyle – the best car for travel, for commuting to work or going to a shopping mall.”

The market for selling cars is competitive and Andrade wanted to create a seamless experience for the user through clean and simple design.

“The main idea behind the design was to make the visitor feel a connection between their lifestyle and how the car fits within it,” said Andrade. “I chose to use hexagons as the figure to represent those connections.”

Different sections were created for different car models based on lifestyle activities, and Andrade implemented a call to action button that would direct the consumer to the closest FIAT store for each one. Another important element of the website was the fact that it was responsive.

dw_customer_fiat3

“I choose to use Dreamweaver because it’s easy, practical, and intuitive,” said Andrade. “It allowed me to make the website, the main attraction of the campaign, responsive.”

Andrade leveraged his Creative Cloud subscription, also using Illustrator and Photoshop for design elements and layout.

You can view the FIAT campaign on Behance here.

Comments (0)

Material design has gotten really popular recently, as many designers have started integrating it into not only their Android projects, but other web-bound projects as well.

Just to remind you, the concept was first introduced by Google in their Google I/O 2014 keynote. This presentation has been viewed more than 1.5 million times to date and it’s still being treated as the main overview of what material design is and how we should be thinking about it.

Is material design for you?

So the first question we’re going to attempt to answer today is whether or not material design is something you should learn and begin using in your work.

However, like usual with these types of questions, there isn’t a one-size-fits-all answer.

Let’s try approaching this from a different angle then.

Something that I’m sure you’ll agree with is that great designs are unique and functional. With “functional” probably being the more important parameter. In other words, design beauty just for the sake of it is pointless.

Therefore, when thinking about adapting the material design principles, first try to relate them back to the goals that you want to achieve with your design.

Mainly, answer the following question for yourself:

“Are material design guidelines and principles in line with what I want to achieve?”

(Note. It’s probably a good idea to read our previous post before going through this one. Here it is if you haven’t seen it yet: Is Flat Design a Web Design Standard That’s Here to Stay? In it, we go over the biggest differences between flat and material design and also list some pros and cons of both trends. This should provide you with some additional help when choosing a design approach.)

1. Get familiar with the main resource

If you want to learn material design, the best starting point possible is the official resource released by Google.

It’s being kept up-to-date and it explains all the fine details that go into building material designs.

What’s great here is that it doesn’t only cover Android-specific aspects of material design, but discusses material design as a whole in relation to any app or web design project.

I highly encourage you to at least get through the first chapters of that documentation to get familiar with the basic principles.

2. Understand the “material” in material design

The name material design is far from coincidental. Basically, the whole idea behind the principles of material design is to make designs resemble the real world, but only at a certain level of abstraction.

You don’t want to make your design look overly realistic up to a point where it impersonates the real-world equivalent of a given element. What you do want, however, is to convey the idea of “material” to the user.

Here’s the thing. We – humans – understand materials. We know how metal feels, we know what a wooden desk looks like. We can also distinguish layers of stuff lying on other stuff. For example, we can recognize a pencil on a piece of paper on a desk.

In material design, you basically need to learn how to convey the same hierarchy of elements, but doing so by only using the absolute minimum of design tools, such as shadows, shades, etc.

 

material 1

Shadow‘ by Nikhil Vootkur on Behance

3. Use shadows to convey hierarchy

Surface, edges, realistic shadows and lighting are the main tools of material design. Adding depth to your designs is crucial, but you have to be careful to only use the minimum effective dose.

For instance, shadows are your main tool to convey the hierarchy of various elements that combine into a complete design. By deciding what casts a small realistic shadow on what, you’re presenting the visual hierarchy of the elements and the layers they are on.

What matters here is the overall structure of the design and if your shadow structure as a whole makes sense to the human eye – if it portrays the concept of real materials.

material 2

WhatsApp | Material Design Concept‘ by Mário Gomide on Behance

4. Use bold colors

Being bold, graphic, and intentional is one of the three main principles of material design.

Material design surely is a minimalist type of design. In other words, it doesn’t get to utilize many design tools and stylistic tastes. Therefore, designers have to go around this restriction and find another way to create meaning and create the right focus.

One of the few things that are left is color. More accurately, bold color, and oftentimes shouty.

Bold colors serve a really important role in material design (and flat design too, for that matter), they make things fun and make interacting with the design enjoyable to the user.

An example of a colorful design:

material 3

Behance New App Concept (Material Design)‘ by Fabrizio Vinci on Behance

5. Use primary color and accent color

Google’s official docs say:

Limit your selection of colors by choosing three hues from the primary palette and one accent color from the secondary palette.

The way to adapt this to any type of design could be: select three hues that will make up your primary palette, plus one color that’s going to act as the accent.

Your primary colors can be used for things like backgrounds, fields, boxes, fonts, and other key elements of the interface. The accent color is just what the name suggests – it gives you additional leverage when you want to display the main element on a given screen/page.

Needless to say, the accent color needs to be in high contrast to the primary hues.

material 4

Snapchat – Material Design‘ by Vinfotech on Behance

6. Utilize whitespace

Material design gets a lot of ideas from traditional print design and the principles it brought us.

For instance, whitespace is an important element in any material design, and it can improve your typography and text layout immensely.

In fact, whitespace is the most effective tool for creating focus, grabbing the user’s attention and bringing it to a particular element (something that beginner designers often have trouble understanding).

So in short, utilize some large-scale typography for headlines, add a lot of whitespace, and don’t be afraid to have a lot of blank spaces in your designs overall.

material 5

Material Design Sign Up Page‘ by Omkar Abnave on Behance

7. Use edge-to-edge images

Material design is really image-friendly. What I mean here is that if you decide to include any images in your design, you should give them a leading role.

Images in material design are featured edge-to-edge – in a full-bleed manner. This means that there are no margins between the edge of the image and the edge of the window/screen.

When done correctly, this creates an enticing experience for the user, and also gives us – the designers – some additional design tools among the rather small set of pre-approved shadows, color palettes, and layers.

material 6

Twitter Material Design‘ by Rico Monteiro on Behance

8. For image-based designs, extract colors from the images

Speaking of images, Google encourages us to extract the colors from the images that we’re using in our designs, and then make them part of the color palette.

It’s hard to argue with this reasoning. Doing such a thing is sure to create a consistent experience for the user, make an impression that everything falls into place nicely and just fits overall.

material 7

Material Design Colors Recontextualization‘ by Lonely Pig Ringo on Behance

9. Incorporate motion

In Google’s own words, motion provides meaning.

Motion is one of the key components of good material design. After all, we’re used to experiencing motion in the real world. It helps us understand how things work and where we should direct our attention.

Material design utilizes the same principle and uses motion to interact with the user, effectively letting them know how to use the design.

What to put in motion? Simply give the user some feedback about the action they’ve just performed. For example, did they click a button? Animate it to confirm that the input was received.

material -8 b

REDBUS APP – Material Design Preview‘ by Anish Chandran on Behance

10. Make motion authentic

“Authentic” is the keyword here. The days of fake motion – things just moving about the screen – are long gone. Right now, if you’re going to incorporate motion, you might as well make it real according to the laws of physics and how things work in the real world.

Google devotes a whole section in the material design guidelines to the concept of authentic motion.

In those guidelines, they explain how to introduce mass and weight, acceleration and deceleration, and how easing works (a way of making animation seem more natural by changing the speed of movement at different moments in time).

In material design, motion is only as good as its ability to mimic the motion of real-life items. This is the only way in which motion will enrich the interface and make it more understandable to the user.

11. Make everything responsive

One of the main principles of material design is to make the resulting work accessible and usable on any device and any screen size. Above all else, the goal is to make the experience consistent. That way, the user doesn’t get confused if they switch from one device to another, as they don’t get a completely new interface displayed to them.

With good material design, they can transition without any obstacles and just continue using the app/site right from the point they left off.

Naturally, this means that the design needs to be responsive. Luckily, with modern frameworks, you get much of the scaffolding already built, so making your work responsive shouldn’t be that big of a challenge.

12. Remember, everything’s in the details

One of the main elements that make material design so difficult to execute flawlessly is that it’s so heavily simplified.

For instance, with skeuomorphic design, the guideline was simple, “make every element of the design resemble its real-life equivalent as closely as possible.”

This is where things like this came into existence:

material 9png

15 Puzzle‘ by Kamil Ginatulin on Behance

Or this:

material 10

Cyrano Interactive Media‘ by Marisa Mariscotti on Behance

With material design, it’s a bit simpler, yet more complicated at the same time.

For the most part, material design is a game of details. You need just a little realism to convey the main functionality and purpose of the thing you’re designing, but at the same time, you don’t want to make things too skeuomorphic.

When in doubt, just browse some online galleries for inspiration.

What do you think? Have you experimented with material design yet? Do you think it can be used for more than just Android app design – the purpose for which it was originally introduced?

Comments (0)

Spoiler alert. The difference is in the details.

For the untrained eye, flat design and material design look very much alike. And please don’t get offended when I’m saying this. No matter how big of a supporter you might be of one trend over the other, you have to agree that the difference between them really is subtle. Subtle, yet crucial, I should add.

But let’s start at the beginning and look into the facts about each of the two design types.

When it comes to flat design, we already covered its basic principles and history a couple of months ago here on the blog. Feel free to see that article (we even had 10 great designers chip in on the topic and share their opinions of flat design’s domination in the current web design landscape).

Just to remind you, flat design is a type of design that’s been stripped of any three-dimensional elements. It removes any stylistic tastes that try to imitate the real-world equivalent of those elements. Everything that’s part of a flat design appears as if it’s lying flat on a single surface. That’s where the name “flat design” came from.

Now let’s compare this to material design. First of all, material design is a “branded” product (in a way). What I mean by this is that it’s been defined by Google, all guidelines have been articulated by Google, and all changes to the concept are controlled/approved by Google. However, you are still free to build material designs without having to attribute Google in any way.

To some extent, you can consider material design the CrossFit of web design. Whereas flat design is your generic strength and conditioning program. Excuse the comparison.

That being said, the above is just a general overview of what flat and material designs are, so let’s get a bit more in-depth here and try to pinpoint some of the fine differences and the principles you should go by when making your designs flat vs. making them material.

However, it’s not going to be just me discussing this topic. I’ve invited some web design experts to help me out. Here’s the question I asked them:

  • What would you name as the top 3 differences between flat design and material design?

So here’s what we’re going to do. First, let’s take a look at the differences pointed out by the experts. Next, talk about some of them in more detail. And finally, bring it all together to present a list of pros and cons of each design style.

Top 3 differences between flat design and material design – designers chip in

  • Flat design is great for users who are highly attuned to digital interaction, while material has more of a reactive response to a user’s action. Material design brings the design a step further in its ability to communicate.
  • Material design may be aesthetically flat, specifically the colors, but it is multi-dimensional: it takes the Z-axis into consideration.
  • Both flat and material are minimalist approaches, but material is attempting to marry the real and digital worlds.

– MK Cook, UX/UI Designer at Digital Telepathy

  • Flat design has no skeuomorphisms while material design utilizes them subtly.
  • Flat design is best for simplistic needs while material design is best for more complex needs.
  • Flat design is overall easier to develop and faster to load than material design.

– Melissa Galle, graphic design manager at Marqana Digital

  • Material design is an evolution of flat design.
  • Material design is more robust than flat; it’s an ecosystem not just a style.
  • Material design is interactive and has a sense of physics.

– Brad Soroka, Sr. UX/UI Designer at Digital Telepathy

Material design is a well-defined concept

A while ago, Google came out with its material design introduction – a really in-depth document discussing the principles, purpose, and guidelines of material design. That document is kept up-to-date, so you can view it at any time to learn the newest characteristics and traits of the whole movement.

Why did Google introduce material design? The reasons can be many, but one had to be the need to unify the way things looked on different Android devices (using different screens and resolutions). Making an app to look similarly on multiple devices is a really difficult task for developers, and material design plays well as a set of guidelines that make this task easier.

Therefore, the first thing that’s truly different between flat and material design is that material is a well-defined concept, whereas flat design is an experimental result of a number of design practices going in the direction of utter simplicity and minimalism.

Moreover…

Flat design was a reaction

Before flat design came into existence, or rather evolved to its current form, skeuomorphism was the leading web design trend.

However, the (sometimes overdone) realism turned out to be too much for modern works, especially considering the need to be mobile-friendly and accessible across multiple devices.

The reaction? Flat design.

With it, designers no longer have to worry about making their projects look realistic. Instead, they can focus on functionality, and performance.

Flat design emerged as a response to skeuomorphism, a method of designing sites to physically represent the expected response to a user’s action. While the intention of skeuomorphism was valid, the aesthetic execution was clunky and felt dated. Flat design replaced skeuomorphism as users recognized digital patterns and interactions.

I would argue that flat design was an extreme reaction to overly realistic design. Flat design is minimal, simplistic, clean design. Many would argue flat is design in its purest form.

– MK Cook, UX/UI Designer at Digital Telepathy

Material design introduces some skeuomorphism back

Although it is functional, the problem with flat design is that it’s not the most intuitive type of design out there, and especially when dealing with users who are not that familiar with web interfaces.

For those people, the design and interface choices make interaction much harder, often coming too close to the brink of unavailability.

Flat design has been stripped of all skeuomorphisms, which simplify a page and make it easier to navigate. Unfortunately, this can potentially make a page seem too generic and is hard to navigate in more complex situations. Material design adds animation, layers, and a hint of skeuomorphism to flat design making things easily distinguishable like buttons.

In the end, flat design is more practical with faster load times while material design solves the issues that flat design cannot when a more complex design is needed.

– Melissa Galle, graphic design manager at Marqana Digital

With material design, designers are attempting to marry the original intent of skeuomorphism by nodding to the laws of physics but with a cleaner aesthetic.

– MK Cook, UX/UI Designer at Digital Telepathy

Material design introduces physics

In Google’s own words, material is the metaphor.

One of the main principles of material design is to mimic the ways in which things work in the real world, but to do it in an utterly simplified manner.

In other words, do so in a way that uses the realism only as a tool to make our brains more familiar with how the interface works. But at the same time, be careful not to make it look overly realistic just for the sake of it, up to a point where it impersonates the real-world equivalent of an element.

For example, a button looking like the following is still clearly a button:

material_button_1

Material button by Mauro Marini on Behance

It doesn’t need to go too far into realism, looking like this:

flat_material_1

Clean Play Button PSD by Pixel Mustache on Behance

Most users simply no longer need real-world queues to inform them of what a UI element does. Buttons don’t need to look shiny anymore. Form fields don’t need inner shadows to look like text can be placed in them.

The difference between flat and material is an evolution, really. Material design builds off of flat, but involves more interaction, a color system, layout and functionality that creates a design ecosystem that users become familiar with across many products and devices.

– Brad Soroka, Sr. UX/UI Designer at Digital Telepathy

The pros and cons of flat design

Taking all of the above into account, let’s name some of the main pros and cons of flat design:

Pros

  • Simple, minimal.
  • Less resource-intensive, which as a result means shorter loading times and less bandwidth consumed.
  • Generally looks the same on every device and is mobile-friendly.
  • It gets rid of all the elements that don’t serve a usable purpose, which means that everything remaining on the screen has its role.
  • It’s positive. This is somewhat a consequence of the concept itself. Here’s what I mean. Since flat design is built primarily with colors and typography, it means that in order to make the elements stand apart visually, the designer is forced to use vivid colors that grab the visitor’s attention right away. In comparison, we rarely see grey-only flat design creations.

Cons

  • Perhaps too simple and minimal at times.
  • It’s limiting. You can’t do much in terms of visual complexity and brand identity.
  • It’s not intuitive. Unfamiliar users have difficulties interacting with flat designs. And it’s not overly obvious to savvy folks either.
  • Hard to convey unique branding of the site. To some extent, all sites utilizing flat design look similar.

The pros and cons of material design

And now for material design’s pros and cons.

Pros

  • Makes everything more real by introducing the Z-axis.
  • There’s a clear set of guidelines that’s constantly being updated. You can use that resource to find answers to any doubt or concern you might have when you’re working on a new project.
  • More intuitive. It’s easier to use than flat design, both for seasoned and new/inexperienced users.
  • Promotes motion in web design. As we said last time, motion helps users get a grasp on what’s happening on the screen and what’s the most important element they should pay attention to.

Cons

  • Built and, to some degree, controlled by a single company – Google. (Not a problem on a day-to-day basis.)
  • Takes longer to implement than flat design. This is due to the existence of the Z-axis.
  • Promotes motion in design … which means that you have to implement it in order to make your creation true material design.

Flat or material?

The question that remains here is whether one of the two is simply better as a design choice…

So, should you be using just one of these design types and disregard the other?

Obviously, the answer is no. They both have their place based on the purpose of what you’re building.

To simplify it all, we can say that classic skeuomorphic design is an imitation of how things used to be – a realistic impression of real-world items in order to make design interfaces feel more familiar.

Flat design, is a minimized environment that relies heavily on the user’s familiarity with design interfaces overall, and gets rid of anything that doesn’t serve a functional purpose.

And finally, material design tries to marry some of the ideas from skeuomorphic design to flat design. This is done to present an interface that is optimized for the digital, but also reminds us of the real world, but just enough to make the interface intuitive.

What do you think? Are you a fan of one of the trends over the other? Feel free to share in the comments.

Comments (0)

People use the web in a variety of different ways, but a mistake that designers and developers sometimes make is to assume everyone uses the web in the same way as we do. This is why, especially over the past 12 months, people have started talking about accessibility on the web. Making websites as accessible as possible to everyone including people who are partially or fully blind, people who rely on screen readers, and people who navigate using only a keyboard, is not only becoming a more important conversation among creators, but in many countries it’s now the law.

We sat down with Avery Swartz, a web designer and founder of Camp Tech, to talk about accessibility and why it should be on the forefront of every web designer and developer’s mind.

Three Arguments For Web Accessibility

Swartz lives in Toronto, Canada where making public websites accessible is mandatory by law. But that’s not the only reason why she makes a case for it when she’s pitching accessible design to her clients.

1) Good Accessibility is Good Business

“Be a nice person,” Swartz says, naming this as her number one reason for selling accessibility. “Making your website more accessible for everyone feels like the morally right thing to do. It’s nice, it’s inclusive, and odds are it’s in your client’s best interest to make their website as accessible as possible. It opens up the potential customer base. Good accessibility is good business and it’s being a good human to other humans.”

2) In Many Countries, It’s the Law

While it isn’t yet a law for public websites in the United States, web accessibility is becoming the standard in countries across the world. Multiple provinces in Canada now require public websites to abide to what’s called the Web Content Accessibility Guidelines (WCAG) 2.0, as does Norway, Australia, Ireland, Italy, to some extent the United Kingdom, and various other countries.

Federal websites in the United States are required to meet these guidelines.

3) Google Likes It

Google has hundreds of factors that go into determining how high a website ranks in its search engine, one of which they’re revealed is clean semantic code. This happens to align nicely with writing code for accessibility.

“Accessible code and semantic code is a great way to future-proof your code,” Swartz says. “If you do everything according to standards, odds are it’s going to last a little longer for your clients and they’re not going to have to redesign or rebuild their website every two years.”

Where to Start When Designing For Accessibility

Designing for accessibility requires a whole new way of thinking, but luckily designers and developers can begin making their websites more accessible by implementing a few small changes and paying attention to constraints.

“The big ones people are talking about are color, contrast, font weight and forms,” Swartz says. “Those are the gateway drugs into accessibility.”

Font Color

One in 12 men, roughly eight per cent of the population, are colorblind. Whether it’s full colorblindness, red/green colorblindness, or another form, designers have a lot to think about when it comes to choosing the right font color.

“People tend to think you’re either fully sighted or you’re totally blind, but there’s a lot in the middle,” Swartz says. “When designers are choosing color palettes, one of the constraints that I think a lot of web designers need to be considering are color palettes that are satisfactory to people with all different levels of vision.”

Thankfully, there are tools for testing color on websites and generating accessible color palettes. Swartz recommends ColorSafe and WebAIM.

Typography

Similar to color, contrast in typography is also important. “Make sure you have enough contrast between your font weightings and font color so they don’t blend together into one,” Swartz says.

Forms

When you’re using a form to communicate—either through a login form, a signup form, or a checkout form—you want to ensure that form is accessible. This could be your client’s point of sale, and you want to ensure this transaction is as frictionless as possible or you risk losing potential customers.

“For example, if you have an area on a form where somebody didn’t complete it properly, if that area turns red to communicate something’s wrong, for some people that’s not good enough, they can’t see that it turned red, so they get confused. So maybe use a little icon and then also have it red so at least people can see the icon,” Swartz recommends.

Taking It to The Next Level

These are just starter points. You can really dig deep and get into accessibility so a user is fully able to navigate a website without having to use a mouse. “It can be a very humbling experience to try to navigate a website using only your keyboard,” Swartz says. She notes that well-designed accessible websites factor physical disabilities into the designs and codes as well. “You should be able to navigate through a website by using the tab button to jump between forms, then using the up and down buttons to navigate through and to move and scroll.”

Testing The Accessibility of Your Sites

Curious to see how accessible your sites are? Swartz recommends the following resources to test your site against WCAG 2.0 guidelines:

Making Websites Accessible For Everyone

“Just remember that we’re not designing for ourselves, we’re not building something for just this small percentage of the population that is lucky enough to be on high speed internet in a first world country without any disabilities at all,” Swartz says. “We want to make the web a wonderful experience for everyone. At the end of the day that’s being a good person, and it is also totally good business.”

Adobe is committed to helping designers create accessible web products. For more information, visit adobe.com/accessibility.

Comments (0)

As a follow-up to our tutorial on creating a responsive slideshow using bootstrap, we continue with your next request: A responsive drop down menu using bootstrap. And like the bootstrap slideshow, this one is going to be just as simple.

Let’s get started.

Create an HTML page for the drop down menu:

  1. Launch Dreamweaver
  2. Select Site > New Site.
  3. In the dialog box that appears, enter the following information:
    a) Site Name
    b) Local Site Folder: Click the Browse or Folder icon. Navigate to any of your local folders you want to use for this
    c) Click Save
  4. Create an image folder under the Site you just created and call it “img”.
  5. Copy your images to this
  6. Select File >
  7. Select Blank Page, page type as HTML, and Layout as
  8. Save the page as html

Creating the dropdown menu

  1. Open the page http://getbootstrap.com/components/#dropdowns
  2. Under the Example section for Dropdowns, click Copy in the code
  3. In Dreamweaver, paste the copied contents in between the <body>
  4. Copy the following piece of code after the title
  5. <!– Latest compiled and minified CSS –>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap- theme.min.css”>

<script src=”https://code.jquery.com/jquery-1.11.2.min.js”></script>

<!– Latest compiled and minified JavaScript –>

<script  src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>

  1. Save the
  2. Select File > Preview in Browser, and select a browser in which you want to preview the You should now see the drop down menu in your browser.

dropdownmenu

What exactly did you do?

The code you copied below the title tags contains links to CSS and JavaScript files that are required for your dropdown menu. Except for the structure of the menu that is defined in the body section of your HTML page, the rest of the information is contained in these files.

You can download the completed version of this HTML page from this location <link to the HTML page>

See a description of the classes that were used to create the dropdown menu. The Bootstrap Components page also provides you with information on customizing your drop down menu. Explore the various sections of the page to create a dropdown menu that best suits your requirements.

Happy Coding!

Comments (0)

A new project brief comes across your desk. You need to create something to show your client. Do you jump right into your code editor to start mocking something up or do you launch design software? We’re seeing this conversation play out across the web, so we thought we’d ask a few experts to weigh in by sharing their process. Have something to add? Let us know in the comments.


Luke Clum, Designer / Co-Founder of Storyform

lukeclum

Choosing between designing “in browser” vs “in software” isn’t a black and white decision and usually depends upon the project. If you’re working on some existing piece of software, then designing in browser is often less efficient and more restrictive. The client will most likely have their own development team and will find static PDF’s most useful. However, if you’re building a new project from the ground up, then designing in browser can be an excellent option for improving efficiency and showcasing concepts. As a general rule though, I personally try to use a mixture of both within my workflow.

The basic problem with static comps is that they don’t adequately represent the final product that the designer is asked to create. They’re not responsive, don’t show animations / interactions, often set poor expectations towards rendering (especially with typography), and ultimately don’t output anything inherently functional. However, despite the issues, designing in software is still often best for creative exploration and for sharing ideas with clients. Therefore, I like to focus on using design software to create “mood boards” in place of finalized comps. Instead of using your energy to create pixel perfect images, use your design software for what it’s good at – solidifying a solid design theme. You can then sell this “mood” to your client and work out all of the details in development. This gives you the best of both worlds: software for creative exploration, and code for iterating your layouts / interactions / animations.


Ezequiel Bruni, Dark Lord of Design at Gods of Mayhem

Ezequiel Bruni

Personally, coding my mockups makes more sense. CSS3 can do most everything I need, and image editors get reserved for, well, editing images. It’s faster and easier for me to jump straight from a wireframe to code, as it can show my partners/clients exactly how I intend for the site to work. It answers a lot of questions before they’re asked, helping to decrease confusion.


Andy Leverenz, Owner at Justalever Creative

Andy Lverenz

I tend to kick off my projects with design software to start. Most of the time, If given a blank slate, diving straight to code tends to be a little overwhelming from my perspective. In fact, those that create mockups using code from the start often have the same look as many other websites. Developers and Designers going this route tend to use frameworks like Bootstrap or Foundation which limits creativity from the start in my opinion. Coming up with ideas, even if not complete, inside design software has proved to be my process of choice. Because of this I am able to set up an original style across the entire project I’m designing for that I can always refer to when I finally transition to code.


Comments (0)

Over the past couple of years, CSS has gotten a set of new properties that allow us to create quite advanced graphical effects right in the browsers, using a few lines of code, and without having to resort to graphics editors to achieve those effects. If you are like me, then that sounds like music to your ears. I don’t do well in graphics editors and would choose a code path over a graphical editor path any day. CSS now allows us to do more graphical work right in our text editors.

Examples of graphical effects that we can create using CSS today include textured text effects, photo effects like color editing/tweaking, photo and element blending that also enable us to blend elements with other elements, clipping content to arbitrary shapes, and more. You can even wrap content to arbitrary shapes with CSS too!

CSS has gone a long way, and in this article I want to give you an overview of the CSS features that allow us to create such graphical effects—namely blend modes and filter effects.

Color Blending with CSS Blend Modes

If you’re a designer who frequently fires up a graphics editor such as Photoshop or Illustrator, then you’ve inevitably come across blending modes at some point or the other during your work, since blending is one of the most frequently used effects in graphic and print design. Blending operations, also known as blend modes provide us with a fine level of color blending control that enables us to perform operations such as inverting colours, mixing them, highlighting them, and more.

Different blend modes, when used, yield different effects. And a blend mode is used to specify how an element, known as the “source” will blend with its backdrop—also known as the “destination”.

In CSS, the element’s backdrop is the content behind the element and is what the element is composited with. Compositing is the fancy term for the process of combining an graphic element with its backdrop.

When you blend two elements in CSS with each other, only the areas where these elements overlap will be affected by the blend mode you choose because, as you can imagine, only those areas are where these two elements can be blended.

Before the CSS Compositing and Blending specification was introduced, CSS already offered us one way of compositing elements known as simple alpha compositing. This is what the opacity property is for. By changing an element’s opacity, the browser makes it translucent so that the colours of its backdrop can show through.

Today, two main properties exist in the CSS compositing and blending specification that enable us to blend elements with other elements and an element’s background images by specifying one of 16 available blend modes. These two properties are: background-blend-mode and mix-blend-mode.

Blending Background Images Using The background-blend-mode Property

The background-blend-mode property, as its name suggests, is used to specify a blend mode for an element’s background layer. A background layer can be an image, or the background color.

The background-blend-mode property is used to specify the blend mode for each background layer.

If the element has more than one background image, you can specify multiple blend modes—each blend mode will be used for a background image such that the first blend mode in the list corresponds to the first background image in the list of background images, and so on.

For example:

background-image: url(first-image.png), url(second-image.png);
background-color: orange;
background-blend-mode: screen, multiply;

The second-image.png background will blend with the background color using the multiply mode, and then the first-image.png background will blend with the second image and the background color using the screen blend mode. (Reminder: the first background image in the list is the one on top, and the ones following it are beneath it.)

The background images will only blend with each other—they will not blend with any content that lies underneath the element itself.

There are 16 blend modes available in CSS: normal (which is the default blend mode and means that no blending is applied), multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity. (For the sake of brevity, I will refrain from going into technical detail about each of these modes, and will recommend this article instead to learn all about them.)

These blend modes will modify the colours of a background image resulting in a different effect for each mode.

The hardest part comes when picking a blend mode to achieve a specific effect is knowing which mode to pick. It is very hard—if not impossible—to predict the result of applying a certain blend mode to an image.

The following image shows a set of results achieved when applying the above mentioned blend modes to an image. The image is being blended with a red background color. The order of blending operations from the top left corner of the image is the same as the order mentioned in the list above.

background-blend-mode-examples

The result of applying the different blend modes to an image, in the same order mentioned above, starting from the top left corner.

Usually, the way to choose a blend mode is by trial and error. Apply the blend modes to your image and settle for the one that achieves the effect you’re after.

Some blend modes, however, yield expected results and you can memorise those and use them whenever you need. For example, the luminosity mode allows you to create monotone images (bottom right corner)—this is a handy tip to keep in mind for when you’re after creating that big header image with a white heading on top which became very trendy during the past year.

As part of an article I wrote a while back, I created an interactive demo which allows you to upload your own image and preview the different blend modes on it. You can play with the demo here.

Screenshot of the interactive blend modes demo.

Screenshot of the interactive blend modes demo.

Blending background images is great and you can achieve some really neat effects using this property. The following image shows an example of blending an element’s background image with a linear gradient image also used as a second background image on the element. This image is taken from this live demo from the Codrops CSS Reference.

The result of blending a linear gradient background image with a photo background image on an element.

The result of blending a linear gradient background image with a photo background image on an element.

More creative effects can be created when you get to blend an element with other elements on the page. This is useful for when the images you’re blending need to be foreground images—not background images, and when you want to blend a piece of text, for example, with the image behind it. This is where the mix-blend-mode property comes in.

Blending Elements with Their Backdrop using mix-blend-mode

Probably one of the most useful and practical use cases for mixing elements is mixing a piece of text with some image behind it. And this is where the interesting effects come in. Think fixed headers blending with the content as the page scrolls down, or text blended with an image in the background, or text blending with other text, etc. Using the mix-blend-mode property you can do exactly that.

Just like background-blend-mode, the property accepts one of the 16 blend mode values available. Again, to see this in action, you can refer to the interactive demo mentioned earlier.

The following screen recording shows how you can add a piece of text and then blend it with an image of your choice using one of the different blend modes.

mix-demo

Screenshot of the interactive demo showing the mix-blend-mode property in action.

An example blending a piece of text with a background image behind it could look like the following. Assuming the piece of text is contained in a wrapper that has a background image applied to it, we could have something like:

<div class=“wrapper”>
    <h1>This is a blended heading</h1>
</div>
.wrapper {
     background-image: url(path/to/image.jpg);
   background-size: cover;
    /* … */
}
h1 {
    mix-blend-mode: multiply;
     /* other styles here */
}

You can also blend text with other text, allowing you to achieve nice colourful text overlapping effects like the one shown in the top right corner of the following image. All of the effects shown in this image can be achieved using different CSS blend modes.

blending-examples

Examples of effects created using CSS blend modes.

Using negative margins or relative positioning, you can shift the position of one word so that it overlaps with the word next to it, and then apply a mix-blend-mode to the word to blend it with the other word. The possibilities are endless.

Blending Notes

Sometimes, you may not want to blend an image or an element with its backdrop, or you only want to blend a group of elements together but prevent these elements from blending with other content behind them. This is where stacking contexts come in play and, using a property called isolation, you can isolate a group of elements so that they only blend with each other and don’t blend with other content on the page.

By creating a stacking context on an element, you can isolate the content of that element and prevent them from blending with the backdrop of that element. However, you can still apply a blend mode to the entire context to blend it with its backdrop.

Moreover, If you are using the background-blend-mode property, the isolation property is not needed since background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group (the element itself), as specified in the specification. This is why the isolation property will have an effect when used with the mix-blend-mode property, but not with the background-blend-mode property.

You can learn more about the isolation property here.

Note that the mix-blend-mode property also allows you to mix or blend SVG elements too.

Browser Support

CSS blend modes support is getting better by the day. You can keep an eye on browser compatibility for the background-blend-mode property here; support for mix-blend-mode can be found here.

Whether or not a property has full browser support, you can always start using it as part of a progressively enhancing workflow. These blend modes can be used to enhance your page designs, while falling back to non-blended alternatives in non-supporting browsers. By using a feature today, you’ll help push it forward and your design will eventually look right in other browsers as they support these features. So don’t let a limited browser support stop you from having fun with these properties today!

Image Adjustments with CSS Filter Effects

A filter effect is a graphical operation that is applied to an image as it is drawn into the document. It can be described as an operation that passes an image through a filter and then renders the output of that image on the screen.

One way to think of them is like a filter placed on the front of a camera lens. What you’re seeing through the lens is the outside world modified by the effect of the filter. What you see on the screen is the content modified by the filters applied to it.

To apply a filter to an image using CSS, you use the filter property defined in the CSS Filter Effects specification.

Filter effects include, for example, blur effects, drop shadows, and colour shifting and manipulation like saturating/desaturating colours, among others.

There are ten primitive filter effects in CSS, and a filter is applied to an element by passing a filter function to the filter property.

The ten filter functions are:

▪ blur()
▪ brightness()
▪ contrast()
▪ grayscale()
▪ hue-rotate()
▪ invert()
▪ opacity()
▪ saturate()
▪ sepia()
▪ drop-shadow()
▪ url()

Each of these functions is used to manipulate the image’s pixels and colours, and each function takes a parameter value that specifies the degree or intensity of the filter applied.

Conceptually, any parts of the element are effected by filter operations. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants.

The blur() function

The blur() function is used to blur an element by applying a Gaussian Blur to that element. It takes a length value as a parameter; this value needs to be a positive number and cannot be set in percentages. The larger the value the more blurred the element will be. A value of zero will leave the element unchanged.

What’s interesting is that since the parameter of the blur() function is a length value, this means that you can use any possible length unit, like em and rem.

The following are examples of valid blur() values:

blur(.5em);
blur(7px);
blur(0);
filter: blur(); /* equivalent to blur(0); */

The following image shows the result of applying a 10px blur to an image:

blur

The brightness() function

The brightness() function is used to manipulate the image brightness. It is used to make the image look more or less bright. It adjusts an image’s colours between completely black (zero brightness) and the original image colours (100% brightness). A value of zero will render the image completely black. A value more than 100% will increase the image brightness.

You can also specify the amount of brightness using a number instead of a percentage such that a percentage value of 65%, for example, would be expressed as 0.65 instead.

For example, the following are all valid brightness() values:

brightness(150%);
brightness(0);
brightness(0.7);
brightness(0.01);
brightness(200%);
brightness(10%);

The following image shows the result of applying a 200% brightness to an image:

brightness

The result of applying a 200% brightness to an image.

The contrast() function

The contrast() function adjusts the contrast of the image. That is, it adjusts the difference between the darkest and lightest parts of the image.

The function is similar to the brightness() function in that, just like brightness(), a value of zero will render an image completely black. As the value increases towards 100%, the difference in darkness changes until you see the original image at 100%. Values beyond 100% will increase the difference between light and dark areas even more. If no value is passed to the contrast() function, it defaults to 100% and the image is not changed.

contrast() also takes the same values as brightness(), so the following are all valid examples:

contrast(150%);
contrast(0);
contrast(0.7);
contrast(0.01);
contrast(200%);
contrast(10%);

And the following image shows the result of applying a 200% contrast to an image:

contrast

The result of applying a 200% contrast to an image. (That is one angry cat there! ;))

The grayscale() function

The grayscale() function converts the image into a shade of grey.

The value is also a percentage or a decimal number equivalent to that percentage. However, the percentage values need be between 0 and 100%. Any value greater than 100% will be clamped to 100%. 0% leaves the image unchanged while 100% makes it completely grey. The higher you go from zero to 100% the more the image loses its colours and becomes grey.

The following are all examples of valid greyscale() values:

filter: grayscale(); /* defaults to grayscale(100%) */
filter: grayscale(1); /* same as grayscale(100%) */
filter: grayscale(36%);
filter: grayscale(0.28);

The following image shows the result of applying a 100% grayscale to an image:

grayscale

The result of applying a 100% grayscale to an image.

The hue-rotate() function

The hue-rotate() filter function rotates the colours of an image by an angle that is to be passed to the function as a parameter.

A simpler way to understand this would be to imagine a color wheel. Every color on the color wheel has an angle at which it is positioned. If you start at one point (color) at the circle and then move along the circle by a certain angle, you end up at another point with another color.

What the hue-rotate() function does is it selects each color of the input image, rotates it by the angle value passed to it, and then outputs the image with the input colors replaced with new colors. All the colors in the image are shifted in the same way to produce new colors.

A value of zero renders the image unchanged. The maximum angle of rotation is 360 degrees. If the value for the angle is not provided, it defaults to the value 0deg and the image is not changed.

The following image shows the result of applying a 120deg hue rotation to an image:

hue-rotate

The result of applying a 120deg hue rotation to an image.

The invert() function

The invert() function inverts the colours of an image. It takes a value between 0 and 100% such that the higher you go from zero to 100% the more the image will look inverted. A value of 100% is completely inverted—all the colours are flipped so that the image looks like a photo negative (like the ones generated for old non-digital cameras). Any value over 100% will be clamped back to 100%. A value of 0% leaves the input unchanged.

Note that if you don’t pass a value to the invert() function, it defaults to 100% and the image is completely inverted. And the percentage values can also be represented as decimal numbers as well.

The following are examples of valid invert() values:

invert(); /* equivalent to invert(100%) */
invert(0.24);
invert(60%);

The following image shows the result of inverting an image’s colours completely using a 100% default value:

invert

The result of inverting an image’s colours completely using a 100% default value.

The opacity() function

The opacity() function is similar in functionality to the CSS opacity property. It accepts values between 0 and 1 or its equivalent 100%. 100% means the image or element is fully opaque, and as you go down from 100% to zero, the element becomes more and more translucent until it becomes completely transparent at zero, and then the content on the page that lies behind it—if any—will show through it. Even if you pass in a value greater than 1, the browser will clamp it down to 1/100%. Negative values are not allowed.

The following image shows the result of applying a 0.5 opacity value to an image:

opacity

The result of applying a 120deg hue rotation to an image.

The saturate() function

The saturate() function saturates the colours of the image making it look more vivid. It takes a value between zero and 100% or the value’s equivalent decimal number. A value of 100% leaves the image’s colours unchanged. The value of zero completely desaturates the image while a higher value saturates the image more, and values greater than 100% will super-saturate the image. Negative values are also not allowed.

Saturating images is particularly useful for when the image’s colours are looking dull and you want to give them a more lively appearance.

The following example shows the result of applying a 250% saturation value to an image:

saturation

The result of applying a 250% saturation value to an image.

The sepia() function

Ever heard of “the sepia effect”? You likely have—ißßt’s that effect that gives a vintage appearance to an image. The sepia() function gets its name from the fact that it adjusts an image by giving it a sepia tinge like in old photographs.

Just like previous functions, it takes a value (percentage or decimal) between 0 and 100%. The higher you go from zero the stronger the sepia effect. Values greater than 100% will be clamped to 100%.

The following is the result of applying a 100% sepia tone to an image:

sepia

The result of applying a 100% sepia tone to an image.

The drop-shadow() function

The box-shadow CSS property allows us to apply a box shadow to an element. This means that even if you have a non-rectangular element or a non-rectangular image (like a PNG), the shadow applied to that element is going to be rectangular as if the element is a rectangular box. This, in many scenarios, is an unwanted results.

For example, suppose you have the following PNG image of a star. Since it’s a PNG, it is made up of some fully transparent areas, and the star is the only opaque area. When you want to apply a drop shadow to the image, you’ll likely want to achieve the following result:

drop-shadow

An image with a drop shadow applied.

Using box-shadow, you’d end up with something like this instead:

box-shadow

An image with a box shadow applied.

This looks ugly.

The drop-shadow() filter function allows us to achieve the previous result.

The drop-shadow() function takes a value similar to the value accepted by the box-shadow property, except that the drop-shadow() function’s shadow does not include a spread radius like the box-shadow‘s does, and the inset keyword is also not allowed in the drop-shadow() function. I’ll assume you’re familiar with the values of the box-shadow property. If not, please refer to this entry in the Codrops CSS Reference for a list of possible values and detailed explanation and examples of each.

To apply a drop shadow using drop-shadow(), you pass in the value of the shadow you want and simply apply it to your image. For example:

.png-img {
    filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));
}

The url() function

The url() function allows you to use a filter defined in an SVG document and apply it to your element. Instead of using one of the above 10 filters, you can define your own filter in SVG and then apply it to the element by referencing the filter’s ID in the url() function. For example:

/* filter from an external SVG file */
filter: url(myFilters.xml#effect);
/* or filter defined in the main page */
url(#myFilter);

The following is an example of a blur filter defined in SVG:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  </filter>
</svg>

Referencing that filter in CSS and applying it to an element would apply a Gaussian blur filter to that element.

Since SVG filters are a big and wide topic, we won’t be getting into the details of them in this article.

Live Demo!

Because CSS Filters are not supported in all browsers, I showed screenshots of the effects in all of the previous examples. That being said, you can still play with the filter values in the following live demo:

See the Pen 7405c808441c8021bb6bc59baef72441 by Sara Soueidan (@SaraSoueidan) on CodePen.

Just like with CSS blend modes, you can use CSS filters to enhance your pages, so you don’t need to wait for full browser support to start playing with and taking advantage of this cool CSS feature.  

Multiple filters

You can apply multiple filters to an image or element. When you apply multiple filters to an element, the order in which you apply those filters matters and changes the final output of that element. If you apply multiple filters, these filters should be space-separated. For example:

filter: sepia(1) brightness(150%) contrast(0.5);

 

Animating filters

Filters can also be animated, this allows you to create some really creative effects. An example of multiple filters being animated on an image is the following image fading effect by Lucas Bebber:  

See the Pen Pretty Fade by Lucas Bebber (@lbebber) on CodePen.

Lucas’s work is extraordinary, so you might want to check his Codepen profile out for more beautiful experiments that are sure to spark your creativity.. and curiosity.

Order Of Graphical Operations

In addition to blending and filters, an element could also be clipped and/or masked. If you apply more than one graphical operation to an element, the browser needs to decide which operation to apply first, and depending on the order, the end result would be different.

There is one specified order of operations in CSS according to the specification: first any filter effect is applied, then any clipping, masking, blending and compositing.

Inspiration

Not long ago, Dudley Storey created a neat experiment using CSS blend modes and clipping paths to create a 3D Glasses effect.

3d-glasses

Screenshot of Dudley’s 3D Glasses demo using CSS blend modes.

You can check his demo and tutorial out here.

Final Words

CSS Blend Modes and Filters are only two of the features that CSS proves us with to create graphical effects on the web. Other effects also exist that bridge the gap between print design and web design, giving us—web developers and designers—more control and better tools for designing in the browser, without having to resort to graphics editors to achieve such simple—yet powerful and impressive—effects.

If you’d like to learn more about other CSS graphics features, make sure to leave a comment below requesting a followup article.

I hope you found this article useful. Thank you for reading!

Comments (0)

Database Design and Management

Cwebpro can design and develop a small business data management solution for you. We will provide professionally crafted entry screens and a database that will grow with your business.

Professional Web Designs

If you need a web site designed or updated contact Matthew at Cwebpro for quality work at a fair price. The Web Creation Zone (Cwebpro) can meet all of your business website design and data management needs.