Free users and lots of buzz? It’s no wonder everyone is working on one viral hack or another. But viral growth is not just a happy accident. Products are designed from the start to encourage viral growth. Those that go viral have the right combination of hooks designed into the user experience, a value proposition aligned with viral mechanics, and a use case that drives the cycle time of the invite/referral loop.

Looking for a primer on designing for viral growth? We hope this infographic is just what you’re looking for.

You should embed this infographic on your site – click to copy the embed code below.

All of it deserves a brief pause and a symbol of recognition. So at the end of each year, we always give out bonuses regardless of whether it ends up being a good or a bad one (yes, those happen sometimes). After all, working at DT is fast-paced and intense, so I strongly believe in rewarding our team for spending a year of their lives with us.

Of course, we strive to do things unconventionally, so we created the Betterment Bonus: a special year-end bonus program to reward our team, build our culture and inspire growth in the upcoming year. We’ve had great success with the program and I feel it’s time we share it and encourage other companies to try it out.

A culture of Betterment generates growth

To understand the purpose of this bonus, you first have to understand what Betterment is:

Betterment is our philosophy of making things better everyday to yield exponential results. It’s an ongoing process of incremental improvement that stacks over time. It can be used to tackle problems and create lasting solutions for any industry.

Betterment is key to our culture of growth. We intend to make something better everyday, whether it’s our design process, client projects, work environment, or education, etc. A culture of constant improvement results in consistent growth. So instead of saying “Just do it,” we say “Make it better.”

Why bonus?

Bonuses serve many purposes. Here are of our favorites:

• Show gratitude. I believe that regardless of our economy, working at DT is a choice, not a privilege. So I feel it’s important to thank each employee for their contributions.
• Reflect on accomplishments. It’s easy to focus only on what’s in front of you. It’s crucial, however, to also celebrate past accomplishments in order to gain energy and momentum for future growth. Take a moment and realize, “Holy shit, we actually did what we said we would!”
• Inspire camaraderie. We believe that we’re all in this together, so everyone gets an equal bonus. As a result, we get to share the joy and excitement of each person’s betterment experience together.

Experience is a better reward than money

We do our best to pay our team well so that they’re not depending on their year-end bonus to clear up debt from the holidays. This allows us to provide an experiential bonus as opposed to a boring monetary one. Think of it this way:

Distributing cash shows generosity, but making something unique possible (that was otherwise not possible), demonstrates value and is a true gift. They both cost the same, but an experience yields much greater results. An experience stays with you for the rest of your life as opposed to cash just passing hands.

In order for it to be a real bonus, we support each employee’s individuality and allow them to make their own choice, hence owning the bonus. We simply encourage each team member to do something for themselves that they would otherwise have never done.

Lastly, we want to be sure to put the spotlight on each individual in order to show just how they shine in their own unique way. This encourages each member’s greatness as well as the mutual respect from the team.

How it works

The Betterment Bonus displays our gratitude by enabling an individual experience that encourages both personal growth and a stronger cultural bond. Here’s the process of the Betterment Bonus:

1. Time and Money. You need to provide both time and money to develop an experience. We provide a floating day off and ample funding to support the Betterment project. Team members can always up the ante with their own funds and vacation days.
2. The Pitch. Each team member shares their idea for Betterment with their manager and with me personally. I do my best to be the devil on their shoulder and push for a more lavish and extreme experience. For instance, if you are staying in a hotel, we encourage you to get a suite. If you are learning to play an instrument, you must first buy the instrument!
3. Make it Better. This is the fun part. Usually the whole office knows when someone is about to endeavor on their experience. We stay in touch on Twitter/Facebook with words of encouragement.
4. Share your Story. Each team member presents the story of their experience to the staff with photos and videos, emphasizing how the experience has impacted their life.

Betterment Experiences from our team last year

We previewed a few Betterment experiences in a post early last year. Here’s a brief glance into some of the amazing experiences the DT team had:

Dan – Surfing the North Shore. For my betterment trip I went to the North Shore in Oahu, Hawaii. I’ve been a long time surfer, but never tackled the North Shore. It’s an intimidating place to surf due to the crowded waves, locals and reef. I think pushing yourself and getting out of your comfort zone is an important part of growing. 

Orville – Cycling. What happens if you combine sports and travel? You get two ways to definitely get out of your comfort zone, yet at the same time enriching your senses within a beautiful country. For my betterment I did an epic week-long cycling trip on the island of Majorca. On one day I did over 9,000 feet of climbing and rode about 80 miles. I’d like to thank my fellow cyclists who suffered along with me on that day; some from the team I signed up with and many others who were on the same team of PAIN. It’s amazing what like minded people can do together.

