Example project Functional Design. Author: Marion de Groot Version

Similar documents
FOR THOSE WHO DO. Lenovo Annual Report

TITLE - Size 16 - Bold

BOOTSTRAP AFFIX PLUGIN

MKA PLC Controller OVERVIEW KEY BENEFITS KEY FEATURES

The L A TEX Template for MCM Version v6.2

Creating An Effective Academic Poster. ~ A Student Petersheim Workshop

Paper Template for INTERSPEECH 2018

The Next Big Thing Prepared for Meeting C

Timon Hazell, LEED AP Senior BIM Engineer. Galen S. Hoeflinger, AIA BIM Technologist Manager

Brand Guidelines MAY 2016

Connected TV Applications for TiVo. Project Jigsaw. Design Draft. 26 Feb 2013

ALWAYS MOVING FORWARD MIDWAY S GRAPHIC IDENTITY STANDARDS MANUAL

Intermediate District 288. Brand Manual. Visual Identity Guide

TITLE. Tips for Producing a Newsletter IN THIS ISSUE

Brand identity guidelines

COLORS COLOR USAGE LOGOS LOCK UPS PHOTOS ELEMENTS ASSETS POWERPOINT ENVIRONMENTAL COLLATERAL PROMO ITEMS TABLE OF CONTENTS

Thomas F. Sturm A Tutorial for Poster Creation with Tcolorbox

Thomas F. Sturm A Tutorial for Poster Creation with Tcolorbox

Insights. Send the right message to the right person at the right time.

RHYMES WITH HAPPIER!

An output routine for an illustrated book

TITLE SUBTITLE Issue # Title Subtitle. Issue Date. How to Use This Template. by [Article Author] Article Title. Page # Article Title.

American Political Science Review (APSR) Submission Template ANONYMISED AUTHOR(S) Anonymised Institution(s) Word Count: 658

BRAND IDENTITY GUIDELINE

VISUAL IDENTITY STARTER KIT FOR ENSURING OUR COMMUNICATIONS ARE COHESIVE, CONSISTENT AND ENGAGING 23 OCTOBER 2008

[Main Submission Title] (Font: IBM Plex Sans Bold, 36 point)

VISUAL. Standards Guide

City of Literature Branding

Colors. F0563A Persimmon. 3A414C Cobalt. 8090A2 Slate Shale. C4CDD6 Alloy Coal. EFF3F5 Silver. EDF3F9 Horizon.

BRAND GUIDELINES All rights reserved.

The everyhook package

BBN ANG 183 Typography Lecture 5A: Breaking text

A Road To Better User Experience. The lonely journey every front-end developer must walk.

Gestures: ingsa GESTURES

CITIZEN SCIENCE DATA FACTORY

Brand identity design. Professional logo design + Branding guidelines + Stationery Designed by JAVIER

OCTOBER 16 NEWSLETTER. Lake Mayfield Campground OR-LOW GOOD TIMES

WRAS WIAPS BRAND GUIDELINES 2015

Wandle Valley Branding Guidelines 1

Thesis GWU Example Dissertation. by Shankar Kulumani

IDENTITY STANDARDS LIVINGSTONE COLLEGE DR. JIMMY R. JENKINS, SR. PRESIDENT

This is the Title of the Thesis

Teach Yourself Microsoft Publisher Topic 2: Text Boxes

TUSCALOOSA CITY SCHOOLS Graphic Standards and Logo Use Guide

Version 1.4 March 15, Notes Bayer- Kogenate 2010 WFH Microsoft Surface Project (HKOG-39563) Information Architecture Wireframes

src0-dan/mobile.html <!DOCTYPE html> Dan Armendariz Computer Science 76 Building Mobile Applications Harvard Extension School

BOWIE FARMERS MARKET. Anne Bontogon Campaign Bowie Farmers Market

Project Title. A Project Report Submitted in partial fulfillment of the degree of. Master of Computer Applications

DFSA - Web Site Revamp

cosmos a tech startup

