The psychology of nostalgia











Nostalgia is very common in the world of web design. We see it in varying degrees in vintage and retro styled websites, as well as in small touches on otherwise-modern designs.

A lot of designers likely give very little thought to why they might design a site with a nostalgic feel. They simply like the style, or feel like it’s the correct choice for the particular project. But they may not think about the psychological reasoning behind that choice.

A better understanding of why certain design elements and conventions have the effect they have, and how to best use those effects, can make us better designers. The end result being that our projects are more successful and our clients are happier.

 

Nostalgia as a medical condition?

The term “nostalgia” was invented by a medical student, Johanne Hofer, in his Basel dissertation in 1688. It was described as the anxiety felt by Swiss mercenaries fighting in the lowlands of France and Italy, away from their native mountain homes. Some military doctors believed the condition was particular to the Swiss, and was caused by the racket of cowbells back home. Other theories to the cause of nostalgia included changes in atmospheric pressure or little demons living in the sufferer’s head.

nostalgia as a medical condition

Nostalgia was equated with homesickness at that time, and was a form of melancholy. The Kuhreihen, simple melodies played on the horn by Swiss Alpine herdsmen, was banned among Swiss mercenaries, because it created such a sense of nostalgia that it led the men to the point of illness, desertion, or death.

Symptoms of nostalgia included fainting, high fever, stomach pain, indigestion, and death in some cases. Anorexia, increased and irregular heartbeat, and weeping were also symptoms.

Even into the 20th century, nostalgia was still considered to be a psychiatric disorder. It was linked to insomnia, depression, and anxiety. Only recently have the positive aspects of nostalgia begun to be studied.

 

The positive aspects of nostalgia

More recent research suggests that nostalgia can actually promote psychological health. It can lead to higher self-esteem and positive feelings. It can also result in a feeling of being protected and loved by others. It can even help to counteract loneliness (loneliness can also trigger nostalgic feelings).

spirograph nostalgia

It’s these feelings you want to tap into as a designer. You want those viewing the sites you design to have positive, comfortable feelings. Learning to optimize how you provoke those feelings will make you a more effective designer.

 

When should you use nostalgia?

While nostalgia can be a very positive force in design, it’s not appropriate for every situation. Tapping into nostalgic feelings in your visitors has a very specific effect, which we’ve already discussed. If your site needs to evoke forward-thinking feelings, then nostalgia is likely not going to work in your favor (or at least not as well as other tactics could).

But if you want your visitors to get that warm and fuzzy feeling they get when looking at things like childhood photographs, then nostalgic design touches might be perfect.

 

The role of emotions in branding

We all know that emotional connections are intrinsic to creating a positive brand association. Evoking feelings in your visitors and potential customers has a direct impact on how they view your brand and your site.

But evoking an emotional response can be tricky. What has positive associations for one might have very negative associations for another. And as a designer, you have no real way of knowing what reaction each individual visitor to your site might have. But you can work with generalizations and hopefully appeal to a majority of your visitors.

 

Things most likely to evoke emotions

Holidays can evoke very strong nostalgic feelings. Virtually everyone has vivid holiday memories from childhood. Things like Santa Claus, the Easter Bunny, Krampus (who is well-known in Austria and surrounding countries, but has been gaining recognition in other areas in recent years) and similar characters associated with specific holidays can evoke very powerful memories and associated feelings.

krampus

Music is another major nostalgia-inducer. The music we grew up with, or that have been included in particular events in our lives, can immediately evoke specific feelings. Unfortunately, including music on a website is a big design no-no.

Other common evokers of nostalgia include cars, movies, and TV (including advertising—how many of us get whimsical when seeing an advertisement for a favorite product from childhood?). Again, these are things that generally play prominent roles in our youth, so it’s no wonder we have strong ties to them. They were probably paramount in shaping our taste and sense of style.

Of course, to incorporate these types of things into your designs, you’ll need to interpret them in an abstract way.

 

The new faux nostalgia trend

