Wireframe documentation Orkla Common

Transcription

1 Wireframe documentation Orkla Common Author: Making Waves AS Date:

2 Contents Introduction... 5 About Content & information management... 6 eway vs ez Systems... 6 Effective information management... 6 Corporate websites... 6 Common grid... 7 Grid 1: basics... 8 Grid 2: navigation and mailcolumn... 8 Grid 3: Navigation, primary and secondary... 8 Grid 4: Navigation and maincolumn split Grid 5: No navigation, Content column split... 9 Grid 6: No navigation, Content column split in three... 9 Grid 7: No navigation, Content column split in four Common sitemap Flow templates What is a flow template? Sections Blocks Modules - how content is shown in a flow template Classes available for block view: Columns Manual: Latest content: Front page (flow) Section page (flow) Sub-section page (flow)... 23

3 Article Indexed Article Search Glossary FAQ Video Gallery News section News archive Geo location folder (Google) Company Board / Correlating contacts Contact Calendar Event Available Position Folder (product) Product category Product page Campaign Flash fullwidth Examples of customized templates Companies using Orkla Common... 66

4 - Designed and developed by Making Waves AS -

5 Introduction This document aims to inform about the Orkla Common Frameworks main templates and their attributes. The Orkla Common framework is a technical framework with a common repository of templates and functionality. The development of a new site that is to be implemented on the Orkla Common framework is not limited to existing templates and functionality. New templates and new functionality can be developed either as a part of Orkla Common or as a specific feature/template for the site in question.

6 About Content & information management The template framework is based on the grid system. The template framework: A template framework allows content to be viewed by the user in a browser. How the information is displayed depends on design elements and the business design manual. On a corporate site the purpose is to aid the user to easily find the content he needs, while product sites are more brand and promotion oriented. eway vs ez Systems The difference between eway and ez as Content Management Systems. Effective information management The Orkla Common framework is built upon several principles for information management. The principles differs between the different types of websites; corporate, product and intranet, but some are shared: - Content exists only once. - Distinct types of content have distinct templates. - Content is separated from design and function. Corporate websites Corporate websites serves a purpose that differs from a product or brand site. A corporate website is a tool to gather information for many users. In order to meet the needs of these users the navigation principles and content needs to be arranged in a structured and predictable way. The Orkla Common framework has combined best practices and the needs identified on the different sites within the Orkla Group.

7 Common grid The grid system: A grid system is created in order to make the content more readily understandable. Our brain recognizes easily a pattern, and the quicker the pattern is recognized the faster we can understand and navigate. The second reason to create a common grid system is the advantage of modules only being made once and sharing them through all the sites by using the Orkla Common framework. ez Publish allows different views of structured content. A site that complies with this grid will have the advantage of a lower implementation cost and a greater reuse of functionality developed for the Orkla Common framework. It s also possible to design within a different grid and still have great advantages of the Orkla Common set of functionality. The only difference is that the html needs to be created to match the chosen grid. This applies to every template and front view of a content. The Orkla Common grid consists of 4 columns, where content can span from 1-4 columns depending on the template and the type of content. Front pages have a full 4 column view along with certain special templates, while most templates have a left menu occupying column 1. The main content is normally shown in column 2 and 3, while column 4 contains related content. When adding modules / content in a flow template, the editor chooses over how many columns the content should span. This is described in detail in the Flow templates section of the document.

8 Grid 1: basics Grid 2: navigation and mailcolumn Grid 3: Navigation, primary and secondary

9 Grid 4: Navigation and maincolumn split. Grid 5: No navigation, Content column split Grid 6: No navigation, Content column split in three

10 Grid 7: No navigation, Content column split in four

