Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 03 2014


Designing Digital Strategies, Part 1: Cartography

As digital products and services come to comprise an increasingly important part of our everyday life, the division between the digital and the physical begins to blur. We can, for instance, see a washing machine on TV, read reviews of it online, purchase it on our phone, and have it installed by our local shop—all without leaving our computer. The sum total of these processes functions as a single, continuous experience. Designers can more prudently frame the experiences they create by incorporating ecosystem thinking into their process.

In 2011, the newly appointed CEO of Nokia, Stephen Elop, wrote:

The battle of devices has now become a war of ecosystems, where ecosystems include not only the hardware and software of the device, but developers, applications, ecommerce, advertising, search… location-based services, unified communications and many other things. Our competitors aren’t taking our market-share with devices; they are taking our market share with an entire ecosystem. This means we’re going to have to decide how we either build, catalyse or join an ecosystem.”

An ecosystem is the term given to a set of products, services, and people that function together in a symbiotic way. As an interaction designer working at a consultancy, I often meet clients who want to integrate all sorts of functionality into their digital solutions—email, Facebook, SMS—without really considering if that inclusion will actually add value for their users. Rather than unilaterally connecting all possible digital channels and launching a “family” of related products and services, designers need to determine ways in which ecosystems can act together in service of their client’s business goals.

Nike’s “plus” products work together to create something greater than the sum of their parts.

Designers do this through the creation of a digital strategy. Despite the fact that numerous voices suggest their creation, however, the actual details of creating one remains elusive. That’s where this two-part series comes in. In the first part we’ll review the elements that comprise an ecosystem as well as how to create an ecosystem map (a useful tool for facilitating a shared vision) by way of digital cartography. In the second part, we’ll see how ecosystem maps can be used to to develop digital strategies, helping companies fit together the various pieces that shape their digital puzzle.

The basics

The word ecosystem comes from biology wherein it describes a network of interacting organisms and their physical environment. From a technological standpoint, though, an ecosystem is better described as a network of people interacting with products or services. As Dave Jones defines them, ecosystems include:

  • users,
  • the practices they perform,
  • the information they use and share,
  • the people with whom they interact,
  • the services available to them,
  • the devices they use, and
  • the channels through which they communicate.

Ecosystem thinking, likewise, is the inquiry method used to analyze and understand ecosystems, both the problems they pose as well as the business opportunities they might present. Instead of focusing on a single product or service, however, designers who practice ecosystem thinking evaluate user behavior at the intersection of various inflection points. They ask:

  • Who are our users?
  • What practices do they perform?
  • What information do they need? (and where do they seek it?)
  • With whom do they interact?
  • What services are available to them?
  • What devices do they use?
  • Through what channels do they communicate?

Answers to these questions provide designers with all of the raw data they need in order to better understand the ecosystem in which they’re working. Turning that data into actionable information is the job of ecosystem maps.

An ecosystem map is simply a graphical representation of the relationships examined via ecosystem thinking. Ecosystem maps are closely related to other diagrams with which designers are likely familiar, including service blueprints, experience maps, and concept maps. They differ from these diagrams, however, in that ecosystem maps are optimized to aid in the creation of digital strategies.

A concept model that explains concept models (© Dan Brown, 2010)

Service designers Polaine, Løvlie, and Reason have arguably presented one of the best examples of an ecosystem map, however, without sufficient contextual knowledge it is difficult to understand the relationships their map presents between the “who,” “what,” “when,” “where,” “why,” and “how.”

That’s where digital cartography comes in.

Mapping an ecosystem

Digital cartography is an abductive, sensemaking process that, practically speaking, only requires time and permission to iterate. It boils down to five major activities:

  1. Understanding users and their goals;
  2. Mapping the activities (both known activities and “best guesses” as to the unknown activities) that users conduct in service of their goals;
  3. Mapping the information, services, devices and channels that users employ in service of their activities;
  4. Mapping the moments in which users perform their activities; and
  5. Narrowing down the discrete set of moments (or “experiences”) upon which the design team might focus.

The most useful outcome of digital cartography is not the map itself but the insights that the mapping process generates into the idiosyncrasies of users: their needs, their behaviours, and their perspectives. No map can really encompass the full complexity of an entire ecosystem; an illustration will always be a simplification of reality. However, the creation of simplified visual representations helps us to collaboratively forge paths in our digital world.

Creating a map

Like all user-centered design endeavors, digital cartography begins with research: interviews, observations, questionnaires, analyses of web site statistics, etc. This helps us to determine the goals towards which users are working as well as how users go about accomplishing their goals. Next we draw, or map, everything we know.

Don’t worry about getting everything right immediately. Ecosystem maps are useful both for structuring forthcoming research (finding out what needs to be examined) as well as for communicating the insights of the research that’s already been performed. Use a dry-erase board or a pencil and a piece of paper. It can also be useful to put the people and devices involved in a process, called actors, on individual post-it notes in order to move them around. This helps us to spatially reflect where actors fall in the process (left-to-right, top-to-bottom) as well as the relationships between them.

After spatially arranging the actors, have the team illustrate any/all of the activities undertaken by users as well as the information, services, devices, and channels they use for doing these activities. Next, cycle through the questions comprising ecosystem thinking: When do users perform activities? How do people send out invitations for, say, a birthday party? Who sends the invitations? How do they know who will come to the party?

It is easy to be overwhelmed with unknowns, especially in the beginning. Uncertainties (such as the order of certain events or the kind of channel that’s used for performing a specific activity), should be drawn as a “best guess” and marked with a questionmark for further investigation. Later, this information helps us to make a plan for how we can find out more about our ecosystem. For example, perhaps we could return to our research by conducting interviews with parents about how they usually invite children to their kid’s birthday party.

The final step is to determine the activities that our team will support through design. Not everything that is part of an ecosystem should be integrated into a digital product or service; it’s all about making strategic, informed choices. This helps us to distinguish “what is necessary” from what is “nice to have.” Moreover, it helps us determine which features might give our experience a competitive edge.

An example

Let’s continue using the example of an event-organizing application in order to illustrate how an actual act of digital cartography might unfold.

When organizing an event, people usually begin by discussing how, when, and where the event should take place. One person might take on the responsibility of securing the event space and sending out invites. Invitees might then contact the organizer to RSVP. Next, the organizer might wish to delegate tasks to the people who are attending (such as bringing stuff, preparing food and so on.) After the event, attendees might opt to send thank-you notes or share pictures from the event.

The ecosystem map, shown below, does not include all the activities that take place around an event, but it does include the more salient ones.

An ecosystem map for an event-planning application. I chose a circular presentation to indicate how the success of the app relied on repeated use.

The map also shows how activities are performed through the use of icons: invitations, questions and responses can be submitted through regular mail, e-mail, text message, in person, over the phone, or through Facebook. Timeframes for the various activities appear as green, dotted lines. In this case, I chose to use large timeframes as the timing varies a great deal across different types of events (planning a wedding might take six months, whereas planning a night out at the movies might take hours).

The inner circle of the map shows the activities that the app currently supports; the other circle shows what’s on our minds. Deciding what to do during an event and sharing photos are but two examples of countless activities that users might perform during the course of organizing an event. This division—what users do vs. what we support—is an excellent jumping off point as we formulate our digital strategy.

The map is not the territory

I have found the use of ecosystem maps to be very valuable when working with clients. I encourage readers to draw their own maps and share their experience of applying ecosystem thinking in their design projects.

Understanding ecosystems adds a whole new dimension to designing consistent user experiences across different types of media. So far I have explained what an ecosystem is and how we can draw ecosystem maps. Yet, it is not really about the map, but where it might take us. In the next (final) part of this series, we’ll see how to use ecosystem maps as tools, informing the creation of digital strategies.

The post Designing Digital Strategies, Part 1: Cartography appeared first on UX Booth.

December 21 2013


Managing a Mind

Christopher Murphy pauses to reflect on his personal experience of mental distress and enjoins us to understand the powerful psychological forces that motivate us and can lead us astray.

