1. Off and Online Graphic Design

a. Layout: Basic methodologies of Print and Online graphic design

Gird Systems: is a layout technique for designing print or RESPONSIVE online marketing material, i.e. newsprint, websites, off and online advertising, marketing collateral and magazine* layout. There are many free and low cost Grid System Templates online, many that are category specific to websites, landing pages, ezines…etc.

►Watch: Leroy Ford, Magazine Designer:

►Read: Ezine Grid Templates: http://www.creativebloq.com/career/11-free-newsletter-templates-71510393

Single Column: generally used for text documents, and books (print and ebooks). Least amount of design flexibility with all text and images confined to a single column.

Multi-column Grid: while single-column grids work well for simple documents, multi-column grids provide flexible formats for publications that have a complex hierarchy, or that integrate text and imagery. The more columns you create, the more flexible your grid becomes.

Modular Grid: modular grids have consistent horizontal divisions in addition to vertical divisions. These modules govern the placement and cropping of pictures as well as text.

Gerstner’s Compound Grid: Karl Gerstner’s compound grid was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 columns and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration.

Golden Ratio/Rectangle:  The length of the side of one square divided by that of the next smaller square is the golden ratio. A Fibonacci spiral which approximates the golden spiral, using Fibonacci sequence square sizes up to 34. The theory is that areas of negative space and visual interested should fit within the spiral to create Page Harmony.

*Print books and magazines should be designed as spreads (facing pages). The two-page spread, rather than the individual page, is the visual space in which to design. Online ebooks and ezines should be designed as single pages (one page at a time) for optimal UIs on mobile devices.

►Watch: Layout Grid Rules, Stuff Designers Do

Eye Tracking—is a design technique to control the viewers focus across a webpage, printed material, or construct (in-store merchandising; trade show booths). It is the designer’s job to control what the viewer sees first, then next and next. The CTA should be the LAST thing the viewer sees on any marketing material.

• Visual Command—a design technique to control eye-tracking using design principles of dominance, weight, clarity and readability to guide the eye across a space in a particular order. Effective visual command has only ONE dominant image (whether imagery or headline or CTA).

Layering—layer imagery (pics, music, video/VO, type) to add dimension, and therefore impact to 2D and flat screens images.

►Watch: Layering in Photoshop

2. Visual and Audio Content

Using Today’s Technology to Create Professional Marketing Materials at low to no cost.

a. Rip photography/video/illustration/music: create professional quality visual and audio content using pictures and gif animations captured from Google Images, videos from YouTube, cameras and other devices, and additional sources at minimal to no cost.

• Basic copyright laws and restrictions— to be in compliance with copyright laws, when capturing imagery, use USAGES FILTERS, usually provided on the sites, and choose “Copyright free” material for your searches. It will limit your capture choices substantially, but the imagery is legal to use for reproduction. Also review patents. Reproduce any content that belongs to someone else without permission and risk a lawsuit and/or fine. Google: “copyright and trademark restrictions,” as these laws are changing all the time.

►Read: The Great Patent Racehttp://jcafesin.blogspot.com/2012/07/new-patent-office-in-valley.html

Google Images—simply the best for still images (lift high resolution images only). Also Google for gif animations (still images put together to look like a video). Some sites don’t accept video but will play gifs.

Vimeo—one of many low cost downloadable video clips.

YouTube—use free, online video converters to rip videos from YouTube.

►App (online): YouTube Video Converterhttp://convert2mp3.net/en/index.php

LastFM—one of many free downloadable music soundtracks (FMA is another)

b. Design in motion:

Animated/rotating gifs: combining several still images into a single GIF file. Animated GIF files can be highly compressed and tend to be quite a bit smaller that other animation files (such as Java applets). Additionally GIF animation is supported by nearly all Web browsers. (All the featured images on each of the READING pages for this course are GIF ANIMATIONS.) 

►App: Video and Image Converter: (converts videos to gif animation, including many other conversion tools): http://image.online-convert.com/convert-to-gif

►App: WordPress rotating images widget: http://wordpress.org/plugins/dk-new-medias-image-rotator-widget/

