Category: Uncategorized

Working With Creatives

Understanding what matters most to Creatives will make it easier for you to work with them successfully. But what matters most to a Creative is not always what matters most to other professionals, so let me try to explain this from my perspective, as a Creative, but also draw on my experience working with other Creatives.

I have more than 30 years of professional experience as a designer, illustrator, animator, writer and creative entrepreneur. While I enjoy making money just as much as the next guy, and certainly appreciate recognition, I don’t typically focus very much on my paycheck or my title, and I don’t see my career as just a meal ticket. That is not to paint a picture of myself as some sort of altruist hippie, but simply to say that my work gives me enough satisfaction to make that my biggest reward, and I know the same goes for many other Creatives.

What matters most to me and to other Creatives is, hands down, having the luxury of being allowed to care for the quality of our work. Most people interpret this as signs of prima donna behavior, of artistic ego, and that is true to some degree, but on the other hand, if a Creative cares about producing top notch quality for you, how can that be a bad thing? It would be unfair to equate these signs of professional pride with an inflated sense of self-importance.

On the flip side of quality is timeliness and deadlines. While most Creatives take pride in being efficient and fast, they usually resent the notion that their work can be expedited, and cranked out without care. This would be equivalent of asking a trained chef to produce the goods like a hot dog street vendor. A client’s convenience is typically not a particularly rewarding consideration for a Creative, especially if that convenience comes at the cost of compromised quality. You may well perceive quick, expedited results from a Creative as being adequate, but your opinion of what is adequate may not matter much to a Creative, who would know precisely how much better they could have made something, if given more time. So, the best way to get Creatives to accept compromises in this context is to a) acknowledge that they actually could do better if given more time, and b) to occasionally let them do just that.

Consistency and professionalism are tricky subjects with Creatives. Any Creative would want to suggest that they always produce their best possible work, regardless of who the client is. This is unfortunately not quite true – who the client is, what the assignment is about, and what the Creative is being asked to do actually matters for the end result. While a true professional Creative should have a rather high standard, any Creative would confess, if pressed for an answer, that they sometimes elevate their standards further, and go above and beyond. This is because there is an emotional investment required in any creative endeavor, in which inspiration plays a part. There may not always be much you as a client can do about this, aside from encouraging your Creative to find that inspiration, but there is a lot you can avoid doing, so as to not sabotage the results. Being rude and disrespectful will never work in your favor – it is akin to insulting the waiter or the chef at a restaurant when sending your food back. You may not want to know what goes on back in the kitchen after such a display of rudeness.

Furthermore, on that same note, no Creative wants to be treated as a soul-less production machine. It would behoove anyone seeking the help of a Creative to recognize that if they themselves had been able to produce what they’re asking for, they would not need to talk to a Creative in the first place. We do not typically instruct a surgeon on how to perform surgery, and we don’t tell an architect how to plan a building. Similarly, my advice to any client would be to leave room for contribution from your Creative. When it comes to creative work, it s very easy for anyone and everyone to have opinions, but there are likely things that you’re not aware of, things your Creative can help you consider or avoid, which might improve on the desired end result. Micro-managing your Creative is likely not the best course of action, and it may even turn your Creative against you, which obviously doesn’t help.

Reviewing work is a particular point of concern for me and for Creatives in general. That is not always to say that Creatives can’t handle criticism, but it is a sensitive issue, and dismissive or unfair criticism especially so. Most Creatives, myself included, get very involved and put a lot of thought into their work. It may not always be the right thoughts, or the most relevant thoughts, and it’s true that Creatives sometimes believe they have a monopoly on the creative truth. But it is also true that many clients, managers and co-workers are not aware of the thought process and intellectual investment to begin with, and therefore tend to dismiss them too lightly and perhaps unwittingly. Therefore, the best way to work with a Creative is always to start by assuming they do have a purpose behind their work, and ask what that purpose is. You can then proceed to discuss it, and ask if and how the solution can be improved, if inadequate in any way. Asking how something good can be made even better is a challenge most Creatives would embrace quite willingly.

