Category Archives: Web Design

Cheat Sheet for Typography

Understanding type can be one of the most difficult elements of design. There’s a lot of terminology and lingo that type designers (and designers, in general) use when talking about lettering. Sometimes it can be tough to decipher it all.

If you find yourself wondering what the difference between a hook and a counter are or you still aren’t sure how a serif and a slab are different, we have you covered with this typography cheat sheet.

It describes all of the different aspects of lettering, from terminology to components to type styles and methods of typographic manipulation so you will have a better grasp on how to understand and use typography in your design projects.

Are you ready to get started? We’ve got a great infographic to help you better understand the elements of typography.

Emotional Intelligence and Design

Beth Dean wrote an amazing post on Medium about painful experiences brought up unintentionally by technology. The blog post was inspired by a website trying to verify her identity asked her if she knew her deceased mother. (It’s absolutely nothing in comparison to having a silly animation disappear.) In her post, she talks about designing with emotional intelligence. She identified emotional intelligence as having five traits: self-awareness, self-regulation, motivation, empathy and people skills.

Self-Awareness and Self-Regulation

A great example of self-awareness is Facebook asking a user if they want to see ads based on their behavior. Not only does it create a better experience it is more relevant to the user.

The Uncomfortable Side of Design That You SHould Know

In March 2016, Twitter celebrated its 10th birthday. It was a day filled with pride for the company and many of its followers. In order to make the day amazing for its users, Twitter released a delightful like/heart button animation.

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

Decluttering Web Designs

We often speak about decluttering in the sense of physical stuff like closets or storage. But, we can also speak about decluttering designs too. Decluttering can help improve usability and the user experience on websites.

Here are tips for decluttering you designs.

1. Shorten the Copy

Dating back to 1997, Nielsen Norman Group conducted a study to learn how users read on the web. I’m sure you know that they don’t read. Instead, most people scan the pages. Yet, there are plenty of websites filled with unnecessary words. Unfortunately, copy that is messy or indirect is common. You can clean up the content of a website by removing the amount of words on the screen.

Remove unnecessary words. Shorten run-on-sentences and remove redundant sentences, too. Always have one idea per paragraph. It’s a good form of writing and it’s better for those readers who scan. Finally, and this is true especially of long-form content, use the inverted pyramid structure. Start with the conclusion and add more detail as the content gets longer.

This is one of my favorite apps, Days. It’s an app for counting down days until an event. The app’s landing page has very little copy per section. The above screenshot is from a single section of the landing page. Notice the super short copy. It look good and reads even better.

Aiia is a waterproof speaker and its landing page is fantastic. Despite a scroll oddity, I am in love with the page’s cleanliness. The limited copy is a fantastic way to get the main idea across to users without getting lost in mountains of words

2. Remove Visual Decoration

When it comes to visuals, sometimes we want to throw in an extra element just to make things pretty. We all want the design to look good. And although those intentions are good, the execution can become too much. That’s why I’m a big proponent of removing any decorations that are not necessary. The great thing about decorations is that they don’t hurt the user experience if you remove them.

I’d like to compare two websites. VConcept (above) and Born (below). VConcept has less content on the page but it’s much harder to digest. All of the decorations on the VConcept page get in the way. There is a triangular pattern background and a moving line background. The copy has three different styles – plain text copy, underline and gold underlined text.  Not to mention that the logo is in that paragraph as well. It’s just too much.

On the other hand is Born’s career page. Yes, it has a lot more text but it works because there are no decorations to distract. Imagine if those job posts were boxed in with a single-pixel border. The information would be much harder to scan.

3. Reuse Design Elements

Consolidate and reuse repetitive elements. For instance, when there are many colors, fonts or style variations it will get messy. Reuse design elements to keep things consistent; consistency makes for a clean design. There are rules of thumb such as “don’t use more than two or three fonts” for this specific reason. The same goes for colors and elements, too. If you have a newsletter capture at the bottom of pages, make sure it looks the same on all pages. Inconsistency could lead to some serious confusion.

Lets star your web design for great look

When visitors land on a new website they usually have no idea where to begin. They usually just look around for nav links that might provide the info they’re looking for. But the newest trend of the “start here” page offers a much better experience.

Brand new users on your site should be inspired to keep browsing deeper into your posts. The best way to achieve this is with a single unified intro page featuring links, a small guide to the site, and even some background about yourself & the site’s history.

In this post I’ll look into the trend of start here pages to see what they offer and how you can take advantage of them in your own projects.

Introduce Your Website

The biggest reason to use a “start here” page is to introduce new visitors to your website. Since each site offers something different the “start here” pages will have a different goal based on content.

Your page should share vital information and aim to educate visitors about the site. But it should also drive visitors further into the site by sharing the best resources and links to get started.

Personal blogs run by one person could have a “start here” page that introduces the person and their history with the website. This is the case with Darren Rowse on his site ProBlogger.

This is actually one of the more well-designed examples because Darren has years of experience with writing, design, and user conversions.

He offers a bunch of links to relevant posts right off the bat. He also has an embedded intro video for new visitors who want to learn more about the site. Down lower on the page you can read about Darren’s journey and how he built ProBlogger into the empire it is today.

By starting with a personal touch readers can be enticed to keep browsing further into the site. The page is full of CTAs for Darren’s newsletter and free e-book which may garner more clicks from people who now understand the mission behind ProBlogger.

How to Get 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).

This might seem strange, but the main purpose of my personal portfolio is not to hire me. In my case 90 percent of the inquiries I get are via Dribbble, so I decided to focus more on showcasing personal favorites.