5 Reasons You Need a Design Book Collection

While the design and art industries have quickly skewed towards the digital realms in the last couple of decades, that doesn’t mean printed work is down for the count. On the contrary, there’s just something about feeling a page in your hands and seeing a clear un-pixelated image or smelling the printer’s inks that will always be better than having a tablet or computer. No matter what happens with tech in the future, a real-life book will always have a place in the world.

Design books or art books or coffee table books — as some might refer to them — are especially fantastic. Here are a few reasons why you should start a book collection now!

1) High Production Values

Publishers of design books are notorious for their attention to detail and extremely high production values. Everything from the binding, the paper, the print finishes, and the layouts are all carefully and methodically put together to produce an extremely satisfying work of art.

Of course, sometimes these beautifully produced books come with a matching price tag like this $100, 16-pound Helmut Newton photobook:

image_02_helmut_newton

but you often get what you pay for.

Also, having access to such beautiful materials is also a fantastic way to appreciate and learn about print design.

2) A “New” Way of Experiencing Your Favorite Designers’ and Artists’ Work

The internet is great. It has enabled us to connect, learn, communicate, and express ourselves like never before — all through our computer screens.

For a lot of us today, the internet is the only way we’ve been able to experience the work of our favorite artists and designers. Having access to art books or coffee table books (while based on more traditional media), however, offers a “new” way of experiencing the work you’ve admired through the internet for so long.

If you’ve never seen a designer’s work in anything but a computer screen, you might want to try getting one of their books.

I’ve never seen a real Ansel Adams photo even though I consider him to be one of the reason I wanted to be a photographer. This book might just be the next best thing.

image_01_ansel_adams

3) Books Last

If you take care of them, your books can last a very, very long time. Digital resources, on the other hand, can get corrupted or they can fail for no reason whatsoever. This means that work of designers and artists that we all enjoy online on our computers are effectively impermanent. They’re only as good as the hard drives they’re stored on.

Printed works, on the other hand, allow you to appreciate and marvel at the work of designers and artists you admire, indefinitely.

Bought in 2008, holds up extremely well.

image_03_street_sketchbook

4) Inspiration at Your Fingertips

We can do hours and hours of research online and sometimes still come up with no new ideas. However, taking a little bit of time to look at a few books in the office gives us a sudden burst of energy.

There’s just something very stimulating about seeing works of art printed on a nicely done book. Reading a passage, feeling the paper, smelling the inks, and flipping through the pages of a book is an experience you just can’t get anywhere else. After a little while with your design books, your mind starts to race and suddenly you’ve got new ideas brewing in your head.

I bought this book years ago and I still flip through it today.

image_04_logo

5) They’re Really fun.

Finally, design books are just fun. They’re fun to have. They’re fun to read; to look at; to talk about. And they often explore new ideas in very concrete and meaningful ways that just can’t be done on any other medium.

The truth is, this article is somewhat of a love letter to the printed word and the printed image. Nowadays, anyone with access to the internet has access to a very large collection of knowledge and  data. With enough of the right keywords, one can gain access to a whole lot of stuff. There’s definitely value in that.

However, a book is a much more grounded object. It exists physically and can be felt and experienced as it is, on its own. There’s a sense of finality to a book. Once it is published, it is done. There are no search engine algorithms; no updates over wifi; no loading times; no revisions. It takes commitment and conviction to publish a book — typos and all. And that really is one of the best things about them.

Tell us about your favorite design and art coffee table books in the comments below.

7 Free Books That Will Help You Become More Productive

Do you want to produce more in less time? These free ebooks contain a wealth of insights, tips, and strategies for achieving high levels of productivity.

Book cover of The Productivity Manifesto

The Productivity Manifesto

By . 24 pages.

In this short ebook, Nathan Barry — a designer, book author, entrepreneur, and Six Revisions contributor — discusses the productivity habits and techniques that have enabled him to focus and create "on another level".

Book cover of Focus

Focus