The POGIL Project Publication Guidelines

CORPORATE IDENTITY MANUAL

Making the New Notes. Christoph Noack OpenOffice.org User Experience Max Odendahl OpenOffice.org Development Christian Jansen Sun Microsystems

Pablo- Alejandro Quiñones. User Experience Portfolio

I D E N T I TY STA N DA R D S M A N UA L Rev 10.13

The pdfreview package

lipsum Access to 150 paragraphs of Lorem Ipsum dummy text a

Personal brand identity desigend by JAVIER

Brand Guide. Last Revised February 9, :38 PM

CLASP Website Redesign Client Deliverables Spring 2007

Overly Companies (OSA, BRICO)

Visual identity guideline. BrandBook BLOOMINGFELD. Brandbook 2016.

Ghislain Fourny. Big Data 2. Lessons learnt from the past

NATURAL BUILDING TECHNOLOGIES Document: Feedback Sheet Revision: A Date: 13/07/16 Queries:

Current Sitemap by Navigation Layout

BRAND GUIDELINES VAN S AIRCRAFT, INC. VERSION V1.1

BBN ANG 183 Typography Lecture 5A: Breaking text

Formatting Theses and Papers using Microsoft Word

Getting started with Managana creating for web and mobile devices

The colophon Package, v1.1

RML Example 48: Paragraph flow controls

THE ESPRESSO BOOK MACHINE PUBLISH INSTANTLY AT THE MSU LIBRARIES

Visual Identity Standards

Prototyping Robotic Manipulators For SPHERES

Compassion. Action. Change.

Saturday January 6, pm

Are You Using Engagement TilesTM?

Identity Guidelines Version_1

DISTRIBUTED MEMORY COMPUTING IN ECONOMICS USING MPI

Customer Journey EIV and emsfaa. January 2018

My tags Ornare sociosqu, magna, nunc, erat duis, elit malesuada, arcu, quam ut. > View all. Recommended content

Foundation Site Global Elements

CHI LAT E X Ext. Abstracts Template

Portfolio. Site design, wireframes and other diagrams. Abigail Plumb-Larrick. Plumb Information Strategy

Row 1 This is data This is data

Row 1 This is data This is data. This is data out of p This is bold data p This is bold data out of p This is normal data after br H3 in a table

Chaparral Sports Day. Basketball Ashley Guerrero(captain), Carrera, Rasuly, Hamilton Alba, Razel Alba, Bannister, Phillips, Richardson.

Abstract. Author summary. Introduction

RPM FOUNDATION BRANDING GUIDELINES AND GRAPHIC STANDARDS

9 Ways You Can Put Behavioral Automation to Work.

AMERICA'S CAR MUSEUM BRANDING GUIDELINES AND GRAPHIC STANDARDS

logo graphic will go here

AHA CENTRE CORPORATE DESIGN MANUAL

KEEPING FAMILIES COMFORTABLE, ALL-YEAR ROUND

G2E Web Banners: 200 x 100 Signature. 160 x 160 Social Media. 125 x 125 web button

Certified Organisation logo guidelines. Version 1.0 April 2018

The rjlpshap class. Robert J Lee July 9, 2009

file:///users/nma/desktop/chris_mac/chris_school/kcc_nmawebsite/_technology/sitebuild/htdocs/gargiulo/data/johndoe/spring/art128...

MBCA Section Newsletter Required Content Guidelines

OGP Brand Guide MARCH 2018

Transcription:

Example project Functional esign uthor: Marion de Groot Version 1.0-18-4-2013

Table of contents 3 Introduction Requirements gathering 4 Use cases 5 Use case flow diagram 6 Users and Rights 7 Requirements Functional design 8 Site structure 9 ontent relations 10 ontent relations - extended 11 Navigation 12 Template - Homepage 13 Template - ontent page 14 Template - List page 15 Template - genda 16 Template - Event detail 17 Functionality - Search 18 Functionality - Related projects ppendix 19 Glossary Example project Functional esign Version 1.0 18-4-2013 page 2/19