Nostalgia has been gaining momentum in recent years in popular culture. But one unique attribute of this new nostalgia trend is that it tends to be more faux nostalgia; that is, nostalgia for things that we weren’t a part of when they originally were popular.

instamatic

Take, for example, Mad Men. The show is wildly popular and in its sixth season. The show captures the essence of the ’60s. It’s not necessarily 100% authentic, but it stays true to our perception of the ’60s. The inclusion of not only vintage ads and products, but also clothing, hairstyles, architecture, and even language gives us an immersive experience. But the amazing part of the show is that it evokes feelings of nostalgia even in those of us who never experienced the ’60s the first time around.

More examples of how faux nostalgia has infiltrated popular culture can be seen in hipster style. Everything from the neon colors of the ’80s to Americana reminiscent of the ’40s and ’50s (and earlier) are popular in the hipster scene. In many cases, though, the people wearing these things weren’t around for the original trends.

In these cases, our nostalgia comes from romanticized versions of these past times. It’s how we imagine these things to be, rather than how they actually were. Remember that our perception of things has a very powerful influence on the emotions they evoke, and nostalgia is no exception to that.

Apps like Instagram and Hipstamatic (and all of the copycat apps out there) are further evidence of how nostalgia for our perception of past times has infiltrated our collective consciousness. How many Hisptamatic and Instagram users were around to use the original Instamatic cameras? Probably a very small percentage. And yet mobile users latched onto these apps and the styles they offered, to the point where those types of images are almost as emblematic of our current era as they are of the ’60s and ’70s.

 

So how do you use nostalgia?

Using nostalgia in your designs can be as simple or complex as you want. At its most basic level, simply implementing a color scheme reminiscent of a bygone era can be enough to evoke the appropriate emotional response. Think about colors associated with a ’50s diner or the neon of the ’80s. Those immediately bring up certain feelings.

Another way to implement nostalgia is by incorporating specific imagery. These could be everything from photos to design elements. Applying filters to your images is one of the easiest ways to do this. There are even plugins (like vintageJS) for applying filters to images on your site automatically.

There are plenty of other ways to evoke nostalgia, though it largely depends on what you’re trying to evoke, who your target visitor is, and the content of your site. Once you outline those things, you can use a combination of color, imagery, language, and other elements to create the appropriate effect.

 

Do you consciously use nostalgia in your designs? What designs have evoked feelings of nostalgia for you? Let us know in the comments.

Featured image by katiebordner.

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Leave a comment

Win 10 licenses of the Jumpeye Framework











Today we have a neat giveaway from our friends at Jumpeye which will come in handy for all developers.

The Jumpeye framework is a responsive design framework that helps users build websites that look perfect on desktop, tablets and smartphones. By using the included fluid grid system, UI elements and components along with the recently added responsive website templates users will be able to build stylish responsive websites much easier and much faster.

Today’s your chance to win 1 of 10 commercial licenses of their superb framework. Each license is available for 100 domains and is worth $99/license.

Read on for more details on the Jumpeye framework as well as details on how to enter…

Here’s more information about the Jumpeye framework…

1_Jumpeye_framework

 

1. Fluid grid system

The core of the framework is the CSS grid system. Before users start designing their website, they can easily create a grid structure by using the online grid editor on the page of the product.

2_Fluid_grid

 

2. Responsive stylish UI elements

Jumpeye framework comes with a huge set of stylish UI elements: drop down menus, buttons, panels, tabs, tooltips, alerts, forms, tables and typography. Each type of UI element has several ready­made skins and they are highly customizable, so it will be easy to select the most appropriate design for any user’s site

3_UI_elements

 

3. Responsive JavaScript components

Two jQuery­ based responsive components are included in the framework: a photo gallery and an image & content slider. By using these components users can easily create image and content sliders, photo galleries, slideshows or portfolios inside their responsive websites built with the framework’s grid. 

4_Photo_gallery

 

