search

inasafe / inasafe-doc

Documentation project for InaSAFE
5 stars 27 forks source link

The website styling at http://inasafe.org needs to be reviewed and modernised #241

Closed timlinux closed 9 years ago

timlinux commented 9 years ago

We should apply best practices like:

In addition the general look and feel, colour pallettes etc need to be reviewed for consistency.

MariaSolovyeva commented 9 years ago

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

timlinux commented 9 years ago

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:

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:

Secondary objectives of the site would be:

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:

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.

Charlotte-Morgan commented 9 years ago

Hi @MariaSolovyeva

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

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:

Will our requirements change over time - yes :)

I hope this is useful, please get in touch if you have more questions.

MariaSolovyeva commented 9 years ago

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:

Slider area. I have two variants for it.

Blocks of the homepage.

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 home-wireframe1

With second variant of menu and featured video and highlighted links. home-wireframe2

Awaiting for your feedback, thank you!

timlinux commented 9 years ago

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.

MariaSolovyeva commented 9 years ago

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:

Blog:

External links:

How it can be:

Top level menu:

Bottom for the blog:

Bottom for the documentation part:

What do you think on adding the FAQ page? Let me know what you think.

MariaSolovyeva commented 9 years ago

I attach here few mock-ups of the two-level menu :

menu_dark_home menu_dark_home2 menu_dark_inner

menu_light_home menu_light_inner

MariaSolovyeva commented 9 years ago

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

timlinux commented 9 years ago

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...

Charlotte-Morgan commented 9 years ago

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

MariaSolovyeva commented 9 years ago

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.

menu_home menu_user menu_developer

MariaSolovyeva commented 9 years ago

Then, in the Wordpress dashboard we can create easily editable links choice for each navigation bar to add some flexibility.

MariaSolovyeva commented 9 years ago

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.

menu_home2 menu_contributor menu_about menu_user2

timlinux commented 9 years ago

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

timlinux commented 9 years ago

Hi @MariaSolovyeva

selection_001

Could you review the rounded corners on the top of the dropped down part as per the screenshot above?

Thanks

Tim

timlinux commented 9 years ago

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?

Charlotte-Morgan commented 9 years ago

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?