Homepage design has always been kind of an art of its own alongside other activities that go into building a complete website design.

In some way, a good homepage needs to be able to stand as a separate creation – one that achieves its specific goals. Those goals, even though they have a direct connection to the overall goal of the website as a whole, should be much more laser-focused.

I do realize that this might sound a bit vague, so to make it clear, let’s look into the eight myths on homepage design that everyone should know.

Myth #1: A homepage needs to be pretty

Granted, no one enjoys looking at an ugly homepage design, but that being said, a homepage being pretty is not the end game.

In other words, focusing only on making your homepage design pleasing on the eye won’t get you far in the direction of making your client happy (at least over the long haul).

There’s one thing that matters a whole lot more than just the visual attractiveness of a homepage, and that is the homepage’s ability to achieve its main goal.

Every homepage should have its purpose – the main reason for which the homepage was created – so when working on the design, one of your most important tasks is defining that purpose.

You can try answering the following question to make your work easier:

What is the main thing that you want your visitors to do after they see the homepage?

For example, is it subscribing to a newsletter or some kind of a membership program? Maybe it’s going to the blog and interacting with the posts there? Maybe it’s looking into the products/services offered on the site? Whatever it might be, make that your no.1 goal when designing the homepage.

If it ends up being an eye candy too, then it’s just a side bonus.

One of the best examples of goal-driven homepage design on the web is … Craigslist. It’s ugly, but it gets the job done:


Myth #2: A homepage needs to cater to everyone

Or in other words, the myth says that no matter who comes to view your homepage, they should be catered to and happy with what they find.

However, this tends to backfire more often than not. Even though it may seem counterintuitive, alienating some of your visitors right away can have a positive impact on those visitors who do decide to stay. This is because, at that point, they already know that what the website has to offer is almost tailor-made for them.

Let me give you an example from an entirely different kind of business – the restaurant business. It’s a common mistake among many restaurant owners (at least judging by watching Kitchen Nightmares) to offer a multitude of dishes and thinking that this way, “everyone will find something for themselves.” But in practice, it backfires because the average customer has no immediate indication if the restaurant is a good fit for them.

For instance, if you fancy a pizza, you will go to a pizzeria almost 100% of the time. You won’t go to a place that serves tens of different dishes where pizza is just one of the items on the menu. Does the pizzeria alienate some of the customers just by saying right away that their main dish is pizza? Yes, of course. But do they lose anything in the long run? Not really.

Therefore, make your homepage design a pizzeria, so to speak. Show that what the website has to offer is pizza, and make it clear that if someone doesn’t like pizza, they shouldn’t be there.

Myth #3: A homepage needs to present a lot of information

We can safely say that the age of elaborate homepages is behind us.

Homepages simply no longer need to be huge in order to achieve their goals.

In fact, less is more.

Less has always been more.

As we’ve already discussed here, the main job of a homepage is to give the visitor a nudge towards a certain action that you want them to take. And as it turns out, displaying more than a minimum-effective-dose of information works against you.

This is confirmed by Nielsen Normal Group in one of their studies. They say that around 79 percent of users scan every new webpage they see, while only 16 percent read it word by word. So in the end, making a page more concise results in a 124 percent increase in usability.

Let’s take a look at the homepage at Contently.com, for example:


There are just three lines of text there, followed by two calls to action: “learn more,” and “talk to us.” After reading those three lines of text, the visitor already knows if they’re intrigued enough to click either of the buttons. And that’s all you need when building a homepage.

Myth #4: A homepage needs a slider

Designing with sliders is an incredibly lazy approach.

After all, it’s quite easy to place a slider right beneath the main navigation and put some banner-like graphics in it. Most commonly, you’d use 3-4 slides and put them on an automatic rotation. It’s a very popular technique and thousands of homepages opt to do it.

However, as data confirms, sliders are incredibly ineffective at getting conversions, retaining visitor’s attention or doing anything else that would produce a positive effect.

For example, here’s what Chris Goward of WiderFunnel had to say about them in one of his research posts:

“We have tested rotating offers many times and have found it to be a poor way of presenting home page content.”

At the end of the day, the information we have at our disposal these days simply suggests one good solution:

