Archive for October, 2009

Smashing Magazine’s Redesign and Smashing Network

Saturday, October 31st, 2009
Smashing-magazine-advertisement in Smashing Magazines Redesign and Smashing Network
 in Smashing Magazines Redesign and Smashing Network  in Smashing Magazines Redesign and Smashing Network  in Smashing Magazines Redesign and Smashing Network

Spacer in Smashing Magazines Redesign and Smashing Network
Some­thing has changed here today. Smash­ing Mag­a­zine has shaped up. We know that exten­sive design changes usu­ally cre­ate a split echo: some read­ers are happy and appre­ci­ate the addi­tional fea­tures and ben­e­fits, while oth­ers don’t want to see any­thing change because they’re com­fort­able in their old habits. How­ever, pub­lish­ers have to update their web­sites from time to time to improve the user expe­ri­ence and add new fea­tures. And that day has come for Smash­ing Magazine.

Wet Paint!

Smash­ing Magazine’s redesign was done by Liam McKay and his design agency, WeFunc­tion. We also tweaked a cou­ple of things in the design. Footer and side­bar illus­tra­tions were designed by Pasquale D’Silva. Smash­ing Mag­a­zine may look a bit dif­fer­ent at first glance, but keep­ing the gen­eral struc­ture intact was very impor­tant to us. After all, we don’t want to con­fuse our read­ers; rather, we want their expe­ri­ence to improve.

So, minor details aside, what exactly has changed on Smash­ing Mag­a­zine? Here’s a summary:

  • You can now visit pages of our reg­u­lar authors (e.g. Kayla Knight). There, you’ll find infor­ma­tion about them, see an overview of their posts on Smash­ing Mag­a­zine and fol­low their Twit­ter stream. You can also visit a page that lists all of our reg­u­lar authors.
  • You can now rate arti­cles on Smash­ing Mag­a­zine (in the com­ments area of each post). The highest-​​rated and most-​​commented arti­cles are dis­played on the post’s cat­e­gory page (e.g. Graph­ics). And you can find an overview of our cat­e­gories on the All Cat­e­gories page.
  • You can now leave threaded replies to com­ments. Pages that have a huge num­ber of com­ments are now paginated.
  • User-​​submitted design news now appears in the wid­get on the right side. This news is pulled from our sis­ter web­site, Noupe. Every­one can sub­mit news, which lands in the mod­er­a­tion queue and is man­u­ally approved by our moderators.
  • This side­bar wid­get also fea­tures recent jobs and the lat­est Smash­ing Forum entries.
  • We have re-​​organized our tags, removed dupli­cates and replaced some of them with more mean­ing­ful labels. You can now use our Tag Explorer (the “Pop­u­lar tags” link at the top of the page) to nav­i­gate Smash­ing Magazine.

And Then There Is The Network

If you’ve already had a look at the new front page, you would have found some changes there, too: not just recent Smash­ing Mag­a­zine posts, but con­tri­bu­tions from other design mag­a­zines. That’s because we’ve teamed up with 18 other mag­a­zines to house a pro­duc­tive and com­pre­hen­sive meet­ing place for design­ers and devel­op­ers, show­cas­ing truly the best con­tent around. Among those join­ing the game are Web­de­signer Depot, Noupe, SixRe­vi­sions, UX Booth, Hongkiat, ThinkVi­t­a­min, Web Designer Wall, Designm​.ag, Boag­world and Speck­y­boy. We call it the Smash­ing Net­work.

Sm-network in Smashing Magazines Redesign and Smashing Network

  • The idea behind the net­work is to pro­mote high-​​quality con­tent on the Web design scene and to make it worth­while for pub­lish­ers to pro­duce use­ful and inter­est­ing design-​​related arti­cles. We want our com­mu­nity to ben­e­fit from these arti­cles and sup­port the pub­lish­ers with direct traf­fic from the Smash­ing Magazine.
  • Our main RSS feed (the one you are sub­scribed to) will not auto­mat­i­cally con­tain excerpts of posts from our net­work mem­bers. We will have a sep­a­rate SM net­work feed for that.

In fact, every net­work mem­ber has its very own chan­nel on Smash­ing Mag­a­zine, with recent posts and Twit­ter updates. All con­tent is man­u­ally approved and pro­moted on the net­work — no automa­tion at all. So, you can be sure you’ll get only the best articles.

Need­less to say, we will still be pub­lish­ing our own insight­ful arti­cles, which you can always find on our front page. The last arti­cle always appears at the top, with older posts clearly high­lighted in a black box among the other SM net­work posts.

Release-screenshot in Smashing Magazines Redesign and Smashing Network

We are aware that this huge change will lead to mis­un­der­stand­ings and may cause prob­lems at first. But we are cer­tain it was the right deci­sion and that every­one will ben­e­fit from it. If you pre­fer the old ver­sion of Smash­ing Mag­a­zine (the one with­out the posts from our net­work), you can use Smash­ing Magazine’s chan­nel page, which is exactly the same as our front page before the redesign. Or just stick to our main RSS feed, which con­tains only Smash­ing Magazine’s posts.

Want To Join The Network?

The main require­ment for mem­ber­ship in our con­tent net­work is that you reg­u­larly pub­lish high-​​quality con­tent on your blog or mag­a­zine. You don’t have to be pop­u­lar or have a lot of traf­fic; you could be just start­ing out. You can apply for mem­ber­ship by send­ing an email to network@​smashingmagazine.​com. We will be review­ing mem­ber­ship peri­od­i­cally, so please be patient and stay tuned for updates.

What Do You Think?

This redesign is work in progress. Your opin­ion is very impor­tant to us. The design def­i­nitely could use some changes and we are will­ing to improve it with your help. Of course, we may have missed some­thing. Have you found any mis­takes, bugs, errors or prob­lems yet.

What do you think of the whole thing? We are open to your sug­ges­tions, ideas and crit­i­cism. Please let us know what you think in the com­ments to this post!

(sl), (vf), (al)


© Smash­ing Edi­to­r­ial for Smash­ing Mag­a­zine, 2009. | Perma­link | 454 com­ments | Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Mag­a­zine
Post tags:

Toggle WordPress Blog Into Supported Multiple Languages: 10 Popular WordPress Plugins

Saturday, October 31st, 2009

title-wordpress-lang-plugins

Today we are list­ing here 10 Most Pop­u­lar mul­ti­ple lan­guage word­press plu­g­ins, which will allows vis­i­tors to tog­gle word­press based web­site to any sup­ported lan­guage. The multi-​​lingual sites are becom­ing essen­tial for many busi­nesses, espe­cially those that mar­ket prod­ucts internationally.

All of the plu­g­ins listed below sup­ports all west­ern char­ac­ter sets as well as non-​​western lan­guages, such as Asian and Arabic.

Do you want to be the first one to know the lat­est hap­pen­ings at 2Ex​perts​De​sign​.com just sub­scribe to our rss feed and you can fol­low us on twit­ter as well.

Google Ajax Translation

The Google AJAX Trans­la­tion Word­Press plu­gin pro­vides a quick, sim­ple, and light way to add trans­la­tion to your blog.

wp lang plugin

Visit Plu­gin Page

WPML Mul­ti­lin­gual CMS

WPML makes it pos­si­ble to turn Word­Press blogs mul­ti­lin­gual in a few min­utes with no knowl­edge of PHP or Word­Press. Its advanced fea­tures allow pro­fes­sional web devel­op­ers to build full mul­ti­lin­gual websites.

wordpress plugins

Visit Plu­gin Page

qTrans­late

qTrans­late makes cre­ation of mul­ti­lin­gual con­tent as easy as work­ing with a sin­gle lan­guage. qTrans­late sup­ports infi­nite lan­guages, which can be eas­ily added/​modified/​deleted via the com­fort­able Con­fig­u­ra­tion Page. All you need to do is acti­vate the plu­gin and start writ­ing the content!

wordpress language plugins

Visit Plu­gin Page

Indoeu­ro­pean Trans­la­tor Widget

This plu­gin pro­vides a wid­get which offers links to dif­fer­ent auto­matic trans­la­tions of the cur­rent site in one of your sidebars.

Visit Plu­gin Page

xili-​​language

xili-​​language plu­gin pro­vides an auto­matic selec­tion of lan­guage in theme accord­ing to the lan­guage of dis­played post(s). xili-​​language select on the fly the .mo files present in the theme’s folder.

wordpress plugins

Visit Plu­gin Page

Bud­dy­Press Multilingual

The plu­gin allows vis­i­tors to choose their lan­guage. It makes all the Bud­dy­Press ele­ments mul­ti­lin­gual includ­ing the main site and all guest sites. Guest blogs can choose their lan­guage and cre­ate mul­ti­lin­gual con­tents. Addi­tion­ally, each guest can choose the admin lan­guage individually.

Visit Plu­gin Page

Trans­posh – trans­la­tion fil­ter for wordpress

Trans­posh trans­la­tion fil­ter for Word­Press offers a unique approach to blog trans­la­tion. It allows your blog to be trans­lated by your read­ers in-​​context.

wordpress plugins

Visit Plu­gin Page

mLan­guage

mLan­guage adds Mul­ti­lan­guage Sup­port to your Blog. You have to write only one post/​site by tag­ging the dif­fer­ent lan­guages. Eas­ily switch between the Lan­guages with the Menu with­out reload­ing the site and many more.

wordpress plugin

Visit Plu­gin Page

Codestyling Local­iza­tion

You can man­age and edit all get­text trans­la­tion files (.po/.mo) directly out of your Word­Press Admin Cen­ter with­out any need of an exter­nal edi­tor. It auto­mat­i­cally detects the get­text ready com­po­nents (like Word­Press itself or any plu­gin /​ theme sup­port­ing get­text), is able to scan the related source files and assists you using Google trans­late API dur­ing trans­la­tion. This plu­gin sup­ports Word­Press MU and allows explicit WPMU plu­gin trans­la­tion too.

wp plugins

Visit Plu­gin Page

Google Translit­er­a­tion

This plu­gin offers Com­plete lan­guage translit­er­a­tion sup­port for your word­press blogs in Per­sian, Tamil, Tel­ugu, Hindi, Malay­alam, Kan­nada, Ara­bic, Nepali, Marathi, Pun­jabi, Ben­gali, Gujarati and Urdu using google translit­er­a­tion API. Vis­i­tors can use Ctrl+G key com­bi­na­tion to tog­gle between eng­lish and selected language.

Visit Plu­gin Page

If you enjoyed this post, please con­sider to sub­scribe to the feed and you can fol­low us on twit­ter to get future arti­cles deliv­ered to your feed reader.

55+ Amazing Halloween Wallpapers to Charm Up Your Desktop

Friday, October 30th, 2009