Tags: Process craft
Sponsored post
09:01 will be discontinued :(

Dear fans and users,
today, we have to share very sad news. will stop working in less than 10 days. :(
It's breaking our heart and we honestly tried whatever we could to keep the platform up and running. But the high costs and low revenue streams made it impossible to continue with it. We invested a lot of personal time and money to operate the platform, but when it's over, it's over.
We are really sorry. is part of the internet history and online for one and a half decades.
Here are the hard facts:
- In 10 days the platform will stop working.
- Backup your data in this time
- We will not keep backups nor can we recover your data
July, 20th, 2020 is the due date.
Please, share your thoughts and feelings here.
Reposted bydotmariuszMagoryannerdanelmangoerainbowzombieskilledmyunicorntomashLogHiMakalesorSilentRulebiauekjamaicanbeatlevuneserenitephinangusiastysmoke11Climbingpragne-ataraksjisauerscharfArchimedesgreywolfmodalnaTheCrimsonIdoljormungundmarbearwaco6mieczuuFeindfeuerDagarhenvairashowmetherainbowszpaqusdivihindsightTabslawujcioBateyelynTabslaensommenitaeliblameyouHalobeatzalicexxxmgnsNorkNork

December 17 2013


How Optimized Are Your Images? Meet ImageOptim-CLI, a Batch Compression Tool


Exporting images for the Web from one’s favorite graphics software is something many of us have done hundreds of times. Our eyes fixate on an image’s preview, carefully adjusting the quality and optimization settings until we’ve found that sweet spot, where the file size and quality are both the best they can possibly be.

After exporting the image — usually using a feature called “Save for the Web” — and having gone to all that care and effort, we would be forgiven for thinking that our image is in the best shape possible. That’s not always the case, of course.

In fact, much more data is usually left in such files, data that browsers have to download despite not requiring or even using it, data that keeps our users waiting just a bit longer than necessary.

Thankfully, a number of popular tools can help us optimize images even further, but which should we use? We assumed, for a time at least, that our graphics editing software properly optimized our files, but what do we really know about our image optimization tools?

Image Optimization Tools

If you’re not currently using any image optimization tool, I would urge you to choose one. Any is better than none. Regardless of which you choose, you will likely speed up your website and keep users happy.

To inform our work, I ran the most popular image optimization tools over a varied sample of images (kindly donated by Daan Jobsis via his “Retina Revolution” article), and I’ve published the results on GitHub.

The report shows us how much data each tool saves and how much quality was lost statistically. However, how great a loss in quality is noticeable and how much is acceptable will vary from person to person, project to project and image to image.

Aim For The Biggest Gains

I’ve been using ImageOptim for many years, with ImageAlpha and JPEGmini joining it more recently.

With this trio, we have a specialist in JPEGs, another in PNGs, and a great all-round application, ImageOptim, which also supports GIF and other formats. Each uses different techniques to deliver impressive savings, but they complement each other when combined to offer better savings still.


ImageOptim beats any single lossless optimizer by bundling all of them. It works by finding the best combination of compression parameters and removes unnecessary comments and color profiles.


ImageAlpha is unique in its lossy conversion of PNG24 to PNG8, delivering savings many times bigger than popular PNG optimizers such as and TinyPNG. The conversion even maintains alpha-transparency in all browsers, including on iOS and even in IE 6.


JPEGmini is a “patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.” The creators claim it reduces a file’s size by up to 80%, while maintaining quality that is visually identical to the original.

The savings are quite remarkable, but you will need to purchase the software to use it without restriction.

Prioritize Convenience

In terms of performance, the comparative data is reassuring, and to date I’ve been happy with my decisions. But there’s a real problem: all of these tools are GUI applications for OS X.

This has some benefits because everything is local. You don’t need to upload and download files to a Web server, so there’s no risk of the service being temporarily unavailable. This also means that your images don’t need to leave your machine either.

But at some point ahead of every launch, I had to remember to open each application, manually process new images, then wait for the tool to finish, before doing the same in the next application.

This soon gets tedious: We need to automate! This is why (with James Stout and Kornel Lesiński) I’ve created ImageOptim-CLI, automated image optimization from the command line interface (CLI).


Though other image optimization tools are available from the command line, ImageOptim-CLI exists because the current benchmarks suggest that ImageOptim, ImageAlpha and JPEGmini currently outperform those alternatives over lossless and lossy optimizations.

I wanted to take advantage of this.

Given a folder or other set of images, ImageOptim-CLI automates the process of optimizing them with ImageAlpha, JPEGmini and ImageOptim. In one command, we can run our chosen images through all three optimizers — giving us automated, multi-stage image optimization right from the command line.

This gives us the levels of optimization of all three applications, with the convenience of the command line, opening up all kinds of possibilities for integration with other utilities:

  • Integrate it with Alfred workflows.
  • Extend OS X with folder actions and more using Automator.
  • Optimize images whenever they change with the Guard RubyGem.
  • Ensure that images are optimized when you Git commit.

Do you know of other ways to integrate image optimization in your workflow? If so, please share your ideas in the comments.

Installation and Usage

The CLI can be downloaded as a ZIP archive or cloned using Git, but the easiest way is by running this:

npm install -g imageoptim-cli

Running all three applications before closing them afterwards can be achieved with this:

imageoptim --image-alpha --jpeg-mini --quit --directory ~/Sites/MyProject

Or you can do it with the equivalent shorthand format:

imageoptim -a -j -q -d ~/Sites/MyProject

You will find more installation and usage examples on the project page on GitHub.

Case Study: Myspace

Earlier this week, I visited Myspace and found that 4.1 MB of data was transferred to my machine. With the home page’s beautiful magazine-style layout, it’s no surprise that roughly 76% (or 3.1 MB) of that were images.

I was curious whether any data could be saved by running the images through ImageOptim-CLI. So, I recorded the video below to show the tool being installed and then run over Myspace’s home page.

As you can see, the total size of images before running the command was 3,186 KB, and ImageOptim-CLI was able to remove 986 KB of data, while preserving 99.93% of image quality.


There is a companion Grunt plugin for ImageOptim-CLI, called grunt-imageoptim, which offers full support for the optimization of folders and collections of images. It can also be paired with grunt-contrib-watch to run whenever any images are modified in your project.

Smashing Magazine has a great article for those who want to get up and running with Grunt.


Image optimization is an essential step in a designer’s workflow, and with so many tools to choose from, there’s bound to be one that suits your needs.

Data should bear heavily in your decision, so that you reap bigger rewards, but choose one that is convenient — using a weak tool every time is better than using than a strong tool sometimes. You’ll rarely make a decision in your career that doesn’t have some kind of trade-off, and this is no different.


If you’ve made it this far, I thank you for reading and welcome your questions, comments and ideas.

(al, ea)

© Jamie for Smashing Magazine, 2013.


Project Hubs: A Home Base for Design Projects

Brad Frost outlines a simple tool that can track a project’s design decisions and assets, and keeps everyone involved up to date and in the browser. It’s like a deep spoon scooping the brandy butter of progress onto the Christmas pudding of web project management.

Brought to you by Shopify, the fully customizable ecommerce platform loved by designers around the world.

December 16 2013


Credits and Recognition

Geri Coady lavishes us with her generous spirit of appreciation and approbation for co-workers, webfellows and colleagues. By crediting everyone involved, you can be a not-so-secret Santa.

Tags: Process craft

December 14 2013


Home Kanban for Domestic Bliss

Meri Williams brings her kanban work home with her — but to solve problems, not cause them. There’s a trick or two here that Santa could use instead of making a list and checking it twice.

November 19 2013


Fail Fast, Fail Often: An Interview with Victor Lombardi

Retrospectives are common. You’ve likely conducted one before. But how many companies are actually good at them? How many companies actually have the courage to be open and honest about their own shortcomings? My experience tells me that very few are. And that’s why Victor Lombardi’s recently released book, is so necessary: unlike the ones designers are used to seeing, Lombardi’s stories are full of objective, thoughtful, and insightful commentary.

An award-winning product designer, Victor Lombardi’s had a hand in over 40 different software and internet projects throughout the course of his career. And during that time he’s clearly paid attention to one thing: namely, all of the different ways in which a project can unfold. His new book, Why We Fail, tells over a dozen stories of projects gone awry.

So why do design projects fail? Many reasons. Lombardi attempts to answer the question from a number of angles: product ideation, design, development, and marketing. After reading his book, we brought additional questions to the discussion: How does bias factor in? Or branding? And, on a different level, what can we learn from

Our full interview appears, below. Additionally (as is always the case when we interview an author published by Rosenfeld Media) the publisher has graciously offered to give away a few books to readers. More information on that follows the interview!

Hey, Victor! Thanks for taking the time to chat. Throughout the book, you note a wide variety of places in which cognitive biases might affect an organization (“survivorship bias,” for example, is a perspective that exclusively favors success). Were you aware of bias and its effects from the outset or did you simply start to see bias the further you delved into your research?
I wasn’t expecting to hear about bias when I interviewed people for the book. Maybe that’s because I didn’t think people would open up this way. But they did.

I think it’s good therapy for us to talk through not only what we did during a project but also what we thought and felt. From there I brushed up on my psychology—Max Bazerman’s “Blind Spots” was particularly helpful—to explain the cognitive science behind the issues that led to failures.

Many companies find it (understandably) difficult to financially justify a culture that “embraces” failure. What advice do you have for them?
If senior management rules by ego, believing that the people at the top have the best ideas, then I’ve got nothing to say. They won’t hear my message.

For others, I think the overt message of “fail fast” is actually better framed as “experiment fast.” The most effective innovators succeed through experimentation. They’ve updated the traditional R&D department by stepping out of the lab and interacting directly with customers, running thoughtful experiments, and executing them quickly to learn quickly what works and what doesn’t.

Anyone doing user-centered design is already 80% of the way there. It makes a huge difference just to shift your process towards the scientific method, phrasing research questions as hypotheses and iteratively testing towards them. A key difference is in the results: instead of a lot of usability data to analyze and interpret, you get a true or false result. This makes it much easier to decide what to do next.

I recommend reading up on methods like customer development, lean startup, or by starting with the final chapter of my book.

In chapter four you recount the story of Wesabe and Mint, two startups who approached the financial space from slightly different perspectives. Wesabe suggested that users manually upload their financial data (in the name of privacy and security) whereas automated this task (at the risk of perceived security). Both were minimum viable products, but one failed while the other succeeded. Can you speak a little as to what startups can learn, generally, from Wesabe and’s subtle differentiation?
Wesabe was a useful service with a smart Web 2.0 strategy. Given more time and investment it would still be around. But certain classes of startups are dependent on attracting large numbers of customers in order to attract more investment. chose features and designed them in a way that excelled at attracting customers. They won the competition even though Wesabe was superior in many ways.

But this isn’t true in every case. In the book I cover a broad spectrum of products: startups and mature products; mobile, web, and desktop software; hardware; and services. Different situations resulted in different lessons. I summarize the lessons at the end of each case study.

One of my favorite case studies in the book is Google Wave, in which you suggest that the first sign of trouble was that everyone had a different definition of what a “wave” actually was. Personally, I think this speaks to the strong connection between user experience, semantics and branding. How do we fail in this regard and how might we do better?
The UX field generally is not good at the conceptual design stage of creating new products compared to, say, industrial design or architecture. We fall in love with our first idea, and we can quickly and cheaply move from idea to working prototype—it isn’t natural to stay in the idea stage for a while to explore alternate solutions.

It’s unfortunate that Google Wave failed because the problem still exists. The solution was close. …maybe “Concept Design” should be my next book ;-)

Chapter 7, titled “Do the right thing,” tells the story of Plaxo and, two companies who each decided to employ dark patterns to “better” their business. What other kinds of stories/examples did you consider including in this chapter that exhibited bad behavior?
In cases like I had no doubt the behavior was unethical. Others were less clear cut. Some of the things Plaxo did [ed: such as mass emailing its members’ contacts] that annoyed us back then are now accepted practice. So it’s relative. I decided against including others because there was no smoking gun, so I’ll refrain from mentioning them here as well. If you really want to know, you’ll have to buy me a drink sometime.
Last question! I know it’s a bit premature, but what, if anything, do you think designers might learn from the (highly publicized) failure of
Let’s say we solved for the myriad of political and vendor integration problems that plagued the project. What’s left are some intriguing customer experience issues. One seems to be that a long registration process is required before the customer can view prices of health plans, because the plans and prices are determined by your registration information. I don’t know how they ended up with that design, but the decision to design it this way sounds like a policy decision made around a conference table rather than through a design process that included running experiments.

What you can do if you find yourself in this situation is to acknowledge, out loud, that the goal of not showing prices prematurely is a good one, but the solution of making the customer do a lot of work up front is risky because more people will abandon the process before receiving any value from the site (see Wesabe vs. Mint). To mitigate this risk, you can generate alternate designs, mock them up, and test them out with customers.

Offhand, I can think of a few options:

  • Let visitors browse plans upon arrival and show the range of prices next to each plan to give people a general idea of cost. Then show them the actual prices after registration.
  • Show some realistic content so visitors know what factors will influence the price, like “Sally, a single mother of two in New York will pay $100/month for Plan X which includes benefits A, B, and C.”
  • If just a bit of data is needed to determine price, like state and income, just ask for that data, and require registration later when people are ready to buy a plan.

Thanks, again, for taking the time, Victor! Your book was a pleasure to read.

If you’re as jazzed about learning from failure as we are, I’d strongly suggest entering for a chance to win a copy of your own, courtesy of our friends over at Rosenfeld Media. To enter, simply follow UX Booth on twitter and leave a comment on this post answering the question: What’s your favorite story of design failure (one you’ve witnessed firsthand or otherwise) and what lessons to you think it provides? Rather than pick the winners at random, as we usually do, we’ll work with Victor to pick the three best stories of failure. Their authors will receive copies of the book. Entries must be made by Midnight, PST of November 21st. Good luck!

The post Fail Fast, Fail Often: An Interview with Victor Lombardi appeared first on UX Booth.

October 18 2013


Lessons Learned From Leading New Web Professionals


Over the course of my career, I have had the opportunity to lead various Web design and development teams, including a number of professionals fresh out of school. Along the way, I’ve made my share of mistakes and learned some valuable lessons.

Some new team members have jumped right in and begun contributing in a meaningful way almost immediately, and others have struggled to adjust to their new role because I failed as a leader and didn’t give them the tools they needed to succeed. One thing I’ve definitely learned is that the success of a new team member is determined not only by their own abilities and drive, but by the leadership on the team they are joining.

Recently, I was preparing to welcome a young new designer to our company. This position would be his first real experience working in our industry; so, prior to his start date, I decided to make a list of some of those lessons I’ve learned over the years as a way to remind myself of what I needed to do to make sure he had the resources needed to succeed here. As I wrote my list, I realized that many of these lessons were actually common sense — and yet, if my past experiences are any indication, these common-sense lessons are exactly the ones that are easy to neglect and that we often need to be reminded of.

Make Them Feel Welcome.

Joining a company can be an intimidating experience, especially if the company has a close-knit culture or the team has been together for some time — two factors that contribute to new employees feeling like outsiders. As a leader, you can make your new team member feel welcome by showing them, both in actions and in words, that they are absolutely now a member of the team.

If your website lists biographies and pictures of employees, make it a point to add the new team member’s information quickly. Even in organizations that have a “probationary period” to evaluate new hires, those employees should still be added to the website sooner than later. Having a presence on the website, alongside their colleagues, demonstrates to those new team members that they are a part of the group.

Adding a biography, as FreshTilledSoil does, shows a new employee that they are part of the group.

You can also use social media to welcome new employees to the organization. Welcoming them on Twitter (or in whatever social media you use) shows the new member that you are excited to have them on board. Your Twitter followers will sometimes chime in as well, echoing your welcome and adding to the warmth and positivity.

Finally, you can make new employees feel welcome by involving them in events and activities with other members of the company. This doesn’t have to be elaborate — a simple lunch is a great way to get out of the office for a bit and to interact as more than coworkers. By including new hires in the lunch party, you give them a chance to socialize with others and to feel like more than the “new person.”

Make Time For Regular Meetings.

This lesson is certainly “common sense,” but also one that I, admittedly, find myself failing to follow most frequently.

It is easy to get caught up in projects and other responsibilities and overlook that new employees, especially those new to the industry, need a lot of guidance early on. I try to meet daily with new team members for at least their first few weeks at the company. These meetings do not need to be lengthy — in fact, most are 10 minutes or less — but they provide an outlet for the employee to ask questions without feeling like they are interrupting an activity. Because these meetings are scheduled in advance, the person knows that time has been allotted to their questions; this is important because, even if you have an open-door policy and encourage new team members to come to you with questions, they will be reluctant to “bother” you. You can alleviate this concern with regular meetings.

Without fail, whenever my schedule gets crazy and I start skipping these regular meetings, I notice that the stress level of my team rises accordingly. These meetings not only give new employees an outlet to ask questions, but give me an opportunity to let them know what is expected of them and how they are doing. This open dialogue is essential as the person adjusts to their role in the company.

Of all the lessons on this list, this one is undoubtedly the easiest to let slip — but also the one with the worst consequences if allowed to go too far.

Meetings are essentials for new employees who will need lots of guidance early on. Image courtesy of flickr/dennis crowley
Meetings are essential for new employees, who will need a lot of guidance early on. (Image: Dennis Crowley)

Assure Them That Failure Is An Option.

No one wants to fail at a task, least of all a new employee who is trying to make a good impression. But, as Seth Godin so perfectly stated in a recent interview with Kara Miller on NPR’s Innovation Hub:

“If failure is not an option, then neither is success.”

New employees need to know that making mistakes is OK. If failure is not an option, then you will become crippled from trying to get everything right the first time. Anyone who has worked on the Web knows that trial and error is essential to the job. New employees need to be assured that failure will not be held against them.

Of course, a balance must be struck here. While failure is acceptable, it must yield a better understanding of the problem and an eventual solution. Failure is a means to finding a solution. So, while new team members should know that failure is an option, they should also know to use each failure to propel themselves to an eventual success.

Mistakes are a part of the job - as long as you learn from those mistakes. Image courtesy of flickr/ktpupp
Mistakes are a part of the job – as long as you learn from those mistakes. (Image: ktpupp)

Encourage Them To Contribute.

I once had a manager who felt that if you attended a meeting, you had to contribute to the meeting. He would often call randomly on attendees who had yet to contribute to a meeting and ask, “What do you think of this?” as a way to involve them in the conversation.

While I understood his reasoning, his execution left a lot to be desired. Too often, individuals would be called upon and would struggle to come up with an answer to a question that they really weren’t prepared to speak about. It put people on edge as they waited their turn. Sometimes, attendees would even rush to contribute early in a meeting so that they wouldn’t be called out later. This rush to participate usually added a lot of extra words but very little value to the conversation.

Instead of putting new employees in the hot seat, I try to find other ways to make them comfortable with speaking in front of our group. One way, when conducting design reviews, is to ask a new designer to present their work to the team, alerting them well before the meeting so that they can prepare a short presentation. Furthermore, because everyone is commenting on each other’s designs and offering constructive feedback, new employees feel comfortable speaking up and offering their own comments. This is an excellent way to help them speak more frequently in front of other team members and clients and to engage in other types of meetings.

Keep Them Busy.

You’ve probably hired the new person because your company is busy and there is work to be done. That’s great, because keeping new team members busy is critical.

Long-time employees will undoubtedly have built relationships with certain clients over time. Many of those clients will prefer to communicate with these employees than with a manager or salesperson. This is perfectly fine, as long as your company has a system in place to properly estimate, carry out and invoice this work. These client relationships can keep employees busy with new work.

Additionally, some long-time employees work on internal projects, as time permits. When they hit a lull between projects or wait for feedback from clients, they fall back on these projects to keep busy.

New employees have neither of these sources of work. Instead, they look to you to assign them tasks and keep them busy — and they will likely complete those tasks as quickly as possible to make a good impression. This is great, but also a challenge for you as the team’s leader. If you do not have a bank of work to keep the new team member busy, they will drift and grow bored, unsure of what to do with their time. Aside from your short daily meetings with them, digging up meaningful work for them will require a time commitment from you.

Before bringing a designer on board, review what projects you would expect them to work on for their first 30 to 60 days — both client projects and internal initiatives. Identify accounts into which you can integrate them so that they can begin building their own relationships, and let them know what the process is if they run short on work and you are not around to assign something else. This could be assisting other team members, furthering their training and education, or experimenting with new technologies or techniques for evaluation.

Prepare To Educate.

Part of your job as a manager is to continue a new employee’s education and fill in gaps in their knowledge. While this certainly involves mentoring and directing them to relevant resources, one of my favorite ways is to take them to a Web conference.

Many students graduate from school not having had the chance to attend a professional conference. Industry events such as the Smashing Conference and An Event Apart offer new Web designers and developers a chance to meet and learn from their peers in an energizing environment. Taking a new team member to a good conference opens their eyes to just how awesome and welcoming this industry can be. It also shows them that the company has invested in their success and is willing to spend money to help them grow in their knowledge and their career.

Every time I have taken a new employee to a Web conference, the experience has been fantastic. Such events show the team member that they are a part of something much bigger than our company — they now belong to the Web community as a whole.

Inspire new employees by taking them to a quality conference. Image courtesy of flickr/Kris Krug
Inspire new employees by taking them to a quality conference. (Image: Kris Krug)

Great Employees Need Great Leaders.

Being a leader is an awesome responsibility, especially if you are leading people who are just entering our industry. Whether you follow the lessons covered here or have more profound ways of leading new team members, the challenge you face is that, to have a great team, you must be a great leader. You must take a consistent approach to welcoming new employees to your organization, helping them to build on their strengths and acquire new ones and supporting them in their career growth.

If you do your job right, then one day, the new hire you are leading will pick up the torch and lead the next generation of designers and developers.

For more thoughts on leadership techniques in a creative agency, see “On Creative Leadership” and “Assuming Leadership in Your Design Agency.”

Summary: Do’s And Don’ts

  • Do make new team members feel welcome and part of the team by including them in company activities — both in and outside the office.
  • Do schedule regular meetings to allow new team members to ask questions and get feedback on their performance.
  • Do not allow your busy schedule to constantly override those regularly scheduled meetings, leaving the new employee with no way to get the guidance they need early on.
  • Do assure new employee that failure is a part of the job — so long as it propels them to the solution.
  • Do not put new team members on the spot by calling on them unannounced in meetings.
  • Do encourage participation by giving employees time to prepare before presenting to the group.
  • Do keep new employees busy with meaningful work.
  • Do not assume that new employees will know how to fill their time if they run out of assigned work.
  • Do educate and inspire new team members by introducing them to the Web community a whole, including at conferences and other industry events.
  • Do recognize that the team members you lead today will become our industry’s leaders tomorrow.

(Front page credits: David Joyce)

(al, il, ea)

© Jeremy Girard for Smashing Magazine, 2013.

October 10 2013


Hand-Sketching: Things You Didn’t Know Your Doodles Could Accomplish


Is sketching by hand more than a nostalgic activity? How is paper any different from a screen, especially when hardware is becoming more and more sophisticated? Is improving your hand-sketching skills really worthwhile when high-tech software is advancing every day? What difference can a pencil possibly make?

Everyone seems to have a strong opinion about hand-sketching these days. Some absolutely hate the thought of putting their ideas to paper because they can’t draw to save their lives. Others couldn’t imagine their creativity surviving without it. Love it or hate it, there’s much more to a sketchbook than old-school charm.

Final Sketch

Here’s the thing. From personal experience, I know that sketching on paper has something powerful about it that takes my designs to the next level. I’ve spent hours in front of both computer screens and sketchpads, and something about the latter always keeps me going longer, thinking more clearly, progressing further and designing better.

To understand why hand-sketching makes such a difference for me and many designers I know, I did some research. Here’s what I found.

External Memory: Take A Load Off Your Mind, Literally

Cognitive psychologists have been studying the impact of sketching on brain functioning for years, and with good reason: Putting ideas to paper is a powerful way to extend one’s memory. Back in 1972, Allen Newell and Nobel Prize winner Herbert Simon studied long-term memory, short-term memory and — here’s where it gets interesting — “external” memory. They argued that representations such as diagrams and sketches serve our external memory and reduce the burden that we experience when recalling ideas and problem-solving.

Flexibility: Hand-Sketching Improves Your Ability To Restructure Ideas

Consider your initial idea for a project. At this point, it exists only in your mind. All of a sudden, you start giving it (physical) shape in what Jill Larkin and Herbert Simon call “external representations.” You’re basically pulling the idea from your mind and recording it somehow. As long as the idea is in your mind, the number of changes and improvements you can mentally process is limited. Your idea won’t get anywhere unless you manipulate and enhance it.

External memory aids, such as sketches and diagrams, can help us overcome the limited capacity of our short- and long-term memories.

Here’s where hand-sketching saves the day: It enables us to externalize our mental images and achieve something that Ilse Verstijnen calls “restructuring.” Verstijnen works in the Psychological Laboratory at the University of Utrecht and has coauthored several articles about the relationship between imagery, perception and sketching.

Restructuring transforms one configuration into another, and in scientific studies, advanced hand-sketchers score highest at restructuring when they are allowed to sketch. In an experiment by Verstijnen, sketchers were shown to be better than non-sketchers at modifying their initial ideas and coming up with novel changes.

Because of our brain’s limited processing capacity, externalizing our ideas on paper makes it easier to restructure them, transforming the initial structure into a new one.

Another study by researcher Zafer Bilda and his group at Bilkent University in Turkey compared designers’ cognitive processes when sketching on paper versus using software. The study identifies several significant differences: Designers who used paper changed their goals and intentions more frequently and engaged in a higher number of cognitive actions. Changing goals and intentions while sketching is vital because it enables you to pivot your initial idea and to be versatile in your approach.

Interestingly, these results may have less to do with the way we are wired than with the way we have been educated. Can you remember how you first learned to draw, how all of your design courses required physical sketchbooks? That’s right, most of us learned to sketch on paper — and this might actually have affected the way our brain deals with it.

Here comes another buzzword, from our friends in behavioral psychology: conditioning. If paper was one of the first creative stimuli in your life (to the point that, as soon as you saw a blank sheet, you felt the urge to scribble), then it should come as no surprise that your sketching behavior is different on paper than on screen. Regardless of your philosophy of human behavior, we can all agree on one thing: paper has been around far longer than the digital screen.

Don’t get me wrong: Developers of digital sketching devices out there are definitely raising their game and making the lives of many designers easier in exciting, innovative ways. Manufacturers are making the lighting, size and weight of tablets feel unbelievably similar to paper. They’ve come up with ways to make graphic tablets sensitive to stylus pressure and be capable of digitizing paper sketches instantly. As the technology becomes more sophisticated, we can expect better digital sketching experiences. WACOM, a graphic tablet manufacturer, invites sketchers to tag their creations on Twitter with the #madewithwacom hash tag.

Serendipity: Happy Accidents From Unfinished Strokes

When was the last time you sketched a perfect image? It’s safe to say that most of us do not aim for perfection with a pencil and sketchbook. And that is exactly what makes a pencil stroke different from a vector.

Jonathan Fish and Stephen Scrivener authored “Amplifying the Mind’s Eye: Sketching and Visual Cognition,” in which they introduce the idea that “indeterminacies in Leonardo’s sketches elicit mental imagery because automatic mental recognition mechanisms attempt to complete the missing parts and match precepts to memory images.”

Hand-sketching results in inconclusive strokes that open new doors to creativity.

Consider every time you’ve left unfinished strokes, gray ideas over top solid shapes, quick side queries, blank spaces, wobbly lines and figures. Happens all the time, right? These indeterminacies, or “flaws,” which reflect our indecision, are great pointers to new design directions. We lose these when we opt for pixel perfection.

Group Thinking: Connecting Brains Via Sketches

A group of scientists in the Netherlands, led by Remko van der Lugt, observed four idea-generation meetings in which participants used one technique that involved writing and another one that involved sketching. They concluded that sketching stimulates group creativity by enabling individuals to reinterpret their own ideas further and to facilitate other people’s access to those ideas once they are brought to the table.

Collaborating with others in generating concepts is easier when we share sketches that are flexible, unsettled and, thus, full of possibilities.

Not only does hand-sketching improve the idea-generation process, but it provides an effective, visual language that makes it easier for others to understand, comment on and integrate your ideas. This might be even more important in cross-cultural groups, for whom visual sketches can bridge gaps of understanding.

Effectiveness: Better Design Outcomes

Does sketching like a maniac guarantee a better design? The easy answer is no. The subtler answer is that, in certain circumstances, sketching like a mad person could result in a better design. Yes, you read that right.

A useful design mantra is, “I haven’t failed. I’ve just found a thousand sketches that don’t work.”

I ran into this idea while reading one of Maria C. Yang’s studies. She tracked the sketches of a group of engineering students in the idea-generation phase and measured the results according to their final grades and their performance in a contest. She found that the number of concepts that students generated, as evidenced by their sketches, correlated to better design outcomes as long as two things held true: first, the sketches included dimensions and, secondly, the sketches that were significantly tied to the outcome were generated in the first quarter of the cycle (i.e. they were early sketches).

Concentration: Ready, Set, Sketch!

Were you ever in the middle of a major design breakthrough and then were suddenly interrupted? Concentration is key for designers because the creative process is anything but straightforward. The process requires a strong and rare connection between our thoughts, hands and source of inspiration. Its rarity is, indeed, the reason why some of us don’t sleep.

Well, that and deadlines.

There is evidence that sketching aids concentration. Jackie Andrade, of the University of Plymouth’s School of Psychology, tested whether doodling correlated to higher levels of concentration among 40 participants, who tested while taking a telephone call. While we can define doodling as aimlessly sketching patterns and figures unrelated to the primary task, her discovery that it can reduce daydreaming, increase concentration and curb boredom is fascinating.

This helps to explain why some of us find value in carrying our sketchbooks everywhere, pulling them out in the least expected places and in the middle of completely unrelated events.

To recap, sketching stimulates us to a comfortable level — enough to keep us awake, concentrated and engaged. As if this weren’t enough, other studies have found that subjects who consume information on paper were significantly less stressed and tired than those who use screens. Researchers from the University of Gothenburg argued that those who were looking at screens may have been more exhausted because of the “dual-task effect.”

It makes sense. When using a computer, you have to not only complete the task itself, but also figure out your way around the hardware and software. For those of us who learned to sketch on paper, this learning curve feels a lot like stress. For those who are comfortable with graphic tablets and other sophisticated input devices, stress is probably not an issue.

Montessori education encourages children to learn concepts with all five senses.

Some believe that we reach deeper levels of concentration and develop richer concepts when our own hands are the hardware. Regina Rowland, who teaches the “Idea Visualization” course at the Savannah College of Art and Design, has a unique perspective on the matter:

What I noticed when we moved into the digital world was that exercises all started to look the same. All of a sudden, everybody was designing in Photoshop and the quality of the work started changing dramatically. Before, exercises had a character that was unique in each person. I don’t want to ditch digital; there’s stuff in digital that we could never do by hand. But I do think that when you learn how to experience the world in its visual form, you realize that it is important to have a real, multi-sensorial experience and not an abstracted version of the experience.

With digital, you are looking at a screen with 2-D shapes and no interaction. I’ve realized that students who go into a sensorial experience with letters and shapes learn better than those who abstract them.

Now, there are nerves in the tips of your fingers, and I believe that when people draw with their hands it makes a different impression in the brain. There are references to this idea in Montessori education: It is through sensorial experiences that you form structures in your brain, and therefore all their activities and teaching tools are things that children have to do with their fingers.

Talent: Enhancing The Graphic Library In Your Mind

What happens when you continually draw and connect symbols as you sketch? What happens when your brain tries to recall shapes that are appropriate to the idea you are trying to externalize? It isn’t hard to see that the better you become at translating imagery from your mind to paper, the more visual resources you will have to draw on and the easier it will be to retrieve them in the future.

Ian Storer, who lectures in the Department of Design and Technology at Loughborough University, came up with this idea of a “graphical library” that designers can combine and restructure to generate concepts. He states in his paper that “creative sketching and designing requires a body of knowledge to base new ideas upon.”

Would I like to nurture a powerful mind for design? Yes, please.

Hand-sketching forces you to access and cultivate a unique visual library in your mind. As much as I love computers, the Internet and the almighty search engine, would I like to nurture a more powerful mind for design? Yes, please.

Problem-Solving: Unlock Solutions With Visual Synthesis

It is fair to say that most of the problems we face as designers are confounding, fuzzy, indeterminate — the types of problems that common logic stumbles on.

I dare anyone to try to solve these types of problems using only simple paragraphs of text. Writing falls short for most design problems. Jonathan Fish explains this brilliantly in his article “Cognitive Catalysis: Sketches for a Time-Lagged Brain.” He compares our design problems to trees whose trunk and branches are vague or abstract descriptions and whose leaves are images that represent “depictive concrete thought.”

Jonathan Fish explains that our design problems are like trees whose trunk and branches are abstract (usually textual) descriptions and whose leaves are concrete depictions (i.e. images). Most design solutions aim to reconcile these.

He goes on to explain that when you try to solve a design problem that is full of uncertainties, “both description and depiction are interdependent.”

Niall Seery and his colleagues at the University of Limerick propose the best definition of sketching that I’ve ever read:

“Sketching is a sense-making tool which supports the synthesis of visual imagery.”

Ready to improve your flexibility, serendipity, group thinking, effectiveness, concentration, talent and problem-solving? The eight benefits we’ve covered here may be just a few sketches away!

(al ea il)

© Laura Busche for Smashing Magazine, 2013.

October 03 2013


Digital Literacy, Part 1: Cadence

What does it mean to be literate in a digital age? While our conventional definition implies reading and writing, that definition also pays no mind to new media’s inherent malleability. It’s only by scrutinizing the ends to which our digital creations are used that we’ll come to better understand our ability to effect change via those creations.

It’s has been called a publishing platform and a conversation medium, but it’s also been used as a collaborative encyclopedia, a code playground and a canvas for art. Is there anything the web can’t do? (and should there be?)

After all, analog media was relatively simple by comparison. Everything we needed to know in order to think critically about the written word came down to reading and writing. But the web is different. Not only does it allow us to create new ideas along existing channels – we can post on Facebook and/or Twitter, for example – it also allows us to create new channels altogether, such as Tumblr and Medium. So what does this mean for our conventional definition of literacy?

Media theorist Clay Shirky offers a clue. In his foreword to the the book Mediactive, Shirky provides a media-agnostic definition, suggesting that “Literacy, in any medium, means not just knowing how to read that medium, but also how to create in it, and to understand the difference between good and bad uses.” And this definition, in particular, resonated with me (indeed, I might go so far as to say it should resonate with all user-centered designers who seek to understand what it means to create a “good,” useful web), inspiring an investigation to something I’ve currently termed digital- or “web design literacy.”

In the following three-part series I’d like to share digital litearcy as I’ve come to understand it. In the first part (the one you’re currently reading) I’ll recount a story highlighting some of the web’s more esoteric aspects, the elements that make it similar to – but altogether different from – print. In the second, I’ll briefly discuss the prominent double-diamond model of design thinking and explore how “design posture” might affect our ability to navigate that model. In the third, I’ll point to nascent trends in our profession, ways in which both investigative journalism and teaching might pertain to work that we do.

A design villain

In May of 2009, an interaction designer named Dustin Curtis published an open letter on his personal website entitled “Dear American Airlines” suggesting that the company take a look at his vision of what their future home page might look like:

The difference was profound. Instead of providing users with a cramped, uninspiring sea of text, Dustin placed the booking process – arguably the most important interaction on the page – front-and-center. He even included a photo of island getaway. Few people could argue that he isn’t onto something, so that’s precisely when Dustin decided to turn up the heat, asking American Airlines to “fire [their] entire design team,” who, he added, “is obviously incapable of building a good experience.” He concluded by suggesting that American Airlines “get outside help.”

As those watching the saga unfold later learned – in a response from a designer working at American Airlines named “Mr. X ” – what prohibited American from redesigning its website wasn’t a lack of desire or its in-house talent. No, it was their corporate culture. As Mr. X explained it, the public probably wouldn’t see the fruits of his group’s labor for at least another year simply due to the degree to which teams at American depended upon one another (i.e. bureaucracy). This meant that the company actually had two problems: not only did it have a poorly designed homepage, it also had a poorly designed organization that made it difficult to affect change.

In his most recent book, The Connected Company, management consultant Dave Gray tackles this
problem head on, suggesting that organizations of the future adopt a “podular” structure (not pictured above) to allow for more dynamic problem solving. Illustration copyright © Dave Gray. Used with permission.

In many ways the state of affairs at American Airlines probably came as no surprise to Dustin – or anyone else for that matter. Of course they had a poorly designed organizational structure; why else would their homepage have fallen into such disarray? That’s a fair question and, in fact, it’s probably what led Dustin to publish his open letter. A more prudent question, however (one that apparently nobody thought to ask), is: what should American Airlines have done? Clearly they couldn’t just fire their entire design team, as Dustin suggested. How should they have gone from where they were to where they need to be?

The answer is complex. Readers likely have an idea as to where we might start (stakeholder interviews, anyone?), but none of us could possibly devise “a set of steps to take the company from bad to good” without knowing the way in which American Airlines operates on a day-to-day basis. To begin, we’d ask a whole bunch of questions.

It’s the question that drives us

To better understand how a designer might begin to solve the organizational problems plaguing American Airlines, it’s worth taking a step back and more thoroughly considering the role that Dustin played with regards to American Airlines vis-à-vis the publication of his open letter. There are many ways in which Dustin could have expressed his opinion, after all: he could have called customer support; he could have sent an angry letter (you know, in the mail); he even could have written a Yelp review (customers occasionally comment on websites as part of their business reviews). But Dustin didn’t do any of these things. Instead, he published an open letter, subjecting his inquiry to the web’s seldom-discussed-but-nonetheless-profound political affordances.

A “political affordance” is simply an amalgamation of concepts originating from the fields of social science (politics) and psychology (affordances). Whereas a perceived affordance allows an actor – a person, say – to determine the potential utility of his/her implements by way of what he or she perceives (e.g. the shape of a hammer’s head affords hitting, its handle affords holding, etc.), a political affordance describes someone’s ability to assemble and direct a public – to “call an audience into being” – by way of his/her media.

Political affordances have a profound impact on the way in which we create and consume information. By contradistinction, consider a web designer who places a redesigned version of American Airlines in their online portfolio in hopes that the finesse it demonstrates will garner them future employment. This happens all the time. But while both our hypothetical designer and our actual designer, Dustin, have each presented “alternate realities,” the web’s political affordances greatly magnify the ramifications of the ways in which these designers have chosen to express their respective sentiments. Our hypothetical designer’s message is likely considered “friendly” regardless of its reach. Dustin’s open letter, on the other hand, is almost certainly seen as adversarial precisely because of its reach. Not only does Dustin’s letter call an organization into question, it does so in a way that incites others to feel the same.

Distinguishing between these two modes of presentation might seem superfluous – and, indeed, it would be of less consequence – if it weren’t for the sheer fact that questions lie at the heart of what we do: designers ask questions in order to better understand the boundary between form and function; designers ask questions in order to understand what users want; and designers ask (rhetorical) questions when they present wireframes, prototypes, etc. to their team. (None of these actions is explicitly “at odds” with a system, though. Quite the opposite, in fact; designers generally question things in order to attain a shared understanding.)

In his 2009 TED Talk – incidentally given the same year as Dustin published his
open letter – psychologist and author Barry Schwartz “makes a passionate call for “practical wisdom’ as an antidote to a society gone mad with bureaucracy.” This is a challenge that creative consultants frequently face.

The difference today is that the internet forces us to more thoroughly consider the timbre of conversations we facilitate. When criticism happens in private, organizations and individuals are more likely to be open-minded and develop a sense of wisdom. When criticism happens in public, however, organizations run the risk of appearing non-empathic. Many remain silent.

Ultimately, the preceding line of inquiry raises two, related lines questions pertaining to our design process:

  • What makes a question, itself, “appropriate” or “innocent?”
  • What makes a question, itself, “inappropriate” or “threatening?”

In the interest of expediency, the difference – as far as I can tell – is tact. Tact differentiates our ability to get what we want – be that potential work in the case of a student, or a redesigned organization in the case of Dustin Curtis – and our ability to squander an opportunity. Developing an intuition with regards to tact allows us to prudently plan for change over time. In this way, there’s a certain design to Design: Asking deliberate questions in a deliberate order yields a deliberate result.

Grammatically incorrect

Finally we come to the issue of cadence, or the ebb and flow of ideas.

As with political affordances, cadence behaves drastically different across the digital and analog worlds. Online, the web affords both linear and non-linear narratives. In other words, a designer can either architect a system such that a user sees a predetermined set, or “script,” of screens – a checkout path, for example – or she can make it such that a user can navigate those screens in any order that user chooses. The choice is up to the designer. Offline, things are different. Because “real life” requires that we experience events in a linear order – reading an article (as you’re doing right now) or pitching, selling, and actually producing a design project – Design requires a certain kind of sensitivity to the way in which information is paced.

And, as it turns out, this is precisely the function of grammar. What’s more interesting than the Design-grammar analogy, though, is observing the shift that grammar has made as it’s left the the world of traditional media and entered the realm of interactive media. Consider:

  • One of the most fundamental books in the history of grammar is William Strunk, Jr. and E. B. White’s pocket guide to writing called The Elements of Style. Named as one of the “100 most influential books written in English since 1923” by Time magazine, it condenses nearly everything an American-English author needs to know to pace their ideas (outside of words themselves) to a mere 100 pages.
  • Following suit, typographer and poet Robert Bringhurt’s “The Elements of Typographic Style” serves as kind of typographer’s book of grammar. It, too, provides everything a typographer needs to know in order to effectively use type, basic grids, etc. in service of an aesthetic.
  • Finally, comic-book theorist Scott McCloud’s comic book about comics – called “Understanding Comics” – discusses various methods of visual communication. It comprises a kind-of-sort-of “comic-book grammar.”

Star Wars director George Lucas suggests that all forms of art share the same goal: communication. He believes that contemporary educational system should reflect this notion.

By now the pattern is clear: grammar allows (graphic) designers to better determine the way information is paced in traditional media. Now for the shift. Digital grammars appear much less didactic and much more philosophical. Consider:

  • In 2007 computer scientist Bill Buxton authored “Sketching User Experiences,” in which he described the various ways in which designers might affect change over time. Buxton’s allusion to sketching suggests that the product design (UX design) process might more closely resemble a game of pictionary than a traditional publishing process.
  • In 2008, new-media theorist Clay Shirky released his book “Here Comes Everybody” explaining the potential ramifications of a post-Internet society. While extremely well received, the book also raised a number of important, difficult questions surrounding the internet and collective action (many of them dealing with political affordances).

Again I believe the pattern is clear: whereas the grammars defining traditional media (punctuation, typographic convention, grids, and visual language) helped creators better define the cadence of ideas, the grammar defining digital media is potentially much more complex. Designer Paul Boag’s recent post about the nature of the web sums this up well.

Increasingly you are not having to visit a website in order to find certain types of information. For example, if I want to know local cinema times I can simply ask Siri and she will return just the listings required without ever visiting a website. Equally, if I want to know who the CEO of Yahoo is, Google will tell me this in its search results without the need to visit a specific website.

What does a lack of digital grammar mean for designers, those of us who want to provide the best content for our end users?

The journey thus far

This article’s covered a lot of ground. We began with a question relating the analog concept of literacy to its digital equivalent, asking what does it mean to create and consume the web, to understand its good and bad uses? In search for an answer, we first heard the story of Dustin Curtis’s open letter to American Airlines. In light of that, we discussed the internet’s political affordances and the way those affordances galvanized Dustin’s role in relation to American Airlines. This led us to consider the design of the Design process itself. Finally, we discussed cadence, the way in which grammar affords our ability to control the flow of ideas.

In part two of this series we’ll take an even further step back, using the double-diamond model of design thinking to contextualize our work and the concept of design posture to explain how we navigate that model. Stay tuned!

The post Digital Literacy, Part 1: Cadence appeared first on UX Booth.

October 02 2013


Powerful Workflow Tips, Tools And Tricks For Web Designers


Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.

However, some steps can be repeated for every project. These are steps we know and should make as quick as possible in order to have more freedom to experiment with new solutions.

This article presents a collection of tools, tips and tricks that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project.

Ready? Here we go!

Tips And Tricks

Design Workflow

My Secret for Color Schemes
Erica Schoonmaker shares her trick for matching up colors and creating a nice color scheme. Read more…


Useful Aligning and Spacing
Kris Jolls creates squares for the various spaces he has between elements. This cuts down time and makes sure everything is aligned and spaced properly. Read more…

Creating squares for various spacings between elements

The Ultimate Photoshop Web Design Workspace
Jacob Cass shares his set-up for the ultimate Web design workspace in Photoshop. Read more…

The Ultimate Photoshop Web Design Workspace

Coding Workflow

Perfect Workflow in Sublime Text 2
This is a must for all Sublime users. Ilya Grigorik has put together a two-hour tour de force to make you a Sublime ninja! Read more…

Perfect workflow in Sublime Text 2

Development Workflow for 2013
Learn what a modern development workflow looks like, from editors and plugins to authoring abstractions, testing and DVCS integration. Read more…

Development workflow for 2013

Vertical Editing” (with TextMate)
Learn how to vertically edit in general and with TextMate in particular. It pairs best practices with vendor-specific redundant properties. Read more…

Vertical editing (with textmate)

Prevent background-color Bleed on Touch Screens
Add outline: 1px solid #fff to your code to stop background-color bleeding on touchscreens. Read more…

Prevent background-color bleed on touch screens

Quick Tip: Rounded Corners Done Right
Improperly nested corners are a detail that can ruin a brilliant design. Learn how to do it the right way. Read more…

Quick Tip: Rounded Corners Done Right | Webdesigntuts

The //* /*/ //*/ Comment Toggle Trick
This is a little trick to make development faster. Not suitable for production code. Read more…

The //* /*/ //*/ comment toggle trick

Outdenting Properties for Debugging CSS
Martin Sutherland usually ends up adding a ton of properties to figure out how things fit together. Here is a little trick to remove the properties before a project goes live. Read more…

Outdenting properties for debug CSS

Favicons Next to External Links
A little trick to display an external favicon and next to the corresponding link, using simple lightweight jQuery. Read more…

Favicons Next To External Links

DevTools Tips and Tricks
These slides include tips and tricks for performance. You will be surprised what Chrome DevTools can do. (Use the arrow keys to navigate the slides.) Read more…

DevTools Tips and Tricks

Sublime Text Workflow That Beats Coda and Espresso
Andrey Tarantsov talks about jumping into Sublime Text 2 and and setting up a workflow that beats traditional tools such as Coda and Espresso. Watch the video or read more…

Sublime Text Workflow That Beats Coda and Espresso

Speed Up CSS Prototyping
This is a simple trick to overlay a grid or a mock-up over a page that you’re styling. It also allows you to edit content directly in the browser to see how the layout responds to various lines of text. Read more…

Speed Up CSS Prototyping

Git: Twelve Curated Tips and Workflows From the Trenches
12 simple tips for using Git, including: make “git diff” wrap long lines, set a global proxy, and clone a specific branch. Read more…

Git: Twelve Curated Tips And Workflows From the Trenches

The JavaScript “Ah ha!” Moment
This article collects comments of people having their “Ah ha!” moment with JavaScript — that is, the moment they learned something that made JavaScript click for them. Read more…

The JavaScript Ah-ha! Moment

Here are more articles and thoughts to help you improve your coding workflow:

OS Productivity

Alfred workflow tips and tricks
David Ferguson shares tips and tricks for working with Alfred. Read more…

Alfred Workflow Tips & Tricks

SSH: More Than Secure Shell
This article covers less common SSH use cases, such as using password-less, key-based login, setting up local per-host configurations, exporting a local service through a firewall, accessing a remote service through a firewall and more. Read more…

SSH: More Than Secure Shell

  • Share Your Hidden OS X Features or Tips and Tricks
    This is a thread with a whole range of OS X tips and tricks. So far, there are 126 comments, and you can add your own. Read more…
  • Alfred Workflows
    You find various workflows, provided by Isometry, including UNIX man page search and filtering text through arbitrary shell one-liners. Read more…
  • Tricks
    This is a collection of tricks for various areas, collected by Carles Fenollosa. Areas include bash, pseudo-aliases for commonly used long commands, VIM, tools and networking. Read more…




Time-syncing around the globe can be tricky. This tool lets you add the names and locations of people involved to find the best meeting time. Send the synced time to others and don’t risk hard feelings about time-conversion mistakes. Read more…

Timezoneslider: time syncing app

World Time Buddy
World Time Buddy is a cross between a time-zone converter, a world clock converter and an online meeting scheduler. It an online productivity tools for those who often finding themselves traveling, in flight, in online meetings or just calling friends and family abroad. Read more…

WorldTimeBuddy: A sync tool for scheduling meetings

Doodle can’t be recommended enough. It is a easy and uncomplicated tool for finding and scheduling a date that suits everyone — with only one email. Read more…

Doodle: easy scheduling

How to Solve the ‘Sharing Huge Design Files Amongst Teams’ Problem
This article is about how BitTorrent can be used to sync large files between team members. Key problems to overcome were how to share files between designers and between designers and developers and how to resolve points of failure. Read more…

How to solve the ‘sharing huge design files amongst teams’ problem

Screenhero is another tool for collaborative screen-sharing. The great things is that each user gets their own mouse, and both users are always in control. Read more…



SoFresh: Automatically Refreshing Your Browser
SoFresh is a CSS refresh bookmarklet. It allows you to select which files to refresh. The files are refreshed every time you save them, so that you don’t need to refresh your browser. Read more…

SoFresh!: Automatically refreshing your browser

Divvy is a new way to manage your workspace. It enables you to quickly and efficiently “divvy up” your screen into precise portions. Read more…


Shortcat: Keyboard Productivity App for Mac OS X
It takes an average of three seconds to move your hand from the keyboard to mouse, click once, and then return to the keyboard. Shortcat is a keyboard tool for Mac OS X that allows you to keep your hands on the keyboard, saving time and energy. Read more…

Shortcat: Keyboard productivity app for Mac OS X

The Thinkerbot
Logic is the enemy of creativity. By grabbing a steady stream of pure Internet randomness, this app injects non-linear inspiration into any brainstorming session. Read more…

The Thinkerbot: a brainstorming app

SizeUp allows you to quickly resize and position windows with keyboard shortcuts or a handy menu-bar icon. Read more…


DragonDrop lets you set down what you’re dragging, leaving you free to find the destination without having to worry about holding down the mouse button. Read more…


  • Slate
    Slate is a window-management application similar to Divvy and SizeUp (covered below), but free and less limited. It attempts to overcome their limitations by simply being extremely configurable. Read more…

Making Use of the Cloud

SortMyBox works like email filters, but for your Dropbox files. It magically moves files to folders based on your rules. Read more…

Organize your Dropbox with SortMyBox

Servus: For Mac and Dropbox
Give your files some meaning and a nice layout when your share them with others. Servus for Mac easily turns any file on your computer into a branded download page, hosted on Dropbox. Read more…

Create a branded download page with Dropbox

Send to Dropbox
Ever wish you could email files to your Dropbox? With this tool, you can. All you have to do is log into Dropbox, get your unique email address, and start sending files. Read more…

Send to Dropbox

Versioning Your Graphics Files With Dropbox
This quick tutorial explains how you can version graphic files via Dropbox. Read more…

Versioning Your Graphics Files With Dropbox

Create your own music-streaming service with this little app. DropTunes lets you stream music from Dropbox. Add tracks to your playlist, and browse while song is playing. Read more…

DropTunes: Stream music from the Dropbox

This tool lets you send files from a URL directly to the cloud (currently, Dropbox and email) without the need to download them. This is perfect to save on bandwidth when you discover great stuff with your phone on the go. Read more…

sideCLOUDload: Send files from an url to the cloud

  • Post Via Dropbox
    This WordPress plugin allows you to post and edit on your blog with text files uploaded via Dropbox. Read more…
  • Site44
    Site44 turns Dropbox folders into websites. You can edit the HTML locally; this way, your website will always be up to date. Read more…

Design, Color and Image Tools

Hex Color Tool
Hex is a color tool that automatically displays any hex color in darker and lighter shades. Read more…

Hex Color Tool

GuideGuide make dealing with grids in Photoshop easy. Pixel-accurate columns, rows, midpoints and baselines can be created based on a document or selection with the click of a button. Guide sets can be saved for repeated use. Read more…


Ever fire up Photoshop just to multiply a couple of colors? ColorBlendy can do this easily in your browser. Read more…

ColorBlendy - Blend colors with different modes like multiply, overlay, dodge.

CMYK to Pantone
Input a CMYK color code, and this tool will work out which Pantone colors are close. Read more…

CMYK to Pantone

ImageMagick is a command-line program that can do many operations on images quickly and with high quality. It’s especially useful for resizing and sharpening images, generating thumbnails, etc. Read more…


Development and Testing

Reconciling SVG and Icon Fonts
This is the first in a series of three articles on SVG. Romain over at Hull explains how to set up a powerful design workflow, going from Sketch all the way to icon fonts, all automated. Part two shows how to dissect the fonts and go crazy with their components. Part three shows how to do the same with sprites and Photoshop. Read more…

Reconciling SVG and Icon Fonts

Emmet Documentation
Emmet (previously known as Zen Coding) is a Web developer’s toolkit that could greatly improve your HTML and CSS workflow. Read more…

Emmet Documentation

Alias enables you to manage all of your aliases online and to browse a list of cool aliases submitted by others. From there, you can run a single command to copy your aliases back into your profile should you require them. Read more…

Alias: Manage your aliases in the cloud

Anvil is a menu-bar application for managing local websites. It takes your website and serves it up locally with a .dev URL, without requiring you to change system-level configuration files or hack around in the Terminal. Read more…

Anvil for Mac - Run your sites locally

DOM Monster
DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM and other features of the page you’re on, and give you its bill of health. Read more…

DOM Monster Bookmarklet

prettyPrint.js is an in-browser JavaScript variable dumper, similar in functionality to ColdFusion’s cfdump tag. Read more…

padolsey/prettyPrint.js · GitHub

Resemble.js analyzes and compares images with HTML5 canvas and JavaScript. It can be used for any image analysis and comparison need you might have in the browser. Read more…

Resemble.js : Image analysis

Updating large and possibly responsively designed websites can be a hassle. You never know whether a change will break anything. This tool gets screenshots of all of your running websites in different resolutions, so that you can spot any issues. Read more…

Review: Screenshots in different resolutions

BrowserStack gives you instant access to all desktop and mobile browsers, which is great for testing your designs, especially if you cannot afford to buy many devices. Read more…

BrowserStack: Live, Web-Based Brower Testing

Zippopotamus makes working with postal codes and ZIP codes easy. It delivers a free API in JSON response format, supports over 60 countries, is perfect for autocompletion and open for crowdsourcing and contribution. Read more…

Zippopotamus- Zip Code Galore

Here are more development and testing tools you can check out:

Little Helpers

Style Manual
Is English not really your thing, or not your first language? This reference document by Andy Taylor will help you find the right answer to style-related issues. Read more…


13 Bills
This is a great tool for complicated bill-splitting. It’s especially handy when you have to split a bill according to the amount of time people have been around. Read more…

The easy peasy bill splitter

The Universal Packing List
Feed in the details of your next trip (timeframe, climate, gender, accommodation, kids, type of trip, activities, transportation and bag size), and this dynamic tool will work out what you should pack. Read more…

The Universal Packing List

Long Press
This tool simulates the alternate character choice that you have on Android and iOS keyboards. Read more…

Long Press

Sejda is a great online tool for manipulating PDF files when your preferred software is not at hand. It has many advanced features, including merging, splitting and combining. Read more…

Sejda: Edit PDF files online (for free)

If you need a quick and simple invoice, this tool turns your raw data into a presentable invoice. The tool offers five free invoices per month, which is great if you only need to use it every now and then. Read more…

CreateMyInvoice - invoice from your inbox is tool that becomes active when your service experiences downtime of any kind. Activity incidents are prominently displayed at the top of your page for visitors to see right when they arrive.Read more… Hosted Status Pages for Your Company

Something for music lovers. Feed your iTunes library XML file and get a weekly update of new releases from your favorite artists. Read more…

Beathound: iTunes new releases for your library

This tools converts your favorite music or ringtones to MP3, M4A, M4R or CAF format, and converts video to MP4, M4V or MOV format for enjoyment on your iPhone, iPod or iPad. It works both ways. It also includes other handy features that are worth checking out. Read more…

Syncios: Free iPod Transfer, Free iPod to PC Transfer, Transfer App Music Video Photo Ebook from iPod/iPhone/iPad to PC

This is for minimalists who don’t want to deal with cluttered admin interface that makes publishing complicated. Skrivr lets you write, save and publish your writing. Read more…

Skrivr: writing and publishing process made simpler

List of All Countries in All Languages and All Data Formats
This is a great resource that lists all countries in all languages and in all data formats. Read more…

List of All Countries in All Languages and All Data Formats

  • TokenPhrase
    TokenPhrase is a simple gem that generates unique phrases to use in your app as tokens. Read more…
  • Linkrr
    Linkrr is a small tool that transforms multiple unclickable links into clickable ones. Once you’ve gathered all of your links, Linkrr can open them with only one click. In some cases, you’ll have to disable your popup blocker. Read more…
  • LinkChecker
    This highly rated and popular Firefox add-on tests the validity of links on any Web page. Read more…

Useful Chrome Extensions

  • Tab Wrangler
    Tab Wrangler automatically closes inactive tabs but makes it easy to get them back, too. It works similar to AutoClose Tabs for Firefox. Read more…
  • Responsive Inspector
    Responsive Inspector is a simple Chrome extension that allows you to view the media queries of websites you visit. It is very useful when developing responsive layouts because it visually shows what resolutions are defined in style sheets. Read more…
  • Shortcut Manager
    With this extension, change the browser’s default shortcut keys, and assign any bookmarklets or JavaScript actions to your hotkeys. It works like Keyconfig on Firefox. Read more…
  • Auto Login
    Your browser already fills in your user name and password, so why not have it click “Submit,” too? This tool automatically logs you into websites that Chrome has saved a password for. Read more…
  • Tincr
    Tincr lets you edit and save files from Chrome Developer tools. It supports live reloading and saves changes to the right file automatically. Works for Mac, Windows and Linux. Read more…
  • OneTab
    OneTab is perfect for anyone who tends to open too many tabs in Chrome. It saves up to 95% of memory and minimizes clutter by reducing all tabs into one. Read more…

Last Clicks…

Browser Pong
Here is an attempt to expand how you think of the browser. Browser Pong lives between multiple open windows. During play, the space between windows is transformed into a playing field — the abstracted tennis court of Pong. Browser Pong really is thinking outside the box. Read more…

Browser Pong

Talks to Help You Become a Better Front-End Engineer in 2013
Addy Osmani has curated talks that he has found helpful this year. The advice shared in them will equip you with the knowledge to become a better front-end engineer. Read more…

Talks To Help You Become A Better Front-End Engineer In 2013 | Smashing Magazine

The Setup
This collection of interviews asks people from all walks of life what they use to get the job done. Read more…

The Setup

Learn Something Every Day
UK-based design studio Young has published a book of 265 facts to help you learn something new every day. Additionally, you can purchase some great fact shirts. There is also a free iPhone app. Read more…

Learn Something Every Day

  • eBooks Compiled From Stack Overflow
    These books contain the top questions from a selection of the top tags on Stack Overflow. The top questions include those with a score of 10 or greater. Read more…
  • Jourrrnal
    Jourrrnal is a blog that publishes interviews about the workflows of some of the most active and talented Dribbble members. Read more…
  • How I Work
    This page collects little tips on how other people work. Rather than reading blog posts on why one way is better than another, read why one person loves a certain way of working, and judge for yourself whether it’s worth adopting. Read more…
  • My Radical Productivity Experiment
    Michael Schechter has experimented with different approaches to find what works for his own productivity. If you haven’t found a decent workflow for yourself, figure one out. Read more…

Further Reading

There you have it! A collection of great tools, tips and tricks that members of our community have found very useful. Hopefully, some of them will speed up your workflow or solve one of your confounding issues. Maybe they will even inspire you to share some of your hidden secrets of productivity.

If your favorite tool, tip or trick is not in this list, make sure you share it with us in the comments section below. Have any of the above changed you life? If so, let us know more!

(al, il, ea)

© Melanie Lang for Smashing Magazine, 2013.

August 28 2013


On Creative Leadership


I have spent nearly a decade experimenting with a single goal in mind: to create scalable, predictably insightful, inspirational environments. I have led creative teams in these environments, and I’m currently doing it as the Director of Web Interface and Development at Astonish (a digital marketing company in Rhode Island, US).

It hasn’t been easy, because forcing inspiration is impossible. You have to use finesse and let it come to you. What follows is what I’ve found to help my team and me harness inspiration effectively.

Accessing Your Creativity …In The Shower

It’s 4:30 in the morning. The sun is starting to smear pink across the sky, and I’m in bed, working. Laying in bed in the dark is comfortable, but it’s hardly a working environment. Yet, I am solving problems. At this moment, I am more connected with my subconscious (the most creative part of my brain) than I will be at any other time today.

I have been practicing this combined meditation and creative thinking for several months now. It has been a hugely beneficial experiment, which started early one morning in the shower. Ever have a great idea in the shower? I have had hundreds, and I now know why.

Your morning shower is a breeding ground for ideas and sparks of inspiration. When you stumble into the shower shortly after you wake, you’re able to relax and, because you’re still tired, you’re able to reconnect with your subconscious. I’ve found this state to be so helpful in solving problems that I’ve had to devise ways to take notes on the shower wall.

The relaxed state of your morning shower helps you to reconnect with your subconscious. (Image source: Simon Law)

My wife is constantly surprised to find product diagrams, flow charts, code and wireframes written in soap, kids shower crayons and anything else I can find. I’ve even considered painting the walls with idea paint, to have a bit more creativity.

I’m sure you’ve had a spark of inspiration or maybe just a moment of clear insight in the shower. I’ve asked many people about their creative abilities during their morning routine, and the answers always support my assumption. The reason? It’s because your insight, inspiration and creative abilities were always there; they’re just more accessible in that relaxed state because you are not grasping for them.


You see, the harder you grasp to be creative, the more easily it slips through your fingers. Have you ever noticed how difficult it is to sit down at work and just flip on the creative switch? Do you find yourself intentionally distracting yourself? Browsing Amazon, reading your news feed and skimming Facebook are all ways to indirectly access your creative abilities. Sometimes it’s important to turn off your desire to be creative and just let it come to you.

Artists depiction of the right and left brain.
Distraction-free environments help our brains to “take our minds off the problem” just long enough to get the answer we’re looking for. (Image source: TZA)

John Kounios of Drexel University studies the brain and looks for scientific explanations for the delivery of insight. In one study, Kounios asked subjects to solve puzzles while undergoing a brain scan. He found that insight, or the inspiration needed to solve a problem, comes from the visual cortex. However, in the time leading up to a puzzle being displayed on the screen, the subjects’ brain activity was around the temporal lobe. As Kounios explains in his TED talk:

“This is the mind turning in on itself. This is the mind disengaging from the world. This empowers a person to imagine new and different ways to transfer reality, creatively, into something better.”

Our brain looks for a distraction-free environment to get inspired. This might seem a bit contradictory to what I just said. Believe it or not, your intentional distraction (Amazon and Facebook) can help to relax your brain and “take your mind off the problem” just long enough to get the answer you’re looking for.

Managing A Team

This creates an interesting situation for individuals in a corporate environment. Small studios and agencies usually respect and understand the creative process a bit more. I’ve known a lot of directors who understand the need for a little distraction at work, even if they don’t really know why it works.

When it comes to managing a team of creatives, you have to balance finesse and creative leadership. In fact, I like to eliminate the word “manage” altogether. Take a Web designer. A Web designer already needs to manage their time, creative process, projects, clients and more. Isn’t that enough management already?

If you have the right people on your team, they shouldn’t need to be managed — they need leadership. They need someone to pull them to an answer, not push them. If you trust your team, they’ll come through for you. However, they’ll do a much better job of it if they enjoy their work and are trusted to work openly when they want to. Why restrict your team? Why force them to work the way you want them to or even when you want them to?

Trust and good leadership can steer your team to enjoy their work and do a much better job. (Image source:

This notion that a creative team should have working hours, such as 9:00 to 5:00, baffles me. Sure, I get it: Your accounts team answers the phone during that time. Well, the fact is that they don’t need to be inspired to answer the phone. And yes, motivation and inspiration are very different.

Work With The Grain, Not Against It

An extremely talented designer and front-end developer named Jeff is on my Web development team. Jeff commutes 30 miles to and from work every day. Having a set schedule from 9:00 to 5:00 would require Jeff to get up earlier every morning to fight traffic for over an hour. Sitting in stop-and-go traffic and getting frustrated by the people around him doesn’t exactly scream “distraction-free moments of inspiration.”

Having the freedom to arrive at work around 9:30 or 10:00 cuts Jeff’s commute by over 25 minutes. Does this mean that Jeff works less? Absolutely not! Not only does Jeff make up his time, but he also works smarter. And because his day starts off with way less stress, he’s even more likely to enjoy his work and stick around to get the job done.

This is just one example; there are hundreds. Some people like to listen to music while they work; others play Netflix in the background. Sometimes a good meeting can get a team in the right mindset; other times, they just want to be left alone. Lead people with respect and trust and you’ll get so much more out of them. Not to mention that you’ll learn whether they are the right fit for your team.

There is no better way to make the cream rise to the top than by letting it sit for a while. If you keep stirring it, you’ll never get it to settle.

“Rage, Rage Against The Dying Of The Light”

As a leader of creatives, your job is to provide an insight-sparking, inspirational environment, while guarding against distraction.

The creatives on my team work smart and fast. They do this because they are in touch with their brains’ ability to perform different tasks. At 4:30 in the morning, I might be working on a problem that I went to bed with. You might work on a coding problem at 11:00 pm until about the time I wake up. We are all different; the important thing is to know why and how we are different.

I get to know my team and work closely with everyone on it. They all have different needs and like to be communicated with differently. At the same time, they all enjoy working on different types of projects at different times.

Each member of my team has an inspiration schedule, a time when they know they are more likely to be creative. During those times, there are no meetings, distractions or interruptions. This is their time to increase their working memory, to build, to design and to solve problems.

Being a leader, my job is to help them understand what this time means for them and to fight anyone who jeopardizes it. Don’t dismiss this point. It is vital to the clients, products and team that your creatives have the time to do their job right. Remember that they will get the job done either way, because you trust them to come through. Wouldn’t it be better to ensure that they have time during the day to do it, when they have allocated time to do it, rather than bombard them with meetings and problems?

Finding And Feeding Inspiration

It’s as if the sky parts and a divine entity comes down and delivers the answer directly into your brain. Understanding where inspiration comes from or how you’ve solved the problem isn’t easy, but at that point you don’t care because you’re off and running.

In 2013, learning code, understanding design patterns and analyzing data are extremely easy. Our tools, documentation and frameworks are accessible and ubiquitous. What’s both rare and stubborn is a great imagination. The concept of “thinking outside the box” is based on the idea of being creative with knowledge.

Imagination is vital, but without inspiration, it can lie dormant. If imagination is the playground, then inspiration is the gravity that pulls you down the slide, bounces you on the seesaw or propels you on the swing. Without inspiration, imagination is as pointless as a slide in outer space. It’s the powerful force behind creation.

Harnessing inspiration is almost impossible. Yet, we can cultivate ideas by finding patterns in our moments of inspiration. We’ve already talked about relaxation, daily schedules and the link to your subconscious. What about your mood and other factors that play into it?


I love music. In fact, music is the only thing I love more than food. Music comes in so many different forms, is readily available and is creative in itself. I bet you already know that different types of music have different effects on people. Some types help you to concentrate, while others make you want to get up and dance; some types help you to relax, while others keep you up all night.

I remember my science teacher in school telling me that listening to classical music helps mice navigate a maze faster than listening to heavy metal. Is this really true?

Remember when we talked about John Kounios and brain activity around the temporal lobe? Well, that temporal lobe is in charge of receiving auditory signals, such as from music. When your brain activity is focused on this area, it’s redirecting energy from other areas, helping you to concentrate. This, and the fact that music has a direct correlation to increased amounts of dopamine and adrenaline, means you can have a direct and significant emotional response to the right type of music.

When your brain activity is focused on this area, it’s redirecting energy from other areas, helping you to concentrate. (Image source:

Classical music is very rhythmic and, oddly enough, predictable. Classical also usually has a slower tempo, less than 60 beats per minute, whereas pop and jazz have unpredictable variances in tone and rhythm and often a much faster tempo.

Why is this important? Remember that the more opportunities your brain has to turn in on itself, away from distraction, the greater the chance of finding insight. Classical music lends itself to a distraction-free environment and provides relaxation, which the brain enjoys. You’re favorite Coldplay song might trigger a powerful emotional response, but that type of music is actually better saved for menial tasks. Upbeat pop music can help you stay on track by distracting you from what you are doing, which is helpful when you’re inputting data and answering emails.

Vinod Menon, Professor of Psychiatry and Behavioral Sciences at Stanford University’s School of Medicine, has written an interesting article on the subject. In the paper, Menon writes about music’s effect on the brain during an MRI. To simplify, the brain performs better when predictable patterns are in the music. During sudden breaks in the sound, the brain reacts to check on what’s happening. Your brain turns its attention back to the music, rather than stays on what you were concentrating on.

Experiment with this theory on your own. I have found Italian opera to be particularly conducive to creative thinking. Take some time today to create a short playlist on Spotify. Add five to eight of the top-ranked classical pieces, then drop in an AC/DC song. Shuffle the playlist, and then try to focus on a task. I bet you won’t even consciously hear the classical music (once you get into the groove), but when “Highway to Hell” comes on, you’ll be pulled away from what you’re working on, as if waking from a great dream.


Controlling a playlist is easy, but one thing science may never solve is how to control the weather. And what has the human race done for thousands of years when it can’t control something? We try to understand it, which helps us control our response to it.

The things in this world that affect our brain are absolutely amazing. For example, even subconsciously, wet and rainy weather will depress us, while beautiful sunny days will make us happy. So, if we have a big creative deadline and the forecast calls for rain, we must be screwed, right? Wrong.

As Joe Forgas of the University of New South Wales puts it:

“It seems counter-intuitive but a little bit of sadness turns out to be a good thing.”

You see, memory is actually more active and accessible during periods of sadness. Forgas studies the brain and the weather’s effect on it. He found, surprisingly, that subjects retain more information on rainy gloomy days than subjects who are asked the same things on beautiful sunny days. In his book Imagine: How Creativity Works, Jonah Lehrer attributes this as the reason why some tortured artists are so amazing at what they do.

Memory, especially our working memory, is vital to the creative process.

Human RAM

Random access memory (RAM) is a computer’s ability to access data without (for lack of a better explanation) having to dig for it. The human brain works like this, too. Our RAM is called working memory. This working memory directly correlates to our ability to be creative and unique.

If you want to redesign the interface of a Web form, what’s the first thing you do? You go onto the Web, trying to find something. Can you guess what you’re not finding? Inspiration. You’re building a working memory. Whether you know it or not, your brain is retaining everything you see. And your ability to access it randomly later is the working memory in action. The more you see, the more your brain can hold.

I am not a scientist, but I suspect that this is one of the reasons why you have that moment of insight during your morning shower. You try so hard during the day to solve a problem; you’re trying to force the answer by researching and scouring the Internet. During that time, your brain is retaining all that information. Later that night, during REM sleep, your brain catalogs everything it’s seen.

I propose that your mind, tapped into the subconscious during deep sleep while recounting the day’s working memory, is able to solve the problem for you. It’s only after you wake — during that morning routine — that you’re able to access it. This is why forcing inspiration, while impossible, does reap positive results.

Finely Tuned Problem-Solving Sessions

We’ve learned that you can’t force inspiration, and, although we try to control our environment, doing so is hard as well because so much plays into it. The problem is that sometimes you have to be inspirational on the fly. Well, practice makes perfect.

Last summer, I read an article by Seth Godin titled “Impresarios.” In the article, Godin talks about how impresarios “weave together resources and opportunities and put on a show.” This gave me an idea, and I will forever be in Godin’s debt because I am now my own version of an impresario. An impresario is someone who organizes and often finances concerts, plays and theatrical productions. In my case, I organize brainstorming events.

Every month, my team and I enter our planning room for at least three hours. We lock the doors, opening it only for pizza and beer deliveries. Our mission is to solve one problem. In past sessions, we have redesigned the user interface that powers our systems, solved marketing problems by “remarketing,” and found new and creative ways to present information. The role of an impresario has had such a direct and positive impact on the way we do business that I am now introducing the role to every team in our 100+ person company.

Why does having an impresario work? Well, certain rules guide the team to moments of insight:

  1. Identify a very specific problem to solve, and stay focused.
  2. Provide the necessary tools to spark inspiration (white boards, markers, paper, etc.).
  3. Be technology-agnostic! Don’t worry about how you will solve the problem; focus only on the why.
  4. There are no wrong answers; some are just better than others.
  5. Celebrate failures.

My team looks forward to their time spent locked up together because it gives us an opportunity to be creative in front of each other. Support their ideas, and help them grow. Don’t force your opinions and thoughts. If the group is moving in the wrong direction, ask them questions until they find the right path.

Celebrating Failures

Admitting defeat is one thing; celebrating it an entirely other. Only good can come from openness and honesty. We all learn from our own mistakes, but if you don’t share yours, how can I learn from it? Celebrating failures and realizing that “missing the target” isn’t a bad thing will help your team to grow, recover and build things faster.

At the end of the process, my team always has something to show for it. On occasion, we have realized that the problem we set out to solve was the wrong problem to focus on. We failed to find a solution because there was no reason to find one. That in itself was the solution, and presenting the outcome of the session to our company helped us to refocus.

The only failure I’m not comfortable with is the failure to try.

In Retrospect

I’ve found a groove. I go to bed, thinking hard about a problem, and fall asleep trying to solve it. Waking early in the morning and refocusing my efforts brings the solution closer to my consciousness. I’ll often get to work quite early, continually working on the problem. Then, when I feel my creativity beginning to slip, I’ll hit the gym.

Getting my energy level up, increasing my adrenaline and getting my mind off the topic help to realign my thoughts. Then, I hit the sauna for a good 20 minutes. Nothing like 80 °C heat in a quiet room and with eyes closed to restart that relaxed, creative meditation. Then, I head back to work.

Keep in mind that we all have our own ways of getting our minds off topic, and later realigning our thoughts — and making things better. (Image source:

I don’t know if I’ll be able to continue this schedule over time, nor do I expect you to follow it. Right now, I’m treating this as an experiment, and it’s proving to be highly fruitful.

Here are the big take-aways from my experience:

  • Respect your teammates and their periods of inspiration.
  • Protect your team from the day’s distractions and interruptions.
  • Deliver freedom as a gift. You’ll see boundless gains in creativity from the team.
  • Try to more deeply understand your brain and its ability to be affected by its environment.
  • And, of course, celebrate your failures!


Please feel free to share your experiences and thoughts in the comments section below.

(al) (il) (ea)

© Jesse Friedman for Smashing Magazine, 2013.

August 27 2013


Reimagining the 21st-century classroom

Education in America faces tough challenges. Innovative solutions to these challenges can be found when teachers and students apply service design to the classroom, solving short-term problems while also giving students long-term skills.

The 21st-century, American classroom faces major challenges. The threat of the privatization of schools1), the lack of funding, and the erosion of traditional societal institutions, has forced schools to take on the roles of “priests, psychologists, therapists, political reformers, social workers, sex advisers, or parents.”2 Now more than ever, schools are expected to not only teach children subject matter, but to teach life skills as well.

This, in turn, fundamentally changes the teacher’s role in the classroom. Further, legal mandates for test-based performance evaluation have not only trickled down to the teacher’s workload, but threatened their very job. After all, if a computer can teach individualized math better than a teacher and students get higher test scores, why are teachers needed?3 This threat is most acutely manifest by the proliferation of online courses. Michael Sandel of San Jose State University recently foreshadowed the future of higher education in an open letter to fellow professors stating, “Let us not kid ourselves…administrators at C.S.U. are beginning a process of replacing faculty with cheap online education.”4 For teachers at all levels, overcoming internal and external pressures and continuing to provide fundamental value requires an innovative re-envisioning of the classroom and making it a shared experience, one that cannot be replicated by an automaton.

Teachers must overcome the digital-age metaphor of learning, one which compares the human to a computer, putting knowledge into memory, emphasizing logic and measurable outcomes. Teachers must define their role not as data providers, but service providers. The two-fold purpose of education is to teach students to think critically about their world and, ultimately, to teach them to become good citizens. The Service Design techniques and tools – building empathy, customer journey maps, and prototyping – which originally arose to help businesses ideate on tough, multi-faceted problems, should now be used in the classroom to help teachers re-imagine and co-create the student experience.

Class in empathy

Before starting any service design project, designers work to understand the primary actors in their system – indeed, this is a foundational premise for any human-centered design endeavor.

Despite this, teacher‘s often overlook the classroom‘s primary actors, the students. After all, most teachers reason, “I was once a student myself. How could my students experience differ from our own? Neil Postman, the educational scholar and cultural critic, points out the fallacy in this logic:

Most teachers…teach subjects they were good at in school. They found the subject both easy and pleasurable. As a result, they are not likely to understand how the subject appears to those who are not good at it, or don’t care about it, or both.

Teachers, while well-intentioned, may have trouble empathizing with students struggling to understand the curricula or how it relates to them. As a practice in empathy, Postman goes so far as to suggest that teachers teach a subject they are bad at for a year as a way to gain understanding of how many students might feel in their classroom.

From a service-design perspective, teachers can bring more empathy into the classroom by giving students a voice. What do students like to do? What do students want to learn? A simple interview or class discussion can prove quite enlightening. Even switching roles where the student teaches for a day would prove to be enlightening of the other’s experience for both student and teacher.

The student journey

For further insight, students and teacher could employ another service design tool known as the Customer Journey Map. Customer Journey Maps trace the main actors in a system as they interact with its various touchpoints. This, in turn, helps designers discover opportunity areas that might benefit from creative problem solving.

As a classroom activity, a teacher can guide students in groups through making their own “student” journey map of several different time periods: the student’s experience in the teacher’s class, the school day, the student’s year, or even the student‘s entire school career. Doing so provides the teacher with deep insights about what students do outside of his or her classroom. If History class comes after an English class, for example, there might be an opportunity for cross-disciplinary learning cross-class relevant topics might emerge. Understanding the context of the class and getting insights from other classrooms can lead teachers to discover techniques students enjoy in other classrooms and use them in their own. Teachers may even get tough critique and suggestions on how to improve their own classroom from the stakeholders that really matter, the students.

A student journey map exercise also carries the potential to provide deep insight into a student’s life outside of the school environment: what other challenges do students face that might affect their academic performance? By identifying pain points, students and teachers can collaboratively brainstorm possible solutions, creating the ideal journey map to understand how students might better enjoy their school experience. This exercise places both student and teacher in a design mindset understanding that the classroom setting does not have to remain in the status quo. Furthermore, even if student ideas are not implemented, students will be left with the notion that their voice was important, was heard, and did contribute to the structure of their classroom experience.

Life imitates life

Once the teacher and students have created a new classroom model, they should try it out to see if it works. If it’s a success, great. If it’s a failure, even better. As John Dewey, the great 20th-century philosopher and educational theorist wrote, “Failure is instructive. The person who really thinks learns quite as much from his failures as from his successes.” Furthermore, this trial-and-error mentality cultivates one of the principle purposes of education, critical thinking.

Postman, again, writes:

When we incorporate the lives of our ancestors in our education, we discover that some of them were great error-makers, some great error-correctors, some both. And in discovering this, we accomplish three things. First, we help students to see that knowledge is a stage in human development, with a past and a future. Second…we acquaint students with the people and ideas that comprise “cultural literacy” – that is to say, give them some understanding of where their ideas come from and how we came by them. And third, we show them that error is no disgrace, that it is the agency through which we increase understanding.5

Teachers should encourage the prototyping of an idea and create an environment that allows for failure. This should permeate not only into the ideas and environment that students and their teachers co-create, but also into the students’ ability to jump into new learning feeling comfortable with the possibility of failure.

When students and teachers use service design tools to re-imagine their classrooms they fulfill the key purposes of education: thinking critically and being a productive member of society. Through collaboration and group decision making, students learn what it takes to organize and empathize. This makes them better citizens. By being part of their own classroom’s design, students understand that they have an important voice that can lead to change, skills applicable well beyond the classroom.

Designers think critically, and students and teachers must, too. By using Service Design techniques, teachers learn to better understand their students and their changing role in the 21st-century classroom. Instead of the “authoritarian ruler” in charge of imparting a narrow set of knowledge, the teacher becomes a choreographer, setting up the environment to teach and take into account the whole student. Through the Service Design process, both student and teacher realize that the classroom is a prototype that might sometimes fail but never fails to produce some kind of learning.

Excited about the intersection of service design and the classroom? Curious about how to further apply Service Design in Education? Check out these resources and examples:

Note: Service Design Tools are referenced from


  1. “Secondly, we have seen an increased role for national nonprofit and for-profit organizations in providing educational services, and in acting as self-interested players in school politics.” John Thompson, “Seismic Shifts in Education Policy”
  2. Neil Postman, The End of Education, 143.
  3. Motoko Rich, “Study Gauges Value of Technology in Schools.”
  4. Let us not kid ourselves,” the letter said, “administrators at C.S.U. are beginning a process of replacing faculty with cheap online education.”
  5. Neil Postman, The End of Education, 125.

The post Reimagining the 21st-century classroom appeared first on UX Booth.

August 16 2013


InDesign Scripts And Plugins To Speed Up Your Work


Few applications feel as complete as Adobe’s InDesign. First released in 1999 as a direct attack against the then-industry standard, Quark, the page-layout application has been made faster and more feature-rich with each iteration. But even the best applications lack some features. Luckily, Adobe realized this some years ago and opened the doors to allow designers to expand this beloved set of tools through plugins.

Many designers don’t realize how powerful InDesign can be, especially when expanded through plugins and scripts. So, we’ve put together a small collection to show a bit of what InDesign can do. More than anything, these will help you work through your documents and publications much faster, automating the repetitive parts, and freeing you to focus on the fun stuff.

Working With Text

As designers, we spend most of our time dealing with text, ensuring that it’s inviting, easy to read and easy to navigate. We often give the finest attention to text, working with spacing to give the text balance and rhythm, sometimes letter by letter. What follows is a collection of plugins to help you tend to these details.

Line Numbering

Line Numbering

This line-numbering plugin does exactly what it says on the box: it gives every line on a page a number. While InDesign is very capable of working with numbered lists, this plugin comes in handy when you don’t want the main text to display the numbers as you’re typesetting it — for example, because the text is lengthy and you’re still editing it. With this plugin, an extra text frame is added just for the numbers; so, once you delete it, the main copy won’t reflow. This makes editing much easier. “Please change the 34th line of copy” becomes a lot easier than “Please change the copy about three quarters of the way down the page.”

Fitting Text

Text Fitting in InDesign

Sometimes you’ll have set up a grid and want a bit of text — say, a heading or pull quote — to fit the available space to get a sense of how big the text should be relative to the page. You would normally do this by holding down the “enlarge text” shortcut or by punching in random sizes until you get one that fits. With this tool, it’s done for you at the click of a button.

All Caps to Small Caps

All Caps to Small Caps Script

Small caps aren’t simply full capitals made smaller. They’re specially crafted to sit beautifully on a line of text. As Robert Bringhurst says in his brilliant Elements of Typographic Style, “They differ from large caps in stroke weight, letterfit, and internal proportions as well as in height. Any good set of small caps is designed as such from the ground up.” In other words, they add polish to typesetting and prevent awkward strings of capital letters. This script runs through your text and replaces string of full caps with small caps. The best part? Character styling is automatically applied to them (a little extra tracking on small caps is a beautiful thing), so you can tinker as needed.

Proper Fractions

Proper Fraction

Just like the small-caps script above, this one will polish your type by rendering proper fractions, rather than leaving fractions in the clumsy format of two full-sized numerals divided by a slash.

Convert Footnotes to Sidenotes

Convert Footnotes to Sidenotes

Adding footnote is a nice way to clarify information. Even nicer is hanging notes in the margins. With this plugin, footnotes will be converted to sidenotes and put into their own anchored frames; so, as the text reflows and moves about, the sidenotes will move with the text.

Convert Footnotes to Endnotes

Convert footnotes to endnotes

From the same developer as the footnotes plugin above, this one will move your footnotes to the end of the article to which they belong. This is excellent if you’re working on a magazine or journal and the design calls for notes at the end of the article or essay.

Convert Multicolumn Text Frames to Individual Frames

Convert Multicolumn Text Frames to Individual Frames

While confining multi-column text to a single frame is usually best, sometimes breaking each frame into its own box makes the text easier to handle, especially when working with complex grids and formats (in newspapers, for example).

Merge Text Frames

Merge TextFrames Extension for Adobe InDesign

Other times, you’ll want to do the opposite and convert multiple frames to a single one to keep things neat.

Easy Diacritics

Easy Diacritics Characters

This script lets you combines any letter with any accent or diacritic using simple mnemonics — no arcane codes to remember, and no need to open the glyphs panel. If the combination exists as an actual glyph in the typeface, the script will insert that; if not, then it will automatically insert both glyphs and then intelligently kern them to look like a single character. InDesign Secrets explains how this works.

Working With Graphics And PDFs

Second only to text, links are what we spend most of our time on, sometimes creating them right in InDesign, and other times bringing them in as PDFs and TIFFs. The plugins and scripts below will supplement the importing options for both images of PDFs, as well as create graphics in InDesign itself.

Choose Object Style While Placing Pictures

Choose Object Style While Placing Pictures

Placing an image and applying a style is a two-step process that gets boring very quickly (especially if you’re producing a 200-page book for a gallery exhibition). With this script, it’s all automated. Just select an object style and start placing images. The style will automatically be applied, so that you can keep working quickly. (Note that this script was written for CS5.)

Easily Modify PDF Importing Options

Modify the PDF Import Options Very Easily

InDesign has come a long way in how it places PDFs. But once a PDF is placed, the options you’ve selected are locked. This script enables you to configure those options (such as which page of the PDF to show), even after the PDF has been placed.

Import Both PDF and INDD Files

MultiPageImporter for Importing both PDF and INDD Files

Automatically place the pages from a PDF or INDD file onto multiple pages in a document. Quick tip: Both types of files are treated like graphics; so, if you wish to view changes, go back and refresh the original files in the “Links” palette.

Place All Pages of a PDF in InDesign

Placing All the Pages of a PDF Inside InDesign

This PDF-placing script enables you to choose a page range from the PDF you’re placing, as well as the crop type. You can also specify which page in the InDesign document to start placing on (adding new pages as needed), where to place it on the page (with an optional offset), and whether to scale the PDF to the page’s size. If a document isn’t open, it will create one at the size of the PDF and then place the pages.

Column and Bar Graph Tools

Column and Bar Graph Tools

The bread and butter for a lot of designers are things like annual reports, which are often filled with charts and graphs. This script helps you quickly and easily create clean bar graphs based on given values.

Pie Charts Wizard

Pie Charts Wizard

Create pie charts with various options (color tint, size, radio and angle, labels, color mode, etc.). Coolest of all, as you adjust the size of the oval, each segment is automatically recalculated. Also consider testing the beta of Claquos 2.

Automation: Making A Lot Out Of A Little

If you perform the exact same task more than a few times, chances are the process can be automated somehow. Setting up the same type of job over and over (say, when designing calendars) can feel mundane. What follows are plugins and scripts that cut down on some of the repetition in your day.

Adobe InDesign Calendar Wizard

Adobe InDesign Calendar Wizard

Around the same time every year, every other client of ours seems to want a calendar of some sort. This feature-rich script creates a number of different calendars, from simple one-pagers to 12-month multi-page calendars with text, complete with holidays and moon phases.

Font Catalogue

Font Catalogue

Create a simple catalogue of all of the fonts on your system, including all weights and using your own sample text.

  • Developer: KID


Indiplugins :: Wordalizer

Wordalizer is a word cloud generator for InDesign, available as a free trial or a pro version. It supports six languages, has a full word list editor, remembers your settings, lets you control word length, and more.

Scribbler Makes Text Look Shifty

Scribbler - A Shifty Look to Your Text

Wanna give your text some bounce? Set maximum top and bottom gap values, and Scribbler will randomly shift the characters. This is great if you’re working on something with a lot of illustrations, such as a children’s book or an editorial.



FontReporter collects information on the fonts used in your files, checks to see whether some fonts are missing, and tells you whether anything has gone wrong. You can choose to run it on just the current document or on a folder of documents.



The MultiDo plugin enables you to perform multiple undo or redo operations in one step. It automatically tracks the 100 most recent operations. This is incredibly handy when you’re quickly mocking up a design and are fine-tuning the text or images. If you want to jump far back quickly, you can do so, without having to watch as each bit of kerning and tracking you performed in the last hour is undone.



The “History” palette in Photoshop is incredibly handy and is one feature that is missing in InDesign. Luckily, while we wait around for Adobe to rectify this, EasyHistory does the job well, showing all available undo and redo steps in one convenient palette. It’s available as a limited demo or as a commercial version.

Multi-Find and Multi-Change


We often have to clean up the text that clients give us, whether because content is spaced out by multiple tabs, or every sentence is double spaced, or dashes and other typographic marks are not where they should be. This plugin will be incredibly useful for those who work with the same clients repeatedly and see the same issues come up. Multi-Find/Change enables you to batch run saved find-change queries. It’s available as a limited trial or, if you find it handy, a commercial version.

Professionalism With A Click

Who doesn’t like to be seen as a professional? From tracking time spent on work to setting up a job for printing, plugins are available to help you manage your relationship with clients.

Compare Two Documents

Compare two documents

Have you ever had a document crash and then weren’t sure what changes were made between the recovered version and your latest backup? Or perhaps you have multiple designers working on the same document? Or perhaps, during a particularly tense day, you weren’t careful about naming, versioning and saving your files and, thus, got a little lost the next morning? This script lets you compare two documents and see the differences between them, saving you from having to comb through nearly identical files for the slightest changes.

Indys Timer

Indys Timer

Depending on how you track time, something like this could be a lifesaver. It automatically starts when you open a document and stops when you close it. It’s available as a limited free version, or you can pick up the commercial version.



Occasionally, you’ll have to set up your own job for printing, at the very least to give the prepress operator a sense of what you’re aiming for. This script adds crop marks, with options for length, offset, bleed, stroke weight and more.

Print Tools Library

Print Tools Library

Here is a collection of printing aids (for color bars, registration marks, crop marks, fold marks and trim marks). Just drag and drop where needed.

Convert All Text to Outlines

Convert All Text to Outlines

Some printers still require text to be outlined before going to press. Rather than go through it page by page, you can just use this script, which outlines all text in the document and puts it on a separate layer.



Setting up an index can be incredibly laborious. IndexMatic makes the process much easier, with its collection of powerful features and varied options. Boasting an impressive amount of documentation and help, the script will grow on you quickly.

Panel-Based Web Browser

Panel Based Web Browser for InDesign CS5

All too often, you’ll need to load a Web browser to grab some content, verify some information or find a placeholder image. But getting off track in your usual browsing environment is easy. This plugin will keep you focused on the task at hand by opening up a browser window with InDesign’s palette.

Interactive Shortcuts Guide

Interactive Shortcuts Guide

InDesign is simple to work with, but learning all of the shortcuts can be complicated and time-consuming. This interactive guide is worth bookmarking; regular visits to it will help you learn the shortcuts to routine tasks.

Last Click

Tetris for InDesign

Tetris for InDesign

With all the time you’re now saving with these plugins and scripts, why not play a little Tetris in InDesign?


InDesign is a tool like no other in Adobe’s Creative Suite. While features are added to each version of Illustrator and Photoshop to help you create more varied kinds of graphics, InDesign seems to be focusing on streamlining and making the designer’s work easier. It is, then, as much design should be: quiet and out of the way. It’s seemed to me to always lie in the shadow as we apply our design and communication skills to the blank pages before us, keeping all of the best features accessible with a few key strokes.

We’re hoping that with these plugins and scripts, InDesign will become even easier, and quieter, for you to use, helping you to focus on the design at hand, rather than on the tool you’re using to bring it to life.

(al) (ea)

© Alexander Charchar for Smashing Magazine, 2013.

August 13 2013


Designing with Code

To code or not to code? For designers, that’s a very contentious question. Clients like designers who code because (among other reasons) that’s one less body on payroll. Design advocates, on the other hand, often see code as a technical limitation that stifles creativity. To make matters worse, the information ecologies we all work in refuse to stand still. By looking carefully at some of our favorite arguments, however –and by taking them within the context of our ever-evolving digital landscape –we can begin to make a case for when working in code makes sense.

Several years ago, Andrew Maier penned an article on the use of prototypes in website design and development. In light of my own recent work in prototyping, one of the comments to that article stood out:

Any kind of prototype that involves programming or markup sounds scary to me –that’s the fastest route to a “developer-y” looking site rather than a truly designed –graphically as well as functionally designed –site.

This comment caught my eye because it is the same concern I often hear today, a full three years later. And here’s why this is a big deal: given the content and information architecture challenges that the responsive, multi-context web presents there are now better reasons than ever before to integrate coded prototypes into the design process. By paying close attention early on to the integrity of the narratives we create at the most basic level of communication, we can build the foundation necessary to effectively articulate those narratives far and wide.

Why we’re afraid to commit

If pressed to describe their relationship with code, many designers would hunt around for the “it’s complicated” checkbox. We may have already been sold on prototyping (see Todd Zaki Warfel, Jeff Gothelf, and Stephen Hay if you’re not yet convinced), but we’re still afraid of our beautiful UX getting all bent out of shape and smudged up by an engineering toolset (and mindset).

The source of this dread is no mystery. In his seminal 2004 book on design in technology, The Inmates Are Running the Asylum, Alan Cooper writes that “when engineers invent, they arrive at their solution through a succession of practical, possible steps. Because of this, their solution will always be a derivative of the old, beginning solution, which is often not good enough.” Cooper goes on to argue that interaction designers are in a unique position to break this cycle of derivative solutions by “keep[ing] a healthy suspicion of all assumptions about what cannot be done.”
Whether they’ve read Cooper’s book or not, many designers have implicitly heeded this advice and translated it into an “I design it, you build it” workflow. In many cases, this delivers the results Cooper promises: designers and developers frequently challenge one another to synthesize new ideas and novel solutions –ideas and solutions neither of them would have been able to come up with on their own.

What’s different now

With the growing need of responsive web solutions and adaptive, flexible content, there are new reasons for designers to roll up their sleeves and get into “code.” Since HTML is, at its core, a layer of description wrapped around content, working at this level helps designers think more critically about their content and about the architectural implications of that content. While considering markup won’t replace our content audit, user research, or taxonomy work any time soon, it can increasingly function as an important part of the design process.
HTML prototyping helps us discover and vet the IA step Information Architect Dan Klyn refers to as “choreography,” or the “appropriate unfolding” of content: the link between taxonomy and the interaction-level design typically represented in prototypes. When we address the architectural underpinnings of our content’s choreography early on, we ensure that we haven’t driven off course, and left our intent on the side of the road. What’s more, the benefits of HTML prototyping present themselves when we apply even the most basic of HTML’s elements. Creating a linear, semantic document calling out our navigation, header, teaser, aside, and paragraph elements forces us to think critically about how these elements relate to each other in context.

Now look at that same document on a tablet, or on a phone. Does it tell the same story? Does (should) it follow the same choreography? We might find that our content needs to break into summaries or teasers at different places in different contexts. We might also find that the navigation patterns that work on a phone are overly simplistic with regards to the desktop experience. Each of these insights forces us to think about how our content models need to adapt to accommodate new contexts. (For an in depth and practical look at creating content models, see Sara Wachter-Boettcher’s Content Everywhere.)

Why it matters

In her brilliant book Content Strategy for Mobile, Karen McGrane encourages us to stop thinking about content in terms of “pages” and to start thinking about it in terms of “packages.” A content package might contain things like long and short headlines, teasers, summaries, body copy, and pull quotes. Early HTML prototyping helps us decide which of these elements we need –and helps us think of them as pieces that combine across contexts to create a cohesive experience.
Whereas many of the excellent, commercially available prototyping tools are centered around interaction and design, early HTML prototyping is a way for us to begin to prototype our information architecture –and to test the architectural hypotheses we’ve laid out in our conceptual and taxonomy work. It also puts us in the right frame of mind to break out to the page metaphor.

In her keynote at DrupalCon in May, Karen McGrane traces the history of the page metaphor. This ubiquitous concept comes to us –surprise –from Xerox, maker of printers. Of course they would think about content in the digital age as coming together on pages: pages have been the cornerstone of their business for over a century! When we move to thinking of content as a resource that can be pulled into view when and how it is needed, we’ve already taken a huge step toward creating the responsive and adaptive information environments we need to meet the demands of the mobile ecosphere.

How to get started

So how can you get started designing with code? Both Jeff Gothelf and Stephen Hay stress the importance of sketching. I’ll reiterate that here: although our goal is to eventually end up in code, sketching out your rough ideas before diving into markup will keep you from committing to mediocre ideas you’re reluctant to change because they’re already saved to disk.
Use pen and paper or a whiteboard to work out a hypothesis and then write your markup to match. Does it work with your content? Check it out on mobile, on a tablet. Revise and refine. Consider how your content needs to adapt to convey the same concepts in different contexts.

There’s no way around the fact that you will need to understand the basic elements of HTML and CSS. Fortunately, these are not overly complicated and online resources abound. HTML alone allows you to author structured content in a semantically correct way. CSS (with help from media queries) allows you to shape the visual hierarchy of content and adjust it to different contexts.
If you’re new to HTML and CSS, learn a little bit at a time –and fake what you can’t build. You don’t need to have a fully functional AJAX calls or form validation in order to gain insight. Stephen Hay suggests capturing and printing screenshots to show to stakeholders early in the prototyping process. This way you can show exactly the ideas you want to convey without risking stakeholders getting caught up in the fact that a button doesn’t work, or links aren’t yet connected to their destinations.
Finally, allow your process to grow and develop over time. It will. We may never strive –or want –to be standards-compliant, cross-browser, front-end rockstars, but with a little bit of knowledge, practice, and experience, HTML prototyping can become a valuable addition to our content strategy and information architecture toolkit.

The post Designing with Code appeared first on UX Booth.

August 08 2013


Where UX Comes From

Earlier this week, we interviewed Leah Buley, author of the new book UX Team of One. Leah talked about her own experiences as a UX team of one, and how her approach has changed over time. Now we are very excited to present an excerpt from the book itself.

As a team of one, knowing the history of user experience helps you reassure people that it’s not just something that you dreamed up in your cubicle. If I were to sum up the history of UX in a few short sentences, it might go something like this: villains of industry seek to deprive us of our humanity. Scientists, scholars, and designers prevail, and a new profession flourishes, turning man’s submission to technology into technology’s submission to man. Pretty exciting stuff.

UX has a long and storied history that intersects with other business, design, and technology developments that your colleagues may be familiar with.

Now here’s the longer version. User experience is a modern field, but it’s been in the making for about a century. To see its beginnings, you can look all the way back to the machine age of the late 19th and early 20th centuries. At that time, corporations were growing, skilled labor was declining, and advances in machine technology were inspiring industry to push the boundaries of what human labor could make possible.

The machine age philosophy was best exemplified by people like Frederick Winslow Taylor and Henry Ford, who both pioneered ways to make human labor more efficient, productive, and routinized. But they were criticized for dehumanizing workers in the process and treating people like cogs in a machine. Still Taylor’s research into the efficiency of interactions between workers and their tools was an early precursor to much of what UX professionals think about today.

Frederick Winslow Taylor, the father of Scientific Management, pejoratively known as Taylorism.

The first half of the 20th century also saw an emerging body of research into what later became the fields of human factors and ergonomics. Motivated by research into aeromedics in World War I and World War II, human factors focused on the design of equipment and devices to best align with human capabilities.

By the mid 20th century, industrial efficiency and human ingenuity were striking a more harmonious relationship at places like Toyota, where the Toyota Production System continued to value efficiency, but treated workers as key contributors to a continually improving process. One of the core tenets of the Toyota philosophy was “respect for people,” and it resulted in involving workers in troubleshooting and optimizing the processes that they were a part of. As one example, workers at Toyota factories could pull a rope called the Andon Cord to stop the assembly line and give feedback if they saw a defect or a way to improve the process.

Around the same time, industrial designer Henry Dreyfuss wrote Designing for People, a classic design text that, like the Toyota system, put people first. In it, Dreyfuss described many of the methods that UX designers employ today to understand and design for user needs, as shown below. In Designing for People, Henry Dreyfuss writes “when the point of contact between the product and the people becomes a point of friction, then the [designer] has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient—or just plain happier—by contact with the product, then the designer has succeeded.”

At the same time, some interesting parallel movements were taking shape. A small handful of academics were doing research into what we now describe as cognitive science. As a discipline, cognitive science combined an interest in human cognition (especially human capacity for short-term memory) with concepts such as artificial and machine intelligence. These cognitive scientists were interested in the potential of computers to serve as a tool to augment human mental capacities.

Dreyfuss created Joe (and a companion diagram, Josephine) to remind us that everything we design is for people.

Many early wins in the design of computers for human use came from PARC, a Xerox research center founded in the early 1970s to explore innovations in workplace technology. PARC’s work in the mid-70s produced many user interface conventions that are still used today—the graphical user interface, the mouse, and computer-generated bitmap graphics. For example, PARC’s work greatly influenced the first commercially available graphical user interface: the Apple Macintosh. The term user experience probably originated in the early 1990s at Apple when cognitive psychologist Donald Norman joined the staff. Various accounts from people who were there at the time say that Norman introduced user experience to encompass what had theretofore been described as human interface research. He held the title User Experience Architect, possibly the first person to ever have UX on his business card. Norman actually started out in cognitive psychology, but his writing on the cognitive experience of products, including technological products, made him a strong voice to lead and inspire a growing field. According to Don Norman, “I invented the term because I thought Human Interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.”

Norman’s book The Design of Everyday Things is a popular text that deconstructs many of the elements that contribute to a positive or negative user experience. It’s still pretty much required reading for anyone who is interested in UX.

With the rise of personal computing in the 1980s and then the Web in the 1990s, many of these trends converged on each other. Graphical user interfaces, cognitive science, and designing for and with people became the foundation for the field of human-computer interaction (HCI). Suddenly, more people had access to computers and, along with it, a greater need to understand and optimize their use of them. HCI popularized concepts like usability and interaction design, both of which are important forebears to user experience. In the Internet bubble of the mid and late-1990s, new jobs with titles like “Web designer,” “interaction designer,” and “information architect” began cropping up. As people became more experienced in these roles, a deeper and more nuanced understanding of the field of user experience began to develop. Today, user experience is a rapidly growing field, with undergraduate and graduate level programs being developed to train future generations of professionals to design products for the people who use them.

Enjoy this? Get the full book at Rosenfeld Media and use code UXBOOTH for 20% off!

The post Where UX Comes From appeared first on UX Booth.

August 06 2013


One to Many: An Interview with Leah Buley

Everyone’s been there: “going it alone.” Learning, prodding, and making sense of a problem – all in complete isolation. Sometimes the hardest thing in that situation is knowing that, regardless of whether or not we succeed or fail, we’ll have no one to share that outcome with. And that’s exactly what makes Leah Buley’s story so compelling. In her latest book, UX Team of One, Leah explains how we can beat the odds and feel that sense of camaraderie even when we’re the only person ensuring that our organization practices design in a user-centered way.

I first heard of Leah Buley from her presentation at UX Week 2008 titled, not surprisingly, UX Team of One. And at that time I could certainly empathize: I worked as the sole – and therefore “lead” – interaction designer at an agile development consultancy. By the end of the presentation I couldn’t help but share it with my colleagues and friends.

You likely saw something about it on UX Booth’s Twitter feed. Shortly thereafter, Leah received a book deal with Rosenfeld Media, giving her a platform to bring her message to the masses (well, the print-based masses).

Recently published by the gang over at Rosenfeld (PS: use code UXBOOTH if you decide to purchase a copy), I didn’t hesitate to reach out and ask Leah what I felt to be pertinent questions. Namely, it’s been four years since her presentation. That’s quite a while in terms of our industry. And not only that, but Leah’s made quite a transition herself in that time – from being a team of one to being an in-house designer at Intuit. Read on to hear Leah’s thoughts on her transition as well as a chance to win a copy of your own!

Congratulations on the book, Leah! To even begin to codify user experience design is an incredible feat. Now that you’re done, will you ever look at our craft the same way?

Thanks so much, Andrew! It’s pretty thrilling to have a book out and alive in the world. Truthfully, it took me so long to write it that I was secretly worried that its time might have passed. But the feedback has been really heartwarming, and it would seem that there are still lots of “UX teams of one’ in the world. So, phew! Thank heavens for that.

As for our craft, I don’t know. I feel like the more I learn, the less I know. When I look at the book, I realize how much is not included in it: responsive design, service design, lean UX, augmented reality, big data, flat design, the internet of things, retrofuturism, flying cars (well, self-driving, at least). There are so many new approaches and methods and possibilities emerging all the time. (Thankfully! That’s what keeps it interesting.) that I wince a little when I think about everything that’s not included. But it’s ok. When that happens, I take a deep breath and pour myself a glass of wine and reassure myself that my goal wasn’t to be comprehensive but rather to capture a mindset that can help user experience professionals win support and influence better work. I hope I’ve accomplished that.

You’ve made quite the transition since your initial presentation, switching companies as well as roles. How has your approach changed over the years?

When I started doing UX work I was full of misdirected bravado. I had this idea that UX designers should be able to fight for what’s right for users. I believed my job was to come in with guns blazing and challenge teams to reinvent their products.

I think the biggest change to my approach is now I focus less on the fight and more on the process. Consequently, I have less bravado and more innate confidence. I’ve become more confident because I’ve been through the research and design process repeatedly enough to know that it works. I have trust in the process. There seems to be a moment on every project where I feel like the solution is hard and unknowable, and I can’t possibly imagine how we’re going to figure out what to do. But I just let myself keep marching forward.

It sounds weird but I liken this to walking off a cliff. I walk off a cliff – into the abyss of the problem – and trust that insights gleaned from observing real people will point the way. And somehow they always do. I used to be afraid to let my colleagues know that I was in the abyss. Now, I try to be transparent about it; I try to help other people get comfortable with being in the abyss, too.

I’m actually leading a really complicated design project right now. The goal is to bring consistency to a user experience that connects a bunch of disconnected products while also bridging brand and product strategy and UX. It’s got, like, four dozen stakeholders. It’s a beast. Some days are really hard. Those are definitely falling-off-the-cliff days. But even on the hard days, I can remind myself that 1) I know how this process works and I just need to keep moving ahead, and 2) in the end we’ll have something markedly better than where we started. And I know this is true because I’ve been through enough messy UX projects to know that the user-centered design process will get me there.

You’re presently a design strategist at Intuit – a company who, I imagine, employs quite a few UX designers! In other words, you’re hardly a team of one anymore. What philosophies and practices mentioned in your book apply “UX teams of many” and what new techniques/practices have you learned?

I have a great job. I get to work on ambiguous design problems that cut horizontally across a large organization with a lot of vertical structures. Sometimes I focus on product-oriented, customer-facing design problems—things that affect our products – and sometimes I focus on process-oriented, internal-facing design problems – things that affect how we work. In both instances, the key to success is (and always will be) people. My job is to find ways to bring everyone along for the ride. In that way, actually, all the philosophies and practices from the book still apply. Intuit has an extremely large user experience community, and yet I still feel like a UX team of one. And that’s not because I’m unsupported, it’s just the nature of working with a cross-disciplinary team, which just about every UX professional does.

I’ve also add a lot of new techniques to my toolkit that I picked up at Intuit. Intuit has this really phenomenal program called the Innovation Catalyst. (Not invented by me, alas. Here, I’m just an eager student.) Basically, they train hundreds of people throughout the company in design thinking skills, and then send those people back into every branch of the organization to act as facilitators and coaches for design. The Innovation Catalyst program teaches loads of methods that run the gamut from customer research to generative design to rapid prototyping and experiments. One of my current favorite methods is this poster-sized canvas called the NEXT tool. Using the NEXT tool, teams answer some really interesting questions about their product vision, their “leap of faith” assumptions, and various hypotheses that they ultimately need to test with users. The NEXT tool is really complementary to the Lean Startup approach.

Another, simpler tool that I learned at Intuit that I really love is called a brainstorm box. If you’re doing a team brainstorm on product ideas, just put a box in the middle of the table with thought starters written out on sticky notes. If you get stalled, pull out a sticky from the box and, voila, brainstorm re-ignited. Some example thought starters: “What if it had to be purely mobile?” “What would be the opposite of our last idea?” “What would get us fired?”

Many people who find themselves as the sole UX professional in a company struggle with how much they need to “teach” the rest of their team. What are the essential principles a UXer should teach his or her team in order to be successful?

First and only principle: go watch some users. Actually, I wouldn’t even call it a principle. Call it a suggestion. “Hey, let’s go watch some users.” All knowledge derives from that. The ability to envision the product from a user’s point of view is like a muscle that can be strengthened. And like a muscle, it responds well to repetition. Jared Spool has written about user exposure hours and the high correlation between the number of hours a team spends watching users and the overall quality of their product. If you can get your team to take the time to actually watch real people in action (whether it be a usability test, exploratory research, or even lean-style rapid experiments) they will be strengthening that muscle. This makes the whole team better informed about user needs. But just as importantly, it will make them more curious and empathetic about users in general, which is how a fan of UX is born.

The second half of the book is comprised entirely of user-centered design activities and methods and serves as a wonderful resource for anyone working in UX. What gave you the idea to structure your book this way?
The structure of The User Experience Team of One was inspired primarily by my deep love for reference books. I covet and collect reference books of all kinds—cook books, dictionaries, craft and activity books. In my first job out of school, when I was still muddling my way through HTML and CSS, a co-worker gave me a copy of O’Reilly’s Javascript: The Definitive Guide. It was like my bible, the first reference book for my professional career. I loved its structure—this highly glanceable, easy-to-peruse manual for making interesting things. Ever since then, I’ve loved and looked for books that have clear, reassuringly repeatable structures. Surprisingly few UX books have that ’cook book’ quality. Two books that do this well are Universal Principles of Design and Universal Methods of Design, both of which contain one utterly complete, bite-sized thought per page.

That’s a wrap, guys! Thanks, again, Leah, for taking the time to share your thoughts with readers.

As for the giveaway, here’s how that works: just follow @uxbooth on twitter and leave a comment on this post answering the question: “What user-centered design technique do you rely on most frequently and why?” Be sure to include your twitter handle in your comment and to leave it before this Thursday at midnight PST. We’ll contact three lucky winners over Twitter. Good luck!

The post One to Many: An Interview with Leah Buley appeared first on UX Booth.

July 25 2013


Introduction To Photoshop Scripting


Automation is useful in the work of every designer. It saves precious time on repetitive tasks and helps us solve certain problems more quickly and easily.

You can automate your workflow in Photoshop with actions, which are pretty popular and which most of you already know about and use. Today, we’ll introduce you to an advanced automation technique: scripting. All you need for this is basic knowledge of JavaScript, which some of us Web designers already have.

I’ve known about Photoshop scripts for years but decided to really dive in a few months ago. I had avoided it because I thought it was the domain of smart math-minded programmers. I was wrong, and today I’ll show that, although it requires some basic programming skills, scripting isn’t hard to grasp.

But first, we have to answer the obvious question.

Why Do We Need Scripts?

Why should we would learn to script if Photoshop already has pretty nice actions? The answer is interactivity. When you use an action, you can’t really control how it behaves in different situations; it is like a videotape that just keeps playing again and again without any change.

Why We Need Scripts?

A script is more dynamic; its behavior changes according to the parameters you input or the context of its application. Sounds useful, no?


You don’t have to be an advanced programmer to be able to write scripts; I’m just a graphic designer, like most of you. But you should at least have a basic understanding of JavaScript and some experience with properties and methods to get the most out of this article.


If you are not familiar with JavaScript at all, fear not! There are plenty of places to learn the basics of programming. Codecademy, for example, has pretty neat interactive lessons.

I work in Adobe Photoshop CS5, but everything we’ll cover applies to newer versions, too; Adobe hasn’t made any major updates to its scripting API since CS5. I will refer to the latest version of the scripting documentation, though, which is CS6.

Getting Started

When you record actions in Photoshop, you set the order of the steps to achieve a certain result — that’s your algorithm. Then, you press “Record” and replicate them in Photoshop one by one. Scripting is similar, but instead of doing these steps in Photoshop, you write them down as lines of code. Most actions that you do in Photoshop have their own script equivalent as a function.

Start here

Let’s say you are creating an action that scales a document to 150% of its original size. You’d go through these steps:

  1. Open Image → Image Size.
  2. Enter 150% in width and height.
  3. Hit “OK.”

The same process with a script would look like this:

  1. Call the application: app
  2. Target a document: activeDocument
  3. Call the function to resize the image: resizeImage(width, height)

And the code would look like this:

app.activeDocument.resizeImage("150%", "150%");


There are three ways to write scripts for Photoshop: using AppleScript on Mac, VBScript on Windows or JavaScript on either platform. I use the third because it is cross-platform and I already have some experience with it.


Adobe has its own utility for writing scripts, called ExtendedScript Toolkit.

Adobe ExtendedScript Toolkit
The main window for Adobe’s ExtendedScript Toolkit. (View large version.)

The toolkit comes with Photoshop, and you can find it in the following folder:

  • Mac OS X
    /Applications/Utilities/Adobe Utilities CS6/ExtendScript Toolkit CS6/
  • Windows
    C:Program FilesAdobeAdobe Utilities - CS6ExtendScript Toolkit CS6
    (or Program Files (x86) for 64-bit machines)

The user interface of the ExtendedScript Toolkit is pretty straightforward. To start writing scripts, first select the target application in the drop-down menu. If Photoshop is running, then look for the green chain icon near the drop-down menu:

Application Select

Now you can write something like this:

alert("Hello Photoshop!");

Press cmd + R (or just hit the “Play” button in the toolbar) to run your script. ExtendedScript Toolkit should switch to Photoshop and show an alert box:

Hello Photoshop!

ExtendedScript Toolkit has some other neat features for debugging scripts, but this is enough for this article. You can learn more about how to use it by going to Help → JavaScript Tools Guide.

You can use any plain-text editor to write a script; just save it as a .jsx file. To run it, you’ll have to go to File → Scripts → Browse in Photoshop and select it. Alternatively, just open the script file with Photoshop. You can also add a line of code at the top of the script so that the file always opens in Photoshop:

#target photoshop

Save your scripts in the Photoshop/Presets/Scripts/ directory, and access them with File → Scripts. You can also set up a hotkey; just go to Edit → Keyboard Shortcuts, navigate to File → Scripts → [your script’s name], and set the shortcut you want.

ExtendedScript Toolkit can run and debug code from the integrated development environment, and it has an object model viewer built in, which is useful. So, I recommend using the toolkit to write your scripts. Unfortunately, the Mac version crashes sometimes, so keep that in mind.

Photoshop Object Model

To make writing scripts easier, you should understand how things relate to each other in Photoshop’s Document Object Model (DOM). Understanding it is not so hard if you look at Photoshop itself. The main object in Photoshop’s DOM is the application. In the application, we have a collection of documents that are currently open in Photoshop.

Each document contains elements — such as layers (called ArtLayers), groups of layers (LayerSets), channels, history states and so on — just like in a regular PSD document.

A simplified visualization of Photoshop’s DOM is below. A more detailed containment hierarchy can be found on page 12 of “Adobe Photoshop CS6 Scripting Guide” (PDF).

Simplified visualization of Photoshop API
A simplified visualization of Photoshop’s DOM.

Each of these objects has its own properties and methods that you can work with. For example, to change the opacity of the selected layer in a document, you would go to Application → Document → Layer → Opacity and set the desired value. The code would look like this:

app.activeDocument.activeLayer.opacity = 50;

As you may have guessed, activeDocument and activeLayer determine the currently selected document and layer.

You can find descriptions of most objects and their properties and methods in “Adobe Photoshop CS6 JavaScript Scripting Reference” (PDF), or in ExtendedScript Toolkit by going to Help → Object Model Viewer.

Let’s see how this works in a real-world example. In this next section, we’ll write our own script based on an action.

Remastering The RotateMe Action As A Script

A few years ago at Christmas time, I had an idea for an action to help me draw snowflakes.

Drawing Snowflake 101

  1. Draw one stem of the snowflake with a pattern.

    Step One

  2. Duplicate the stem, and rotate it a few degrees.

    Step Two

  3. Repeat the second step until you have a full circle.

    Step Three

Duplicating and rotating each stem manually is tedious, so I came up with an action to automate it. The algorithm looks like this:

  1. Duplicate the stem.
  2. Rotate it by however many degrees you’ve chosen, using the Transform tool.
  3. Duplicate the layer.
  4. Use the “Repeat Transform” function.
  5. Repeat steps 4 and 5 until you have a full circle.

Pretty neat. But the action had a disadvantage: You can set only a certain number of stems for the snowflake, according to the number of degrees you set in third step of the algorithm.

Back when I wasn’t familiar with scripting, I just made a few versions of the action, each of which produced a snowflake with a different number of stems.

Today, we will remaster this action as a dynamic script that takes your input on the number of stems. Let’s get started!


When you start writing a script, defining the algorithm first before digging into the code itself is always a good idea. In our case, the algorithm will work like this:

  1. Ask the user to enter the number of stems.
  2. Calculate the rotation angle.
  3. Duplicate and rotate the layer by the number set in the first step.

Let’s start with saving the current or selected layer to a variable for further use:

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

Note that in JavaScript, you can mark a line with double slashes (//) to make it a comment. Comments are used to describe parts of code for future reference and don’t affect the behavior of the script.

Let’s move on to our algorithm now.

1. Ask User for Input

We can take input from the user with the prompt(message, default value[, title]) function. This function shows a dialog box with the message and an input field that contains the default value. When the user hits “OK,” the function returns the inputted value; so, we have to save it to the variable to be able to be used.

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("Processing """"
How many stems do you need?", 12);

Note that I used in the message, so the dialog box will show the name of selected layer.

On Mac OS X, the first line of the message is in bold and functions as the title. So, our main message should be on the second line. To make a new line, type .

In Windows, you can specify a third argument in the function to set the title:

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("How many stems do you need?", 12, "Processing ";

If we run the code in Photoshop, it will show this dialog box:

Prompt dialog

When the user hits “OK,” the inputted value will be saved to the stemsAmount variable. If the user clicks “Cancel,” then the function will return a null value. We’ll use this later.

2. Calculate the Rotation Angle

To calculate the rotation angle, we have to divide 360 degrees (a full circle) by the number of stems:

// Calculate the rotation angle
var angle = 360 / stemsAmount;

3. Duplicate and Rotate

Now we have everything we need to make duplicates of our stem. To do this, we’ll use the for loop. It lets us repeatedly run lines of code as many times as we’d like. Our loop will look like this:

for(var i = 1; i < stemsAmount; i++){
	// This code will run "stemAmount - 1" of times

Note that the first instance of an object in programming has the value of 0, but because our first layer is already on the canvas, we’re starting the loop from 1 instead.

To duplicate and rotate our layer, we will use the duplicate() and rotate(angle, AnchorPosition) methods: the number of layers to be rotated in angle multiplied by the indexed number of duplicates. AnchorPosition determines the point around which the layer will rotate. You can see this point when you use the Transform tool in Photoshop — it looks like a small circle with a crosshair. In scripting, it has only 9 specified values — i.e. the 9 positions of the anchor point:

AnchorPosition visualization

In our case, it is the bottom center of the layer, BOTTOMCENTER. Photoshop uses a lot of other constants here and there in some of the functions, which you can find on page 197 of “Adobe Photoshop CS6 JavaScript Reference” (PDF).

So, our loop will look like this:

// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
	// Duplicate original layer and save it to the variable 
	var newStem = originalStem.duplicate();

	// Rotate new layer
	newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);

And the completed code will look like the following. You can try to run it.

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt("Processing """"
How many stems do you need?", 12);

// Calculate the rotation angle:
var angle = 360 / stemsAmount;

// Duplicate and rotate layers:
for(var i = 1; i < stemsAmount; i++){
	// Duplicate original layer and save it to the variable
	var newStem = originalStem.duplicate();

	// Rotate new layer
	newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER); 

Final Touches

I’ll usually try to achieve the main goal with a script, and when everything works correctly, I’ll start to refine the code. In our case, we have to make sure that the user inputs a valid number in the prompt box — i.e. a positive integer, greater than one.

Also, to prevent Photoshop from going crazy, we will restrict the number of stems — let’s say, to 100. To do this, we will use a while loop to show the user an error message in the event of an invalid submission, and the prompt box will continue to be shown until the user enters a valid value or hits the “Cancel” button (remember that the prompt returns null if the user hits “Cancel”).

The new code looks like this:

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable:
var stemsAmount = prompt ("Processing """"
How many stems do you need? (From 2 to 100)", 12);

// Check that user entered a valid number and, if invalid, show error message and ask for input again
while(isNaN(stemsAmount) || stemsAmount <= 0 || stemsAmount > 100){
	// If user clicks "Cancel" button, then exit loop
	if(stemsAmount == null) break;

	// Show error message…
	alert("Please enter number in range from 2 to 100");
	// …and ask for input again
	stemsAmount = prompt("Processing """"
How many stems do you need? (From 2 to 100)", 12);

// Run the copying process
if(stemsAmount != null){ 
	// Calculate the rotation angle
	var angle = 360 / parseInt(stemsAmount);

	// Duplicate and rotate layers:
	for(var i = 1; i < stemsAmount; i++){
		// Duplicate original layer and save it to the variable
		var newStem = originalStem.duplicate();

		// Rotate new layer
		newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER);

As you may have noticed, we’re using the isNaN(value) function, which returns true if value is “not a number” and parseInt(value) to convert the value to an integer when we calculate the rotation angle.

The next thing we will do is manage the layers, renaming our new layers by adding an index to them. Also to make sure that we do not mess up document’s layers, let’s place our stems in a group.

Renaming the layers is not a hard task. We will just use the name property of the layer and add an index number to it:

// Add index to new layers = + " " + (i+1);

A group in Photoshop’s API is called a LayerSet and we can access all groups of the document by calling the layerSets property. To add a new group to a document, we have to call the layerSets’ method add():

// Create a group for stems
var stemsGroup = app.activeDocument.layerSets.add(); = + " ("+stemsAmount+" stems)";

Then, to add a layer to the group, we will use the move(relativeObject, ElementPlacement) function. Note that the move() function moves a layer in the layer stack, not on the canvas. (You can move a layer on the canvas with the translate(deltaX[, deltaY]) function.)

ElementPlacement is another constant, this one determining how we will place our layer relative to… well, relativeObject. In our case, we will use ElementPlacement.INSIDE to place the original layer inside a group:

// Place original layer in group
originalStem.move(stemsGroup, ElementPlacement.INSIDE);

We will place each new copy of the layer at the bottom of all layers in the group using ElementPlacement.PLACEATEND. The result is all of our layers arranged in ascending order, the first layer at the top and the last at the bottom:

// Place new layer inside stems group
newStem.move(stemsGroup, ElementPlacement.PLACEATEND);

You can read more about the ElementPlacement constant on page 202 of “Adobe Photoshop CS6 JavaScript Reference” (PDF).

Final Code

That’s it! RotateMe.jsx is done. Our final code looks like this:

// Save selected layer to variable:
var originalStem = app.activeDocument.activeLayer;

// Ask user for input by showing prompt box and save inputted value to variable: var stemsAmount = prompt ("Processing """" How many stems do you need? (From 2 to 100)", 12); // Check that user entered a valid number and, if invalid, show error message and ask for input again while(isNaN(stemsAmount) || stemsAmount <= 0 || stemsAmount > 100){ // If user clicks "Cancel" button, then exit loop if(stemsAmount == null) break; // Show error message… alert("Please enter number in range from 2 to 100"); // …and ask for input again stemsAmount = prompt("Processing """" How many stems do you need? (From 2 to 100)", 12); }; // Run the copying process if(stemsAmount != null){ // Calculate the rotation angle var angle = 360 / parseInt(stemsAmount); // Create a group for stems var stemsGroup = app.activeDocument.layerSets.add(); = + " ("+stemsAmount+" stems)"; // Place original layer in group originalStem.move(stemsGroup, ElementPlacement.INSIDE); // Duplicate and rotate layers: for(var i = 1; i < stemsAmount; i++){ // Duplicate original layer and save it to the variable var newStem = originalStem.duplicate(); // Rotate new layer newStem.rotate(angle * i, AnchorPosition.BOTTOMCENTER); // Add index to new layers = + " " + (i+1); // Place new layer inside stems group newStem.move(stemsGroup, ElementPlacement.PLACEATEND); }; // Add index to the original layer += " 1"; };

That wasn’t too hard, was it?


Now you can put it in the Photoshop/Presets/Scripts/ folder and run it by going to File → Scripts in Photoshop. Using different shapes with different values can yield interesting results:


As you can see from the number of links in the resources section below, there’s much more to say about scripting than can fit in an introductory article. But I hope the little that we’ve described today piques your interest and shows how powerful and helpful scripting is.

Community Power!

If you decide to dive into it, let’s learn together and share our experience. Ask your questions and share what you’ve done in the comments. If you are not a coder, consider leaving an idea for a script; maybe another reader will make it happen.

Let’s make Photoshop more useful together!


I’m still learning about Photoshop scripts, too, and here are some resources that are helping me along the way:

  • Adobe Photoshop Scripting,” Adobe Developer Connection
    All of the documentation and utilities for scripting.
  • Adobe Introduction to Scripting” (PDF), Adobe
    Here are the basics on scripting for Adobe applications. The nice thing about scripting for Photoshop is that you can apply your knowledge to other Adobe products; you just need to learn the application’s DOM, and you’ll be ready to go.
  • Adobe Photoshop CS6 Scripting Guide” (PDF), Adobe
    In this introductory guide to scripting for Photoshop, you’ll find the basics on getting started with scripting.
  • Photoshop CS6 JavaScript Reference” (PDF), Adobe
    This describes all of the objects and their functions and methods that you can use in scripting for Photoshop. This is one of the documents I use most when writing scripts.
  • JavaScript,” Mozilla Developer Network
    Here are answers to all kinds of questions about general JavaScript functions and usage.
  • JavaScript Tools Guide” (PDF), Adobe
    This has basic information about ExtendedScript Toolkit and some advanced techniques, such as file system access and ScriptUI and working with XML, sockets and more.
  • PS-Scripts
    An independent forum about scripting for Photoshop. I haven’t signed up to participate in discussions, but it has plenty of answered questions and solved problems to discover.
  • Photoshop Scripting, Adobe Community
    Adobe’s official forum for Photoshop scripting has some good discussion on problems encountered by users.

(al) (ea)

© darkwark for Smashing Magazine, 2013.

July 03 2013


Building A Portable Design Toolkit


It’s easy to get overwhelmed by the staggering array of resources and options available to designers. In this article, we’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust.

Take a traditional craftsman — let’s say a carpenter. While they may have access to a wide range of tools in their workshop, they will take a bag with just a few carefully chosen tools when working away. Similarly, an artist may have a wide range of paints, brushes and accessories in their studio, but will carefully select a limited palette and a few choice brushes when painting in the field.

In the same way, as a digital designer, you should know what your most precious tools are, and keep a portable set close at hand.

Recently I’ve been doing some oil paintings outside, away from the studio (a technique called en plein air). To facilitate this, I put together a pochade box to hold paints, brushes, palette and canvas panels. This needed to be small enough to fit in a backpack to be easily portable so that I can cycle around the countryside with it. The factors of space and weight force me to select a limited palette and a few choice brushes, and the size of the box determines the size of paintings I can make.

Working outside also forces me to work quickly — there’s no time to dally and over-think things. But, rather than being restrictions, these factors become the parameters for the work, directing me to work in a certain way, and helping me to develop a personal style and approach.

plein air
Working outdoors forces you to set limits.

Working With A Limited Palette

The benefits of working with a restricted range of tools and options are that you really get to know and understand your core set and can continually refine it over time. This is the path to mastery in your chosen discipline, as opposed to being a jack-of-all-trades but the master of none.

By mastering a limited number of tools and techniques, you will develop your own personal, identifiable style and workflow. It enables you to hit the ground running with each new project, to draw on your previous experience and to get something down quickly, which you can then refine, rather than face the blank screen and not know where to start.

A Lean, Portable Toolkit

What should be in your toolkit? This will obviously depend on your particular area of expertise, whether you are a designer or a developer, and the software applications you use. Each person will have their own software preferences, so I am not going to talk much about particular applications in this article. Instead, the focus will be on areas where you can consciously refine your choice of tools and assets within applications. I’ll also look at how, once you have created this limited palette, you can access your carefully selected toolkit wherever you are.

Keeping It All Together

Keep this lean, mean toolkit in a place you can access from anywhere. My preference is Dropbox, although any cloud-based hosting service, such as Google Drive or Microsoft Skydrive, would be great. Create a folder named Design Playbook, or whatever, and add subfolders for all of the assets you want to store in there. Sync it to the cloud and you’re good to go. For text and notes, I use Evernote — again, allowing me to access it from anywhere.

Folder structure
A sample folder structure of the toolkit

Graphic Resources

Grabbing every free resource you come across on the Web is tempting, whether it is vector art, Photoshop brushes and actions, bitmap textures and backgrounds, fonts, etc. But the downside of amassing such a huge collection is that it can become overwhelming and can lead to a lot of wasted time looking for just the right resource. If you are a download junkie, like me, then be prepared to pare down your collection, and put the ones you love and trust into a separate folder from all of the others, which you can review from time to time. Think of this separate folder as a special place where only the best assets and resources go.

Fonts are a prime cause of bloat. Over 300 fonts are in my font library, which I manage using Font Agent Pro (available for both Mac and Windows), but I find myself using the same 10 or so for most commercial work, and many of the 300 I’ll probably never use. Sifting through all of them is a real time sink, so I have a couple of sets with all of my go-to typefaces, which I have copied in Dropbox. The same applies to Web-based type management, such as Typekit. Find great type combinations that work for you, and use them repeatedly. It’s a part of how you establish your own recognizable style. Add new typefaces to your core collection sparingly.

Brushes (which are customizable plugins to apply paint effects in applications such as Photoshop, CorelDraw and Painter) are another resource for which too wide a choice would be overwhelming and inefficient — you’d find yourself scrolling through a huge list trying to find the one you’ve used before. Don’t be afraid to trim down the brush sets that you download, deleting the ones you have no use for. Save a consolidated set of brushes as a new set to your mobile toolkit and you’ll be good to go. The same approach can be applied to symbol libraries for Illustrator and Photoshop.

Illustration is one area in which your personal style can really shine through, so build a resource of vector elements. Having a collection of killer elements on hand is a great way to dive into a project and get inspiration. I’ve been slowly adding elements to my vector doodads Illustrator file for a couple of years now, inspired by the efforts of DesignBum, who has made a number of his project files available for downloading.

Designbum design elements
Great design explorations by Issara Willenskomer (aka DesignBum)

You’ll find yourself reusing certain background elements and textures; so, again, carefully select a few ones, and add them to your toolkit. Don’t worry about overusing these images — use them in comps and mockups, and then, once you have finalized the design, if you feel that you need a fresh image, go and find one. This will save you time from hunting for new images for every mockup.

Illustrator Elements
Build your own elements file.

You may find an online repository such as LayerVault or Pixelapse to be useful for storing image and vector assets, especially if you collaborate with other designers and want to share your toolkit with them.

LayerVault is version-control software for designers.

Code Resources

As with graphics, you’ll inevitably find yourself wanting to use the same bits of code from one project to the next. Rather than constantly reinvent the wheel, reuse classes and functions and keep refining them.

If you work with a language such as Java or ActionScript, which support classes, then you’ll find yourself returning to the same third-party classes and libraries time and again, so keep them handy in your toolkit, and take the time to really understand them.

For other languages, such as JavaScript, group together functions that you commonly use in a self-contained .js library file. You can then keep this as part of your toolkit, or use a content delivery network such as, so that you can directly reference it from your project.

Add to this, of course, essential third-party libraries, such as Modernizr and Require.js — I’m sure you have your own favorites — and any add-ons, such as small JavaScript libraries. Keep them somewhere handy, to be able to quickly drop them into a project.

Another place to put code libraries and classes is on a hosted version-control website, such as GitHub, Beanstalk or, my personal choice, Bitbucket. This is especially useful if you like to tinker and refine code or if you want to share your toolkit with other developers. If you want to open-source your code and make it publicly accessible, then GitHub or Google Code is ideal.

Another place to store code is Snipplr. As the name suggests, it’s great for storing little snippets of code — for example, code to retrieve the current date — that you’ll need time and again. You can make your snippets public or keep them to yourself. Snipplr is ideal for storing those little code hacks that you keep forgetting.

Snipplr is great for storing and sharing useful code snippets.

Template Resources

Using Web templates and frameworks will help you create prototypes more quickly and will also ensure that those prototypes bear a close resemblance to your comps and mockups. Whether you develop your own framework from scratch or use a popular one, such as Foundation or Bootstrap, get to know it inside out, and keep refining it to suit your needs.

Also, build your own “boilerplate” HTML5 file, which is a minimal basic file that serves as the starting point for any Web page you create. HTML5 Boilerplate is a good place to start. You’ll also find it worthwhile to create a skeleton website, set up with a file structure for images, CSS and JavaScript. Build yourself a basic CSS file that you can drop into any project. Add it all to the toolkit.

Mastering Your Tools

It might sound like I am suggesting that you keep reusing the same look and techniques across all of your work, but that is not the case. I am suggesting that you consciously limit your toolset, and then absolutely master those tools. You can then refine them according to project briefs, client feedback and your own inclination.

Kevin Dart Colouroid
Kevin Dart’s Colouroids are a great example of self-set limitations.

Keep experimenting with your favorite tools. This year, inspired by Kevin Dart’s Colouroids, I set myself a challenge to create one vector image a day, to really master Illustrator. In these self-set projects, go outside of your comfort zone and try a new approach, process or technique.

Create A Playbook

“Design today has reached the stage where sheer inventiveness can no longer sustain it.”

– Christopher Alexander, 1963

Seek to master not just your tools but also your techniques. Understanding and refining your design process is critical, and the way you work will determine the work you produce. I call this your “playbook,” the guide to your design process. Each technique is a “play,” a set of instructions to follow.

The playbook can exist purely in your head, or be as formal as you like. My playbook is a series of notes and sketches on an iPad, using Evernote and Paper. Some are simple aphorisms — “Work from light to dark,” “Remove one element” — to make me think about the way I work, a kind of personal set of Oblique Strategies, but used less to break a creative block than to reinforce a working method I trust.

Other “plays” are more practical guides, such as step-by-step instructions on how to set up event listeners, or how to optimize images, or how to change copy on a live website. Developing conscious design patterns is the key to understanding the way you work, whether in visual design, interaction design or programming.

Formalizing your creative processes, tools and techniques is a critical step in becoming a better designer or developer. Just as football teams practice their plays, practice your techniques on self-set work, ready to be deployed in client work once you have mastered them.

The playbook is also the place to refine your workflows. How do you get from a paper sketch to a working website? How do you wireframe your code? Analyzing your process is all part of the playbook.

Evolving The Playbook And The Toolkit

In addition to refining your playbook, you will also need to update it and evolve it gradually over time, adding some elements while removing others. Obviously, the world of Web design is changing rapidly, both aesthetically and technically, so make sure to update your playbook, too. And by using elements you know and trust, you are still bringing your own style, rather than slavishly following fashion.

The Path Towards Mastery

If you look at the portfolios of designers you admire, you will see common elements and ideas that unite each person’s work. This applies not only to Web designers but to graphic designers, architects, industrial designers and visual artists. While the work evolves over time, a common thread — and a conscious decision to set self-imposed limits of exploration — runs through it all. Each creator has developed and refined their own design process, which defines the resulting work, the designer’s style. Poor designers will leap from one style to another, from one way of working to another. Lacking conviction, they will follow trends and the latest fancy technique, rather than develop their own style.

Learn to limit your choices and set parameters. These are not constraints, but rather guidelines to lead you to better work. Building a toolkit and developing a playbook is a way to help you define your own style and to master the tools you need to make your work unique, personal and memorable.


© Martin Gittins for Smashing Magazine, 2013.

June 25 2013


My Workflow To Design And Develop A Modern Portfolio Website


A long time ago in a galaxy far, far away… a youngling designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take, in order to stand proud with their peers in this wide world we call “The Web”. Yes, I’m talking about creating your own portfolio website.

I recently re-designed my own portfolio site, it was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represented my personality and displayed my design work in detail, while of course acting as a promotional medium to gain more business and exposure.

Behind the scenes look at my design and development workflow.
Behind the scenes look at my design and development workflow.

After receiving a bunch of emails asking me how I designed and built my site, I decided to write this article to give a behind the scenes look at my journey and some of the things I learned along the way. I’ll discuss best practices in modern web design and go through the entire design and development workflow I used to create my site, from the initial planning stage to the final live website including:

  • project planning,
  • branding,
  • designing wireframes,
  • responsive design and flexible grids,
  • using LESS and SASS,
  • catering for high definition screens,
  • creating flexible images,
  • animating content,
  • WordPress development and
  • testing and analytics.

I hope it helps and inspires other designers out there looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Project Planning

Defining your Brief

The first thing I do with any project is figure out exactly what I want to achieve and write it down. What is the purpose of the project? What problem am I trying to solve? For me, my goal was to create an online profile to promote my design work and gain more exposure. It needed to allow me to write articles, display my design work and also allow people to contact me easily. I also wanted it to be unique and memorable while representing my personality.

At this point we simply want to figure out our end goal, we’re not worried about how we will get there. Write down your goals, and make sure you look back at them at later stages in the project to ensure that you’re on track.

Initial Research and Idea Generation

It’s always a good idea to do some initial research to get the creative juices flowing. Inspiration can come from anywhere and it can strike you at any time, usually when you’re in bed and on the verge of falling asleep (and of course there’s not a notebook in sight). I like to check out websites like Awwwards, Dribbble and Creattica for inspiration. But sometimes it’s best not to look at what other designers have done, because once you’ve seen it, it’s sometimes hard to think of your own ideas.

Instead, I’d suggest making a cup of tea, finding a comfortable spot and brainstorming your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully that way you’ll be able to come up with something innovative that hasn’t been done before. There are plenty of methods you can use to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain area of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

portfolio of justin aguilar
Justin Aguilar illustrates his workspace in his portfolio design.

portfolio of meng to
Meng To gets straight to the point with his design case studies.

portfolio of stephen burgess
Stephen Burgess is a developer, but he shows a great understanding of design and UX with his unique site.

After some initial research I wrote down a few ideas and elements that I wanted to include in my portfolio site.

  • My skill set is a mix of both coding and design and I want this to be shown prominently.
  • I’m a big fan of minimalist design and want to stick with a mainly black and white colour palette to allow my design work to shine through.
  • I’d like to use my own photo as a hero image to inject some personality into the site.
  • I enjoy the experience of seeing animations happen as I scroll down a page.
  • I’ve never liked the jerky way in which one webpage jumps to another, so I want to make sure my site transitions smoothly from one page to another.
  • I like generous amounts of white space and a full width layout.
  • Having a responsive site is important to me as I want mobile and tablet users to also have an optimal user experience.
  • I want my design case studies to tell a story about my design process, rather than just being a gallery of random images without context.

Create a Timeline

Once you’ve got your ideas together and you know which direction you’re headed in, it’s always a good idea to create a rough project timeline. I’m not talking about creating strict deadlines or anything, it’s more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks you need to do and estimate the amount of time each one will take. This will give you a rough outline of how long your project will take, as well as giving you a task list to work from. Of course some of your time estimates might be a little off, but that’s fine and you can adjust your timeline as you go. A little bit of organization goes a long way and it’s good practice to get into this habit.


Designing your Brand

Your brand is basically the visual language that describes who you are and will determine how others see you. For my brand I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials using a minimal black and white colour palette. I sketched out some initial ideas and experimented with various typography and letter arrangements, before deciding on the final logo design (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo design, you might like to have a read of a systematic approach to logo design.

adham dannaway logo design
My final logo design.

As part of my branding I also wanted to design an avatar image of my face, that I could use on my website along with various social media platforms. It would need to represent me as a designer and developer while also being unique and memorable.

After countless hours of brainstorming (more like procrastination), I finally had an idea that made sense. The idea was to take a photo of my face and cut it in half. One side would portray the creative designer in me, while the other showed my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the avatar image concept. I used pastel colours, grunge style brushes and masks to achieve the aesthetic I was after.

adham dannaway avatar concept
My final avatar image concept.

Creating Content

I’ve noticed that a lot of designers leave content creation until the end of the project, as they’re more interested in the layout and design aesthetics of the website (the fun stuff). Content creation should happen early in the project, as your content will determine the appropriate design for the site. What information do you need to provide to your visitors? Have a think about what you want to say and how you want to say it. Should it be written as simple text or would it make more sense as an image or diagram?

When writing your copy I think it’s best to be concise and friendly. I like to write in the first-person to make it feel more personable. Break your copy up into small chunks to improve readability and make it easy to scan. I wrote a draft of my content and broke it up into six main parts; homepage introduction, a bit about me, places I’ve been featured, my design work, my blog articles and my contact details.

Displaying your Design Work

The most important piece of content is your portfolio of design work, as this is what most of your visitors want to see. Gather your best work and explain the process and workflow behind it. There’s nothing worse than a vague portfolio of random images with no context or explanation. Try to only include the type of work you’re looking to do more of, rather than all of your work. This will help you target the appropriate clients in the future.

People want to see your work in as much detail as possible, so don’t shrink it down to a small size. Try to keep your designs at their actual size if you can. Make sure it’s easy for visitors to quickly navigate through all of your work. Talk about the challenges you came up against and how you solved them. Design is all about problem solving, so let your visitors know why your design looks and works the way it does. Remember, you’re telling a story so try and make it as interesting and informative as possible. Now that we have our content figured out, we can move onto sketching wireframes.

portfolio case study
Soft Facade have beautiful, in-depth design case studies.

Sketching Wireframes

The approach I take to sketching wireframes is simple but effective, and all you need is a pen and a sketchbook. I firstly write down a list of all the elements I need to include on the webpage. I then group related elements together before prioritizing these groups based on their importance. Here is my list of elements for my contact page.

wireframe elements list
List of page elements for my contact page.

Once you’ve got your page elements grouped and prioritized, it’s much easier to arrange them on the page. Place your more important elements towards the top of the page and use white space to create your groupings. I took a desktop-first approach to the design of my site, as I wanted to focus on displaying my design work in detail on a larger screen.

When we come to writing the CSS later on, we’ll actually be taking a mobile-first approach as it will simplify our CSS code, we’ll get to that shortly. I usually sketch my wireframes with pen and paper, but you can also use tools like Balsamiq or even Photoshop or Illustrator. Here’s a wireframe for my contact page. It doesn’t need to look pretty, it’s simply a plan of your web page to work from.

contact page wireframe
Contact page wireframe.

Responsive Design and Flexible Grids

I wanted to make my site responsive to different devices to ensure an optimal user experience for visitors on desktop, tablet and mobiles. When designing websites I usually like to use a grid, as it provides a structural foundation for my design while also making the development process easier and more efficient. Joshua Mauldin sums up grids pretty well.

“Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along”.

Some designers find grids to be limiting, but it really depends on the design you have in mind. I find that using a grid results in neater and more organised looking designs. My design was quite simple so I used a custom 12 column flexible grid, but a 16 column grid will give you more definition and accuracy. I also defined a maximum width of 1040px to ensure my design didn’t look stretched on larger monitors.

Using a flexible grid (rather than having 3 separate fixed widths for mobile, tablet and desktop) means that my site scales dynamically to fit on any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit your design. You can use tools like Grid Pak, Responsive Grid System, Golden Grid System and Responsify to help create your own responsive grid. I used ideas from a few of these tools to create my own custom flexible grid.

CSS for my responsive grid:

/* 12 Column Responsive Grid */

.row {

    clear: both;
    max-width: 1040px;
    margin: 0 auto;


[class^="col-"] {

    float: left;
    margin: 0 3.84615384615% 0 0;
    list-style: none;
    position: relative;


[class^="col-"]:last-child {

    margin: 0;


.col-1 { width: 4.8076923077% }
.col-2 { width: 13.4615384615% }
.col-3 { width: 22.1153846154% }
.col-4 { width: 30.7692307692% }
.col-5 { width: 39.4230769231% }
.col-6 { width: 48.0769230769% }
.col-7 { width: 56.7307692308% }
.col-8 { width: 65.3846153846% }
.col-9 { width: 74.0384615385% }
.col-10 { width: 82.6923076923% }
.col-11 { width: 91.3461538462% }
.col-12 { width: 100%; margin: 0 }

After looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector and all it’s doing is selecting any classes that begin with the following string: “col-”. You can also use substring matching to select other attributes that end with a certain string or even those that contain a certain string. Substring matching is a very handy way to create more complex and powerful CSS selectors, and they’re well supported too, going as far back as IE7.

HTML for my responsive grid:

The HTML is quite simple too and consists of rows and columns, much like a table. Here is a very simple example of a two column responsive grid that I used on my site. The left column spans across five columns, while the column on the right spans across seven.

<div class="row">

    <div class="col-5">Content spans over five columns</div>
    <div class="col-7">Content spans over seven columns</div>

Setting Logical Breakpoints

When designing a responsive website, there will be certain widths at which the layout breaks or the text becomes squashed and difficult to read (45 to 75 characters per line is comfortable to read). These special widths are known as breakpoints and they’re usually set based on common device widths e.g. 320px to 480px for mobile, 768px to 1024px for tablets, and 1024px and over for desktops. The problem is that “common” device widths don’t really exist anymore with the growing number of different devices, so this solution doesn’t scale well.

Setting breakpoints based on the content rather than device widths is a more scalable solution. For example, rather than blindly setting a breakpoint at 768px width for tablets, I instead looked at my content and found that it looked fine until it became squashed below 600px width. I thus set a breakpoint at 600px to change the layout to ensure the content was legible at and below this width. Yes, you need to optimize the display of your site on various devices, but your content should always determine where your breakpoints lie. These are the four breakpoints I needed for my design: 320px, 600px, 1024px and 1140px.

When writing the CSS media queries for my site I took a mobile-first approach. This basically means that I wrote the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally more simple than those needed for your desktop design, so it makes sense to write them first. They form the foundation of your styles, we can then add the more complex styles for larger screen sizes. Cascading your style sheet in this way keeps your code clean and DRY (Don’t repeat yourself). Here are my media queries below.

Media queries:

/* Mobile styles go first, outside the media queries */

@media only screen and (min-width: 321px) { 

    /* Larger mobile styles (above 320px wide) */

@media only screen and (min-width: 600px) {

    /* Tablet styles (above 600px wide) */

@media only screen and (min-width: 1024px) {

    /* Large laptop styles (above 1024px wide) */

@media only screen and (min-width: 1140px) {

    /* Desktop styles (above 1140px wide) */

With my breakpoints defined, I could sketch out the tablet and mobile wireframes. Sometimes it makes sense to hide or omit content on smaller devices, but I wanted to make sure as much content as possible was available across all devices. Why should mobile users miss out on valuable content? People are used to scrolling on mobiles anyway, so think first before removing or hiding content. The easiest solution isn’t always the best one.

Designing High Fidelity Mock-ups

Once I had my desktop and mobile wireframes sketched out, I moved into Photoshop and started mocking-up the website in more detail. I don’t like to spend too much time in Photoshop as I think that it slows down the development process. Don’t worry too much about creating a pixel-perfect design, as you’ll have time to tweak and refine it during the coding process anyway. Instead, simply mock-up the main page templates along with any other design elements and assets you need.

I mocked up my header and footer along with the basic elements of my “About me” page below to make sure I was happy with the aesthetic.

adham dannaway about me page
“About me” page mock-up.

Similarly, I didn’t mock-up any mobile or tablet designs in Photoshop, as I find it quicker to simply code these up based on the wireframes. I did however spend some time on smaller details like icons and textures, as small details like this can make a big difference to the final polish of the site.


Now that we have our site planned out and all of our image assets ready to go, it’s time to start coding. So get out your headphones and your favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user I’d also recommend Notepad++.

I usually start from the top of the webpage and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first then move onto the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of your project, you can either start coding from scratch or use a base framework like HTML5 Boilerplate, Foundation or Compass.

Using CSS Pre-processors (LESS/SASS)

If you’re not yet familiar with CSS pre-processors like LESS and SASS, you should definitely familiarize yourself with them as they’ll save you a lot of time and effort and help streamline your CSS styles. A CSS pre-processor basically gives you more power when coding CSS, as it allows you to use object oriented programming practices when writing your styles.

less sass css pre processors
LESS and SASS CSS pre-processors.

We’ve all wished that we could create variables in CSS, define functions and re-use code snippets without having to copy and paste continuously. CSS pre-processors allow you to do this and much more, while keeping your styles clean and organised. Your LESS/SASS code is simply compiled and output as regular CSS.

I actually used LESS to create the CSS for my website. However, after experimenting with both LESS and SASS I feel that SASS is a more powerful solution, so I’ll be sticking to SASS from now on. Chris Coyier compares LESS and SASS and shows the subtle but important differences between the two. The decider for me was that SASS uses Compass and gives you access to a library of useful and well maintained mixins to use in your projects, LESS doesn’t. Feel free to have a play with both to see which one you prefer.

Progressive Enhancement with Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the visitors’ browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5, but what happens in older browsers that don’t support it?

Modernizr basically tells us which features are supported in the visitors’ browser, allowing us to write conditional CSS and JavaScript to handle each situation. Thus it allows us to easily take a progressive enhancement approach; providing everyone with your basic website features, while also giving those with modern browsers an enhanced experience.

Creating Flexible Images

Flexible images are a very simple but important part of any responsive website. To make your images flexible, simply place them into your responsive grid container and add the below CSS to your style sheet. They need to be inserted using the <img> tag, although there are ways to achieve flexible images using CSS background images too. If you want to get more technical and actually serve different images depending on the device being used (e.g. serving smaller images on mobiles to conserve bandwidth), you can look into these techniques for serving truly responsive images and avoiding duplicate image downloads.

img { 

    max-width: 100%; 
    height: auto !important;

Using CSS Image Sprites

We all know that it’s a good idea to combine your icons and image assets into CSS Image Sprites, rather than having multiple individual images loading one after the other on your site. It decreases load times and also makes it easy for you to edit and maintain image files at a later stage. I usually like to create several sprites for the different sections of a website. For example, one of my sprites contained all of my icons, while another contained the common global page template elements e.g. logo, header icons, navigation background and footer icons.

When you’re creating your sprites, it’s always a good idea to think about how your website loads. If you’ve got a bunch of image icons that are only used on a single page of a site, it’s probably best to separate them out from the main page sprite. This will ensure that they’re only loaded when they need to be, while keeping your main sprite file size low. Using sprites will also make things easier when it comes to preparing your images for high definition screens later on.

Creating image sprites can be a cumbersome process, so tools like Sprite Cow can come in handy in helping you create them quickly and easily. You can also use a combination of SASS and Compass to generate your sprites automatically from separate images.

Catering for High Definition Screens

To ensure that your site looks crisp on high definition (or Retina) screens, it’s best to try and use CSS to style as much of it as possible. Remember that some of the newer CSS styles won’t render in older browsers, this is where a progressive enhancement approach makes sense. In most cases you won’t be able to build your site completely from CSS, you’ll need images. Luckily it’s not too hard to prepare your images for high definition screens.

Basically you’ll need to create a larger version of your images that will be used on high definition screens. Since our images are contained within a sprite, all we need to do is create another version of the sprite that is exactly two times larger. Let’s say our sprite is named sprite.png, we would name our high definition sprite sprite@2x.png. To decrease load times (especially on mobile devices) it’s also a good idea to compress your images using Jpeg Mini, Tiny Png or Image Optim if you’re on a Mac.

retina image
Simply create another image twice the size of the original for high definition devices.

Once you’ve created your larger images, we simply use media queries to show the large images on high definition screens. You need to be careful with your media queries, as iPhone’s aren’t the only high definition devices around at the moment. There are other mobile phones along with Retina iPad’s and MacBook Pro’s too. I used two high definition media queries on my site; the first one is for high definition mobile devices, while the second is for tablets and laptops.

Media queries to target high definition screens:

only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

    /* Target all high definition screens */

only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {

    /* Target high definition devices with screens wider than 600px */

Wouldn’t it be great if we could avoid the need for media queries and separate high definition images altogether?

An even better way to cater for high definition screens is to ensure your images are vectors, this means that they will scale to fit any screen size and look crisp on any device. You can actually draw your images or icons in Illustrator and export them as SVG (Scalable Vector Graphics) files. The SVG file basically consists of XML-based code that describes your image to the browser.

Another clever way to get scalable vector icons that look crisp on high definition devices is to use Icon Fonts like those from Ico Moon and Font Awesome. I didn’t actually use these methods on my site, mainly because I didn’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your site, then these techniques will definitely come in handy.

Page to Page Transitions

I’ve never been a fan of the abrupt way in which one web page jumps to another. When you click on a link, there’s usually a sharp jump followed by images loading awkwardly and sporadically onto the page in no particular order. I wanted to control the way my content appeared, to create a smooth transition from one page to the next as a visitor navigated through my site. So when a visitor clicks on a link to go to another page of my site, the current page will basically fade away to white before taking the visitor to the next page. The next page will start from a white background, then the content will animate smoothly onto the page. I think that it creates a pleasant and consistent user experience.

To achieve my page to page transition effect, I actually needed to use a jQuery preloader plugin like jPreLoader or QueryLoader2. This ensured my images were loaded before they animated onto the page, otherwise the animations would happen before the images were there. I’m not a fan of preloaders in general as the user needs to wait until the page loads before they actually see anything, but it was necessary to achieve the page transition effect I wanted. I’m actually going to experiment with hiding the preloader if the page loads quickly and only introducing it on longer page loads. This would mean that most people would simply see one page seamlessly fade to the next, without a preloader being shown.

I’m interested to hear of any other methods to achieve page to page transitions without the need for a preloader.

Here is a very simple jQuery function that causes the page to fade out when visitors click a link to leave a page:

* Function to animate leaving a page
$.fn.leavePage = function() {{

		// Don't go to the next page link yet
		linkLocation = this.href;
		// Fade the page out
		$('body').fadeOut(500, function(){
			// Then go to the next page link
			window.location = linkLocation;

* Call the leavePage function on click of links with the "transition" class

I wanted the “leavePage” animation to happen when visitors clicked on a link to go to another page within my site, so I simply added a class called “transition” to the appropriate links. When a visitor clicked on any link with the “transition” class, the “leavePage” animation would be triggered. This is a very simple animation example, but you could build on this with your own more complex animations.

So the user has clicked a link, the current page has faded away and they’ve landed on the next page. What happens now? Our jQuery preloader will take care of the rest. The preloader basically displays an overlay that covers your page while your page is loading. Once loading is complete, the overlay fades away to reveal your page. Of course you can create your own custom animations to animate your content onto the page in more interesting ways. I won’t go into this in too much detail, as there are many ways to animate content onto the page.

You might like to slide your content in from the sides of the page one element after the other or fade elements in from top to bottom. Basically you’ll just need to write a function to animate your content onto the page, then call this function after the page load is complete. Luckily, both of the jQuery preloaders I mentioned above have callback functions that allow you to call your animation function after the page load is complete.

Preventing FOUC (Flash of Unstyled Content)

One of the most annoying issues I had while trying to achieve my smooth transition between pages was a flash of unstyled content (FOUC) before my jQuery preloader had even started. It wasn’t always there, but every now and then I would see some of my content flash onto the page before my animations had even started. Luckily I found a clean and simple way to prevent the FOUC that worked perfectly.

Animating Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish to the page. I used a simple but powerful jQuery plugin called Waypoints to help me create my on-scroll animations. It basically allows you to trigger your animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, you should check out the Scrollorama jQuery plugin.

Custom WordPress Development

I decided to build my website on a WordPress platform, mainly because I’m familiar with it and I wanted to include blog functionality on my site. It’s also a nice time-saver to be able to easily install plugins to add extra functionality to your site. It’s a pretty simple process to install WordPress onto your server and turn your static HTML pages into a WordPress theme. If you’re not familiar with WordPress, you can always use another CMS platform such as Drupal, or feel free to avoid them altogether and just build it from scratch in PHP (It really depends on the complexity of your site).

Since some of the pages on my website had quite varied layouts, I needed to create a few custom page templates. For example, I couldn’t use a standard WordPress page for my homepage as the design is quite customized. So I created a custom template for the homepage. It’s actually really simple to create a custom page template in WordPress. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I decided to create a custom post type for my portfolio items. This basically allowed me to use a different template for blog posts and portfolio item posts. You might be able to get away with simply displaying your portfolio items as blog posts and categorizing them into a “portfolio” category to separate them from the standard blog post articles. I needed the flexibility of a custom post type with a different layout. I won’t go into more detail about WordPress development, as there’s plenty of great WordPress documentation out there already.

Testing And Analytics

Cross Browser Testing

I’m sure you’re all aware of the importance of cross browser testing to ensure that your site renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers”, that’s because you really only need to ensure that your site renders properly for your particular audience. If you know that all of your visitors are using modern browsers then you don’t need to spend valuable time and effort supporting older ones.

major browsers
Test your site on the major browsers.

So how do we test our website across all the relevant browsers? If you’re on a Mac like me you’ll be able to simply download all the modern browsers like Chrome, Safari, Opera and Firefox. So how do you test Internet Explorer on a Mac? One simple and free way to do this is to simply setup a virtual machine running Windows.

You can also use an IE emulator tool like IE Tester or alternatively sign up to services like Spoon or Browser Stack, which allow you to test your site on all major browsers including Internet Explorer 6, 7, 8, 9 and 10. Rather than leaving your cross browser testing right until the end of your project, it’s probably best to test your site every now and then during the development process to make things easier at the end.

Setup Google Analytics

It’s always a good idea to add Google Analytics to your website to collect valuable statistics on your visitors. You’ll know the location of your visitors and whether they’re arriving via Google searches or from referring sites. One of your blog posts might get mentioned on another site, if you’re not monitoring your traffic sources you might not even know about it.

Analytics will also allow you to build a profile of your visitors and get an idea of which countries they’re from and what browsers they’re using. You can use this data on an ongoing basis to improve and optimize your site for your visitors. Setting up Google Analytics on your website is free and only takes a few minutes. Simply sign up, copy and paste a small JavaScript code snippet into the footer of your site and you’re ready to go!

Time To Launch

So we’ve designed, built and tested our new portfolio website and we’re finally ready to launch (High five)! It’s one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my site and learned a lot in the process too. Sure, there were hurdles and challenges along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences creating your own portfolio site.

I hope that my journey will help and inspire you to create your own site, or finally start that re-design you’ve been contemplating for the past few years. So get out your headphones, knuckle down and start pushing those pixels. I wish you all the best on your epic quest ahead, good luck and may the force be with you.

© Adham Dannaway for Smashing Magazine, 2013.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...