It is important to recognize that creative work – especially in design, where components interact in often complex visual systems – is always intended as a very specific (custom) solution to often very specific (unique) challenges. Therefore, framing those needs and challenges accurately at the outset of a project is of paramount importance. Also, connecting the problem and its original specifications to the solution when reviewing it is equally important. Very often, a reviewer (be it a client, a manager or a co-worker) changes and evolves the definition of a problem as a project progresses, and to me, this means that my solution is based on faulty assumptions, and work therefore has to start over, to ensure that my results are addressing the actual problem. Instead, reviewers often go about reviewing creative as if it is a set of checkboxes that can be unchecked independently of each other. This notion is often insulting to Creatives, who tend to see their solutions as too complex and specific for that – a set of dominoes laid out in a path, rather than a set of freely exchangeable lego pieces. Remove a piece in the laid-out path, and the chain is broken.

A reviewer may feel they are helping mould and sculpt the solution, whereas for a Creative, the solution is being bastardized and Frankensteined into something unrecognizable and less purposeful. The best way to proceed is actually therefore, somewhat counterintuitively, to go back to the beginning and start over. Personally, I always prefer that to being forced to mutilate something I have taken great care crafting.

Finally, it is exceedingly common for clients to think that creative egos require flattery, and to mistake that flattery for an expression of respect. And it is true that any Creative appreciates being recognized for their talent, but flattery really doesn’t work very well and is very often seen as insincere or manipulative, at least it appears that way to me. Creatives tend to only respect the opinions of other Creatives, and flattery – especially if directed at work the Creative is not happy with – will only serve to further undermine the respect felt for others. You don’t need to worry about your Creative feeling unappreciated; that will only happen if you actually tell or show them you don’t care for what they’re doing. If the work is good, a Creative will know it. And if there is a difference in opinion in regards to the quality of the work, you expressing a liking for something will not change a Creative’s mind – even if they may be willing to compromise.

(REPUBLISHED FROM 2015)

Image Optimization 101