We all love desk­top wall­pa­pers as they always come in handy and you will always find a wall­pa­per to express your feel­ings or mood. I know some of my friends who keep chang­ing their desk­top back­ground almost on a daily basis. Unless like me, who rarely change their desk­top wall­pa­per. So, How about you? When was the last time you changed desk­top background?

It’s trick-​​or-​​treat time so gather the gob­lins, con­jure up some cre­ative cos­tumes and pre­pare scary, and don’t for­get about your com­put­ers. In this post we present amaz­ing col­lec­tion of Hal­loween wall­pa­pers related to ghosts, witches, rit­u­als, haunted houses and, of Course, lots of pump­kins and can­dles. Hope­fully, every­body will find some­thing inter­est­ing to charm up their desk­top in this bewitch­ing sea­son. All wall­pa­pers can be down­loaded for free from their orig­i­nal source.


You may be inter­ested in the fol­low­ing related arti­cles as well.

Please feel free to join us and you are always wel­come to share your thoughts even if you have more ref­er­ence links related to other Hal­loween wall­pa­pers that our read­ers may like.

Don’t for­get to Subscribe to our RSS-feed sub­scribe to our RSS-​​feed and Follow us on Twitter fol­low us on Twit­ter — for recent updates.


Amaz­ing Hal­loween Wall­pa­pers to Charm Up Your Desktop

Wall­pa­pers can serve as an excel­lent source of inspi­ra­tion. Infect, we design­ers, can derive inspi­ra­tion from almost every­thing around, and this col­lec­tion can ful­fills your bewitch­ing inspi­ra­tion related needs as we can promise you that when you start brows­ing them fur­ther in details it will surely refresh your mem­ory and force you to down­load any or all for your desk­top right now.

 

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop




instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

instantShift - Amazing Halloween Wallpapers to Charm Up Your Desktop

More Resources

 

Find Some­thing Missing?

While com­pil­ing this list, it’s always a pos­si­bil­ity that we missed some other great wall­pa­per. Feel free to share it with us.

Showcase Of Beautiful Textured Web Designs

Thursday, October 29th, 2009

  

Tex­tures have become more pop­u­lar and been put to greater use in recent years. They’re not lim­ited to Web design either; tex­tures of all kinds are used in print design, illus­tra­tion, tra­di­tional art, TV com­mer­cials… you name it! Tex­ture is one of the best ways to add depth to your design, whether it’s sub­tle noise on a clean vec­tor illus­tra­tion or a lot of grungi­ness through­out a layout.

Over the last weeks we col­lected numer­ous exam­ples of beau­ti­ful tex­tured Web designs to inspire you, fol­lowed by a small col­lec­tion of links to help you get started in using tex­tures in your own designs.

If you like this post, you may be inter­ested in read­ing some of our other texture-​​related articles:

Tex­tured Web Designs

Loukotka

Loukotka

FT Designer

FT Designer

Cole & Weber

Cole & Weber

Jason Julien

Jason Julien

Trin­ity Irish Pub

Trinity Irish Pub

The Klog

Klog

Alex Cole­man

Alex Coleman

Berge­dorf

Bergedorf

Big Car­tel

Big Cartel

Stuck in Customs

Stuck in Customs

Bill C. English

Bill C. English

Boerne Wild West Day

Boerne Wild West Day

Brown Blog Films

Brown Blog Films

Chouteaus Land­ing

Chouteaus Landing

Ctrl+N Dis­eño Gráfico

Ctrl+N Diseño Gráfico

Cube­club Chemnitz

Cubeclub Chemnitz

Danny Dia­blo

Danny Diablo

Demain Jar­rete

Demain Jarrete

DH Cards

DH Cards

Dib­tych

Dibtych

Dou­glas Menezes

Douglas Menezes

Eliseos

Eliseos

Fudge

Fudge

5 Pieces

5 Pieces

Glo­cal Ventures

Glocal Ventures

Hand­crafted CSS

Handcrafted CSS

Inner Metro Green

Inner Metro Green

Introzo

Introzo

53 Mon­days

53 Mondays

Island Pho­to­booth

Island Photobooth

Mutant Labs

Mutant Labs

Leg­work Studio

Legwork Studio

Le Web Défi

Le Web Défi

Lilly Sta­ble

Lilly Stable

Love Free­lanc­ing

Love Freelancing

Mark For­rester

Mark Forrester

Markup & Style

Markup & Style

Mar­tin Anderle

Martin Anderle

Matt Salik

Matt Salik

Merge Web

Merge Web

Meson Pro­jekt Blog

Meson Projekt Blog

Mor­phix

Morphix

Mother Earth Brewing

Mother Earth Brewing

New to York

New to York

Orange Label

Orange Label

Pam­pa­neo

Pampaneos

Piz’za-za

Piz'za-za

River City Church

River City Church

Roar 4 Milk

Roar 4 Milk

Sad­dle­back Leather

Saddleback Leather

Stack Over­flow

Stack Overflow

Story Pixel

Story Pixel

Sushi and Robots

Sushi and Robots

Tex­ture Lovers

Texture Lovers

Tony Chester

Tony Chester

Yodaa

Yodaa

What Is Blik

What Is Blik

Yel­low Bird Project

Yellow Bird Project

Thun­der Fuel

Thunder Fuel

THS

THS

Tex­ture Downloads

Tex­ture Tutorials

About the Author

Cal­lum Chap­man is a free­lance designer from UK. When he isn’t design­ing for clients, he writes at Cir­cle­box Blog (as well as many oth­ers in the com­mu­nity), makes free down­load­able high-​​resolution tex­tures and retweets design-​​related articles.

(al)


© Cal­lum Chap­man for Smash­ing Mag­a­zine, 2009. |
Perma­link |
16 com­ments |
Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Magazine

Post tags: ,

Offline Inspiration: How To Find It and Get The Most Out Of It

Wednesday, October 28th, 2009

  

Inspi­ra­tion is vital for any designer. This is why so many CSS gal­leries, design gal­leries and artis­tic show­cases are float­ing around on the Web. Design­ers use these at cer­tain times for a quick fix of inspi­ra­tion, espe­cially when the pres­sure of dead­lines pre­vent them from seek­ing out offline, or “alter­na­tive,” forms of inspi­ra­tion, as impor­tant as they are.

No designer should ever feel that tak­ing time to find true inspi­ra­tion is time wasted. This arti­cle explores offline sources of inspi­ra­tion and dis­cusses how they can be treated as a part of the design process. Fur­ther­more, we’ll look into a few meth­ods of deriv­ing this inspi­ra­tion, so it becomes an active part of cre­ativ­ity and be done more effectively.

Also con­sider our pre­vi­ous articles:

1. Stop The Quick Fix Of Online Inspiration

The first step to get­ting into the habit of find­ing offline, or “nat­ural,” inspi­ra­tion is to stop look­ing at online inspi­ra­tion in the first place. For many design­ers, online is the first place to look. It shouldn’t be.

The prob­lem with show­cases and gal­leries is that most of us tend to copy bits and pieces of them, thus cre­at­ing a mish-​​mash of every­thing we’ve seen. This isn’t how design, or any cre­ative field, should work. While graphic and Web design­ers are dif­fer­ent from tra­di­tional artists, we should treat the cre­ative “back end” any dif­fer­ent. After all, we got into this field to be cre­ative and express our artis­tic tal­ents, so why don’t we?

Online Inspi­ra­tion Isn’t Bad

Before delv­ing any deeper, let’s get one thing straight: the point of this arti­cle is not to say that online inspi­ra­tion isn’t unpro­duc­tive in any way. In fact, it is quite a good thing and can very well pro­duce the intended effect.

The unpro­duc­tive part is when design­ers turn to it as their sole chan­nel of inspi­ra­tion. Show­cases and gal­leries, rather, serve best as exam­ples of best prac­tices and ideas. Our designs should stem instead from our own cre­ativ­ity, aided by this online inspiration.

How to Stop the Cycle

For many of us, going to a CSS gallery the moment we start work­ing on a new project is rou­tine. Whether because we are behind in our work or just anx­ious to get started, true inspi­ra­tion gets put on the back­burner more and more over time. Hope­fully, this arti­cle will help con­vince you that find­ing true inspi­ra­tion is nec­es­sary to the design process. Even if you’re con­vinced, though, break­ing old habits can be hard.

The trick is to con­sider alter­na­tive inspi­ra­tion an an essen­tial part of the job. While it feels more like play than work at first, find­ing true inspi­ra­tion should mean more than brows­ing through the same mate­r­ial over and over. And we should know that in a cre­ative indus­try, hav­ing fun is okay; it doesn’t mean we’re being unproductive.

We have to con­sider tak­ing a walk, vis­it­ing a museum and sketch­ing as parts of our job descrip­tion, things that help us get our jobs done faster and less painfully. We’ll dis­cuss below when we should seek out these other forms of inspi­ra­tion and when it is okay to sift through gal­leries and showcases.

2. Forms Of Offline Inspiration

Let’s start by dis­cussing what we can do to derive new forms of offline inspi­ra­tion. Below are some tried and true meth­ods for uplift­ing one’s inner cre­ativ­ity… with­out using a browser.

Nature

Nature is eas­ily one of the places to find inspi­ra­tion. Not only does it have vari­ety, color and inter­est, but it takes its effect on us by mere instinct. Because of this, find­ing inspi­ra­tion on a walk, a hike or just sit­ting in a park doesn’t take much effort. Let’s look at a few spe­cific places where one can find it, though.

Weather
Weather is just one part of what nature has to offer. Because weather is so closely related to mood, it can be a great source of inspi­ra­tion. Think of your favorite sea­son, a stormy night or a sunny day at the beach; take in the col­ors, tex­tures and mood and imple­ment them in a design.

Nature Weather

Life Forms
While weather can influ­ence and inspire mood, life forms have yet far more vari­ety than weather. Whether plant life or ani­mals, a num­ber of exquis­itely designed ele­ments are avail­able from which to draw inspi­ra­tion, through tex­ture, shape, color, etc.

Life

Geog­ra­phy and Land­scape
Geog­ra­phy and land­scape is another major source of inspi­ra­tion. Tak­ing in your nat­ural sur­round­ings can have a calm­ing effect on your mind and moti­vate you to design. Beyond what­ever comes to you nat­u­rally, look at shape, tex­ture and color, too.

Wolfgang Staudt New Mexico

The above are just a few quick exam­ples of how nature can and should be used for inspi­ra­tion. These are def­i­nitely the first choices for many design­ers who want a new cre­ative out­look, and for a great reason.

The trick is to fig­ure out how to get work­able inspi­ra­tion from nature and inte­grate it into a design. For spe­cific exam­ples on how to achieve this in detail, check out 17 Tech­niques for Cre­at­ing Designs Inspired by Nature.

Museum Vis­its