11 Common sitemap The Orkla Common framework is built to support key functions for all corporate sites within. The common framework aims to benchmark key functions and features on corporate pages, and an individual analysis of the different companies will be conducted in order to best allocate existing content into the new framework. Based on a content analysis of existing sites and benchmarking reports, we`ve created a common sitemap, reflecting the content types and sections we recommend your corporate site to contain. These might differ from site to site according to content, and this sitemap will be the grounds (basis?) of our initial analysis. If specific needs and single-company specific content should occur, it will be handled outside the common framework, and be implemented on the sites in question.

12 Flow templates What is a flow template? Several of the page templates in the Orkla Common framework utilize Easyflow to give the largest possible degree of flexibility in their application. Easyflow allows you to easily change the layout and content presented there, depending on what part of the page the content is shown. Sections A flow template is divided into different sections/zones, and each section determines how content is shown. This allows you to show the same type of content (i.e. a contact, a link, a teaser) in different ways in the different sections on a page, making it easy to prioritize. Each section contains blocks, and a block can be defined as a listing of similar content. Blocks When adding content into a flow template, this is done by adding blocks. A block is a container for showing content, and the type of block determines the number of content items shown, how many columns it covers and whether content is manually added or shows the latest updated. The two most used blocks in our flow templates are Columns Manual and Latest Content. As the block names hints at, Columns manual lets the editor manually pick items to show (i.e. most relevant reports to this section ), and latest content shows the latest items added to a folder in easy (i.e. latest press release, latest reports )

13 When adding a block, you first choose a section, as explained on the previous page, and choose the block with the number of items you want to add (i.e Columns manual 4 = maximum 4 items). In the block you also choose the number of columns you want the content to cover from 1 to 4. This doesn`t apply to the right section, as it automatically occupies 1 column. Certain blocks are made for a specific use, as the subsection list. This is meant to be used to display teasers in the left section of a sub-section page, and changes the teaser design to show that it s a sub-section and not a section page. Block examples (1, 4 or 6 items) Columns Manual 1 Columns Manual 4 Columns Manual 6 Latest content 1 Latest content 4 Latest content 6 Subsection list

14 Modules - how content is shown in a flow template The different types of content is drawn / shown differently depending on what section and block is used to show it. Here is an overview of how the different types of content are shown:

15

16

17

18 Classes available for block view: There are two main blocks available on flow templates; Columns manual and latest content. These are the EZ classes that can be shown in block view (See user documentation for reference) Columns Manual: Article Basic section page Bloggers Company Contact Available position (easycruit) Calendar Event FAQ item Geo location folder Image Infobox Link News ticker Press release File Report Slideshow Stock Ticker Teaser Youtube video Latest content: Article FAQ Images Contacts Files Blog Posts Events Press Release Report

19 Front page (flow) Description To provide you with the largest possible flexibility, the Common front page is developed in the Easyflow framework, allowing you to easily change the layout and content presented there, depending on what is in focus at the time. The front page template presented here is with example content, but this can be arranged in various ways. It contains a large banner/slideshow in top, four separate teasers leading to section pages or other content you want to present, and six blocks listing latest news, press releases, Index 1. Top menu 2. Slideshow / top banner (4 columns) 3. Teasers to main sections (4 teasers, 4 columns) 4. Latest news (4 news, 2 columns) 5. Latest files (latest 4. 1 column) 6. Calendar (4 events, 1 column) 7. Available positions (Latest 6, 2 column) 8. Press releases (Latest 6, 2 column) Comments

20 Frontpage template

21 Section page (flow) Description Section pages can be seen as front pages for a specific part of the page, for example Investor Relations or About Us. The section page consists of left menu navigation, a top slideshow, a main content section and a right column. Section pages are constructed using Easyflow, allowing the editors a larger degree of freedom when it comes to organizing content. The main content section contains a description of the section, teasers to sub-pages or sections and a block of latest news, report or presentations. The right column contains section global elements that is present on all sub-pages (for example contacts and stock ticker), but in addition has a flexibility letting you present other relevant content types. Section pages are also developed in Easyflow, allowing a larger degree of flexibility for the different sections. Index 1. Top section: Slideshow / picture / video 2. Left section: Title and introduction 3. Left section, Manual Block 4 items, 2 columns: Teasers 4. Left section, Manual Block 4 items, 2 columns: Articles 5. Left section, Manual Block 6 items, 2 columns: FAQ 6. Right section: Teaser / iframe element 7. Right section, Manual Block, 4 items: Calendar 8. Right section, Manual Block, 4 items: Contacts 9. Right section, Latest Block, 4 items: Reports Comments The html is the language used to transform the graphic design into viewable content for the end-user. This also applies that the structure of the site and the design visible to the end user can differ from every site based on their design guidelines and Information architecture. Content is separated from design and function.

22 Section page template