Jason – Racing. I got the idea of going track racing from Arnold, our resident car fanatic. Having grown up in the UK and moved around a lot before settling in San Diego, I’m still relatively new to driving (I got my license at the tender age of 26, an age that tends to make people recoil in shock) and car stuff has always been a bit of a second language to me. I recently bought a new car, and wanted to get more comfortable with it. What better way to do that than take it to its limits by throwing it around a racetrack at high speed? And how did I come out of the experience as a better person? I definitely look at my car and driving in general differently – I feel more in control behind the wheel, but also more respectful of how difficult it is to drive fast. Focus has always been something that I sometimes lose when things get hectic in my everyday life, so having this tangible experience to fall back on, that proves the benefit of intense focus on the task at hand has been truly invaluable.

John – Piano. My choice for my betterment bonus was to learn piano. I have never played before… unless you count chopsticks. I used my bonus to buy a digital piano, get some lessons and mainly teach myself through some adult education books to learn how to play piano. The impetus was to lower stress and just all around enjoy music again. This has been amazingly successful, and I have greatly enjoyed playing. It was also pretty awesome to see family and friends around me pick up and dust off their old instruments and start playing again too.

Create Your Own Betterment Bonus

Want to create your own Betterment Bonus program?  Here are a few suggestions:

If you are a team member

• Start sharing great life experiences from your weekend with the team
• Share this post with your fellow team members and get their ideas for a program within your company
• Share this post and your affinity towards experiences as a bonus with your manager

If you are a team manager or owner

• Think about your company values and philosophy and develop a program that will grow your culture
• Try a smaller version after a big win or strong quarter to test it out with your team
• Feel free to copy exactly what we do

I encourage you to comment below with ideas about your own Betterment Bonus or questions if you want more details about ours.

As a company we’re constantly challenged by this new reality. We’ve launched a handful of well-received products and could crank out the next one on our list, but we don’t believe that approach gives us the best chance to fulfill our mission. After all, it’s a big one: to define the standards for the future of interface design. We need your help to achieve it.

Introducing DT Labs

Creating an improvement of this magnitude requires the collective energy of all of us who give a DAMN about design. So we created DT Labs, the first platform we know of built specifically for experimental digital design apps. It’s purpose? To find signal among the noise of our own ideas and bring a spotlight to yours. DT Labs is designed to tap into your wisdom to help us identify and define those products that make the Web better.

DT Labs radically changes how we create and ship new products. Ideas are submitted on the platform where they are voted for and improved by smart, design-centric people like you. Let’s just call you design scientists. Based on your feedback, we take only the best ideas and transform them from a simple concept to a fully functioning web app. Think of it as a Kickstarter for digital design, where we put up the time and money to bring great ideas to life.

We Need Design Scientists Like You

As an early DT Labs member you’ll help set the tone for this innovation platform and the direction for future digital-telepathy products.

DT design scientist are able to:

• Submit design ideas you’d like to see become a reality
• Vote for the products digital-telepathy builds next
• Shape product concepts with your feedback
• Get early access to our latest product releases

The Time is Now

DT Labs itself is an experiment. We’ve released this early MVP to get your feedback on where Labs should go and how it can create the most value for you.  But we know one thing: Digital interaction design needs collaboration from passionate people who are willing to push existing standards to create new ones. As our world becomes dominated by screens at every turn, now is the perfect time to huddle up in the Lab and start pushing boundaries together. We invite you to become a design scientist with us and shape what comes next.

See you in the Lab.

The list below is by no means exhaustive; it is a small cache of some of our favorite quotations related to design. Breathe these in…

After starting with a proverbial bucket full of quotations, our list was filtered to these ten. A lot of greats words were left behind – What are some of your favorite design quotations?

At dt, we have it both ways. Our time is spent designing for clients we love working with and creating products we believe improve the web.

We’re hyper-motivated to be at our best, support the greatness in fellow team members and always be innovating as a company.

If that sounds like something you’re itching to be a part of, read the full position requirements and details here: http://bit.ly/dt-designer

If this opportunity isn’t the one for you, perhaps you know a designer who’s perfect. Please pass this on or share the position link above on your social network of choice.

How does Siri know that by ‘tomorrow’, John probably meant Tuesday, not Wednesday? Siri didn’t know it, but the interaction designers at Apple did. So how did they know we really mean 10am Tuesday and not, 10am Wednesday? Here are two scenarios sketching out what may have motivated this attention to detail:

1. A designer found himself in a similar situation when scheduling a reminder and felt that it was an issue that many people have probably encountered.
2. A user researcher studies the interaction of multiple users scheduling reminders through Siri and notices a recurring discrepancy between Siri’s definition of “tomorrow after 12am” and what users really meant to say when scheduling for “tomorrow after 12am”