By . 121 pages.

From the book’s description: "Focus is about finding simplicity in this Age of Distraction. It’s about finding the focus you need to create, to work on what’s important, to reflect, to find peace."

Book cover of Mind Hacking

Mind Hacking

By . 112 pages.

Mind Hacking uses analogies and concepts from computer science to help us analyze and enhance our way of thinking.

Book cover of Productivity: How to Get Your S*!% Done

Productivity: How to Get Your S*!% Done

By . 47 pages.

This free ebook is a compilation of short essays about being productive. The essays are written by bloggers.

Preview of GTD For Hackers

GTD For Hackers

By . 18 pages.

Getting Things Done (GTD for short) by David Allen is a bestselling book about a personal productivity system developed by the author. GTD For Hackers, an online book by Lars Wirzenius, a self-labeled "computer geek", is a guide on how the GTD system works.

Book cover of Getting Real

Getting Real

By . 92 pages.

This free ebook discusses a philosophy for building web apps more effectively. However, I believe that the insights, concepts, and techniques found within this book can be applied to things beyond web app development. For me, Getting Real is a methodology for working productively. It’s about focusing on the right tasks and priorities. It’s about being aware of the things that waste our time so that we can improve our way of working.

Book cover of The Little Book of Contentment

The Little Book of Contentment

By . 112 pages.

From the book’s description: The Little Book of Contentment is "A guide to becoming happy with life & who you are, while getting things done."

50 Beautiful One-Page Websites for Inspiration

Here are some excellent one-page / single-page websites to check out. There are a variety of website types included in this showcase — online portfolios, restaurants, mobile apps, and more. I hope looking at these one-page sites will give you ideas and inspiration for your web design projects.

One-page website: Heart KidsHeart Kids

One-page website: Nigel Evan DennisNigel Evan Dennis

One-page website: VibrantVibrant

Café Frida

One-page website: Flavien GuilbaudFlavien Guilbaud

One-page website: Designer TrekDesigner Trek

One-page website: Jonathan David PostJonathan David Post

One-page website: The Hen HouseThe Hen House

One-page website: The WndrlndThe Wndrlnd

One-page website: Pauline OsmontPauline Osmont

One-page website: DangerousRobotDangerousRobot

One-page website: AirnautsAirnauts

One-page website: We Ain't PlasticWe Ain’t Plastic

One-page website: OxenOxen

One-page website: Adrian CabreroAdrian Cabrero

One-page website: Delhi TimelineDelhi Timeline

Urban Walks

One-page website: Bad AssemblyBad Assembly

One-page website: McWhopperMcWhopper

One-page website: Bright New DayBright New Day

One-page website: You Gotta Love Frontend ConferenceYou Gotta Love Frontend Conference

One-page website: MusicMusic

One-page website: GinventoryGinventory

One-page website: AMORIZAMORIZ

One-page website: Nua BikesNua Bikes

One-page website: BlocklevelBlocklevel

One-page website: Hound StudioHound Studio

One-page website: Jules Bassoleil PortfolioJules Bassoleil Portfolio

One-page website: creanetcreanet

One-page website: Le Tour de France - 100 ans de TourLe Tour de France – 100 ans de Tour

One-page website: Design EmbracedDesign Embraced

One-page website: KochaKocha

One-page website: Jacks BarJacks Bar

One-page website: FlatGuitarsFlatGuitars

One-page website: The TwelveThe Twelve

One-page website: Andrew McCarthyAndrew McCarthy

One-page website: Terminal WeddingTerminal Wedding

One-page website: ArcArc

One-page website: Guilherme PangnottaGuilherme Pangnotta

One-page website: Laura BaffariLaura Baffari

One-page website: Inception ExplainedInception Explained

One-page website: Axel AubertAxel Aubert

One-page website: EskahEskah

One-page website: Pen & QuillPen & Quill

One-page website: The Mohawk ShowThe Mohawk Show

One-page website: Michael SuenMichael Suen

