Monthly Archives: November 2016

A Successful Onboarding Experience for New Users

The term onboarding comes from the HR department. It was originally used to refer to new hires and having them “acquire the necessary knowledge, skills, and behaviors to become effective organizational members and insiders.” If you replace the aspect of new hires with new users the idea is exactly the same.

Think of it as part of the whole signing up user journey. Onboarding is part of the funnel and it’s part of the user’s first experience with you app. Onboarding experiences can be good or bad. However, I’ve found that app which see onboarding holistically within the whole picture – from getting the user to click the sign up CTA to the user using the product – have the best of experiences.

 

What does the user need?

Let’s starts with the purpose of creating the onboarding experience. What does the user need? What kind of information do they need to acquire in order to be successful with using your product? Do they even need an account in order to use your product? If not that affects how the user. I don’t need an account to use wireframe.cc but, it is handy if I want to save my work. Since I don’t need an account, I can start using the app right away and it’s a pretty intuitive app.

The onboarding experience here is pretty minimal but I do have everything I need in order to use this product.

 

Do you really need their email?

What about something more complicated? What about onboarding for an app like Slack? In order to use Slack, I do need an account. Therefore the onboarding starts on their home page.

 

Lets bring on the web design trends

The new year will come with plenty of new techniques and trends, but the dominant theme is likely to be a continuation of things we have started to see at the end of 2015. More video, vertical patterns, Material Design-inspired interfaces and slide-style sites will grow in popularity.

And it’s not hard for you to make the most of these concepts. Here, we’ll ring in the new year with 11 web design trends (and plenty of great examples) that designers will be seeing a lot of in 2016. (Make sure to click the links as well and play around with some of these sites to really get a feel for them. Many of the trends are just as much in the user interface as the visuals.)

One of the biggest elements to spring from Material Design has been the emergence of card-style interfaces. They are in everything from apps to websites to printed pieces. Cards are fun to create, keep information organized in a user-friendly container and are engaging for users. The other bonus is that they work almost seamlessly across devices because cards can “stack” across or down the screen (or both).

 

Hero Video Headers (Think Movie-Style Sites)

Websites design is going to the movies. Higher speed Internet connections and better video plugin integration is making it easier for more websites to include an immersive movie-style experience. Video clips are growing from small snippets to almost full-length preview clips. The images are sharp, crisp and in high definition, creating a video experience online that is new to users, but familiar from other devices, such as televisions.

 

Tiny Animations

Animation has been one of the “it” trends of 2015. From hero-style animations that lead off a site design to those tiny divots that you almost miss, moving elements are everywhere. And they will continue to grow in popularity, even as they decrease in size. Animated user interface elements are a fun way to help engage users, give them something while they wait for content to load and provide an element of surprise.

How to Make a Great Personal Online Portfolio

As a designer I think we’ve all experienced the difficulty of creating something personal, including a portfolio. You end up spending countless hours in Photoshop, trying a hundred different things and after two months you realize that your homepage still says “under construction.”

This might not be the case for everybody, but being my own client is quite challenge and that’s why I want to share how you can better set up a personal portfolio.

 

What’s the Purpose of Your Portfolio?

Before jumping in Photoshop and pumping out cool ideas, start with the core of your “business.” You are the client. Just as any other project you need to set goals first.

  • Do you want to sell products?
  • Simply showcase your products?
  • Get to know you?
  • Educate your audience?

These are just a couple of examples and you don’t necessarily have to pick one. A good idea might be to write down the goals you came up with and give them values. In my case that would be: Sell products (0/5), showcase products (2/5), get to know you (2/5), hire you (1/5).

The most creative and productive designer in the world

You can be the most creative and productive designer in the world, but it doesn’t mean anything without paid work. Designers can rely on repeat clients but it’s important to keep meeting new potential clients and building future relationships.

In this post I’d like to share tips and strategies for getting your work out there into the eyes of clients and other designers. There is no one best method to use, and in fact you should employ multiple strategies to garner the largest reach possible.

