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

February 07 2014

16:11

Smashing Book #4: Behind The Scenes


  

If you’re a graphic designer, you will often have to work with off-the-shelf material created by others — for instance, combining ready-to-use fonts with images from a photographer or stock website. Also, you’ll often have to follow the branding already developed by someone else. It’s OK; it’s a part of the job, and you shouldn’t be bothered by it.

But the part of a project that almost every graphic designer likes and is proud of the most is something that you can do from scratch, something that you have control over and can sign off on confidently: illustration. It’s why I love illustration projects so much. You can show your individuality in every detail and create every stroke of the artwork, trusting your vision and fully exercising your skills.

Given this love of mine, it’s no surprise that I took on illustration duties for the Smashing Book #4 without hesitation, despite it being quite a large and lengthy project (20 illustrations). I pulled myself together and started working, promising to myself that no matter how hard it turned out to be, I would find the time and internal resources to complete the project.

I’m very keen on the traditional way of drawing — by hand, using paper, pencil, watercolors and so on. Of course, I’m not against using computers when necessary — especially nowadays, when we have drawing tablets and pens and all of that other digital stuff that mimics hand-drawn work. But it seems to me that there is still no substitute for the charm of a well thought out and elaborate handmade drawing.

My process for transforming illustrations into vector files is a little complicated and sometimes long, but it’s the only way to capture my drawings down to the smallest details. Retracing every line of the illustration as a curve using the Pen tool (in Adobe Illustrator, in my case), I am able to really feel every line and make the drawing as close to perfect as possible.

I began each of the 20 illustrations with many ugly sketches, trying to grab hold of an idea. I’m not able to think first and draw after. The two processes are one for me: I draw while thinking. I’ll waste piles of paper and use any surface at hand to capture an idea that suddenly comes to me. Reviewing the sketches now, I’m intrigued by the evolution of the ideas and the birth of the characters.


Looking for ideas. (View large version)


(View large version)


The evolution of a character from start to finish. (View large version)

Then, I made detailed drawings in pencil, which became the prototypes of the vector images. The more developed the drawing, the easier it was to create a vector image. When the pencil drawings were ready, I scanned or photographed them, and then painted with the usual brushes in Photoshop. These were the prototypes that I submitted for approval.

To color the sketches, I’ll choose one of the basic brushes with a sharp edge and just paint over the scanned image on a new layer. “Multiply” mode is on for this layer to make the texture of the drawing visible. Then, I’ll create one more layer for shadows (with “Multiply” mode enabled again).


Adding color to the sketch. (View large version)

This is a fast and easy way to estimate the color spectrum of the final illustrations (I’ll sometimes do several color sketches). I sent the colored sketches to the Smashing team for approval of the direction and concept of the illustrations.

The colored sketches retain a kind of watercolor effect. I love that this quality can be achieved so easily.


The colored sketches. (View large version)

Once the sketches are approved, I start the most important part of the work. I paste each scanned pencil drawing into an Illustrator file and trace it. I’ll put the pencilled prototype on the bottom layer and lock it. Then, I’ll look at my illustration carefully and divide it in my mind into several areas, creating a separate layer for each area. Working with layers is very convenient if the image is complicated and has many small details.


(View large version)

You can lock or hide layers that you are not working on to focus on the areas that you are. From the screenshot below, it is obvious that every kite will have layers and that the background will have several layers. I also separated each animal into different layers; for example, one layer for the body, one for the head (usually including the eyes and nose) and one for the limbs (legs, wings and so on).


Creating separate layers. (View large version)

There is no trick to tracing an image by hand. Just take the Pen tool and trace the contours of the sketch. I usually choose a bright color to mark off the contours well. The process is boring, but once you’re skilled at it, it doesn’t take much time. It can almost be meditative, sitting and calmly tracing element after element as your thoughts drift away.


The outlining process. (View large version)

I’ll usually use the Live Paint Bucket tool to divide a shape into several color areas. I draw lines that will be the borders between colors, and then select the group of shapes and enable the Live Paint Bucket tool . By clicking on each shape with the tool, I can assign a unique color to it. By the way, if you use colors from the swatches, you can find the appropriate tool by clicking the left and right arrows.


Using the Live Paint Bucket tool. (View large version)

If an element of the illustration doesn’t have a defined shape and needs a bit of improvisation, then I’ll use the Blob brush . Working with this brush on a drawing tablet is a real pleasure.

You can configure the settings of the Blob brush by double-clicking in the Tools panel. I’ll usually set it to the biggest brush to make the pressure of the pen as sensitive as possible. With several assured brush strokes, I’ll draw the background and the bushes, using random colors according to my feeling and then choosing more appropriate colors later. I’ll also draw the branches of the bushes with the Blob brush. If I need to correct the shape, I’ll usually use the Erase tool.


Using the Blob Brush tool. (View large version)

Here’s a tip if you ever have to transform a regular line into a ribbon flapping in the wind. I’ll use the Width tool to make the stroke weight variable. Using this tool, select the dot on the line where the stroke weight is to be changed, and drag the auxiliary lines until the ribbon looks the way you want.


Creating a ribbon from a line with the Width tool. (View large version)

Now, the image is ready for coloring. Yes, it looks weird without colors. But you need just a few minutes to fill in the shapes and get the image close to being complete. To complete the kite image, I added some small flowers on the bushes with petals flying up into the wind (using the Blob brush). I also added shadows using Multiply mode.


The outlined and finished illustrations. (View large version)

The technical work was not the hardest part for me. I’ll often spend much more time on sketching and developing the ideas. Now that the Smashing Book #4 is complete, I can say that the most difficult part was devising a “plot” for each chapter title. When I got the plan for the book and read the titles, I was at a loss.

Some of the titles are quite conceptual, suggesting obvious metaphors. But others are concrete and related to code, and those were hard to illustrate (especially with cute animals). When my imagination gave up, the guys from the Smashing team were ready to pitch in some inspiring ideas. So, this creative project was genuinely collaborate, and I think we were on the same wavelength.


Smashing Book #4, a new book for front-end designers and developers.

I believe both parties have taken only positive emotions from the project. Holding this hefty book now in my hands, I would have done some things differently — I’m never completely satisfied with my own work. Overall, though, I’m happy with the result.

So, enjoy the Smashing Book #4. It contains so much useful stuff. (Believe me, I know.)

(al, il, ea)


© Anna Shuvalova for Smashing Magazine, 2014.

December 27 2013

08:01

So You’ve Decided To Open-Source A Project At Work. What Now?


  

A while back, I wrote a post about starting an open-source project. The focus of that article was on starting an open-source project as an individual. I received a lot of positive feedback and also some questions about how the process changes when you’re open-sourcing a project at work.

A guide on getting started with an open-source project at work.
Open source projects are always a team effort, and they alwars require a dedicated commitment to the project. Image credit: open source way

Many companies are starting to investigate and participate in the open-source community, and yet few guides for doing so exist. This article focuses primarily on the process of open-sourcing a project at work, which brings with it other concerns and decisions.

Why Open Source?

Before delving into the how, it’s useful to step back and talk about the why. Why is it that so many companies have or are starting to establish an open-source presence? There are actually a number of reasons:

  • Technical brand
    Companies want to be known as a place where smart people work. One excellent way to show this is by releasing code that has been written at the company. Doing so creates mindshare in the community, familiarity with the company and its contributions, and fodder for future technical brand initiatives (such as giving talks at meetups and conferences).
  • Recruiting
    Time and again, you’ll see contributors joining companies that sponsor open-source projects. I saw this happen frequently while at Yahoo, where YUI contributors would sometimes end up as Yahoo employees after having contributed to the project on an ongoing basis. Similar hires have occurred in the Node.js community. The reason is pretty clear: If you work on an open-source project in your spare time, imagine how great it would be to turn that hobby into a job. Additionally, allowing job candidates to see some of the company’s code gives some good insight into what working at the company would be like.
  • Giving back
    A lot of companies benefit from open-source software, and contributing open-source software back into the world is a way of giving back. These days, it’s part of what it means to be involved in the technical community. When you receive, find a way to give back. A lot of companies are embracing this philosophy.

There are many more reasons why companies are choosing to open-source, but these are the primary drivers. Therefore, the process of open-sourcing a project must be aligned with these goals while protecting the company’s interests.

Getting Started

Suppose someone at your company wants to open-source something. This has never happened before and you’re not sure what to do. Do you just put it up on GitHub? Announce it in a press release or blog post? How do you know that the code is OK to open-source? There is a lot of planning to do, and it all starts (unfortunately) with the legal department.

Giving away company assets is as much a legal issue as anything else. The very first conversation should be with an appropriate member of your company’s legal team to discuss the ins and outs of open-sourcing. In larger companies, one or more intellectual property (IP) attorneys are likely on staff or on retainer; in smaller companies, this conversation might start with the general counsel. In either case, it’s important to lay out exactly what you want to do and to clarify that you’d like to formalize a repeatable process for open-sourcing projects.

The primary legal concerns tend to be around licensing, code ownership and trade secrets. These are all important to discuss openly. Because many companies have done this already, you should have a fair amount of evidence of how other companies have established their processes. The most important thing is to engage the legal department early in the process and to have a champion on the legal team who you can work with should any issues arise.

Choose A Default License

One of the first topics of discussion should be which open-source license the company will use as its standard. Leaving the team for each project to decide for itself which license to use is a bad idea, because a lack of awareness could quite possibly lead to two projects from the same company having incompatible licenses. Decide up front exactly which license to use, and use it for all open-source projects in your company.

I touched on the different types of licenses in my previous article (also, see “Understanding Copyright and Licenses”). In general, companies tend to standardize either the three-clause BSD license or the Apache license. Very rarely will a company standardize the MIT license, because the standard MIT license doesn’t contain a clause that prevents use of the company’s name in advertisements for software that makes use of the project. The Apache license has additional clauses related to patent protection, which some companies prefer.

The ultimate choice of a license typically comes down to legal considerations on the nature of the code being released. The philosophical implications of which license you choose are not important; using the same license for all projects in your company is important.

Outgoing Review

The next topic of discussion should be to define an outgoing review process. Just putting code out in the public without some sort of review is neither safe nor sane. In general, a request to open-source a project should be reviewed by the following:

  • Legal
    As mentioned, the legal department needs to be kept in the loop during this process. They will likely not review the code, but rather will want to understand what the code does and whether it could be considered a company secret.
  • Security
    Someone with a security mindset should actually look at the code to make sure it doesn’t reveal any security issues or contain code that should not be made public. This process could be manual or automated, depending on the complexity of the code.
  • Executive
    Someone on the executive team needs to approve the request, basically saying that they believe this code is safe to share and that they are aware that the code is being published.

Exactly how an outgoing review gets started tends to be company-specific. It could be done by submitting a request to a mailing list, filling out a form or just setting up a meeting. How it’s implemented isn’t as important as the fact that the review occurs and is done quickly. So, setting a deadline for a response is a good idea. Depending on the size of the company, this could range from a few days to a few weeks, but setting up the expectation ahead of time helps to alleviate any scheduling issues.

Accepting Contributions

One part of the process that is often forgotten is figuring out rules for accepting external contributions. Open-sourcing a project is basically a way of saying, “Hey, we’d love to have you fix our bugs!” Part of the point is to get people interested enough to want to contribute to the project. Establish a process so that you know how and from whom external contributions may be made.

Open-source projects
When building something, accepting external contributions can significantly benefit the project, but you need to establish a process for contributions first. Image credit: open source way.

The company should require a contributor license agreement (CLA) to be signed before accepting contributions from external developers. A CLA is a legal document that typically states a few things:

  • The contributor asserts that they are the original author of the code they are submitting.
  • The contributor grants the project the right to use and distribute the code they are submitting.
  • The contributor has the right to grant the previous two points.
  • Any code submitted by a contributor is not guaranteed to be accepted or used.

Take the Node.js CLA. It’s a pretty straightforward form that defines the expectations for contributors and asks for the contributor’s name and other information. These days, asking for someone’s GitHub user name as well is quite common (to help automate the process of checking CLAs for commits).

The CLA will be important should any legal action be taken against your company as a result of the code contained in the project. Because the company is the maintainer of the project, any legal action would likely be directed at the company itself, rather than any individual contributor.

CLAs are sometimes controversial, and some developers refuse to sign them. That’s an acceptable loss to protect yourself and your company from the legal risks of open-source projects. Those who are familiar with the open-source community and the reason behind CLAs will be more than happy to sign on and contribute to your project.

Maintaining The Project

An overlooked part of the open-source process is maintaining the project once it’s been published. Many developers (and some companies) view the step of open-sourcing a project as the end of the process — they’ve already spent considerable time creating software that they now want to share with the world. In truth, open-sourcing a project is the beginning of a journey. The act of sharing now makes it, effectively, communal software, and you can now expect the project to be discussed and to evolve as a whole.

open1
Once a new project is open-sourced, eventually you’ll start receiving suggestions, requests and pull-requests. Maintenance is a task that is often overlooked in open-source projects. Image credit.

Many companies that are new to the open-source community make the mistake of publishing their code and leaving it behind. Issues are left unresolved and unanswered, road maps are not shared, pull requests are ignored, and there is no way to get in contact with the people behind the project. As much as open-source projects can enhance your technical brand, leaving projects in this state can hurt it.

Once you’ve open-sourced a project, you must commit to maintain it. Even stable software will have bugs, and some of those bugs could be found by people outside of your company. If you have no intention of interacting with anyone outside of the company on this project, then you might want to consider simply distributing the compiled binary or library freely, and not actually open-sourcing the code.

While there are no established rules for maintaining a project, here are some guidelines I follow:

  1. The public repo is the source of truth.
    Once you’ve published your source code to a public repository (or repo), all development should happen in that repository. The public repo shouldn’t simply be a clone of an internal one. If the project is being actively developed, then that development should happen exclusively in the public repo in order to be as transparent as possible. Developing in private and then updating periodically prevents the use of pull requests and makes forking your project extremely difficult and frustrating.
  2. Plan in public.
    Use a public bug tracker to track all issues, so that others can see what’s being worked on and what’s already been reported. Post a road map somewhere public that shows plans for development. Be as transparent about the development process as possible. In short, open-source the way your project will grow and evolve.
  3. Dedicate company time.
    If you are the primary author of the project and you’ve open-sourced the code, then you (or a delegate) should set aside time to interact with external contributors. That means making timely responses to pull requests and issues, which in turn means setting aside time daily or weekly. This has now become part of your full-time job, not just a hobby.
  4. Open channels of communication.
    Give external contributors a way to interact directly with the maintainers. This could be through a forum, mailing list, IRC chat or another channel. Make sure that these systems are public; for example, an IRC chat should not be on your company’s chat server. Plenty of free communication services exist to make use of. The simplest and least disruptive method is to create a free mailing list using Google Groups or Yahoo Groups.
  5. Commit to document.
    Lack of documentation is a huge problem with open-source projects. From the start, commit to writing good documentation that explains not only how to use the project but also how to set up a development environment, run tests and work effectively with the code as a contributor. There is no better way to discourage people from using your software than to give them no way to get up and running on their own.
  6. Maintain regular outgoing communication.
    There should be a steady stream of outgoing communication about the project. At a minimum, post announcements about new releases and security issues that require immediate upgrading. Maintain changelogs that describe differences between versions, and follow a predictable and regular scheme in your versioning (such as by following semantic versioning). This will help both users and contributors understand the impact of filing issues and submitting pull requests.

An open-source project very quickly takes on a life of its own once released. If a community forms around the project, then it could take up more and more of your time. That’s why a commitment to maintain the project needs to be a part of the open-sourcing process. Letting a project languish without any attention sends a horrible message to those outside of your company and will discourage people from contributing.

Warning Signs

Most open-source projects, whether by individuals or companies, are started with the best of intentions. Typically, the goal is to share learning and code with the world. However, the Internet is littered with abandoned projects. If your project ends up like this, it could hurt your and your company’s reputation. Projects slowly decay over time and can usually be identified by one or more of the following characteristics:

  • “Not enough time”
    The more frequently this phrase appears in responses to pull requests and issues, the more likely the project is headed for the graveyard. This is one of the top reasons why projects die: The maintainer runs out of time to maintain it. As should be obvious from this article, maintaining a project requires a significant amount of work, which is frequently not sustainable in the long term.
  • Too few contributors
    If most contributions come from one person, then the project is likely either early in its life (on the upswing) or close to the end. You can easily tell which is the case by looking at the date of the first commit. Thriving projects tend to have a large number of commits from the maintainer and a small number of frequent commits from a few others. Another good way to measure this activity is in the number of merged pull requests in the last year.
  • Too many open issues and pull requests
    A surefire sign that a project is on its way out is issues and pull requests that are left open with no comment. More than a few issues that have been open for a year means that the project isn’t being cared for.
  • No way to contact the maintainer
    If you can’t find a reliable way to contact the maintainer, whether through email, a mailing list, Twitter, issues or pull requests, then there’s not much hope for the project. Maintainers aren’t maintaining if they aren’t communicating.

Keep an eye on these patterns in your own project. If you recognize the warning signs, then you’ll have to decide what to do with the project. Either someone else should become the maintainer or it’s time to end-of-life the project.

End-Of-Lifing Projects

At some point, you or your company might find that there is no longer interest in maintaining the project. This is a natural evolution of software — sometimes a project outlives its usefulness. When this happens, you need to appropriately end-of-life the project.

End-of-lifing typically starts with a public announcement that the project is no longer being actively maintained (along with a post in the project’s README file). The announcement should address the following:

  • Why is the project being end-of-lifed? Has it been superseded by something else? Is it no longer in use? Do you recommend different software written by someone else?
  • What will happen to outstanding issues? Will bugs still be fixed? Will all outstanding issues be closed without being fixed?
  • Is there an opportunity to transfer ownership? If someone really likes the project, is your company willing to transfer ownership to them or their organization?

Ultimately, you might decide to delete the repository completely. While being able to see all of a company’s projects, even those that have been end-of-lifed, is sometimes nice, that comes at a cost, and so removing repositories from time to time might be prudent. In doing so, be certain that you have effectively communicated that the project is going away, and give at least 30 days notice to allow others to fork the project if they are so inclined.