The slider component supports image and HTML content in order to create website headers, tours and presentations, image sliders, banner rotators or any other type of slider. 

5_Image_slider

 

Jumpeye framework was recently updated with two responsive templates. These templates were created using the elements and components of the framework and users can use them for commercial purposes by only changing the media content (text and images). 

 

Empower:­ Responsive personal/small business website template

6_Template_Empower

 

Glimpses:­ Responsive photography website template

 7_Template_Glimpses

 

How to enter:

  • Leave a comment below about what you like most about the framework (e.g. image slider component, drop down menus, the included templates)
  • Generic comments won’t be eligible
  • Enter your comment using your email address (not Twitter/Facebook, etc)

 By entering, you get a chance to win 1 of 10 commercial licenses available of the superb Jumpeye framework. Each license is available for 100 domains and is worth $99/license. Results will be announced here on WDD on June 14th, 2013. All winners will also be contacted by email. Good luck to everyone! 

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Leave a comment

Perfection in a portfolio; a web design showcase











Web design is a subtle science that is lost to most who are not in the field. The amount of choices that go into building the perfect presentation for the content the client has to offer are so vast, that often the best way to demonstrate the full scope of this spectrum is to showcase a particular type of focused site. Through the multitude of examples one can begin to see how thematically similar yet still so different and complex these designs are.

Today, we intend to do just that. By showcasing a handful of portfolio websites, we can see how the depth of design choices and techniques can really separate these examples all built to showcase the work of an artist or designer. Even with their common mission, and even at times structural parallels, they still stand apart and each in their own unique ways encapsulate what a portfolio should be.

 

Oven Bits

Oven Bits is the home and portfolio of the creative web and mobile design agency of the same name. The portfolio adheres brilliantly to the first rule of any portfolio design. To compliment and highlight the work being showcased without in any way stealing focus from it.

ovenbits

 

Robbie Leonardi

Robbie Leonardi‘s portfolio is a bright and bold example of how an illustrator and front end web developer can showcase their skills more potently through the colorful and over-sized presentation of the work they have done for their clients, than strictly with the examples of the work itself. However,  there are some issues with the site not fitting completely in my laptop browser window which cut off the info for each piece.

rleonardi

 

Bec Winnel

Bec Winnel‘s portfolio is breathtakingly subtle in its presentation. It perfectly incorporates the artist’s work into the design, furthering how well the design compliments the tone and technique of the artist herself. The soft, delicate nature of the paintings translates flawlessly through the design.

becwinnel

 

Kris Kuksi

Kris Kuksi has a portfolio which is classically styled and textured to accentuate the diverse and intricate nature of the artist’s own creative voice. It does so with such lightness, that the design, while so complimentary and well done, really does fade from the radar as the works stand out. Quite literally in some instances, as the portfolio pieces open in full screen giving total focus to each piece being highlighted.

kuksi

 

Jeremi Chenier

The portfolio of graphic designer Jeremi Chenier puts a minimalistic approach to work, with fantastic execution showcasing his bold and colorful gallery of designs. This stark contrast between the simplistic nature of the site and the depth and richness of his work creates a powerful presentation.

jeremitotal

 

Dimitris Theocharis

Dimitris Theocharis‘ photography portfolio is the epitome of minimalism in web design from the lightweight navigation down to the images that don’t resize, but instead scroll along a single plane. All the focus is strictly and tightly placed squarely on the work of the artist. The unassuming, pale color scheme allows the deep colors of the images to really pop.

theocharis

 

Alex Rodriguez

Alex Rodriguez‘s digital home for the painter’s traditional art is crafted with the same attitude and muted tones that fill the artist’s work. The textures even manage to help feed and carry the melancholy that exudes from the painter’s vivid and daring gallery.

itsajackal

 

Charlotte Tang

Charlotte Tang has the portfolio one would expect a self-proclaimed interactive design ninja extraordinaire to have. This clean, and oh so sharp  design doesn’t rely on JavaScript loaded delivery of the individual portfolio pieces. Instead, each piece is given its own page with closeups and info to really allow the user to interact and engage with various elements from each piece.