But make a game plan and learn why self-promotion is so important. Through practice it’ll become a lot easier like second nature.

 

It All Starts With A Portfolio

This should be obvious but I’m surprised how many designers have a weak portfolio of work, or even worse nothing at all.

Everyone uses the Internet and there’s no reason to believe this is slowing down.

If you do any digital work then you should have an online portfolio. This includes all creative jobs whether you’re an icon designer, web designer, digital artist, motion graphics designer, or anything similar. And this doesn’t mean that you need a custom website domain (although it’s a big help).

But you can setup a simple free portfolio on a service like Tumblr, Dribbble, or Behance.

People often browse these websites specifically looking for talent to hire. Your work needs to be good to actually land jobs. But having anything online is better than nothing.

You can always delete old work and upload new work as your skills improve.

But just get yourself online and get your work up. This makes it so much easier to share your work whenever someone wants to see what you can do.

The worst situation is when you meet a new potential client that’s looking for a designer but you have nothing to show them. So if you don’t have anything up online that should be your first step.

The Uncomfortable Side of Design

It was awesome, but as soon as the day was over the animation was gone too. Some people don’t care and some didn’t even notice but those who did were left with a void. I’m not exaggerating; hear me out. The heart explodes with confetti, it bounces and is jolly and colorful. Overall, it makes the mundane tasks of liking or favoriting a tweet much more interesting and fun. When you take that away it’s a little sad and underwhelming.

Since it’s birthday, Twitter did update the heart animation to be a little but more than just a color change but it’s still nothing compared to the confetti explosion. All in all, this is a silly complaint yet people are disappointed enough to blog about it on The Next Web. It actually bummed people out, which is rude and awful.

 

Taking a Step Back

Let’s also talk about the aspect of hearts versus stars. If you recall, late 2015, Twitter changed its UI from stars to hearts. “The heart is a universal symbol, it’s a much more inclusive symbol,” said Casey Newton. Check out Twitter’s gif for what the new heart UI is all about. (No, it’s not the same as the confetti explosion from their birthday.)

The decision was business oriented because Twitter was excited for increased interactivity due to the change. Again, that’s all fine and dandy but what happens when you have a negative thoughts. How is a heart at all an appropriate response for a negative remark? It’s not, it’s insensitive and unhelpful. A star is also unhelpful, for what it’s worth.

Interactive Mockup Exercise

When you think of a good website design, what comes to mind?

For me, it’s Airbnb. I like its design not just because it has a pretty color palette or an eye-catching video on the front page, but because it was built with good user experience in mind.

But how do you define good user experience for a website?

For one, it has to be both easy to navigate and easy to search. Websites for businesses, by and large, provide information for customers and potential customers. If your customers don’t understand the information or can’t find the information that they’re looking for, then your website will have failed.

To design a great website, both the structure and the content need to work together to present valuable information at the right time and the right place. There’s a lot of coordination involved, and often times things go wrong. You can’t rush it. You have to build your website to fit the content from the ground up.

How do you start designing a great website? Build a wireframe, then iterate into an interactive mockup.

 

Why Wireframe?

Wireframing is a great way to quickly communicate concepts and experiment with multiple iterations of any design.

Wireframes are not full-blown coded prototypes with actual visual design. They are just low-fidelity static designs that allow you to test iterations quickly and get feedback. The best wireframes are also interactive, allowing for more insightful testing of how the design actually works.

Content is the heart of design. People use products and visit websites for the content not because they want the design. And when you wireframe, you allow yourself freedom to experiment, fail, and improve the structure of your most important design asset.

 

Timeless UI Design Principles

Before we dive into the wireframe and mockup design exercise, let’s first deconstruct how Airbnb’s website works.

 

1. Bring Attention to Stunning Imagery

When you’re thinking of a place to travel, you’re probably not thinking of your travel itinerary or your rental car information.

Whatever you’re thinking of, it’s likely visual. Pictures of where you’ll be staying. Images of all of the cool sights to see. When you want to travel, you’ll want to see pictures.

