The website styling at http://inasafe.org needs to be reviewed and modernised
timlinux opened this issue · 17 comments
We should apply best practices like:
- readability
- responsiveness
- clear navigation
In addition the general look and feel, colour pallettes etc need to be reviewed for consistency.
I have few brief questions which will help me to organize better the site structure and styling:
What is the audience of the site?
What is the image of the company? What the website should reflect about it? Here are few examples
( Cutting-Edge Unique/Creative Clean/Simple Flashy Professional Glamourous Futuristic Trendy Content Driven Conservative Friendly For Children Family Oriented Academic International Exciting Sophisticated Corporate Modern Industrial Inspirational Colorful Humorous Soft Elegant Nature Complex Progressive Service Oriented Other Traditional High Tech Fun Masculine Feminine )
What the visitors are looking for on the site? Where they should be driven to? (watch video, read documentation, read blog, subcsribe, learn about the company, download..)
Do you plan to add extra blocks to the site, like
- news
- gallery
- twitter feed
Hi
I have few brief questions which will help me to organize better the site structure and styling:
OK!
What is the audience of the site?
There are different audiences:
- for the initial part of the site (front page and feeds etc) it will be disaster manager, humanitarian workers and people interested in the latest news, events and information relating to InaSAFE
- within the training and socialisation section, the audience is trainers and users who want to learn InaSAFE and understand the workflows relating to InaSAFE
- within the user map area (which should probably also be linked to on the front page as a small embedded map), our audience is people interested in knowing about upcoming training events and registering themselves as users of InaSAFE.
- within the developer area the audience will be developers and power users looking to learn how to extend InaSAFE to their needs.
What is the image of the company?
So InaSAFE is a community project that is supported by the Australia Facility for Disaster Reduction (AIFDR), the World Bank / Global Facility for Disaster Reduction and Recovery (GFDRR) and the BNPB (the Indonesia national disaster agency). We need to first present ourselves as a community project while making sure that our funders are properly acknowledged on the site.
As a community project developing an open source project, we need to be welcoming to our users and potential developers and probably a little more friendly and engaging than a traditional corporate web site.
What the website should reflect about it? Here are few examples
( Cutting-Edge Unique/Creative Clean/Simple Flashy Professional Glamourous Futuristic Trendy Content Driven Conservative Friendly For Children Family Oriented Academic International Exciting Sophisticated Corporate Modern Industrial Inspirational Colorful Humorous Soft Elegant Nature Complex Progressive Service Oriented Other Traditional High Tech Fun Masculine Feminine )
- clean
- international
- progressive
- high tech
- academic
What the visitors are looking for on the site? Where they should be driven to? (watch video, read documentation, read blog, subcsribe, learn about the company, download..)
Ok I covered this a bit above. To add to that there are three main messages our front page should deliver:
- the purpose of our software and the project
- quick instructions for installing it
- a pointer to detailed instructions on how to use it
Secondary objectives of the site would be:
- to make announcements about new software releases, upcoming and recent events
- to provide access to useful data and resources
- to invite people to collaborate in the development of InaSAFE
- to invite people to join our community of users
- to relay detailed technical information about the capabilities of the software
Do you plan to add extra blocks to the site, like
news
Yes
gallery
This would be great
twitter feed
This would be great too
Plus the user map (with outward links to the full map page).
We will have a bunch of 'destinations' that should all be easily navigable from the site:
- training documentation and socialisation materials
- user map
- realtime events (generated impact reports that follow earthquakes and in future other disasters)
- data downloads
- developer documentation
- instructions for joining the mailing list
- instructions for joining our chat room
- technical documentation about out impact functions
- our software test suite and current status
- a video wall for our youtube channel
- live web maps
Please bear in mind that we need to combine a number of different sites deployed using different systems (wordpress, sphinx, django sites, github pages etc.) and they all need to appear as one cohesive suite.
@Charlotte-Morgan please feel to comment further if you have any specific aspirations for the suite of web sites etc. we deliver.
- 1 for all @timlinux comments above, and here are a few more.
Audience:
The site needs to support people (users / developers) who have either been formally introduced to material through training or who are interested in finding information for themselves.
Image:
It needs to be easy to navigate, seamlessly link material stored and managed in different places and work fast in slow environments.
I'd add two more to Tim's list
- professional
- user friendly
- relevant
- current
The front page needs to be current with the latest info being the first thing people see. Different users will want different info and making what people want easy to find is the challenge.
Links:
- partners
- supporters
- events
Will our requirements change over time - yes :)
I hope this is useful, please get in touch if you have more questions.
Hello @timlinux and @Charlotte-Morgan
Here are my ideas about the website:
Navigation.
The most important links should be highlighted and easily accessible. The secondary menu is too much on the sides, we should find a better position for it.
I propose to:
- bring About section from the documentation to the Wordpress site , this way it will be easier edited and will be more flexible about adding news, events, meetings etc.
- create a separate link to the training materials in the navigation menu
- create F.A.Q. Page
- create Contact page
- separate menu in two lines
- make the navigation menu always visible ( ex. http://www.zoho.com/crm/features.html )
Slider area.
I have two variants for it.
- To make it fullwidth, with taller images.
- To place introducing video into this area, accompained with an into text and the main links, for exapmle:
Download
Documentation
Training materials
Blocks of the homepage.
- What is InaSAFE
- Our news. Here I am not sure if it is logic to put user map and realtime events in this block. Actually, I am not sure at all what is user map! Should be discussed. Same about realtime events.
- Install section
- Help us block
- Videos, 3 or 4 with the link to the video page
- Partners.
Elements style.
Flat design. It is better to remove the gradients and shadows and add some solid colors blocks. Bold typeface.
Light design, home page illustrated with icons, white space.
Examples:
http://www.advancedcustomfields.com/ - colors, font size, white space
http://www.zoho.com/crm/features.html - navigation menu, icons, page blocks
http://mailchimp.com/features/ - menu, typography
https://www.campaignmonitor.com/ ,
https://www.campaignmonitor.com/worldview/ - header, map illustration, each section has its color, main links buttons, homepage blocks
Here are two draft wireframes of homepage:
With first variant of the menu and image slider
With second variant of menu and featured video and highlighted links.
Awaiting for your feedback, thank you!
Hi @maria
Thanks for this - its really great to have some wireframes to discuss against. Personally I think the second variation is nicer, though we need to see what @Charlotte-Morgan thinks too. There are some details we will need to go into - in particular how we will manage the transition between different sub sites while still making it feel like you are on one site. One thing I had thought to do in this regards was to use the first level menu as a 'global' menu, and the second level menu as a sub-site specific menu. So for example when you are on the blog, you can use the global menu to navigate to the user docs and the second level menu to navigate around the blog.
I very much like your ideas about flattening the theme and making everything more harmonised - I will try to find some other sites that I think are good examples - I liked the worldview one.
Hello Tim and @Charlotte-Morgan
@timlinux , thank you for your comment.
So lets get more clear on the menu structure.
What we have now:
InaSAFE site:
- About
- Training materials
- User documentation
- Developer documentation
- API documentation
- Road map
Blog:
- Posts
External links:
- Report an issue
- Get the code
- Chat live
How it can be:
Top level menu:
- Home (Logo)
- Documentation
- Blog
- Report an issue
- Get the code
- Chat live
Bottom for the blog:
- News (releases)
- Events (trainings)
- Real-time events ?
- User map?
Bottom for the documentation part:
- About
- Training materials
- User documentation
- Developer documentation
- API documentation
- Road map
What do you think on adding the FAQ page?
Let me know what you think.
I attach here few mock-ups of the two-level menu :
I think it will be fine to give different accent colors to the different parts of the site, like
orange for the blog,
green for the docs or download area.
actually we can give the third color to the downloads
Hi @MariaSolovyeva I really like this - it looks really clean, neat and professional - a big improvement over our current site. I also like very much the idea of using different colour second level menus as a visual queue to which part of the site you are in. Great work! Lets see if @Charlotte-Morgan has any comments...
hi @MariaSolovyeva
This looks great & thanks for your work so far on this.
I like version 2 of the wireframe as well. I'm not a fan of the auto gallery slider. In fact i turn the site off because it causes me 'pain' to have the images moving across the screen :(
The different colours are an interesting idea. I'm not sure how important this is, but then asking a colourblind person is probably not a good idea. I focus more on fonts and layout to manage the users attention.
I have not read everything you have suggested above in detail but here are a few ideas:
prominent and easy to find for users should be : - release announcements, how to download the software, how to use the software, access to training documents and data, how to get help.
i guess there is a different list of high priority links for developers - that is your challenge, making one web site exciting for users and developers when they may be looking for completely different things.
Another way to break things up (use colours) could be by 'users', 'developers' ...or 'just browsing'.
looking forward to seeing some more samples
Hello @timlinux and @Charlotte-Morgan
Thank you for your feedback.
Here is more clear idea for the menu structure.
Let's propose the choice User/Developer since the beginning of the navigation, letting the rest of the homepage to give general company information.
Then, in the Wordpress dashboard we can create easily editable links choice for each navigation bar to add some flexibility.
Hello @timlinux and @Charlotte-Morgan
Here is the menu structure as I see it now. I propose to make a drop-down for the contributors, in order not to add one more level to the visual menu. Let me know if you agree.
PS. I have changed green to the violet.
Hi Maria
Personally I preferred the green to the purple / violet. Could I suggest you start moving the prototype to the test blog so we can try it out on a live site. I think the general concept you have looks great and we can always do more tweaking on the running site
Then menu structure is looking very nice now thanks!.
Regards
Tim
Could you review the rounded corners on the top of the dropped down part as per the screenshot above?
Thanks
Tim
Perhaps also would be good to set the rounding of the dropped down part to match the rounding of the selection widget (i.e. reduce the rounding on the very bottom corners of the drop down?
H @MariaSolovyeva
Sorry its taken so long to look at this again & i'm not sure what your priority is for feedback now.
I like the dual menu bar but find the writing a little small. Would it be possible to make these a little bigger?