charlottetang

 

Nicolas Tarier

The portfolio of photographer Nicolas Tarier is large and bold, removing almost all instances of whitespace from the design to give the work and user complete and unfettered access to one another. The large single loaded image displays work brilliantly to place focus onto the work itself.

nicolastarier

 

My Poor Brain

My Poor Brain is the digital home and portfolio of London based Graphic Designer and Illustrator, Tim. The design, much like the work and man behind it, relies on no bells and whistles to highlight the work. It speaks for itself, and the design simply steps aside and allows that to happen. It is straightforward and places the onus of the presentation on the work,  just as it should.

mypoorbrain

 

Malet & Co.

The portfolio for the Illustration Agency  Malet & Co. pours whitespace all throughout the design to let the work pop right up off of the background. The pages that deliver each of the pieces keeps the minimalism firmly in place so that at no time does the user’s focus break from the illustrations presented.

malet

 

Mark Ryden

Mark Ryden‘s portfolio is as bells-bare and frills-free as they come, but when one has an established name and reputation backing it, the work speaks volumes on its own. Any elements beyond the navigation would simply get in the way. The emotive and often solemn work has a much greater impact against the sparse surroundings.

markryden

 

Stefan Glerum

Stefan Glerum‘s porfolio is another fine example of the site design stepping aside and allowing the illustrative works being featured to boldly shine free of its grip. The audacious pieces each reside on their own individual pages where they can be further explored and examined in detail.

stefanglerum

 

Jesse Willmon

Jesse Willmon‘s design and illustration portfolio is one of the more unique design presentations that we have seen throughout the showcase. Unique enough to earn a place in the post, even if the project navigation extends far below most of the project images featured in the portfolio. The playful nature of the site wonderfully compliments the designer’s own style and voice.

jessewillmon

 

Lapin

The portfolio of French illustrator and artist Lapin is as clean and sharply designed and organized as the artist’s intricate illustrations. A perfect companion to the style and spirited tone of the artist’s work, as the design subtly serves up its offerings to the user.

lapin

 

Which of these portfolios did you find most inspiring? Does yours belong here? Let us know in the comments.

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Leave a comment

Perfection in a portfolio; a web design showcase











Web design is a subtle science that is lost to most who are not in the field. The amount of choices that go into building the perfect presentation for the content the client has to offer are so vast, that often the best way to demonstrate the full scope of this spectrum is to showcase a particular type of focused site. Through the multitude of examples one can begin to see how thematically similar yet still so different and complex these designs are.

Today, we intend to do just that. By showcasing a handful of portfolio websites, we can see how the depth of design choices and techniques can really separate these examples all built to showcase the work of an artist or designer. Even with their common mission, and even at times structural parallels, they still stand apart and each in their own unique ways encapsulate what a portfolio should be.

 

Oven Bits

Oven Bits is the home and portfolio of the creative web and mobile design agency of the same name. The portfolio adheres brilliantly to the first rule of any portfolio design. To compliment and highlight the work being showcased without in any way stealing focus from it.

ovenbits

 

Robbie Leonardi

Robbie Leonardi‘s portfolio is a bright and bold example of how an illustrator and front end web developer can showcase their skills more potently through the colorful and over-sized presentation of the work they have done for their clients, than strictly with the examples of the work itself. However,  there are some issues with the site not fitting completely in my laptop browser window which cut off the info for each piece.

rleonardi

 

Bec Winnel

Bec Winnel‘s portfolio is breathtakingly subtle in its presentation. It perfectly incorporates the artist’s work into the design, furthering how well the design compliments the tone and technique of the artist herself. The soft, delicate nature of the paintings translates flawlessly through the design.

becwinnel

 

Kris Kuksi