Introduction Project introduction This document describes an example functional design. It provides examples of elements that could be included in functional design documents. The introduction page contains a short introduction on the project and its scope. simple website design is used as an example, as it is easy to explain. More complex software requires a more extensive design, but the principles remain the same. Proposed technology This paragraph describes the technology that is to be used to develop the software, for example Wordpress or.net. ny other comments and reasons to choose this technology can be added here as well. System requirements and supported platforms, browsers and resolutions brief description on dependencies and compatibility with other software is provided here. In the case of a website, supported browsers and resolutions can be listed. In the case of desktop software or applications, the supported platforms and system requirements are listed. Project planning summary of the project planning is given here, with the main milestones of e.g. acceptance testing and delivery. Example project Functional esign Version 1.0 18-4-2013 page 3/19

Use cases Use ase 1: User subscribes to event Primary actor: Website visitor Scope: Website front-end Level: User goal Main Success Scenario 1. Visitor arrives on homepage 2. Visitor goes to agenda 3. Visitor clicks on event 4. Visitor clicks on Sign up 5. Visitor enters name and email address and clicks Sign up 6. Visitor is added to participants list 7. Visitor receives automatic email confirmation Extensions 5a. Entered email address is not valid. 5a1. Popup appears that email address is not in a valid format. 5a2. Visitor is sent back to sign up page with fields prefilled with previously entered information. 6a. Maximum number of participants is reached. 6a1. Email is sent to visitor that event is full and that he is put on a waiting list. Resulting requirements - Visitors can sign up for events with name and email address. - maximum amount of participants can be set in the MS. - participants list is created for every event. Use ase 2: dministrator gets participants list Primary actor: Website administrator Scope: Website MS Level: User goal Main Success Scenario 1. dministrator logs in to MS 2. dministrator goes to event 3. dministrator clicks on participants list 4. dministrator downloads list Extensions 3a. There are no participants. 3a1. message is shown: The participants list is empty. Resulting requirements - dministrators can view event participants in the MS. - dministrators can download the participants list from the MS. Use ase 3: User comments on post Primary actor: Website visitor Scope: Website front-end and MS Level: Subfunction Main Success Scenario 1. User views article 2. User enters name, email address and comment on article and clicks dd comment. 3. dministrator is notified on the new comment 4. dministrator logs in to MS 5. dministrator views comments 6. dministrator approves new comment 7. User is notified that comment is approved Extensions 2a. Entered email address is not valid. 2a1. Popup appears that email address is not in a valid format. 2a2. Visitor is sent back to article page with fields prefilled with previously entered information. 6a. omment is spam 6a1. dministrator disapproves comment 6a2. User is notified that comment is disapproved. Resulting requirements - Users can comment on articles by entering their name, email address and comment. - dministrators have to approve comments before they appear online. - When comments are approved or disapproved, the user is notified by email. Use cases The use cases relevant for the software are described here. The use cases can be used to define the scope of the project and/or to gather requirements. Use cases help to imagine what situations can occur, what can go wrong and how the software can be designed on usability. Example project Functional esign Version 1.0 18-4-2013 page 4/19

Use case flow diagram Website visitor licks on Sign up System Use case flow diagram In some cases it can be useful to include flow diagrams of use cases. These give a clear insight in the steps that are in the process and the actors executing them. Enters name and email address No Email address valid? Popup message: Email address not valid Yes Yes Event full? No Email: waiting list dd user to list Email: confirmation Example project Functional esign Version 1.0 18-4-2013 page 5/19

dministrators Editors Visitors Users and Rights Users Users RU R News RU RU R Events RU RU R Event participants RU R R log articles RU RU R Projects RU RU R ustomers RU RU R Pages RU RU R Users and Rights This table shows which users of the software have which rights. = reate R = Read U = Update = elete Example project Functional esign Version 1.0 18-4-2013 page 6/19