“Take a walk in the user’s shoes” is a phrase that affords visualizing the very sequence of interactions the user might take. The clever time detail incorporated into Siri is commendable because it demonstrates that design should be created to seamlessly fit into the user’s world, not the designers. So much like this example with Siri, it’s important to remember that we must study the story and details of a user’s interaction in order to make the experience as a whole more intuitive and ultimately, more pleasant. Here are some examples of mobile interactions and designs that have been given the attention to detail that they need to make some truly compelling and intuitive experiences.

Simplicity, not Scarcity

Making an interface simple is a matter of keeping what’s necessary and leaving no excess to things that deemed unnecessary. It’s about crafting down to the last detail while still keeping the purity and simplicity of the design.

Gmail
Aside from the buttery smooth interactions that make using the new Gmail app a joy to use, it ultimately demonstrates an understanding that checking one’s email is not something most people look forward to. Therefore the interface is structured and designed to help you efficiently and seamlessly complete your ritual.

The app maintains its function with its seemingly stripped down interface by focusing on what and how information is presented. Only the most used and everyday features of the app (‘Search’, inbox and ‘Compose’) remain consistently available in the main interface. Also, utilizing icons, rather than text-based buttons helps declutter the interface; this is an important design detail since it leverages the fact that users are quicker at perceiving and making meaning of images, moreso than text descriptions. It’s just how we process information!

Prismatic
Prismatic is an app that allows you to create news feeds based on your interests. At first glance, it’s likely that a user might accuse the design of being too minimal and scarce, rather than the simplicity principle.

The contextual menu, however, pops up when you press and hold down on the app. And it’s quite a refreshing take on the execution of a mobile contextual menu. It doesn’t take any search time looking for the buttons to share, save, and recommend since the menu is literally at your finger tips!

Support learnability & memorability

How easy is it for users to accomplish basic tasks the first time they encounter the design? When users return to the design after a period of not using it, how easily can they reestablish proficiency? How many errors do users make, how severe are these errors, and how easily can they recover from the errors? It’s important to consider what a user’s learning curve is so that when we innovate and introduce interactions to the user, they pick these tasks up effortlessly and efficiently.

Snapseed
Snapseed is among one of the many photo editing applications out there in the mobile world — so what does it do differently? Well, it makes the learning process easier for each user by providing proper onboarding on how to user the app. It also addresses the memorability issues users have when returning to the app after a considerable amount of time by continuing to provide that onboarding experience. The overlay feature pictured below can be accessed by tapping on the help icon (?), then selecting ‘Show overlay’. These nifty overlays can be referenced whenever needed.

Make it efficient

Once users have learned the design, how quickly can they perform tasks? Determine if that interaction really needs to take two taps or three. Efficiency is the key to preventing frustrated users!

Droplr
Sharing anything and everything is an activity we do more than we realize. Droplr has made this process as easy as 1, 2…yep, that’s it. The app lets users share any kind of file. So what? You take a photo, it uploads it, stores it to the cloud, spits out a user friend url, and then copies the link to your clipboard for you. All you have to do is take the picture and send the link. Users say this efficient interaction is the next best thing to sliced bread.

Make it a metaphor:

The purpose of a metaphor is to present an idea in a way your audience will understand. What better way to make an intuitive experience than to take what you’re already naturally comfortable with and paralleling some UX to it?

Evernote
Evernote is an app that helps you “remember everything”. This is a pretty bold statement which begs to ask the question “So how does its user-centered design support this claim?” Evernote uses a mental model that most users are familiar with: a file system. Now I’m not talking about the file system on your computer. I’m talking about the big clunky file cabinet in your office. While the metaphor references a traditional method of organization, the purpose of the metaphor is to allude to a paradigm the user is familiar with. What’s even more unique about the application of this mental model is that it carries over the same actions one would take when using a file cabinet: users swipe each the file upward and the screen fills with content from that file. From there users can navigate within the “file”.

Clear
The Clear app bases its form and function around the to-do list. Using a to-do list as a metaphor is appealing because it affords ideas of efficiency and getting things done. Similar to Evernote, Clear applies gestures to take their metaphor one step further. Swiping your list item from left to right “crosses off” the item and moves it down to completed list where items have a line through them.

Conclusion

Designing an mobile app entails infinite cycles of iteration. What these examples seek to demonstrate are successful executions of a specific mobile application feature. Grounding their design from the user’s perspective is what give these apps a soul.

Developers who look at your style guide will often be thinking:

• How can I take these elements and keep my code as dry as possible?
• Oh dear, don’t make me play the “What’s different about this visual element?” game…
• Are there any minor details (such as hover interactions, form inputs, etc…) that need to be included?

Fellow designers opening your style guide will want to know:

• What are the visual elements that I should be strictly adhering to?
• Where do I have room to expand on the existing visual style and structure?
• What design elements and interactions should I pay attention to so that I can continue a cohesive experience?