Like nature, sim­ply walk­ing through a museum can relieve stress and, in turn, inspire. It doesn’t have to be a museum for art or design either. A sci­ence museum, his­tor­i­cal museum or even aquar­ium or zoo can work. The point is to see things that are not in our every­day lives, while being in an envi­ron­ment that allows you to really focus on and appre­ci­ate them.

Being in a museum can lead us to new things, such as:

  • Alter­na­tive cul­tures and their arts;
  • Tra­di­tional or clas­si­cal art;
  • An atten­tion to dif­fer­ent senses and a more empir­i­cal way of think­ing (think of a sci­ence museum);
  • Weird, strange or out­ra­geous exhibits to help us think out­side of the box (like a “Ripley’s Believe It or Not” museum);
  • His­tor­i­cal objects that are shown in pho­tographs and other media.

Musuem
Image source

Because these expe­ri­ences can lead to such alter­na­tive ways of think­ing, they are great for get­ting away from the daily grind that is sup­press­ing your imagination.

Draw­ing and Sketching

Many design­ers begin a project by sketch­ing, but far too many jump straight into wire­frames, lay­outs and then the final draft.

Instead of start­ing the design phase cold, sketch freely. Doo­dle, draw ideas, sketch abstract and non-​​abstract tex­tures and shapes. When sketch­ing for inspi­ra­tion, don’t think of it as any other stage in the design process. Have fun with it; be care­free and laid back. Free-​​drawing is a great way to put all of those ideas in your head down on paper.

Advanced Sketching
Comic Book Style on GoMe​di​aZine​.com

Many design­ers very likely grew up sketch­ing and draw­ing. A lot of us prob­a­bly had books or other resources on “How to draw,” explain­ing the tech­ni­cal aspects of draw­ing char­ac­ters and other sub­jects. Doing this now at a more advanced level can be inspi­ra­tional. Doing so, we advance our skills and are moti­vated to prac­tice new illus­tra­tion tech­niques. So, make an effort to refine your basic draw­ing and sketch­ing skills.

For a great list of tuto­ri­als, check out 40 Free Tuto­ri­als on Advanced Draw­ing Tech­niques.

An Alter­na­tive Hobby

Expe­ri­enc­ing new things is a part of life. With­out this, we fall into a rut. Think about it: when we began design­ing, we were full of ideas, moti­va­tion and inspi­ra­tion. After doing it for so long, though, design­ing can become rou­tine and uninspiring.

This is a part of life. But we obvi­ously can’t quit our jobs and pur­sue unre­lated goals when­ever we feel like it. Instead, we must find a way to keep life excit­ing while main­tain­ing our careers.

Try a new hobby that you find excit­ing, and then bring it into your designs. For exam­ple, if you’re learn­ing a new lan­guage, incor­po­rate the cul­ture and styles asso­ci­ated with that lan­guage into your designs. If you’re learn­ing a new craft, how can you incor­po­rate the tex­tures, shapes and actions of it into a design? Count­less hob­bies are out there. No mat­ter how quirky or seem­ingly unpro­duc­tive yours is, if you have a pas­sion for it, it will help.

Quirky Hobby
Image source

It doesn’t even have to be a hobby, but just some­thing to get your mind off of work. For exam­ple, if you’re redec­o­rat­ing a room, there had to be some ini­tial inspi­ra­tion that drew you into it; use that spark in your design. Other life expe­ri­ences involv­ing fam­ily, friends and events can play a role in design, too.

The point is to enjoy hob­bies and gen­eral life events more, and stop think­ing of them as unre­lated to work.

Music

Music brings emo­tion and puts imagery in our heads. It is a great art to jog our imagination.

While the tech­niques men­tioned thus far may appeal only to some peo­ple, every­one should try music, because it relies on no visual source and can lead to the most cre­ative out­comes. Deriv­ing inspi­ra­tion from music may not be as easy (because it is more abstract than a pat­tern, tex­ture or shape), but it cer­tainly gets our imag­i­na­tion and cre­ativ­ity flowing.

Music Inspired Art
Image source

How you use this method is really up to you, but for more tips, check out Smashing’s other post, “Draw­ing Inspi­ra­tion From Music.”

Pho­tog­ra­phy

Using pho­tos is an excel­lent way to incor­po­rate many of the above meth­ods, with­out hav­ing to travel around the world. Fly­ing across the world to see the wildlife in the jun­gle or a for­eign culture’s prac­tices is not prac­ti­cal. Pho­tographs, rather, cap­ture real-​​life images from which you can draw inspi­ra­tion and come up with tex­ture, shapes, sub­jects and more.

Photography
Image source

While pho­tog­ra­phy can be con­sid­ered “online inspi­ra­tion,” it is dif­fer­ent in that one can­not take bits of a pho­to­graph and turn it directly into a design (the way you can with another web­site). Rather, one must use skill and cre­ativ­ity to turn it into a work­able design, just as you would use a nat­ural object in the wild.

Below are a few favorite pho­tog­ra­phy show­cases to get you inspired:

Tra­di­tional Art

Each era of art has its own style and devel­op­ment. We often focus too much on today’s trends that we for­get all of the excel­lent art of the past.

Research any era of art his­tory. You will dis­cover many great works of art, as well as tech­niques that the mas­ters of that era followed.

Neoclassical Art
Image source

As with any other form of inspi­ra­tion, take tex­ture, color, shape, style and depth into account. In view­ing art from dif­fer­ent eras and cul­tures, we can draw inspi­ra­tion from the style with­out copy­ing the subject.

One’s Own Imagination

Think like a child again. With a bit of relax­ation, we can come up with our own ideas again, with­out even an exter­nal trig­ger of the imag­i­na­tion. We can’t elab­o­rate much more on this: the method will be unique to each indi­vid­ual. But it is bound to cre­ate the most orig­i­nal designs of all.

For a few fun tips on how to be imag­i­na­tive, take a look at the sim­ple Wik­i­How arti­cle ““How to Be Imag­i­na­tive.”

3. Deriv­ing Inspi­ra­tion From These Sources

Know­ing how to find inspi­ra­tion through alter­na­tive sources comes down to the art and sci­ence of design. Rather than merely copy trends and exam­ples, we have to use our knowl­edge of tex­ture, shape, prox­im­ity and so forth to build fresh design. Our new sources of inspi­ra­tion may now be dif­fi­cult to har­ness but are sure to release our creativity.

Here fol­low­ing are some basic guide­lines you can take to derive inspi­ra­tion from any offline source.

Look at Texture

Many sources of inspi­ra­tion are visual in nature, which means they may have inter­est­ing tex­tures, whether from an ani­mal skin or a wrin­kled petal.

Many designs are not much more than tex­ture at all. But even with­out con­ven­tional imagery, we under­stand the design per­fectly well.

Kevin Lucius
Kevin​lu​cius​.com

Every­thing Has a Shape

Every­thing has a shape that high­lights its tex­ture. We look at dif­fer­ent shapes every day, but rarely do we stop to appre­ci­ate it. No mat­ter what it is taken from, a design could resem­ble the source of inspi­ra­tion itself or just bits and pieces of it.

Take the time to exam­ine the object’s shape, angles, edges and dimen­sions. They may spark new ideas or lead to an idea for an ele­ment in your design.

Lilly's Table
Illystable​.com

Color and Palettes

Nature-​​inspired Web design was quite a trend there for a while, and it is still going pretty strong. The trend is notable because color is given such spe­cial atten­tion and is imple­mented so care­fully in designs. Green, blue and brown earthy hues are incred­i­bly pop­u­lar, and these col­ors and a bit of authen­tic tex­ture are all a design needs to be nature-​​inspired.

We can apply the same atten­tion to other offline sources of inspi­ra­tion. For exam­ple, painters from dif­fer­ent eras pre­ferred dif­fer­ent color palettes, and we can bor­row these palettes for today’s designs. Like­wise, dif­fer­ent cul­tures, land­scapes and imagery all pro­vide a unique sets of col­ors to inspire us. All we have to do is stop and take notice.

Hungry for Change
Food​Inc​Movie​.com

Take an Alter­na­tive Perspective

View­ing the things we see every day from a fresh per­spec­tive makes them design-​​worthy. This could mean view­ing them close up, upside down, from far away or from an entirely dif­fer­ent angle. What­ever you choose, look at an object from an unusual per­spec­tive to dis­cover some­thing new about it.

Orman Clark
Ormanclark​.com

Choose a Theme

We can be moti­vated to cre­ate some­thing new after wind­ing down for the day, after tak­ing a walk, or after view­ing some inter­est­ing pho­tographs. But when it comes down to actu­ally design­ing, we may still not know where to begin.

Just as we did when writ­ing essays back in high school, we must first define our design’s theme; that is, come up with a “the­sis” for our design. We may be inspired by Renais­sance art that we viewed at a museum, but we might find that there is too much in the art­work to base a design on.

This is when we need to get spe­cific. Should your design reflect the tex­tures, col­ors and shapes of that era, or should it evoke a typ­i­cal pub­li­ca­tion of that era (a web­site being a pub­li­ca­tion itself after all)?

Come up with a spe­cific sub­ject and idea for the design, taken from your much broader source of inspi­ra­tion. Don’t just go with a nature theme; choose a cheer­ful snowy morn­ing theme. Don’t use a book as a whole, but rather use an event recounted in the book, or an emo­tion that the event evokes.

You could incor­po­rate a num­ber of ideas from any source of inspi­ra­tion, so be spe­cific and choose one par­tic­u­lar mes­sage to guide the design.

Col­lect Resources and Bits of Inspiration

Before start­ing the design phase, col­lect resources that you will need to com­plete the design. If your design is inspired by Renais­sance art, assem­ble tuto­ri­als on cre­at­ing old-​​paper effects, gather some period typog­ra­phy and col­lect any other tex­tures, sym­bols, shapes and imagery that could be used in the design.

What’s great about this part is that even though you’re not actively design­ing, you’re still putting pieces together that will guide you to the final design. In other words, you’re in the process of brainstorming.

4. When To Use Offline Inspiration

There is a trend among design­ers to say that any offline inspi­ra­tion is okay, but offline and online inspi­ra­tion need to be balanced.

Offline Inspiration
Image source

Offline inspi­ra­tion sources are best for the early phases of a design. They keep you from going straight to CSS gal­leries the moment a new project begins, only to copy ele­ments of the most orig­i­nal designs. Offline inspi­ra­tion helps us come up with our own ideas and fall back on our own creativity.

5. When To Use Show­cases And Galleries

Show­cases and gal­leries are not a great source of inspi­ra­tion early on. Rather, they are great to learn best prac­tices and refine usabil­ity and see exam­ples of how spe­cific ele­ments have been imple­mented. They are use­ful for turn­ing inspi­ra­tion into a work­able design with solid usability.

Showcase
Show­case of music night clubs web designs here, on Smash­ing Magazine.