Kris Kuksi has a portfolio which is classically styled and textured to accentuate the diverse and intricate nature of the artist’s own creative voice. It does so with such lightness, that the design, while so complimentary and well done, really does fade from the radar as the works stand out. Quite literally in some instances, as the portfolio pieces open in full screen giving total focus to each piece being highlighted.

kuksi

 

Jeremi Chenier

The portfolio of graphic designer Jeremi Chenier puts a minimalistic approach to work, with fantastic execution showcasing his bold and colorful gallery of designs. This stark contrast between the simplistic nature of the site and the depth and richness of his work creates a powerful presentation.

jeremitotal

 

Dimitris Theocharis

Dimitris Theocharis‘ photography portfolio is the epitome of minimalism in web design from the lightweight navigation down to the images that don’t resize, but instead scroll along a single plane. All the focus is strictly and tightly placed squarely on the work of the artist. The unassuming, pale color scheme allows the deep colors of the images to really pop.

theocharis

 

Alex Rodriguez

Alex Rodriguez‘s digital home for the painter’s traditional art is crafted with the same attitude and muted tones that fill the artist’s work. The textures even manage to help feed and carry the melancholy that exudes from the painter’s vivid and daring gallery.

itsajackal

 

Charlotte Tang

Charlotte Tang has the portfolio one would expect a self-proclaimed interactive design ninja extraordinaire to have. This clean, and oh so sharp  design doesn’t rely on JavaScript loaded delivery of the individual portfolio pieces. Instead, each piece is given its own page with closeups and info to really allow the user to interact and engage with various elements from each piece.

charlottetang

 

Nicolas Tarier

The portfolio of photographer Nicolas Tarier is large and bold, removing almost all instances of whitespace from the design to give the work and user complete and unfettered access to one another. The large single loaded image displays work brilliantly to place focus onto the work itself.

nicolastarier

 

My Poor Brain

My Poor Brain is the digital home and portfolio of London based Graphic Designer and Illustrator, Tim. The design, much like the work and man behind it, relies on no bells and whistles to highlight the work. It speaks for itself, and the design simply steps aside and allows that to happen. It is straightforward and places the onus of the presentation on the work,  just as it should.

mypoorbrain

 

Malet & Co.

The portfolio for the Illustration Agency  Malet & Co. pours whitespace all throughout the design to let the work pop right up off of the background. The pages that deliver each of the pieces keeps the minimalism firmly in place so that at no time does the user’s focus break from the illustrations presented.

malet

 

Mark Ryden

Mark Ryden‘s portfolio is as bells-bare and frills-free as they come, but when one has an established name and reputation backing it, the work speaks volumes on its own. Any elements beyond the navigation would simply get in the way. The emotive and often solemn work has a much greater impact against the sparse surroundings.

markryden

 

Stefan Glerum

Stefan Glerum‘s porfolio is another fine example of the site design stepping aside and allowing the illustrative works being featured to boldly shine free of its grip. The audacious pieces each reside on their own individual pages where they can be further explored and examined in detail.

stefanglerum

 

Jesse Willmon

Jesse Willmon‘s design and illustration portfolio is one of the more unique design presentations that we have seen throughout the showcase. Unique enough to earn a place in the post, even if the project navigation extends far below most of the project images featured in the portfolio. The playful nature of the site wonderfully compliments the designer’s own style and voice.

jessewillmon

 

Lapin

The portfolio of French illustrator and artist Lapin is as clean and sharply designed and organized as the artist’s intricate illustrations. A perfect companion to the style and spirited tone of the artist’s work, as the design subtly serves up its offerings to the user.

lapin

 

Which of these portfolios did you find most inspiring? Does yours belong here? Let us know in the comments.

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Leave a comment

Our favorite tweets of the week: May 27, 2013 – June 2, 2013











Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Amazon Invests Millions In Original TV Shows…But Why? http://depot.ly/lBMn5

 

Feast your eyes with the Oz the Great and Powerful character design by Michael Kutsche http://depot.ly/lBMdH

 

Is the Internet Ruining Gaming? http://depot.ly/lBM5W

 