Requirements. System requirements.1 The website needs to be built using the Wordpress MS..2 The website should be optimized for display in Internet Explorer 8 and up, and the latest production versions of Firefox, hrome and Safari..3 The website should still be functional in Internet Explorer 7, but small layout issues may occur.. asic functionality.1 Mauris non vestibulum leo. Etiam risus dolor, blandit id tincidunt id, auctor vitae felis. Sed neque nisi, pellentesque sed ultricies at, sodales a erat..2 Phasellus scelerisque tincidunt eros id condimentum. Maecenas et turpis magna, ut laoreet sapien..3 Nunc semper auctor lacus, elementum sollicitudin ipsum placerat in. liquam consequat neque aliquam dui hendrerit a bibendum sapien tempor..4 Suspendisse mattis eleifend bibendum. Nunc fermentum tincidunt tempus..5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales sem eu turpis posuere iaculis. Pellentesque et metus justo.. Events and registration.1 Fusce enim mi, placerat in ornare non, semper id nisi. Nulla nec elit at mi elementum consequat ut at ligula..2 Nunc viverra, dui in mollis euismod, urna dui molestie urna, a iaculis eros sapien ut sem. Praesent sit amet vulputate ipsum. Suspendisse sed mi eu diam aliquet tincidunt. Etiam elementum elementum velit, sit amet elementum urna porta mattis. Phasellus vitae tortor in sem malesuada laoreet sed sit amet dolor..3 urabitur sollicitudin imperdiet est dignissim congue. Morbi eu cursus mauris. Phasellus pellentesque turpis sed est ornare sit amet ultricies sapien dictum. Ut non velit cursus sapien dignissim tempor quis id ante.. omments.1 Nullam a nisi eu neque dictum pulvinar eu vel tellus. Maecenas quis commodo dui. Maecenas suscipit pretium vulputate. E. ontent import E.1 Maecenas tortor ante, egestas dignissim consequat ut, lobortis ac nulla. onec ac nibh et augue placerat elementum. E.2 Vestibulum sit amet elit ligula, ut pretium odio. ras commodo luctus turpis vel dapibus. onec sed nunc in orci tristique venenatis sed quis neque. Proin luctus porttitor orci a tincidunt. F. Search F.1 Maecenas vestibulum, enim a malesuada aliquet, tellus velit dignissim est, at dictum neque sem nec lectus. Suspendisse potenti. Mauris tincidunt semper arcu sit amet mollis. F.2 Maecenas commodo augue est, a condimentum risus. Suspendisse elementum nisi eu ante sagittis eu volutpat quam malesuada. G. Tags G.1 onec faucibus sagittis accumsan. urabitur pretium ligula non tellus dapibus ornare eu vel velit. Fusce velit magna, fermentum at hendrerit id, vehicula sit amet nulla. G.2 Sed aliquam orci ac orci tempus consequat. onec sed nisi lectus. Etiam laoreet luctus nisl, non sollicitudin risus tincidunt et. Nulla facilisi. G.3 Nunc congue cursus turpis vitae dictum. onec sollicitudin molestie neque, quis dapibus risus ultrices venenatis. Vestibulum erat mi, aliquam in porttitor eget, tristique ac nunc. G.4 Nunc nisi nulla, varius sit amet scelerisque sit amet, tincidunt eu dui. Fusce rhoncus ipsum in risus posuere ut luctus dui aliquam. Requirements This page lists all requirements and preconditions of the project. These requirements are gather using Use ases, talking to stakeholders and/or from other project documents. Example project Functional esign Version 1.0 18-4-2013 page 7/19

Site structure What we do Our customers Site structure This pages gives an overview of the structure of the software that is to be developed. The diagram shows the structure, and the colours indicate the different page types or templates. The letters are used for any additional explanation. Home Projects genda log overview News ontact Search results E Project detail Event log article News article 1 2 3 4 5 E Templates Homepage ontent page List page genda Event detail page Functionality Search Every page contains a search field. The search results are shown on the search results page. Related projects Projects can be related to each other. Related projects are listed on a project detail page. Subscribe to events Visitors can subscribe to events. omments Users can comment on blog articles. ontact form The contact page contains a contact form. Example project Functional esign Version 1.0 18-4-2013 page 8/19

