Publication Design


Online Magazine

Scenario: You are a graphic designer in an art department for a publishing company. The organization would like to create a new responsive online publication that targets a specific audience to be delivered for both desktop and mobile applications.

You will need to determine a specific topic, subject or industry. Fill out the questionaire.
When picking a subject, keep in mind practicality for your portfolio.

Student Examples: 1 | 2 | 3 | 4

Presentation : Student Example & Template Download


The following information should be included for the "online" publication:

  • Nameplate
  • Expanded Navigation System (Hamburger) for main categories (minimum of five)
  • Feature Article
  • Sub Articles / Teasers
  • Photographs / Illustrations for articles
  • Advertisement(s)
  • Social Media Links / Icons
  • Comments Area (mock up)
  • Publication Components
    (Nameplate, Headlines, Deck, Bylines, Subheads, Running Head, Body text, Pull quotes, Photographic Captions, Jumpline(s), etc.)


Design Process

Develop the marketing strategy and design brief.
Think critically and problem solve.

  1. Define the project's objectives.
  2. Define the target audience.
  3. Identify the competition and its selling points.
  4. Define the client's unique selling proposition.
  5. Pull out specific layout tips that you use as reference to apply in your design.
  6. Collect screenshots of web pages for your mood boards.
  7. Collect a list of URLs of well designed online magazine sites.
  8. Develop creative brief including steps 1 - 4.

Obtain Step 1: Research sign-off from your process instructor.


  1. Brainstorm and develop concepts, layouts and technical solutions.
  2. Assemble a mood board to measure the client and art director's response to visual styles.

    Include the following...
    • images / techniques
    • color palette
    • typography choices
    • industry examples
  3. Generate a mood board using gomoodboard.
  4. Create a simple HTML document with links to your mood board and place on the server for review.
  5. Obtain feedback from your art director.

Obtain Step 2: Mood Boards sign-off from your process instructor.

Develop concepts

  1. Develop the site map.
  2. Develop quick layouts in thumbnails and wireframes.
  3. Verify that your work meets thumbnail criteria:
    • Generate as many thumbnail sketches necessary to...
      communicate a minimum of 5 different successful concepts / main ideas
    • shows composition variations for each concept
    • are fast and un-detailed
    • are drawn in proportion to the dimensions of the finished piece
    • conveys composition, sizing and position
    • show general shapes of graphic elements (images, text, etc.)
    • display readable headline type
  4. Submit your 5 most promising concepts to the art director for review.
  5. Determine the 3 best concepts to develop.

Obtain Step 3: Design (Thumbnails / Concepts) sign-off from your process instructor.

Submit rough / mockup layouts to the art director.

  1. Develop three roughs from the thumbnails selected by your art director that meet the following criteria:
    • Indicate type choice (typeface, case, type style, etc)
    • Indicate usage of color
    • Are computer generated
    • Addresses and relates to the target audience
  2. After the art director approves your roughs, make any changes indicated.
  3. Present your designs by delivering a digital comprehensive mockup for the online publication...
    • Build the mockup to accurate pixel dimensions for mobile and desktop applications.
    • Include the portrait and landscape view for the phone.
    • Develop and show the interactivity of the navigation system.
    • For pages that scroll, you may layout the page to its full vertical height.
    • Present the final digital comprehensive designs as a PDF.
  4. The art director will then sign off and approve the design to be taken to final stage.

Obtain Step 4: Roughs sign-off from your process instructor.

Meet with the production manager.

  1. Determine the skills and steps needed to produce your design (digital strategy).
  2. Discuss your digital strategy with the production manager.
  3. Choose the appropriate software to create appropriate optimized web graphics.
  4. Ask the production manager about any issues you are unsure of.
  5. Create a typographic style guide for the publication using HTML & CSS.
    (Nameplate, Headlines, Deck, Bylines, Subheads, Running Head, Body text, Pull quotes, Photographic Captions, Jumpline(s), etc.)
  6. Create job folder(s) as instructed by your production manager.
  7. When it is clear that you understand how to produce your design correctly and efficiently, the production manager will sign off/approve your strategy.

Obtain Step 5: Technology Strategy sign-off from your technology instructor.

Produce the final design.

  1. Create all native, html and css files.
  2. Assemble text and images using the appropriate software.
  3. Use descriptively named layers to isolate graphic elements in order to manipulate / change individual parts of the design.
  4. Build the pages necessary to demonstrate the publication's essential structures...
    • Header, including the Nameplate
    • Navigation controls
    • Feature articles
    • Typographic elements-headlines, body text, bylines, pull quotes, etc.
    • Secondary articles, ads, galleries, etc.
    • Make simple "dummy" pages for the less important nav links (about, contact, etc.)
  5. Store all image files in an image folder within the job folder to aid organization and ensure proper links.
  6. Check design in multiple browsers and computer operating systems.
  7. Use a grid framework and upload HTML & CSS files to SFCCDESIGN.COM for review.
  8. Remove all un-necessary files.
  9. Copy all final documents to the server folder(s) specified by the client and production manager.
  10. Present your final design to your art director for sign-off/approval.
Obtain Step 6: Final Design sign-off from your process instructor.

Instructor / Class critique.

  1. Present the final design using a web browser.
  2. Take notes of areas for improvement.
  3. Make necessary revisions.

Obtain Step 7: Design revisions sign off from your process instructor.

Complete file preparation with your production manager.

  1. Deliver a root folder for your site containing the HTML, CSS and any assets.
  2. Show a back up filing system.
  3. Verify:
    • Correct raster file sampling and preparation.
    • Correct vector file preparation.
  4. Place final web site files on the class server.

Obtain Step 8: Final Deliverable sign-off from your technology instructor.




  1. TBD


  1. TBD


top of page