How To Create Compelling Narratives Through Web Design

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

Front-end Frameworks: Getting Started with Bootstrap

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. There are also various other files included to provide support for packages, license information, and development.

This option requires a Less compiler, some setup 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!

Set yourself up for UX success: 5 key questions to consider before starting a project

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.

Customer Spotlight: Alexsandre Andrade’s Revved Up FIAT Campaign Website

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.

New to Material Design? 12 Principles You Need to Know

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.

Flat Design vs. Material Design: What Makes Them Different?

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

Intro to Coding and Designing For Accessibility

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.

Experts Weigh In: Mockups – Design Software or Code?

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.

An Introduction To Graphical Effects in CSS

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.