For exam­ple, if you’re design­ing a blog theme, you could look at the styles of var­i­ous “Read More” links and see which ones have the best effect. You could check out the nav­i­ga­tion style of dif­fer­ent web­site types (e.g. port­fo­lio, realty web­site, Mac appli­ca­tion web­site, etc.). Con­sis­tency among cer­tain web­site ele­ments is a good thing.

Show­cases and gal­leries can also help gen­er­ate ideas for style. An app web­site, for exam­ple, obvi­ously wouldn’t look good with a grunge style. Some styl­is­tic choices may not be that obvi­ous, though, and CSS gal­leries can help us achieve a look that is orig­i­nal yet appropriate.

Con­clu­sion

As you can see, both offline and online inspi­ra­tion have their place. Know­ing when to use each is the key to get­ting your cre­ativ­ity back and pro­duc­ing some orig­i­nal work once again. Hope­fully, this post has moti­vated you to take the time to find alter­na­tive sources of inspiration.

We have just briefly touched on meth­ods of find­ing alter­na­tive inspi­ra­tion. There are, of course, many more. Feel free to share your own habits and tech­niques for gain­ing inspi­ra­tion. The ways are surely end­less, and we have to find the one that works best for us.

Fur­ther Resources

You may also be inter­ested in these addi­tional references:

About the Author

Kayla Knight is a col­lege stu­dent, free­lancer and blog­ger. In her spare time, she main­tains two blogs, Webi​tect​.net and Design​Finds​.Me, as well as a port­fo­lio. Feel free to get in touch with her through her blogs, or fol­low her on Twit­ter: @KaylaMaeKnight.

(al)


© Kayla Knight for Smash­ing Mag­a­zine, 2009. |
Perma­link |
Be the first to com­ment |
Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Magazine

Post tags: , ,

10 Pre-​​Press Tips For Perfect Print Publishing

Tuesday, October 27th, 2009

  

A lot of design­ers think CMYK is the way to go when design­ing for print. We will, of course, always use CMYK-​​based ink, but this does not mean you have to work with CMYK files. You can work with RGB images to per­fectly opti­mize your print col­ors and save a great deal of time in the process.

You may be inter­ested in the fol­low­ing related posts:

1. Use RGB Color Mode For Pho­to­shop Images

For sev­eral of the fol­low­ing tips to work, you will have to cre­ate and save all of your Pho­to­shop images and art­work in RGB color mode. If you’re a vet­eran designer, you prob­a­bly think this goes against what you’ve been taught, which is to use CMYK color mode. Well, tech­nol­ogy has come a long way, and nowa­days RGB color mode is bet­ter because it pro­duces a wider range of col­ors and allows you to use one image for sev­eral media, includ­ing print and Web.

Screenshot

Think of it this way: RGB col­ors (red, green, and blue) are cre­ated with light. That’s why your com­puter mon­i­tor and TV use RGB col­ors to pro­duce its fan­tas­tic range of col­ors. CMYK col­ors (cyan, magenta, yel­low and key, or black), on the other hand, are cre­ated by putting ink to paper. “Ink-​​on-​​paper col­ors” will never be as bright or sat­u­rated as the col­ors on your com­puter screen or TV, no mat­ter how much ink you add to the paper. So, to get the widest range of col­ors pos­si­ble, you need to save all of your Pho­to­shop files in RGB color mode. Most of the time, you won’t even have to think about it, because almost every pho­tog­ra­pher will sup­ply you with RGB images. All you have to do is keep them in that mode.

Screenshot
A 3-​​D map show­ing the range of the Adobe RGB (1998) color space, the sRGB (or small RGB) color space and the com­mon news­pa­per CMYK color space. sRGB’s range is much smaller than Adobe RGB’s. Work­ing in the Adobe RGB color space would result in much brighter col­ors. The range of the CMYK color space is much nar­rower. Espe­cially for this news­pa­per, the white in CMYK mode isn’t white at all. It’s more of a dirty brown.

2. Spec­ify The Right Color Settings

To suc­cess­fully use an RGB image in Adobe InDe­sign, you first need to spec­ify the appro­pri­ate color set­tings. For­tu­nately, Adobe has made it really easy for you to spec­ify the right set­tings and quickly apply them across its Cre­ative Suite. This is where Adobe Bridge comes in.

To spec­ify a color set­ting in Adobe Bridge, choose Edit → Cre­ative Suite Color Set­tings and then select your region: either “North Amer­ica Pre­press 2,” “Europe Pre­press 2″ or “Japan Pre­press 2.” If your region isn’t dis­played in the dia­log box, select “Show Expanded List Of Color Set­tings Files” at the bot­tom of the dia­log box. After click­ing “Apply,” the set­ting you have spec­i­fied will be applied to Adobe InDe­sign, Pho­to­shop, Illus­tra­tor and Acrobat.

3. Ditch Pho­to­shop EPS Files And Use PSD Files Instead

After your images and art­work have been saved in RGB color mode and you’ve spec­i­fied the right color set­tings, it’s time to start design­ing. Do you still keep a copy of your native Pho­to­shop (PSD) files and save TIFF or EPS ver­sions, which you then import into InDe­sign? If so, you’re miss­ing out on some valu­able opportunities.

If you’ve been using InDe­sign for a while, you prob­a­bly already know that it hon­ors trans­parency effects in PSD files, but that’s not all. When you import PSD files, InDe­sign also hon­ors clip­ping paths, spot col­ors, alpha chan­nels, duo­tone col­ors and vec­tor infor­ma­tion (such as Smart Objects). You can even access all the lay­ers in a PSD file by select­ing “Show Import Options” when you import an image or choos­ing Object → Object Layer Options after import­ing an image. With all of these time-​​saving oppor­tu­ni­ties, sav­ing all of your Pho­to­shop images in the PSD file for­mat is a no-​​brainer.

4. Accu­rately Sim­u­late CMYK While Work­ing In RGB

Keep in mind that even though you’re import­ing RGB images with bright and sat­u­rated col­ors, InDe­sign actu­ally shows you what the CMYK equiv­a­lent of each image will look like. So, how does InDe­sign make that color con­ver­sion prop­erly? Well, because you’ve spec­i­fied the appro­pri­ate color set­tings in Adobe Bridge, InDe­sign will use those set­tings to accu­rately dis­play each RGB image when it’s con­verted to CMYK color mode.

InDe­sign even goes a step fur­ther and shows you exactly how the col­ors in a lay­out will appear when printed on a cer­tain type of paper using a spe­cific out­put device. Sim­ply choose View → Proof Setup → Cus­tom. Then choose an out­put device from the “Device to Sim­u­late” pop-​​up menu, and select the “Sim­u­late Paper Color” option. After click­ing “Okay,” the color of your pages will change, and your images will appear darker and less sat­u­rated. So, to get a good idea of how your lay­out will appear when printed on coated paper using a sheet-​​fed printer, choose “U.S. Sheetfed Coated v2.” This fea­ture is great because it gives you an accu­rate idea of how your col­ors will appear when they’re printed.

If you use Pho­to­shop, you may be won­der­ing, “Wouldn’t it be nice if Pho­to­shop could do the same trick, so that I can see what hap­pens to my RGB images when they’re con­verted to CMYK?” Well, of course it can. Just choose View → Proof Col­ors, and make sure that “Work­ing CMYK” is spec­i­fied by choos­ing View → Proof Setup → Work­ing CMYK. When you proof col­ors, you’re not actu­ally chang­ing the color mode of the image, so you can con­tinue work­ing in RGB color mode while sim­u­lat­ing CMYK. This is yet another rea­son not to con­vert your Pho­to­shop files to CMYK.

Screenshot
The top part of this image is a “Soft­Proof” of how this RGB image will appear when printed in a news­pa­per. The bot­tom part shows the orig­i­nal sRGB. The dirty color is actu­ally the color of the paper. As you can see, the color of the paper affects all other colors.

5. Select­ing the Right CMYK Out­put Pro­file For The Job

There are many dif­fer­ent kinds of paper, such as recy­cled and brown­ish paper for news­pa­pers, glossy paper for mag­a­zines, uncoated paper for sta­tion­ary and bright-​​white coated paper for high-​​quality brochures. As you can imag­ine, each type has dif­fer­ent char­ac­ter­is­tics when it comes to print­ing. The recy­cled paper sucks up more ink, and if you don’t take this into account, your beau­ti­ful full-​​color pho­tos will become too dark, and the ink will blur over the paper, cre­at­ing an ugly brown­ish effect.

So, how do you opti­mize art­work for all of these dif­fer­ent kinds of papers? Well, that’s the easy part. Stan­dard CMYK inks have been tested on every type of paper to the extreme. The way cyan, magenta, yel­low and black are printed on a spe­cific type of paper is doc­u­mented in an ICC pro­file. All you need to do is down­load these free “Color Pro­files” and select the right one when you export a PDF using InDe­sign (Export → Out­put → Color Con­ver­sion & Des­ti­na­tion). If you’re not sure what kind of paper your printer will use, sim­ply ask them. Most print­ers would rather answer a sim­ple ques­tion than clean up col­ors afterward.

The infor­ma­tion pro­vided by the color set­ting that you spec­i­fied in Adobe Bridge is used by InDe­sign to deter­mine how to con­vert RGB images to the CMYK color space when you out­put a doc­u­ment. By using InDe­sign instead of Pho­to­shop to make that con­ver­sion, you gain the ben­e­fits out­lined in the fol­low­ing point.

6. Use InDe­sign Instead Of Pho­to­shop To Make The Final Color Conversion

There are sev­eral good rea­sons to let InDe­sign do the conversion:

  • Images are all con­verted at the same time instead of one at a time before you import each into InDesign.
  • You can reuse the same image for dif­fer­ent pur­poses. For instance, you might want to re-​​use the image on your web­site for a brochure, mag­a­zine or news­pa­per. If you let InDe­sign do the color con­ver­sion, it will opti­mize your RGB images for what­ever out­put device and type of paper you choose.
  • You can sim­u­late how the col­ors in a lay­out will appear on dif­fer­ent kinds of paper using the same RGB images.

When you use Pho­to­shop to con­vert all of your images to CMYK before import­ing them into your InDe­sign lay­outs, you pre­vent InDe­sign from opti­miz­ing the color for dif­fer­ent out­put devices and paper types. If you make the con­ver­sion to CMYK first and start design­ing later, you might unwit­tingly alter the “max­i­mum ink” and other impor­tant color-​​related char­ac­ter­is­tics that were pre-​​defined in your Pho­to­shop file when Pho­to­shop con­verted your RGB image to CMYK.

As a result, when you work on the col­ors and con­trast later, what you see on screen won’t be what you get in print because you have altered the opti­mal colors.

7. Down­load All The Profiles

