Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Underestimated Power Of Color In Mobile App Design

Color is arguably the second most important aspect of your app, after functionality. The human to computer interaction is heavily based on interacting with graphical UI elements, and color plays a critical role in this interaction.

The Underestimated Power Of Color In Mobile App Design

It helps users see and interpret your app's content, interact with the correct elements, and understand actions. Every app has a color scheme, and it uses the primary colors for its main areas.

Read more...

MJML – How To Make Responsive HTML Email Coding Easy

Email is one of the best ways to engage with your users, especially during the holiday season. However, if you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader's inbox, regardless of what email client they're using. Creating responsive email is not an easy task, and there are various reasons for that.

Making Responsive HTML Email Coding Easy With MJML

First, there is no standard in the way email clients render HTML. This is true for email clients from different companies, such as Outlook and Apple Mail, but not only. Even different versions of Outlook, such as Outlook 2003, Outlook 2013 and Outlook.com, render HTML differently.

Read more...

Advertise with us!

Is App Indexing For Google Worth The Effort? A Case Study

Will the resources spent implementing app indexing for Google search be a boon or a bust for your app’s traffic? In this article, I’ll take you through a case study for app indexing at our company, the results of which may surprise you.

A Case Study: Is App Indexing For Google Worth The Effort?

App indexing is one of the hottest topics in SEO right now, and in some sense for good reason. Google has only been indexing apps for everyone for a little more than two years, and with only 30% of apps being indexed there is huge potential for websites to draw additional search traffic to their apps.

Read more...

React Internationalization – How To

First of all, let's define some vocabulary. "Internationalization" is a long word, and there are at least two widely used abbreviations: "intl," "i18n". "Localization" can be shortened to "l10n".

Internationalizing React Apps

Internationalization can be generally broken down into three main challenges: Detecting the user's locale, translating UI elements, titles as well as hints, and last but not least, serving locale-specific content such as dates, currencies and numbers. In this article, I am going to focus only on front-end part. We'll develop a simple universal React application with full internationalization support.

Read more...

More Than Just Pretty: How Imagery Drives User Experience

As the saying goes, "A picture is worth a thousand words." Human beings are highly visual creatures who are able to process visual information almost instantly; 90 percent of all information that we perceive and that gets transmitted to our brains is visual.

More Than Just Pretty: How Imagery Drives User Experience

Images can be a powerful way to capture users' attention and differentiate your product. A single image can convey more to the observer than an elaborate block of text. Furthermore, images can cross language barriers in a way text simply can't.

Read more...

Eye-Catching App Icon Design: How To

Creating that singular piece of graphic design that users will first interact with each time they encounter your product can be intimidating. A beautiful, identifiable and memorable app icon can have a huge impact on the popularity and success of the app. But how exactly does one make a "good" app icon? What does that even mean?

Designing Better App Icons

Fear not, I've put together some tips and advice to help answer these questions and to guide you on your way to designing great app icons. I've been designing, making resources and giving talks about icon design for the past couple of years. In this article, and in the video at the end, I'll sum up what I've learned about this amazing craft.

Read more...

Styled Components: Enforcing Best Practices In Component-Based Systems

Building user interfaces on the web is hard, because the web and, thus, CSS were inherently made for documents. Some smart developers invented methodologies and conventions such as BEM, ITCSS, SMACSS and many more, which make building user interfaces easier and more maintainable by working with components.

Styled-Components: Enforcing Best Practices In Component-Based Systems

After this shift in mindset towards building component-based user interfaces, we are now in what we like to call the "component age." The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the "right way" to build web applications, and many other things have illuminated this revolution.

Read more...

Freebie: Clothing Icons (40 Icons, 9 Styles, AI, EPS, SVG, PNG)

Winter means getting out your scarf and a cozy hat to brave the cold — if you're located in the Northern hemisphere that is. For all those occasions when your projects may need to get dressed up a little, we are happy to present to you the free Clothing Icon Set created by the design team at Creativebin today. The set includes 40 icons with everything ranging from shirts, pants and dresses to a blazer, hat and even a scarf. Available in nine styles and four formats (AI, EPS, SVG and PNG).

Freebie: Clothing Icons (9 Styles, AI, EPS, SVG, PNG)

Please note that this icon set is licensed under a Creative Commons Attribution 3.0 Unported. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is not cool. Please provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word in blog posts or anywhere else.

Read more...

Designing A Responsive Music Player In Sketch (Part 2)

Welcome to the second part of this tutorial, in which we will finish designing the music player that we started in part one. This includes creating the icons at the bottom, as well as making the music player responsive, so that all elements adapt to the width of the artboard and, thus, can be used for different device widths.

Designing A Responsive Music Player In Sketch (Part 2)

Our premise in creating all of the icons is to use basic shapes as often as possible, instead of custom vector elements. Shapes are much easier to set up and modify, and we will still be able to combine them into more complex forms using Boolean operations.

Read more...

How Functional Animation Helps Improve User Experience

Since humans are visually driven creatures, the impact of imagery only increases with the help of animation. Our eyes innately pay attention to moving objects, and animation is like eye candy — catchy and bright elements that call attention to and help differentiate an app from its competitors.

How Functional Animation Helps Improve User Experience

As of late, more and more designers are incorporating animation as a functional element that enhances the user experience. Animation is no longer just for delight; it is one of the most important tools for successful interaction.

Read more...

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer's eyes. If you're a web developer, it's inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves "webmasters" and used Frontpage, WYSIWYG editors and tables to mark up our websites.

An Introduction To Building And Sending HTML Email For Web Developers

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

Read more...

Breaking Out Of The Box 50 Examples Of Stellar Use Of Light, Shadow And Texture To Kick Start Your Inspiration

Many people find it difficult to get their minds back into work after a holiday season filled with love, food, and friends. May 2017 bring you a healthy and inspiring adventure. As for that kick-start inspiration, I hope this article will help get you back in the creative mindset.

Breaking Out Of The Box: Design Inspiration (January 2017)

The above illustration has a style that I'm sure everyone will admire. The combination of colors used is simply marvelous — so simple, yet so complex.

Read more...

↑ Back to top