Warning: For up to date information about the new website design go to lighthouse.
Design actions
- General improvements on the current website
- Change background color to a lighter gray
- Change text typography to Georgia
- Change headlines and menus typography to Arvo (font-face)
- Have bigger margins on boxes (15px to 20px)
- Change position of course avatar (have it as the first box to appear)
- Make boxes backgrounds less shiny
- Make the 'My Actions', 'My Courses' etc dropdown menus into just one: My P2PU
- Change positions of Webcraft and Login/Register on main menu
- Have bigger course titles on course pages
- Collapse course description with a 'Read more' link
- Add thumbnails to Files uploaded
- Development of the new website
- Home page - courses carousel, dynamic search, find/run courses actions
- Showcase - what people are doing (good activities made during the courses), what people are saying (press), which people support the platform
- Course home - collapsible course description/course organizer box on horizontal top, shorter menu bar, course title = breadcrumbs, dashboard shows tasks and activities for an specific task, tasks come from the syllabus and can be reordered
- Important discussions to be taken
- Analyze restrictions of the new design related to localizing
- Define main menu items/links
- Manage search filters (specially on future localized pages)
FILES
Nov 9th, 2010
Changes: First draft
PSD version: https://files.pbworks.com/download/jzCuSNoAT5/p2pu/32345016/P2PU%20home%20page%20v2.psd.zip
Dec 18th, 2010
Changes: Home page final version; insertion of localizing options; texts and links susceptible to change on demand.
PNG version (English): http://wiki.p2pu.org/f/P2PU_Home.png
PNG version (Portuguese): http://wiki.p2pu.org/f/P2PU_Home_PT.png
Dec 20th, 2010
Changes: Showcase design
PNG version: http://wiki.p2pu.org/f/P2PU_Showcase1.png
Comments (4)
B Maura Townsend said
at 9:14 pm on Jan 27, 2011
Can we try for better contrast in the menus? Also, perhaps swapping the background color and text color when highlighted would be better, usability-wise.
João Menezes said
at 12:03 am on Jan 28, 2011
Hello Maura, thanks for your feedback.
Your suggestions were already implemented by Brian on the HTML/CSS version. Please check it thru this link: http://p2pu.brianloves.it/
B Maura Townsend said
at 6:39 pm on Jan 28, 2011
Actually, these comments are in reference to the mockup you linked. The menus are too low-contrast to be easily usable, and the background is distracting.
The higher contrast of the black pinstripe texture against the white background draws the eye away from the lower contrast menuing, even if it is not negatively affecting the main content. Would it be possible to make the black pinstripe lower contrast? Perhaps a gray about the current color of the un-highlighted menu text? That would increase the usability without lowering the overall visual impact.
The menus at the top are fairly low contrast, light bluish gray against white, with the eye drawn away by the high-contrast background.The highlight is good, with decent contrast, though I'm worried about accessibility for colorblind users. The text in this menu should really be at least as dark a gray as the text in the captions shown in the main content areas.
The menus at the bottom are low contrast unless highlighted, medium gray on medium-luminance colors. The highlight is so subtle as to be lost on many viewers. I'd propose making the text darker on these menus and making the highlight a swap of text and background color. I realize that this is the same shade as the dark gray in the content areas, but that is negated by the medium-luminance background color bars.
Zuzel Vera said
at 12:11 am on Mar 29, 2011
Related links:
* https://github.com/p2pu/PSDs
* https://github.com/brianlovesdata/lernanta-cut
You don't have permission to comment on this page.