A Rare Behind-The-Scenes Look At Some Of Bowie’s Most Iconic Photographs http://depot.ly/lA3QB

 

Retro soccer players posters courtesy of the creative eye of Zoran Lucic http://depot.ly/lzBCF

 

Faceless photos in thought-provoking ad campaign for Alzheimer’s Research http://depot.ly/lzKPV  via @CreativeBloq

 

Coke vs. Pepsi: Who’s Winning on Twitter http://depot.ly/lxAum

 

SEOMoz Undergoes Major Rebrand http://depot.ly/lxzIy  Changes Name To Moz & Launches New Analytics Software

 

The lonely Superheroes of Cosmosnail http://depot.ly/lx795

 

Gmail’s new tabbed Inbox is an automated cure for email overload. Like it? http://depot.ly/lx63b

 

A novel, sexy shoe campaign from Kostas Murkidis and Studio Quentin Walesch http://depot.ly/lx5eB

 

The State Of Responsive Web Design http://depot.ly/lx4y8  via @smashingmag

 

Strong, a beautiful brand identity created by Pearlfisher http://depot.ly/luxVe

 

Twitter is about to change the news media – again http://depot.ly/lupf8

 

Have you seen the new vibrant avatars from Flickr? http://depot.ly/lsnHR

 

Might come in handy: How to Format an eBook for Kindle http://depot.ly/lsnw6

 

Top 10 realtime web apps – @leggetter on the best uses of realtime web technologies http://depot.ly/lslMK  via @netmag

 

Upping Your Type Game http://depot.ly/lqvj1  *Nice thoughts on #type by @jessicahische

 Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Tagged , , , , , , , , , , , , , , | Leave a comment

Comics of the week #185











Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

 

The passionate designer

 

The invisible designer

 

The married designer

Can you relate to these situations? Please share your funny stories and comments below…

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Tagged , , , , , , , , , , , | Leave a comment

Enchant, simplify and amaze; the Android way











The Android User Experience Team have published their own design principles for delivering a world-class user experience. Their 17 key points are divided into three categories: enchant, simplify and amaze.

The team reports that the guidelines were developed as an internal process to help them keep users’ best interests at the heart of their process. Their advice is to “deviate with purpose”, meaning that unless you have good cause, these are the rules you should stick to.

Unsurprisingly in the mobile web era, the principles apply equally well to web design…

 

Enchant

  • Delight me in surprising ways: pay attention to textures, sound effects and subtlety; ideally these things combine to create a sense of effortlessness for the user.
  • Real objects are more fun that button and menus: Android believes this requires less cognitive effort and is more emotionally satisfying; a quote that skeoumorphic designers will be pleased to note.
  • Let me make it mine: provide customization options that let users ‘own’ the experience.
  • Get to know me: learn users’ preferences, and give them an easy route back when they revisit rather than asking them for the same feedback again and again.

 

Simplify 

  • Keep it brief: short phrases, simple words; the Android development team think people skip long sentences.
  • Pictures are faster than words: the team suggests using images to explain ideas because they’re eye-catching and faster to understand than text.
  • Decide for me but let me have the final say: the team believes that quickly guessing what your users want and then allowing them to undo your decision is preferable to asking too many questions to get it right.
  • Only show what I need when I need it: avoid overwhelming people with too much data by hiding non-essential options and keep tasks small and bite-sized.
  • I should always know where I am: ensure you create a strong hierarchy, with established relationships between stages. Always provide feedback on tasks that are in progress.
  • Never lose my stuff: save data that is given to you and allow people to access it later, this is especially true for sites with complex forms, such as insurance brokerages.
  • If it looks the same, it should act the same: help users understand different functions by making different UI elements visually different. Avoid using modes, where one element is able to perform multiple tasks.
  • Only interrupt me if it’s important: help people stay focussed by shielding users from the unimportant minutiae of your site’s process.

 