While I’ll admit there isn’t a catch-all style guide solution for all web projects, there are at least a couple key tips to keep in mind when creating the perfect style guide for your next project.

14 Golden Rules for Creating Style Guides

1. Clear presence of structure. Is your layout divisible into three columns? Maybe all of the elements are fluid in width but a fixed structure in height? These are structural elements that should be clearly presented when new onlookers see your style guide, so make sure you have the usual suspects (widths, heights, columns, sectioned elements) easy to understand.

2. Can’t-miss irregularities. While we may all like to believe that we create every pixel in our PSDs perfectly, little irregularities do crop up from time to time. Because of this, it may sometimes be difficult for the casual onlooker to determine what is an intentional irregularity versus an unintentional one. If that awesome hero image is supposed to stick outside of the div, make a point of calling it out through a Photoshop note or text note (see tip #3). Otherwise, prepare to have it dismissed as a mistake and ultimately ignored!

3. Notes & text notes. There are two great ways of calling attention to important highlights in your PSD: 1) Photoshop notes, and 2) manual text notes grouped into a nicely labeled layer group. Photoshop notes exist purely for the need to add more context to areas in your PSD and are commonly understood by Photoshop veterans as the go-to tool for this purpose. On the other hand, another trick your fellow collaborators will love is manually writing out notes, placing them on top of their related content, and grouping them all into one hidable folder. Why is this so useful and awesome? Because as of CS6, sifting through Photoshop notes one-by-one is still a bit of a chore; therefore, having all of your notes open and skimmable saves tons of time and effort!