Don’t ever use sliders on your homepages.

Myth #5: A homepage needs to talk about “you”

Where by “you” I mean the person/business you’re building the site for. So for example, “you” means talking about the products that the business has to offer.

Now, just talking about “you,” per se, isn’t bad at all. You have to do it to some extent, otherwise you won’t create any sort of a connection with the visitor.

However, what matters here is the wording you’re using.

For instance, saying something like, “We’ve been in business since 2004. See our offer by clicking here,” doesn’t achieve anything at all in terms of resonating with the visitor.

What will resonate, though, is building your homepage design around the concept of, what’s in it for the visitor.

For example, let’s take a look at the homepage at Due.com:


It doesn’t say, “We’ve been in the tracking business for X years.”

It does say, “Due.com helps you keep track of your time and lets you invoice like a pro.” It is almost entirely visitor-centered.

In a nutshell, make your homepage about them, not about you.

Myth #6: A homepage needs to showcase company news

Really, please don’t.

People generally don’t care about what’s going on on the inside of a company.

Why? Again, there’s nothing in it for them.

In essence, any sort of company news has very little connection to the visitor and their needs, unless the visitor is an investor or the website is meant to be an internal company website, in which case, you are clear to show company news on the homepage.

Myth #7: A homepage needs to look the same on all devices

The idea of designing websites for multiple devices is quite a new chapter in web design history. Not that long ago, the only thing we had to consider was whether our site was looking as good on 800×600 as it did on 1024×768.

But times have changed, and now we have a multitude of screen sizes and resolutions to deal with. However, thinking that your homepage needs to look the same on all of them is a dangerous route to take.

The main problem with this reasoning is that a person visiting your site from a mobile device is probably in a completely different mindset than a person visiting from desktop.

For instance, if someone visits a restaurant’s website from desktop, they probably want to get familiar with what the restaurant has to offer, what’s on the menu, and so on. But when they visit from a mobile, the no.1 thing they’re interested in is the address and the opening hours.

Good homepage design should at least try to cater to different sub-groups of visitors based on the device they’re using.

This can be achieved with responsive design to some degree. Through CSS classes, you can set certain HTML blocks to have more focus, or to not get displayed at all.

In short, a homepage doesn’t need to look the same everywhere, but it needs to help the visitor in solving their current issue.

Myth #8: Once you build it, it stays

Homepage design should never be a one-off task.

The unfortunate thing is that your first attempt at designing a homepage for any site (that’s any site) won’t produce the optimal result. This is all due to the fact that you simply can’t predict how the homepage is going to perform in the real world.

You can only assume how the visitors will interact with the homepage, but you can’t know for sure. This knowledge comes with time and by testing different concepts.

Therefore, rather than hoping that your design is going to rock right off the gate, build at least two alternative versions and split test them against each other.

How different do the designs need to be? This is up to you. You can start with some simple differences in copy, or more significant differences in the overall layout. The point is that there needs to be a difference and that you need to set a metric in place that will allow you to judge which version is better (this is usually done by tracking clicks on certain links or the occurrences of a visitor filling out a form).

Once you have some raw data, you can scrap the lower-performing version of the homepage, create a completely new version, and then run it against the previous winner.

Doing this at least a couple of times is how you build a quality homepage.


There’s a lot more that could be said on the topic of homepage design mistakes, and we didn’t even get to the technical issues (like using images that are not optimized, or fonts that are too small).

I guess we’ll leave that for next time.

So what do you think, are you guilty of falling for any of the myths described here?

Comments (0)

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.


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:

    ├── 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:

    ├── 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">
    <!-- page information here -->
    <title>My web page title</title>
    <!-- page content here -->

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

<!DOCTYPE html>
<html lang="en">
      <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>
    <!-- page content here -->

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">
      <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>
    <!-- page content here -->

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

<!DOCTYPE html>
<html lang="en">
      <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>

    <!-- 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>

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.


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.


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.


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.


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.


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.


“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.


“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.


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 by Mauro Marini on Behance

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


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:


  • 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.


  • 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.


  • 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.


  • 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.


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.


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.


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


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)

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.