To celebrate the tool that has helped shape creativity, artists from all over the world contributed their most amazing dreams-and their working files with layers. These PSDs were then animated layer by layer to create a film made in Photoshop. #Photoshop25
For the 2014 Adobe Max Creativity Conference, the design and execution team, led by Jeremy Nichols of Pix Productions, with projection mapping provided by WorldStage. The scenic plays on two periaktoi, one of the oldest known staging techniques to change a scene and utilizing motion projection mapping to display video. This was intended to bring together the oldest scenic technology with the newest projection technology to create something altogether new.
I guess a more appropriate title would be “Should Photoshop Still Be Industry Standard?“. Like a lot of people, I’ve been an avid fan of Photoshop for quite some time now. It’s been my go-to tool for the best part of 10 years for a range of purposes, from photography to web design.
When I was in high-school, I can still remember my first introduction to Photoshop. As with most high-schools, nicknames were thrown around a lot at my school. Creatively, most of the connotations related to an animal that we best represented, either visually, characteristically, or in some cases derivative of perceived-natural body odours.
One day, I started using Photoshop to visualize these characters. I started gathering photos of my class-mates, crudely attaching their faces to the various animals they ‘represented’. They were an instant hit, met with verbal accolades of the highest order. I would print them on paper at home and bring a new one to school every week, or send them around via MSN Messenger. My classmates couldn’t wait for the next iteration.
While your introduction to Photoshop may not have been met with the same social-gratification, most designers use Photoshop for a similar reason, It’s what we’re used to and what we feel most comfortable using.
So why the long story you ask? What’s it got to do with this article? The reminiscence helps emphasise something. Photoshop, in all its glory, is still predominately a photo editing application.
Workflows are a subjective topic, and often a highly personalized process depending on your circumstances. So there’s never a ‘one size fits all’ solution. However this doesn’t mean we can’t think critically about it.
Don’t get me wrong here, I love using Photoshop. It’s a great tool and for me, it’s been my go-to design application for quite some time. It gives me the creative freedom and tools I need to feel I have control over my designs. However, for the purposes of web design, it’s becoming more of liability and less of an asset. Here’s why.
Photoshop Is Raster Based
Although not the most important, it’s one the reasons. Why use a raster based application (which is resolution dependant) to design something that eventually won’t be. A large part of the web renders through browser-engine algorithm resulting in a fluid vector-like visualization, not bitmap or raster based where pixels are fixed.
“But Photoshop has vector tools!”. Sure it does, but they are still based on the Photoshop engine, which is pixel-based, not vector based. Not only does Photoshop have little vector-output support, but the UI (canvas) is raster based.
The web is increasingly moving away from low-resolution raster based output, with flat design being one of the biggest influences. It can be quite common these days to visit or design a website a website that (besides images) has absolutely no raster-based output at all, including icons.
Photoshop Isn’t All That “Pixels-Perfect”
The phrase “pixel perfect” gets thrown around the design community a lot. It’s a kind of “I’m a cool designer that knows what I’m talking about” buzzword. You throw it into a sentence and it looks like you know what you’re talking about. Unfortunately, it’s an often misinterpreted concept.
Traditionally, design has dictated development. The capabilities and creativity of design software have predominately eclipsed those of web language. So the attitude has always been, “The design looks like this on Photoshop, make sure it looks EXACTLY the same on the web” – Pixel Perfect.
If you’re a web developer or a ‘hybrid designer’ like me, you’ll know exactly what I mean. I can tell you Photoshop is a real pain for development. Web development is based on code that has very little room for inaccuracy. So why design on an application that not only produces visually inaccurate representations for the web, but is based on an engine that’s resolution dependant, with resolution dependant output. If you want ‘pixel perfect’, design in Illustrator.
Designing From A Different Perspective
I’ve always designed from the WYSIWYG perspective. As in design to your wildest dreams in Photoshop, and make it look the same in development. However this methodology is becoming increasingly archaic. The web has certain constraints, however like the saying goes, “Where some see adversity, others see opportunity”. Working with-the-web is a whole lot more productive than working against it. For me Photoshop is a far-cry from doing this.
Ultimately, the design will be rendered in a browser, through mostly CSS styling, which is bound by a completely different environment than that of Photoshop. The web is rendered via a device-resolution that’s dictated by the viewing device. This is most evident in flat design, in which the majority of rendering is handled server side in the browser. As the web moves towards an ever increasing browser-rendered state, raster based-design seems progressively inappropriate.
The Web is Fluid. Photoshop Is Static
This is currently a major issue for designers and one I find really important. A big part of the issue lies in the massive and rapid technological advancements that have driven major changes in both web design and development over recent years. The internet has grown from a static layout, to a highly interactive and user-experience driven collection of pages and applications.
So many designers still design from a purely visual perspective; however we need to consider a lot more than just static elements nowadays. Pages are fluid, designs are adaptive and interactivity is now a major design concern. Ultimately, we no longer use the web the way we used to, so why design it the same way?
Assets Are No Longer Assets
Traditionally, web development was design-dependant, with assets from Photoshop being an integral part of the process – images, icons, measurements and comps – all based on pixels. However this design-development relationship isn’t as reliant on design assets anymore. These days, a final product relies much less on assets from the graphics application, with most of the work being rendered through mark-up styling via CSS.
For example, let’s say I design a website in Photoshop. Very little, if any of the data is actually transferable to the web. Unless your developer slices the PSD elements, in which case I’d advise you to get a new developer.
Having considered all this, unfortunately, it’s difficult to find a better solution, other than Adobe Illustrator. Adobe has released it’s Edge Tools, which are aimed at rapid prototype development, however they still rely on the traditional design workflow of starting off in Photoshop. Fireworks was a short-lived solution, but Adobe has discontinued any further development since CS6. There’s been a number of “rapid prototyping” applications released lately, however most of them focus on a PSD->Browser workflow. It would be nice to have an application that combines both, a browser render-engine based design in conjunction with the prototype.
Working in Illustrator has its draw backs, however being able to create multiple art-boards in one document (for responsive design and UI setup) is a big advantage. Furthermore its vector engine and output means not only the design, but the data can be transferable to the web. Unfortunately, like Photoshop, it doesn’t cater to any interactive requirements.
A traditional web design workflow might look something like this:
Unfortunately the process from PSD -> Web Prototype is a lengthy and largely incompatible workflow.
A proposed workflow could look something like this:
Use What Works
Ultimately, when it comes to design tools, there’s no right or wrong. It’s all about using what feels most comfortable and makes sense to you as a designer. If you feel more creative in Photoshop, use it. There’s no reason to change workflows just because somebody says it’s not right. That being said, I would love to see a browser-based hybrid application that incorporates the power and creative freedom of a graphic design application, with editable web-output, kind of like Illustrator with a code editor.
Here’s a collection of useful tips to help save you some time. These are not big, detailed tutorials, just quick and easy tips that take a few seconds and are worth knowing – no matter how long you’ve been designing.
Tip for Sharper Circles
When working with tiny pixel shapes it’s very important to get the right sharpness on an image. This is incredibly difficult when you’re working with circles and round corners. This tip from Isaac Grant shows us one way to avoid the messy pixels. It’s simple, but I’d never considered it!
Copy Color’s Hex Code
Copy Color’s Hex Code. I only recently learnt of this feature. A very small tip that could save you a lot of time in the long-run.
Harmonious Color Schemes
Erica Schoonmaker shows us how to build Harmonious Color Schemes. She has a quick tip on Dribbble, but there’s also a 3 Minute Video that goes into a little more detail. A very useful tip for working with colour.
Enrich Colors with Gradient Maps
Enrich Color palette with Gradient Maps is a tip from Jimena Catalina that works brilliantly for photos and illustrations.
Proper Border Radius
Proper Border Radius. When placing a round corner box inside of another, it’s important that you adjust the border radius to offset the distance between them. Here’s one quick way of understanding, and doing that.
Shaping Textfields in Photoshop
Shaping Textfields in Photoshop is a tip that I wish I’d have known sooner. It’s a lot easier to do than it seems and it comes in handy a lot!
The Power of Gradient Maps
Bjango gives us a lovely run down of what Gradient Maps are, and how they can be used with a lot more accuracy and control. I’ve always loved Gradient Maps as a Photo Effect, but I find myself using them more and more lately in UI design, this post on Bjango opened my eyes for sure.
Expand and collapse all layers
A very quick tip to help you quickly tidy your layers & groups. I do this just before saving my PSD to make it easier to explore when I re-open it.
Double Exposure Photographs
How to Create Double Exposure Photographs in Photoshop. Not exactly a tip, but a very quick and easy technique to learn.
Correct Pixel Snapping
Pixel Snapping alone is helpful, but when using complex shapes, and re-sizing them, the pixel snapping doesn’t snap those transformations very well, and you get messy pixels. This simple keyboard shortcut fixes that with ease! Watch now.
Isolation Mode in Photoshop CC
A little gem that can help make your life easier when working on complex .psd files with tons of layers. Isolation Mode unclutters your Layers panel by only displaying the layers you’re currently working on.
Photoshop Tricks and Shortcuts
Photoshop Layers tricks and shortcuts is a very nice round up of time saving tips and keyboard shortcuts inside Photoshop.
Bonus: Photoshop Etiquette
Photoshop Etiquette is a complete guide of the most effective way to do things in Photoshop. Nobody likes inheriting muddy PSDs, and Photoshop Etiquette’s purpose is to help you improve the clarity of yours.
Update (5/21/13): To see the mobile prototype, check out Creating an Installed Application Experience on Mobile With Web Technologies.
National Geographic partnered with Adobe, sharing select content for Adobe’s use to experiment with digital layout. The results mark the beginning of a technical and design collaboration that will look at innovating around layout while responding to some of the real world needs of National Geographic’s designers. By combining a National Geographic feature entitled “Forest Giant” with some of Adobe’s contributions to web standards, Adobe has created a forward-looking vision of how readers will consume web content in the very near future.
Because some of the features the demo uses are still experimental, the article needs to be viewed in Chrome Canary with two runtime flags enabled.
To learn more about enabling runtime flags, see this tutorial.
Once you have Chrome Canary installed and properly configured, go check out the demo. (Note that the entire project is open source and available on GitHub.) Of course, if you’re in a hurry, you can always just watch the video above to get a feel for the experience.
Some of the advantages of modern layout capabilities can be subtle, so we created an “editor’s overlay” mode which highlights the more noteworthy features and explains how they were implemented. To enable editor’s marks, click on the bar at the bottom of the article (or just press the tilde key).
In order to have better control over the flow of the article, we used CSS regions. At its core, regions allows you to separate your content from where and how it gets displayed. Specifically, it allows you to designate which part of your DOM is your content, and which elements your content should flow through. The flow of the content happens automatically, adjusting for things like font size changes, resizing, zooming, etc.
In the “Forest Giant” demo, we use regions to make the content flow throughout the page in interesting ways, even creating shallow columns in one instance. Without regions, the designer would have had to break the content up manually, and would have to make major adjustments to the entire page if the content ever changed. With regions, the content is automatically broken up across various elements as the source text flows through the specified region chain.
Regions are also an excellent tool for responsive design. When you change the size and/or position of your regions in response to changes in screen size, your content automatically reflows through your region chain.
CSS Exclusions allow text to flow along either the inside or the outside of a shape. Take a look at the drop cap at the beginning of the article. Without exclusions, the text to the right of the “O” would be vertically aligned, creating uneven spacing. By using exclusions — and specifically shape-outside — the text is able to follow the contour of the initial letter creating a much cleaner and far more polished visual effect.
Another example of exclusions is the text at the bottom of the article. Notice how the paragraph follows the shape of the map. This type of high-end layout was not formerly possible with HTML content. Without exclusions, the best way to do this on the web would probably be through the use of images, however you then lose the ability for your text to be resized, indexed, searched, copied, and easily updated.
The concept of balanced text is fairly subtle, but once you’re aware of it, you’ll find that it makes a huge difference in the way your content is laid out. By default, browsers wrap text one word at a time which means you can easily end up with lines containing only one or two words while the line above it might stretch the entire length of your container. Although this is something we’re pretty accustomed to seeing on the web, it’s not a layout that would ever be permitted in print. When designers have full control over how lines of text are broken up, they will balance the text such that every line is approximately the same length.
We’re using a balanced text polyfill for both the subtitle of the article, and the pull quote between the second and third paragraphs. To see how it works, try resizing your browser horizontally. If you have a wide enough monitor, you should see the entire pull quote on one line. As you decrease the width of your window, you will see that the text always wraps in such a way as to keep the lines close to the same width.
Most of us are accustomed to applying filters to images in applications like Photoshop and Instagram. And if you’ve used SVG on the web extensively, you’ve probably also experimented with SVG filters. Now you can apply the same visual effects to any HTML elements using CSS Filters.
The advantages of filters are:
- They can be applied dynamically which means you don’t have to preprocess your assets.
- You can apply them to any HTML element (not just images).
- They can be animated with CSS Animations.
We’re using a custom filter at the bottom of the article to allow users to “peel back” the bottom of the page and expose an interactive infographic (click on the “Explore the President Tree” text to see the filter in action). The effect is a subtle but fun way to create a sense of depth in the content, and is achieved entirely through CSS.
Because the “Forest Giant” article is about the second largest tree in the world (but probably the biggest in terms of mass), we wanted to convey a sense of size. If you click on the “Click Here to Pan & Zoom” link below the thumbnail of the giant sequoia, you’ll see a huge image of the tree assembled tile-by-tile until you reach the top. Try scrolling around the image and note how small the three scientists appear in relation to the tree they are studying.
This effect is accomplished with WebGL (through a library called three.js). Although WebGL is not a specification or implementation that Adobe is contributing to directly, we’re a big fan, and it was the perfect technology for building a smooth 3D animation.
Advances in technology have proven many times that convenience often trumps fidelity. For example, MP3s became popular — even at their initial low bitrates — because it was more important for us to have all of our music available wherever we were than it was to have the best possible audio quality. Similarly, digital books, magazines, and newspapers are replacing their analog counterparts at an increasing rate because convenient and instant access to content frequently supersedes aesthetics.
Now that the internet has helped to make content ubiquitous, we’re starting to see a shift back toward production value. Users want HD video, beautiful and fluid user interfaces, and they increasingly expect content to be presented in interesting and compelling ways. With features like regions, exclusions, balanced text, custom filers, and WebGL, content producers will no longer have to choose between reach and design. Working with National Geographic’s stunning visual content, Adobe has proven that the web of tomorrow will enable both.
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 thoseold-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 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 eventattoos 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. (Image: Derrick Diemont)
THE SOFTWARE’S PAIN POINTS
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.
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
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.
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
- 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?
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 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 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 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.
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 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 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.
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. (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.
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 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.
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.
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 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 andCSS3Ps 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.
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.
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 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.
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.
Framer is a prototyping tool for animation and interaction on desktop and mobile. Framer can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote. Source
I guess everyone knows that you can copy/paste layer styles through the menu
Layer → Layer Style → Copy/Paste Layer Style. But what I missed is a function that will paste effects by adding them to the current layer instead of replacing everything. Let me show the example.
Let’s say you have a circle on your canvas with
Stroke effect on it and you have in your clipboard style with
Inner Shadow. If you’ll paste it via default
Paste Layer Style it will replace everything and leave you with sad circle with
Not cool. Sometimes I need to apply one global layer style effect (Drop Shadow for example) to few layers that are already have their own layer styles. I have to do add this style manually. Tedious process.
So, to solve this problem I decided to write a script.
When I made it, as usual I wanted to assign hotkey to it. As I wrote before, for working with Layer Styles I have these shortcuts:
cmd+ctrl+c — Copy Layer Style
cmd+ctrl+v — Paste Layer Style
cmd+ctrl+x — Clear Styles
cmd+ctrl+t — Scale Effects
And I decided to assign to the script hotkey
Imagine my face, when Photoshop showed me this warning:
Photoshop already has this function! And it has same hotkey that I wanted to assign to my script!
But the most interesting thing is that there’s no such menu item in Photoshop at all. Like they made function, but didn’t added it to the GUI. I guess that’s why warning says, that we can’t assign different hotkey to the “Paste layer effects without replacing the current effects”—we just can’t access this functon in the
Keyboard Shortcuts… dialog.
The essence of the post in one picture
So, this time instead of script I have a hotkey for you:
Unfortunately, I don’t know analog combination for the Windows. We tried with my brother to press instead of cmd: grey alt, shift — nothing happened. If someone will find such hotkey for Windows — please reach me out on Twitter or in comments, I’ll update the post.
I wonder what other hidden functions Photoshop actually have.
Imagine what if …
Most people who design web sites or apps in Photoshop will, at one point or another, have had issues trying to match colours in images to colours generated by HTML, CSS or code. This article aims to solve those problems once and for all.
Colour management attempts to match colours across devices
In the printing world, colour management typically involves calibrating your entire workflow, from scanner or digital camera to computer display to hard proofs to the final press output. This can be quite a tall order, especially when the devices use different colour spaces — matching RGB and CMYK devices is notoriously hard.
When designing or editing for TV, it’s common for the main editing display to be calibrated and for a broadcast monitor to be used — these show a real time proof for how the image might look on a typical TV in a viewer’s home.
In those scenarios, colour management offers many benefits and is highly recommended.
When building web and application interfaces, the situation is a little different. The final output is the same device that you’re using to create the artwork — a computer display. (Please ignore the differences in gamma between Windows, OS X prior to 10.6 and the iPhone for now, as these are covered later.)
When designing websites or app interfaces, we’d like to perfectly match the colours displayed on screen in Photoshop and saved in files with what’s displayed in other applications, including Firefox, Safari and the iOS Simulator. We want the colours to not just look the same, but the actual values saved into files to match the colours we defined in Photoshop perfectly.
Colours can not shift or appear to shift in any way, under any circumstance.
Why is this so difficult?
Photoshop applies colour management to images displayed within its windows and also to the files it saves. This is a bad thing if you’re working exclusively with RGB images that are for web or onscreen UI. With the default Photoshop settings, #FF0000 can display as #FB0018 and #BB95FFas #BA98FD. The exact values will depend on the display and profile you’re using, but differences definitely exist with the default Photoshop settings.
How does Photoshop’s colour management differ to colour management in OS X and Windows?
OS X’s colour management is applied to the entire display at the very end of the processing chain, after the main buffer in video ram. This means that although colour management is being applied, software utilities that measure colours on screen (like/Utilities/DigitalColor Meter) will still report the same values as you saved in the file or entered into your code. I believe the colour management in Windows Vista and Windows 7 (Windows Colour System) works in a similar fashion.
Photoshop’s colour management is applied only to the image portion of its windows and to the files it saves. This colour correction happens as Photoshop draws the image on screen, so software utilities that measure colours on screen often report different colours to the ones you specified. It’s worth noting that OS X’s colour management is applied on top of Photoshop’s.
The best solution I’ve found is to disable Photoshop’s colour management for RGB documents as much as possible. Doing so forces RGB colours on screen and saved to file to match the actual colour value. If you need your monitor to be calibrated a specific way, then you’ll be best served by changing it at an OS level for web and app design work.
Disabling colour management used to be quite easy in Photoshop CS2 and all versions prior, but now requires a little more skill.
Disabling Photoshop’s RGB colour management
These instructions are for Photoshop CS4 & CS5 on Mac and Windows. Setting up CS3 is very similar.
Step 1 — Choose Edit > Color Settings and set the working space for RGB to Monitor RGB.
Step 2 — If you’re using Photoshop CS6, click More Options and turn off Blend Text Colors Using Gamma, because it changes how non-opaque text is rendered. It should already be off, but if it’s not, turn off Blend RGB Colors Using Gamma as well.
Step 3 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.
Step 4 — Ensure View > Proof Colors is turned off.
Step 5 — When saving files with Save For Web, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).
The difference between “Assign Profile” and “Convert to Profile”
Now might be a good time to mention the difference between “Assign Profile” and “Convert to Profile” so you’ll know when to use the appropiate function.
Each Photoshop document contains a colour profile that’s separate to the actual colour data stored for each pixel. “Assign Profile” simply changes the profile in the document, without affecting any of the colour data. It’s a non-destructive action — you can assign a new colour profile to your documents as often as you like without any fear of doing damage. Assigning a new profile may change the way your document appears on screen, but the data contained in the file will be unaltered.
“Convert to Profile” is quite different. It not only assigns a colour profile to a document, but it tries to keep your image looking the same on screen. It does this by processing the colour data contained in the file for each pixel. Converting to a new profile is more likely to maintain the way your document appears on screen, but the data contained in the file will be permanently changed. Use with caution.
If you’re copying layers from one Photoshop document to another, it’s a good idea to ensure both documents have been assigned the colour profile.
Illustrator is the same as Photoshop
If you’d like images saved from Illustrator or imported from Illustrator to Photoshop to match as well, then follow the steps below. These instructions are for Illustrator CS4 & CS5 on Mac and Windows. Setting up Illustrator CS3 is very similar.
Step 1 — Choose Edit > Color Settings and set the working space for RGB to Monitor RGB.
Step 2 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.
Step 3 — Ensure View > Proof Colors is turned off.
Step 4 — When saving files with Save For Web & Devices, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).
Windows has used a gamma of 2.2 since its introduction. OS X has used a gamma of 1.8 for all versions prior to Snow Leopard. Snow Leopard, Lion and Mountain Lion all use a gamma of 2.2. What does this mean? Before Snow Leopard, web pages looked darker on Windows. Thankfully, both operating systems are in sync now, so the same web page design should look very similar on a Mac and a PC that are using the same monitor.
Information about the iOS’s gamma is a little hard to come by, but I believe it’s 2.2. This is one of the reasons why it’s also a good idea to test your interface on an iPhone or iPad.
There’s a good chance that your iPhone, iPod or iPad’s screen will look different to your computer’s display. Screen types, warmth of colors and even sub-pixel patterns vary greatly, so you will probably want to tweak the design after seeing everything in situ. Some display types, such as AMOLED, can appear far more saturated and with much higher contrast than typical computer LCDs. Not to mention, seeing your design on the device is exciting.
There are many ways to get your final mockup onto a mobile device. We weren’t happy with the options available, so we built our own tool for the job. Skala Preview lets you view realtime design previews on your device, as you edit in Photoshop. Previewing your design in situ lets you test tap sizes, text sizes, colour, contrast and ergonomics, all at a time where changes can be easily made — during the design process. It closes the loop, meaning you can iterate faster to a better final design.
Handy tools for Mac users
I hope this article helped. If you have any questions then feel free to ask us via Twitter.
A little while ago I was approached by the wonderfully talented Brian Hoff about creating some custom icons for his site redesign. Thought it would be cool to do a little case study from Brief to finished product.
Icons: Information architecture, marketing, copyrighting, front end development, multi screen, iOS app, iOS app icon, branding, design, content management system, interface design.
Style: no colour, flat unshaded shapes.
I started with some brainstorms and sketching. Tried to grasp some sort of style and nail each message before jumping into illustrator. A few things I constantly kept in mind were that the icons would only be displayed at 18px so they would have to sit nicely in a square without loosing too much space, at this size I try to use as many pixels as I can to convey the message. Most details need to be taken out, simplify then simplify again, if the icon has lost it’s direction then I go back a step.
After I’d settled on my ideas I jumped into illustrator and started to mock the icons up. This part of the process is great to really get in and make the best of each icon, make copies to play with ideas. Yes you should try to stick with the direction of the icon but usually I stumble across some awesome ideas that really work when I’m just pulling and pushing the icon in different ways.
Tip: instead of having a new file for each icon/concept development, try to make the whole set and it’s concepts in one illustrator file. Keep the icons you like best towards the top or bottom again all together. This helps you see from an early stage if the set works together or if there are the odd few “sore thumb” icons that need moulding a little more.
Each of these icons have something different to offer, hold a different style. Even the way they are pixel hinted would depend on what style Brian was looking for. Information from this one icon concept would be able to pave the way for the whole icon set. After a short skype chat, Brian told me he liked the icon to the far right. Rounded corners, more friendly, gives it a little more character. So based on this decision I went forward and built the set from there.
Next step was to pixel hint the icons. This is probably my favourite part of the process. It’s like fitting a little jigsaw together, really tricky and sometimes stressful but the moment I realised I’ve got it right is one of the best part about being a designer, such a wicked feeling. I’ve attached a screenshot of the “marketing” icon from pixel hinting view to actual size. You can see here, the characteristics of the icon come into play, a different shade of pixel can create the loveliest curve or indent to give the icon personality. This was one of the most difficult to work on due to the graph line and overlapping lines.
Tip: when working on diagonal lines at this size you’ll drive yourself crazy trying to get it perfect. My approach is to hint the shape around until you get about 5 or 6 solid black squares to form the line then slightly maneuver the points around it to create a outer cushioning. Eventually it will fall into place. Pixel hinting takes time and perseverance, no short cuts here I’m afraid.
So after hours of hinting and perfecting each little pixel I contacted my “Mr Miyagi” Gavin Elliott and I threw the final set up on dribbble for some feedback here. Big thank you to Rogie, he pointed out that the cog I’d initially made didn’t really sit right with the set. This happens to me a lot, especially on projects I’m so close to for hours on end, your mind can become immune to how something, looks thats why I always get feedback. A fresh pair of eyes on a project can do wonders. So I changed it up, when right back to the start and developed the vector asset, pixel hinted and placed into the set. This was just what it needed.
So here are the final icons, I sent them over to Brian for feedback. There where the odd few tweaks to make and Voila! there you have an icon set!
Thanks for reading guys!
Working with vectors in Photoshop provides extreme flexibility, but challenges can arise when anti-aliasing kicks in, particularly when your documents are at 72dpi. Learning how to utilize the pixel grid and becoming comfortable working at high zoom levels in your documents is a requirement if you want to make sure your vector elements are a maximum crispness. I walk through taking a logo from Illustrator into Photoshop and my process for cleaning up the logo’s edges. This is Photoshop geekiness at it’s finest!
Hundreds of tools may be available for interaction designers, but there is stillno industry standard for interaction design the way Photoshop and Illustrator are to graphic design. Popular programs are out there, but many of them have considerable drawbacks, which has led me to explore alternative apps.
I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app originally created for designing books and magazines, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.
Slowly but surely, InDesign has evolved from a print-only tool into an application that can produce interactive media for the iPad and eReaders, too. Surprisingly, it has built-in tools for creating interactivity and animation within your spreads. Though it may sound crazy at first, hundreds of thousands of designers have adopted InDesign as their go-to application for eBooks.
We’ll take InDesign one step further than these authors to produce fully interactive wireframes and prototypes. As you will soon see, InDesign has a unique set of tools and features that are perfectly suited to designing wireframes and interactive prototypes in a more intuitive way than you ever thought possible!
What Makes It A Great Wireframing And Prototyping Tool?
I look for only four categories of features in a wireframing and prototyping app. InDesign has them all in droves.
Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily.
Design once, and have the changes cascade throughout the whole document.
Create different states of a design in which the user can actively engage with the design and change the states of the prototype.
Set up transitions between various states of an application.
SET UP INDESIGN FOR INTERACTIVITY
Before creating a wireframe or interactive prototype, setting up both InDesign and the new document correctly is imperative. After opening InDesign but before creating or opening a document, go to the “Preferences” panel (on a Mac,
InDesign Menu → Preferences, and on a PC,
Edit → Preferences → General) and change the following preferences.
Global preferences (i.e. when no documents are open):
- “Units & increments”: Set units to pixels
- “Display performance”:
- “Default view”: High quality
- “Raster images, vector graphics, transparency”: Higher quality (resolution)
Change InDesign’s application-level settings (“Units and increments”) before creating a wireframe or prototype. Larger view.
After changing the global preferences of InDesign, create a new document (on a Mac or PC,
File → New → New Document), and set up the following properties.
- Intent: Web
- Pixels as dimension
- Common screen sizes
- Horizontal orientation (for desktop and traditional Web)
- No facing pages (spreads)
Setting the “New Document” properties to “Intent: Web” enables you to create a new document with pixel dimensions. InDesign provides many presets for common screen sizes.
Note: Documents created with “Intent: Web” will have an RGB color space.
Set Up The Workspace
Make all of the interactive functionality new to InDesign CS5 and CS6 quickly accessible. I like to place them on the left side of the screen, under the tools palette. Larger view.
As stated, InDesign can be used to produce static print-based media as well as fluid, animated interactive media. The type of project you are creating will dictate what features you will need quick access to and, thus, how the user interface should be arranged.
How one sets up their workspace is a matter of personal preference, but after much trial and error, I’ve found a set-up that works for me. What works for you may be different, but I recommend using the information provided in this section as a starting point for your customization of the InDesign interface.
Once you have placed the panels the way you like them, save them as a named workspace. You can switch between workspaces in the upper-right of the InDesign application window.
Two workspace presets are provided with InDesign (found in the upper-right drop-down menu), “Digital Publishing” and “Interactive for PDF.” I have created my own workspace (named “Interactive – Custom” in the screenshot above), based on the other two.
Basically, all of my typographic, layout, color and other design-oriented panels are on the right, and all of the new interactive panels are on the left, under the tools panel. The panels listed just below are docked together on the left of my screen.
Here is a quick introduction to a subset of the interactive panels:
Displays all external assets that have been placed in your documents. Link images, relink and update your assets.
Manage movies and audio files placed in your document. You can customize how these media files play and are viewed in your document.
- Liquid Layout
Set up rules for how objects may be repositioned when the document is viewed on various devices and, thus, at various page sizes and orientations.
- Buttons and Forms
Convert objects to buttons, and control button properties.
Create animations, and determine how objects move.
When multiple animations occur on one page, control their timing so that they are played in the correct order.
- Object States
Create objects that have multiple states (such as slideshows and drop-down menus). Each state can be shown and hidden using buttons. This is powerful for creating complex interactions.
Preview how an animated and interactive document will look and behave without having to export first.
These panels are where most of InDesign’s interactive functionality can be accessed.
I don’t use the panels for hyperlinks, bookmarks or page transitions much, so I don’t dock them with the others.
Wireframe Creation Features
Drawing tools may seem like a commodity in the realm of design software. However, many commonly used interaction design applications rely on the placement of predefined UI controls such as buttons and sliders. Ideally, a wireframing application should have vector-drawing tools. Vector graphics are advantageous because they allow for non-destructive editing; and for the most part, the nature of vectors forces you to maintain low to medium fidelity. Jumping into visual design too early in the design process is easy if you are using a program such as Photoshop.
Although InDesign’s drawing tools are not as sophisticated as Illustrator’s, they are more than enough to get your ideas across. The logic here is that, the more robust the drawing tools in a wireframing or prototyping app are, the less you’ll have to jump in and out of other tools, which would create bottlenecks, extra work and technical hurdles.
The drawing functionality in InDesign is similar to Illustrator’s. Many of the bells and whistles found in Illustrator may be missing, but you get a core set of streamlined and powerful drawing tools to render anything you can imagine.
InDesign is one of the only design tools that has robust grid support built in, and I find myself designing with grids all the time. (You can find all of the layout functionality by going to
Layout → Margins and Columns.) Grids from widely used systems, such as the 960 Grid System, can be easily and quickly created and used throughout a design by using master pages, which we’ll cover later. Horizontal and vertical guides can be used in conjunction with columns to create subgrids for greater complexity and precision in a layout.
Quickly and easily create grids for your document, such as the 12-column grid based on the 960 Grid System, shown here. Larger view.
Not to be confused with the very old technique of laying out Web content, tables in InDesign are often used to display tabular data, as well as list and grid views, in a user interface. In fact, creating tables is one of the reasons why I started creating wireframes in InDesign in the first place!
I often turn cell borders off (either by setting the stroke to none or to 0 pixels), so that the table can inform my design but not be so literal or distracting in the final wireframe or prototype. Other common reasons why I use tables are to create tabs that evenly distribute the text label in each tab, and to create subgrids for alignment in a design when the main grid just won’t do.
Tabular data can be created in seconds in InDesign. When tables are needed, no better design program than InDesign is out there. Larger view.
While layers may seem like a no-brainer feature that doesn’t warrant mentioning, plenty of apps simply don’t have them. (InDesign didn’t have the ability to show objects in the Layers panel until CS5.) Layers provide the ability to group, reorganize, selectively show and hide, and selectively lock and unlock objects in a design. The larger and more complex a design is, the more important layers become.
Multi-page documents in InDesign share the same organization of layers: every page has the same number of layers, which are also in the same order. When a layer is created, moved in the stacking order or deleted, or when its visibility has changed on one page, those modifications are reflected on all other pages. While the organization of layers is consistent throughout an InDesign document, the designs on each page may be unique.
In the last several months, I have experimented with various ways to order my layers and have come to the conclusion that only a few layers are needed to adequately organize my files. Typically, I use only four layers: I place a notes layer at the top to add explanatory text about the design; next, I use an input layer, where I show user actions and input; below that, I show modals (dialog boxes, lightboxes and popovers), which appear over the background layer.
This is a common layer structure for my documents:
- User input
The wireframes I create usually have four layers. The background layer contains most of the design. Overlays are above the background. User input, such as from a mouse or hand, sits on top. Finally, notes are placed above everything so that I can annotate detailed interactions. Larger view.
By their very nature, interactive documents require multiple pages. Pages in website design (and screens in app design) are a fundamental unit of interaction, because they contain the content that users navigate to throughout the application.
Large and small projects would benefit from the organization that pages provide.
This new feature in CS6 is a game-changer for responsive and mobile design. Alternate layouts allow you to create designs for multiple devices and orientations in the same file. With InDesign CS6, we now have a tool in our arsenal to make designing for dozens of screen variations almost as easy as designing for one. The textual content of each size and orientation is all linked, so updates will automatically propagate to all variations of a design.
Alternate layouts were designed to work with the liquid layout toolset (discussed next), so that if layout rules were set up properly in the original layout, then newly created layouts would automatically update to conform to the different dimensions. Of course, alternate layouts may be used without liquid layout rules, too, so that you can manually control how objects are displayed in each layout.
When working on more than one layout, you might need to refer to other layouts or toggle repeatedly between multiple ones. To see two layouts simultaneously and work back and forth between them, simply click on the split-view icon to the right of the scroll bar at the bottom of the InDesign window.
Alternate layouts are used to manage one design that will be viewed on multiple devices.
Liquid layout changes the way content adjusts to the size of the page. (According to Adobe, this feature is HTML5-based.) Liquid layout lets you be more flexible: you can design once and set up some simple rules, and then the design will automatically adapt when the display’s size or orientation changes.
Set up liquid layout rules in one of six ways: off, scale, recenter, object-based, guide-based, and controlled by master. The details of the liquid layout rules are enough to take up an entire article by themselves and are, thus, beyond the scope of this article. I highly recommend reading Pariah Burke’s article “InDesign How To: Using Liquid Layout” to get up to speed on the rules.
Define liquid layout rules before creating an alternate layout, to fully leverage the time-saving benefits of this feature.
As you set up the liquid layout rules for a page, preview and test those rules to see whether they have the desired effect. To test your new liquid layout, select the page tool, and you will see handles at the edges and corners of the page. By dragging these handles, you can temporarily adjust the size of the page. This behavior lets you test how the content adapts when the page changes in size. Holding
Option on a Mac or
Alt on a PC lets you permanently change the page’s size by hand.
Wireframe Modularity Features
Master pages extend the functionality of pages by allowing a parent page to have objects and to have layers that are shared with its children pages. When content on the master page changes, it also changes on the children. Masters are typically used to contain headers, footers, logos and empty frames that act as placeholders. Surprisingly, very few other applications have master pages. Theversatility and saved time that master pages bring cannot be overestimated. They help with consistency, and they help designers use repeatable design patterns throughout a project.
When master pages are applied to other pages, you are able to share the master’s objects to the regular pages.
Note: Objects on a master page layer appear behind objects assigned to the same layer in the document page. If you want a master item to appear in front of objects on the document page, then assign a higher layer to the object on the master. A master item on a higher layer will appear in front of all objects on lower layers. Sometimes I create special layers for masters that are above the “normal” layers.
MASTERS BASED ON OTHER MASTERS
Masters can be created based on previously created masters. As far as I know, this feature is unique to InDesign. By creating a parent-child relationship between masters with a document, a nesting effect occurs (similar to the cascade in a cascading style sheet), which makes for a powerful way to create constancy and to update documents with ease.
Basing a master on another enables you to create similar variants of a design. Masters may be based on only one other master at a time.
When pixel-perfect styling matters, you can switch to whatever application you want to design in, and place that file in an InDesign document for seamless integration. Placement is especially powerful when using multilayer Photoshop or Illustrator files, because InDesign displays them in full fidelity.
Note: By default, InDesign previews placed images with a low-resolution preview. This does not reflect the quality of the placement or that of the original file — InDesign uses a pixelated proxy image to keep up performance on your computer. With CS5 or CS6 and a decent computer, I have found that a high-quality image preview doesn’t affect performance and is a more accurate way to view your work. I recommend setting the display performance to “high” as the default in InDesign. (This can be done by opening InDesign and going to
View → Display Performance → High.) Setting this when no document is open will set the default for all newly created files. Older files will retain the view settings that were selected the last time they were saved.
Each time a document is placed, it references the original file. For instance, if a PSD is altered, one click can update all of the instances of that Photoshop file that appear in an InDesign document. When only a portion of an image is necessary, InDesign offers some of the most intuitive and rapid masking tools available.
Note: Placed items are linked to the containing InDesign document based on their file location. To gather all files into one central folder, use the
File → Package command.
You can place most media types in an InDesign document. Larger view.
The placement feature is easy to take for granted, because it is a fundamental tool in InDesign’s arsenal that has been around since the software’s debut. But placement enables you to create a kind of collage whereby you can design the pieces in whatever tool you deem appropriate, and then assemble those pieces in InDesign.
PLACING INDESIGN DOCUMENTS IN OTHER INDESIGN DOCUMENTS
InDesign allows documents to contain other InDesign documents. Think of a placed InDesign file in a master object (rather than a master spread) because it makes it easy to reuse content in a design in a consistent, fast and easy way. If the original InDesign document is edited, all instances of the document will instantly reflect the changes. A placed InDesign file may show up in its container file an infinite number of times.
This feature allows for functionality similar to that of symbols in Flash and Illustrator, but expands on their use by facilitating constancy across multiple documents. This is an extremely useful feature that is not widely known but can save countless hours. For those working on collaborative teams, you can save InDesign documents to be used as reusable components in a shared folder, and any updates made by one person will be available instantly to the rest of the team.
InDesign documents may contain other InDesign documents. This seemingly simple feature allows you to create symbol-like functionality that allows object changes to propagate to an entire document. Larger view.
SNIPPETS AND LIBRARIES
Placed InDesign files make it possible to reuse content and to edit the originals. There are other ways to reuse content, such as snippets and libraries; however, these two methods do not allow the originals to be opened or edited after creation. Because of this, they should be used prudently, and only when the content in a library or snippet is finalized and won’t change. Snippets are more flexible and powerful than libraries, but using placed InDesign documents is recommended in most cases.
STYLES (OBJECT, CHARACTER, PARAGRAPH, TABLE AND TABLE CELL)
As anyone who has used character and paragraph styles in InDesign would attest, styling is an amazing time-saver and provides a level of precision and consistency that would otherwise be impossible. Object styles enable you to style one object to your heart’s content, and when you are happy with the way it looks, you can save all of the effects and the transparency, stroke and fill of an object to be applied to other objects later on. If the style itself is updated, then all objects that have been assigned that style will be updated as well.
Styles enable you to maintain a consistent look and feel in a document and to update the styles of any and all objects when requirements change or the mood strikes. Larger view.
Interactive Prototyping Features
When an object is converted into a button, it becomes clickable and interactive, able to initiate a myriad of actions such as navigating to a particular page, initiating animation or playing a sound. Almost any object can be turned into a button. A button is a special kind of “container frame” that hold the objects that make up the visual appearance of the button.
Buttons panel: details.
When a person uses an application or website, the objects on the screen that they interact with will often change states. For instance, a carousel slideshow might show a featured set of 10 images that rotate through the collection, showing one photo at a time. In this example, the carousel slideshow is one object with 10 states. In other programs, you would have to create a new page or art board for each of the 10 images in the carousel.
Without multi-state objects, the carousel object would have to be duplicated nine times, each state on a different page. This method is inefficient and doesn’t accurately reflect what is actually happening — that the carousel is changing states. State changes are not the same as page changes, and InDesign allows you to differentiate between the two! Multi-state objects are special objects that can change appearance depending on how or when a user interacts with them.
Objects panel: details.
Those blue underlined text links we have come to know and love on the Internet are alive and well in InDesign. Hyperlinks turn text into interactive objects that, when clicked, transport the user to a new page or to a different position on the same page. You can also easily turn URLs in text into hyperlinks (be sure to define the character style of hyperlinks first).
A note on named versus unnamed hyperlinks. When making a hyperlink, you need to decide whether it can be used multiple times (which InDesign calls a “shared hyperlink destination”) or will be a one-off link. If you are going to use a hyperlink several times in a document, making it named is great. That way, if you need to edit the link, you can change it once and it will get updated everywhere in the file.
Similar to the Links panel, the Media panel holds all of the movies and audio files that are linked within a document.
Used primarily for print PDFs, bookmarks make it easy for the viewer to find a particular section of the document. Bookmarks may be nested. A table of contents can generate bookmarks without your having to add bookmarks manually, which saves a lot of time. As with HTML, a link can direct you to a whole other page or (if it’s an anchor link) to another spot on the same page. Because there is no way to name pages in InDesign, you can also use bookmarks while designing a document for reference purposes.
Whole page-transition effects, similar to those in Keynote and PowerPoint, are available in InDesign.
Animated Prototyping Features
Though they can be thought of as eye candy, transitions provide additional information, context and feedback, and they help people visualize the results of their actions. Objects animate as a result of a user action, such as navigating to a page or clicking a button. The animations in InDesign have the same presets found in Adobe Flash CS5 Professional and above. Common presets, such asbounce, slide in and fade in, come bundled with InDesign, but you can create your own presets, save them and share them with others using InDesign or Flash.
Animation panel: detail 1 of 4. Larger view.
Animation panel: detail 2 of 4. Larger view.
Animation panel: detail 3 of 4. Larger view.
Animation panel: detail 4 of 4. Larger view.
The timing pane is used for advanced animation sequences in which a user action initiates the animation of two or more objects. The timing pane takes the place of a dedicated timeline found in apps such as Flash, and it resembles panels found in Keynote and PowerPoint (with some powerful additions). Timing is used to control the order in which objects animate, determining whether those objects animate one after another, at the same time or somewhere in between.
Timing panel: details. Larger view.
Previewing And Exporting
PREVIEWING AN INTERACTIVE DOCUMENT
With so many options to tweak in an interactive document, periodically testing your interactions will help you to iterate on the design and to experience what you are creating from a user’s perspective. Thankfully, InDesign helps you do this without having to export the whole document, which saves time and lets you stay in InDesign to test the design as you are creating it.
The difference between previewing a document and exporting a document may seem minute, but because previewing is so fast, easy and but one click away, you are more likely to use it to test, evaluate and tinker with a design — and increasing the number of iterations in the design process is a surefire way to increase the quality of your deliverable.
Preview panel: details. Larger view.
InDesign’s interactive features work only when you export the file to a format that supports them, such as PDF, SWF, FLA or XHTML. And different formats support different features.
Though InDesign has an “export to HTML” feature, it is so anemic that it is not worth using. Perhaps Adobe wants people to use its digital publishing platform — the resulting HTML files that InDesign produces natively are not useful because they don’t maintain the styling or interactivity of the working document. Adobe has said it wants to move in the direction of supporting Web standards, but as of CS6, I would not recommend exporting to the Web from InDesign.
Luckily, a company named AJAR Productions has a new Kickstarter project that aims to rectify the shortcomings of HTML exporting. Currently, the InDesign to HTML5 project is a work in progress, but it will have a 1.0 release very soon. Please take a look at this new plugin and see what it can do for you. The developers are very responsive to constructive feedback. Hopefully, Adobe will see how useful this functionality is and follow the awesome lead of this Kickstarter project. With the InDesign to HTML5 plugin, you can produce designs with the following features and benefits:
- With the WYSIWYG, no-programming-needed design environment, produce layouts that are faithful to the original InDesign file.
- Embed fonts on your website.
- Produce built-in page navigation.
- Use master page content.
The company Eight Shapes has created a toolset called Unify to fully maximize the interactive features of InDesign. Unify is a documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specifications, usability testing reports and prototypes. I only recently discovered Unify and have found it to be extremely helpful in my work.
Drawbacks And Limitations
Before you start rushing to mock things up in InDesign, I’d like to mention a few caveats. First and foremost, few professionals are using InDesign to create wireframes and prototypes. This means that there are few tutorials and support documents to help you if you get stuck or confused. Learning how to create animated eBooks or iPad magazines might help you approximate what you are trying to do, however. Also, there are almost no native InDesign files that can be used as stencils or pre-made components similar to those found in programs such as OmniGraffle.
There is a way to quickly create your own set of stencils from those already available online, though. You can copy and paste stencils from other programs into Illustrator, clean up the images, and then paste them into InDesign. As mentioned, you can embed InDesign documents in other InDesign documents in such a way that approximates the use of symbols in Fireworks, Illustrator and Flash. Embedded InDesign documents can be treated like stencils. The advantage is that these documents can be accessed by a team from a shared location, and when the source files are updated, every document that contains the embedded InDesign files will also get updated. While getting your InDesign stencil collection up and running might require some leg work, it is well worth the effort.
The interactive features of InDesign were not intended to be used for rapid prototyping or for creating rich complex interactions. While the interactive tools are perfectly suited to eBooks, they are not yet robust. The types of documents InDesign produces are intended to be used with the Adobe Publishing Suite and EPUB — two formats with different but related limitations. Interactive PDFs, SWFs and even HTML can be exported, too, but they don’t produce files with as high a fidelity as Adobe Publishing Suite or EPUB.
In some ways, the interactive toolset makes InDesign feel like a facsimile of PowerPoint or Keynote in terms of how page transitions are handled and animations triggered. The similarity to presentation apps makes it easy to jump in and start producing work quickly. But there are some drawbacks. As anyone who has created an animation-rich prototype in a presentation program can attest, although it looks slick in the end, designing a non-linear flow in the confines of a linear document is a bit of a hack.
Despite these minor limitations, I hope you have discovered the amazing benefits of InDesign. Although not perfect, InDesign offers many perks and features that will transform the way you create wireframes and interactive prototypes.
Many people are familiar with InDesign, but they often overlook it when choosing a wireframing or prototyping tool. This popular application in Adobe’s Creative Suite, once a print-only tool, has become a hybrid program that can produce multimedia content for the Web and eReaders. Though not perfect, the unique combination of its creative workflow, modularity, and toolsets for interaction and animation make InDesign a robust and powerful program that is perfect for creating both wireframes and prototypes.
What’s New in Photoshop CS6 Extended
Product Manager Zorana Gee provides an overview of Photoshop CS6 Extended.
What’s New in Illustrator CS6
Adobe Design evangelist Rufus Deuchler provides an overview of what’s new in Illustrator CS6.
Creative Cloud Introductory Tour
Learn how to log in and get started with your Creative Cloud membership. Take a tour of the Apps&Services page and the Files page and find out why creativecloud.com is your new creative hub.
Specctr supercharges Adobe Fireworks by automating spec generation. With the capability to spec dimensions, color, font, spacing, and more, Specctr enables design and development teams to collaborate more accurately, efficiently, and effortlessly.