4. Fonts, weights, sizes, line height, and color hexes, oh my! Nothing is more tedious and frustrating than trying to uncover what font/weight/size/line height/color was used for the typographic elements of your PSD… especially if you don’t even have that font installed on your desktop! So here’s a special secret that will make you the prize in any fellow collaborator’s eyes: Denote all of these elements clearly with a Photoshop note or text note (tip#3) like this…

Open Sans Reg 14/24 #444

Which basically means…
Font name (Open Sans)
Font weight (Reg)
Font size / line height (14px/24px)
Color hex (#444)

Note: While you could be extra savvy and actually state the number weight your font should be (i.e., 200, 400, 600, 800), you might not be the right person to determine whether that weight is relevant to how the rest of your project is coded or designed. Therefore, it’s best to just keep the weight as a simple reference of light, regular, bold, extra bold, black, etc…

5. Same styles with a twist. Sometimes you’ll find yourself needing to break out of the structure you’ve created in your style guide. Perhaps all your subheaders are 24 em, bold, and a hex color of #ff1; in a couple cases though, you might need to emphasize this subheader in a different way such as by using a different hex color of #f00. In this case, it can be difficult for a casual observer to notice that the color is all that you’ve changed. Save them the trouble of playing the “what’s different with this picture” game by clarifying for them what exactly is different, either in a note (tip #3) or within the typography’s placeholder content!

6. Be descriptive, not semantic with header hierarchy and typography pairing. More often than not, style guides include a suggested header hierarchy (e.g., This is the H1, This is the H2, Here’s an H3, Use this for H5s, etc…). But whether the person creating the style guide understands header semantics or not, they simply have no way of truly knowing if those suggested styles will be appropriate when implemented in development. So instead, consider being descriptive with your headers and typographic pairings. Try using words like Primary header, Secondary header, or Headers used for sidebar widgets. If you have a certain header and body style for block quotes or testimonials, state that it’s only for those cases. Descriptive placeholders can go a long way in helping others understand what kind of context elements in your layout need to be used in.

7. All that text wrap. In a perfect world, headlines are only 4 words long and don’t drag onto a second line. We, however, live in the world of multi-screen devices and long titles. On a typical handheld device, your headers and subheaders will wrap to a second, or even third, line. Even if they don’t, your client may later choose to be a little more verbose with their headlines. In any of these cases, it’s absolutely essential to indicate line heights for any potential typography that will wrap to more than one line.

8. Image treatments and examples. If you’re giving any sort of general treatment to your images, such as a subtle border or opacity interaction upon hover, be sure to call this out in your design. Note when this treatment occurs and give multiple examples that show the variety and extent of the visual treatment.

9. The absolute-must margins and paddings. Depending on how fluid or fixed your layout is, margins and padding can often end up being guesstimated, approximated, or on the flip side, immovable and rigid in size. Given the wily nature of web browsers and operating systems, it’s important to do everything in your power to minimize the unruliness of how margins and padding end up with the end user. If you’ve crafted the ideal white space that makes or breaks the breathability of your site, call it out. Use a shape layer that collaborators can instantly select so they can find out exactly how much breathability is needed for the design.

10. Cursors and gesture hints. Digital representations of cursors and gestures go a long way in conveying exactly what digital elements need to come to life upon certain interaction cues. If you have some complex hover, click or swipe interactions, use a representative icon that mimics what something would look like in that second of interaction.

11. Labeled layer groups. This one’s an obvious one but absolutely important to mention anyway: label your layers and groups. It’s one of many things that will make your collaborators navigate through your PSD with much ease.

12. Normal, hover, visited links, buttons, and navigations. Text links, buttons, and navigational states will always be regular faces in style guides. Remember, have instances of every type (normal, hover, visited, active) of state each one of these link elements would be and help out your fellow collaborator by stacking the various states as close to each other as possible. Oh and labeling these states isn’t absolutely necessary, but it doesn’t hurt if you have the time to spare!

13. Have good form with form fields. If your project involves form fields then be sure to understand all of the complexities that need to be thoroughly mapped out and designed. Any type of form field will typically require you to consider any number of the following:

• normal input field state
• focused input field state
• position of labels
• alignment of labels
• placeholder text
• active text
• entered text
• submit button alignments
• (live) error validation
• submission load graphics (if applicable)

14. Pagination, unique visual elements, and more. Does your project contain unique traits to it that require specialized styling for certain elements? Be sure to include answer to these if so. Frequent unique elements you’ll come across include pagination, blog tags and category filters, sidebar elements, search fields, and dropdowns.

Don’t forget to download the PSD used in this post for your own reference when creating future style guides! 

1. Sidewalk (http://sidewalkland.com)

2. blacknegative (http://www.blacknegative.com)

3. James Childers (http://www.jchilders.com)

4. Equilibrium (http://www.equ.com.au/)

5. Design Duoell (http://www.designduoell.de)

6. From the Rough (http://www.fromtheroughmovie.com)

7. Who is Leon (http://whoisleon.com)

8. Ryan Scherf (http://www.ryanscherf.net/)

9. The Bullitt Agency (http://www.thebullittagency.com)

10. The Exit Zero Project (http://www.exitzeroproject.org)

11. Sav (http://sav.se)

12. Kerry Edward (http://cargocollective.com/kerryedward)

13. James Garner (http://jamesgarner.co.uk)

14. Goliath Sportswear (http://www.goliathsportswear.com)

15. Diehl Group Architects (http://diehlgroup.com)

16. Gangibob (http://www.gangibob.com)

17. Glass Coat Photo Booth (http://www.glasscoatphotobooth.com)

18. Christopher Meeks (http://christophermeeks.com)

19. Blissfully Aware (http://www.blissfullyaware.com)

20. Nick Jones (http://narrowdesign.com)

“Afraid of being exposed, dying to be seen — there’s a dilemma for you.”
-Philip Roth, The Human Stain

Information overload is a brick wall for website engagement that sets in very quickly – and once it does, it can be very difficult to regain your visitors’ attention.

In our online travels, we’ve identified several tools and principles that should live in every designers’ utility belt. They can be used to attack the challenge of creating a content-rich site:

1. White space - allowing the content (and your visitors’ eyes) room to breathe
2. Boxes, borders & graphical planes - Segmenting the information into visual categories
3. An intuitive search method - Letting your users jump straight to the info they need
4. Grids - Although not always necessary for comprehension, keeping content within a rigid, consistent structure helps reduce the effort required to process it
5. Strong information hierarchy - Establishing a consistent design language using content types (blurbs, excerpts, call to actions)
6. Visual hierarchy - The relative importance of different content areas and elements can be visually implied in many ways, ranging from typographic treatments (headlines, sub-headings, pull-quotes, etc.), to image sizes and saturation, placement, etc.

In the examples of content-rich websites that follow, you’ll see many of these best practices applied effectively in order to maintain an enjoyable, friction-free experience.

Polygon

http://www.polygon.com/

What is it?

Polygon is a videogame review site from the founders of gadget-enthusiast upstart The Verge (also profiled here).

Why we like it

• Whitespace - Polygon’s articles feature long-scrolling, untraditional layouts that break up the dense bodies of text into digestible chunks with huge, beautiful imagery, akin to custom-designed magazine spreads. Here, the content in each article has been intentionally laid out, instead of simply “pasted & posted” into a one-size-fits-all template.
• Strong information hierarchy - Dramatic-looking pullquotes highlight the core points of the reviews.
• Usable search - There’s an impressive realtime search bar that’s sticky at the top of the browser window, enabling quick drilldown on specific games.

The Verge

http://www.theverge.com/

What is it?
As the new kid on the block that’s populated by the likes of Gizmodo and Engadget, The Verge is taking a fresh, bold approach to covering the wide world of technology.

Why we like it

• Story collage - The homepage begins with a big, colorful jigsaw puzzle of leading stories’ headlines, providing a glimpse into the articles they link to, as well as a strong visual draw for the eye.
• Thumbnail sliders - At certain points, the pages are broken up by a useful carousel of image thumbnails, each allowing the user to drill into a specific story.
• You Need To Read This Now - By giving its top stories a bit of whitespace and accompanying them with an explicit directive, The Verge is able to focus attention on the hottest news it has to offer.

Conde Nast

http://www.condenast.com/

What is it?
Being the parent company of many of the best-known magazines around (including a couple we’ve featured here), almost makes Conde Nast’s site genetically predisposed to offer a mountain of content that could easily be overwhelming if not approached with caution, forethought and disciplined design.

Why we like it

• Bold visual hierarchy - Beginning with the absolutely giant, beautiful content slider in the header of this site, there’s literally no way you could miss what Conde Nast believes are the most important things for you to see on this site.
• Customizable Filters - This site wisely avoids attempting to present all of the available content, and instead puts control in the user’s hands by enabling them to filter down what they see based on their specific interests.

Blik

http://www.whatisblik.com/

What is it?
Blik is one of the biggest destinations around for art supplies, and with such a diverse range of media and materials to accommodate, it needs to ensure that its creative audience can quickly find the items they need when inspiration strikes.

Why we like it

• Strong information hierarchy - You’re never in any doubt as to what the most important thing is that you should be looking at, especially while browsing the products which follow many of the best practices for an ecommerce product page.
• Grid style - With a kaleidoscope of colors, shapes, lines and patterns inherent to their wide range of products, keeping a clean, rigid grid structure helps impose a sense of orderliness upon what could be a chaotic mess of visual elements.
• Dynamic mouseovers - Blik allows the user to indicate interest in an item by providing more information in a dynamic hover state, instead of unnecessarily cluttering the resting state of the site upfront.

USA Today

http://www.usatoday.com/

What is it?
As one of the largest newspapers in the US, USA today knows a thing or two about managing a large amount of content in a limited space.

Why we like it

• Clean, organized grid - The clean, sharp lines and rigid layout of this design maintains an orderly feel to this site, which keeps it from feeling disorganized or difficult to navigate
• User-adjustable layout - USAToday offers visitors the choice between a List or Grid view of their top stories. This allows users to control how much they take on at once – allowing them to effectively choose their preferred approach to browsing the content.

The New Yorker

http://www.newyorker.com/

What is it?
The venerable publication famed for its satirical cartoons brings a stately approach to presenting its content online.

Why we like it

• Masonry - The New Yorker’s homepage echoes the trend of the cascading, tiled content block layout that keeps the user scrolling down, scanning for items of interest.
• Variety - There are a wide range of image sizes on offer in this layout, which prevents monotony setting in while browsing through.
• Minimalism - The overall aesthetic here is clean, structured, and minimalist that lets the content speak, while using the New Yorker’s signature font throughout.

AIGA

http://www.aiga.org/

What is it?
The national professional membership organization for the graphic arts, AIGA has its hands in many avenues of outreach for its members, including conferences, perks, publishing and more. In this instance, presenting their overwhelming amount of available content in an effective way meant exploring outside the traditional layouts of similar organizations.

Why we like it

• Grid style - The grid size of each article is proportional to the amount of information it contains, giving visitors an instant visual representation of importance – and time commitment.
• Consistency - Despite covering a profusion of different design styles, typography and color schemes in its imagery, the actual site retains a solid consistency in terms of how it displays captions, headlines, article content, etc.
• Strong information hierarchy - Each article offers the same Title/Subtitle/Excerpt structure. Articles of special importance remain fully saturated, instead of the secondary posts, which are more muted, and only come to life on hover.
• Buttons - Non-rectangular buttons punctuate this layout, noticeable by virtue of their shape. These calls-to-action are nicely styled and stand out just enough to catch attention.

A List Apart

http://www.alistapart.com/

What is it?
One of the de-facto bibles of designing for the Web, A List Apart publishes daily, thought-provoking articles on the finer points of our craft. This is deep, thought-provoking stuff, so a usable interface and pleasurable reading experience are paramount.

Why we like it

• Clean & simple typography - ALA’s design is well-known in the Web design community for microscopic attention to detail when it comes to the typography on the site. Each line, heading and pull quote is fastidiously and consciously adjusted for perfect readability.
• Disciplined editing - Despite the length of ALA’s articles, you’ll notice that there aren’t any overly-long sections of content. Each post has been carefully broken up into easily-digested paragraphs of 2-3 sentences each.

The Black Harbor

http://theblackharbor.com/

What is it?
A showcase of art spanning an eclectic variety of styles from the artist collective I Shot Him Because I Loved Him, Damn Him.

Why we like it

• Rigid grid - Each article is represented on the homepage by a moderately-sized photo, all presented in a clean grid layout, to prevent visual confusion, given the variety of colors, styles and subject matter to be accommodated.
• Content reveal - Simply displaying the descriptions and captions of each picture underneath them adds content bloat – instead, The Black Harbor only reveals this information as an overlay when the user indicates interest by hovering over an image. In addition, when users hit the bottom of the homepage, they’re given the opportunity to reveal more content.

Ebony

http://www.ebony.com/

What is it?
One of the best-known magazines for Black-American articles, opinion and insight, Ebony covers an incredibly broad number of topics in its mission to share the perspectives of the African-American community.

Why we like it

• Giant imagery - Much like Polygon’s fine example, Ebony uses striking and large images to not only set the tone, but also give users strong implications as to the most important articles on their homepage. Their homepage slider alone takes up the vast majority of the screen on laptop resolutions and below.
• Bold typographic hierarchy - Ebony’s signature headline font, Didoni, serves to call out the major articles on the site at the present moment, with secondary stories headlined in “Trade Gothic”.

Wired

http://www.wired.com/

What is it?
The original home of pan-genre tech and geek journalism, Wired covers a breathtaking variety of detailed content – making accommodating it all comfortably on their website quite the achievement.

Why we like it

• Readability - Clear sans-serif type, and comfortable column widths keep things simple and easy to read.
• Consistent typography - All headlines, quotes and other text content elements are cohesive across the sprawl of this site.

Boston Globe

http://bostonglobe.com

What is it?
This widely-reknowned newspaper caught the attention of the Web last year, when they rolled out a major site redesign – one of the first mainstream sites to embrace responsive design methods.

Why we like it

• Whitespace - Being a newspaper, by far the most important content is the text, meaning that careful attention has been paid to ensuring a pleasurable reading experience
• Visual hierarchy - Articles with an image are more attractive – and therefore more important – than those without. This rule is further emphasized by the size of the accompanying image, with the leading story having significantly more space devoted to it.
• Hidden content - The leading stories in each news category are smartly hidden in the mega-menu, which is revealed on hover

Co.Design

http://www.fastcodesign.com/

What is it?
Fast Company’s design blog showcases all the latest goings-on in the world of product and graphic design. Needless to say, there’s a lot going on in those areas these days…

Why we like it

• Giant imagery - Each article is accompanied by a truly massive header image that lets the reader know in no uncertain terms just what they’re about to read.
• Intro sliders - Many of Co.Design’s articles open with an image slider containing key images from the body of the article. They serve as an excellent visual intro for the text that is to follow, and get the reader primed for the overall tone of the article.

Think Quarterly by Google

http://www.thinkwithgoogle.co.uk/quarterly/index.html

What is it?
Google’s quarterly publication with their musings on the trends and movements of the Web is a surprisingly refreshing reading experience coming from a company with a reputation for deeply-entrenched engineering background.

Why we like it

• Whitespace - The whole layout of this site feels crisp, fresh and open. Type is laid out for maximum impact, instead of content density.
• Overlays & reveals - The index of this online magazine is very nicely done, with thumbnail activating a huge, stylish pull-quote and link to the article upon rollover. Approaching the reveal in this way also allows the reader to continually return to the central theme of the issue.

Wrapping it up

Make no mistake – none of these examples successfully navigated the minefield of creating a content-rich website by accident. It takes a ton of time, strategy and deliberate planning in order to not only execute these designs, but also ensure that future content updates fit flush within the overall user experience. Therefore, it pays to keep the following guidelines in mind:

Prioritize - When everything’s important, nothing is. You should clearly establish what content is required by the user up-front, and what can be hidden. Once you’ve figured that out, make that hidden information easy to find when needed.

Semantic Categorization - Categorize your content in a way that makes sense to your user – not to you, nor your client, nor your colleagues. Be ruthless in identifying and eliminating internal jargon and acronyms that you toss around in a usual day at the office.

Design Consistently - Keeping all your elements, typography and spacing consistent across the whole site takes on a whole new level of importance when taking on a content-rich site, not only for the users’ sakes, but for minimizing future maintenance headaches. For example, keep related image assets all the exact same dimensions, so they can be reused seamlessly across the site.

Make user flowcharts - Chart the journey of different groups of visitors through the site. Challenge yourself as you’re designing to answer common questions, or consider how you would accomplish typical tasks that a new visitor might have within your proposed site structure and page layouts.

Read others’ takes on planning and creating good, content-heavy websites:

• One Extra Pixel - Planning for a content-heavy Web design
• Build Internet - How to plan a content-heavy site
• Information Architects - Improving the digital reading experience
• Spoonfed Design - 10 user-friendly tips for good, content-heavy Web designs
• Hongkiat - Designing content-intensive layout tips & examples

So, what’d we miss? Share your tips for creating killer, content-heavy websites in the comments!

Selecting tools, adjusting fills and opacities, changing blending modes or transforming and merging layers are just a handful of the shortcuts included by default in Photoshop. If those tips are new to you, then you should definitely take a look at these tips on saving time in Photoshop and collaborating on Photoshop projects.

Recently, I stumbled across this post showcasing a handful of great Photoshop tricks and realized how helpful (and easy) it is to roll your own keyboard shortcuts. This makes it super simple to fill the gaps left behind by the default set of Photoshop shortcuts. Let’s get started.

Creating Custom Shortcuts 101

The first thing is to launch the Keyboard Shortcuts manager in Photoshop. You can launch it with a shortcut, of course! (CMD + OPT + Shift + K) Or you can navigate over to Edit > Keyboard Shortcuts in the Application Menu. Simply select the menu item within the Shortcut Manager that you wish to add. You’ll see an input asking for the desired shortcut. Simply type the shortcut for it to be recorded. Don’t worry, it’ll warn you if you’re trying to overwrite a pre-existing shortcut. You can save these to their own set of shortcuts, which I recommend if you’re overwriting any defaults. Or you can append them to the default set, which is what I’ve chosen to do.

The most used shortcuts for interface design live within the Application Menu (i.e. File, Edit, Layer, Select, Filter, etc); but you can also make shortcuts for anything inside the Panel Menu or Tools. So if you frequently find yourself mousing into any of these menus for tasks, they are ideal candidates for custom shortcuts. Here are some that we’re getting a lot of mileage out of currently:

Manage Layer Styles

Photoshop has a funny way of hanging onto layer styles you’ve previously used in that file, only to then afterwards apply them to new shape layers. Normally, you’d right click said layer and choose “Clear Layer Style”, or “Copy Layer Style” to apply it elsewhere. Try these for starters to never right click for layer styles again.

You can find these in the Shortcut Manager under Layer > Layer Style

Clear Layer Styles

Copy Layer Styles

Paste Layer Styles

Create Layer Styles

This one is a great tip in and of itself and is excellent for fine-tuning your styles in really detailed work. Such as applying multiple drop shadows or other layer styles to a single layer. Check out this tutorial from the fine folks at Method & Craft to get the full details.

Work Smarter

Smart Objects are great because they’re… ummm, smart! Get that icon, logo or anything else just right, then select those layers and create a smart object. Copy it and reuse it wherever it’s needed. When it’s time to change it, just change one smart object; it’ll reflect all of the changes made with the other copied smart objects. It’s about as close as you’ll ever get to having CSS into your PSD.

You can find these in the Shortcut Manager under Layer > Smart Objects

Create Smart Object

Convert for Smart Filters

This one is great for a non-destructive way to add filters to a layer or edit them later. Now you can get that Gaussian Blur just right for that Dribbble shot!

Line’em Up!

How often do you click on this in a given day? Well, try these shortcuts to keep things centered vertically, horizontally or both:

You can find these in the Shortcut Manager under Layer > Align

Vertical Centers

Horizontal Centers

Use both of these in succession to get your icons and graphics back in balance. Also, feel free to create shortcuts to top, left, right or bottom edges. While we’re at it, we should take care of flipping horizontally and vertically. Try these:

You can find these in the Shortcut Manager under Edit > Transform

Flip Vertically (along the y axis)

Flip Horizontally (along the x axis)

The Junk Drawer

These last few are a little obscure, but they’re important. The belong in the Photoshop Shortcut Swiss Army Knife for sure!

Convert Type to Point or Paragraph Style

You can find this in in the Shortcut Manager under Layer > Type

Ever type out or paste in text, and then realize that it would have worked better inside a bounding box that you could resize, or visa versa? This is just the trick to save you from hitting return to create a paragraph manually, only to have it look terrible when you resize the type.

Place File

You can find these in the Shortcut Manager under File > Place

Why this shortcut isn’t included in the default set has boggled my mind. This is ideal for dropping other visual assets into your file. If you’ve ever inserted multiple product images for an ecommerce page or team photos over and over, you’ll really appreciate this one.

Insert a new guide exactly where you need it

Sure, there are template PSD’s and actions to set up new files with your favorite default guides. However, this way offers the most freedom and takes seconds – especially now that we’re designing responsively. Rather than dragging out guides to what looks like your intended breakpoint, only to then zoom in to make sure it’s right, just use this stroke and type exactly what you want. You can use percentage values too!

Remember, there are tons of others you may find helpful and now you know how simple it is to whip up your own. Have any awesome custom shortcuts of your own? Or did this ideas inspire you to create some go-to shortcuts of your own? Share them below in the comments.