That’s exactly what Airbnb did on their website. Every element is highly visual.

All of the content, meaning the house listings and suggestions for places to travel, prioritize images over text. The picture frames take up most of the space, leaving a couple of bold words and a button aside for the user to act on.

The entire header is a video of Airbnb travellers experiencing different cultures and environments around the world. That’s what people want to see in a travel website. They don’t want to just fill out some plain text forms and book a home. They want to travel while they’re planning to travel.

Purposeful imagery is always more powerful than mere words.

 

2. Simplify Your Content

Unfortunately for people wanting to travel, the process is often very complicated.

You have to scout out the places you want to visit, decide on your trip’s location(s), find a place to live, plan at least some of your time there, buy plane tickets or plan a driving route, and so much more. It’s just a big hassle.

The last thing anyone wants to add to their travel experience is more complication.

Tips and Tools for Designers

The task of prototyping a website is an extensive process of creating a basic wireframe with interactive features. While a wireframe may be static images or sketches, a prototype is often interactive with functionality for all the major pages.

Graphic editing programs have always been the most popular choice for prototyping. But in recent years more developers are switching to in-browser prototyping. It’s much faster, cleaner, and simpler when constructing a brand new project. But how do you get started?

In this post I’d like to cover the basics of prototyping in the browser and give you some tools to help you along the way.

 

Basics of In-Browser Prototyping

Websites can be described as digital interfaces built to run in a web browser. Many designers like to create these interfaces in graphics editors before moving on to coding.

But it makes more sense to prototype websites in a browser to see how each feature works, and to gauge initial concepts like layout structure and page animations.

There is no single best way to prototype although most designers have their own routines for getting started on a new project. Many designers still prefer to start in Photoshop, but starting in the browser has many advantages.

  • Easier to test & change grid systems
  • Breakpoints can be added on a whim
  • Dynamic effects like dropdown menus can be tested live
  • You start with a small codebase and slowly add more as you go

Photoshop doesn’t allow you to dynamically interact with a mockup. This is also true for responsive breakpoints where you’d need to create individual documents or layer groups for breakpoints.

Ultimately browser prototypes are a more accurate representation of the final interface. Mockups and sketches are flat and static. These are still valuable assets, but eventually you’ll need an interactive layout. This is why browser prototyping saves a lot of time.

Create Perfect Color Combinations

One of the most challenging and tricky parts of the design process can be choosing a color palette that represents your brand or message, while creating an amazing base for the design.

Creating perfect color combinations is more than just picking two colors and running with it. There’s actually quite a bit of science and design color theory behind it. Today, we’ll look at nine ways to help you create a more perfect color palette. (And of course, the tips come with a showcase of websites featuring beautiful color combinations.)

Do you remember the color wheel from school as a child? It’s still a practical tool as an adult.

The color wheel can help you think about color and how different hues relate to one another. It’s a practical way to determine whether a pair (or more) of colors will relate to one another in a harmonious way.

The wheel contains primary, secondary and tertiary colors and every combination therein.

  • Primary colors: Red, Yellow, blue
  • Secondary colors: Green, purple, orange (mix of two primary colors)
  • Tertiary colors: Azure, violet, rose, red-orange, chartreuse, spring green (mix of a primary and secondary color)

How you mix colors on the wheel is important and contributes to how well the hues work together.

  • Analogous: Pick three colors next to each other on the color wheel
  • Complementary: Colors from opposite sides of the color wheel
  • Split complementary: Pick a color and use the color on either side of the opposite color from the color wheel
  • Double complementary: The hardest to create, this concept uses a primary color and complements from both side of the opposite color on the color wheel (works best with tints and tones)
  • Monochromatic: One color and variations of that color (such as Nifty, above)
  • Triadic: Three colors equally spaced on the color wheel

Most color-picking tools use a simulation of a color wheel to help you make color choices. (So there’s really no way around this part of design theory.)