Introduction to Image Optimization here >

  • Photographic images (pixel based): should ALWAYS be progressive, optimized JPGs. Note: if the pixel proportions of the image are very large (in excess of 500px), consider ways of cropping the image and fading it to a solid background color. ALWAYS select to save JPGs as progressive – it means they load incrementally, as opposed to in one full download.
  • Flat color graphics: should ALWAYS be SVGs (vector based) where possible, and where this is not the case (if we don’t have access to vector assets, or if alpha transparency is required), use optimized (pixel based) PNGs. NEVER create a PNG from a previously compressed JPG, as the JPG compression will have caused dithering that will cause increased file size with PNGs (LZW compression).
  • Single color elements or gradients: should NEVER be image assets but defined in CSS. May POSSIBLY be done as SVGs if necessary.
  • Transparent/masked images: use very SPARINGLY, especially if photographic, since these have to be saved as PNGs with an alpha channel, which adds to the file size. If the proportions are very large, consider fading the image to transparent, or to a solid background color.
  • Optimization:
    • ALWAYS crop the image to the smallest size possible. If you know that parts of the image are going to fall outside the browser, or be masked by the size constraints of a div, crop the image first. 
    • If using a JPG, ALWAYS make sure to compress the image as much as you can, without suffering noticeable compression artifacts. Be especially wary of JPG compression with red images. If parts of the image can be blurred somewhat, this will help bring the file size down, since the lossy compression will “take” better. IDEALLY, do not compress an already compressed JPG, as the quality will suffer.
    • If using a PNG, ALWAYS use an adaptive palette with reduced color depth – NEVER full 24- or 32-bit color, since the file size will be prohibitively large. Also, NEVER apply dithering unless absolutely necessary, or where it can be used to subtly rasterize a gradient with fewer colors.
    • ALWAYS run image assets through an optimizer, like Compressor.io, Guetzli.it or Tinypng.com for instance, just to make sure compression is as efficient as possible, and all metadata has been stripped out.
  • Scaling: NEVER scale images up, and consider not scaling down either, but optimizing the files to the true size on the page. EXCEPTIONS: if the image is vector based, or if the same image is being used in multiple places. Then use the highest common denominator, and scale down where applicable. Don’t use the same higher-res images for retina resolution screens and for regular screens, but replace dynamically with  assets specific to each resolution.
  • Image sources: NEVER upload assets directly to your CMS that have been procured by a third party. First of all, as designers, we have to ensure that we are free from liability in case a proper image license has not been provided, and second, we cannot assume that third party representatives know exactly how the image will be used, so they may not be able to determine which file format and size would be most appropriate, and they also may not be sufficiently diligent in optimizing assets. ALWAYS run image assets by your Creative Team before using them.
  • Invalid image types: EPS, TIFF, BMP, PCT, AI, PDF, INDD (GIF may be permissible).
  • Glossary: 
    • Load time: the time required for a web browser to load an asset, given the Internet connection speed, data transfer latency and processor power.
      • 1 Mb of data takes approximately a second to load on a typical 5 Mbps connection
      • The same amount of data would take roughly the same amount of time to load on an average 4G LTE wireless connection
      • File size is not the only thing that determines load times however: there is also the consideration of external server calls, such as tracking pixels for instance, that require time to resolve.
    • Resolution: The pixel density of bitmap images, commonly expressed as dots-per-inch, or DPI. Screen images should always be 72dpi. Pixel density affects file size (see below).
    • File size: The file size of an image file is proportionately related to the data required to describe the image:
      • its pixel proportions (the number of pixels required to render the image)
      • its color depth (the number of colors any pixel can take)
      • the vector points (the number of vector reference points required to draw the bézier curves that make up a vector image)
      • the compression format (either non-lossy LZW, or lossy JPG compression)
    • Optimal file size: As a rule of thumb, images should ideally not exceed 500 Kb in size. On mobile devices, that size should be even smaller.
    • Pixel: the smallest visual rendering component on a computer screen; a rectangular block of one solid color. Pixel based images appear jagged when scaled up, since the pixel ratio and proportions are locked into the image file based on how it was created. They may also appear jagged when scaled down, depending on how many colors are used to render the image, and whether anti-aliasing is applied or not.
    • Vector: An image encoding technique which defines images as a series of (bézier) vector outlines, with or without fills, lines and colors. Vector images can scale freely without quality loss or file size gain, since the vector shapes are rendered in the browser as pixels based on the final, displayed proportions, not the proportions in which the image was created.
    • Anti-aliasing: a smoothing technique to make pixel-based images appear less jagged, and to render vector or polygon images into a pixel-based grid.
    • JPG: Joint Photographer’s Expert Group – a pixel based photo image format with lossy compression (meaning: if a JPG image is being repeatedly compressed, image quality will continuously become worse).
    • PNG: Portable Network Graphics – an image format which allows for the addition of alpha channel transparency. Compression is non-lossy, but color depth can be (irreversably) reduced with the attachment of a color palette specific to the image (fixed, partially adaptive, or fully adaptive).
    • SVG: Scalable Vector Graphics – a web-friendly vector based image format. SVGs are ideal for simple, flat color or simple gradient shapes, such as logotypes or stylized graphics.
    • EPS: Encapsulated Post Script – typically a vector image format, but pixel based images CAN be saved as EPS files.
    • TIFF: Tagged Image File Format – a pixel based image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • BMP: Bitmap  – a pixel based image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • PCT: Picture – a Mac based pixel image format not renderable in web browsers, but they can be converted to PNGs or JPGs.
    • AI: Adobe Illustrator – the file format native to the Adobe Illustrator app. AI files cannot be rendered as-is in a web browser, but they can be converted to SVGs, or rasterized and rendered as pixel-based images.
    • PDF: Portable Document Format – the document format native to Adobe Acrobat. PDF is not an image format per se, but images can be “printed” to a PDF document, and can be rendered in Photoshop.
    • INDD: InDesign Document – the document format native to Adobe Acrobat. INDD is not an image format and cannot be used in a web browser, and images included in INDD files are typically linked external assets.
    • GIF: Graphics Interchange Format – an older pixel based image format which is limited to 8 bit color rendering, but in return can be used to render simple animations in a web browser, the creation of which requires specific software. GIFs can be rendered with one color as transparent, which means transparent GIFs often look jagged (due to the lack of anti-aliasing).
    • 8-bit, 16-bit, 24-bit, 32-bit: this indicates the color depth of an image, meaning, how many colors are used to define the image. 8-bit means the image consists of 256 colors. 16-bit means the image consists of in excess of 16,000 colors, and 24- and 32-bit means an excess of 16M colors.