ontent relations Tag News article log article Event 1 ontent relations In a diagram the relations between items can be shown. These can be one-to-one, one-to-many, many-to-many, or optional. The relations are also explained in text. Tags News articles, blog articles, events and projects can have multiple tags. These tags can be used for multiple items. Tags are optional. logs about events log articles can be about one single event, but events can have multiple blog items. logs can also not be about an event. Projects and customers Projects always belong to a single customer. ustomers can have multiple projects. Project 1 ustomer Example project Functional esign Version 1.0 18-4-2013 page 9/19

ontent relations - extended News article * I - Title - Text o Picture ontent relations - extended The relation diagram can also be extended to show the properties of each of the items. * indicates an identifying field, a - a required field and a o an optional field. This diagram can be used to create a database model, in which the relations between the items are stored in crosstables. Tag * I - Name log article * I - Title - Text o Picture Event * I - Title - escription - ate o Time o Location 1 Project * I - Title - escription o Technology o elivery date 1 ustomer * I - Name Example project Functional esign Version 1.0 18-4-2013 page 10/19

Navigation Our Website Search L Navigation Home What we do ustomers Projects genda log News ontact Social project Finance project TeleMedicine E First the navigation of the website is explained. Header image The header image is editable from the MS. Main menu The main menu shows all main menu items. Submenu If main menu items have submenu items, these are shown on mouse-over. Search search bar is shown on every page. When a search term is entered and the search icon is clicked or the enter key is hit, the search results page is shown, listing all search results. Footer menu The footer menu is editable from the MS. The email address creates an email to this address (mailto link). ontact us links to the contact page. E info@ourwebsite.nl 012-345 6789 ontact us Example project Functional esign Version 1.0 18-4-2013 page 11/19

Template - Homepage Our Website Search L Template - Homepage ll templates are described on a separate Home What we do ustomers Projects genda log News ontact What we do onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. Read more > log: Our annual congress onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. Read more > slider Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Latest projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > page. The left page shows a wireframe of the page, and on the right features are explained. Home image slider The image slider shows max 5 images with a resolution of 900 x 300, which can be selected in the MS. The slider speed can be configured from the MS, setting the slide speed in seconds. link can be added to each image. What we do The text of the What we do page is shown here, up till the read more break. The page s featured image is shown on the right, scaled maintaining the ratio and cropped to fill the image area (see graphic design for dimensions). log post The newest blog post that is set to featured is shown here, up till the read more break. The image works the same as in the What we do block described above. Latest news/projects In the right sidebar of any page, blocks can be shown. These blocks shown the titles of the latest five items of a certain content type, e.g. News or Projects. The titles link to the appropriate article. The link text below the list is configurable, and always links to the overview page of the selected content type. Which blocks appear on which pages can be configured per main menu item. info@ourwebsite.nl 012-345 6789 ontact us Example project Functional esign Version 1.0 18-4-2013 page 12/19