23 Sub- section page (flow) Description Sub section pages are organized in the same way as section pages, but display teaser elements as a horizontal list. This allows for a longer description on the teasers, as well as separating sections and sub-sections visually. Sub section pages are more content specific than the general section page. Index 1. Top section: Slideshow / picture / video 2. Left section, Sub section teasers, 2 columns: Teasers 3. Right section: Teaser / iframe element 4. Right section, Manual Block, 4 items: Contacts 5. Right section, Manual Block, 4 items: Articles Comments

24 Sub- Section page template

25 Article Description The article template allows you to integrate images, slideshows and videos along with text. An article can have a multitude of content types connected to it, and this is shown below the article in a list (other articles, files, webcasts ++). In addition the right column will show section-global content and also related content you add. Index 1. Header 2. Author 3. Body 4. Image w/caption 5. Related files 6. Teaser 7. Infobox 8. Related contacts 9. Related links 10. Related articles 11. Supplementary header Comments

26 Article page template

27 Indexed Article Description Indexed article is a special template to be used on articles / content structures where a clear narrative is present. The core functionality is listing all articles / chapters in the right column, and a previous / next chapter link in the bottom. Index 1. Chapter overview 2. Chosen chapter 3. Previous page / Next page 4. Page / chapter select Comments

28 Indexed Article page template

29 Search Description The Common framework comes with a global search function, placed in the upper right corner of the header. Searching for keywords opens the search template, where you can limit your search to specific periods of time and specific types of content. The search results can be sorted after relevance or publication date, and the results are shown with a title, description and format. Index 1. Global search field 2. Search button 3. Search phrase and number of hits 4. Filter on content type (number of hits within each type shown) 5. Filter on creation time 6. Styling article with image 7. Styling Contact 8. Search result title 9. Search result location (breadcrumb / url) 10. Search result creation date 11. Search result relevance 12. Search result excerpt (search match marked in text) 13. Pagination direct link to pages and next page Comments

30 Search page template

31 Glossary Description The Glossary in Orkla Common allows you to add content / articles corresponding to the letters in the top. The glossary has an internal search engine, and a top-navigation that uses verticalanchoring (when you click a letter the page automatically scrolls to the section of the page where the term or word is explained). If a letter has no content, it is greyed out and not clickable. Each glossary item also has a Go to top function, taking you to the top navigation. Index 1. Title and introduction 2. Shortcut to letter click to jump to part of page (anchor link) 3. Letter without content are not clickable 4. Glossary item 5. Link to top of page (anchor link) Comments

32 Glossary page template

33 FAQ Description The Common FAQ is organized after main categories (i.e. Investor Relations) and sub categories (i.e. The Orkla stock). Clicking a main category shows only questions and answers relating to the specific theme, and clicking a sub category scrolls to the page section containing the chosen content. As the glossary, each category has a go to top link, taking the user back to the category listing in the top of the page. Index 1. FAQ name 2. Introduction 3. Main categories (click to view sub-categories within selected main category) 4. Sub categories v/anchor links goes to part of page containing subcategory 5. Sub category name 6. FAQ item within sub category 7. Link to top Comments

34 FAQ template

35 Video Gallery Description The video gallery is a player / viewer for Youtube and other video formats. The gallery shows the top-video in full view and lists the other videos in the gallery below it. By clicking a video it starts to play in the top field. Index 1. Page header / introduction 2. Highlighted article 3. Previous four news entries 4. Previous ten news shown as list 5. Press contacts 6. Link to news archive Comments

36 Video gallery template

37 News section Description The news section is a flow template containing the block Latest news. It contains a list of news articles, where the latest news article is highlighted and shown on top. Below it four news stories are shown with pictures, title and introduction. In the bottom a list of previous stories is shown, as well as a link to the news archive. Index 7. Page header / introduction 8. Highlighted article 9. Previous four news entries 10. Previous ten news shown as list 11. Press contacts 12. Link to news archive Comments

38 News template

39 News archive Description The news archive lists all news articles chronologically, and shows their title and publication date. This template also has a search field, allowing users to search through content located within the archive. Index 1. Page header / introduction 2. Highlighted article 3. Previous four news entries 4. Previous ten news shown as list 5. Press contacts 6. Link to news archive Comments

40 News archive template

