DESIGN DOCUMENT

Carol Zuber-Mallison
ITSE 2402-Intermediate Web Programming
Final Project
Instructor Dorothy Harman

March 7, 2018

CLIENT

Me! ZM Graphics, Inc., is my 26-year-old freelance graphic arts business specializing in infographics for businesses and non-profits.

HISTORY

Twenty years ago, my agent physically walked my portfolio into the offices of potential clients and showed them a printed book of my work. No art director has time to sit and look at books anymore. They go to the internet. My website needs to be easy for find through search engines--plus it needs to display the best of my decades of work and also reflect my many areas of expertise.

I have had a personal site for a decade but it has (to use the scientific term) sucked. It’s never been responsive. Even worse, I have never finished it so 70 percent of the portfolio has consisted of blank pages “under construction”—a very bad message to potential clients. In my defense, it has been difficult to work on the website while fulfilling contracts and also completing the many hours required for my GIS degree. Not surprising, my business has slacked off in the last two years due to lack of attention. This class has been the perfect catalyst to help me focus on my website, marketing, and business growth.

ZM GRAPHICS MISSION STATEMENT*

I produce infographics but what I really sell my clients is “No Problems.” I strive to make my busy art directors lives easier by producing work that is on time, in budget, and of decent quality with no surprises and no problems.

GOALS OF THE SITE

  1. To serve as the major promotional tool for ZM Graphics, Inc.
  2. To reflect the mission statement by being highly organized and cleanly designed.
  3. To showcase a portfolio of samples.
  4. To communicate a wide-ranging skill set including journalism, GIS, and design.
  5. To be easy to update when I get super busy.

AUDIENCE

  1. DESIGNERS: Page designers and art directors looking for a freelance infographic artist. Challenge: This audience may run the gamut of computer abilities including:
    1. Sophisticated Fortune 500 art directors with large art departments needing crisis-deadline help. They will most likely be running the latest browser on large, high-resolution monitors while also using tablets in meetings.
    2. Non-profit groups needing reasonably priced graphic journalism.
    3. Individual authors (sometimes elderly) writing small historical books for college presses and using older/smaller platforms.
  2. CORPORATE COMMUNICATORS: PR/marketing managers looking for a graphic artist knowledgeable in their specific area of expertise such as oil & gas, business development, Southwestern U.S. history, or biomedical inventions. My portfolio needs to reflect knowledge in wide range of topics.
  3. STEM CLIENTS: Engineering, statistical, and academic types looking for a contractor knowledgeable in both graphics and GIS. Challenge: These clients will most likely be working on PCs.
  4. SECONDARY AUDIENCE: Students and others new to infographics who are exploring the latest in informational graphics and GIS.

CHALLENGES

  1. By its very nature, the site is wall-to-wall graphics. The design has to be very clean and quiet so it doesn't compete with the many graphics.
  2. Graphics have to be as small as possible for quick loading.
  3. Most of graphics have to be watermarked to try to deter art rustlers. Graphics inside the slideshow are somewhat protected but images appearing on project pages are easier to swipe and steal.

THE PLAN

In January, I set down some formal business goals that I hope to phase in before July 1.

  1. PHASE 1: FINISH ARCHIVING (Done)
    I have every piece of art I’ve done for 30 years (that’s more than 25,000 files!) but I had not done any archiving for at least six years due. I not only needed to clean and purge files but I needed to develop a master list of possible portfolio items.

  2. PHASE 2: BUILD WEBSITE (Done) This class has forced me to build the structure and key pages of my website. I know you’ve threatened death if we turn in an incomplete site but there is simply no way for me to complete the portfolio and project pages by May 7 due to the extensive number of graphics that I have to crop and watermark. Plus, this would make the site SO huge that I couldn’t ship it. I hope by completing four project pages that I’ve demonstrated my abilities for the purposes of this class.

  3. PHASE 3: INTERACTIVITY (Due by May 15) I have a huge project for National Audubon that I am using as incentive to learn:
    1. How to produce SVG files from Adobe Illustrator.
    2. How to add simple Javascript interactivity to a map.
    3. Or, failing No. 2, how to build GIS Storymap file.
    4. Completing this final project is just part of a very intense month of cramming!

  4. PHASE 4: COMPLETE “REAL” SITE (Deadline May 31) I have strategically attempted to build this site in a way that I can easily convert it from the ITSE 2402 rubric to my “real” ZM Graphics site by:
    1. Stripping the Design document out of the top navigation bar and converting “Extras” to “Links.”
    2. Refreshing my "LinkedIn" account and adding it to my bottom navigation.
    3. Stripping clocks off Site Map.
    4. Figuring out how to turn Form page into a real form and changing name to “Contact Me” page. Need to talk to my web host.
    5. Removing a few items from the Links page and adding others.
    6. Applying for basic site certificate. (Done.)
    7. Submiting to search engines and infographic sites
    8. And, hopefully, after years of procrastination: Populating the portfolio gallery and adding more project pages with graphic images!!

  5. PHASE 5: LAUNCH (Due by June 7) Launch new website and new ZM Graphics Facebook page with a Mail-Chimp postcard to my existing and former clients.

ORGANIZATIONAL STRUCTURE

  1. Home page that serves as gateway to all other pages, specifically:
    1. High visibility of my portfolio and easy way to thumb through it as a Javascript slideshow
    2. A column to highly my greatest projects, especially my books
    3. A "new" area to highlight my latest projects and easy coding to update it each month
    4. A brief list of my selling points
    5. A brief list of my ongoing clients
  2. About Me page with a downloadable resume.
  3. A Contact Me page. I hope to get the form to actually work but need to discuss this with my hosting service.
  4. A Site Map.
  5. A Links page—mostly for educational purposes.
  6. Specific project pages that will link off home page. Most of these are my large or news-worthy book projects.
  7. In future, I may add additional slideshows to highlight subject-matter areas but No. 1 goal is to get a finished website that I can promote.

GRAPHICS

It should be obvious but just to clarify, all the graphics on the website were created by me. The only exceptions are the book covers and the many trademark icons of Smithsonian, clients, and other companies.

DESIGN

Site map plan

WORKS CITED

Unite Gallery. JQuery for portfolio gallery. www.unitegallery.net/index.php Accessed 07 May 2017.

Learn Code Academy. JQuery tutorials. www.youtube.com/watch?v=Cc3K2jDdKTo

Geeks for Geeks. Form validation using HTML and Javascript. www.geeksforgeeks.org/form-validation-using-html-javascript/

W3 Schools. Countdown clock. w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Taylor, Matthew James. The ‘Holy Grail’ 3 column Liquid Layout. www.matthewjamestaylor.com/blog/perfect-3-column.htm


*What do you make and what do you actually sell? There is a big difference and many businesses fail to realize the difference. The little book E Myth Revisited explains all.