Your Brand Personalized

Dynamic Creative In User Experience Design

All design is inherently subjective.

How people perceive and are affected by design depends on who they are, what their circumstances look like and what their expectations are. Subjectivity applies not only to media and graphic design, but to art, fashion, architecture or any other form of visual expression.

We judge with our eyes. 

This is especially problematic in the world of user experience, which to a large extent revolves around functionality and usability. The usefulness of browser- and app-based experiences depends on how well they enable users to accomplish what they’re trying to do.

Accomplishing goals, on the other hand, also depends on how motivated users are. This adds an emotional dimension to this otherwise highly rational discipline. Structuring a website (or an app) so that the user merely understands how to use it is simply not sufficient. If the user does not want to use a website, the empirical knowledge of how to use it is largely inconsequential.

Therefore, content must be packaged in a way that the user is emotionally motivated to partake of it and here, design has an important role to play.

A survey conducted by Carleton University in Ottawa, published in the journal Behaviour and Information Technology, determined that users form their impressions of a website and its visual appeal within the first 1/20th of a second of visiting it. Even more surprisingly, these first impressions colored the entire experience of the site, whether or not the whole site actually turned out to match that initial perception. The conclusion of the survey was that this first impression was “unlikely to involve cognition” – meaning it is largely an emotional response.

However, presenting a differentiated audience with a unified, undifferentiated design – however well optimized – will not account for the variances in people’s preferences and goals. Such a design will never be entirely effective. Given that users are different and have different preferences and expectations, effective UX design has to be personalize-able. This is quickly becoming an expectation, if not the norm.

A recent study published by Salesforce found that 80% of users expect online experiences to be personalized and tailored to their needs. This means that brands simply cannot afford to broadcast the same uniform message to a single, undifferentiated audience. Marketers need to find ways of communicating to individuals, not audiences.

This posits a problem of scale.

Very few marketers or publishers of content can afford to employ armies of designers and content producers to tailor experiences to each individual user. More importantly, they cannot do so in real time.

Enter dynamic personalization.

By devising smartly constructed, modular design systems based on creative componentry that can be freely interchanged, it is possible to compose entire user experiences based on incoming media signals. These signals can reveal behavioral-, demographic- and psychographic details about each individual user, allowing the experience to programmatically flex and adjust to some of those factors.

This ensures a successful, results-oriented communicative solution that scales. In addition, it may even be able to predict favorable outcomes through the application of AI-technology such as machine learning. Done right, it will allow marketers to dial in the most effective combination of content and design with increasing accuracy. Testing naturally becomes a central element in such solutions, where a multitude of creative options can be fed into the learning engine. The ideal mix can thus be determined, assembled and verified as users arrive on site.

In Leapfrog’s own testing, we regularly demonstrate incremental conversion gains through dynamic, personalized experiences. Our knowledge of such marketing solutions affords us the ability to progressively segment our creative so as to truly achieve effectiveness at scale. This capability is enabled and enhanced by our proprietary LFX Platform, which continues to deliver exponential value for our clients.

The marriage between intelligent technology and insightful creative strategy opens up exciting possibilities for improved marketing performance – performance that has thus far largely been untapped. However, fully capitalizing on this opportunity requires a shift in how brands look at design and how brands go to market.

The era of the static, monolithic brand is over. Modern brands need to understand their audiences, find ways of communicating on a personal level, and truly become interactive.

Four Flavors of Estimation

