Design PatternsThe Semantic, Responsive Navicon

Icons are scattered throughout our history as a species; early man painted pictures onto stone depicting their triumphs over their hunted prey, Egyptians had an icon-based writing system in their hieroglyphics, and in the early church the symbol of a fish represented a Christian meeting place or tomb. Icons have always served a definitive purpose throughout mankind's history on this planet: to inform and instruct.

Webdagene screenshot

Icons are still prominent today in our everyday lives, as they serve the same purpose as they always have. As the craftsmen of the Web industry, we must ensure that we use correct representations of actions to inform users of their consequences.

As the Web has evolved over the years, we have established a (fairly) standard set of icons — a trash can or a cross has come to represent deleting or removing something; an envelope has become the indicator for a message or mail. These are little visual cues to help people along their way. Some icons have established such strong associations that they can exist on their own without supporting text, meaning, they can remove language barriers to form their own universal language. We need to use the right icons to communicate the right things.

Read more...

Business StrategyGiving Our Clients The Best Deal In Mobile

Are we cheating our clients when it comes to mobile? More precisely, are we allowing our desire for mobile work to get in the way of providing our clients with the best solution for their business needs? This is the uncomfortable question we asked ourselves recently when redesigning our agency’s website, and we want to discuss it with the broader Web community: You, dear reader.

Giving Our Clients The Best Deal In Mobile

We are not for a minute suggesting that either we or anyone else is intentionally taking advantage of the current excitement about mobile to “con” our clients. However, we do wonder whether our clients’ excitement and our own desires are hindering our ability to make rational business decisions — decisions that would lead to the best solution for our clients.

Read more...
Advertisement Advertise with us!

Hex ColorsThe Code Side Of Color

The trouble with a color’s name is that it never really is perceived as the exact same color to two different individuals — especially if they have a stake in a website’s emotional impact. Name a color, and you’re most likely to give a misleading impression. Even something like “blue” is uncertain. To be more precise, it could be "sky blue", "ocean blue", "jeans blue" or even "arc welder blue".

The Code Side Of Color

Descriptions vary with personal taste and in context with other colors. We label them "indigo", "jade", "olive", "tangerine", "scarlet" or "cabaret". What exactly is "electric lime"? Names and precise shades vary — unless you’re a computer.

Read more...

InterviewStefan Sagmeister: “Trying To Look Good Limits My Life”

Stefan Sagmeister is a designer who has been following his instinct and intuition to the fullest, having gained recognition for his unique, and often provocative, visual explorations. It’s possibly his very personal and almost self-centric way to design that leads to his original approach. On May 31, 19 years after starting his NYC studio he once again surprised the crowds with renaming to Sagmeister & Walsh in a ‘trademark’ Sagmeister fashion - naked in the studio.

Grammay winning design for David Byrne

A bit of history. When the Austrian-born Sagmeister moved to New York, he made it his mission to work for the legendary designer Tibor Kalman (1949-1999), at M&Co before starting his own studio in 1994. Sagmeister inc. Kalman, one of the two names that changed graphic design in the 80’s—as AIGA proclaims—was well respected for his social responsibility polemic and then as the editor-in-chief of Colors magazine.

Read more...

Video TutorialReviewing Adobe Illustrator’s Extensive Gradients Toolset

While vector based artwork lets designers take advantage of small file sizes and lossless scaling it can also be limiting when trying to add depth and richness to a design. Adobe Illustrator offers a plethora of gradient tools that can help artist produce more organic and vivid pieces.

Tutorial

This extended video tutorial covers a wide variety of topics including basic gradient tools (0:30), the appearance pannel and multiple gradient fill layers (2:30), creating gradients with the blending tool (3:45), gradient strokes (6:30), gradient mesh (7:45), using gradients with type (14:00), wrapping gradients with envelope distort (16:30), and using opacity masks.

Read more...

Free ToolCSScomb: Sorting CSS Properties, The Better Way

This is our seventh article in a series that introduces the latest useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide with us, and later we've announced Erskine's responsive grid generator Gridpak and JS Bin. This time we present CSScomb, a tool to help you sort and categorize CSS properties in your code to improve maintenance.

CSScomb

As of this writing, Web browsers support about 200 different CSS properties. In all probability, you use pretty much every single one of them in your projects. So it’s about time to think of the consistency of the ordering of CSS properties inside selector declarations as seriously as you’d think about consistency in the formatting of code. So, if you want to pay attention to your code’s style, this article is for you. There’s a simple way to automatically sort CSS properties in your projects.

Read more...

How To Create Your First iPhone App (2012 Edition)

Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author in September 2012. — Editorial Team

Since the iTunes App Store launched in 2008, over 500,000 apps have been approved by Apple, and thousands more app ideas are scrawled on napkins across the world every day. But question remains, how can a person with limited technical skills create an iPhone app?

How To Create Your First iPhone App

The good news is anyone can make an iPhone app, it's just a matter of knowing the series of actions you need to take to make it happen. Be sure to bookmark this article because it will serve as a guide for learning the process for creating your first iPhone app, going step by step from idea to the App Store.

Read more...

Desktop Wallpaper Calendar: October 2012 (Halloween Edition)

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

Smashing Magazine's Desktop Wallpaper - October 2012

This post features free desktop wallpapers created by artists across the globe for October 2012. Many of the wallpapers this month are related to Halloween which seems to have become a tradition on Smashing Magazine over the years. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
Read more...

Design ProcessEncouraging Better Client Participation In Responsive Design Projects

Last week at the fabulous Smashing Conference in Freiburg, I gave a new talk, one I’d written just a few hours prior. I chose not to use slides, but instead to speak about three things that I’m incredibly enthusiastic about: Responsive design is not (just) a design or development problem; the client participation process is broken; how to call your client an idiot, to their face. Here are the (slightly expanded) notes that I made before my talk.

In all the excitement about responsive Web design over the last few years, someone forgot to tell our bosses and clients, so we’ve been treating responsive design like it’s a design or an implementation problem, whereas in fact it’s as much an issue for business. In fact, it’s an issue for everyone involved: designers, developers, content specialists, the people who commission websites and those who structure the teams who make the websites.

Read more...

↑ Back to top