Conclusion

Open-sourcing projects at work is a great initiative for many reasons. When done correctly, an open-source presence will do a lot to promote your company and its employees. Active open-source involvement signals your company’s willingness to interact with the technical community and to contribute back, both signs of a strong technical brand.

On the other hand, a poor open-source presence is worse than no presence at all. It signals general laziness or apathy towards a community of developers, a community that might very well want to help your project succeed. Few things are as demoralizing as trying to work on an open-source project that has been abandoned. Don’t be that company.

(al)


© Nicholas C. Zakas for Smashing Magazine, 2013.

December 17 2013

19:53

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

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

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

JPEGmini

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).

ImageOptim-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.

grunt-imageoptim

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.

Summary

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.

Resources

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.

October 30 2013

16:43

Selling Responsive Web Design To Clients


  

Designing and developing websites that work well on mobile devices is an important aspect of the work we do on today’s Web. This importance is reflected in the conversations I have with clients, almost all of whom list “support for mobile devices” as one of their top goals for a redesign — all except one, that is.

Late last year, I began a redesign project for a company that sells pressure-treated lumber products. Early on in our conversation, I turned to the topic of support for mobile devices and responsive Web design. Normally, this topic is met with enthusiasm, but not this time, as the client explained:

Our customers don’t use mobile phones to come to our website.

This isn’t the first time I’ve heard this comment from a potential client. I’ve had many conversations in which the company severely underestimates the number of people who access their website on a phone or other mobile device. Typically, a look at the analytics will open their eyes to the true impact that mobile is having on their website’s traffic. But when I looked at the analytics for this particular client, I was the one left in shock.

Two percent. That was how much of its traffic was coming from mobile devices at the time. That’s it!

Jumping ahead to the end of this story, I did end up working with this client to redesign their website, and that website is now fully responsive. The path we took to that point, however, provides an interesting glimpse into how we as designers can go about selling responsive websites, and when we should push for a solution that we know to be an important best practice and yet whose need is not immediately obvious.

Determine Whether They Actually Need A Mobile Web Experience

The title of this article, “Selling Responsive Web Design To Clients,” might sound like a shady salesperson attempting to convince a customer to purchase something they don’t need. That is not what I am advocating for at all. So, let me start by stating that the first step in this process should be to determine whether the client actually needs a given solution at all.

Make sure your solution fits the client
Make sure that the solution you are selling fits the client you are pitching it to. (Image: echerries)

When considering a responsive design for a website that doesn’t currently support mobile devices, begin by looking at the big picture. Do the traffic figures show that the client is attracting mobile users? If the mobile traffic figures are similar to those of this client of mine, then maybe they don’t actually need a mobile Web experience at this time — especially if the website has no other issues.

If a website is currently working well for the organization — meaning that it is converting visitors, features an attractive design, and has a high-quality user experience (for desktop visitors at least), while drawing an incredibly low percentage of mobile users — then redesigning or rebuilding that website only to make it responsive wouldn’t make financial sense.

You could argue that even a small percentage of visitors getting a poor experience is unacceptable and could be resolved by developing a responsive design. The designer in me can appreciate that argument, but I also understand the business side of the situation. Undertaking a responsive redesign to accommodate just 2% of the audience will be a very tough sell, no matter what company you are speaking with. This is why you need to look beyond just the traffic figures and think about more than just the design-related benefits of responsiveness.

Try To Solve Other Problems They Are Having

While support for mobile devices was not a compelling enough reason for our client to redesign their website, other concerns brought them to us in the first place. Two of these concerns were the visual design of their website, which was outdated and did not reflect their current marketing, and the lack of a content management system (CMS) or any tools to enable them to update the website on their own. So, I focused my proposal on solving these problems.

A redesign would bring the look and feel of the website in line with the rest of the client’s marketing, while also improving the overall aesthetics and usability of the website itself. We would bring the website up to current standards and integrate it into a CMS (in this case, ExpressionEngine) — which would solve the second problem of being able to update the website.

As I discussed with the client this proposal and the process we would follow, I mentioned that we would make the website responsive as we rebuilt it. As expected, the client questioned whether this was necessary or added cost to the project — which, of course, it would have. The key here is that I was now able to steer the conversation towards the benefits of responsive design above and beyond the support for mobile devices.

Focus On More Than Just Phones

When we talk about responsive design, we often focus on phones. This makes sense because smartphones are most unlike the type of devices that we’ve designed for in the past — that is, desktop screens. Creating one website to be marketed and managed and to deliver a high-quality experience to all devices, from desktops to smartphones, is an excellent way to demonstrate the flexibility and power of responsive design. But for this client, phone users were seemingly not a factor. Luckily, responsive design is about so much more than phones.

The devices we are designing for today are a variety of sizes
The devices and screens we design for today are a variety of sizes. (Image: Edwin Torres)

In speaking with the client, I discovered that a complaint they often receive from customers is that the website appears “small.” The reason is that it had been designed to a fixed width many years ago — so long ago, in fact, that it was built for an 800 × 600-pixel resolution. When a user on what is now a typically large desktop screen visited the website, they saw a very narrow column, with a lot of unused space on either side. Yet, the company still had a number of other visitors on old desktops and laptops with low resolutions. So, merely making the website bigger wasn’t the right solution. The company needed a website that would work well both on large screens and on old small screens. This was a problem that could absolutely be solved by a responsive design.

Instead of focusing on phones and small screens, I explained to the client that a responsive design would enable us to effectively present a layout for today’s large desktop screens and also reflow to accommodate laptops and old desktop monitors that don’t have a high resolution.

As we demonstrated a responsive website for the client using a large desktop screen and a much smaller laptop, they got excited and told us that they had hated the “smallness” of the website for years, but their previous designer explained to them that, to support visitors with old computers, they had no choice but to design for this “lowest common denominator.”

Responsive design would solve this problem, and by this point our client was pretty much on board because they saw that it solved a problem they had (the “smallness” of the website), without addressing a problem that they didn’t think needed to be solved (support for mobile devices).

Build For The Future, Not Only The Present

When I discuss responsive Web design with my clients, I rarely use the term “mobile support” because it makes those clients think only of phones or, perhaps, tablets. I instead prefer the phrase “multi-device support,” which better encompasses the wide range of devices and screen sizes we are really designing and developing for these days.

One of the advantages of responsive design is that it doesn’t focus merely on the devices and screen sizes out there today. Because a responsive website reflows to fit a screen of any size, with an experience and a layout suited to each, the approach is very future-friendly. The prospect of having a website that continues to work well into the future, even as new devices and screen sizes come to market, appealed to our client. We further explained that, even if the website didn’t draw a lot of mobile visitors today, it might in the future. A responsive approach would ensure that those mobile visitors get an experience optimized for them.

The client remained skeptical that they would ever attract mobile visitors, but they were sold on responsive design because of the other problems it would solve. Additionally, because we were rebuilding the website anyway, making it responsive at the same time made financial sense. Trying to strap responsiveness onto an existing non-responsive website can be daunting and expensive, whereas incorporating responsiveness early on in the design process is much easier, especially if it is a core part of your process and you’ve developed a workflow for it, which we have. That workflow helped us to make this approach both technically and financially viable for our client.

Moving forward with the project, we knew that we would have to keep an eye on traffic once the website went live to prove our theory about the lack of mobile traffic.

Future tunnel
Looking to the future will help us to build websites that work well even as new devices and screen sizes come to market. (Image: Joe Penniston)

Break The Cycle

Two percent of traffic from mobile devices is so low a figure that, when I first saw it, I questioned its accuracy.

This particular company does not market or sell to the general public. It is a B2B company that works with a relatively small group of distributors and contractors from a defined geographic area. The client attributed the low mobile traffic to this demographic, which would access the website from an office desk, not on the road with a phone.

I agreed that mobile figures would likely be lower for this demographic than for a typical audience (for the websites we manage, 30% of traffic comes from mobile visitors, although some websites get over 50%) — but not this low. I felt that something else was happening here, and my gut told me that part of the reason was that the website worked so poorly on mobile devices. I suspected that the lack of a mobile experience kept mobile visitors away.

I did not share this theory with the client at the time, but in the year since the new design went live, the mobile traffic figures have climbed, from 2 to 17%. Granted, that is still lower than what many other websites get these days, but it is a sizeable jump and cannot be ignored.

The only reason we can point to for this jump is the website’s responsiveness. Neither the demographic nor the market has changed. The only difference is in how the website works on mobile devices. The improved experience has increased traffic. This was one of the reasons why I pushed for responsiveness, even when the traffic figures suggested otherwise.

Solving Problems

Part of our job as Web professionals is to solve problems for our clients. But we have to solve not only the problems that the client tells us about, but the ones that they do not even know they have.

All problems are opportunities in disguise
Our clients’ problems are opportunities for us to provide high-quality solutions based on our experience and expertise. (Image: Donna Grayson)

With the redesign of the website, our team was able to solve a number of problems that the client brought to our attention, including the outdated design and the absence of a CMS. And our solution to the problem that they weren’t aware of — a lack of mobile visitors due to a lack of support — validated our responsive approach, even when the traffic figures did not show the need for it. We knew that a responsive design would fix the layout on large desktop screens as well as on small old monitors, but would also help turn around the website’s unusually low traffic from mobile visitors, and we were proven correct.

We knew that part of the rise from 2 to 17% could be attributed to existing customers who had been sticking to a desktop computer out of obligation but were now switching to a mobile device. Those users are now able to access the website’s content on their preferred device, confident that they will get an experience suited to the device.

Another reason for the increased mobile traffic is undoubtedly new business. The movie Field of Dreams is instructive here: “If you build it, they will come.” If a website does not support mobile devices, then a mobile visitor will likely leave immediately upon noticing it, never to return. This was part of the reason for the low numbers. But the website no longer turns mobile users away, and the users in turn will not leave as soon as they arrive. Rather, they will find the information they are looking for and might visit again or point other people in their organization to the content. Mobile support encourages mobile use.

By addressing the customers’ problems, including ones that the client was not aware of, we were able to sell a responsive approach. The improved experience has boosted the mobile audience, as well as boosted the leads that the company is getting from the website.

In Summary

Selling a responsive design is no different than selling anything else. It all starts with solving problems.

For this project, we highlighted the benefits of a responsive approach beyond the familiar benefit of support for mobile devices that we normally mention to prospective clients. Here are some of the key points we made in discussing the value of a responsive approach for a website without an obvious need for mobile support:

  • We would be supporting a variety of screen sizes that aren’t typically considered when discussing responsive design, including large new desktop monitors with very high resolutions and old small screens with correspondingly low resolutions.
  • The website would scale into the future as new devices and screen sizes come to market and as mobile users begin to visit.
  • We would save time, money and technical complexity by doing this work now, as part of the redesign process, rather than trying to cram it in later when the website is set.

(al, il)


© Jeremy Girard for Smashing Magazine, 2013.

October 10 2013

10:15

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 02 2013

14:58

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…

colors

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…

Lifehacks

Tools

Collaboration

TimeZoneSlider
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
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
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…

Screenhero

Productivity

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
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…

Divvy

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
SizeUp allows you to quickly resize and position windows with keyboard shortcuts or a handy menu-bar icon. Read more…

SizeUp

DragonDrop
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…

DragonDrop

  • 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
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

DropTunes
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

sideCLOUDload
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
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…

GuideGuide

ColorBlendy
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
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…

ImageMagick

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
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
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
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
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

Review
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
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
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…

stylemanual

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
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)

CreateMyInvoice
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

StatusPage.io
StatusPage.io 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…

StatusPage.io: Hosted Status Pages for Your Company

Beathound
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

Syncios
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

Skrivr
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.

September 18 2013

14:03

Land Your Next Web Development Job: The Interview Process


  

During my career as a software developer and manager, I have been involved in many interviews. Whether the interviewer or interviewee, I have always paid special attention to the interview process.

In my current role, I spend a lot of time interviewing potential employees, so I’ve seen my fair share of good and bad interviews. Some candidates stand out from the crowd immediately, while others are just another face in a million. In this article, I’ll give you a few tips and a head start on your next interview. Whether your next interview is your first or twenty-first, hopefully these tips will help you along the way.

Interviews can be scary, especially when you attend your first few or haven’t attended any for a while. Preparation is the key to success and can take the stress out of the dreaded process. You can do a few things before even walking through the door. If you are prepared and your mind is ready, then the whole process should be a breeze. I like to break the interview process into three steps: preparation, interview and post-interview.

Preparation

This is the most important stage in the process and could determine whether you appeal to the recruiter. A CV won’t even make it past the review stage if it doesn’t meet certain criteria, but by preparing beforehand, you can maximize your chances of making it to the interview stage.

Update Your CV

Spend time creating a great CV. Some great templates are on Guardian Jobs. If you have never created a CV, try to mirror the layouts of some of the people who inspire you. I drew some inspiration from both Scott Hanselman and Paul Irish. For example, Paul’s CV contains testimonials from other popular developers in the community, and Scott’s CV contains highlights from his presentations, qualifications and open-source contributions. You might not have the same experience or work history as the people who inspire you, but you can always get new ideas from their CVs. Who are the leaders in your field?

I follow a few rules when creating a CV:

  • Don’t lie.
    Never claim anything on your CV that you can’t do, because if an employer questions you and you don’t have the answers, you could lose the job and look like a fool in the process.
  • Steer clear of buzzwords.
    I have noticed a trend of candidates adding a load of buzzwords to their CVs to help recruitment agents find them. Only add a skill if you have used it before and feel competent enough to answer questions about it. Also, steer clear of buzzwords such as “dynamic,” “synergy” and “creative.”
  • Have your CV reviewed.
    Get your mother, sibling or friend to review your CV before submitting it. The extra pair of eyes might spot a few areas for improvement and help you finely hone the document into the perfect CV. Remember that your CV is the first point of contact before you walk in the door. You may be the greatest programmer in the world, but if your CV isn’t up to snuff, no one will want to interview you!
  • Spellcheck.
    And then spellcheck again!

Put Your CV Online

If you haven’t done so, create a LinkedIn profile. It’s a great way to get your profile out there and to get potential employers looking at your CV. Simply upload a copy of the CV that you created earlier, and, with a little tweaking, LinkedIn will format it for you. I often use LinkedIn to see whether a candidate knows someone I know or have worked with in the past. Professional connections are a good indication of a person’s working background. You might have a friend who works at the company — a referral always helps.

Another great website for developers is StackOverflow’s Careers 2.0.

StackOverflow Careers 2.0

Much like LinkedIn, Careers 2.0 lets you post your CV, but it is more developer-focused, allowing you to link to your open-source projects and any technical books you may be reading. Once you have created your online profile, both LinkedIn and StackOverflow will let you export a PDF of your profile, which could serve as a CV. So, if you like the format and layout, simply download and use it for your next job application.

Get Some Code Out There

If you are a Web developer or designer, then an online presence is vital. If you have any side projects or even snippets of code, get them onto a social collaboration platform, such as GitHub. Seeing that a candidate builds things in their spare time or even contributes to open-source projects instantly piques my interest. It’s a great indicator that they are passionate about what they do. Include your highest-quality work in your online portfolio. Tinkering with projects in your spare time also helps you to learn and grow, and hopefully you will be able to bring that knowledge into the company.

Github

A few great code-hosting services are GitHub, Bitbucket and CodePlex. Once you have uploaded your code, put it on your CV! It could help you to stand out from the crowd.

If working on an open-source project isn’t for you, then you could always contribute on StackOverflow. The community is great, and the more questions you answer, the higher your score, or “reputation.” While this doesn’t necessarily indicate that a candidate is qualified, it does show that they have an active interest in the community and are willing to learn.

Get a Blog Up and Running

If you have the time, writing a blog can be a rewarding experience. It will teach you the ins and outs of SEO, website deployment and social promotion. You could go down the route of writing your own blog engine (which would give you something to deploy on GitHub!), or you could use one of the awesome blog engines out there that are ready to roll. I quite like Tumblr, SquareSpace and even WordPress.

Tumblr

Again, don’t forget to add the blog’s URL to your CV! Blogging isn’t for everyone, and it takes time, so if you feel you might not be able to commit or update it regularly, get yourself onto Twitter and start following people who inspire you. As an employer, I always like to see what a candidate is interested in, talking about, etc.

Do Your Homework

Before going to the interview, learn as much about the company as you can. How long has it been operating? What products does it sell? What is its culture like? Think about the challenges it faces and how you can use your experiences and know-how to help it build great tools. Nothing is worse than interviewing someone who has no idea about our company or what we do. You don’t need to spend hours learning the history of the company, but a basic understanding of what it does and its ethos is important. If you haven’t done your research, then an automatic “No” is almost guaranteed!

Technical Test

If the job entails writing code, then certain companies will require you to complete a technical test. It could be a simple exercise that you complete at home, or it could be a test that you come into the office and complete then and there. If you are asked to complete the test at home, put as much effort into it as possible. I have received many tests from candidates that have a lot of JavaScript errors or that don’t compile. Make sure yours has no errors and that it works on platforms other than the one you develop on! If you get the chance, review the code briefly with someone you know. You might just find a few areas to improve on.

Site44 dropbox websites

Another great idea is to deploy the test to a live server. You can sign up for a free starter plan on Site44, which enables you to create and deploy HTML websites from your Dropbox account for free. Both Amazon EC2 and Windows Azure let you set up free cloud websites in a matter of minutes and delete them when completed.

By deploying your application and showing a working version, you demonstrate an understanding of how to deploy software, which could give you an advantage over other candidates. In fact, I hire most developers who show me a live, deployed, working version of their code!

Technical Test

By taking that extra time to make sure your technical test is outstanding, you give yourself a clear advantage over other candidates.

The Interview

If you’ve made it this far, congratulate yourself. Your hard work and preparation have secured an interview, and the employer thinks you might be the right candidate. It’s time to nail the interview and finish the whole process in style.

Questions

Before going into the office for the interview, write down a few of your own questions about the position. This is your chance to learn as much about the role as possible. Having learned a little more about the company, you might even find that it’s not the place for you!

