Monthly Archives: November 2016

The most difficult elements of design

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.

In the case of digital design, there is a constant desire to see and create new styles. I’d liken it to the iPhone, for example. The style of the design is difficult to fault, yet we constantly crave a radical redesign at every year’s keynote event. The style might be different but often it’s very difficult to argue it is in fact better. The iPhone 6/7 might look different compared to the 5, but does it grip in your hand as well? Does it rest on the table flat? It’s a classic case of constant desire for change that does not always yield a better product. The same concept can be applied to digital design. We love seeing new things, experiencing new things, and design is no different.

Creatives are differentiating styles in order to maintain a unique selling point for services. Again, it’s not changing styles because they are better and help the user — it’s change as a byproduct of boredom, competition and the requirement to stand out.

Improve Usability and User Experience

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

 

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.

A Design Workflow Comparison

The ever-expanding world of design can be tough to comprehend as a newcomer. With so many tools and techniques available it’s hard to know where to start.

Three of the most widely used design programs are Adobe Photoshop, Adobe Illustrator, and the newer Sketch by Bohemian Coding.

In this guide I want to compare these three titans of industry to see how they stack up for common design tasks. All three programs are incredible, but they each have their own strengths and weaknesses for certain creative tasks. One you know which tool best fits the task at hand you’ll have a much easier time learning and mastering digital design work.

 

UI Design

Interface design usually relates to websites and mobile apps, but can also include game UIs or any digital screen that takes user interaction.

For years Photoshop was the #1 choice for UI design. In PS you can build vector icons and textured backgrounds to mix into one common layout. But Photoshop was always intended to be a photo editing suite, and while Fireworks was better it has since been discontinued by Adobe.

This is where Sketch comes into play. The very first release of Sketch App was in late 2010. It has since grown massively with a large community fostering learning materials and entire websites dedicated to free Sketch resources.

When it comes to UI design Sketch is currently the king. This program’s purpose was to be a UI design suite for web & mobile. Patterns, textures, and vectors all intermingle with each other much easier than in Photoshop.

The only downside is that Windows users cannot run Sketch because it’s OS X exclusive.

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.

 

It’s Not Just Twitter’s Problem

I am not picking on Twitter. It happens to be a great source of examples. What if there is breaking news of a terrible incident?

 

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.