The document provides a vision for redesigning the sitra.fi website. It outlines key elements of the proposed design such as a bold violet bar at the top, large photographic banners, and emphasized topics. The design is based on a grid system and includes sections, navigation elements, and social media streams. Concepts like rewarding user activity and sharing site content are also proposed. Wireframes and contact information are included at the end.
1. AUCOR OY & SYNEUS OY 1
SITRA.FI DEVELOPMENT PROJECT
VISION OF THE
PROJECT RESULT
Welcome to the first glimpse of the new sitra.fi,
this is our vision.
There’s more color, more visual data and all the
existing content is accompanied by streams of live
social media content.
In the following pages we proudly demonstrate how
we will build a website that feeds users’ needs and
transforms them into super users.
About the design
• Key elements of the design are the bold violet bar at
the top and the large photographic banner overlaid
with headline text and links.
• The main photographic element on the home page
brings in warm tones to complement the violet of
the main brand color.
• 3-4 emphasized site topics in the main color bar,
with primary navigation following below.
• The layout is based on a grid system (960px wide,
12 columns), making it easy to expand while
ensuring a consistent visual rhythm throughout the
site.
• Full layout images for home page, sub page and
search results page can be found in the last pages
of this document. (pages 8 and 9)
2. AUCOR OY & SYNEUS OY 2
SITRA.FI DEVELOPMENT PROJECT
MAIN SECTIONS AND HOME PAGE
This diagram displays the relationships between the visual elements of the
design and the logical sections of the site. The content of the home page,
and the emphasis of certain content and navigational elements over others,
Etusivu English Svenska Haku
are based on our vision of the most important parts of the Sitra site.
= top subject menu
Mitä ja
Esittely Ohjelmat Tulevaisuustyö Julkaisutoiminta Ajankohtaista Viestintä Yhteystiedot
kenelle
= primary navigation
•Tiedotteet
The 4th item in the topic bar can be a promoted
section taken from deeper within the site. •Tapahtumat
•Artikkelit ja puheenvuorot
•Logot ja kuvat
•Twitter, LinkedIn, Facebook
•Tapahtumat
•Tavoitteista totta
•Puheenvuorot
•Puheet ja esitysmateriaalit
•Seminaarit verkossa
•Tilaa tiedotteet ja uutiskirje
Simple sitemap inside footer
3. AUCOR OY & SYNEUS OY 3
SITRA.FI DEVELOPMENT PROJECT
HOME PAGE HOME PAGE WIREFRAME
Subject navigation.
Primary navigation.
Quicklinks to
programs.
Quicklinks to
RSS feeds.
Content
Sitra Lifestream
(Social Media).
Footer with
basic contact
information
and
simplified
sitemap.
4. AUCOR OY & SYNEUS OY 4
SITRA.FI DEVELOPMENT PROJECT
SUB PAGE SUB PAGE WIREFRAME
Breadcrumb trail
Title & subtitle
Content
Secondary
navigation
Image with
description text
and source icon
(flickr)
Highlighted
list element
Footer with
sitemap
throughout
the site
5. AUCOR OY & SYNEUS OY 5
SITRA.FI DEVELOPMENT PROJECT
HOME PAGE FEATURES SEARCHING
Instant search
suggestions on any
page.
Subject
navigation
opened by mouse
hover.
Original search
terms displayed
in a search
field, making
them easy to
refine for
another search.
Quicklink hover
color is derived
from the program Filter search
it represents. results by
selecting a
category.
Keyword
Hyperlink colors for highlighting
active, with recognition
visited and of different
normal links. word
declensions.
Thumbnail
images on
results that
contain relevant
media.
6. AUCOR OY & SYNEUS OY 6
SITRA.FI DEVELOPMENT PROJECT
CONTENT MANAGEMENT MOBILE VERSION
Images, video and audio are managed with Stardust Media Manager.
The media manager can easily be integrated with various backends
such as Sitra's MOSS media bank and Flickr.
If a mobile
browser is
detected, the
user is
prompted to
choose between
full and
stripped down
Edit image screen version of the
site.
7. AUCOR OY & SYNEUS OY 7
SITRA.FI DEVELOPMENT PROJECT
SPECIAL FEATURES
Demonstrated here are just a few concept ideas that we feel would lift
the new sitra.fi user experience to a whole new level.
MOTIVATING SITRA.FI USERS WITH REWARDS DOCUMENT HIGHLIGHTING & SHARING
Reward active users with badges,
honorary titles or other credit.
Activity points can be collected by
simply going through material on the
site, commenting on articles and
writing or validating content.
Each user can get points just by
activating his/her profile page, and
more would be given for e.g. Experimental concept, highlight and share documents or
uploading a profile picture (+10 blog articles within browser with save and share functions.
points). Even more points could be
See Panic Inc.’s Coda Notes for Safari
earned through TOP-lists (see picture)
(http://www.panic.com/blog/2010/07/coda-notes-for-safari-now-available/) for
similar and fully functional example.
User motivating in action: Stack Overflow
(http://stackoverflow.com/badges)
URL SHORTENER
Short links for Twitter and other social media sharing.
Very convenient for sharing a link on paper or written by hand.
E.g. the shortened version for
www.sitra.fi/fi/Ohjelmat/suomen_elinvoiman_lahteet_kehitysohjelma_ohjelmat.htm
could be simply l.sitra.fi/dok25
See bit.ly or Syneus Solutions’ lyh.fi
8. AUCOR OY & SYNEUS OY
SITRA.FI LAYOUT,
HOME PAGE AND SUB PAGE
8
9. AUCOR OY & SYNEUS OY 9
SITRA.FI LAYOUT,
SEARCH RESULTS
10. AUCOR OY & SYNEUS OY 10
SITRA.FI DEVELOPMENT PROJECT
CONTACT INFORMATION
AUCOR OY SYNEUS OY
CEO Janne Jääskeläinen CEO Ville Säävuori
janne@aucor.fi ville@syneus.fi
040 577 0215 040 576 5828
www.aucor.fi www.syneus.fi