Ask about the working environment, the development stack you will be working on, and anything else related to the job. Interviewers love to answer questions, and it shows you have taken the time to think about the position. Going into an interview without any of your own questions is a bad thing! Remember that you are also interviewing the employer in this stage!

Don’ts

There are a few definite no-no’s in the interview process. Follow these simple rules to avoid any awkward moments:

  • Don’t ask about the salary.
    Bringing this up during the interview is not the best timing. Other members of the staff will often sit in on the interview, and your potential salary might not be intended for their ears. If you do need to ask at this point, do it privately with the hiring manager.
  • Don’t ask how you did.
    This is important because the people in the room will be discussing you after the interview. Other candidates might be interviewing before or after you, and the team will need a chance to compare you to them.
  • Don’t badmouth your former employer.
    No matter how mistreated you feel or how bad the job was, keep your thoughts about your former employer to yourself. Be as diplomatic as possible, because disparaging other people won’t win you points with the interviewer. Your attitude towards and description of your former employer is a good indication of the kind of employee you will be. If asked about your last position and why you left, explain the situation but save the ranting — you would only make yourself look bad!
  • Don’t lie.
    If you don’t know the answer to a question, just say so! The interviewer will respect you for answering honestly and will understand that you don’t know the answer to every question.

Last-Minute Details

Whether you are applying for the job directly or through an agency, check a few last things before going to the office for the interview:

  • What is the dress code?
  • What will the format of the interview be?
  • How long will the interview last?
  • When and where will the interview be held?
  • Who will be present in the interview?

Find out the address and time of the interview, and arrive at least 15 minutes early. This will give you a chance to relax and to avoid the stress of rushing about. By arriving early, you will also observe the staff coming and going through the reception area. Those 15 minutes could give you a good feel for the company.

Finding out these simple things before going for the interview takes some of the stress out of the situation. Preparation is the key to success!

Relax

The interview process is as much about you finding out whether the job and company are right for you. Feeling nervous is natural, but try to relax and enjoy the process. If you are relaxed, you will interview that much better and will come across as more confident. You’ve done all the hard work to get through the door — now, just keep up the good work.

Post-Interview

The interview is over, and you are eagerly awaiting the result. Depending on the company, it could take a few days to a week to get back to you. Rest easy, knowing that you have done all the hard work and given it your best shot.

If you wind up not being chosen, don’t be disheartened. The timing might not have been right, or you might need to brush up on a few areas. There could be any number of reasons why you weren’t offered the position, many being outside of your control. Interviewers will often give you feedback on the process and your performance; if you would like more detail, don’t be afraid to ask. Whenever I have been turned down for a position, I have asked the interviewer for areas to improve upon. It is an opportunity to learn and grow. Practice makes perfect, and the more you interview, the better you will become at the process. Once a few interviews are under your belt, it starts to become a piece of cake.

If you do get the job, well done! You’ve nailed your first interview and are on your way to starting the new job. You should be extremely proud of your achievement.

Remember

Interviewing is difficult! No matter how hard you try, you will not always be successful, and sometimes it just doesn’t work out. By following the steps in this article, hopefully you will become more effective at the process and seem a more attractive candidate. Finally, remember that the interview process is as much about you learning about the employer as it is about them learning about you!

(al, il)


© Dean Hume for Smashing Magazine, 2013.

August 28 2013

11:10

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.

shower-curtain_mini
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.

Science

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_mini
Trust and good leadership can steer your team to enjoy their work and do a much better job. (Image source: opensource.com)

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?

Music

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.

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

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.

Weather

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.

make_things_better_mini
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: opensource.com)

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!

Thoughts?

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

(al) (il) (ea)


© Jesse Friedman for Smashing Magazine, 2013.

August 16 2013

14:42

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

Wordalizer

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

FontReporter

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.

MultiDo

MultiDo

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.

EasyHistory

EasyHistory

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

Multi-Find/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.

MakeCropMarks.jsx

MakeCropMarks.jsx

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.

IndexMatic

IndexMatic

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?

Conclusion

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.

July 25 2013

13:25

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?

Requirements

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.

Requirements

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%");

Language

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.

Tools

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!

Algorithm

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 ""+originalStem.name+""
How many stems do you need?", 12);