Flash animation—an animated film which is created by Adobe Flash or similar animation software and often distributed in the .swf file format. Flash is often used for animating low cost Flash television series, animated television commercials, and online film shorts. Flash is slowly being replaced by MP4s (standard video format), with many easy-to-use mobile editing apps now available.

c. Tools, techniques and programs to create visual content: for copyright-free imagery use hand drawing, to pics and videos from your cellphone, to lifting images and videos from Google and YouTube, and then add drawing, layering and morphing techniques with free apps to create a unique work.

• Storyboard pages and sitemaps (thumbnails)—start the design process offline, and off the computer when conceptualizing. DRAW in small scale FIRST. Layout page for page, and where the links go to in a sitemap storyboard. 

♦ Photo Editing Software (a few among many):

• Adobe Photoshop—expensive and difficult to master, but HUGE range of tools and functionality.

Gimp—FREE Photoshop analog, but definitely NOT Photoshop. (You get what you pay for!)

• Autodesk SketchBook Pro—easy to use, but it’s not Photoshop.

• Corel Painter Essentials— inexpensive and easier to use, but not as much functionality.

♦ Video Editing Software (a few among many):

• Adobe Premiere Pro

• Final Cut Pro (Apple only)

• Corel Video Studio—inexpensive and much simplier to use, but not as much functionality.

• Microsoft Live Movie Maker (Windows only)—free, and simple to use, but very limited functionality.

Camtasia great presentation software, but can edit video as well.

f. File types: Vector vs Raster:

• Vector— an algorithmic (mathematical) construct determining the position of one point in space relative to another. Vector graphics are produced in vector programs such as Adobe Illustrator. Vector files are used for logos, icons, line art, solid color graphics and illustration. Vector works particularly well with reduction and enlargement (as logos need to be flexible in size). As a numerical construct, only the distance between points changes, not the line quality.

• Raster— a rectangular pattern of parallel scanning lines followed by the electron beam, as on a TV or computer monitor. Raster is PIXEL resolution, and therefore particularly suited to reproduce photography, realistic or dimensional illustrations, and imagery with soft, graduated blends.

g. File extensions: the format in which a computer file is produced. 

►Read: these File Formats Lists for a thorough review of each extension’s function: http://en.wikipedia.org/wiki/List_of_file_formats; http://www.fileinfo.com/filetypes/common; http://www.youneeditall.com/web-design-and-development/file-extensions.html

• jpg—for photographs, illustrations, and other graphic applications with an opaque background.

• pnglogos, icons and other images where a transparent background is preferred.

• gif—image files that support both static and animated images, as in a gif animation.

• php—online forms (stores to database/data warehouse to analyze info)

• java—play online games, video, audio, chat with people around the world, banking apps, shopping carts…etc. (heavy UI components)

• wiki—dictionary/encyclopedia

3. Online Tech Basics

a. URL (Uniform Resource Locator): a webpage address, aka DOMAIN NAME. There are 3 levels to domain names:

• 3rd-Level Domainsthe host server: the server (web host) that stores the code and components of the online pages of your website, landing pages, eblasts, microsites…etc. it serves up to the internet.

• 2nd-Level Domains—your unique identifier: your company name, product or service names. Shorter, easy to spell names and words are best, but rare to find available with a .com TLD, as most have been taken already. If your startups name has been taken, then consider using a phrase. Example: the company name Tech Giant, which isn’t available anymore, becomes TechGiantMegaStore, or TechGiantOutlet (‘outlet’ = inexpensive). In this way you keep your company name, but also put the greatest differentiator about your company in the URL, which not only tells viewers what you do, but will help increase your SEO ranking.

• Top-Level Domains (TLD)make sure you can get a .com extension for your URL. Global and local business is instantly recognizable using .com at the end of your company (or product/service) URLs. Change your 2nd-Level domain in order to get a .com for your business URLs. In addition to .com, you may want to buy other extensions using the same 2nd-Level domain. TurnkeyMarketing.com, TurnkeyMarketing.org, and TurnkeyMarketing.edu all give viewer different messaging, a different feeling. We all think of .org as non-profit, or charity, and .edu as education. Your business does not need to be a school to want to look like one. Your company does not need to BE a charity, but sometimes it sure helps to look like one.