Amaze 

  • Give me tricks that work everywhere: the team suggests utilizing key visual and UI patterns to aid in learning. In other words, if users have learnt to click a link on most websites, they won’t expect to have to drag it on yours.
  • It’s not my fault: when things go wrong, be nice; the tone of your 404 page is essential to good customer management.
  • Sprinkle encouragement: give feedback on actions so users know that their interaction took effect. It could be anything, from a subtle sound to a change in the color of the interface.
  • Do the heavy lifting for me: the team recommends making novices feel like experts by providing shortcuts that accomplish more than the user was hoping to achieve.
  • Make important things fast: prioritize the functionality of your site, make key actions easy to find, and easy to use.

 

What do you think of the Android team’s analysis? Are there other usability principles that you’d add? Let us know in the comments.

Featured image/thumbnail, android image via Shutterstock.

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Tagged , , , , , , , , , , , , , , , | Leave a comment

Social networking noise











Everywhere you go online you see lots of tweets, Facebook posts, and Google+ updates: the social networking noise can sometimes be overwhelming. All marketers have been taught that content is king, and other variations of this statement, but no one could have imagined how much content we would produce on social media these days. 

Think of marketing reach to give you a perspective on how much noise we have created: in 1965, 80% of consumers aged 18-49 were reached via three primetime 30 second ads; by 2002, it required 117 commercials to have the same effect. When it takes 2000 impressions for one click on a Facebook ad (average CTR on Facebook is around .02-04% according to Clickz.com) then you know people do not see all the social networking noise around them. 

This challenge means that many people simply try to shout louder. Instead, we need to plan our content on social media, so we speak smarter.

 

How do you get above the noise?

Don’t speak to everyone

The biggest challenge entrepreneurs have when they market their business through social networking is that they want to speak to everyone. Like a kid in a candy store type of effect, they get so excited to be around so many prospects all at once. When this happens, a few people talk louder to get heard over the rest. This continues to happen, and soon you have chaos.

To end the chaos, you need to find your niche market. It is marketing 101: find a niche where you can market your services and fill in the gaps. Think of niche marketing like being in a crowded bar during happy hour. You might not get all 300 people in the bar to hear you, but everyone at your table can hear what you have to say.

Come from a place of service

When business gets tough, we sometimes go into commando sales phase. We batten down the hatches, and start reaching out to prospect after prospect after prospect until we are out of a jam. The same happens on social media. However, because it is so easy to share information, too many people share promotional information on a consistent basis.

Instead, you need to scare the living daylights of them, and provide useful information that wows them. By doing this you serve your prospects and clients. People respect how much you are willing to give of yourself to help others. Best of all, serving others not only serves as a promotional engine, but it also makes you feel proud of your business. The more pride you show in your business, the more pride others will have in referring your services to others.

Tell stories

I started using social media when I was a mortgage broker looking for new business. My wife, the techie, was convinced I could not use Facebook properly. She insisted upon setting up my account herself, because it would be “too complicated” for me to understand.

Five years later, I have helped hundreds of clients use social media, while setting up countless accounts on Facebook, Twitter, LinkedIn, Google+, and other social networks.

There is a story that is short and to the point.

Keep your network in the loop

Ever see a site go down, and all the users migrate to another hangout online, chatting up a storm about what happened? Snafus happen! They are a part of business, however, you must keep your network informed of what is occurring.

While we all want to talk to our clients about the latest and greatest at our company, sometimes an honest apology will garner more business than a success will ever achieve.

Raving fans!

This is more a result than a way to get over the social networking noise. Create raving fans of your business. People who’ve just gotta have the next iPhone, or must simply get their Starbucks kick in the morning.

When you help people, and communicate with them appropriately, you will create raving fans. There’s no magic formula for attracting raving fans, but something based upon your level of service to others. How do you go above and beyond to help others? When you know how to do this for your niche, then you know how to find raving fans.

 

Conclusion

Social networking has a lot of benefits to offer businesses. However, to be successful through social networking today requires a new understanding of value: how to deliver value to your prospects, partners, and clients, so they listen to you above the social networking noise.

 