Dif­fer­ent CMYK Color Pro­files are avail­able for dif­fer­ent kind of papers and print processes. Sev­eral orga­ni­za­tions pro­vide top-​​of-​​the-​​line ICC pro­files, all of which can be down­loaded for free at the bot­tom of this page. The most com­mon are:

  • News­pa­per: ISOnewspaper
  • Mag­a­zines: ISOWebcoated
  • Full Color Offset:
  • U.S. Web Coated (SWOP) v2
  • ISOCated_​v2
  • ISOun­coated
  • Europe ISO­Coated FOGRA27
  • (or the new one, FOGRA39)

8. Export­ing A Per­fect CMYK PDF Using RGB Images

Once you’ve down­loaded and installed the ICC pro­files, they’ll be avail­able to InDe­sign. You don’t even need to select the right pro­file and assign it to your InDe­sign doc­u­ment. All you have to do is select the right ICC pro­file when you export the doc­u­ment to PDF (Export → Out­put → Color Con­ver­sion & Des­ti­na­tion). Although you don’t need to assign the right CMYK pro­file, I would rec­om­mend it, because it allows InDe­sign to match the col­ors when you select the “Proof Col­ors” command.

After choos­ing File → Export and spec­i­fy­ing Adobe PDF as the file for­mat, select the “Out­put” cat­e­gory on the left side of the “Export Adobe PDF” dia­log box. Choose the appro­pri­ate CMYK des­ti­na­tion from the “Des­ti­na­tion” menu, so that InDe­sign can opti­mally con­vert all RGB images to CMYK. Also, be sure to select “Con­vert to Des­ti­na­tion (Pre­serve Num­bers)” from the “Color Con­ver­sion” menu so that the col­ors you’ve cre­ated in InDe­sign will main­tain their orig­i­nal values.

9. Avoid­ing Errors When Using RGB Images And Spot Colors

You can use RGB images even when pro­duc­ing a high-​​end brochure that has die-​​cut embossed areas and spot UV coat­ing. All you have to do is lay every­thing out in InDe­sign and then use a spot color to define the areas that will be die-​​cut, embossed or UV-​​coated. Make sure that the spot color objects are placed on top of the RGB images and that they are set to over­print: choose Win­dow → Attrib­utes to open the “Attrib­utes” panel and select “Over­print Fill.”

When you export the doc­u­ment to PDF, the RGB images will con­vert to CMYK, and all of your spot col­ors will remain unchanged. I rec­om­mend that you check the color sep­a­ra­tions in Adobe Acro­bat to make sure that every­thing that needs to over­print has been set to “Over­print” (Advanced → Print Pro­duc­tion → Out­put Pre­view).

Screenshot
The cover of a brochure for a well-​​known Dutch beer brand. Adobe InDesign’s “Sep­a­ra­tions Pre­view” shows the RGB image in CMYK. Scene 2 shows the parts that will be high­lighted using a glossy ultra­vi­o­let coat­ing. Scene 3 is the part that will be embossed. Scene 4 shows all of the col­ors com­bined. (The com­bined image looks a bit weird because the UV coat­ing and embossed parts have been given a extra spot color so that the printer can keep them sep­a­rate from the full-​​color artwork).

10. Share Your PDF Files With Acro​bat​.com

Now you have but one prob­lem to solve: get­ting that high-​​resolution PDF to your client and the printer. Email won’t work because a high-​​resolution PDF is usu­ally too big. Most print­ers offer an FTP web­site, but many clients don’t know how to use FTP. For­tu­nately, send­ing out large files is much eas­ier with Acro​bat​.com, which is a free Web-​​based ser­vice pro­vided by Adobe.

With this incred­i­bly easy and free ser­vice, you get your own online stor­age where you can upload high-​​resolution PDF files. You can notify your client and printer via email that a PDF is ready to down­load. And the email even con­tains a pre­view of the PDF. If you don’t want Adobe to email your clients, Acro​bat​.com lets you cre­ate a short URL to include in your own email. You can cre­ate an online “vault” if you wish, but no log-​​in or reg­is­tra­tion is required by default for your client or printer to access the PDF. You can even share PDF files on your web­site or blog using the embed code provided.

Screenshot
This email is auto­mat­i­cally gen­er­ated when you upload a PDF to Acro​bat​.com. Feel free to take a look at the PDF file of this brochure (which I’ve down­sized to 100 dpi). I’ve shared it on Acro​bat​.com. Click this link to see it: https://​share​.acro​bat​.com/​a​d​c​/​d​o​c​u​m​e​n​t​.​d​o​?​d​o​c​i​d​=​6​b​a​6​d​3​e​1​-​9​8​8​e​-​4​4​5​2​-​8​3​b​f​-​2​f​e​0​3​6​7​49171

Fur­ther Resources

All of the color pro­files and tricks in this arti­cle can be used through­out the entire Cre­ative Suite: 1, 2, 3 and 4. ICC Pro­files can be accessed from the fol­low­ing directories:

  • Mac OS X: …/​Library/​ColorSync/​Profiles
  • Win­dows: …\Windows\system32\spool\drivers\color

Own­ing a copy of Adobe Acro­bat is not nec­es­sary, but the appli­ca­tion comes in handy when check­ing the PDF files that you’ve exported from Adobe InDe­sign. Adobe Acro­bat even lets you see which des­ti­na­tion pro­file you have spec­i­fied in InDe­sign by choos­ing Advanced → Print Pro­duc­tion → Out­put Pre­view. Quark XPress users can use these same ICC profiles.

Keep in mind that exper­i­ment­ing with color can cre­ate unde­sired results if you’re not sure what you’re doing. I highly rec­om­mend speak­ing with your printer before alter­ing your work­flow because he won’t be expect­ing color-​​optimized art­work if you’ve never both­ered to sub­mit it before. Should you have any doubts about the col­ors in a design, order­ing a color proof on paper is always a good idea.

Related posts

You may be inter­ested in the fol­low­ing related posts:

About the Author

Marco Kramer is a graphic designer who works in the Nether­lands. He spe­cial­izes in the tech­ni­cal aspects of the design process. As such, he refers to his posi­tion as Dig­i­tal Engi­neer. Marco has been pub­lish­ing arti­cles about pre-​​press and design-​​related top­ics for eight years on his blogs Dig​i​tal​Engi​neer​.net and Mac­Mojo. He has recently started pub­lish­ing arti­cles for an inter­na­tional audi­ence. (Illus­tra­tions by Frank De Man.)

(al)


© Marco Kramer for Smash­ing Mag­a­zine, 2009. |
Perma­link |
39 com­ments |
Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Magazine

Post tags: , , ,

Modern CSS Layouts: The Essential Characteristics

Monday, October 26th, 2009

  

Now is an excit­ing time to be cre­at­ing CSS lay­outs. After years of what felt like the same old tech­niques for the same old browsers, we’re finally see­ing browsers imple­ment CSS 3, HTML 5 and other tech­nolo­gies that give us cool new tools and tricks for our designs.

But all of this change can be stress­ful, too. How do you keep up with all of the new tech­niques and make sure your Web pages look great on the increas­ing num­ber of browsers and devices out there? In part 1 of this arti­cle, you’ll learn the five essen­tial char­ac­ter­is­tics of suc­cess­ful mod­ern CSS web­sites. In part 2 of this arti­cle, you’ll learn about the tech­niques and tools that you need to achieve these characteristics.

We won’t talk about design trends and styles that char­ac­ter­ize mod­ern CSS-​​based lay­outs. These styles are always chang­ing. Instead, we’ll focus on the broad under­ly­ing con­cepts that you need to know to cre­ate the most suc­cess­ful CSS lay­outs using the lat­est tech­niques. For instance, sep­a­rat­ing con­tent and pre­sen­ta­tion is still a fun­da­men­tal con­cept of CSS Web pages. But other char­ac­ter­is­tics of mod­ern CSS Web pages are new or more impor­tant than ever. A mod­ern CSS-​​based web­site is: pro­gres­sively enhanced, adap­tive to diverse users, mod­u­lar, effi­cient and typo­graph­i­cally rich.

  • Pro­gres­sively enhanced,
  • Adap­tive to diverse users,
  • Mod­u­lar,
  • Effi­cient,
  • Typo­graph­i­cally rich.

Pro­gres­sive Enhancement

Pro­gres­sive enhance­ment means cre­at­ing a solid page with appro­pri­ate markup for con­tent and adding advanced styling (and per­haps script­ing) to the page for browsers that can han­dle it. It results in web pages that are usable by all browsers but that do not look iden­ti­cal in all browsers. Users of newer, more advanced browsers get to see more cool visual effects and nice usabil­ity enhancements.

The idea of allow­ing a design to look dif­fer­ent in dif­fer­ent browsers is not new. CSS gurus have been preach­ing this for years because font avail­abil­ity and ren­der­ing, color tone, pixel cal­cu­la­tions and other tech­ni­cal fac­tors have always var­ied between browsers and plat­forms. Most Web design­ers avoid “pixel per­fec­tion” and have accepted the idea of their designs look­ing slightly dif­fer­ent in dif­fer­ent browsers. But pro­gres­sive enhance­ment, which has grown in pop­u­lar­ity over the past few years, takes it a step fur­ther. Designs that are pro­gres­sively enhanced may look more than slightly dif­fer­ent in dif­fer­ent browsers; they might look very different.

For exam­ple, the tweetCC web­site has a num­ber of CSS 3 prop­er­ties that add attrac­tive visual touches, like drop-​​shadows behind text, mul­ti­ple columns of text and different-​​colored back­ground “images” (with­out there hav­ing to be actu­ally dif­fer­ent images). These effects are seen to var­i­ous extents in dif­fer­ent browsers, with old browsers like IE 6 look­ing the “plainest.” How­ever, even in IE 6, the text is per­fectly read­able, and the design is per­fectly usable.

Screenshot
tweetCC in Safari.

Screenshot
tweetCC in IE 6.

In CSS 3-​​capable browsers like Safari (top), the tweetCC web­site shows a num­ber of visual effects that you can’t see in IE 6 (bottom).