Note that I used originalStem.name 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 "+originalStem.name);

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 ""+originalStem.name+""
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 ""+originalStem.name+""
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 ""+originalStem.name+""
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
newStem.name = originalStem.name + " " + (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();
	stemsGroup.name = originalStem.name + " ("+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 ""+originalStem.name+"" 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 ""+originalStem.name+"" 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(); stemsGroup.name = originalStem.name + " ("+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 newStem.name = originalStem.name + " " + (i+1); // Place new layer inside stems group newStem.move(stemsGroup, ElementPlacement.PLACEATEND); }; // Add index to the original layer originalStem.name += " 1"; };

That wasn’t too hard, was it?

Finish

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:

Conclusion

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!

Resources

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 18 2013

11:56

So You Want To Write A Digital Strategy?


  

“Can you put together a digital strategy for us to review?” Requests like this strike fear into those of us who work on the Web. What do we know about putting together strategy documents? Yes, we understand the Web, but we don’t know how to write a document that is essentially a business strategy. What even goes into a digital strategy!

Unfortunately, this is something management seems to increasingly request from Web designers. Whether you are an external contractor or part of an in-house team, sooner or later you will be asked to put together a digital strategy.

But do not despair. A digital strategy is not as intimidating as it sounds. It is just a document outlining how your company or client should handle the different aspects of digital from the website and mobile to email, social media and digital marketing. It doesn’t need to cover everything in huge depth (it would be unreadable if it did), but instead should establish some general approaches to these different areas.

This post will provide you with a crash course on where to start and what kinds of things to include. I hope it proves useful.

An Incredible Opportunity

Whether you have been asked to produce a digital strategy or management have reluctantly listened to your pleas to be more strategic, getting to write a digital strategy is an amazing opportunity.

It is a chance to show your client or boss that you are more than an implementor and that you have a valuable contribution to make toward the future of digital.

“Creating a digital strategy is a chance to bring some order to the chaos that is most organisations approach to digital.”

Most companies approach the Web at a tactical level, making decisions on the fly in response to the latest new technology or business demand.

If like me you have worked on projects where the requirements have changed part way through or somebody in senior management has suddenly decided the company needs an iPhone app, then you know quite how reactionary most organisations are. There is little long term thinking in terms of development roadmap, governance, resourcing and policies.

By forming a digital strategy you have an opportunity to establish a firm direction for your online footprint, rather than being the victim of managerial whims.

So where do you begin?

A Digital Strategy Is Not A Business Strategy

You may be tempted to look at business strategy documents for inspiration. After all, these have been around for years and their format is well established. However, as is so often the case when looking to other mediums for inspiration, they don’t really fit digital.

A traditional business strategy focuses on two key components; a long term roadmap and budget forecasting. Unfortunately both of these elements are hard to replicate in a digital strategy.

Creating a digital strategy that looks 3–5 years ahead is an unrealistic expectation. Technology just moves too fast for that. Equally, accurate budgeting is difficult when the landscape is evolving at such a rapid rate. A digital strategy therefore has to take a different approach.

“A digital strategy needs to focus more on creating policies, priorities and people.”

A digital strategy needs to focus more on creating policies, priorities and people who can be trusted to make the right decisions as new technologies emerge, rather than defining everything up front. As the old adage says, its about “teaching a man to fish”.

Policies, Priorities And People

What does it mean for your digital strategy to focus on policies, priorities and people?

Essentially, if the intention is to create a strategy that can adapt to the fast moving pace of digital, you need a flexible decision making process. This requires the right people making those decisions within the right kind of framework and then being able to implement those decisions quickly.

It’s therefore important that your digital strategy includes:

People

Who makes decisions about different digital elements and who actually does the work? This is the kind of thing that could be addressed using a responsibility assignment matrix. It is important that the right people are making the right decisions. For example, you don’t want the Head of IT making decisions on design, or the Head of Marketing picking a hosting environment. This happens all too often when the digital strategy is managed by a committee.

Adequately resourcing the digital strategy is also important. What work is going to be done in-house and what should be outsourced? When outsourcing, what criteria are used for selecting a supplier?

Policies

To enable fast decision making it helps to have a number of policies in place. Policies act as a framework within which operational decisions are made. In other words, instead of having to make a decision each time a scenario occurs, the decision has already been made and formalised into a policy.

A great example of this is a social media policy. What are staff allowed to say on social media? What is acceptable and unacceptable? Having a social media policy provides security for staff (they know what they are allowed to do), but also prevents the need to discuss every tweet before it is posted.

Policies are also great for resolving internal conflict. For example, having a policy for deciding what content appears on the site homepage can save a lot of conflict later. It moves the debate away from being subjective opinion to something more tangible.

BBC Gel
The BBC have clear policies for the design style of their websites. Larger view.

Other policies could include:

  • Accessibility
  • Content removal
  • Development standards (including coding standards)
  • Testing requirements (including device and browser support)
  • Writing style
  • Design style
  • Crisis management

These policies do not all need to be defined in the digital strategy, but they need to be identified and an approach for their creation established. Overtime, as each policy is put in place it needs to be agreed, documented and explained to stakeholders. The Government Digital Service does an excellent job at doing this in their service manual.

Priorities

Disagreement over priority is probably the primary factor that slows down decision making over digital within most organisations. In an environment where fast decision making is crucial, outlining key priorities is so important.

The two most important priorities to set are business objectives and target audiences.

Most organisations seem terrible at even defining their digital business objectives and user groups, let alone prioritising them. It is therefore essential that any digital strategy you write does exactly that.

Without clearly defined priorities in these two areas you will have to argue about priorities every time they clash. Whether it be over homepage content or top level navigation, there will be numerous occasions where a clear list of priorities will help resolve conflicts and keep things moving forward.

Having a set of priorities becomes most useful is in the area of maintenance. If you are fed up with management pulling you from one ‘urgent’ set of tasks to another, you need a clear set of objectives. These prioritised objectives can help define whether or not something is truly urgent. Those who come with a ‘top priority’ request have to justify it against your agreed priorities.

In the past I have worked with clients who have a prioritised stack of features and content that their in-house team work through. When somebody wants to add a new feature to the stack, they must sell the feature to a Web committee based on user needs or business objectives. This then decides its place in the stack.

Clear priorities about your audiences and objectives will also allow you to create a preliminary roadmap.

Creating A Preliminary Roadmap

Although creating the kind of roadmap you would see in a traditional business strategy document is unrealistic, that does not mean you cannot give at least some indication of a development program.

The emphasis of your digital strategy should be on immediate issues that need addressing. What are the most urgent areas where work needs to be done? Because these are to be actioned immediately, it is possible to provide a considerable amount of detail about how these can be tackled.

When looking further ahead the level of detail can be reduced. It may be possible to give a rough timeline of development priorities as far as two years ahead, but it must be made clear that this roadmap would be subject to change as the digital landscape alters.

To not include any kind of roadmap would prove unsatisfactory to most senior managers.

“Senior management lack confidence in digital because they don’t really understand it. They need a roadmap to reassure them.”

For senior management, a digital strategy is about quantifying the Web and giving them a sense of control over it. If all your digital strategy does is essentially say “trust your Web team and their policies”, this will not meet their need for control. A roadmap on the other hand (no matter how vague) will help give them the confidence they need.

But what areas should that roadmap encompass?

The Scope Of Your Digital Strategy

The exact scope of your digital strategy will vary depending on the organisation and what they do. That said, your digital strategy should encompass a lot more than the website. As Web designers it is easy for us to focus on the website, because that is what we know. However, digital is further reaching than that.

In most cases a digital strategy should encompass:

  • Mobile – Are you going to build a responsive site? Do you need native apps? If so, what platforms will you support?
  • Social Media – What platforms are you going to support? How are you intending to use social media? Who is responsible for it? What policies exist around acceptable behaviour? How are negative events handled?
  • Email – This should cover everything from newsletters to trigger based emails. You should address who is responsible for email correspondence and how your email lists are maintained and privacy is protected.
  • Digital Marketing – This would encompass everything from SEO and PPC to banner advertising and affiliate schemes.
  • Website – What features should you support on the website? How do you decide on content? Who is responsible for site maintenance from design, content and technical perspectives?

In each area the digital strategy should look at the benefits these technologies have for your business, assess its current performance and make recommendations over the short and long term.

This scope can prove challenging for an individual to address, as it requires such a broad knowledge. If that’s the case, it may be that your digital strategy will have to recommend getting in experts to provide more detail in certain areas. It is better to be upfront with your limitations than leave the strategy vague.

With so many competing areas fighting for attention and only limited resources available, it is hard to write a digital strategy without looking at budget.

Digital services so good that people prefer to use them.
In the end of the day, the main goal of every service is to make sure that people actually prefer using it. This could be the goal of every digital strategy, especially among government services websites. Image credit: Dafydd Vaughan.

You Can’t Avoid Talking About Money

Although it is impossible to define your digital strategy accurately enough to create detailed budgets, that does not mean you can avoid the subject of money. Senior management will need some indication of budget in order to plan expenditure going forward.

A good place to start is by shifting managements thinking away from a series of fixed cost projects to a program of ongoing development.

A program of ongoing development is much better suited to the evolving nature of the Web.

A common approach to this kind of ongoing development is to adopt an agile model (such as used by GOV.UK). This uses a continually evolving stack of prioritised features and content that needs developing. As elements from the stack are developed, new elements are added in a continual cycle.

This approach recognises that your website and other digital assets are never finished and that it therefore makes no sense to apply a fix price budget to them. Instead, expenditure on digital should be thought of as an annual, ongoing budget like you would spend on marketing. By shifting to an annual ongoing budget rather than a series of one off projects, budgeting becomes much easier.

If the company wants to manage digital in-house, then it is a matter of establishing approximate costs for an internal Web team. Looking at the proposed work levels will give you an approximate idea of how big the team will need to be and who to include. This in turn will allow you to establish costs once you include salary, equipment and training.

If the company needs to outsource some or all of their digital work then things become a bit more tricky. Ideally some form of retainer at an agreed level will probably work best. However, most organisations don’t like working with external contractors in this way. In that case it is a matter of quoting on some of the work scheduled in the roadmap and extrapolating this over the year.

This may all be sounding a little vague and that is because it is. As I implied at the beginning, budgeting digital work is notoriously difficult. However, it cannot be entirely ignored. A best guess, with a suitable amount of contingency added, is better than nothing. At the very least it will start a discussion with senior management about the level of investment they can maintain.

If Not You, Then Who?

All of this talk about budgeting, policies and strategy may sound intimidating, but the truth is that there is probably nobody within your organisation or that of your clients who knows better than you how to put together a digital strategy.

It’s also important to emphasize that you don’t need to produce these documents in isolation. Putting together a digital strategy should be done in close collaboration with all stakeholders. You will not be working alone.

The problem is that nobody sees the creation of a digital strategy as their job, so if you don’t step up, then the chances are nobody will.

Don’t wait to be picked either. It is not uncommon for senior management to ignore the need for a digital strategy. Even when they do recognize the need, there is no guarantee that they will turn to you for it.

I would encourage you to be proactive in this area. Don’t wait to be asked. Offer to undertake this work or even just write a strategy document unsolicited. After all, as Grace Hooper says, “Its easier to ask for forgiveness than permission.”

Credits of image on front page: Dean Meyers.

(ea) (il)


© Paul Boag for Smashing Magazine, 2013.

July 16 2013

09:04

The Joy Of Illustrated Maps In The Era Of Google Earth


  

In my career as a freelance illustrator, map-making has become a favorite specialty of mine. With each map assignment, I virtually travel across the globe, visiting places I’ve never been. Most recent was a “trip” to New Zealand for a sampling of local Wellington beer for Draft Magazine. My maps are designed to appear next to magazine stories about trips to faraway places, or about the best restaurants in a nearby neighborhood.

I create them in Adobe Illustrator, and I relish the research process as much as working on the drawings themselves.

There was a time when map assignments arrived from clients in a FedEx envelope, full of research, including Xerox’ed maps taped together and marked up with a highlighter. Back then, I could search online for photo references, but it certainly wasn’t the 3-D experience of flight that it is now. With Google Earth, I can get the lay of the land and see the heights of buildings and the way green spaces meet city blocks. These details give me a sense of place that fires my imagination.

I received the brief for Draft Magazine’s project from art director Kevin Robie, with a list of publications to highlight, a preliminary layout and a few reference maps. My starting ritual is to create a Google “My Places” map, with a marker for each landmark, shop or restaurant highlighted in the story.

Here are the steps I took:

  1. Log into Google, and click on “Maps.” Click on the “My Places” button and then the “Create Maps” button.
  2. Name the map. Choose to make it “Public” or “Unlisted.” Hit “Done.”
  3. Search for a location using the search box, and then click “Save to My Maps.” From here, I can choose which map to save it to and view the map.
  4. Once I have saved locations on my map, click the “Edit” button, and then click on the location that I want to edit in the list. A callout box will appear on the map, allowing me to change the location’s title and description and even the color and style of the pin.
  5. With the map set up and Google Earth installed, I can choose to look at locations in “Satellite” mode or “Street View,” and then try the “Earth” view right from my browser to fly in and get a feel for the heights of buildings and the topography of the city.
  6. Download a KML file of my map by clicking the KML link or the Google Earth icon under the title of the map. Double-click the file to launch Google Earth on my system with my map preloaded.

Whether you explore your map in the browser or from the Google Earth app, you can fly around, visit street level and see the Panoramio photos taken in the neighborhood you’re visiting. If you’re lucky, the location you’re researching will have a panoramic virtual tour of the interior space. Street-view images can get out of date, so I always visit the websites of any businesses or restaurants that are being highlighted. I find that the Google Earth and satellite views give me a sense of a city or neighborhood that helps me to envision the overall look of the map.

Google has recently released the Google Maps Engine (currently in beta), which offers further customization, such as the ability to draw lines to create a virtual walking tour. If 3-D aerial views of buildings are what you’re after, Bing has a nice Bird’s Eye view that can supplement your research.

I took screenshots and kept my reference images organized in the project folder on my system. In Illustrator, I created a CMYK document at the size of Draft Magazine’s pages. I took maps provided by the client, along with screenshots of my Google Map views, and File → Place’d them in the document.

Place-linking images (as opposed to embedding them or pasting them from the clipboard) in Illustrator keeps the document’s size small — but it’s important to have a strategy for keeping up with the images on your system. If you move an image to a different location, the next time you open the document, Illustrator will ask you to find and relink the image that you moved.

I created a few more layers above my locked reference layer for the map’s background and the streets, and one for the dots that mark the locations I was highlighting.

The first stage of creating the map was to figure out the composition. In this instance, art director Kevin Robie provided his page layout with the map indicated. Once I’d drawn the location dots and some simple shapes indicating the background of the map, I could begin to see the shape and scale of the map and the space available for illustration.

At this early stage, I worked in grayscale and I traced the layout of streets with the Pen tool. I may not have included all of the streets I was drawing in the final map; sometimes the pattern of streets provides a grid texture that I can work with later. I tried to strike a balance by creating a basically accurate map that also functions as an illustration. I’ll take some liberties if it makes the information more legible and the art more attractive on the page.

With my background shapes isolated on their own layer, I clicked the Target icon in the layers panel and lowered the opacity of the background shapes layer to see the map reference below. With the basic map area laid out, I began searching for photo references to help me decide on a color palette and imagery for the different locations.

Each location I was highlighting needed an icon illustration that’s emblematic of the place. Food bloggers, such as foodiegemsofwellie, are a lifesaver to me because, although I can read about the specialty pies on Hashigo Zake, that website has no images to help me visualize the size and presentation of the dish that this bar is famous for.

One of the great advantages of working in Illustrator is that I have my own spot illustration elements, which I’ve collected from previous projects. I have glasses, bottles of beer, pizza and foliage that I can scale, recolor and rework to suit any project — a major time-saver.

I also collect color palettes from previous projects, which I save in the Swatches Panel libraries (click Swatch Libraries → Save Swatches…, and then access them under User Defined). Over the years, I’ve learned not to assume that a color on screen will print accurately, so I’ll always check it against a physical sample.

I used the Pantone Plus Color Bridge guide fan book to help me choose CMYK colors from the right-hand CMYK column (I ignored the spot colors on the left because this was a CMYK job). The bridge guide also shows the equivalent spot colors, hex codes and RGB values for each color. Illustrator’s swatch libraries for Pantone books can be found in the Swatch Libraries menu, under “Color Books.” Once I find a color I like in the fan book, I add it to my swatches panel.

With colors loaded on my swatches panel and photo references gathered, I was ready to start building the illustration. I did most of my work from beginning to end in Illustrator. With other types of illustration, I may start with pencil sketches, but maps really lend themselves to being “built” from solid shapes and lines in Illustrator.

After flying around Wellington in Google Maps, I knew I’d be surrounding the map with a border of green trees, so I started drawing circles in shades of green and trying out different tree shapes for the border. I typed notes about an icon’s subject matter directly on the map to save my ideas for later.

Keeping the tree decoration on its own layer allowed me to use a layer clipping mask in Illustrator to quickly crop the edges of the trees to fit the map. Later, I got rid of the layer mask and used individual clipping masks on separate groups of trees so that I could vary their placement. (See the resources at the end of this article for masking tutorials.)

I turned off the layer with notes and printed out a preliminary map in grayscale, at a slightly larger than final size. I laid the printout on my light box and drew letters in ink multiple times to find some that I could combine to make labels for the different locations. I’d later make a 300-DPI TIFF scan of the lettering in Image Capture.

Next, I opened the TIFF in Illustrator and “Image Trace”’d it in black and white, with “Ignore White” turned on. I’ve saved a custom Image Trace preset in Illustrator that I use specifically for my handwriting, to retain as much of the original line character as possible. All of the detail settings are very high, and noise is at the lowest setting:

  • Mode: Black and White
  • Threshold: 128 (default)
  • Paths: 97%
  • Corners: 90%
  • Noise: 1 px
  • Check: “Create Fills,” “Snap Curves to Lines” and “Ignore White”

To save these settings as a custom preset for future use, click the “Manage Presets” button (circled above) on the Image Trace panel, and choose “Save as New Preset.”

After ungrouping the expanded trace, I started assembling the letters into place names and grouping them. Then, I copied and pasted the names onto a separate layer in my map file.

The title was created from a line of type and a rectangle, using Object → Envelope Distort → Make With Warp → Rise. I kept a copy of the “live” envelope objects off to the side, so that I could always adjust the amount of distortion. Then, I chose Object → Expand… to convert the warped type to paths, so that I could change colors and edit further.

I sent my Illustrator sketch positioned in the layout to the art director. At this stage, I showed him the composition and color palette, with a few details to show where I was going with it. In Illustrator, changing the colors or shuffling the composition elements is easy, so I always let the client know that this work is preliminary, even though it looks solid and not “sketchy.” The icons were plain shapes, which allowed me to get my ideas across without investing time in details that might need to be changed later.

Sometimes, I’ll include pencil sketches of the icons, placed on the Illustrator map; in this case, I’d worked with Kevin enough that I could use Illustrator shorthand, and he would know the level of detail to expect from my finished work.

I saved separate AI files for the sketch, comp and final version, so I could always go back and grab something I’d gotten rid of if I decided later that I needed it. Illustrator files are small enough to make this possible without eating up much storage space.

Once I’d finished detailing the final illustration, I got rid of any unused colors on my color palette (Panel Options → Select All Unused, and delete). Then, I saved the color palette for future use (Swatch Libraries Menu → Save Swatches). I can always access it from the same menu under “User Defined” later. Then, I went to “Select All” and chose Edit → Edit Colors → Convert to CMYK. Now, if I clicked on a color in my artwork, I could see the CMYK formula in the color panel.

Finally, I exported a high-resolution CMYK TIFF of the artwork. I could bring this into Photoshop if I needed to make any final adjustments or convert it to RGB for the website. I sent the final TIFF, rather than the Illustrator file, to my client. The final AI file is complex and made up of so many tiny parts that it would be safer for me to do any necessary edits myself. I learned that lesson after receiving a printed cover on which I found my main character’s ear unintentionally floating away!

After a project, I’m always excited to see the final work in print. I filed the magazine away in the hope of getting to see New Zealand some day. In that case, I’ll be tearing out the page.

Further Resources

(al)


© Laura Coyle for Smashing Magazine, 2013.

July 02 2013

11:25

Taming The Email Beast


  

In the 1950s, when consumer electronics such as vacuum cleaners and washing machines emerged, there was a belief that household chores would be done in a fraction of the time.

We know now it didn’t work out that way. Our definition of clean changed. Instead of wearing underwear for multiple days, we started using a fresh pair every day, and so the amount of washing required increased. In short, technology enabled us to do more, not less.

Our work environments have followed a similar path. Tools such as email enable us to communicate more, rather than make life easier. In fact, many people are now overwhelmed by the amount of email they receive.

The Problem Of Email

Email has changed our expectations of communication; most of us feel like we need to be constantly available. We are tied to our email-enabled devices, and, like Pavlov’s dog, we have to check email every time the bell rings.

We are constantly available, constantly interrupted and continually overwhelmed.

Going offline isn’t the answer. As Web designers, we do not just build websites; we provide services to our clients. Therefore, we need to keep our clients happy, and that can only be done by regular communication. Clients need constant reassurance that their project is in hand, and they need continual chivying to provide the feedback and contributions we require to do our job.

Like it or not, email is a necessary evil. But that doesn’t mean it needs to rule us. We can tame the beast, and it all starts by doing less.

Like any beast, the more you feed email, the bigger it becomes. It’s time to put email on a diet. We can achieve this in a simple way: by using email less.

Send Less

Believe it or not, doing considerably less with email while still effectively communicating with our clients and colleagues is perfectly possible.

You probably don’t need to send out nearly as many emails as you do. You could almost certainly reduce the number of people you copy in your emails. Remember that the more email you send out, the more email you will get back. It’s that simple.

Email is not always the best form of communication. A face-to-face meeting or a phone call is usually much more effective. After all, what we actually say is the minority of communication. Tone of voice and body language are critically important.

Instant messaging (IM) is another option to consider. While it is intrusive at times, it can be perfect for quick questions. Email encourages long-form communication, while IM tends to be shorter.

That being said, there is no reason why emails need to be long.

Write Less

The less you write in emails, the less people will write in reply. People tend to mirror the behavior of others; so, if you want to receive more concise emails, start writing emails that are to the point yourself.

You might feel that short emails are less friendly and come across as cold, but these problems can be worked around.

Try linking to five.sentenc.es in your signature. That website will perfectly explain the brevity of your emails.

skitch-500_mini
Linking to five.sentenc.es makes it clear to clients that you keep your emails short because you value their time. Larger view.

An even easier option is to adopt the “Sent from my phone” signature that many people use these days, a good excuse for getting to the point.

Please don’t misunderstand. Being friendly and personable with clients is important. But email is not the place to do that. If you want to chat, pick up the phone.

Email should feel more like Twitter than traditional mail. In fact, many people are abandoning email entirely and turning to Twitter as their primary communication tool.

If this step feels too big, try summarizing your email at the top. This will make it easier for the reader to get the gist of your message if they are busy. Also, you will find that people start doing the same in their emails, making reading much quicker.

In addition to sending less email and shortening your messages, reducing the amount you receive is possible.

Receive Less Email

The easiest way to cut down on replies is to tell people that they do not need to reply. Putting abbreviations such as NRN (no reply necessary) or FYI (for your information) in the subject line will help with this. But that won’t stop unsolicited email.

Most of us get a lot of unsolicited email, despite the excellent spam filters that most email services provide. These emails are often newsletters that we’ve never subscribed to or announcements from companies from which we once made a purchase. Regardless of whether we ever did agree to receive these emails, they are now cluttering our inbox.

You might be tempted to just delete these and keep wading through the rest of your email. But take the time to find the “Unsubscribe” link, because these companies will not contact you just once. They will email you again and again until you stop them.

If they don’t include an “Unsubscribe” link, create an email rule that automatically deletes them. Those couple of minutes now will save you time and distraction in the long run. If you really are too busy to find those “Unsubscribe” links, then try out Unroll.me, which makes unsubscribing even easier.

Unroll.me_500
Unroll.me makes unsubscribing to emails easier than ever. Larger view.

However you do it, unsubscribing from mass emails will dramatically reduce your load. But don’t stop there; consider unsubscribing from newsletters that you did sign up for.

Keep Email For Communication Only

Part of our problem is that we have turned email into something it naturally is not. For example, many people use their inbox as a place to read news. Email was never really meant for that. Ample apps (such as the wonderful Feedly) provide this functionality.

Feedly_500_mini
Use an app like Feedly to read news, rather than your email client. Larger view.

Others use their email client as a repository for files that they want to keep. This makes little sense because a much more powerful filing system is built into their operating system.

And yet others use their inbox as a task manager, marking emails as starred or unread to remind themselves to take some action. However, dedicated tasks managers will help you work much more efficiently.

Omnifocus 2_mini_border
Your email client is not nearly as good a task manager as applications such as OmniFocus. Always use the best tool for the job. Larger view.

Turning email into something else merely clutters our inbox, making the job of reading and writing actual email less efficient.

To tame the beast, use email as a communication tool, not as a way to manage files, read news or schedule tasks.

While the techniques above will reduce the amount of email coming in, they address only the symptoms and not the root cause of our problem — which is our addiction to email.

Breaking Our Addiction

The reference earlier to our Pavlovian response to the audio notification of incoming email was slightly tongue in cheek, but accurate nonetheless.

Upon hearing that beep, we find it hard not to look. But checking email every five minutes adds up to over 32,000 interruptions a year! That is a phenomenal number.

Do we really need to check email that much? Almost certainly not. The majority of email that comes in either is unsolicited or can wait a few hours. The number of emails that genuinely require urgent action is relatively low.

The problem is that we perceive certain emails as being urgent when they are not. It’s just a matter of training our clients not to expect an immediate response. Of course, that is not always possible.

What we need is a way to be notified of only the important emails. Fortunately, achieving this is relatively easy. Start by turning off notifications in your email client. They are just too indiscriminate, notifying you of every single message that comes in.

Instead, sign up for a service, such as AwayFind, that will notify you by text or app notification when an email comes in that meets certain requirements. For example, you could choose to receive notifications only of emails from a particular client or about that day’s meeting.

Awayfind.com_500_mini
AwayFind notifies you about only the most important emails, freeing you from the shackles of constant alerts. Larger view.

If you don’t want to pay for this service, you could try IFTTT.

The point is to free yourself from constant interruption. Knowing that important messages will reach you instantly, you can comfortably check email only a couple of times a day. I check email first thing in the morning, at lunchtime and at the end of the business day. That way, I can respond reasonably promptly without having my workflow interrupted.

And when you do check your email, be organized in the way you deal with it.

Organizing Your Email

A lot of people make email more complicated than it needs to be because they are not organized. The biggest offenders are those who never move email out of their inbox.

Having an inbox filled with hundreds or thousands of emails increases the time it takes to process new messages. With so much clutter, figuring out what needs to be dealt with and what has been read becomes confusing. No matter how in control you may feel, things are bound to fall between the cracks.

Your inbox is where email arrives, but it shouldn’t stay there. Instead, clear your inbox every time you open your email client. You don’t necessarily have to act on every email right away — just read it and decide what to do with it.

You have five options upon reading an email:

  • Act on it.
    If you have time to act on the email immediately, then do so. This could mean responding or completing a task. But don’t feel obliged to act immediately if you have higher priorities.
  • Defer it.
    Too busy to deal with the email immediately? No problem. Turn it into a task that sits in your task manager. You can then deal with it on your own time and view it alongside your other tasks.
  • File it.
    Many emails we receive require no particular action, but merely provide useful information. In such cases, archive the post for future reference. With today’s powerful search tools, there is little need to tag it or add it to a folder. But do move it out of the inbox.
  • Delete it.
    If the email is spam or has no long-term value, delete it.
  • Delegate it.
    Some emails require action, but you might not be the best person to do it. In those cases, delegate the task by forwarding the email to the relevant person.

The lesson in all of this is that your inbox is just a holding place for unprocessed email. Once you have read it and decided what to do with it, move it out of your inbox to make room for future emails.

Start Today

You might be intimidated by the prospect of having to process all of those emails staring back at you in your inbox. This might all sound like too much work. I promise you it will be worth it.

If the inbox is too overwhelming, just declare bankruptcy. Archive everything except this week’s email. If any emails from more than a week ago haven’t been addressed yet, replying to them now would probably be too late anyway.

Archiving all of that email will leave you with a manageable load. Work through each email and decide what to do with it. If you get a lot of email, this could take some time, but it will be worth it. Remember that you don’t have to act on everything immediately. Defer actions until later by bouncing them to your task list. The trick is to process everything out of your inbox. Do that and I promise you will never look at email with the same horror again.

So, those are my tips on managing email. What are yours? What do you think of email clients such as Mailbox? Or have you a completely different approach? Let us know in the comments. We’d love to hear your perspective.

(al)


© Paul Boag for Smashing Magazine, 2013.

June 11 2013

11:21

Front-End Ops


  

When a team builds a complex application, there is often a common breakdown of roles. Specifically on the back end, there are database engineers, application engineers and operations engineers, or something close to this. In recent years, more and more application logic is being deferred to the client side. For some reason, though, operations folks aren’t going with it.

I recently wrote an article on “Deploying JavaScript Applications.” It was largely well received, and I was happy with the content, but one negative comment stuck out to me. I probably didn’t have the reaction that the commenter was intending, but it pointed out something to me nonetheless.

“With all due respect, may I ask if you actually enjoy your job? I am a dev, and I do enjoy using tech to do stuff to a point. If your role is to squeeze every last second of performance out of your app, then yea, all this stuff must be cool. BUT if you are a coder doing something else and then come back to all of this as well, then wow, I don’t know how you haven’t gone mad already. I’d be sick to the stomach if I had to do all of this, in addition to my usual work.”

See, I had written my article with a few too many assumptions. I understood ahead of time that a few of my solutions weren’t globally applicable, and that many people wouldn’t have the time or energy to implement them. What I didn’t fully grasp was how different the role in that article is from the picture that people have of a front-end developer in their head. Up to this point, a front-end developer had just the few operations duties lumped into their role, and even then, many people chose to skip those steps (that’s why Steve Souders is constantly yelling at you to make your pages faster).

I think things are about to shift, and I’d (humbly) like to help guide that shift, because I think it’ll be great for the Web.

The Front-End Operations Engineer

A front-end operations engineer is not a title you’ve likely come across, but hopefully one that you will. Such a person would need to be an expert at serving and hosting front-end resources. They’d need to be pros at Grunt (or something similar) and have strong opinions about modules. They would find the best ways to piece together the parts of a Web application, and they’d be pros at versioning, caching and deployment.

A front-end operations engineer would own external performance. They would be critical of new HTTP requests, and they would constantly be measuring file size and page-load time. They wouldn’t necessarily always worry about the number of times that a loop can run in a second — that’s still an application engineer’s job. They own everything past the functionality. They are the bridge between an application’s intent and an application’s reality.

A front-end operations engineer would be very friendly with the quality assurance team, and they would make sure that “performance” is a test that comes up green. They’d monitor client-side errors and get alerts when things go wrong. They’d make sure that migrations to new versions of the application go smoothly, and they’d keep all external and internal dependencies up to date, secure and stable. They are the gatekeepers of the application.

Why?

We have reached a point where there is enough work to be done in the operations space that it often no longer serves us to have an application engineer do both jobs. When the application’s features are someone’s priorities, and that person has a full plate, they will typically deprioritize the critical steps in delivering their application most successfully to the end users.

Not every company or team can afford this person, but even if someone puts on the “front-end operations” hat for one day a week and prioritizes their work accordingly, users win. It doesn’t matter how many features you have or how sexy your features are if they aren’t delivered to the user quickly, with ease, and then heavily monitored. Front-end operations engineers are the enablers of long-term progress.

Builds And Deployment

If you were to ask most back-end engineers which person on their team has traditionally worried about builds and deployment, I’m sure you’d get a mixed bag. However, a very sizeable chunk of engineers would tell you that they have build engineers or operations engineers who handle these things. In that world, this often entails generating an RPM file, spinning up EC2 instances, running things through continuous integration tools, and switching load balancers over to new machines. Not all of this will necessarily go away for a front-end operations engineer, but there will be new tools as well.

A front-end operations engineer will be a master of the build tool chain. They’ll help run and set up the continuous integration (or similar) server but, more specifically, they’ll set up the testing instances that their application runs on and then, eventually, the deployment instances. They’ll integrate Git post-commit hooks into the application and run the tests (either in Node.js and PhantomJS or against something like Sauce Labs, Testling or BrowserStack) before anything gets merged into the master. They’ll need to make sure that those servers can take the raw code and, with a few commands, build up the resulting application.

This is where many people use Grunt these days. With a quick grunt build, these machines could be serving the built version of an application in order to enable proper testing environments. The front-end operations engineer would be in charge of much that’s behind that command as well. grunt build could call out to RequireJS’ r.js build tool, or a Browserify process, or it could simply minify and concatenate a list of files in order. It would also do similar things to the CSS (or your favorite preprocessed CSS dialect), in addition to crushing images, building sprites and reducing requests in any other way necessary or possible.

Front-end operations engineers would make sure that all of this stuff works on people’s local machines. A quick grunt test should be able to build everything locally, serve it and test it (likely with some WebDriver API-compatible server). They’d make sure that team members have the power to push their applications into the continuous integration environment and test them there. And they’d remove single points of failure from deployment (GitHub being down during launch wouldn’t scare them).

They’d facilitate internal deployments of feature branches and future release branches. They’d make sure that the quality assurance team has an easy time of testing anything and that the managers have an easy time of demoing things that aren’t ready.

They’d help build multiple versions of an application to best suit each of their core sets of users. This could mean builds for mobile or for old versions of Internet Explorer, but all of it should be relatively transparent to those who are programming against those feature, browser or device tests.

They’d facilitate the process of taking a release, building it, uploading it to a static edge-cached content delivery network, and flipping the switch to make it live. And they’d have a documented and fast roll-back mechanism in place.

Perhaps most importantly, they’d automate everything.

front-end ops start image_mini
(Image credits: Rube Goldberg)

Tracking Speed

The metric by which a front-end operations engineer would be judged is speed: the speed of the application, the speed of the tests, of the builds and deployment, and the speed at which other teammates understand the operational process.

A front-end operations engineer would live in a dashboard that feeds them data. Data is king when it comes to speed. This dashboard would integrate as much of it as possible. Most importantly, it would constantly be running the team’s app in multiple browsers and tracking all important metrics of speed. This space currently doesn’t have a ton of options, so they’d likely set up a private cloud of WebPageTest instances. They’d put them in multiple zones around the world and just run them non-stop.

They’d run against production servers and new commits and pull requests and anything they can get their hands on. At any given point, they’d be able to tell when, where, and what the surrounding circumstances were behind a slow-down. A decrease in speed would be directly correlated to some change, whether a new server, a diff of code, a dependency or third-party outage, or something similar.

They’d have a chart that graphs the number of HTTP requests on load. They’d also have a chart that tells them the Gzip’ed and minified payload of JavaScript, CSS and images that are delivered on load. And they’d also go crazy and have the unGzip’ed payload of JavaScript so that they can measure the effect of code parsing, because they know how important it can be on mobile. They’d instrument tools like mod_pagespeed and nginx_pagespeed to catch any mistakes that fall through the cracks.

They’d be masters of the latest development and measurement tools. They’d read flame graphs and heap snapshots of their apps from their development tools (in each browser that has them). They’d measure frames per second on scrolling and animations, prevent layout thrashing, build memory profiles, and keep a constant eye on compositing, rendering and the overall visual performance of the application. They’d do all of this for desktop and mobile devices, and they’d track trends in all of these areas.

They’d religiously parallelize tasks. They’d track the application via waterfalls and .har data to make sure that all serial operations are necessary or intentional.

They’d chart the average run time of the tests, builds and deploys. And they’d fight to keep them low. They’d chart their external dependencies in size and speed. They may not have control over slow API requests, but they’d want to be able to point to the reasons why their numbers are increasing.

They’d set an alarm if any of these numbers rose above an acceptable limit.

Monitoring Errors And Logs

Managing logging is a critical job of a normal operations engineer. The data that is generated from running an application is vital to understanding where things go wrong in the real world. A front-end operations engineer would also instrument tools and code that allow the same level of introspection on the client side.

This would often manifest itself as an analytics tool. Application engineers would be encouraged to log important events and any errors at certain levels to a logging service. These would be appropriately filtered and batched on the client and sent back as events to an internal or external analytics-style provider. The engineer would have enough information to identify the circumstances, such as browser name and version, application deployment version, screen size and perhaps a bit of other data. (Though they’d want to avoid storing personally identifiable information here.)

Logging stack traces can be very helpful in browsers that support them. You can integrate third-party services that do this for you.

The front-end operations engineer would encourage a very small tolerance for errors. Any error that happened would be investigated and either fixed or logged differently. With the data that comes back, they should be able to visualize groups of errors by browser or by state information from the application. A threshold of errors would be allowed to occur, and when that is passed, engineers would be notified. Severities would be assigned, and people would be responsible for getting patches out or rolling back as necessary (with quick patches being heavily favored to roll backs).

Much like today’s operations people focus on the security of the systems they manage, a front-end operations engineer would have probes for XSS vulnerabilities and would constantly be looking for holes in the app (along with the quality assurance team).

A front-end operations engineer would have an up-to-date picture of the state of the application in production. This is challenging in the front-end world, because your application doesn’t run on your machines — but that makes it even more necessary.

Keeping Things Fresh and Stable

My favorite thing that good operations people who I’ve worked with in the past were really good at was keeping things up to date. For some applications, stability and security are so deeply necessary that caution is the larger priority; but in most cases, failure to keep dependencies and environments up to date is what causes applications to get stale over time. We’ve all worked on a project that’s four years old where all of the tools are very old versions of the ones we know, and getting good performance out of it is impossible.

A front-end operations engineer would be effective at keeping dependencies up to date and at removing cruft in systems. When the next version of jQuery is released, they’d use their skills to switch out the dependency in the application to work with the new version and then test it to validate the change. They’d keep Grunt up to date (and Node.js along with it). When WebP becomes viable, they’d automate moving the application’s images over to that format.

They’d work closely with the more architecture-oriented application engineers to make sure that the entire system still feels viable and is not lagging behind in any one area. They would keep on top of this stuff as often as possible. Updating a dependency here and there as you build is far easier than having a big “Update Everything” day. It encourages application developers to loosely couple dependencies and to build good, consistent interfaces for their own modules.

A front-end operations engineer makes it viable and fun to work on a project long after it’s new.

The Future

I’m sure plenty of commenters will tell me that these tasks have been going on for years, and plenty will tell me that they should be the concern of all developers on a team. I would agree with both statements. I am not introducing new concepts; I’m compiling tasks we’ve all been doing for years and giving them a name. I think this will help us build better tools and document better processes in the future.

The addition of this role to a team doesn’t absolve the other members of performance responsibilities. It’s just that right now, front-end operations are no one’s explicit priority on most of the teams that I’ve encountered, and because of that, they often get skipped in crunch time. I think there’s enough to be done, especially in the configuration and monitoring of these tools, outside of the normal job of a front-end engineer, to justify this role.

Most importantly, regardless of whether a new job comes from these tasks, or whether we solve the problem in a different way, we do all need to be conscious of the importance of solving these problems in some way. You simply can’t ignore them and still achieve reliable, robust, high-experience applications. Addressing these concerns is critical to the stability and longevity of our applications and to the happiness of programmers and users.

If we build with that in mind, it helps the Web win, and we all want the Web to win.

(al) (il) (ea)


© Alex Sexton for Smashing Magazine, 2013.

May 06 2013

13:53

Interview: How I Work: IDEO’s Duane Bray On Creating Great Digital Experiences


  

Welcome to another interview in the series called “How I Work.” These interviews revolve around how leading thinkers and creators in the Web world design, code and create. The goal is not to get into the specific nuances of their craft (as that information already exists online), but rather step back and learn a bit about their habits, philosophies and workflow for producing great work.

You might want to have a look at the first interview as well, which features Doug Crockford, Yahoo’s JavaScript evangelist.

Today we’ll talk to Duane Bray from IDEO, a firm that is consistently listed as one of the world’s most innovative companies due to its uncanny ability to constantly come up with great ideas for its clients. Duane Bray is a partner at IDEO and heads up the firm’s digital business from its New York City office.

Duane Bray at IDEO's New York City office
Duane Bray at IDEO’s New York City office.

Like all IDEOers you meet, Duane Bray is unfailingly nice, with a soft, well-spoken voice. He reminds you of the kid in the back of algebra class doodling away during lecture and still acing the tests.

We recently sat down with Duane over a couple sessions to get his thoughts on Agile development, how you too can gather great user insights, tips for prototyping digital projects with clients and why he still sketches interfaces out on paper.

Q: What has you excited about digital work these days?

Duane: I’m particularly excited about the movement away from standards-based specifications towards real stuff. For us, we’ve been doing a lot more experimentation around Agile development processes and pairing up designers and developers side by side throughout the process from day one. The last thing you want to do is hire a designer who is really talented at conceptual thinking and say, “Okay, now you’re going to spend six weeks documenting everything with InDesign for the thing you did.”

What’s funny though, is when you have a designer working with a developer on weekly builds, all that stuff still gets done. But from the designer’s perspective, they are constantly making. We’ve found our teams to be super excited to be working in this way.

Certainly we’re not the first to discover Agile, but it’s made a big difference in our culture because we want people to get their ideas as real and tangible as soon as possible.

Q: How does IDEO go about getting big, breakthrough insights?

Duane: Well, for a lot of our clients, they come to us with these sort of vague questions, and they want us to help them figure that out. So, we want to start off by making sure we’re a bit exploratory — and that involves going out and being inspired by behaviors.

For example, there might be a question around new forms of video consumption online. We want to go out and find people that are representative of some extreme form of behavior. This helps us get inspired and further shapes our strategy.

One woman we found has two computers at work. One is displaying her work and the other one is displaying reality television. She needs both streams to do her job. The interesting thing is you can almost hit pause and ask her what’s going with the show and with her work and she can answer both.

So it starts to suggest, what are some of the interesting forms of literacy that are coming through our digital tools? And how might we design for this? Are there new mental models we haven’t thought about before, rather than going with industry standards?

A brainstorming session at IDEO
A brainstorming session at IDEO.

Q: IDEO is famous for “thinking with your hands” via prototypes — how do you transfer this over to digital?

Duane: For me I don’t see any distinction in how IDEO designs digital products compared to our other products. We’re still going to get out there and be inspired by what’s going on in the world.

We always start our projects with some sort of investigation into what are people doing and how it impacts how they’re going to engage. And we get tangible quickly — and it’s not so very different from any other prototyping process. We do group sessions to generate ideas, we sketch together, we might have someone make a mock-up on a phone or tablet to test out a behavior. What’s most important for a prototype is to choose the right fidelity for the question you’re seeking to answer.

Q: What’s this discovery process look like?

Duane: Sometimes we’ll prototype something in the browser or on mobile to test some of these concepts out. We’ll also play around with paper prototypes because it’s an appropriate way to get client input.

But I like to find ways to disrupt the conversation when we’re talking with consumers.

For example, if something is very polished, consumers will feel they have to say they like it because it’s polished. So sometimes having hand-sketches, along with something on an iPad, we’re able to get very nice conversations going.

Prototyping is about blending that low-fidelity and high-fidelity process and blending our thinking as we go along.

Q: How would you make a case to a Smashing Magazine reader for adopting a prototyping process with their clients?

Duane: Well, the client is going to be in a better position to make more informed decisions because they are seeing things that are real. I would also argue that it isn’t a massive investment anyway and there is a better payoff down the road because you’re getting more real (tangible) early on — which means you’re going to get better input from users.

Imagine not going through that process: doing a bunch of sketches, building out a spec document, a developer builds it, you test it and people hate it.

At that point there has been such a huge investment in producing that thing. So there is actually a lot of emotional attachment now and it’s either going to be financially impossible to correct it or people will be too wedded to the idea and it’s going to be impossible to change.

Q: How do you show these prototypes?

Duane: We do a lot of live work. We’ll recruit a panel of end users. Particularly in the early stages when we’re looking for inspiration, we’ll want to be in their (the users’) context. So instead of bringing them into a focus group, we might go into their homes or offices and observe them. We’ll also put stuff up on the web and blast out an SMS message and ask people to interact so we can get a more broad approach as well.

Sometimes we’ll do a hybrid of both and have our developers do quick builds and mock-ups and then go back out into the field to get more insights with a select group.

We want to know less about what percentage of people clicked on this or dropped off and more about their process of going through and using that experience. What are the specific things that are barriers and why?

At some point, when we have a much more robust build, then we’ll push it out to more people. So there is definitely an interim phase. We tend to start high touch and stay that way for a while. We’re looking for finding the emotions around why people engage or why they don’t. If we understand those, it becomes a lot more powerful in how we tune the tools.

Q: What’s your experience been with Agile Development processes?

Duane: One of the things we’ve found when we’re working in an Agile process is that we can actually be incredibly fast.

An iPhone app that IDEO created for Lincoln Center.
An iPhone app that IDEO created for Lincoln Center.

To give you an example, we did a project here in New York for Lincoln Center, which was their first iPhone app, and we ran it as an Agile process. We went from kick-off to an app in the iTunes store in eight weeks. That’s concept, design and build (and I wouldn’t want to claim we can do every project on that timeline). But we had an amazing client that was able to make decisions very quickly, so we had a fast turnaround time there.

But again, it was because we were getting very real, very fast.

Q: Can you give us a step-by-step breakdown for creating this app in only eight weeks using Agile?

Duane: Sure. First, we spent half a day with our designers and developers at Lincoln Center’s campus, and in advance we created briefs about what an app could look like around different themes. We broke up into teams and every group had to go and interview people at Lincoln Center and talk to them about the theme and do a tour themselves.

We had clipboards of iPhone screen printouts, and they (the teams) had to sketch an experience and get feedback — all in four hours. It was a great way to get immersed: we talked to security guards, out-of-town tourists, locals who would hang out there, people at the information desk and we got a ton of insights.

So, we had all these amazing stories to go back and work with for honing our hypothesis on what this experience should be and we started building it. We did a detailed sketch session, prioritized the feature set, mapped out the flow, did some wireframes and then did a planning session with our development team (from Pivotal Labs). The project was so fast; there were literally just screenshots on the iPhone to simulate the flow. We were sharing it with people quickly and got to the stage where there was a build a week.

Screenshots of the iPhone app that IDEO created for Lincoln Center.
Screenshots of the iPhone app that IDEO created for Lincoln Center.

But the reality about that process is that you couldn’t do waterfall in eight weeks. I would say it’s more efficient than an old-fashioned step process.

Agile has been around for 20+ years, and we’re certainly not the first to discover it but now it’s finally getting traction. Designers and developers want to spend time making stuff and getting it out there and this process is all about that.

Q: What habits or hang-ups do you see in great web designers and developers?

Duane: Well, one of the things I think that is probably the most challenging for working in this more iterative, rapid-fire way is the ability to be more open and transparent with the work that you’re doing. Sometimes as designers we want to spend some time crafting, hiding in a corner and sketching and then do the “ta-da!” But some of this new way of working requires us to move beyond that.

One of the things I’ve been thinking about is how do you encourage greater transparency of work that’s in progress? We’ve been prototyping with tools like Flowdock that allows for conversation to sit around the workflow. That is particularly important, if we’re talking about getting stuff out there really early. These are the certain things that aren’t to the nature to how a designer is trained.

There is also this thing about great developers having curiosity. Being curious about the end user you’re designing for and involving the developers in that process for insights. Being able to imagine if they’ll use the thing you’re making.

Some folks are really natural at that, and in other cases it takes a lot of work. But I think that’s where we’re going — working off of blended teams with people of different skill sets.

Q: Any tips on how a small shop can get similar disruptive insights like IDEO does?

Duane: As designers it’s easy to get blinders on because we know what we know and it’s easy to get caught up in it. So, take some time to start over like you’ve never done this before. Sign up for some new tools and track your progress and behavior as an end user. There is something about just getting out to find inspiration. Look for stuff going on, whether it’s a related conference or just inviting in some experts to talk over wine and cheese at your office.

Even a small shop can reach out to friends of friends and watch them interact with some early prototypes or simply have a conversation. Say you’ll buy them drinks every other week and just show them stuff and see what you can learn from building that into your process.

One thing I do is have a screen on my phone that is just apps I would never normally download. So, we might be doing a project around, say, video, and I’ll go try every app out there and use this as a great way to learn. Projects are often an opportunity to dive deeper into a subject area you’re not necessarily interested in but you could be super-inspired by it.

Q: Now how do you capture those inspirations?

Duane: I usually have my notebook open as I’m using all these apps and I’m sketching out ideas and patterns. You start to get a feel for trends and think about different ways to accomplish the same task.

Sketchnotes in Duane Bray's notebook.
Sketchnotes in Duane Bray’s notebook.

Q: Where and how do you do your best work and not get burned out?

Duane: I usually get away from my desk. I’ll go sit up front on the couch with my laptop and my sketchbook. I force myself to move around. If you just sit at your desk you’re inclined to get into bad habits because everything is sitting around you. Some people have the zero inbox but I have 35,000 messages, so I just use the search box in email.

I’m someone who runs on intuition and not organizational processes. I have a thousand sticky notes on my desk.

But I’m pretty rigid about taking weekends off. I wasn’t always this way but I’ve learned that by being open to being inspired by stuff that has nothing to do with what I’m working on is really important.

Otherwise, you’re not grounded enough to bring something original to the table.

(cp) (ea)


© Jacob Cook for Smashing Magazine, 2013.

April 22 2013

14:02

Is Photoshop Really Dead?: Repurposing Photoshop For The Web


  

Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an “Electronic Design” class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.

No matter which version you had, undoubtedly you know someone who can “trump” you by having adopted an earlier version. We designers take much pride in this, in case you hadn’t noticed.

One of these is likely nostalgic to you.
One of these likely makes you nostalgic. (Image: Design You Trust)

It’s not a stretch to say that Photoshop was once regarded as the quintessential Web design tool, a sign that its fandom reached more than just photographers. Refrigerator magnets, pillows and even tattoos have shown homage to the unmistakable UI. Let’s face it: Photoshop is the software we’re identified with, and its place in Web design history is substantial.

I was careful to choose the word “history” there because that’s what it’s seemingly becoming.

Falling Out Of Love

Yes, unlike anything else in the realm of Web design, we collectively have a love-hate relationship with Adobe’s flagship software. While we love it for the common aptitude and experience we share, we hate it for its shortcomings. The pain points of using Photoshop to design for the Web are well documented and support the staunch anti-Photoshopian’s cause to remove it from their process. In fact, complaining about Photoshop has become so commonplace that it’s not just a rite of passage, but rather the signature of a true Web designer.

As our needs changed, Photoshop couldn't quite keep up.
As our needs changed, Photoshop couldn’t quite keep up. (Image: Derrick Diemont)

The Software’s Pain Points

  • Crashes
    True story: about 95% of instances of Mac OS X’s beach ball (or, as I affectionately refer to it, the pinwheel of doom) occur while using Photoshop. OK, so I can’t back that up with actual data, but I venture to say this is a common experience, especially for those of us attempting to “Save for Web.” Familiar with that nauseous feeling you get when the program hangs and you haven’t saved in a long time? Yeah, that alone makes you rethink using Photoshop.
  • Text rendering
    I’ve always found rendering the most basic of fonts as anything like the browser ends up doing to be incredibly difficult for Photoshop. Helvetica ends up looking like a mess, and coming close usually takes much tinkering with a few settings. This wouldn’t be problematic, except that the goal of comping is to show an accurate representation of what a website will look like.
  • Lack of interactivity
    At the end of the day, designing static comps doesn’t adequately translate how elements are intended to behave through interaction. When presenting comps to the client, discussing these points is possible, but that’s less than ideal for complex interaction. I’ve found myself using terms like “If you can imagine…” far too often in an attempt to show something as simple as a hover state.
  • Expense
    While we hem and haw over whether to buy an icon set for $5, realize that Photoshop is far and away the most expensive piece of software in the common Web design toolset. A new purchase of it will run you $700 USD. Upgrades help, and Creative Cloud has been nothing short of genius, but the investment in Photoshop is still monstrous compared to that of wireframing tools, code editors and FTP clients.

The Process’ Pain Points

  • Expectations
    The environment of Photoshop provides complete design control, because every pixel we manipulate can be exported to our expectations. When we actually develop for the Web, browsers aren’t as predicable (I can think of one in particular that’s none to kind, but I digress). No manner of fixes or hacks will produce an exact match of our Photoshop comp.
  • Presentation
    When attempting to convey responsive Web design, presenting static comps of full pages is less than ideal. The options are few and difficult: create numerous sizes of a single page, or try to explain verbally how a design will shift. I find neither to be practical or completely accurate, because innumerable device sizes are in the wild.
  • Double the effort
    A Photoshop comp is a visual representation of what a website or app could be, but not a functional one. This becomes problematic in the scope of effort required, with a comp being produced and then reproduced through Web technology (HTML, CSS and JavaScript). Additionally, the detail of the production is quite considerable — static comps are typically pixel-perfect and fully fleshed out, and front-end development carries the same goal.
  • The big reveal
    Ever worked hard on a design, spent hours polishing that last drop shadow on a button, exported a JPEG and then gotten nervous five minutes before a meeting because you have no assurances on whether the client will even understand the comp, much less like it? That’s true with many presentations, but the Big Reveal exacerbates this feeling. When your design process doesn’t include sharing any work in progress when comping, naturally it will lead up to a huge moment when you finally tell them to open a file or click a link. Wouldn’t it be nice if the client was involved in style-related decisions earlier than this?

Photoshop Misunderstood

Is it really a battle between tools?
Is it really a battle between tools?

OK, I think we’ve thoroughly bashed Photoshop enough at this point, although it’s important to realize where your tools fall short so that you can adapt (if you haven’t already). While there are plenty of jimmy-rigged workarounds to the aforementioned pains, and the right combination of settings will potentially ease those pains, there should be an easier way.

The most significant response has been to design directly in the browser. CSS3 provides many of the style elements that we had in Photoshop (such as rounded corners, drop shadows and gradients), and preprocessors such as LESS and Sass are great ways to speed up our workflow. These have become so popular, in fact, that there’s been much clamoring about trashing Photoshop altogether and using HTML and CSS exclusively, from start to finish.

Let’s not go overboard, right?

An important distinction is made by some designers that’s worth noting: the browser is the delivery vehicle of our designs, while image editors serve the purpose of creative exploration. Just because we have the ability in code to replicate what an image editor can output doesn’t mean it’s always the best environment for it. Those of us who learned Web design through Photoshop (or Fireworks) find value in being able to transform design elements without the abstraction of a text editor and, for the most part, have gotten quite good at it.

“As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation.”

Designing in the Browser Is Not the Answer written by Andy Budd.

The notion that image editors have no place in our workflows is also faulty in this regard: we’ve purposed them to have a particular and quite heavy focus in our workflow. We’ve used Photoshop as the canvas for our design, when it’s apparent that the browser is better suited because it’s ultimately where the design will live. However, Photoshop still has worth, and arguably much worth, in our processes, just not as the canvas. Confused? That’s OK. I’ll explain.

A workflow you may be familiar with is such: sketch, wireframe, produce the visual design in a graphics editor, develop said design in HTML and CSS. Skipping Photoshop assumes that we “design” in the HTML and CSS phase. The tricky part in doing that is determining what a suitable design deliverable is, which we’ll get to momentarily. Naturally, the question becomes, What do we do with Photoshop, now that we’re in the browser?

Photoshop as a High-Fidelity Sketch Pad

What if Photoshop were used as a hi-fidelity sketchpad?
What if Photoshop were used as a high-fidelity sketch pad? (Image: Kyrie Eleison)

I propose that an image editor is still handy when executing design via HTML and CSS, and it has everything to do with sketching. An essential part of the “old” way, where we produced the design comp in Photoshop, is that we were allowed to experiment in a “visual” environment. Photoshop allows you to directly manipulate the very foundations of design: line, shape, text and color.

While HTML and CSS are great for executing the design, experimentation is abstracted because code isn’t directly manipulating any design foundation. It’s a layer removed. This isn’t to say that good design can’t come from a code-only approach; rather that the experimentation of design finds a natural home in an image editor, which may be helpful to many of you who, like myself, prefer such an arena.

Consequently, I’m in favor of a yin and yang approach, leveraging Photoshop for what it’s good for (experimentation), and code for what it’s good for (implementation). For me, leaving one out of the party makes it difficult to be creative and practical when designing. Avoiding code and producing full-page comps in Photoshop, while great for some, gives me headaches when considering responsive Web design and having to reproduce entire pages again in HTML and CSS. However, skipping Photoshop altogether puts me face to face with the browser for design, which works for some elements (navigation bars, blocks of text), while other elements pose a creative stumbling block (“hero graphic” banners and their headlines, sidebar calls to action).

It’s a balancing act. I don’t think you can say, “Design everything in the browser,” just like you can’t say, “Never get into the code.”

– Jason VanLue

For today’s Web design process, I view Photoshop as a high-fidelity sketchpad: expensive, I realize, but it does everything we need it to and we’ve used it for ages. It’s a tool that we’re quite proficient and efficient at. Whereas it used to be our literal canvas, Photoshop can now become our “palette,” as the browser becomes the canvas. We prototype designs in the browser, but turn to Photoshop every so often to ideate, and eventually implement those quick creations in code, concurrently.

Are you still using Photoshop as the canvas? Try using it as the palette.
Are you still using Photoshop as a canvas? Try using it as a palette.

“I still use Photoshop, but I use it differently. It’s no longer for prescribing exactly what a site should look like. Instead, it’s used for quick layout exploration and asset creation.”

Where to Start written by Trent Walton.

Getting Responsively Unstuck With Page Layers

A far too familiar situation is designing in the browser and getting stuck figuring out what to do in those strange in-between widths. Confining the content to a single column works for the narrowest width, and your hypothetical wider four-column design gets really squished at 500 pixels or so. I continually find myself in this mode of coding a bunch of potential solutions, none of which looks intentional. Same for you?

Here’s an idea: use Photoshop. I know that everything probably exists in the browser, instead of the full-page comps that we said were so problematic. Who would ever want to build a website only to have to make a version of the semi-finished product in Photoshop? Well, what I’m about to suggest will sound completely backwards. Hang tight!

Page Layers is a unique app that might find its way in to your workflow.
Page Layers is a unique app that could find its way into your workflow.

I’ve gotten used to a tool named Page Layers to do the work for me. I’m sure you’ve heard of PSD-to-HTML tools, but this one is HTML-to-PSD! At first, I had no idea what I would ever use this for. Then it dawned on me that those moments when I’m stuck designing in the browser and would be better off using Photoshop to directly manipulate some things (i.e. without fiddling with CSS) is a perfect use of Page Layers.

Quite simply, you load the website that you’re working on in the app, at the width you’re having some difficulty with, drag the PSD icon to your desktop, and fire it up. The app gives you a PSD with all of the page elements on separate layers, making it easy to experiment with. I’m still getting my head around it, and it’s not without its flaws. Creator Ralf Ebert says that text and vector interpretation is tricky but hopefully on the way.

Deliverables

This might sound good in theory, but what do you show to a client for approval if you’re going to be using a combination of Photoshop “sketches” and the browser? Glad you asked.

Before we delve into methods of delivery, the important lesson in any of them is that the client should be involved in the design process much earlier than they would have been otherwise. To some extent, the Big Reveal can’t be avoided, because any time you present a visual design for the first time, a certain “unveiling” takes place. However, we can focus our clients on specific objectives if we involve them early enough, such as approving the layout in a wireframe or prototype, or approving styles in any of the formats discussed below.

Style Tiles

Style Tiles are based on a concept pioneered by Samantha Warren, who likens them to “the paint chips and fabric swatches an interior designer gets approval on before designing a room.” Designed in Photoshop, they are a variety of visual “tiles,” each containing styles for headings, subheadings, link text, buttons, colors, patterns and backgrounds. In delivering Style Tiles, the focus is on approving style, independent of layout and form (for example, responsive Web design). The emphasis is on iterating to find a suitable style to become the “system” of a website, and not on a pixel-perfect layout that will need to be redone in HTML and CSS. In doing so, a significant amount of time is saved from having to edit multiple full-page comps.

Samantha Warren's Style Tiles are a great approach, leveraging Photoshop for style discussions.
Samantha Warren’s Style Tiles are a great approach, leveraging Photoshop for discussions about style.

For many, this approach keeps the ideation squarely in Photoshop, which is familiar and comfortable. If there’s a knock on this approach, it’s that Style Tiles do require a bit of vision on the part of the client. Granted, setting proper expectations will help to bridge the gap, although for some chains of approval, communicating how the tiles “represent” the final product can be difficult.

Style Prototypes

I hinted at this approach earlier, so here’s an attempt to spell it out plainly. Referring to our wireframes, we begin by identifying which elements and content are crucial to the visual language of the website. For example, the logo, main navigation bar, hero graphic and location-finding widget may all be uniquely styled elements, whereas the main blocks of text and the sidebar links wouldn’t be as integral to the visual impact of the page, per se.

They might look like full page comps, but Style Prototypes just leverage important brand and modular elements.
They might look like full-page comps, but Style Prototypes just leverage important brand and modular elements. (Image: Dave Rupert)

I believe this deliverable should be in the browser and should be responsive. In my experience with using Style Prototypes, I’ve tried not to get hung up on fixing small inaccuracies that occur at certain breakpoints or on cross-browser bugs, because the objective is to gain approval on a design direction. The conversations, both internally and with the client, are steered to assess style only.

The main benefit of this approach is that it generally transitions into the final build of the website remarkably well, yet providing entire pages wasn’t necessary. Photoshop is truly a sketch pad here, because the deliverable is an HTML and CSS document. That said, one disadvantage of this method is that if you don’t define how much you’ll be mocking up, it’s easy to get carried away and include elements that contribute little to the look of the website, using more time and resources than necessary.

Element Collages

Arising from his recent redesign project for Reading Is Fundamental, Dan Mall has offered an interesting approach in Element Collages. Those who feel most comfortable using Photoshop to work out these ideas can simply export a JPEG, while those who feel the browser enables them to better express the ideas can make a prototype.

This format represents how I begin to think about designing a site. I often have ideas for pieces of a site in bursts. A full comp often requires ideas to be fully realized. An element collage allows me to document a thought at any state of realization and move on to the next.

– Dan Mall, “Element Collages

What’s great about this approach is that it brings a comfortable amount of context to Style Tiles by executing those styles on particular elements. If working through ideas in the browser proves to be problematic this early in the process, then Element Collages done entirely in Photoshop are a great alternative to Style Prototypes. Any way you look at it, it’s another approach that circumvents having to make static full-page comps early on for approval.

The folks at Clearleft have employed Element Collages as a RWD deliverable.
The folks at Clearleft have employed Element Collages as a deliverable of responsive Web design.

Whatever approach you use for design deliverables, the idea I’m proposing is to repurpose Photoshop’s role into something that helps you have a discussion of style far removed from specific discussions of page layout and content. Multi-device design dictates that we design systems, not specific page layouts. We can use Photoshop to create reusable assets and ideas simultaneously with browser deliverables such as prototypes. But remember, without setting proper expectations with the client, any new method will become confusing compared to any previous Web design experiences they’ve had.

Tools

If the idea is to move quickly between Photoshop and the browser, then Photoshop’s default settings and interface leave something to be desired. Thankfully, a wide range of tools, extensions, actions and apps exist that will help.

Slicy

Using “Save for Web” can be an arduous process, one that doesn’t always produce usable results. I recommend getting Slicy, which exports your layers to files independently. If you’re using Photoshop to create assets for the browser, this is your tool.

WebInk Web Font Plugin

If nothing else, WebInk's Webfont Plugin will save you a few bucks not having to buy desktop fonts for comps.
If nothing else, WebInk’s Webfont Plugin will save you the few bucks of buying desktop fonts for comps.

Remember when we were knocking Photoshop for its type rendering? What’s worse is that there’s no way to try out fonts from your Web font subscription in anything other than the browser. Thankfully, Extensis’ WebInk service has a plugin that gives you access to its library as you experiment in Photoshop.

Bjango iOS Actions

Unequivocally “the mother lode of time-saving actions,” this list from Marc Edwards will make your life much, much easier. If it’s useful, it’s included: a panel of the most-used Photoshop tools, scaling a document by 200% or 50%, testing for color-blindness and much more. It’s free, so there’s really no reason not to have it.

CSS Hat or CSS3Ps

Until recently, Photoshop didn’t have a way to export CSS attributes for the elements you create (admittedly, Fireworks has, but I digress). If you don’t have the latest version, then CSS Hat and CSS3Ps are solid alternatives. If you do have CS6, the differences between the built-in feature and these plugins isn’t much, although the plugins might take longer to display results and are also more accurate at times.

LayerVault

Famously flat designed, LayerVault boosts production through collaboration.
Famously flat designed, LayerVault boosts production through collaboration.

When Photoshop becomes your sketch pad rather than your canvas, like pages, you can bet more PSDs will be lying around. LayerVault is a great app for collaborating and sharing your ideas before they hit the browser.

WebZap

If you’re looking to experiment with layout in Photoshop, then the WebZap plugin makes comping incredibly speedy. You can choose from a number of predetermined layouts for elements such as headers, navigation and footers. If you work with Element Collages, WebZap is a great tool for getting down a quick baseline of each element so that you can get right into styling.

PixelDropr

It's like an ammo holder for Photoshop.
PixelDropr is like an ammo holder for Photoshop.

Part of being fleet of hand between Photoshop and the browser is creating reusable assets. PixelDropr is a fantastic plugin that enables you to drag and drop assets (icons, buttons, photos, etc.) from a panel onto your document.

InVision

For some, static comps are still a viable design deliverable, but they need some basic interactivity. InVision is an app that turns your static comps into “Protocomps.” Even when the comp is just a few elements, using InVision is a quick and efficient way to make it interactive.

Repurposing Fireworks, Sketch, Pixelmator, Etc.

The principle of “refining your tools” certainly isn’t isolated to Photoshop. Any image editor, when used to fit your workflow (instead of vice versa), can be a wonderfully liberating and powerful tool. All Web design apps have their shortcomings, and Photoshop perhaps most famously so.

Yet the fault lies not in our software, but rather in how we integrate it into our workflows. I suppose even when the Ultimate Web Design App comes along, most of us will find something wrong with it. Why? Because we’ve learned to be resourceful and make our tools work for us, whichever tools they are. The right tool, used for the right purpose, at the right time, is more valuable than one that tries to be too many things.

So, Is Photoshop Really Dead?

I could switch code editors, computers, wireframing tools, browser plugins, and more, but I’d be pretty sunk if I had to do a project without Photoshop.

– Dan Mall

I truly believe that, for some of us, Photoshop is an indispensable tool that still has a purpose in our Web design workflows. I tip my hat to those designers who can stay creative using only the browser, but I know I’m not one of them. Whatever tools you use, there are two takeaways I feel strongly about: don’t let anyone stop you from using them, and continue to refine them in ways that support how you work. It’s important that we share how we approach responsive design for those who, like myself, are still trying to figure it out.

Photoshop isn’t dead, but the way you used to use it might be.

More Photoshoppery

(al) (ea)


© Dan Rose for Smashing Magazine, 2013.

August 27 2012

15:29

Passive Income Strategies For Web Designers // Freelancing Experiments


  

Finding ways to earn passive income is a growing concern among many freelance designers. I’ve always loved client work, but I have to admit that the pressure of juggling multiple bosses and constant deadlines eventually started to wear me down.

As a result, in the past couple of years I’ve been focusing more and more on personal projects, and thinking about ways to make money from them. I’ve sold themes and templates and written an eBook, and I’m now focusing on launching my own job board for designers.

In a previous article for Smashing Magazine, I compared various ways to sell software products online. What I’ll do in this article is not just compare ways in which freelance designers can earn passive income, but speak about my own experience in exploring these avenues.

And, yes, that will include telling you how much money I’ve made!

Disclaimer: This post is about my own personal experience. Just because I have, for example, never made much money from ads does not mean you can’t. So, please take this as a “Here’s what I did,” not as a “Here’s what you should do.”

Themes

I was lucky enough to join ThemeForest (the biggest themes and template marketplace on the Web) in January 2009, shortly after it launched. ThemeForest seemed like the perfect way for an unknown, inexperienced designer to make money: no need for a fancy degree or years of experience — just design something cool and the market will reward you. In fact, that’s exactly what happened. Top designers now gross six-figure annual incomes solely from selling themes, and some do so despite being relative unknowns in the rest of the design world.

So, what was the result of my own venture into theme-making?

Overall, it was very positive. First, it helped me launch my design career, because my first couple of freelance clients were all people who contacted me after seeing my templates. It was also lucrative: in June 2010, my best month ever, I made $1,248. For a year after that, having not even launched new themes, my existing ones still made me around $200 a month, with minimal effort on my part.

The high point of my ThemeForest career.
The high point of my ThemeForest career.

Altogether, I’ve earned around $12,675 from ThemeForest in two and a half years; nothing to scoff at, especially because I completely stopped supporting my themes about a year ago. So, if selling themes is so great, why did I design the last one more than two years ago? There are a couple reasons for this, the main one being that the market drastically changed, and customer expectations changed with it.

Designing a good-looking theme isn’t enough anymore. If you want your theme to be competitive, you need to support shortcodes, build a custom back end and design multiple layouts, not to mention provide excellent support and build a documentation website.

In other words, in the span of a couple years, building themes went from something that you could do on the side to being a full-time job. Because I didn’t want to become a WordPress guru and spend all of my time creating themes, I decided to put theme design aside.

My most successful theme.
My most successful theme.

Theme design, then, is one of the best ways a designer can earn passive income, but it’s also one of the hardest. By the way, another important factor to consider is that theme design makes sense only if you’re in it for the long run and can reinvest the time you spend on a theme into subsequent ones (by reusing bits of code, streamlining the process, building a mailing list, etc.).

Pros:

  • Very lucrative if you’re successful.
  • No need for experience or education, as long as you have the right skills.
  • No need to be famous or have a big following.

Cons:

  • Requires a lot of HTML and CSS coding, and probably familiarity with WordPress or another CMS.
  • Providing good support is time-consuming.
  • You will probably need to launch more than one theme before the venture becomes more profitable than regular freelance work.

Icons And Vectors

Note: I have never released any icon packs, brushes or vector resources, so I asked Vincent Le Moign of Webalys for his thoughts on this market.

“I started to create passive income by accident. In 10 years of freelancing, I’ve created a small stock of vector graphic elements that I’ve been using repeatedly for interface design. At first, it was just a few Illustrator files, where I pasted GUI elements, such as buttons and icons, to reuse in future projects.

“In June 2010, I decided to make it comprehensive and consistent, and then release it for free. Inspired by Web application frameworks such as Ruby on Rails, the User Interface Design Framework was based on the concept of modularity, productivity and fast wireframing.”

Statistics from the launch of the User Interface Design Framework.
Statistics from the launch of the User Interface Design Framework. Large preview.

“It took me a few weeks to create it, without making any money on it, but the feedback was impressive: in two months, 52 000 unique visitors, more than 1000 tweets, dozen of blog posts. Even the godfather of Web design, Jeffrey Zeldman, reviewed it. I was high on a cloud!

“Looking at it now, I have no idea why I invested so much time doing it — probably because of passion, and I felt the urge to fill a gap: this kind of tool was missing. I didn’t make any conscious plan, but this is how my new career started. Seeing this steady traffic, I thought I could build a premium version on top of it. A few month later, I launched a commercial pack filled with 750 vector icons. Then the magic happened.”

The Minicons icon pack.
The Minicons icon pack.

“Money started to add up in my PayPal account. I remember checking my inbox compulsively to see if the latest emails announced sales. It wasn’t a lot of sales yet, just a few hundreds dollars, but it showed me the way: that making a living from passive income was possible. In the past two years, the sales gradually went up and reached the point where I could stop working for customers and spend 100% of my time on my own products. In 2011, I launched one more resource: a vintage vector ornaments pack, which was successful, too. Having two different products guaranteed a more regular income flow.

“I currently earn a few thousands dollars each month from sales. My income is the same as what it was when I was a freelancer, but I have the satisfaction of developing my own products. But designing quality content is not enough to make sales. I actually spend most of my time on other tasks:

  • Creating the sales pages, writing the text, polishing the product websites.
  • Setting up the e-commerce solution. In two years I’ve wasted a lot of time building the sales process. I switched e-commerce solutions four times until I found the perfect one (DPD — almost unknown but highly recommended).
  • Advertising and promoting. I spent a lot of time and money finding the best sources of traffic.
  • Improving marketing and SEO, and setting up and learning how to use products such as MailChimp, Google Analytics, GetClicky, SEOmoz, Curebit.
  • Optimizing the conversion rate by setting up A/B tests with Google Optimizer.
  • To be honest, I don’t provide a lot of support (a few minutes a day), but I commit to responding as soon as possible. And I spent a lot of time writing the documentation (with screenshots) to avoid answering the same questions over and over again.

“So if you’re considering creating premium resources, the answer is yes, you can live off of it. But your creativity and designs skills are not the keys elements of success. You’ll need to invest a lot of time in learning and practicing all areas of business: marketing, promotion, copywriting, SEO, analytics, etc.

“Actually, this is the beauty of launching your own products: you will become a better designer not by creating better graphics, but because you will have a full view of the business and will master a full range of skills. You will see your customer with new eyes and focus on the efficiency of your designs more than their outer beauty. And believe me, your customer will love that and will pay you more if you increase their sales.

“On the downside, the market is becoming highly competitive. The same shift that is taking place with templates is happening in my market. Competition is becoming fierce, and not a week goes by without a few more icon packs getting released. I mean, which designer hasn’t launched their own set by now?

“I’ve counted more than 50 competitors who sell icons, and the number and quality is improving constantly.”

A sample of the Vectorian vector pack.
A sample of the Vectorian vector pack.

“Also, the growing trend of discounted bundles (like on Dealotto and MightyDeals), where you get a ton of resources for a few bucks, risks drying up the market. I’m still not sure if this will convince more designers to add these resources in their workflow, thus expanding the market, or stop them from buying these packs at the current prices.

“This tougher competition has forced me to spend months this year doubling the number of my icons, from 750 to 1500, and adding variations for different software, such as PowerPoint and Keynote. Also, I’ve improved my other product, the vector ornaments, and paid another freelancer to fix a few problems. And I recently paid a great calligrapher to create a logo for Vectorian and improve the branding. Expenses and time investment are going up.

“Another problem: I don’t think my designs are as creative or as good as before. I’m so focused on creating the content, marketing it and thinking like a business owner that I sometimes have less passion for design and less creativity.”

Pros:

  • You already have the skills to create the content.
  • If you use marketplaces such as iStockphoto and GraphicRiver, you don’t need to build a website or promote your products.
  • Almost no support is required (if you write good documentation).
  • You will expand your skills and become more business-oriented.
  • You don’t need to write in English (this was a big advantage for me because I’m French and a poor English writer).

Cons:

  • It’s time-consuming.
  • The expectations of quality and quantity are rising. And more and more free content is becoming available.
  • The market is competitive; you need not only great content, but great marketing.

Advertising

I can still remember when Carbon first accepted one of my websites into its advertising network. I was overjoyed! At last, I would be able to dip into the river of money that flows into Internet advertising! Of course, I didn’t expect to earn a salary from ads alone, but I thought it might be a nice supplement — say, a couple of hundred dollars a month.

If you’ve ever run any kind of ads on a website, you know what’s coming: my first payment must’ve been for something like $5. So, yes, Internet ads are no fun — unless you bring in a massive amount of traffic (or if you plaster your website with a massive number of ads).

My first ever ad spot.
My first ever ad spot.

Since then, I’ve joined Fusion Ads for my blog and joined Yoggrt for The Toolbox (both ad networks belong to BuySellAds). To give you some numbers, The Toolbox gets about 20,000 uniques a month, which is not huge but still decent. This converts to $30 to 60 per month. My blog is a little more successful (probably due to the higher click-through rate), and I’ve succeeded in pulling in $100 or $200 in extremely good months when a couple of my posts went viral. But the average has been around $50 to $100.

Altogether, the total from advertising comes in at around $600 over six months. So, as far as I’m concerned, ads are a good way to pay for a meal to celebrate the weekend, but not much more unless you decide to become a full-time blogger.

Pros:

  • Does not require any work.
  • Joining a respected ad network will give your website cachet.

Cons:

  • Pays for a meal, if you’re lucky.
  • Did I mention that you probably won’t earn anything?

Books

Writing an eBook (or plain old book) might seem relatively easy. After all, we all know how to write, right? In fact, I’d say that actually writing the book is not the hardest part. Sure, developing a good writing style takes years of practice, but the truth is that people will forgive clumsy writing if you have something valuable to say. No, the real work in writing eBooks is in what comes before and after the writing.

Before writing the first word, you need to come up with a good topic and, more importantly, develop the skills necessary to make you an authority on the topic. Simply compiling existing knowledge might work for a blog post, but it won’t fly when you ask people to hand out their hard-earned cash.

Consider writing an eBook only if you have a couple of years of experience under your belt and feel ready to distill it into a book. And please don’t make the mistake of thinking it’s over once you’re done writing. That’s actually when the real battle begins: selling your book.

My eBook’s landing page.
My eBook’s landing page.

How will people find out about your book? What reason will they have to buy it? Why should they buy yours instead of competing books? These are the kinds of questions you’ll have to face.

If you want to rest your chances on a personal website, take a page from Jarrod Drysdale’s book (pun intended), Bootstrapping Design. Drysdale not only set up a website for his book, but also used a mailing list before and after the launch to promote it by sending out sample chapters and asking his audience various questions. I did my best to promote my eBook by setting up a landing page, writing guest posts about it and holding giveaways.

Another good strategy is to target a niche. This is what I did by focusing specifically on user interface design for startups, and Matthew Butterick also did it with his Typography for Lawyers book.

Last but not least, I strongly recommend partnering up with websites such as AppSumo and Hyperink to open up distributions channels for your book and to create new revenue streams.

Sales started strong but have slowed to a couple per week.
Sales started strong but have slowed to a couple per week.

Writing an eBook turned out to be great for me. I had a great launch, making about $8,000 in the first two weeks alone. Since then, sales have slowed considerably, but I did manage to make another $6,000 in the four months since the launch. In my case, the key to earning more was partnering up with AppSumo and Dealotto, which both brought in a couple of thousand dollars in extra revenue after the initial boost from the launch faded away.

Pros:

  • Almost no support needed.
  • No technical skills required.

Cons:

  • You need to have something to say.
  • A lot of promotion is required.
  • The market is competitive and crowded.
  • Sales will quickly dry out after launch.

Software As A Service

Building a business requires a ton of work and commitment, but unlike freelance design or, say, mowing lawns, building a software-based service of some kind takes away the 1:1 relationship between your efforts and your income. Some services charge only once, as is the case with job boards such as Authentic Jobs and my own Folyo. But, of course, the cash cow of passive income is subscription services because they enable you to anticipate your cash flow and build a steady income stream.

The obvious challenge in building a software service is that it requires technical skill, which you might not have if you’ve got a design background. It’s not the end of the world, though. You could find a cofounder, outsource the project or even learn the skills yourself. And you don’t need to go all out right away. When I speak with non-technical founders, I often notice that a preliminary version of their idea could very well have been achieved with a simple WordPress blog.

If you explore a little deeper, you’ll realize that opportunities for monetization are everywhere. For example, WordPress has numerous membership subscription plugins. Even MailChimp lets you charge for newsletter subscriptions. By thinking outside the box and combining existing services, even a moderately technical person can get a minimum viable product out the door.

I launched Folyo (a website that helps startups find great, vetted freelance designers) about a year ago:

Folyo, a private job board for freelance design projects.
Folyo, a private job board for freelance design projects.

For the first couple months, I ran it as a simple newsletter of job offers, with a Wufoo form for submitting projects. There was no back end, no database and no user accounts! This was enough to validate the concept and to motivate me to build a real app. So, I found a Ruby on Rails developer through a Hacker News jobs thread and paid him about $3,000 to create a working app (a process I cover in more detail on my blog).

Meanwhile, I had been learning Ruby on Rails myself, so I’ve since taken on part of the development myself, outsourcing the remainder to a friend in exchange for some design work. Was it worth it? While I have no doubt I would be earning more if I was focusing on freelance work rather than Folyo, I’m still very happy that I decided to launch my own project.

I currently make about $1,000 a month from Folyo, which is good enough for one person with minimal costs after one year. More importantly, each day spent working on Folyo makes it a little better and increases the website’s value (unlike with client work, where working on one project doesn’t help you with the next).

Of course, when I’m working on Folyo, I do very little actual designing. In fact, my time breaks down something like this:

  • Email and support: 20%
  • Blogging: 20%
  • Coding: 40%
  • Miscellaneous tasks: 10%
  • Design: 10%

So, if you’re thinking of launching your own service, consider that it probably means spending much less time designing.

Pros:

  • Theoretically, it can be lucrative and even get you bought out by Google or Facebook.
  • The work is very motivating.
  • You have the freedom to build anything you want.

Cons:

  • You will need to step way outside of your comfort zone.
  • The chance of failure is high.
  • At the end of the day, relatively little designing is involved.

Lessons Learned

What did I learn from all this? And what would I do differently if I could start over? Well, one thing I realized is the importance of building a network. You need to find a way to get connected, whether it’s by becoming a famous designer, writing a blog, building a Twitter following or, ideally, doing all that and more.

Of course, a lot of great designers focus simply on doing a great job and don’t concern themselves too much with the rest. But maybe these designers went to a great art school and kept in touch with their classmates. Or maybe they attend design meetups regularly. One way or another, you can bet that most successful designers maintain a network, even if they don’t realize it.

Blogs and Twitter are simply the digital equivalent of this. Making it entirely on your own is very hard, so the earlier you start cultivating these relationships, the better.

Related to this, have a strong identity. Try to stand out from the crowd, and make sure people know who you are. You can achieve this by cultivating your own style, being involved in high-profile or viral projects or, what I think is the best way, launching your own projects.

Visual Idiot’s humor at work.
Visual Idiot’s humor at work.

If you want to see how it’s done, look no further than Visual Idiot, who converted his great design skills and weird sense of humor into a job at GoSquared, despite no one on the Internet even knowing his real name.

This may sound obvious, but the reality is that projects that help build your network or identity are not often the most lucrative ones (actually, they usually don’t make you any money). So, it’s tempting to take that high-paying contract to design a pharmaceutical company’s intranet, rather than spend a couple days building a silly JavaScript that replaces stuff with pictures of cats.

But guess what? Nobody outside of Big Pharma will ever see that intranet’s beautifully crafted pixels, but that cat website might go viral and lead to thousands of people suddenly becoming aware of your existence.

To summarize, the main lesson I’ve learned over the last couple of years is to have a long-term view and invest in yourself, not chase a quick buck.

The plan is rather simple, then: build a network, cultivate a strong identity to ensure the network knows who you are, and then come up with a product you can market to it.

Of course, each step usually takes a couple years. I said it was simple; I didn’t say it was easy!

(al) (il)


© Sacha G for Smashing Magazine, 2012.

August 09 2012

13:01

The Art Of Staying Up To Date


  

An important part of our job is staying up to date. Technologies don’t really change that fast — HTML5 and CSS3 take a long time to be specified and implemented. But the ideas surrounding these technologies and the things we can do with them are constantly evolving, and hundreds of blog posts and articles are published every day. There’s no way you can read all of those but you’ll still have to keep up to date. Here are some tips on doing that while still having some time left to work.

Ideas Surrounding These Technologies and the Things we can do With Them are Constantly Evolving

Filtering

The hardest part of staying up to date is not reading too much. So many articles are published on a daily basis, so you’ll need filters. It’s unfortunately hard to make a living by reading articles all day, so you don’t want to read marginally interesting stuff, and you don’t want to read too much. You only want to read relevant stuff. You could try to automate this filtering, but I found that the best filters are actually people and time.

People

Some people produce lots and lots of ideas. Not all of these ideas are worth your time, but some of them are excellent. If you follow these people directly there’s a lot of noise you have to filter and you need a good sensor to recognize the good stuff. A very easy way to solve this is to not follow them directly but only follow the people surrounding them — they will do the filtering for you. If there’s an excellent idea, they will link to it. So in order to keep your sanity, don’t follow loudmouths (follow their more silent friends).

Don't Follow Loudmouths Directly

This tip works very well for Twitter, but it works for blogs as well. Don’t follow overactive sources, follow the people who follow these sources.

Soulmates

A few years ago I noticed that my RSS feeds started to dry up — especially blogs with opinionated articles. Articles where many people would leave their comments were all of a sudden gone. These discussions had moved to Twitter overnight. That’s the reason why I started tweeting (although I have to admit that I was addicted to it within a week). If you tend to your Twitter stream with care, it can become a very valuable source of good and relevant information. But if you follow the wrong people, or too many people, it will be exactly the opposite. My stream consists of mostly people who generally agree with each other. This means that it usually isn’t filled with tedious discussions about irrelevant details that can easily grow to gargantuan proportions. Now, I don’t say you shouldn’t listen to people you don’t agree with, I just think that Twitter is not the right place to follow these people.

Emotion

Related to this Twitter-management (where I try to avoid heated discussions) is this other excellent filter I use: time. I almost never read articles the moment they are published, I wait a few days, or weeks or even months. If they are still interesting after a period of time, they are worth reading. You’ll see that lots of stuff is outdated even after a few days. Many articles are written in an emotional state, and many responses to these articles are written with even more emotion. These rows can certainly be entertaining, but they are rarely interesting after a week. I use Pinboard to create this buffer of unread articles, but there are many other handy tools available like Instapaper or Pocket (or you could just use your browser’s bookmark functionality).

Being up to date isn’t about knowing the latest trends and keeping track of all the gossip, it’s about knowing the right stuff by reading only the right stuff. But it isn’t just about reading the right stuff, it’s also about remembering it.

Backup Your Knowledge

The good thing about our current era is that we don’t have to learn everything we read by heart: we have computers these days to do the remembering for us. We just have to make sure that our computer can find the stuff we want it to remember. So create a database of the links to interesting articles that you read. I always write a small comment with these links when I save them to Pinboard, this way I can easily find them when I need them. You could buy the archival option from Pinboard, this makes it even easier to find older articles. I also created some IFTTT rules to backup these links to Evernote and Dropbox. I don’t want to depend on one tool, so I spread my knowledge around.

Use Your Knowledge

A very important part of understanding a new technique or design trick is by playing with it. You could of course immediately start using it in a big-production website (or you could also just first try it out). There are many tools out there that make it easy to test some snippets of code, like the amazing Dabblet and the incredible JS Bin. Playing around with code snippets that you find in articles will greatly improve your understanding of how things work.

Tools

There are many tools you can use for gathering and keeping your knowledge (and I already named quite a few). Here are a few more:

Twitter

I use YoruFukurou as my Twitter client. It’s an unobtrusive client with some very handy tools for power-users, like muting certain words. It has some very handy advanced custom filter options as well. Tweetbot is a similar tool which works especially well on iOs devices. I fave every tweet that might have an interesting link (yes, that’s why I fave all of your tweets, but I’m not stalking you). All of these faves are automatically stored as unread items in a Pinboard account.

RSS

I read my feeds using the excellent self-hosted feed reader Fever. It has a feature that detects what articles are hot by checking how many people link to it. It uses the clever principle of Sparks — feeds that link to interesting things, but are not worth following to determine what’s hot. You can save articles for later (and yes, these articles are also saved as unread items in my Pinboard account, as well).

I Use Fever to Read My Feeds

Pinboard

As I mentioned before, by creating some clever filters you can make sure that your list of unread articles is manageable. But reading the articles and actually doing something with that knowledge can be pretty time-consuming. Every now and then I hit one of my two Pinboard bookmarklets that either show me the oldest unread item or a random one. As I said, many articles are outdated after a few days (but still many remain to be read). If an article is small, I read it right away. If it’s very long and very interesting, I either e-mail it to myself or I save it to Instapaper.

I save every article that is worth remembering to a second Pinboard account using Delibar, with a small comment and a few tags attached to it. There are many more ways to better organize these links, but this system works for me (I usually find a link I need within a few seconds).

IFTTT

IFTTT is a very handy tool that connects Web services. I use it to store my bookmarks on as many locations as possible. For instance, every article I save to my second Pinboard account is saved to Evernote and Dropbox. This makes it easy to access all these bookmarks from every device I use with specialized tools like nvAlt.

Talking

This whole article is just about staying up to date by reading articles, but one of the best ways to stay up to date is by talking to people. In real life you can talk to colleagues or attend conferences and workshops, as there are many regular meet-ups of like-minded people all around the world. You can use things like Twitter or IRC to start discussions or ask questions, or post your question on one of the many online fora out there.

Talking About Your Work is a Great Way to Form an Opinion

Other tools

There are many other tools out there that can help you with staying up to date. Many people use Instapaper, Delicious or Pocket to collect links. Others use email to send these links to themselves. Some people use the native bookmarks of their browser and others write their own bookmarking service.

Sources

Professionally I am specialized in HTML and CSS, and I have an interest in Web Design and some other areas. Since I have expert knowledge of CSS, it doesn’t make much sense for me to follow websites that offer CSS tutorials for beginners. So on this particular subject I follow the real experts and even the people who write the specs: my knowledge about CSS has to be more than up to date. Bas Poppink, a colleague of mine, calls this principle following the sources of your sources until you found the headspring. I call it the Poppink-principle. So if you’ve outgrown tutorials, ask the authors of these tutorials what websites and which people they follow.

What sources are right for you depends on a lot of things, like your experience and your fields of interests. Below you’ll find some of my sources. You might find some interesting stuff in there…

My Sources

My main source of information comes from people who tweet something that might interest me. Twitter is also great for discussing articles and opinions, or asking for advice. But there is more…

Feeds

There are some feeds I rely on: the bookmarks saved by Jeremy Keith, Kazuhito Kidachi, Peter van der Zee, and Paul Irish. They usually add a helpful description to their bookmarks. There are a few people who regularly post high quality reading lists: you should definitely follow a few of those too, if not all. The rest of the links are distilled from a somewhat random collection of ancient and newer RSS feeds that definitely need some weeding. Do you really want to know what they are? Here is the OPML file.

But you’ll probably be better served by the excellent collection of Front-End and Web Standards feeds that Paul Irish curates. He also points at these great weekly email newsletters about JavaScript, Web design, CSS and HTML5. Definitely worth a follow if email is more your thing.

Your Own Sources

Whether you want to be the very best in your profession or someone who is good enough, staying up to date is essential for every professional. The exact people and feeds to follow depends on your own interests. Just take your time to find and collect them and be sure to critically look at them every now and then. Also, what tools you choose to use in order to stay up to date is totally up to you, as there are many more ways to stay up to date than I described here. I hope that this article somehow helps you in finding the right sources and in creating your own, better, flow of information.

Image source of picture used on front page.

(jvb)


© Vasilis van Gemert for Smashing Magazine, 2012.

August 03 2012

17:35

“I Draw Pictures All Day”


  

“So, you do nothing all day.”

That’s how many people would respond to someone who says they spend the day with a pen or pencil in their hand. It’s often considered an empty practice, a waste of time. They’re seen as an empty mind puttering along with the busy work of scribbling.

But for us designers and artists, drawing pictures all day is integral to our process and to who we are as creative people, and despite the idea that those who doodle waste time, we still get our work done. So, then, why are those of us who draw pictures all day even tempted to think that someone who is doodling or drawing pictures in a meeting or lecture is not paying attention?

What does it mean to be a doodler, to draw pictures all day? Why do we doodle? Most of all, what does it mean to our work? It turns out that the simple act of scribbling on a page helps us think, remember and learn.

What Does It Mean To Doodle?

The dictionary defines “doodle” as a verb (“scribble absentmindedly”) and as a noun (“a rough drawing made absentmindedly”). It also offers the origins of the word “doodler” as “a noun denoting a fool, later as a verb in the sense ‘make a fool of, cheat.’”

But the author Sunni Brown offers my favorite definition of “doodle” in her TED talk, “Doodlers, unite!”:

“In the 17th century, a doodle was a simpleton or a fool, as in “Yankee Doodle.” In the 18th century, it became a verb, and it meant to swindle or ridicule or to make fun of someone. In the 19th century, it was a corrupt politician. And today, we have what is perhaps our most offensive definition, at least to me, which is the following: “To doodle officially means to dawdle, to dilly dally, to monkey around, to make meaningless marks, to do something of little value, substance or import and,” my personal favorite, “to do nothing.” No wonder people are averse to doodling at work. Doing nothing at work is akin to masturbating at work. It’s totally inappropriate.”

It is no wonder, then, why most people do not have great expectations of those who “draw pictures all day.” Or perhaps they are inclined to think that those who draw pictures all day are not highly intellectual and are tempted to say to them condescendingly, “Go and draw some of your pictures.” As designers, many of us have heard such comments, or at least felt them implied, simply because we think, express or do things differently.

Why Do We Doodle?

Consider that even before a child can speak, they can draw pictures. It is part of their process of understanding what’s around them. They draw not just what they see, but how they view the world. The drawing or doodle of a child is not necessarily an attempt to reflect reality, but rather an attempt to communicate their understanding of it. This is no surprise because playing, trial and error, is a child’s primary method of learning. A child is not concerned with the impressions that others get based on their drawings or mistakes.

An Example of a doodle
An example of a doodle.

Their constant drawing, picture-making and doodling is a child’s way of expressing their ideas and showing their perceptions in visual form. It comes from a need to give physical form to one’s thoughts. Similarly, an adult doodles in order to visualize the ideas in their head so that they can interact with those ideas.

Visual Learners

According to Linda Silverman, director of both the Institute for the Study of Advanced Development and the Gifted Development Center and author of Upside-Down Brilliance: The Visual-Spatial Learner, 37% of the population are visual learners. If so many people learn better visually, we can expect, then, that some of them learn better by putting a speech, lecture or meeting into visual and tangible form through pictures or doodles, rather than by being provided with pictures or doodles (which would be the product of another person’s mind).

37% of the population are visual learners

Humans have always had a desire to visually represent what’s in their minds and memory and to communicate those ideas with others. Early cave paintings were a means of interacting with others, allowing an idea or mental image to move from one person’s mind to another’s. The purpose of visual language has always been to communicate ideas to others.

Secondly, we doodle because our brain is designed to empathize with the world around us. According to Carol Jeffers, professor at California State University, our brains are wired to respond to, interact with, imitate and mirror behavior. In an article she wrote, she explains the recent research into “mirror neurons” which help us understand and empathize with the world around us.

A cave painting
Cave paintings were our first means of communicating ideas to others.

Think of it this way. When you’re at an art gallery and find a painting that intrigues you, what is your first reaction? You want to touch it, don’t you? I thought so.

When I was a ballroom dancer, I used to sit and watch those who I considered to be great dancers, tracing their forms in space with my index finger as a way to commit them to memory. I used to go to galleries and museums and, at a distance, trace the lines and forms that I saw in the paintings and designs. I did this out of curiosity and a desire to physically record what I saw to memory.

Nearly 100 years ago, Maria Montessori discovered the link between physical touch and movement and learning in children. Montessori education teaches children to trace the letters of the alphabet with their index finger as a way to commit their shapes to memory. My son used to trace forms that he found interesting in space. It’s safe to say, then, that we doodle to visually commit to memory a concept that we want to both empathize and interact with.

An experiment conducted by Jackie Andrade, professor of psychology at the University of Plymouth in England, demonstrated the positive effect that doodling has on memory retention. In the experiment, 40 people were given a simple set of instructions to take RSVP information over the phone from people going to a party. The group of 40 was divided in two. One group of 20 was told to doodle (limited to shading in order not to emphasize the quality of the doodles), and the other 20 would not doodle.

The doodlers recalled 29% more information.

Doodling a lightbulb
Doodling helps us retain information.

The study showed that doodling helps the brain to focus. It keeps the mind from wandering away from whatever is happening, whether it’s a lecture, reading or conference talk.

Still, we have become bored with learning.

Professor Emeritus at Cornell University, Joseph D. Novak argues that this is because we have been taught to memorize but not to evaluate the information being given to us. In many traditional settings, the pattern is simple and dull: sit, receive and memorize. Many traditional educational systems do not encourage active engagement with the material. Doodling, drawing and even making diagrams helps us not only engage with the material, but also identify the underlying structure of the argument, while also connecting concepts in a tactile and visual way. Jesse Berg, president of The Visual Leap, pointed out to me in a conversation that doodling is a multisensory activity. While our hand is creating what might seem to be random pictures, our brain is processing the stimuli that’s running through it.

Many of us are the product of traditional schooling, in which we were made to numbingly memorize dates and facts, and many of us continue this pattern later in life. While some of us were avid doodlers (I used to fill the backs of my notebooks with pictures and draw on desks with a pencil during class), some of us stopped at high school, others in college and others once we settled into a job. At some point during the education process, doodling was discouraged. Teachers most likely viewed it as a sign of inattentiveness and disrespect. After hard preparation, educators want nothing more than unwavering attention to their lectures. The irony is that, according to Andrade’s study, doodlers pay more attention to the words of educators than we think.

In her TED talk, Sunny Brown goes on to explain the benefits of doodling and even offers an alternative to the definition found in the Oxford Dictionary:

“Doodling is really to make spontaneous marks to help yourself think. That is why millions of people doodle. Here’s another interesting truth about the doodle: People who doodle when they’re exposed to verbal information retain more of that information than their non-doodling counterparts. We think doodling is something you do when you lose focus, but in reality, it is a preemptive measure to stop you from losing focus. Additionally, it has a profound effect on creative problem-solving and deep information processing.”

How Can Designers Use This To Their Benefit?

As designers, we have a unique advantage when it comes to doodling. We don’t just doodle to keep our minds focused — we also deliberately sketch ideas in order to problem solve and to get immediate feedback from clients and peers. Designers such as Craighton Berman and Eva-Lotta Lamm are two of the biggest proponents of the “sketchnotating” movement. Berman states that sketchnotating “forces you to listen to the lecture, synthesize what’s being expressed, and visualize a composition that captures the idea — all in real time.”

In 2009, I came across a book titled The Back of the Napkin by Dan Roam. Roam is a business strategist and founder of Digital Roam, a management-consulting firm that uses visual thinking to solve complex problems. He uses a simple approach to solving problems visually. Every idea is run through five basic questions to encourage engaged thinking and to ensure a meaningful meeting. The process takes the acronym SQVI^. S is for simple or elaborate, Q is for qualitative or quantitative, V is for vision or execution, I is for individual or comparison, and ^ is for change or status quo. These simple choices are worked through with simple doodles in order to better understand the problem and find a solution. In his book, Roam says:

“What if there was a way to more quickly look at problems, more intuitively understand them, more confidently address them, and more rapidly convey to others what we’ve discovered? What if there was a way to make business problem solving more efficient, more effective, and — as much as I hate to say it — perhaps even more fun? There is. It’s called visual thinking, and it’s what this book is all about: solving problems with pictures.”

After discovering Roam’s book, I decided to doodle again. Once a prolific doodler and drawer, I had become inactive in lectures and similar settings, often forgetting what was said. Taking notes felt too cumbersome, and I often missed words and ideas. I decided to give doodling another shot. Instead of focusing on specifics, I would focus on concepts, key words and ideas.

Since 2011, I have been actively promoting doodling in my design classes, making a deal with my students, saying to them, “Doodle to your heart’s content, but in return I want you to doodle the content of my lectures.” They are skeptical at first, but they soon realize that doodling is better than having a quiz. I reap the benefits of doodling, and by allowing them to doodle — with the requirement that it be based on the class’ content — they become more informed of the topic and they engage in more meaningful conversations about design.

A sketchbook
A designer’s best friend: a sketchpad.

The typographic novices in my classes naturally start to apply the principles of visual hierarchy and organization, grouping ideas either by importance or by category. They will group ideas with lines, boxes, marks and more. Headings and lecture titles might be made larger, more ornate or bolder, and key concepts might be visually punctuated. It is fascinating how natural and almost second-nature the idea of visual hierarchy is to all of us. The learning curve of typography is steep for some of us, but doodling and sketchnotating really makes it easier to grasp. Below are some doodles by students in my classes.

Introduction to Typography lecture doodle by Alisa Roberts
Doodle by Alisa Roberts from my “Introduction to Typography” course.

By picking out concepts, ideas and topics, the students start to establish a hierarchy by making visual groupings and start to use visual punctuation. By the time I assign work on typographic hierarchy, the sketches tend to show more astuteness. Transferring these sketches to the computer is a challenge for those new to typography, but once they naturally understand the relationships in what they are doing, they start to make smarter design decisions.

Identity and Branding class lecture doodle by Aubrie Lamb
Doodle by Aubrie Lamb from my “Identity and Branding” course.

Identity and Branding class lecture doodle by Aubrie Lamb
Another by Aubrie Lamb from the same course.

As we have seen, doodling has many benefits, beyond what designers as visual communicators and problem solvers use it for. Doodling also helps our brain function and process data. Those of us who doodle should do so without feeling guilty or ashamed. We are in good company. Historically, doodlers have included presidents, business moguls and accomplished writers. Designer, educator and speaker Jason Santa Maria says this:

“Sketchbooks are not about being a good artist. They’re about being a good thinker.”

Doodling, drawing pictures and sketchnotating are about using visual skills to solve problems, to understand our world and to respond effectively. So, what are you waiting for? Doodle!

Further Reading

Unless otherwise stated, images are from Stock.XCHNG.

(al) (il)


© Alma Hoffmann for Smashing Magazine, 2012.

March 09 2012

11:09

Top Non-Destructive Photoshop Techniques


  

The creative process is not a linear one. As artists and designers, we often set off in one direction only to decide that the proper solution lies somewhere else completely. Unfortunately, many of the creative software packages we use (Photoshop in particular) can be pretty unforgiving when in comes to making changes late in the game.

Sure, we’ve got “Undo” for a quick change of heart, but often we don’t realize we need to make an adjustment until several steps (or days) later. Luckily, Photoshop has some great features built in that allow us to work in ways that protect our precious pixels—truly freeing us to do our best work.

In this video post, I’ll show you some of my favorite techniques and tools for keeping your files flexible, including Smart Objects, Smart Filters, Layer Styles, Adjustment Layers, Masks and more. The approaches shown in this video should provide a solid starting point. But like anything in Photoshop, there is no “one right way” to approach it. The key is to find the method that best supports your workflow so please feel free to add your favorite non-destructive tricks in the comments section below!


Designing or editing photos is a pretty organic process. Allowing yourself to make edits to your document that don’t affect the original pixels provide you with a lot of flexibility when making decisions throughout your design process.

Chime In With Additional Tools And Techniques!


© Adrian Taylor for Smashing Magazine, 2012.

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.

Don't be the product, buy the product!

Schweinderl