Template - ontent page Our Website Search L Template - ontent page This is an example of a content page Home What we do ustomers Projects genda log News ontact rticle title ate: 16-4-2013 Lorem ipsum dolor sit amet, consectetur adipiscing elit. onec viverra mauris eu erat ullamcorper at posuere mauris feugiat. onec elementum rutrum tempus. Nulla facilisi. Suspendisse adipiscing, felis in, massa sapien pulvinar enim, at dictum lectus eros vitae enim. enean nec risus nulla, Suspendisse neque ipsum, tempus, vestibulum luctus dui. Quisque ipsum erat, rhoncus eu venenatis eu, egestas non nunc. onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. liquam vitae vestibulum lorem. enean pulvinar tempor vulputate. In ac turpis a augue posuere fringilla in at nulla. Integer arcu nisl, blandit vitae commodo id, aliquam quis libero. Nullam bibendum magna ut elit venenatis laoreet. Phasellus consectetur pellentesque ipsum, in egestas mauris facilisis in. enean leo lorem, scelerisque eu ultricies a, tempus eu nisi. Vivamus nisl metus, interdum blandit euismod ut, sodales ut justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. enean pharetra tincidunt est, et elementum metus sollicitudin eget. Quisque sollicitudin porta volutpat. Mauris iaculis, neque vel suscipit iaculis, urna neque ullamcorper orci, hendrerit convallis dui orci at urna. Phasellus hendrerit tincidunt blandit. Mauris consectetur elit ac lacus vulputate ac mattis enim condimentum. Sed quam nibh, gravida sed malesuada a, condimentum nec nibh. Quisque et nisi sed quam sollicitudin aliquet. Nullam sed magna ut ante interdum feugiat eu ac nibh. Suspendisse eget augue neque. Suspendisse potenti. Nam tristique metus condimentum nunc gravida ut adipiscing diam mattis. Nunc sit amet tortor elit. Praesent velit purus, eleifend porta hendrerit a, scelerisque sit amet quam. Etiam leo dolor, gravida in luctus eget, porta nec eros. Proin vehicula vestibulum bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu odio sed nulla porttitor fermentum. Nunc eu dapibus dui. Nullam sagittis vehicula turpis at mollis. Ut ut ipsum ut lorem tincidunt eleifend. Vestibulum sodales pellentesque consectetur. Nulla facilisi. Integer sit amet mollis nunc. Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Latest projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > template. Featured image The featured image of the article is shown at the top in a fixed size. See the graphic design for the exact image size. s that are larger are scaled maintaining ratio and then cropped to fill the image are. s that are smaller are not stretched, but cropped when necessary, and shown in the center of the image area. rticle details The article title is shown, with the publish date of the article below the title. The body text is shown below that. Sidebar locks The same blocks that are shown on the homepage, can be shown on content pages. info@ourwebsite.nl 012-345 6789 ontact us Example project Functional esign Version 1.0 18-4-2013 page 13/19

Template - List page Our Website Search L Template - List page The list page lists all articles of a certain Home What we do ustomers Projects genda log News ontact log log article title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. Read more > onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. Read more > Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Latest projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > content type. Header image header image can be set in the MS for every list page separately. Title The title of the list page is configurable in the MS. Introduction text n introduction text can be added to the list page. rticles ll articles are listed, ordered by article publish date, descending. 10 articles are shown per page, with pagination at the bottom of the page. The article title and text are shown up till the read more break in the article. The article s featured image is shown, scaled maintaining its ratio and cropped to fill the image area. The read more link is added automatically and links to the article detail page. log article title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. Read more > log article title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas Example project Functional esign Version 1.0 18-4-2013 page 14/19

Template - genda Our Website Search L Template - genda The genda page is different from the other Home What we do ustomers Projects genda log News ontact Our genda Event title Monday March 5 19:00 22:00 ity theater onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Read more > onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. Read more > Mar 5 pr 4 Event title Wednesday pril 4 19:00 22:00 ity theater onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Read more > May 1 Event title Mar 10 Event title Saturday March 10 19:00 22:00 ity theater onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Read more > pr 16 Event title Monday pril 16 19:00 22:00 ity theater onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Read more > May 20 Event title E F Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Latest projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > list pages. Therefore it is described separately. The genda page lists all events. Header image header image can be set in the MS for the agenda page Title The title of the genda page is configurable in the MS. Introduction text n introduction text can be added to the agenda page. Events list ll upcoming events are listed, ordered by event date ascending (left to right, then top to bottom). 20 events are shown per page, with pagination at the bottom of the page. ll event blocks have the same height. Event details The event month (3 characters) and date are shown in the block. The event s featured image is shown next to that, scaled maintaining its ratio and cropped to fill the image area. elow, the event title is listed, and below that the weekday and date, start and end time, and location. The event description is shown up till the read more break, to a maximum to fit in the block. Link The date block, event image and read more link all link to the event detail page. Example project Functional esign Version 1.0 18-4-2013 page 15/19 E F