These sig­nif­i­cant dif­fer­ences between browsers are per­fectly okay, not only because that is the built-​​in nature of the Web, but because pro­gres­sive enhance­ment brings the fol­low­ing benefits:

  • More robust pages
    Rather than use the grace­ful degra­da­tion method to cre­ate a fully func­tional page and then work back­wards to make it func­tion in less-​​capable browsers, you focus first on cre­at­ing a solid “base” page that works everywhere.
  • Hap­pier users
    You start build­ing the page mak­ing sure the basic func­tion­al­ity and styling is the same for every­one. Peo­ple with old browsers, mobile devices and assis­tive tech­nol­ogy are happy because the pages are clean and reli­able and work well. Peo­ple with the lat­est and great­est browsers are happy because they get a rich, pol­ished experience.
  • Reduced devel­op­ment time
    You don’t have to spend hours try­ing to get every­thing to look per­fect and iden­ti­cal in all browsers. Nor do you have to spend much time reverse-​​engineering your pages to work in older browsers after you have com­pleted the fully func­tional and styled ver­sions (as is the case with the grace­ful degra­da­tion method).
  • Reduced main­te­nance time
    If a new browser or new tech­nol­ogy comes out, you can add new fea­tures to what you already have, with­out alter­ing and pos­si­bly break­ing your exist­ing fea­tures. You have only one base ver­sion of the page or code to update, rather than mul­ti­ple ver­sions (which is the case with grace­ful degradation).
  • More fun
    It’s just plain fun to be able to use cool and cre­ative new tech­niques on your Web pages, and not have to wait years for old browsers to die off.

Learn more about pro­gres­sive enhancement:

Adap­tive to Diverse Users

Mod­ern CSS-​​based Web pages have to accom­mo­date the diverse range of browsers, devices, screen res­o­lu­tions, font sizes, assis­tive tech­nolo­gies and other fac­tors that users bring to the table. This con­cept is also not new but is grow­ing in impor­tance as Web users become increas­ingly diverse. For instance, a few years ago, you could count on almost all of your users hav­ing one of three screen res­o­lu­tions. Now, users could be view­ing your pages on 10-​​inch net­books, 30-​​inch widescreen mon­i­tors or any­thing in between, not to men­tion tiny mobile devices.

Screenshot
In his arti­cle “Smart columns with CSS and jQuery” Soh Tanaka describes his tech­niques that adapts the lay­out depend­ing on the cur­rent browser win­dow size.

Cre­at­ing Web designs that work for all users in all sce­nar­ios will never pos­si­ble. But the more users you can please, the bet­ter: for them, for your clients and for you. Suc­cess­ful CSS lay­outs now have to be more flex­i­ble and adapt­able than ever before to the increas­ing vari­ety of ways in which users browse the Web.

Con­sider fac­tors such as these when cre­at­ing CSS layouts:

  • Browser
    Is the design attrac­tive and usable with the most cur­rent and pop­u­lar browsers? Is it at least usable with old browsers?
  • Plat­form
    Does the design work on PC, Mac and Linux machines?
  • Device
    Does the design adapt to low-​​resolution mobile devices? How does it look on mobile devices that have full res­o­lu­tion (e.g. iPhones)?
  • Screen res­o­lu­tion
    Does the design stay together at mul­ti­ple view­port (i.e. win­dow) widths? Is it attrac­tive and easy to read at dif­fer­ent widths? If the design does adapt to dif­fer­ent view­port widths, does it cor­rect for extremely nar­row or wide view­ports (e.g. by using the min-width and max-width properties)?
  • Font sizes
    Does the design accom­mo­date dif­fer­ent default font sizes? Does the design hold together when the font size is changed on the fly? Is it attrac­tive and easy to read at dif­fer­ent font sizes?
  • Color
    Does the design make sense and is the con­tent read­able in black and white? Would it work if you are color blind or have poor vision or can­not detect color contrast?
  • JavaScript pres­ence
    Does the page work with­out JavaScript?
  • Image pres­ence
    Does the con­tent make sense and is it read­able with­out images (either back­ground or foreground)?
  • Assis­tive technology/​disability
    Does the page work well in screen read­ers? Does the page work well with­out a mouse?

This is not a com­pre­hen­sive list; and even so, you would not be able to accom­mo­date every one of these vari­a­tions in your design. But the more you can account for, the more user-​​friendly, robust and suc­cess­ful your web­site will be.

See these resources on user diver­sity and Web page adaptability:

Mod­u­lar

Mod­ern web­sites are no longer col­lec­tions of sta­tic pages. Pieces of con­tent and design com­po­nents are reused through­out a web­site and even shared between web­sites, as con­tent man­age­ment sys­tems (CMS), RSS aggre­ga­tion and user-​​generated con­tent increase in pop­u­lar­ity. Mod­ern design com­po­nents have to be able to adapt to all of the dif­fer­ent places they will be used and the dif­fer­ent types and amount of con­tent they will contain.

Screenshot
Object Ori­ented CSS is Nicole Sulivan’s attempt to cre­ate a frame­work that would allow devel­op­ers to write fast, main­tain­able, standards-​​based, mod­u­lar front end code.

Mod­u­lar CSS, in a broad sense, is CSS that can be bro­ken down into chunks that work inde­pen­dently to cre­ate design com­po­nents that can them­selves be reused inde­pen­dently. This might mean sep­a­rat­ing your style into mul­ti­ple sheets, such as layout.css, type.css, and color.css. Or it might mean cre­at­ing a col­lec­tion of uni­ver­sal CSS classes for form lay­out that you can apply to any form on your web­site, rather than have to style each form indi­vid­u­ally. CMS’, frame­works, lay­out grids and other tools all help you cre­ate more mod­u­lar Web pages.

Mod­u­lar CSS offers these ben­e­fits (depend­ing on which tech­niques and tools you use):

  • Smaller file sizes
    When all of the con­tent across your web­site is styled with only a hand­ful of CSS classes, rather than an array of CSS IDs that only work on par­tic­u­lar pieces of con­tent on par­tic­u­lar pages, your style sheets will have many fewer redun­dant lines of code.
  • Reduced devel­op­ment time
    Using frame­works, stan­dard classes and other mod­u­lar CSS tools keeps you from hav­ing to re-​​invent the wheel every time you start a new web­site. By using your own or other devel­op­ers’ tried and true CSS classes, you spend less time test­ing and tweak­ing in dif­fer­ent browsers.
  • Reduced main­te­nance time
    When your style sheets include broad, reusable classes that work any­where on your web­site, you don’t have to come up with new styles when you add new con­tent. Also, when your CSS is lean and well orga­nized, you spend less time track­ing down prob­lems in your style sheets when browser bugs pop up.
  • Eas­ier main­te­nance for oth­ers
    In addi­tion to mak­ing main­te­nance less time-​​consuming for you, well-​​organized CSS and smartly named classes also make main­te­nance eas­ier for devel­op­ers who weren’t involved in the ini­tial devel­op­ment of the style sheets. They’ll be able to find what they need and use it more eas­ily. CMS’ and frame­works also allow peo­ple who are not as famil­iar with your web­site to update it eas­ily, with­out screw­ing any­thing up.
  • More design flex­i­bil­ity
    Frame­works and lay­out grids make it easy, for instance, to switch between dif­fer­ent types of lay­out on dif­fer­ent pages or to plug in dif­fer­ent types of con­tent on a sin­gle page.
  • More con­sis­tent design
    By reusing the same classes and avoid­ing location-​​specific styling, you ensure that all ele­ments of the same type look the same through­out the web­site. CMS’ and frame­works pro­vide even more insur­ance against design inconsistency.

Learn more about mod­u­lar CSS techniques:

Effi­cient

Mod­ern CSS-​​based web­sites should be effi­cient in two ways:

  • Effi­cient for you to develop,
  • Effi­cient for the server and browser to dis­play to users.

As Web devel­op­ers, we can all agree that effi­ciency on the devel­op­ment side is a good thing. If you can save time while still pro­duc­ing high-​​quality work, then why wouldn’t you adopt more effi­cient CSS devel­op­ment prac­tices? But cre­at­ing pages that per­form effi­ciently for users is some­times not given enough atten­tion. Even though con­nec­tion speeds are get­ting faster and faster, page load times are still very impor­tant to users. In fact, as con­nec­tion speeds increase, users might expect all pages to load very quickly, so mak­ing sure your web­site can keep up is impor­tant. Shav­ing just a cou­ple of sec­onds off the load­ing time can make a big difference.

We’ve already dis­cussed how mod­u­lar CSS reduces devel­op­ment and main­te­nance time and makes your work­flow a lot faster and more effi­cient. A myr­iad of tools are out there to help you write CSS quickly, which we’ll cover in part 2 of this arti­cle. You can also stream­line your CSS devel­op­ment process by using many of the new effects offered by CSS 3, which cut down on your time spent cre­at­ing graph­ics and cod­ing usabil­ity enhancements.

Some CSS 3 tech­niques also improve per­for­mance and speed. For instance, tra­di­tional rounded-​​corner tech­niques require mul­ti­ple images and DIVs for just one box. Using CSS 3 to cre­ate rounded cor­ners requires no images, thus reduc­ing the num­ber of HTTP calls to the server and mak­ing the page load faster. No images also reduces the num­ber of bytes the user has to down­load and speeds up page load­ing. CSS 3 rounded-​​corners also do not require mul­ti­ple nested DIVs, which reduces page file size and speeds up page load­ing again. Sim­ply switch­ing to CSS 3 for rounded cor­ners can give your web­site a tremen­dous per­for­mance boost, espe­cially if you have many boxes with rounded cor­ners on each page.

Writ­ing clean CSS that takes advan­tage of short­hand prop­er­ties, grouped selec­tors and other effi­cient syn­tax is of course just as impor­tant as ever for improv­ing per­for­mance. Many of the more advanced tricks for mak­ing CSS-​​based pages load faster are also not new but are increas­ing in usage and impor­tance. For instance, the CSS Sprites tech­nique, whereby a sin­gle file holds many small images that are each revealed using the CSS background-position prop­erty, was first described by Dave Shea in 2004 but has been improved and added to a great deal since then. Many large enter­prise web­sites now rely heav­ily on the tech­nique to min­i­mize HTTP requests. And it can improve effi­ciency for those of us work­ing on smaller web­sites, too. CSS com­pres­sion tech­niques are also increas­ingly com­mon, and many auto­mated tools make com­press­ing and opti­miz­ing your CSS a breeze, as you’ll also learn in part 2 of this article.

Learn more about CSS efficiency:

Rich Typog­ra­phy

Rich typog­ra­phy may seem out of place with the four con­cepts we have just cov­ered. But we’re not talk­ing about any par­tic­u­lar style of typog­ra­phy or fonts, but rather the broader con­cept of cre­at­ing read­able yet unique-​​looking text by apply­ing tried and true typo­graphic prin­ci­ples using the newest tech­nolo­gies. Typog­ra­phy is one of the most rapidly evolv­ing areas of Web design right now. And boy, does it need to evolve! While Web design­ers have had few lim­its on what they could do graph­i­cally with their designs, their lim­its with typog­ra­phy have been glar­ing and frustrating.

Until recently, Web design­ers were lim­ited to work­ing with the fonts on their end users’ machines. Image replace­ment tricks and clever tech­nolo­gies such as sIFR have opened new pos­si­bil­i­ties in the past few years, but none of these is ter­ri­bly easy to work with. In the past year, we’ve finally made great strides in what is pos­si­ble for type on the Web because of the grow­ing sup­port for CSS 3’s @font-face prop­erty, as well as new easy-​​to-​​use tech­nolo­gies and ser­vices like Cufón and Type­kit.