One-page website: ÉléphantÉléphant

One-page website: MindworksMindworks

One-page website: BoldBold

One-page website: Names for ChangeNames for Change

Read Next

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter.

Circular Images with CSS

In this tutorial, we’ll go over some CSS techniques for rendering circular <img> elements. The main CSS property responsible for the effect is border-radius.

Though it’s quite simple to apply the effect to square images, rectangular images will require a little bit more extra work.

Examples of CSS circular/roiunded images

View Demo

Download Source

Square Images

An img element that’s perfectly square only needs one line of CSS. This technique works best on square images.

HTML

<img class="circular--square" src="woman.png" />

CSS

.circular--square {
  border-radius: 50%;
}

The style rule above is the shorthand for:

.circular--square {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}

By setting all the border-radius properties to 50% of the width/height of the square img element, we end up shaping the img element into a circle:

How to create circular img elements from square-shaped photos

Rectangular Images

Rectangular images are a bit trickier.

To render a circle, the image must start out as a square.

To work around the problem, we can wrap the img element in a square div element. We then “crop out” the parts of the img element that go beyond the square wrapper div. We can carry this out by setting the wrapper div‘s overflow property to hidden.

So that the subject of the photo is less likely to get cropped out, we also have to treat landscape photos (which are horizontally-oriented rectangles) differently from portrait photos (which are vertically-oriented rectangles).

Landscape-oriented Images

HTML

<div class="circular--landscape">
  <img src="images/barack-obama.png" />
</div>

CSS

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

The width and height property values must be the same so that the wrapper div (.circular--landscape) renders as a square.

In addition, the width and height property values must be equal to or less than the height of the img. This makes sure the img element is able to occupy the wrapper div without being stretched out.

Generally, the subject of landscape photos will — but not always — be located around the center of the composition. To give us the best chance of not cropping out the photo’s subject, we can horizontally center the img element in the wrapper div by nudging the img element to the left to compensate for the left-biased cropping.

The amount we nudge the img element is equal to 25% of the width/height of the wrapper div. In this case, we will nudge the image 50px (25% of 200px is 50px) to the left. We can accomplish this by setting the margin-left property of the img element to a negative value:

margin-left: -50px;

How to create circular img elements from landscape photos

The assumption that the subject of the photo will be close to the center of the composition is not always going to be true. It’s best to keep this assumption in mind when you’re choosing (or editing) images for this technique.

Portrait-oriented Images

HTML

<div class="circular--portrait">
  <img src="images/woman-portrait.png" />
</div>

CSS

.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}

The assumption we’ll make for portrait-oriented images is that the subject of the photo is at the top-center of the composition. Again, this isn’t going to be the case in every single portrait photo.

Similar to landscape photos, the wrapper div of portrait-oriented img elements must have equal width and height property values so that the wrapper is a perfect square.

This time, the width/height property value must be equal or less than the width of the img element so that the image can cover the wrapper div without being stretched out.

For portrait-oriented images, we assign a height of auto and width of 100%. (We did the opposite for landscape-oriented images.)

We don’t need to move the img element, because our expectation is that the subject of the photo is at the top-center of the composition.

How to create circular img elements from portrait photos

Recap

This technique is best used on square img elements, with the subject located dead-center of the photo. But, we don’t live in a perfect world, so if needed, you can use a wrapper div for rectangular img elements.

The main CSS property responsible for the circular shape is the border-radius property. Setting the radius of the corners to 50% of the width/height results in a circle.

Related Content

Responsive Full Background Image Using CSS

How to Create CSS Ghost Buttons

Creating Responsive Images with CSS

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter.

20 Beautiful Examples of Modal Windows

Websites often use modal windows as call-to-action tools and for pointing out important information.

For example, the call-to-action in a modal window might ask the site visitor to subscribe to the site’s newsletter. A study by user experience research firm Nielsen Norman Group revealed that 90% of the study’s participants chose to receive updates from companies via an email newsletter, versus only 10% via Facebook. This might indicate that an email newsletter can be an effective way of developing customer relationships.