Template - Event detail Our Website Search L Template - Event detail Events have a different template because Home What we do ustomers Projects genda log News ontact Mar 5 Event title Monday March 5 19:00 22:00 ity theater Lorem ipsum dolor sit amet, consectetur adipiscing elit. onec viverra mauris eu erat ullamcorper at posuere mauris feugiat. onec elementum rutrum tempus. Nulla facilisi. Suspendisse adipiscing, felis in, massa sapien pulvinar enim, at dictum lectus eros vitae enim. enean nec risus nulla, Suspendisse neque ipsum, tempus, vestibulum luctus dui. Quisque ipsum erat, rhoncus eu venenatis eu, egestas non nunc. onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. liquam vitae vestibulum lorem. enean pulvinar tempor vulputate. In ac turpis a augue posuere fringilla in at nulla. Integer arcu nisl, blandit vitae commodo id, aliquam quis libero. Nullam bibendum magna ut elit venenatis laoreet. Phasellus consectetur pellentesque ipsum, in egestas mauris facilisis in. enean leo lorem, scelerisque eu ultricies a, tempus eu nisi. Vivamus nisl metus, interdum blandit euismod ut, sodales ut justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. enean pharetra tincidunt est, et elementum metus sollicitudin eget. Quisque sollicitudin porta volutpat. Mauris iaculis, neque vel suscipit iaculis, urna neque ullamcorper orci, hendrerit convallis dui orci at urna. Phasellus hendrerit tincidunt blandit. Mauris consectetur elit ac lacus vulputate Name ac mattis enim condimentum. Sed quam nibh, gravida sed malesuada a, condimentum nec nibh. Email address Quisque et nisi sed quam sollicitudin aliquet. Nullam sed magna ut ante interdum feugiat eu ac nibh. Suspendisse eget augue neque. Suspendisse potenti. Nam tristique metus condimentum nunc Sign up! gravida ut adipiscing diam mattis. Nunc sit amet tortor elit. Praesent velit purus, eleifend porta hendrerit a, scelerisque sit amet quam. Etiam leo dolor, gravida in luctus eget, porta nec eros. Proin vehicula vestibulum bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu odio sed nulla porttitor fermentum. Nunc eu dapibus dui. Nullam sagittis vehicula turpis at mollis. Ut ut ipsum ut lorem tincidunt eleifend. Vestibulum sodales pellentesque consectetur. Nulla facilisi. Integer sit amet mollis nunc. Sign up! info@ourwebsite.nl 012-345 6789 ontact us Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Latest projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > x the page looks slightly different and has different functionality. The differences compared to a normal content page template are explained below. Event date The event date is shown in a square block, with the month in 3 characters. The event weekday, date, start and end time and location are shown below the title. Sign up Visitors of the website can sign up for events with a signup button. This button calls a popup in which the visitor can enter his name and email address. The visitor then receives a confirmation in his mailbox (of which the text can be configured in the MS) and the visitor details are added to a participants list which can be downloaded from the MS. Example project Functional esign Version 1.0 18-4-2013 page 16/19

Functionality - Search Our Website Search onec pellentesque L Functionality - Search Home What we do ustomers Projects genda log News ontact Search results rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia rticle title onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan ia Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Latest projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > When a visitor enters search terms in the search box in the website header, the search results page is shown. Search terms ll search terms should occur in the search results, no matter in which order or position. When search terms are entered between quotes, the search terms have to occur in the same order. Searched items ll pages and articles of the website are searched. ll text fields are considered in the search. Results list The results are listed, ordered by publish date, descending. 20 results are listed per page, with paging numbers at the bottom. Result item The title and first 140 characters of the body text are shown. oth the title and the body text snippet link to the article or page. Example project Functional esign Version 1.0 18-4-2013 page 17/19

