1 / 26

Wireframes DDB Intranet “Ketchup” – Phase 1

Wireframes DDB Intranet “Ketchup” – Phase 1. Version 1.0 | Aug. 7, 2006.

quinn-tran
Download Presentation

Wireframes DDB Intranet “Ketchup” – Phase 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WireframesDDB Intranet “Ketchup” – Phase 1 Version 1.0 | Aug. 7, 2006 Any layout presented in this document is intended to indicate the relative importance, organization and relationship of content, and does not represent a design concept. Likewise, any copy presented indicates the key message or information to be communicated, but does not represent tone or style.

  2. Site Map

  3. Past Video Podcasts • June 2006 – [Topic] • March 2006 – [Topic] • December 2005 • September 2005 • Any ideas or feedback for Frank? Send him an email New Blog Entries • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] Interactive Tool Copy promoting an interactive tool. Homepage home00 2 • Functional Description • This is the homepage of the DDB “Ketchup” employee intranet. In a glance, the user has access to all the key elements as put forward in the Brand Foundations document. Furthermore, because of weekly content initiatives and a blog/forum element, this employee “portal” will be vibrant, reflecting new content created BY them and FOR them. • Global Navigation • Assigns a global element to all weekly update topic areas (News, Creative, People and Tips) • Blog and Links are on same hierarchy and readily accessible • Creative/branding space reserved in header to allow for company branding statements, fun creative statements…new message can refresh on each re-load of page • Podcast element. Even though this may be a quarterly feature, the internal discussion was to give it prominence on the homepage. [Note: doesn’t start automatically; requires user to start video.]Includes image with accompanying text, the last 4 podcasts in archive format, plus a link to Frank's email for feedback, comments, ideas and thoughts. • Teaser text of the current monthly feedback with a link to that content page. • Featured topics will be 2 of the weekly updates to the site – same teaser text that is sent in the email blast. A thumbnail image (if applicable) will be displayed, otherwise it will be plain text with a link. • New Blog entries: dynamically calls up the 5 most recent blog entries – much like the Blog landing page presents 5 entries (see ID BL00)This area has to be flexible in case some of the titles are long…nothing can be below this list. • Blocks that can hold images and/or text to reflect the main navigation elements. NOTE: Can hold tools and reference materials as stipulated for Phase 2. • Footer: elements TBD 1 Home 3 [Frank Palmer Video Podcast] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed nonummy nibh euismod tincidunt laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euis magna aliquam erat volutpat. Watch video podcast now. Image for current podcast 4 5 6 [Featured Topic] [Title of Monthly Editorial] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… [Teaser text of one of the weekly articles]Lorem ipsum dolor sit amet, consect etuer in adipis cing elit, sed diam non nonummy nibh eu Read more… [Featured Topic] [Teaser text of one of the weekly articles]Lorem ipsum dolor sit amet, consect etuer in adipis cing elit, sed diam non nonummy nibh eu Read more… flexible Cutting Creative 7 People News [Something about a featured or new employee] > More about [employee] 8

  4. Breaking News Breaking News Landing Page BN00 • Functional Description • Space for imagery/creative to establish the section user is in (just a suggestion…may not want overly creative…though the news pages are quite text-heavy) • A sub-navigation area – for now it’s quite slim, but there could be the possibility of breaking news up categorically. • Main content element on the page is the monthly editorial teaser text. • Top 2 stories are highlighted. • “Cross-selling” area; every landing page has an area to highlight other areas of the site (need some content and linking strategy to find the right “cross sell”) • Landing pages will also have a prominent, constant enticement to get the user to go to the blog/forum area and interact with the content on the site and other employees. Breaking News 1 2 Monthly Editorial News Archives [Title of Monthly Editorial] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… 3 5 Related: [Name of Topic] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh In the News… [News Headline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… [News Headline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… 4 [Name of Topic] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 6 Have something to say? [Text that entices user to speak back or comment on things on the site. Promote the forum/blog on the site] > Write a blog entry about this > See recent blog entries.

  5. Breaking News Archived Editorials • [Title of article goes here - date] • [Title of article goes here - date] • [Title of article goes here - date] • [Title of article goes here - date] • [Title of article goes here - date] • [Title of article goes here - date] • [Title of article goes here - date] • [Title of article goes here - date] Breaking News – Monthly Editorial BN01 • Functional Description • Editorial content is presented with headline and date stamp. TBD if there is a bi-line (who is writing these editorials?)Has the ability to have internal links within the body text. • Ability to send the article to a friend (TBD: internal email only?) and to print the article. • A list of archived editorials is presented in the right column. TBD how many there will be available. If the number is high, we can pick a number and then after that have a link that says “See more editorials” which will take user to a page much like the News Archive Page (ID BR02) Breaking News 3 Monthly Editorial News Archives [Title of monthly Editorial] April 18, 2006 2 Email This | Print This 1 • Lorem ipsum dolor sit amet, link to external source site as required consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit • Vulputate velit esse molestie consequat • Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim • Qui blandit praesent luptatum zzril delenit augue • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • > See more news in theNews Archive flexible

  6. Breaking News 2006  Choose timeframe: 1 2 3 > Next page: Breaking News – News Archive BN02 • Functional Description • Sub-navigation changes to reflect that user is on the Archive page. • Paginated list of articles (number per page to be determined) includes date stamp, title and first line of article • NICE TO HAVE: in the event that there is a large amount of archived articles, it might be good to have some sort of dated sorting method for a user to quickly go to a certain timeframe of articles. • Pagination element shows user how many pages of archives (again, need to determine how many show up per page and reflect that in the pagination) Breaking News News Archives Monthly Editorial News Archives 3 1 2 April 18, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 11, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 2, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 24, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 12, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… February 16, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… January 31, 2006 | Title of editorial/article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… 4

  7. Breaking News New Blog Entries • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] Breaking News – Article Page BN03 • Functional Description • Article content is presented with headline and date stamp. TBD if there is a bi-line.Has the ability to have internal links within the body text. • Ability to send the article to a friend (TBD: internal email only?) and to print the article. • A list of recent blog entries fills the right side of the page. Again, this is to get the user to participate in the site content and discussion...when user sees blog entries next to a news article, it may inspire him/her to comment on the article in question. Breaking News 3 Monthly Editorial News Archives [Title of article] April 18, 2006 2 Email This | Print This 1 • Lorem ipsum dolor sit amet, link to external source site as required consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit • Vulputate velit esse molestie consequat • Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim • Qui blandit praesent luptatum zzril delenit augue • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • > See more news in theNews Archive flexible

  8. Cutting Creative Cutting Creative Landing Page CC00 • Functional Description • Space for imagery/creative to establish the section user is in • A sub-navigation area – TBD but it seems logical that there may be several types of categories within Cutting Creative (logos, client work etc). • Main content will be the current week’s article. Since it’s in the creative section, it most likely will have imagery attached to it. • Two secondary (archived) creative items are presented with smaller imagery. • “Cross-selling” area; every landing page has an area to highlight other areas of the site (need some content and linking strategy to find the right “cross sell”) • Landing pages will also have a prominent, constant enticement to get the user to go to the blog/forum area and interact with the content on the site and other employees. Cutting Creative 1 2 Category 1 Category 2 Category 3 Creative Archives [Main feature] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… 3 Cutting Edge… [Name of Topic] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 5 Related… [Topic/title] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… [Topic/title] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… 4 [Name of Topic] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 6 Have something to say? [Text that entices user to speak back or comment on things on the site. Promote the forum/blog on the site] > Write a blog entry about this > See recent blog entries.

  9. Cutting Creative 2006  Choose timeframe: 1 2 3 > Next page: Cutting Creative– Archive CC01 • Functional Description • Sub-navigation changes to reflect that user is on the Archive page. • Paginated list of articles (number per page to be determined) includes date stamp, title and first line of article, Since this is the creative section, there is the opportunity to use thumbnail graphics in the archive list…this will visually help the user find the creative/article he/she is looking for. • NICE TO HAVE: in the event that there is a large amount of archived articles, it might be good to have some sort of dated sorting method for a user to quickly go to a certain timeframe of articles. In future, it may also be a way to sort categorically -- especially in a creative section where you want to see the archives of logo-related stories only, for example. • Pagination element shows user how many pages of archives (again, need to determine how many show up per page and reflect that in the pagination) Cutting Creative Creative Archives Category 1 Category 2 Category 3 Creative Archives 3 2 April 18, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 11, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 2, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 24, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 12, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… February 16, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… January 31, 2006 | Title of creative article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… 1 4

  10. Cutting Creative New Blog Entries • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] Cutting Creative– Article Page CC02 • Functional Description • Content is presented with headline and date stamp. TBD if there is a bi-line.Has the ability to have internal links within the body text.Has the ability to have multiple pictures/media. • Ability to send the article to a friend (TBD: internal email only?) and to print the article. • A list of recent blog entries fills the right side of the page. Again, this is to get the user to participate in the site content and discussion...when user sees blog entries next to a news article, it may inspire him/her to comment on the article in question. Cutting Creative 3 Category 1 Category 2 Category 3 Creative Archives [Title of creative article] April 18, 2006 2 Email This | Print This 1 Lorem ipsum dolor sit amet, link to external source site as required consectetuer adipiscing elit, sed af diam nonummy nibh euismo urbam incidunt ut laoreet dolore magna aliquam erat volutpat venit doddle. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod flexible • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure • Vulputate velit esse molesti • Vel illum dolore eu feugiat nulla • accumsan et iusto odio dignissim • Qui blandit praesent luptatum zz • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • > See more news in theNews Archive

  11. People News People News Landing Page PN00 • Functional Description • Space for imagery/creative to establish the section user is in • A sub-navigation area – TBD but it seems logical that there may be several types of categories – new employees, employee awards etc. • Main content will be the current week’s article/person feature. It most likely will have imagery attached to it. • Two secondary people/employee-oriented items are presented with smaller imagery. • “Cross-selling” area; every landing page has an area to highlight other areas of the site (need some content and linking strategy to find the right “cross sell”) • Landing pages will also have a prominent, constant enticement to get the user to go to the blog/forum area and interact with the content on the site and other employees. People News 1 2 Category 1 Category 2 Category 3 People Archives [Main feature] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… 3 5 Colleagues in the news… [Name of Topic] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh Related… [Topic/title] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… [Topic/title] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… 4 [Name of Topic] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 6 Have something to say? [Text that entices user to speak back or comment on things on the site. Promote the forum/blog on the site] > Write a blog entry about this > See recent blog entries.

  12. People News 2006  Choose timeframe: 1 2 3 > Next page: People News– Archive PN01 • Functional Description • Sub-navigation changes to reflect that user is on the Archive page. • Paginated list of articles (number per page to be determined) includes date stamp, title and first line of article. • NICE TO HAVE: in the event that there is a large amount of archived articles, it might be good to have some sort of dated sorting method for a user to quickly go to a certain timeframe of articles. • Pagination element shows user how many pages of archives (again, need to determine how many show up per page and reflect that in the pagination) People News People News Archives Category 1 Category 2 Category 3 People Archives 3 2 April 18, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 11, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 2, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 24, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 12, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… February 16, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… January 31, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… 1 4

  13. People News New Blog Entries • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] People News– Article Page PN02 • Functional Description • Content is presented with headline and date stamp. TBD if there is a bi-line.Has the ability to have internal links within the body text.Has the ability to have multiple pictures/media. • Ability to send the article to a friend (TBD: internal email only?) and to print the article. • A list of recent blog entries fills the right side of the page. Again, this is to get the user to participate in the site content and discussion...when user sees blog entries next to a news article, it may inspire him/her to comment on the article in question. People News 3 Category 1 Category 2 Category 3 People Archives [Title of article] April 18, 2006 2 Email This | Print This 1 Lorem ipsum dolor sit amet, link to external source site as required consectetuer adipiscing elit, sed af diam nonummy nibh euismo urbam incidunt ut laoreet dolore magna aliquam erat volutpat venit doddle. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod flexible Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. > See more news in theNews Archive

  14. Tips of the Trade Some Tool/Tip [Copy promoting a tool or tip.] Lorem ipsumad urbam venit. Some Tool/Tip [Copy promoting a tool or tip.] Lorem ipsumad urbam venit. Tips of the Trade Landing Page TT00 • Functional Description • Space for imagery/creative to establish the section user is in • A sub-navigation area – TBD but it seems logical that there may be several types of categories – marketing tips, photoshop tips, etc. • Main content will be the current week’s tip or tool. It could have imagery associated with it depending on the tip. • Hot Tips is an area where the top 5 tips are available to the user in a quick drop down menu. (Could be determined by visitor numbers or a site survey). It also has a quick link to the current tip/tool. • Two secondary, archived tips are presented. • “Cross-selling” area; every landing page has an area to highlight other areas of the site (need some content and linking strategy to find the right “cross sell”) • Landing pages will also have a prominent, constant enticement to get the user to go to the blog/forum area and interact with the content on the site and other employees. Tips of the Trade 1 2 Category 1 Category 2 Category 3 Tips of the Trade Archives [Main feature] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… 4 Hot Tips [Copy promoting the top five tips/tools offered on the site.] > See this week’s tip 3 Top 5 tips 6 Related… [Topic/title] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… [Topic/title] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Read more… 5 7 Have something to say? [Text that entices user to speak back or comment on things on the site. Promote the forum/blog on the site] > Write a blog entry about this > See recent blog entries.

  15. Tips of the Trade 2006  Choose timeframe: 1 2 3 > Next page: Tips of the Trade– Archive TT01 • Functional Description • Sub-navigation changes to reflect that user is on the Archive page. • Paginated list of articles (number per page to be determined) includes date stamp, title and first line of article. • NICE TO HAVE: in the event that there is a large amount of archived articles, it might be good to have some sort of dated sorting method for a user to quickly go to a certain timeframe of articles. • Pagination element shows user how many pages of archives (again, need to determine how many show up per page and reflect that in the pagination) Tips of the Trade Tips of the Trade Archives Category 1 Category 2 Category 3 Tips of the Trade Archives 3 2 April 18, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 11, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… April 2, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 24, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… March 12, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… February 16, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… January 31, 2006 | Title of article Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Read more… 1 4

  16. Tips of the Trade New Blog Entries • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] • [Title of blog entry goes here] Tips of the Trade– Article Page TT02 • Functional Description • Content is presented with headline and date stamp. TBD if there is a bi-line.Has the ability to have internal links within the body text.Has the ability to have multiple pictures/media. • Ability to send the article to a friend (TBD: internal email only?) and to print the article. • A list of recent blog entries fills the right side of the page. Again, this is to get the user to participate in the site content and discussion...when user sees blog entries next to a news article, it may inspire him/her to comment on the article in question. Tips of the Trade 3 Category 1 Category 2 Category 3 Tips of the Trade Archives [Title of article] April 18, 2006 2 Email This | Print This 1 • Lorem ipsum dolor sit amet, link to external source site as required consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit • Vulputate velit esse molestie consequat • Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim • Qui blandit praesent luptatum zzril delenit augue • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • > See more news in theNews Archive flexible

  17. Ketchup Blog Blog Landing Page BL00 • Functional Description • NOTE: This page shows the presentation layer of the Blog component. See Blog CMT documentation on Page __ for the “build” description of these pages. • Space for imagery/creative to establish the section user is in. • Left Navigation: • NEW ENTRY link takes user to the tool where he/she can write and upload a new entry. (See ID BL04) • Blog has specified categories associated with it so that user can navigate entries by category. • There’s also a list of the last [number TBD] entries that user can jump to • The entries are also archived by month • The blog page presents the last 5 entries (3 are shown here at left). Each entry has a date/time stamp, a hyperlinked title that takes user to the individual article page. It also includes a “posted by” feature. • Comments link: if user wants to read and/or contribute comments, he/she clicks the Comments link (number in parenthesis tells user how many comments have been left). When user clicks Comments, he/she goes to the individual article page, anchor-linked to the comments area (see next screen for more detail) • Read More: some entries will be longer than others and in the blog CMT functionality, there is a way to write teaser paragraph and the larger body of the text (see ID BL04 for Blog CMT documentation). If user clicks Read More, he/she proceeds to the individual article page, anchor-linked to the Read More area (see next screen for more detail) Blog 1 2 NEW ENTRY Category 1 Category 2 Category 3 Category 4 Category 5 Recent Entries [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] Archives July 2006 June 2006 May 2006 April 2006 March 2006 February 2006 3 July 28, 2006 [Most recent entry] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Posted by webboy at 04:14 PM |Comments (5) 4 July 27, 2006 [Most recent entry - 1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… Posted by jules at 08:29 AM |Comments (7) July 26, 2006 [Most recent entry - 2] 5

  18. Ketchup Blog Blog Article Page BL01 • Functional Description • The area defined by the brackets is the teaser or short article text. • Below the teaser/short article text is the rest of the article that is accessed if user clicks “Read more” on any published blog entry • Comments are found below the article; include comment, commenter’s name and time stamp. • Leave a comment allows a user to add thoughts on a blog entry. It will be limited to ___ characters (TBD). User must put a name in (minimum ___ characters – TBD). When user clicks SUBMIT, the time and date is recorded and the page refreshes with the user’s comment below the last comment displayed. Blog NEW ENTRY Category 1 Category 2 Category 3 Category 4 Category 5 Recent Entries [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] Archives July 2006 June 2006 May 2006 April 2006 March 2006 February 2006 July 27, 2006 [Most recent entry - 1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Posted by jules at 08:29 AM 1 2 3 Leave a Comment Comments “[User comment goes here user comment goes here user comment goes here]” Posted by: Jonn, August 2, 2006 06:13 PM “[User comment goes here user comment goes here user comment goes here]” Posted by: Clive, August 2, 2006 07:21 PM 4 Your name: Submit

  19. Ketchup Blog Blog – Archive by Category BL02 • Functional Description • The selected category is highlighted in the left navigation • A list of all articles in chosen category (may need a pagination element if there are more than [number to be determined] articles.Article links behave as described on ID BL00. Blog NEW ENTRY Category 1 Category 2 Category 3 Category 4 Category 5 Recent Entries [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] Archives July 2006 June 2006 May 2006 April 2006 March 2006 February 2006 [Category Title] 1 2 July 28, 2006 [Most recent category entry] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… Posted by webboy at 04:14 PM |Comments (5) July 27, 2006 [Most recent category entry - 1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… Posted by jules at 08:29 AM |Comments (7) July 26, 2006 [Most recent category entry - 2] Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more…

  20. Ketchup Blog Blog – Archive by Timeframe BL03 • Functional Description • The selected archive timeframe is highlighted in the left navigation • A list of all articles in timeframe (may need a pagination element if there are more than [number to be determined] articles.Article links behave as described on ID BL00. Blog NEW ENTRY Category 1 Category 2 Category 3 Category 4 Category 5 Recent Entries [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] [Entry Header] Archives July 2006 June 2006 May 2006 April 2006 March 2006 February 2006 Archives for July 2006 2 July 28, 2006 [Most recent entry based on timeframe] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… Posted by webboy at 04:14 PM |Comments (5) July 27, 2006 [Most recent entry based on timeframe - 1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… Posted by jules at 08:29 AM |Comments (7) July 26, 2006 [Most recent entry based on timeframe - 2] Ad urbam venit doodlius nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Read more… 1

  21. Ketchup Blog Blog – Create Entry BL04 • Functional Description • Title field: Mandatory, minimum characters – [# TBD], maximum characters -- [# TBD] • Category drop-down. There should be some categories specified but also the opportunity for user to create a new category (see diagram on next page) • Name field: Mandatory, minimum characters – [# TBD], maximum characters -- [# TBD] • Teaser text: this is the text that is seen on any archive page, or the blog landing page. Mandatory, minimum characters – [# TBD], maximum characters -- [# TBD] • Extended entry: Optional; if user puts text in this field, it is presented only in the full individual blog article page – an anchor link is attached to this text box on “Publish.” • Add image: Optional; using the standard computer browse command, user can upload an image to be associated with the blog entry (the dimensions and file size..may have to do some system check or re-sizing tool) Design to decide where and how this image is presented (align left, top of page etc etc) • Action buttons: • if user presses Publish, the page is published to the blog and becomes the most recent entry. User is taken to Blog landing page (ID BL00) • If user presses Preview, a new window is initiated with the article laid out in full article format (as in ID BL01). The user must close this window then press Publish to have it saved and added to the site. • If user presses Delete, a pop up alert window is presented as in diagram on next page. Create New Entry (*These fields are mandatory.) 2 1 *Category: -- Pick one -- *Title: *Your name: 3 *Teaser Text/Short Entry: 1 4 Extended Entry: 5 Add image: 6 Browse Add Publish Preview Delete 7 4 Send

  22. -- Pick one -- Ketchup Blog Category1 Category 2 Category 3 Category 4 Add New Category Delete this entry? If you want to delete this entry, press OKAY. Otherwise, press CANCEL Add A Category To create a new category, enter a title in the field below, select a parent category, and click the Add button. Category Title: Cancel Add OKAY CANCEL Create Entry – more details BL04 • Functional Description • Add a New Category • If user selects “Add New Category, a pop up window is presented. • User inserts new category name. If user presses “Cancel” the pop-up window disappears and no new category is added. If user presses “Add,” the pop-up window closes and the new category name is added to the drop down and is selected on the Create New Entry screen. • Functional Description • Delete Entry: • If user has selected Delete, this pop-up is presented. If user clicks OKAY the pop-up disappears and all the text in the form fields is deleted leaving a blank slate. If user clicks CANCEL the pop-up disappears and all the text remains in the text fields. *Category: Create New Entry (*These fields are mandatory.) 1 *Category: Add New Category *Title: 2 *Your name: *Teaser Text/Short Entry: Extended Entry: 3 Add image: Browse Add Publish Preview Delete 4 Send

  23. Ketchup Blog Blog – Edit Entry BL05 • NOTE: • This functionality is only available to Senior admins who can edit/delete inappropriate entries or comments. • Functional Description • Toggle functionality. Defaults to Edit Entry but user can toggle to Edit Comments as well (ID BL05a) • Original writer's name is not editable. • If there is an image that needs deleting, admin person can simply delete image form the entry. • If user has edited the article, he/she must press Save to publish the changes. When pressed, user goes back to Blog admin screen (ID CMT05). The Preview and Delete functions behave the same ways as described on ID BL03 and IDBL04) Edit Entry – Edit Comments 1 Category: Category 3 Title: Title of article] 2 Writer’s name: [Writer’s Name Here] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Teaser Text/Short Entry: Extended Entry: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Ad urbam venit doodlius cum cabala. Or nauvit pluma pelium et dixit macaroni. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Add image: 3 Delete Save Preview Delete 4 4 Send

  24. Ketchup Blog Delete this comment? If you want to delete this comment, press OKAY. Otherwise, press CANCEL OKAY CANCEL Blog – Edit Comments BL05a • NOTE: • This functionality is only available to Senior admins who can edit/delete inappropriate entries or comments. • Functional Description • Toggle functionality as described on ID BL05 • If admin user presses delete, a pop-up window is presented as illustrated at left. If comment is deleted, the pop-up disappears and the page refreshes with only the remaining comments present.NOTE: May need a pagination element if there are more than [# TBD] comments. Edit Entry – Edit Comments 1 [Name Here] Commenter: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Comment: 2 Delete [Name Here] Commenter: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Comment: Delete [Name Here] Commenter: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Comment: Delete [Name Here] Commenter: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Comment: Delete 4 Send

More Related