Let’s look at a few examples of well-designed modal windows. The following examples are mostly within the fashion industry because that’s the industry I’m currently working in.

Anatomy of a Well-Designed Modal Window

Seamless Design

It goes without saying that modal windows should be in tune with your site’s visual style. You don’t want modal windows to appear third-party-esque.

We follow this rule over at Mylo, a menswear mobile app that I have founded. The modal window that asks our website visitors for their email address is consistent with our brand’s visual attributes. In our case, a lot of white space, clear typography, and the copy all match up with the design guidelines of our brand.

MyloMylo

The modal window found at Jean Stories (a fashion site dedicated to denim) also stays consistent with the site’s overall visual style. Notice their consistent application of their brand’s color scheme and the incorporation of their logo within the modal window.

Jean STORIESJean STORIES

Clear Purpose

Modal windows should preferably have a single objective. The objective might be to let the visitor know of a site-wide discount or get him/her to sign up for the site’s newsletter.

A well-designed modal window should only request essential information. Overloading potential customers with form fields to fill out and boxes to check off is not wise because doing so might lead to inaction.

Ecommerce websites may want to consider offering an incentive in order to compel visitors to perform the desired action, such as a discount on goods in exchange for signing up to the site’s newsletter. Below are a few examples of modal windows that offer percentage-based discount incentives:

AYRAYR

FineryFinery

Misha NonooMisha Nonoo

M.PATMOSM.PATMOS

Content is King

Your modal window’s copy should embody your brand’s attitude, tone, and style.

You can also state a value proposition in the modal window. For example, DuJour magazine’s modal window states their newsletter’s value proposition to potential subscribers: "The luxe content you can’t find anywhere else."

DuJourDuJour

More Modal Window Examples

Below are a few more modal windows that follow the general guidelines mentioned above.

Steven AlanSteven Alan

BonobosBonobos

Stella McCartneyStella McCartney

The Prince Ink CompanyThe Prince Ink Company

Need Supply Co.Need Supply Co.

GreatsGreats

The Socialite FamilyThe Socialite Family

Thisispaper ShopThisispaper Shop

Volta FootwearVolta Footwear

Austin BeerworksAustin Beerworks

Atea OceanieAtea Oceanie

Victory JournalVictory Journal

Zurb UniversityZurb University

Summary

Modal windows can be used to ask your site visitors to perform an action (such as subscribing to your email newsletter) or for sharing an important message.

A good modal window will have:

  • a design that is consistent with your brand’s visual style
  • a clear objective
  • good content that reflects the attitude, tone, and style of your brand

Thanks to Faiz Tariq and Carolyn Buszynski, the co-authors of this article.

Related Content

Creating Focal Points in Your Web Design

Optimal Techniques for Strategically Displaying Web Forms

What White Space Can Do For You

The Art of Distinction in Web Design

Daniel Eckler is an entrepreneur based Toronto, Canada. His most recent startup is Mylo. Past ventures include Piccsy and EveryGuyed. He has a background in New Media Arts. Learn more about him by via his website, and join him on Twitter and Facebook.

Graphic designer at work. Color swatch samples.

25 Things Designers Have Said About Design

The quotes we chose for this collection are from some of the most respected designers and artists to have ever designed. We chose quotes that we feel best represents each designer. We hope their insightful words inspire you to be better designers and artists yourselves.

Saul Bass

I want everything we do to be beautiful. I don’t give a damn whether the client understands that that’s worth anything, or that the client thinks it’s worth anything, or whether it is worth anything. It’s worth it to me. It’s the way I want to live my life. I want to make beautiful things, even if nobody cares.

Some of Saul Bass’ work.

Stefan Sagmeister

Having guts always works out for me.

Best known for his work here. 

Massimo Vignelli

Good design is a matter of discipline. It starts by looking at the problem and collecting all the available information about it. If you understand the problem, you have the solution. It’s really more about logic than imagination.