Functionality - Related projects Our Website Search L Functionality - Related projects This page explains how related projects Home What we do ustomers Projects genda log News ontact rticle title ate: 16-4-2013 Lorem ipsum dolor sit amet, consectetur adipiscing elit. onec viverra mauris eu erat ullamcorper at posuere mauris feugiat. onec elementum rutrum tempus. Nulla facilisi. Suspendisse adipiscing, felis in, massa sapien pulvinar enim, at dictum lectus eros vitae enim. enean nec risus nulla, Suspendisse neque ipsum, tempus, vestibulum luctus dui. Quisque ipsum erat, rhoncus eu venenatis eu, egestas non nunc. onec pellentesque enim venenatis augue placerat scelerisque. Nunc porta vestibulum vestibulum. Maecenas laoreet risus non neque accumsan iaculis euismod nulla accumsan. Phasellus massa nibh, porttitor sit amet ornare ac, auctor commodo erat. Proin leo nisl, dapibus a gravida quis, porta ornare augue. Quisque mollis sodales dignissim. Ut fermentum lobortis sapien, quis sollicitudin est laoreet sit amet. Mauris metus lectus, ultrices fermentum fringilla vel, congue sed arcu. liquam vitae vestibulum lorem. enean pulvinar tempor vulputate. In ac turpis a augue posuere fringilla in at nulla. Integer arcu nisl, blandit vitae commodo id, aliquam quis libero. Nullam bibendum magna ut elit venenatis laoreet. Phasellus consectetur pellentesque ipsum, in egestas mauris facilisis in. enean leo lorem, scelerisque eu ultricies a, tempus eu nisi. Vivamus nisl metus, interdum blandit euismod ut, sodales ut justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. enean pharetra tincidunt est, et elementum metus sollicitudin eget. Quisque sollicitudin porta volutpat. Mauris iaculis, neque vel suscipit iaculis, urna neque ullamcorper orci, hendrerit convallis dui orci at urna. Phasellus hendrerit tincidunt blandit. Mauris consectetur elit ac lacus vulputate ac mattis enim condimentum. Sed quam nibh, gravida sed malesuada a, condimentum nec nibh. Quisque et nisi sed quam sollicitudin aliquet. Nullam sed magna ut ante interdum feugiat eu ac nibh. Suspendisse eget augue neque. Suspendisse potenti. Nam tristique metus condimentum nunc gravida ut adipiscing diam mattis. Nunc sit amet tortor elit. Praesent velit purus, eleifend porta hendrerit a, scelerisque sit amet quam. Etiam leo dolor, gravida in luctus eget, porta nec eros. Proin vehicula vestibulum bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu odio sed nulla porttitor fermentum. Nunc eu dapibus dui. Nullam sagittis vehicula turpis at mollis. Ut ut ipsum ut lorem tincidunt eleifend. Vestibulum sodales pellentesque consectetur. Nulla facilisi. Integer sit amet mollis nunc. Latest news onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More news > Related projects onec viverra mauris eu erat onec elementum rutrum tempus. enean nec risus nulla, More projects > work. Related projects If a project has the same tags or is linked to the same customer as the currently displayed project, it is considered as related. The latest 5 related projects are listed here, ordered by publish date, descending. The link More projects links to the general project overview page. info@ourwebsite.nl 012-345 6789 ontact us Example project Functional esign Version 1.0 18-4-2013 page 18/19

Glossary dministrator User that has all rights in the MS. rticle content item of which there can be an unlimited number and new ones are added frequently. rticles belong to a single content type and can be listed on content type list pages. Glossary Here all terms that could be unfamiliar to anyone of the document s target audience are listed, with a short explanation. MS ontent Management System. System in which the content, menus and layout can be managed by the administrator. ontent type rticle type or category that has certain properties and parameters specific for that type. Editor User that has limited rights in the MS. Page n item of which there are a limited number. Pages are not frequently added. Pages can contain content themselves and/or can contain a list of articles. Visitor nyone visiting the website. Example project Functional esign Version 1.0 18-4-2013 page 19/19