41 Geo location folder (Google) Description The global presence template shows all addresses and factories within Orkla. The user can filter according to business area, country and address type. The welcoming screen contains one pin per country Orkla is present in, and by clicking the pin and choosing a filter in the popup, (i.e. Show Orkla Brands` addresses in Norway ), only addresses fitting these criteria are shown. The addresses belonging to a specific company within a business area can also be shown by clicking the company in the list view below the Google window. Index 1. Header 2. 3 Custom drilldown filters (i.e. Business areas, countries) 3. Opened location marker (shows address, image, link to address full view and custom links) 4. Location marker (icon for address type and color coded business area) Comments

42 Geo location folder template

43 Company Description Company is the full view of a single company s address and contact information. The company class contains a name, description, map location, address and contacts. When added to a geo location folder, the company s location is shown on the map. When added to a basic section page only the address/text (info window description) is shown Index 1. Company name 2. Company location in map 3. Description 4. Infowindow description (address / contact information shown in popup in geo location folder) Comments

44 Company late

45 Board / Correlating contacts Description The correlating contacts template shows employees in key positions in a way that differentiates them from the regular contact template. The template shows contacts with a larger picture and the possibility to link to contact full view (with CV), and includes an internal hierarchy (i.e. three contacts are elected by employees, one is head of the board etc). Clicking a contact name or see CV links open a full view of a contact showing a complete CV (if its put in) and a list of other contacts in the same group / correlating contacts folder. Index 1. Title (i.e. board, general assembly) 2. Description / introduction 3. Category 1 (i.e. Head of the board, or Employee representatives) determined by the folders the contacts are put into in Admin. 4. Fact and information box 5. Board member with name, title and link to CV 6. Subcategory 2 (i.e. employee electees) 7. Subcategory 3 Comments

46 Board template

47 Contact Description A contact has a full view when added to a correlating contacts folder. The contact template contains name, title, contact information and description. When added to a correlating contacts folder it shows an infobox with information general to all contacts in the group (i.e. focus areas, responsibilities) and lists the other contacts. A contact can also be added to an article or a basic section page. Only the name, title, image and contact information is then shown. Index 1. Name 2. Title and contact information 3. Image 4. Description / Bio 5. About the board / group 6. Other contacts in the group Comments

48 Contact template

49 Calendar Description The calendar template lists future events, and links to an archive of previous calendar events. Index 1. Calendar title / Calendar description 2. Upcoming events (date, title and description) 3. Link to calendar archive / past events Comments

50 Calendar template

51 Event Description An event contains a description, and image, time / location and related files. When added to an event calendar, the events are automatically sorted chronologically. Index 1. Event title 2. Event image 3. Date, time and location 4. Event description 5. Related files Comments

52 Event template

53 Available Position Description The available position template contains core information about the specific position, a description and list of similar positions within Orkla and the possibility to apply for the job. All content in the template is imported directly from Easycruit. Index 1. Company Banner 2. Position title 3. Description 4. Apply now 5. Key information 6. Orkla Banner 7. Other available positions in Orkla Comments

54 Available position template

55 Folder (product) Description The product folder template shows all categories of products, with four featured products from each category. Clicking a category name or show all link opens the product category page, showing all products. Clicking a single product picture or name opens the product page. Index 1. Header (Products) 2. Product category name link to product category 3. Product picture link to product page 4. Product name link to product page 5. Show all - link to product category Comments

56 Product folder template

57 Product category Description The product category page contains all products within a category. Each product is shown with a teaser containing picture, name and in some cases text. The template also allows for a slideshow, video or image in the top field. Index 1. Header image 2. Product category name 3. Category description 4. Product name 5. Product picture 6. Product description Comments

58 Product category template

59 Product page Description The product page template is meant to show all relevant information of a specific product. Index 1. Product name 2. Image / Video 3. Additional pictures / videos 4. Teaser / link 5. Packshot 6. Share / social plugins 7. Infobox 8. Sizes 9. Product icons 10. Description w/first child (first paragraph is highlighted as introduction) 11. Ingredients 12. How to use / key selling points 13. Related products Comments

60 Product template

61 Campaign Description The campaign template is a full width template with unique CSS, Javascript and HTML. Index Comments

62 Campaign template

63 Flash fullwidth Description The flash fullwidth template is a full width template a title, background image, unique CSS and a.fla file. Index Comments

64 Flash fullwidth template

65 Examples of customized templates A range of customized templates have also been developed, tailored for the individual needs of specific companies and business areas. Here are some examples: Download center Extranet / login funcitonality ofi.net Product searches / integrations against product databases Procordia

66 Companies using Orkla Common