• .com—for global, commercial business

• .org—non-profits, charities, most schools, recognized religions

• .net—another form of .com, but less recognized

• .edu—for education related webpages and sites.

• .gov—for most sectors of local and national government

►Watch: Domain Names Explained:

b. Web Hosting: a service that stores your website on servers, allowing access by internet users. Web hosts also provide functionality on servers for use by clients, typically in a data center. Complex sites call for a more comprehensive packages that provides database support and analytics.

►Read: Best Webhosting Servicses of 2016: http://www.pcmag.com/article2/0,2817,2424725,00.asp

Reseller web hosting: reseller purchases the host’s services wholesale and then sells them to customers at retail.

►Watch: Name Servers Explained

• CDN (content delivery/distribution network): a large distributed system of servers deployed in multiple data centers across the internet to serve content to end-users with high availability and high performance. Used for large downloadable objects (graphics), applications and streaming media/videos, i.e. Amazon Web Services (AWS)

• CMS (content management system): build websites and most online material with CMS platforms so content, whether text or imagery, is easy to change by you, and others you hire to work on your online content (designers/devleopers). Wix, Joomla!, Drupal, WordPress (these course READING pages are build on the WordPress CMS platform.) Website development platforms: Bluehost; JustHost

• Explore WordPress*: Exploring WordPress.org vs. WordPress.com

* FREE Wordpress Business Website tutorial: https://yoursiteon.wordpress.com/

c. Creating with code: creating websites and other online marketing materials from scratch using HTML5/CSS, JavaScript and others.

HTML (Hypertext Markup Language)—the main markup language for creating web pages and other information that can be displayed in a web browser (online). HTML5 for mobile devices.

CSS (Cascading Style Sheet)—a markup language for describing the look (color, text font, size and style…etc.), used as a flexible template for styling multiple web pages written in HTML or XHTML.

►Learn HTML/CSS (this guy is great!) Quentin Watt Tutorials- HTML5 and CSS3 Beginners Tutorial 1

JavaScript— code to write functions that are embedded in or included from HTML pages for interactive content like games, playing audio and video, or allow users to post status updates without leaving the page.

PHP—a general-purpose scripting language for web development and can be embedded into HTML, used for comment boxes, polls, quizzes…etc.

Wiki is a web application which allows people to add, modify, or delete content in a collaborative environment like Wikipedia.

d. Cross browser testing: a type of compatibility testing designed to ensure that a website or application behaves correctly across different browsers, operating systems and devices. 

►Apps: Page speed load testers— http://crossbrowsertesting.com/; http://www.browserstack.com/

• DNS—part of the foundation of how we communicate on the internet:

►Watch: DNS Explained:

e. Load time: the time it takes for a website or online content to appear on the screen of your device. Webpages that load faster have better SEO. Pages that take more than 2 seconds to load lose customers!

• Bounce rate—refers to the people who viewed a page of your site or blog, and then leave. Also refers to users who view a page and then quit that page (i.e. bounce) before the page even loads.

• Slow servers or shared hosting kills load time. Web hosts like WordPress are generally shared, but WB engine is not shared. When you’re rolling out your startup it generally doesn’t matter using (the less expensive) shared hosting model. However, when you scale up, and your sites and cloud usage grows, you’ll typically need a private network of servers.

• OPTIMIZE images to decrease load time—reducing file sizes speeds up load time, but it also compromises quality. Keep logos at small file sizes because they must be used on all marketing material, in addition to imagery. Video are usually large file sizes and take more time to load than gif animation. Convert video to gif animation when possible. Reduce images to size they’ll appear before putting them into a layout (do not reduce then in the layout program). Crop out white space and other non-essentials in the imagery to reduce size.

►Watch How To Optimize Images

• Pop-ups (ads, sign-up for site or newsletter) increase load time. Avoid them!