Do you promote yourself via social media? What strategies have worked for you? Let us know in the comments.

Featured image/thumbnail, social media image by .hj barraza.

<!–

<pre><code class="language-css">p { color: red }</code></pre>

–>


Posted in Tutorials & Tips, Web Design | Tagged , , , , , , , , , , , , , , , , , | Leave a comment

iOS7 to adopt flat design











The last great bastion of skeuomorphic design, Apple Inc., is rumored to be completely revamping its mobile OS, ahead of a relaunch at the Apple WDDC on June 10th. Speculation is that the next version of iOS, which powers Apple’s mobile devices, will both adopt a predominantly monotone look and abandon the textures associated with it for the last six years.

Whilst there are plenty of designers who still advocate skeuomorphic design, many more are embracing flat design. Flat design proposes that faux-3D effects, drop shadows, and anything else that imitates real-world objects in a screen-based environment is essentially deceitful. Proponents of flat design believe that simplifying, minifying and ‘flattening’ designs produces user interfaces that are easier to understand, easier to use and more suitable for the contemporary landscape.

The legions of web designers adopting flat design increased ten-fold when it was realised how simple flat design makes responsive design; a flat responsive design can produced in a fraction of the time of a skeuomorphic version. Increasingly it seems that the era of the mobile web is becoming synonymous with flat design.

Apple have a reputation for innovation: the mouse is one of theirs, as is the folder > file graphic interface. However, in recent years Apple have taken a back seat in innovative areas, preferring to adopt technology once it had proven valuable. In fact, you could argue that the most innovative thing Apple have produced since the first iMac has been their corporate branding: iPods were not the first MP3 players, the iPhone was not the first smart phone; they were simply the most well rounded, well branded and commercially appealing versions.

It would be a huge coup for flat design advocates therefore, if this barometer of commercial design abandoned its flagship look in favor of flat design.

Following a larger trend for reducing the number of executives and expanding the remit of those at the top, iOS7 is receiving its overhaul curtesy of Jonathan Ive — Apple’s Vice President of Industrial Design, who is responsible for the iPhone, iPad and iPod touch hardware. Ive is reported to hold a certain distain for skeomorphism — preferred by both Steve Jobs and former iOS chief Scott Forstall — stating that software design based on physical metaphors does not stand the test of time.

Oft-repeated rumors currently circulating include a change to the current glossy lock screen, making it flat and black; a change to the pin-code entry, with the addition of round buttons; app icons losing their gloss; and alerts losing their texture to become white on black.

Counter rumors suggest that this is simply a clever marketing exercise by Apple to raise interest in iOS7, and like the hardware designed by Ive, any actual changes will be slow and incremental.

Will Apple switch to flat design for iOS7? Will a similar change to MacOS follow soon after? How will a non-skeuomorphic approach maintain a consistent iOS feel? As you might expect, designers have been publishing their ideas for some time, and we’ve included our favourites below.

ios7-001

iOS7 concept by Andre Almeida

 

ios7-002

iOS7 concept by Zikkzak
 

ios7-003

iOS7 concept by Nandor Tomas
 

ios7-004

iOS7 concept by AlHasan AlDasooqi
 

iOS7 concept by SimplyZesty
 

ios7-005

iOS7 concept by Peyman Eskandari
 

ios7-006

iOS7 concept by Dámaso Benítez
 

ios7-007

iOS7 concept by Alex Iv
 

ios7-008

iOS7 concept by Apfelpage
 

ios7-009

iOS7 concept by Oleg Turbaba
 

iOS7 concept by Agente Apple
 

ios7-010

iOS7 concept by Manu Gamero
 

ios7-011

iOS7 concept by Pieter Goris
 

ios7-012

iOS7 concept by Jesse Head
 

Which of these designs is your favorite? Should Apple adopt flat design? Let us know your thoughts in the comments.

Posted in Tutorials & Tips, Web Design | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment