Microsoft Word Design Brief ottoschouten nl docx

---

DESIGN BRIEF 
We are aware that a website’s appearance depends on a number of related factors, most 
importantly its: 
A.
Graphic & Visual Design
B.
Content & Content Structure 
C.
Interaction & User Experience Design 
In the first place, by organizing this contest, we are specifically aiming to create an original 
and compelling 
Graphic & Visual Design (A)
. It should fit well with the concept and ideas we 
have about the
Content & Content Structure 
and the
(B)
Interaction & User Experience 
Design (C)
, but we are requesting contestants to focus on 
Graphic & Visual Design (A)
. 
In the next few paragraphs, for the purpose of clarity, we are briefly describing the 
constraints
and 
degrees of freedom
contestants should take into account, when submitting 
their designs. 
Content & Content Structure 
Graphic & Visual Design 
Interaction & User Experience Design 

---

In general: degrees of freedom 
Simply put: 

entries will be evaluated based on Graphic & Visual Design aspects 
We are looking for a web design that is: 

modern and innovative 

authentic, proud and true to the company’s roots 

industrial but sophisticated and detailed 

clear and crisp 

includes the original logo 
Our audience are technically schooled C-level decision makers from (prospective) industrial and 
technical companies looking for a sound and future-proof solution. To be honest: that could become 
uninspiring at best. 
Having said that, we explicitly request that designers try and come up with sparkling and creative 
designs to convey our narrative of innovation and green technology whilst we try and contribute to 
one of the world’s most pressing problems – the circular use plastic and recycling of plastic waste. 
Please also refer to the reference sites we are mentioning in the 99designs assignment form. 
About the logo
The logo, both in terms of its graphic elements and color, should not be altered. 
However, we may consider small changes with regards to its typography if those are relevant to the 
visual design presented. 
About typography 
As mentioned, alternative typography as part of the logo, may be considered. Typography for use in 
titles, headers, sub headers, and a variety of texts can be based on any combination of fonts and self-
designed customizations. For SEO purposes we have a slight preference for using web safe Google 
fonts for some texts (H1, H2, bread texts). 

---

About colors 
Green has always been part of MOS branding (please see different shades of green used in the old 
print designs included). And it does reflect our message of sustainability and green technology. 
However, we will consider any color combination that fits with the MOS green in the logo, that 
visually makes sense. 
About the use of imagery 
Because our target audience (technical buyers) will have an eye for detail, we will need to be as 
accurate as we possibly can about the imagery that is used on the website 
1) Atmospheric Images 
Hero images 
We did include initial imagery that could be used for the hero image on the home page 
(
folder: Atmospheric – Hero Image
): 

HERO1: an image of a plastic recycling system (an ‘installation’) 

HERO2: depicting people working on machine construction

HERO3: the problem for which we offer a solution: plastic waste 
The above are 
suggestions only
and we will be considering any and all alternatives, such as for 
example other images depicting: 

the problem our technology solves, i.e. plastic waste (but not empty plastic (PET) bottles (we do 
not offer systems that can process / recycle PET (=Poly Ethylene Tereftalate) 

the solution our technology ultimately brings, i.e., clean environment 

metal workers proudly at work 
Stock images are allowed and designers are encouraged to suggest any image they feel enhances the 
design. 
Corporate images 
We have included historical photos and current images of MOS manufacturing facilities 
(folder: 
Atmospheric – Plant Retro and Atmospheric – Plant Today
): 

---

2) Logos 
We have included the MOS logo and logos of some of our references for use in your designs. 
(
folder: Logo MOS, Logo References
): 
3) Product Images 
We have included specific product imagery that may be used for product category and product 
representation. Some of the images provided are 3D renderings, some of them are product images 
from which the background has been removed. 
MOS products can be categorized as follows: 
A)
Individual 
Machines
B)
Units 
typically consisting of a number of machines combined to perform a specific task such 
as washing, drying or separating out plastic from other waste 
C)
Installation
, consisting of multiple Units and built for complete recycling solutions 
The content of the folders: 

Products – 0 Overview 
An image depicting a sample Installation: a complete plastic waste recycling processing line. Can be 
used on the Product Overview page as a visual starting point to navigate to individual Machines / 
Product Detail pages. 

Products – 1 Machines – All 
Images of all types of machines MOS offers. For use in the Mega Menu. 

Products – 1 Machines – Miscellaneous 
Miscellaneous images of machines 

Products – 1 Machines – Sieve 
Different images of one specific machine: a sieve. For use on the Product Detail page 

Products – 2 Units 
Images of a number of Units MOS offers. Potentially for use in the Mega Menu. 

Products – 3 Installations – Client Installations
Images of a number of client installations, photographed at the manufacturing facilities before being 
shipped to the customer

Products – 3 Installations 
Images of a number of Installations MOS offers. Potentially for use in the Mega Menu. 

---

About the Interaction Design / Wireframe 
In order for the contestants to be able to concentrate their efforts on creating an optimal graphic and 
visual design, we have included a wireframe for the new website. 
IO ottoschouten.nl 
The wireframe only visually describes the function of specific elements
of the website’s appearance 
but is not in anyway restrictive when it comes to what these elements look like. If these functions 
(what happens when a user sees or clicks or otherwise interacts with these elements) can be 
achieved in a different, more visually appealing way, 
we encourage contestants to incorporate that 
into their designs
. 
We are expecting a coherent set of designs for the following pages: 
1)
Home Page (1 and 2 = one page) 
a.
Logo 
b.
Main Navigation (+ Mega Menu) 
c.
Meta Navigation 
Please add a search box, social media icons and a language switch where you see fit 
(for example, in the additional info box). We may also have a toggle switch here, 
linking to a sister website that will have a design to match (out of scope of this 
assignment) 
d.
Hero Image 
e.
Pay-Off 
f.
A number of strips containing content elements / blocks i.e. 
I.
Highlighted Product or Article 
II.
Contact form / Call-to-Action 
III.
Logos of references 
IV.
Text 
V.
Article and Accompanying Image 
VI.
Project Portfolio 
VII.
Quotation Request Form 
VIII.
Reference 
IX.
Product Configuration 
X.
Footer 

---

IMPORTANT 

The 
Meta Navigation
(+ additional info) will direct people to corporate content pages, but may 
also be used as a toggle to another website featuring another area of expertise of MOS. This is 
out-of-scope for this assignment. We may also want to show the multilanguage selector there) 

The 
Main Navigation
could (but not necessarily will) be used to depict a range of 8-12 individual 
machines of which a plastic recycling system can (see below). We may want to use a Mega Menu 
where visitors can scroll through the modules to quicky find the one they are looking for. 
o
Centrifuges 
o
Float-Sink Separators 
o
Water Treatment 
o
Screw Conveyors 
o
Dosing Hoppers 
o
Sorting Drums 
o
Vibrating Sieves 
o
End Product Hoppers 
o
Air Treatment 
o
Blow Transport 
o
Belt Conveyors 
o
Metal Detection
In addition to (individual) Machines. the
Mega Menu could 
also depict (special purpose) Units 
and (complete) Installations. We have described this feature in the second variant of the Mega 
Menu.
2)
Content Page 
a.
Logo 
b.
Main Navigation (+ Mega Menu) 
c.
Meta Navigation 
d.
Hero Image or Header Bar 
e.
Content 
f.
Related Articles 
g.
Footer 
IMPORTANT 

Please design a corporate content page visualizing the roots of the company using the historical 
images provided 

---

3)
Product Overview Page 
a.
Logo 
b.
Main Navigation (+ Mega Menu) 
c.
Meta Navigation 
d.
Hero Image or Header Bar 
e.
A visual or schematic representation of a Plastic Recycle System 
f.
Modules of which a Plastic Recycle System consists 
g.
Footer 
IMPORTANT 

We will consider any creative solution to visualize a product overview, from schematic to realistic 
3D, in order to provide the visitor with an intuitive and clear overview of what the company can 
offer. 
4)
Product Detail Page 
a.
Logo 
b.
Main Navigation (+ Mega Menu) 
c.
Meta Navigation 
d.
Header Bar 
e.
Product Description 
f.
Product Details & Images 
g.
Footer 

---

Technical Implementation
The technical implementation of the website using a CMS is NOT part of the contest. 
However, we will need to find an efficient way to turn the designs into HTML pages that can be used 
for the technical implementation of the CMS. 
We do not want the contestants to be restricted in any way to deliver attractive designs and creative 
graphic solutions for example by demanding the use of a template set. We leave it up t the designers 
to select a ‘boxed’ or ‘full-width’ design. 
Responsiveness and design framework 
If at all possible, we do encourage designers to specify technical frameworks that they are using or 
recommend us to use for the technical implementation. 
The Wireframe document uses the following template and elements as its inspiration. 
https://themes.semicolonweb.com/html/canvas/blocks.html
but it doesn’t in any way restrict the designers freedom of creativity. To limit the resources that we 
need to spend on developing the HTML, designers are encouraged to keep in mind a popular 
framework like Bootstrap ( 
https://getbootstrap.com
). 
Although the main goal of the assignment is to create a beautiful design for desktop, the design 
should take into account that we will be creating a fully responsive website. 
However, we will not ask you to deliver a pixel precise PSD but, rather, give a fairly precise concept of 
what specific design elements will look like on a mobile device. 
We do understand this will be specifically challenging for the Mega Menu.

---

Websites 
Direct competitors 
(we would like to be much better than them) 
www.boarecycling.com

attractive graphic elements 

use of imagery to present the problem, not the technical solution
www.spaleck.com

bold use of color in a (boring) B2B segment (although we don’t necessarily like the color used) 

modern Look & Feel 
www.senro.eu

use of 3D imagery for products and a complete plastic recycling system 
(hero image and navigation) 

color 
IMPORTANT 
We very much like the way you can have a visual overview and navigate from a complete assembly 
line to individual machines and units. We would like to use the same concept on the Product 
Overview page. 
www.hermion.nl

Look & Feel 

Color 
Other websites in the industry 
…selected for the applicability of (elements) their designs or over-all Look & Feel: 
www.prall-tec.de

Clean, fresh 

modern Look & Feel 

---

And three examples from unrelated industries: 
(which we like for specific reasons) 
www.prescan.nl
(8 out of 10) 

use of blocks and colors and typography which makes the design intuitive and easy on the eyes 

use of a large hero image 
www.bovil.nl 
(7 out of 10) 

use of ‘tablet’ ready interface (hamburger menu) and lay-out 
and with reference to specific design elements we need: 
www.smit.com

use of colors and typography making a large website still feel clear and organized 

use of a mega-menu