Are you putting together a digital strategy, and are needing some assets produced? Even if you intend to hire someone else to help you produce them, it helps to understand the typical processes to end up with an accurate and functional asset.
In this post, I describe a summary of the processes to develop four of the most typical types of assets that will be used in a digital strategy. Wherever it makes sense, I will give some of my best creative tips to develop each media at the highest level.
Please know that there is no way I can cover every possible scenario in one post. For example, while I cover a typical web production process, it may need to be adjusted depending on the specific goals you’re trying to achieve. Also, some teams and professionals may prefer to work in a different manner than what is outlined here.
These process recommendations are simply meant to be guidelines, not a legal system! What I show you here has worked for me throughout the years. As long as the goals are met successfully, and the process is broken down in a manner that makes sense and moves along smoothly, any necessary departures from what is recommended here are completely fine.
Web Production: Process
| Design | Alpha | Beta | User-Testing | Cross-browser testing |
Design. Based on the information defined at the pre-production stage, the web production process begins with the design stage. Here, the user interface and all visual elements come to life.
The two main questions that should be asked, and responded in the affirmative, for any design elements destined for the web are:
- Is there strict adherence to the creative and brand guidelines set during the prior phases?
- Does the design support all functional goals set in our Strategy?
Of course, there are many other criteria to judge our design by, not the least of which is that the design should be tasteful and current. However, even if — for some strange creative reason — it is consciously decided that the design should be tasteless and aged, the two questions above must be replied to in the affirmative.
At this stage, most of the elements involved in a good design should have already been determined and accounted for in the pre-production phase. At this point, all that is needed is to arrange those elements to fulfill the functional goals established in your strategy.
In recent years, a large community of designers have agreed that, with the prevalence of mobile web-enabled devices that currently exist, it makes more sense to design for these devices first. From there, the design can expand to account for larger views, such as desktop browsers. This is why we’ve seen many desktop user interfaces in our day with strong tendencies towards much more simplistic design.
There is also much that can be said about designing towards sites that convert, which may go beyond the scope of this article. If there is only one helpful guideline I can suggest to you, is to keep one goal on the forefront of every design, even though there may be several items a user can interact with. What is the one item you most want users to interact with, to press on, or to fill in, during any particular stage of their experience?
By keeping one singular goal in mind, your designs will immediately embody a completely higher level of clarity, than if you focused on 15 different options at the same time and with the same level of emphasis. Users only focus on one thing at a time! Let them decide where to go; but through design, tell them what you, as a friendly guide, recommend they do.
Alpha site. After the design is squared away, a site will be coded and styled to begin seeing it take life from within a web browser. Many of the elements will not yet be functional, but the user interface design will at least be present at this point.
Beta site. After the issues in the Alpha Site are addressed, it’s time to apply those changes on the site, as well as complete any pending functionality goals that were left aside. After the Beta stage is complete, a new fully-functional site will be produced as a result, ready for final user testing.
User testing. The Beta site will then be presented to other users; in most cases, to people who haven’t been involved in the process up to this point. Their honest opinions of the user experience will be recorded, and any issues that come to surface will be addressed. This is a very important stage to gauge if our web experience is attractive and lends itself to the kind of interactions we’re seeking.
Cross-Browser testing. Once the site is ready to go live, a round of testing on numerous browsers and versions, devices, and operating systems begins. This ensures that users can experience our site correctly, regardless of which browser they use. Before the site goes live, issues observed through any of the browsers can be corrected.
Application Production: Process
| Wireframe/Protosite | Database building | UI | Design | Alpha | Beta | Testing |
Wireframes. For desktop, web, and mobile applications, a concise and natural layout of all user interface elements could be the deciding factor that makes your audience members use it successfully, or just walk away frustrated. One way to ensure your interface design is reasonable and logical is to draw up wireframes. These will be simple draft sketches of the layouts required to include all functional elements. No styling concerns of any sort should be a hindrance here, as all we need to focus on is space and distribution of elements.
Make sure to build enough wireframes for every state of the user experience, including panels, windows, and dialogs that may appear and disappear at certain times. Any elements that are not accounted for in the wireframe stage, are usually the ones which end up becoming a problem to shoehorn in later on.
A protosite is an extremely simplified, yet interactive (to a certain extent) version of what will become the fully fleshed-out application. This allows developers and decision-makers to interact with the application concept way before the hours and resources are poured into developing it.
Database building. In this stage, the databases needed for each required component are created and structured appropriately. This should be performed by a database specialist, as it will lay a crucial foundation for handling data later when the application is being tested, and of course, after it goes live.
Design. The user interface style is then produced, which will dictate the visual and interactive considerations necessary for the application functions. The design’s “look and feel” is not the only important aspect at this stage, but also how well it supports the desired functionality. In other words, the design must be informed by your brand, as well as by the important actions you desire your user to take.
Alpha. A pretty complete version of the application is then produced, although at this point many of the functions are left for a later stage. The purpose of the Alpha is to proceed to a stage of development in which the application can be interacted with to begin testing how well the user interface design supports the desired functionality. As user interface elements may not be associated with the database at this point, it should be evaluated from that standpoint (i.e.: don’t freak out if it doesn’t quite function!).
Beta. Once necessary changes are made to the Alpha stage, the developers proceed to ensure that all functionality is in place, and respond correctly to the user interface design. As this stage occurs right before the final testing phase, the Beta needs to be as close as possible to the final user-ready version.
Testing. Once the application reaches Beta stage, it is assumed that most of the issues have been ironed out, and the app is ready to go live. However, a testing phase provides one more safeguard for the application to be completely clear of any problems. Up until the Beta phase, it may be acceptable to test the application in a virtual/simulated environment. However, the testing phase is ideally performed on the actual platforms the user will interact with the application on.
Video Production: Process
| Script | Storyboard | Animatic | Shoot | Editing | Preview | Output |
Script. Based on the video concept, all dialog is laid out on a sheet, with visual descriptions associated to each segment. Every element displayed, including words spoken and concepts visually represented, are examined carefully to see that there is strict adherence to the desired message and the brand essence.
Storyboard. Once the script is formalized, you may want to produce a storyboard, which are merely sketches of each set up involved in the final production. If the shoot involved one or two camera angles and a single host, you may opt to skip the storyboard. Otherwise, if the production is much more complex, a storyboard could become an essential planning aid to avoid issues further on in the process.
Animatic. After the storyboards are produced, your editor might want to consider laying the frames out in a timeline, in sync with a music track and/or scratch track. This step helps evaluate the timing and sequencing of the final piece, before investing in shooting and editing.
Shoot. As the name implies, this is the phase in which cameras are brought out, and all talent involved does their part in the right setting, whether it be a studio, or an indoors/outdoors location. With current technology, footage will typically be stored onto some type of digital media device.
Editing. The footage from the shoot is then transferred (some people use the word “ingested,” which I personally hate) onto a larger media storage center, which an editing software can then access to begin selecting and laying out onto a timeline. The timing and selection process will be informed by the script, storyboard, and animatic, whichever of those phases are actually performed. Graphics are also produced and added in at this stage, as needed.
Preview. Once the footage, audio, and graphics make sense with regard to the script and original purpose of the video, a lower-resolution output is performed to be sent and evaluated by any team members involved.
Output. If no further revisions are needed, the video is then output into its final required format. In digital media, the final file format and compression type will depend on the device and environment in which it will be viewed by end users.
Graphics Production: Process
| Concept/Sketch | Scanning/Digitizing | Outlining | Coloring | Finishing | Output |
Concept/Sketch. Most of the greatest examples in graphic design begin with rough renditions using the most rudimentary of tools, such as pencil and paper… even paper napkins! One of my favorite techniques is to sketch as small as possible. This forces me to focus on form and composition, rather than on details that will come in later.
Scanning/Digitizing. Unless your piece is meant to have a very manual, traditional art look, at some point you will want to look into scanning and importing it into some type of image editing software. Once there, you can use standard tools for cleaning up and enhancing your visual idea.
Outlining. Once the digital scans have been imported, the main shapes can be converted to vector outlines for further editing. Even in the case of graphics comprised of solid objects, it helps to begin with a digital outline and then fill them in. The best outlines are a combination of software processes (to save time) and manual work (to ensure quality).
Coloring. Defining a color palette could make the difference between a design that has a sense of order, from one that feels all over the place and random. Choose 5 – 6 colors from which to begin, and then expand from there as needed. Remember that color proportions play a big part in the piece’s final look and feel; a good idea is to compose color palette cheat sheets with shapes of different colors and sizes, each one representing the proposed color proportion.
Finishing. Once the shapes, composition, and colors are defined, it’s time to add finishing touches, such as shadows, outlines, and other details that have purposefully been left for later phases. Other questions that could be asked at this point: Do shapes need to be refined? Does color need to be addressed one final time? Is there any photography involved that needs to be reviewed, or maybe secured rights for? At this phase, it is also common to test the graphic on actual screen output, such as desktop and mobile browsers, and check on how well it’s holding up.
: : :
This article complements my book, Digital BACON, in which I describe the five qualities of a successful digital effort, and the process to incorporate them. Check out more details about my book here: http://digitalbaconbook.com