Possibly Massimo’s most recognizable piece is this. He’s done much more.

David Carson

You have to utilize who you are in your work. Nobody else can do that: nobody else can pull from your background, from your parents, your upbringing, your whole life experience.

An example of David Carson’s work.

Charles Eames

To whom does design address itself: to the greatest number, to the specialist of an enlightened matter, to a privileged social class? Design addresses itself to the need.

Ray Eames

What works good is better than what looks good because what works good lasts.

One of Charles and Ray Eames’ most iconic designs is this (one of many iconic designs).

Alvin Lustig

The words graphic designer, architect, or industrial designer stick in my throat, giving me a sense of limitation, of specialization within the specialty, of a relationship to society and form itself that is unsatisfactory and incomplete. This inadequate set of terms to describe an active life reveals only partially the still undefined nature of the designer.

You may have seen his work.

Paul Rand

I haven’t changed my mind about modernism from the first day I ever did it… It means integrity; it means honesty; it means the absence of sentimentality and the absence of nostalgia; it means simplicity; it means clarity. That’s what modernism means to me.

One of the most influential designers of the last 100 years.

Jony Ive

Simplicity is not the absence of clutter, that’s a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a clutter-free product. That’s not simple.

You may have seen his work.

Marc Newson

People kind of tend to mystify design and architecture by suggesting you need to train.

His work here.

Dieter Rams

Design should not dominate things, should not dominate people. It should help people. That’s its role.

You may know these 10 principles.

Bob Gill

No matter how many times your amazing, absolutely brilliant work is rejected by the client, for whatever dopey, arbitrary reason, there is often another amazing, absolutely brilliant solution possible.

Sometimes it’s even better.

Learn more about Bob Gill work here.

Abram Games

Maximum meaning, minimum means.

His work.

Milton Glaser

The real issue is not talent as an independent element, but talent in relationship to will, desire, and persistence. Talent without these things vanishes and even modest talent with those characteristics grows.

We heart his work.

Paula Scher

Another thing they don’t teach you in design school is what you get paid for… Mostly, designers get paid to negotiate the difficult terrain of individual egos, expectations, tastes, and aspirations of various individuals in an organization or corporation, against business needs, and constraints of the marketplace… Getting a large, diverse group of people to agree on a single new methodology for all of their corporate communications means the designer has to be a strategist, psychiatrist, diplomat, showman, and even a Svengali. The complicated process isworth money. That’s what clients pay for.

More of Paula Scher here.

Herb Lubalin

Typography can be as exciting as illustration and photography. Sometimes you sacrifice legibility to increase impact.

Herb’s work.

Wolfgang Weingart

What’s the use of being legible, when nothing inspires you to take notice of it?

Learn more about Wolfgang Weingart.

Ivan Chermayeff

Sometimes there is simply no need to be clever or original.

More of Ivan’s work here.

Susan Kare

You can set out to make a painting, but you can’t set out to make a great painting,” she said. “If you look at that blank canvas and say, ‘Now I’m going to create a masterpiece’—that’s just foolhardy. You just have to make the best painting you can, and if you’re lucky, people will get the message.

You’ll know her work.

Jan Tischold

White space is to be regarded as an active element, not a passive background.

He influenced you whether you knew it or not.

Emil Ruder

They work now with computers for building buildings and books, but not ever with new ideas.

Learn more about Emil Ruder.

Philippe Starck

We have to replace beauty, which is a cultural concept with goodness, which is a humanist concept.

A truly forward thinking designer.

Josef Müller-Brockmann

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

Swiss design at its best.

Michael Bierut

Not everything is design. But design is about everything. So do yourself a favor: be ready for anything.

Learn about Michael Bierut.

Tibor Kalman

I am interested in imperfections, quirkiness, insanity, unpredictability. That’s what we really pay attention to anyway. We don’t talk about planes flying; we talk about them crashing.

A unique graphic designer.