« Previous -
Version 32/81
(diff) -
Next » -
Current version
Antonio De Marinis, 03/14/2011 11:15
= EEA Website Design 2011 =
This document is the starting point for the re-design work for the EEA website during its platform upgrade to Plone 4 in 2011.
'''Re-design 2011 main goals:'''
- '''Refreshed design'''
- '''Accomodate design for better mobile accessibility'''
- '''Improve general template layout (header, footer, navigation)'''
- '''Improve front page layout'''
- '''Improve layout of several main areas and templates'''
- '''Adress some issues found in [https://svn.eionet.europa.eu/projects/Zope/raw-attachment/wiki/DesignStudy2011/Utest_summer2010_final.pdf latest usability test 2010]'''
''' Phases '''
Main phases of the project,
1. Brainstorming, requirements gathering
2. create some wireframes
3. feedback on wireframes
4. mockups and feedback
5. implementation plan
6. ...1. '''clean and simple design conform to [http://www.eea.europa.eu/about-us/documents/corporate-identity-manual EEA Corporate identity manual]'''
1. avoid the use of borders and boxes (use simply background color to separate/highlight areas)
1. make use of overlays
1. make use of transparency
1. make use rounded corners with CSS
1. use JQuery effects (slides, accordion etc)
1. more use of larger images, e.g. as background for messages, for thematic pages, in articles/news
1. adaptable design to smaller screens (small internet devices like smart phones and tablets)
1. start using HTML5 where possible and relevant
1. move 2 level navigation (left navigation) to the right column (not sure here of the implications ...)
1. make 2 level column navigation wider (as screen as wider today and the content are is better readable)
1. introduce breadcrumb
1. full screen mode
1. smaller top header for application / large sub sites Main template
The main template (header, footer, main navigation, main layout) needs to be refined and extended with a few features.
This is what I have in mind:
More distinct header for front page (tall as today is ok) and less intruisive for subpages (smaller), giving more estate to the content below and/or subsite identification.
The top and bottom background color should go the entire width. similar to http://www.greenpeace.org
Content area still centered as today.
Smaller width for article pages to make it easier to read (the textual content area) by widening the sub navigation (left or right) and/or adding extra portlets.
For the multilingual dropdown, we need to add an icon (not flags) which indicate a language switch (necessary when user does not know the actual language), maybe we can use a small map of europe (greenpeace and other user the world map)
Specific pages === Frontpage ===page: http://www.eea.europa.eu
The area "In the spotlight" needs improvement. The small peripheral images are not really seen, lacking text info.
There is a need for having "topic of the month" staying for some months, always visible (not rotating with others)
Maybe we can use some sliding areas like it is done on http://data.gov.uk/ for other "secondary spotlights items" :)
=== Data and maps ===
page: http://www.eea.europa.eu/data-and-maps
Here we want to have an improved layout.
We were thinking of a Search input box on top. Then an area which highlight the most popular content, with image preview.
Some main entrance points by type as we have now would go below (Datasets, Maps and Graphs, Indicators, Interactive maps).
"Data providers and partners" and "European data centres" should go at the bottom of the page, a bit smaller.
We also want to have areas like: "Most downloaded dataset" and "data by type"
Some inspiration of functionality can be taken here: * http://www.data.gov * http://data.gov.uk/data
=== Environmental topics ===
page: http://www.eea.europa.eu/themes
this page needs layout improvement
We want to highlight some topics over other. maybe using rotating SOER key messages/facts (see http://www.eea.europa.eu/soer) over images.
=== Topic entrance page ===
example: http://www.eea.europa.eu/themes/climate
Current perceived issues: * Too many items on the left menu (too crowded sometimes, see extreme case http://www.eea.europa.eu/themes/water). * Too many items on front page (perceived issue on first impact, not a usability issue i think)
Maybe having tabs as done on http://www.greenpeace.org/international/en/campaigns/climate-change/ can reduce the left navigation sections and/or the latest boxes.
Image(tabs-latest-on-topic,400px)
Still need discussion on what to do here.
=== Article/News template ===
current layout examples:
http://www.eea.europa.eu/highlights/renewable-energy-production-must-grow
http://www.eea.europa.eu/highlights/eea-to-enhance-cooperation-with-greenland
issues: picture is too small and floating right, not really well placed
We want to have a better layout for main picture, themes portlet, and quotation.
Possible solution:
- large picture floating left
- move quotation to the right (otherwise it conflicts with image) and a bit more down.
- make themes portlet inline just below the title. (as an horisontal list)
Idea:
- to use the description text (bold under title) on a semi-transparent overlay on the large image via css. Similar to the overlay below (of course without the > read more links)
Image(description on image, 400px)
TO BE CONTINUED
=== Websites for inspiration ===
In the following sites there are some good elements of design which can give us some inspiration.
'''Previous design studies''' * 2010: https://svn.eionet.europa.eu/projects/Zope/attachment/wiki/DesignStudy2011/Utest_summer2010_final.pdf * 2009: [wiki:RedesignPlan2009] * 2009: [wiki:SwotWebDesignStudy2009] * 2008: ThemesDesignStudies * 2007: EeaDesignStudies
'''Other'''
- [http://www.eea.europa.eu/about-us/documents/corporate-identity-manual EEA Corporate identity manual]
- see also [wiki:WebHistory EEA design history]