As UX practitioners, we all get roped into estimation meetings from time to time. But not all estimation efforts are the same. There are basically four different kinds of estimation, they all have different purposes, and they require different responses from us:

  1. True Estimation:
    • What’s the ask? “Here’s exactly what we’re doing; how long does this take?”
    • What’s most important? Giving an accurate account of the work involved.
    • What’s really being estimated? Effort and resources.
    • What you should ask: What’s the scope? What are the tasks? What’s the timeline?
    • Recommendation: Ensure that scope and tasks are clearly defined before estimation begins. If scope is only broadly defined, go to #2. Estimate task by task and resource by resource. Pad each estimate to allow for meetings, reviews and edits, or estimate those activities separately, or delimitate the estimate by excluding those activities entirely.
  2. Scoping + Estimation:
    • What’s the ask? “What can we do for this client, and how long does that take?”
    • What’s most important? Making appropriate recommendations, and making the business case for them.
    • What’s really being estimated? A list of recommended activities, and typical estimates per activity and resource.
    • What you should ask: What’s the goal of this project? How do we deliver ROI?
    • Recommendation: Ask to do scoping separately and get Account Management to commit to a fixed set of activities, and then add up the typical hours per activity. Give each activity an estimate in a range of hours, based on a high level complexity assessment. If scoping is not in the cards, go to #3.
  3. Guesstimation:
    • What’s the ask? “Here’s roughly what we think we should do; how long does this take?” (a k a “How long is a piece of string?”)
    • What’s most important? Cost.
    • What’s really being estimated? Resources required, number of hours that can be allocated per day per resource, and the approximate calendar time required to get it done.
    • What you should ask: How specific does the guesstimate need to be? (If very specific, go to #1 or #2).
    • Recommendation: Ensure that the person asking for the guesstimate is aware that it will be very rough. Scope the effort in broad categories, and do not define specific deliverables. Put your estimate in a range, never a fixed set of hours. The less defined the categories are, the greater the range. Do not accept being challenged on the guesstimate – if the requester wants you to be more precise, they need to provide more detail, either by going to #1 or #2.
  4. Adjustimation:
    • What’s the ask? “Here’s how long we have; what can you do in that timeframe?”
    • What’s most important? Speed to market.
    • What’s really being estimated? The priority of the project, how many resources can be freed up, and the time available.
    • What you should ask: How important is this? What is the client expecting? What’s the MVP?
    • Recommendation: Judge, based on prioritization, the percentage of hours available per resource within the allotted timeframe, and sum up how many hours can be spent on the specific project.Then ask each resource to define what they can accomplish in that amount of time. Be clear about the timeframe – if the due date is pushed out, the adjustimate has to be bumped up, since team members will continue working. Do not accept being challenged on the adjustimate – if the requester wants you to be more precise about what can be accomplished, they need to allow more time, either by going to #1 or #2.

Also, see: The Project Calculator™ (requires Flash)

(RE-PUBLISHED FROM 2017)

Users First!

“Mobile first” sound the tendentious battle cries of UX designers worldwide, suggesting that User Experience design now supposedly needs to begin with mobile experiences, and build outwards from there.

I can think of at least three succinct reasons why that dictate is wrong:

First, it puts the device before the user, which is not meaningful. As designers, we are not engaging with devices, but with human beings. Do we really know that all users consistently favor small, mobile, high-resolution viewports over large, widescreen ones? I submit that the answer is no, because any such knowledge is contingent on not just awareness of user preferences (which vary greatly), but user needs and user behaviors (which require research), and environmental circumstances (which are never consistently the same). Besides, even when factoring in these many shifting and complex parameters, we also have to consider the needs and intentions of our clients, for whom we are trying to make this interaction happen. We cannot assume that ”mobile first” always makes sense in that context either.

We are currently seeing not only a convergence of web based experiences displayed on increasingly smaller devices, but a simultaneous divergence, where screens are also becoming larger, and more numerous – virtually all of them wired, and sometimes even interconnected. Screens are multiplying, and people are using multiple screens in varying sequences, in various circumstances.

We cannot assume anything about users until we know who they are, and what they are trying to do. This, in turn, will dictate which devices they will be using, and that should be what guides our designs -–not dogmatic assumptions based on device classifications that are pre-destined to lose relevance.

Second, the statement ”Mobile first” makes an implicit assumption about just what ”mobile” means. The device landscape is changing so rapidly that the term itself is quickly becoming obsolete. In an age of ultralight laptops, netbooks, ”phablets” and smartwatches, just what is a ”mobile device”, really?

There are mobile phones that are straddling the divide between handheld and tablet devices, both in terms of size and resolution, and there are miniature, wearable devices whose resolutions we can assume will become higher and higher in order for those devices to display more information. At the same time, there are medium sized, often lower-resolution wireless touchscreens built into appliances and cars, where display characteristics may sometimes resemble mobile devices, even though they are often fixed, and usage is entirely different from that associated with smartphones. And there are both lower and higher resolution large screen devices and projection screens that blur the boundaries even further.

This means that we cannot, and should not, lock down User Experience design to one type of screen or size. We need to design for flexibility, but even more, we need to understand how users will be accessing our experiences, and what is most important to them. Since this is very much a moving target, the combination of mobility and compact screen size will not always top the list, of that we can be certain.

Third, we must realize that, not only are device classifications increasingly arbitrary and meaningless, but that the aspects of screen size and resolution – indeed, the very concept of human-computer interaction – are equally elusive, and forever evolving. User Experience cannot be locked down to a fixed pixel density, or a certain set of screen proportions. We are even seeing the merger of digital projections and physical reality; a fusion of the two- and the three-dimensional.

User Experience, especially as it relates to screen projection, is relative, and depends not only on the physical properties of the screen in question – whether a pair of eye glass lenses, or a large projection screen – but also on the user’s distance to the screen, how the user is interacting with what is displayed there (mouse, track pad, touch, voice, gestures, etc), and the various environmental circumstances at play.

This is why we need to change the mantra, from ”Mobile first” to ”Users first”.

What matters first and foremost to users is content, not the device on which this content is displayed. And how that content is structured, hierarchically as well as visually, also matters more to them than the technology used to display it. Even the visual presentation of the content matters more than the device, since the presentation is to some extent intrinsic to the content itself, and how it is intended to be perceived and experienced. The device is merely a facilitator in this perspective.

Therefore, the due process we need to observe as User Experience Designers is the following:

  • Content
    before
  • Structure
    before
  • Style

Defining the content is the designer’s number one priority. Without content, there is nothing to design, and without content to guide the design, it simply becomes meaningless fluff, regardless of the device used to deliver the experience. Once we have determined the content that will best serve users’ needs, aggregating the entirety of our content, and judging the value of it by virtue of Occam’s proverbial razor, we can proceed to shape it, and adapt it to the different rendering formats.

Realizing that design is first and foremost a process of reduction, the designer always sculpts the specific, smaller shape from the larger, unspecific whole; always crops and trims the desired view from the bigger picture. This is, ultimately, why user experience design can never truly be ”mobile first”. Mobile, whatever we mean by that, may possibly be the desired end state of a given design, the terminus of our design journey, but it should never be the starting point, for that would be like painting a mural based on the view through a keyhole.

We need to see the whole to define its most granular pieces, and determine their respective proportions, placements and relationships. We must outline an overall composition before we can craft the pieces that comprise it. We cannot build blindly outward by accumulating and assembling fragments; an artist does not create an image by cloning and repeating small sections, but rather composes a holistic experience by sketching in the most prominent components first, and filling in the details later. We must identify the smaller building blocks within the context of the bigger construct, and define the different ways in which they fit together. If we don’t, we are essentially improvising buildings by piecing bricks together, rather than first drawing up blueprints on which to base our constructions.

Hence, starting from a site-wide perspective, the designer should always first seek to define the content as a whole, distilling it into the total number of unique views necessary to contain the experience, classifying shared, global, re-useable content blocks as well as individual pieces of content; then whittling down experiences until able to look at individual pages, and components of pages. It is in this larger context that the mobile experience can be found. Eventually, the designer will arrive at the most purposeful, granular visual structure – or layout – as part of a holistic system of design elements, first and foremost tailored to the user’s needs, scalable up or down, as needed.

Not until we have shaped our content in this reductive fashion, and structured it both hierarchically and spatially, can we begin to apply style, or “look-and-feel”, to our design, down to the individual graphic elements. Only then can we start moving from defining content, and making content accessible and digestible, to also making it palatable and persuasive.

At this point, the devices used to render our experiences should pretty much be inconsequential; a natural selection produced by a deliberate, result-oriented process. Whether our user experiences are best suited for a smartwatch, smartphone, tablet, laptop, desktop computer, or a TV screen, should really be determined primarily by user and content considerations, ideally allowing the intentions of the sender and the needs of the recipient to meet in a mutually beneficial, equally purposeful harmonious whole.

(RE-PUBLISHED FROM 2016)

Getting the Concept

Harnessing the power of divergent thinking

“People who refer to out-of-the-box see the box … People who don’t know the box even exists are the innovative thinkers.”
― Lisa Goldenberg

Ideation is about tolerating ambiguity; accepting that the ideation process is divergent by nature, and that you may not immediately be able to identify the best solution with absolute certainty.

Rejecting the notion of the single, simple answer, and continuing to search for potentially better ideas that might still be hiding around the corner, is what determines the success of any ideation process.

For some people, this ambiguity is difficult to accept, and represents a loss of control that they fear will be unproductive and result in a waste of time; that you will be making things too complicated simply because uncertainty is an inherent part of the ideation process.

These people are typically either analysis-driven strategists, or process-driven producers. They quantify success either by the clarity and singularity of the purpose, or by the efficiency and flawlessness of the execution. What they typically fail to account for is, that inbetween insightful strategy and flawless execution comes tactical ideation, where a clearly stated strategic goal gets connected to a purposeful plan of execution through a divergent set of conceptual solutions, each which may represent a viable path forward, possibly for different reasons, and all of which should at least be considered and evaluated with an open mind.

StrategyTacticsExecution

Ideation requires big picture thinking before you get into the details; before you can afford to get too specific. Without context, determining the appropriateness of an idea is mere guesswork. Sometimes, you need to think big and think broad in order to define even one single isolated detail, even if that one detail ultimately ends up being all that gets produced. However, jumping straight to that deceptively simple-looking detail is not meaningful – no solution exists in a vacuum.

The scale of the thought is not necessarily proportionate to the scope of the work. Just because the ideation process hints at a more complex whole, doesn’t mean that the solution has to be complex as well, or that it necessarily needs to be holistic in nature.

Even an umbrella needs complex weather systems to be useful. Before you know what the weather systems are like, you should not conclude that the umbrella is the answer to the problem – even if it may initially look like an appealingly simple solution.

Don’t get lost in the single-minded hunt for what’s executable, before you consider what is actually worth executing, and why.

It’s Time for Photoshop to Go Away

Photoshop-designed mock-ups remain a staple design output still, in 2017. I scratch my head and wonder why. I myself have not used Photoshop for web design purposes in 20 years.

  • Web development is increasingly agile. Crafting mock-ups is a slow and inflexible process.
  • Web design needs to account for virtually endless device variability. Photoshop does not facilitate this.
  • The defining characteristic of digital media is interactivity. Photoshop’s focus is on visual appearance. There is no functionality in Photoshop that allows you to account for interactivity, and even if you export a PDF and make it clickable, it is an afterthought, and you can only emulate interactivity with hotspots or links, which is a very limited way to design for a truly interactive medium.
  • Websites revolve around content. Photoshop has no concept of pages, or navigation. In fact, it does not account for user experience on any level but the strictly aesthetic.
  • Web pages employ spatial layout to segment content visually, with scrolling to accommodate overflow. Photoshop works in layers. While you can certainly still map out visual elements and content across your Photoshop canvas, the tool itself does not aid you in determining how best to visually segment your real estate.
  • Photoshop is a pixel-rendered approximation of the final result; like a sculptor’s pencil sketch compared to the final sculpture. It is not accurate enough, and its usefulness is therefore limited. Designers need to sketch in something that is closer to the final product, in a medium that reflects reality better.
  • Photoshop is not a browser-native format. Just because something is pixel perfect in Photoshop does not mean it will make it into the final product.
  • Hand-offs from Designers to Developers using Photoshop is an inexact eye-balling process. Photoshop only provides a bare minimum of translation help when developers try to turn PSDs into working web pages.
  • Maintaining multiple Photoshop documents means revisions are costly. You will need one document per page, one document per breakpoint, and one document per version in your revision history. Add to this regional, seasonal or demographic segmentation, and the number of Photoshop files will very quickly become unmanageable, and each round of edits will be progressively more costly.
  • With each document, each file and each version shared with the client, the risk of discrepancies increases, which means you will need to spend an incremental amount of time on QA.

Most forward-looking designers have been prototyping for years now, rather than creating static visual mock-ups and iterating on them until the client is happy with the result. Problem is, that result is not the result that matters: what the page looks like in the browser is what ultimately matters.

So, for designers working in the digital space, it’s about time that we retired Photoshop. It may still have its uses, but web design isn’t one of them.

Here’s my recommendation: http://uxpin.com