The @font-face rule allows you to link to a font on your server, called a “Web font,” just as you link to images. So you are no longer lim­ited to work­ing with the fonts that most peo­ple have installed on their machines. You can now take advan­tage of the beau­ti­ful, unique fonts that you have been dying to use.

@font-face in action: Tee​han​lax​.com

Screenshot

Craig­mod

Screenshot

Niceweb­type

Screenshot

The three screen­shots above are all exam­ples of what @font-face can do.

The main prob­lem with @font-face, aside from the ever-​​present issue of browser com­pat­i­bil­ity, is that most font licenses—even those of free fonts—do not allow you to serve the fonts over the Web. That’s where @font-face ser­vices such as Type­kit, Font­deck and Kernest are step­ping in. They work with type foundries to license select fonts for Web design on a “rental” basis. These subscription-​​based ser­vices let you rent fonts for your web­site, giv­ing you a much wider range of fonts to work with, while avoid­ing licens­ing issues.

Screenshot
For A Beau­ti­ful Web uses the Type­kit font embed­ding ser­vice for the web­site name, intro­duc­tory text and headings.

Screenshot
Ruler of the Inter­webs uses the Kernest font embed­ding ser­vice for the web­site name and headings.

We still have a long way to go, but the new pos­si­bil­i­ties make typog­ra­phy more impor­tant to Web design than ever before. To make your design truly stand out, use these mod­ern typo­graphic tech­niques, which we’ll cover in even greater detail in Part 2.

See these resources on cur­rent CSS typog­ra­phy techniques:

Sum­mary

We’ve looked at five char­ac­ter­is­tics of mod­ern CSS websites:

  • Pro­gres­sively enhanced,
  • Adap­tive to diverse users,
  • Mod­u­lar,
  • Effi­cient,
  • Typo­graph­i­cally rich.

In part 2 of this arti­cle, com­ing soon, we’ll go over the tech­niques and tools that will help you imple­ment these impor­tant char­ac­ter­is­tics on your CSS-​​based Web pages.

About the author

Zoe Mick­ley Gillen­wa­ter is a free­lance Web designer spe­cial­iz­ing in CSS and acces­si­bil­ity. She is the author of the book Flex­i­ble Web Design: Cre­at­ing Liq­uid and Elas­tic Lay­outs with CSS, plus a whole bunch of arti­cles. Find out more about her on her blog and on Twit­ter.

(al)


© Zoe Mick­ley Gillen­wa­ter for Smash­ing Mag­a­zine, 2009. |
Perma­link |
43 com­ments |
Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Magazine

Post tags:

Super-​​Clean and Minimal Web Designs: 70+ Stunning Examples and Resources

Monday, October 26th, 2009

The web indus­try nowa­days is very pro­duc­tive. Dur­ing these years there have been many trends fol­lowed and every day the design­ers exper­i­ment new tech­niques cre­at­ing new ten­den­cies in the art of mak­ing website.

Recently is evi­dent the neces­sity of a direct com­mu­ni­ca­tion with cus­tomers and a web­site is the first place where a com­pany can make know their cool stuff and ser­vices. A well-​​designed web­site is impor­tant for the growth of a busi­ness and often to cre­ate a “fresh” and clear image for a com­pany (or a prod­uct, or a free­lancer) we need the help of the art of sim­plic­ity. For these rea­sons a min­i­mal and super-​​clean lay­out can be the per­fect solu­tion for an attrac­tive website.

In this post, after a lit­tle overview, you’ll see some of the best exam­ples of min­i­mal­ism in mod­ern web design


The more time and effort you ded­i­cate for a usable, user friendly design and hit­ting your objec­tives, the higher are your chances for get­ting bet­ter results in the end of the month.

You may be inter­ested in the fol­low­ing design inspi­ra­tion related arti­cles as well.

Please feel free to join us and you are always wel­come to share your thoughts even if you have more ref­er­ence links related to design inspi­ra­tion that our read­ers may like.

Don’t for­get to Subscribe to our RSS-feed sub­scribe to our RSS-​​feed and Follow us on Twitter fol­low us on Twit­ter — for recent updates.


A Short Overview

Build­ing a super-​​clean web­site that works is not an easy oper­a­tion. The web designer should cre­ate an impres­sive, har­mo­nious, design using only basic elements.

Con­trast

Con­trast is the value dif­fer­ence between the col­ors on your design and it is import in any web design work, but when we talk about min­i­mal web­site a good con­trast is not enough. We need more con­trast, we need the per­fect bal­ance between back­ground color and text color.

Minimal Websites

Minimal Websites

Minimal Websites

Typog­ra­phy

It has been proved. An oppor­tune use of typog­ra­phy is essen­tial for a good web design work. In some cases, spe­cially when text has a notable rel­e­vance, it is the most impor­tant design element.

For clean and min­i­mal web­sites the right choose of the typog­ra­phy, that means a good fonts, appro­pri­ate size, cor­rect hier­ar­chy (title, sub-​​header, body text) and a thought­ful use of the spaces, is absolutely indispensable.

Minimal Websites

Minimal Websites

Minimal Websites

Pho­tos and Images

A good photo or a beau­ti­ful illus­tra­tion can make pre­cious a web­site, and some­times the images become the ful­crum of the entire design.

Minimal Websites

Minimal Websites

Minimal Websites

Har­mony of Layout

Design­ing “invis­i­ble lines”, plan­ning a proper arrange­ment of the con­tents on the page are two impor­tant things to do for build­ing a read­able and har­mo­nious web page.

Minimal Websites

Minimal Websites

Minimal Websites

Details make the difference

A detail can make the dif­fer­ence, of course. Often a tidy par­tic­u­lar is the key to make unique a website.

Minimal Websites

Minimal Websites

Minimal Websites


Show­case of Super-​​Clean and Min­i­mal Websites

01. Mau­ri­van Luiz

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

02. Brook­lyn Fare

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

03. Typo­Jun­gle

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

04. The Street­hearts

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

05. Buz­z­saw Studios

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

06. Detail. Design Studio

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

07. Sveinn Davíðs­son

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

08. Jamie Gre­gory

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

09. Design and brand­ing news

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

10. Cabedge​.com

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

11. Eleven.Six Design­Buero

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

12. The Typo­graphic Desk Reference

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

13. Steev Szafran­ski

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

14. Emptees

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

15. Meta­gramme

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

16. Berit Sømme

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

17. Design by silnt

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

18. Typo­graph­ica

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

19. Frieze Mag­a­zine

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

20. Poc­cuo

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

21. Jef​fCroft​.com

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

22. Nathan Carnes

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

23. Vesess

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

24. Con­cen­tric Studio

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

25. Dar­ing Fireball

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

26. Sto­ries & Novels

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

27. Black Estate Vineyard

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

28. The Offi­cial Square­space Blog

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

29. Pix­el­craft

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

30. I love Typog­ra­phy

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

31. Howdy!

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

32. Inde­pen­dent Studio

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

33. Indie Labs

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

34. The­ManInThe­Sea

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

35. Grow Inter­ac­tive

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

36. Clear­left Ltd.

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

37. I Wear Your Shirt

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

38. Geek­s­Phone

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

39. Lovely Day

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

40. Cre­ative Online Media

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link




41. Find­Me­ByIP

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

42. Capi­tol Circle

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

43. Joe​-Mac​Don​ald​.co​.uk

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

44. Pix​el​manya​.com

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

45. Lemon Oak

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

46. The Port­fo­lio of Sebas­t­ian Jaramillo T

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

47. Grepit

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

48. Kyle steed

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

49. Brian Hoff

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

50. DJ Johny Favourite

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

51. Adlu­cent

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

52. Meinl Per­cus­sion

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

53. Kim Burgess

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

54. Igna­cio Ricci

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

55. Ker­plunc Web Devel­op­ment and Design

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

56. Jerome Gravel-​​Niquet

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

57. The Big­ger Design, Inc.

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

58. Ost­mod­ern

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

59. Lonely Tweet

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

60. Design​ingTh​e​News​.com

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

61. David Arias

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

62. All­top

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

63. Clagnut is Richard Rutter

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

64. David Airey

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

65. Finch

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

66. Jason Santa Maria

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

67. Jon Phillips

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

68. The Net­set­ter

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

69. Aiga New York

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

70. David Arias

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link

71. Car­son­i­fied

instantShift - Showcase of Super-Clean and Minimal Websites

Offi­cial Link


Free Resources – High Qual­ity Free (X)HTML/CSS Min­i­mal Design Templates

01. T-​​20

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

02. O’No! Typog­ra­phy

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

03. World­lines

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

04. Fresh Restau­rant

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

05. Jun­gle­land 1.0

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

06. Sin­dromK

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

07. Colourise 1.0

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

08. Luvbold

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

09. Extreme Geor­gia

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

10. Fresh­Me­dia 1.0

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

11. Typo­graphic Times

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

12. Fresh­Pick 1.0

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

13. JavaScript Tricks

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

14. Exper­i­men­tal

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

15. Mini­Con

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

16. Keep It Sim­ple 1.0

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

17. Typo Today

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

18. Inverted Head­line

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

19. Gree­nie Theme

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

20. Blue Inc

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load

21. Safe As Houses

instantShift: Free (X)HTML/CSS Minimal Design Templates

Live Demo Down­load


Free Resources – High Qual­ity Free Word­Press Min­i­mal Design Themes

01. Com­po­si­tio

instantShift: Free WordPress Minimal Design Themes

Fea­tures Live Demo Down­load

02. Imag­i­na­tion

instantShift: Free WordPress Minimal Design Themes

Fea­tures Live Demo Down­load

03. Evi­dens

instantShift: Free WordPress Minimal Design Themes

Fea­tures Live Demo Down­load

04. Keep it Simple

instantShift: Free WordPress Minimal Design Themes

Fea­tures Live Demo Down­load

05. Irre­sistible

instantShift: Free WordPress Minimal Design Themes

Fea­tures Live Demo Down­load

06. FreeStyle

instantShift: Free WordPress Minimal Design Themes

Fea­tures Live Demo Down­load

07. Sharp­fo­lio

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

08. Cry­Book

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

09. Blog Theme

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

10. Fire­bug

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

11. State­ment

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

12. Sim­ply Ornate

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

13. Jynxed Theme

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

14. Elite

instantShift: Free WordPress Minimal Design Themes


Live Demo Down­load

15. Ele­ments of SEO

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

16. Lorem Ipsum

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

17. Port­fo­lio

instantShift: Free WordPress Minimal Design Themes


Fea­tures Live Demo Down­load

18. Port­fo­lio Press

instantShift: 140+ Brilliant Free WordPress Themes Around