►Apps: Page speed load testersGoogle: Google ranks quicker loading pages higher. Yahoo! Yslow; WebPageTest

4. Off and Online Reproduction

a. Resolution: Choose the correct resolution for effective reproduction of your marketing tools and material.

a. Dots per Inch (dpi) vs Pixel per Inch (ppi): Choose the correct line screen resolution for effective reproduction, in print, on products, and online.

Continuos Tone—Photography, painting, graduated-tone illustration generally reproduce as jpeg (solid background), png (transparent background), gif, tiff, bitmap

Dithered Tone—Dithered tone methods (like traditional 4-color printing) deliver the appearance of continuous tone by placing individual dots of color close together to visually mix colors. Also known as amplitude modulation (little circles/pixels), fixed pattern of dots vary in size (print) or intensity (digital) in order to create the illusion of continuous tone.

• Pixel (on digital screens)—A numeric expression of a square field of color. Pixels have no specific dimension. Images are pixels packed together without seams in an ordered grid. Viewing distance determines appearance of pixels in an image. Images of 100 ppi may look pixelated when viewed from less than a foot, but at 20 feet individual pixels can’t be seen. Cellphones have a very high ppi, where large screen TV’s don’t need it. More pixels per inch will generally look better, but in practice it is hard to tell the difference between 320 ppi and 400 ppi because 320 pixels per inch is close to the resolution threshold of most paper. A good rule of thumb for desktop inkjet printers is to divide the output resolution by 3 or 4 (720/3=240 ppi. 1440/4=360 ppi). All online imagery, pics or videos, is delivered at 72ppi.

►Watch: How a Pixel Gets its Color:

b. CMYK (print reproduction): Traditional offset lithography uses dithered tone, generally referred to as a line screen, a regular pattern of cyan (C), magenta (M), yellow (Y) and black (K) dots arranged in clusters called rosettes where the distance between the centers of the dots is fixed and the size of individual dots varies in order to change the overall balance of color. Line screen resolution is defined by the number of lines per inch that the screen can reproduce. A 150 line screen will reproduce 150 lines per square inch. 150 to 300 dpi (dots per inch) line screen reproduces clean, clear imagery (assuming the original pic started out clean and clear), depending on the paper it’s printed on. Paper quality will determine the dpi needed for quality reproduction in most cases.

►Watch: Four Color Printing Explained

• Web press: for high volume printing—newspapers, magazines, millions of direct mail packages.

• Sheet Fed press: for high quality, specialty printing (usually small runs)— sales kits, event invitations, card-stock dye-cutting, 6-color printing and beyond.

• Digital press: for standard and high quality printing (usually small to medium size runs) everything from stationary to sales kits, banners, posters, most printing can be produced digital today, and at significant cost savings to Sheet Fed or Web press.

c. Solid Color: generally used for print, display, packaging—either one of CMYK, or picked from a palette of PMS (Pantone Matching Systems) colors. Add solid color to enhance 4/c process, or in one or two color applications, or where large areas of a single color or opaque application of color is required.

d. Reproducing Imagery: to reproduce digital images, originally image should be a large file size, i.e. 1000 ppi or more in width.

• A 15 meg file will reproduce to an 8.5” x 11” print of an illustration or photo in continuous tone.

• 300 pixels per inch (ppi) are required for best print reproduction with a 150 line screen (dpi). A pixel density of 1.6 times the line screen; for a 150 line screen that would be 240 pixels per inch. To reproduce computer or digital images to print, resolution on the computer should be set to a minimum of 200 ppi, preferrably 300 ppi to achieve 150 dpi resolution in print, the minimum dpi used in magazines and most printed material.

• Interpolate—To estimate a value of (a function or series) between two known values. Enlarging small images requires software to interpolate from the existing pixels to create new pixels at higher density to avoid pixelation or banding for the enlarged size. Generally an image created at a pixel count near 4,000 x 5,000 pixels can be interpolated successfully to almost any size and still look good

• File size, pixel density, and load time—the larger the files on the online page, the longer the load time.