Fea­tures Live Demo Down­load


Find Some­thing Missing?

While com­pil­ing this list, it’s always a pos­si­bil­ity that we missed some other great min­i­mal and sim­ple designs. Feel free to share it with us.

Brand = User Experience: The Interface of a Cheeseburger

Saturday, October 24th, 2009

  

In the first part of a series on the UX = Brand, the adven­ture of a web designer starts in a McDonald’s, where he dis­cov­ers that there is a worm hole between the world of Brand­ing and User Expe­ri­ence Design. Years later he learns that it is the Inter­face that con­nects both worlds. This is the first part in a series.

There he goes, the web designer, step­ping up to the counter of an empty McDonald’s at 3 o’clock in the morn­ing. He is scan­ning the over­head menu, putting a cheese­burger in his men­tal shop­ping bas­ket. “Cheezubahga, one­gaishi­masu,” we hear him say, “with an iced tea.”

Wait­ing for his order, he exam­ines the wire­frame of the dis­play on the cash reg­is­ter, the mechan­i­cal logic of the deep fat fry­ers, the input/​output logic of the ice cream dis­penser. Com­ing late from work, with his mind still in design mode, he starts trac­ing the restaurant’s inter­ac­tion model, draw­ing arrows from the entrance to the counter to the tables to the trash cans; see­ing how the conveyor-​​belt kitchen, the trays with the paper lin­ers, the bolted down seats and the meals com­prise a sin­gle, com­plete cus­tomer inter­face. “They must have run usabil­ity tests,” he thinks, tak­ing his tray to the table.

Hun­gry for Food = Hun­gry for Words

When we are hun­gry for food, we fol­low sim­i­lar pat­terns as when we are hun­gry for infor­ma­tion. Sim­i­lar, infan­tile pat­terns. At both times, we fall into a mode of dull impa­tient demand. We want every­thing imme­di­ately with as lit­tle inter­ac­tion as pos­si­ble. We want exactly what we expect in the way we are used to get it. When hun­gry, the last thing we fancy is think­ing or mak­ing dif­fi­cult deci­sions. Because, well, that’s how our body works. And that’s why after a hard day of work we often sleep­walk to McDonald’s.

When we are hun­gry for knowl­edge, we inevitably become men­tally pas­sive and use all our ener­gies to receive infor­ma­tion. Because that’s how our brain works. And that’s why we blindly return to Google search when look­ing for data.

McDonald’s = Google

McDonald’s is designed for you to switch off your brain as soon as you enter the door. Buy­ing and con­sum­ing a Cheese­burger is an auto­mated rou­tine — sim­ple and mind­less, like tying shoelaces or rid­ing a bicy­cle. You don’t need to ana­lyze, guess, eval­u­ate or make dif­fi­cult deci­sions because McDonald’s is built in a way that min­i­mizes con­scious action. Once learned, the tran­si­tions between each step of the order­ing process are auto­matic and seam­less. More­over, in any of its fran­chises any­where in the world, McDonald’s pro­vides one con­sis­tent user expe­ri­ence. Once learned, order­ing, buy­ing and eat­ing becomes an easy rou­tine. It’s just like Google: blunt, focused and clear.


Both McDon­alds and Google have a lot in com­mon: both are designed for you to switch off your brain as soon as you enter the “door”.

McDonald’s was dri­ving “user cen­tred design” to the extreme before inter­ac­tion design­ers even thought of the notion. From its logo to its tables, from its ham­burg­ers to its trash cans, it’s all designed to be prac­ti­cal and use­ful rather than aes­thet­i­cally pleasing.

This func­tional approach is applied all the way down to the cheese­burger. Stan­dard­ized in shape, taste, and con­sis­tency, it has an iden­tity that is clearly dis­tinct from that of the sand­wich. There’s no need for a knife, fork or spoon, plate or pair of chop­sticks. In fact, it has a sim­ple hand-​​to-​​mouth inter­ac­tion model not unlike that of baby to breast.

Fast Food Epiphany

The look, feel and taste of McDonald’s food is as branded as its logo. The design of the cheese­burger is a core com­po­nent of McDonald’s cor­po­rate design, just like Ronald McDonald’s and the ketchup and mus­tard col­ors of its pack­ag­ing. Its inter­face is its brand; its brand is its inter­face. But so what? Of course, every­thing at McDonald’s is designed and stan­dard­ized. Of course, every­thing is cal­cu­lated and con­trolled in a huge global franchise.

My epiphany that night was not that McDonald’s suc­cess is based on cold cal­cu­la­tion. It was the real­iza­tion that McDonald’s appar­ent lack of culi­nary and aes­thetic taste is the result of ‘cold’ user inter­ac­tion design. McDonald’s design is as user-​​focused as a high-​​traffic web­site. It’s designed so well that it makes us blind like suck­lings. Just like Google’s search inter­face, its beauty is in the inter­ac­tive expe­ri­ence and not in the object.

A Worm Hole between Brand­ing and UX

In my expe­ri­ence old school bran­ders and inter­ac­tion design­ers fun­da­men­tally mis­un­der­stood and hated each other. They lived in par­al­lel worlds. In one world the designer con­trolled every­thing, in the other the user was in charge. What con­fused me was that the longer I stud­ied McDonald’s frame­set, the less I was able to tell whether I was look­ing at a brand or at an inter­face. Is this brand­ing or is it user expe­ri­ence design?

I had found what Astronomers call a ‘worm hole.’ A short­cut through space and time that acts like a magic ele­va­tor between dif­fer­ent real­i­ties. McDonald’s seemed to lay at a crit­i­cal point: the grav­i­ta­tional cen­ter of brand­ing, where every­thing slants into a fun­nel that leads to a par­al­lel world of user expe­ri­ence design. And back again. Iron­i­cally, worm holes have two so called mouths that are con­nected with a throat:

After dis­cov­er­ing that this fas­ci­nat­ing inde­ter­mi­nacy between brand and user expe­ri­ence applied to most of the recently suc­cess­ful brands — be it the iPhone, the Wii or Star Bucks — I decided to inves­ti­gate it by think­ing about it and writ­ing about it.

Learn­ing from Babies

Just by watch­ing my baby grow and inter­act with its world, I learned more about inter­faces than I could have pos­si­bly imag­ined. Most of what babies do is learn­ing to inter­face with their sur­round­ing. Observ­ing the baby drink­ing its milk, I noticed that the inter­fac­ing does not hap­pen on the nip­ple. It hap­pens more gen­er­ally between the mother and the child. In other words: The nip­ple is not an inter­face; it’s just one touch point. The inter­face is in the whole expe­ri­ence a child makes dur­ing breast feed­ing. The inter­face is the way they con­nect. And this expe­ri­ence defines the brand “Mama” in the beginning.

By study­ing breast feed­ing (the blue­print of user inter­ac­tion) live, I was more and more cer­tain that the cor­rect equa­tion was Brand = User Expe­ri­ence. Trans­lated back into the­ory: The Inter­face was in the equals sign, not on the other side of the equa­tion. The inter­face is what con­nects the worlds of Brand­ing and User Expe­ri­ence Design. It’s the tun­nel. The ele­va­tor. The worm­hole. The throat.

Make sure you don’t miss the sec­ond part of the series on Brand = UX. In the next part we’ll look at the tricky ques­tion “What is an Inter­face? And can it be intuitive?”

Would you like to see the next parts of this series on SM?

Hope­fully you’ll find this new for­mat inspi­ra­tional and inter­est­ing. What do you think? Please let us know and com­ment on this arti­cle! Your feed­back is very valu­able for us and it helps us to meet your expec­ta­tions. Thank you.

About the author

Oliver Reichen­stein is the founder and CEO of iA, a user expe­ri­ence design agency with offices in Tokyo and Zurich.


© Oliver Reichen­stein for Smash­ing Mag­a­zine, 2009. |
Perma­link |
98 com­ments |
Add to del​.icio​.us | Digg this | Stum­ble on Stum­ble­Upon! | Tweet it! | Sub­mit to Red­dit | Forum Smash­ing Magazine

Post tags: ,

80+ Free Exclusive PSD Logos

Saturday, October 24th, 2009

Once Again, we’ve got some­thing spe­cial for our com­mu­nity. Inst­ant­Shift again came up with cool free­bies give­away as promised. This is our way of say­ing thanks to our read­ers for being part of the inst­ant­Shift com­mu­nity and help­ing us make it to where we are right now. We never wait for spe­cial occa­sions to announce good free­bies. We at Inst­ant­Shift love to give away things reg­u­larly, all year long. This time I’m pleased to announce our lat­est free­bies give­away where you all can down­load 48 Pro­fes­sional PSD Logos Designed by Sha​boopie​.com to Inst­ant­Shift readers.

Below you’ll find a full pre­view of all the logos included in this set and the down­load link appears at the bot­tom. Since no logo is per­fect, they would greatly appre­ci­ate your feed­back so that they can improve their designs. Enjoy!


Don’t for­get to Subscribe to our RSS-feed sub­scribe to our RSS-​​feed and Follow us on Twitter fol­low us on Twit­ter — for recent updates.

About

One of the most impor­tant aspects of iden­tity is a logo. A logo can say every­thing a viewer needs to know about a com­pany or a per­sonal web­site. One sim­ple image can engrave an unfor­get­table mem­ory into a poten­tial fol­lower or a cus­tomer. How­ever, logo design is not an easy task. Even the sim­plest of logos often take a lot of time and thought and may cost thou­sands of dollars.

In today’s world just about every­one has a web­site and every­one needs some sort of iden­tity to make a pres­ence on the web. Sup­pose you are a blog­ger who has many inter­est­ing ideas to share but you have no image to achieve a pres­ence on the web. You don’t want to spend a lot of money on a logo but you are cer­tain you need some­thing to set you apart. This is the idea behind Sha­boopie logos. They under­stand that there is a great need for cus­tomiz­able logos but very few avail­able resources that come at no cost at all. They hope their free logos cre­ate an iden­tity for your online pres­ence or at least inspire you to pur­sue your own designs. Since no logo is per­fect, they would greatly appre­ci­ate your feed­back so that they can improve their designs.

Agree­ments

 

License Type: Cre­ative Com­mons License

By down­load­ing this logos, under the terms of the Cre­ative Com­mons License, it is vital that you under­stood all the terms and con­di­tions where you are free to share and edit them for non­com­mer­cial purpose.

Pre­view and Download

 

Fur­ther Resources!

Want to share something?

While brows­ing these free­bies, it’s always a pos­si­bil­ity that you also want to share your great work freely to our read­ers. Feel free to con­tact us.

Don’t for­get to Subscribe to our RSS-feed sub­scribe to our RSS-​​feed and Follow us on Twitter fol­low us on Twit­ter — for more free­bies and recent updates.