Ticket #267 (closed enhancement: fixed)

Opened 5 years ago

Last modified 5 years ago

Design general

Reported by: ed Owned by: laura
Priority: critical Milestone: Phase 4
Component: Drupal modules & settings Keywords:
Cc: jim Estimated Number of Hours: 0.0
Add Hours to Ticket: 0 Billable?: yes
Total Hours: 0

Description

Laura design stuff that she thinks needs doing
Please see the training homepage screengrab for an idea from a marketer which is quite good
Talk to and work with the book designer to find some coherence with the new book design
Transition US site has gone down very well with users and staff members
In general - bring it a bit trendier, bit whiter, etc. Another step on, so to speak. So it feels fresher, lighter, bit less hobbit-y, bit more urban-y. But sticking to user profile of 'older' and 'a bit afraid of technology'

Change History

comment:1 Changed 5 years ago by ed

From meetings with Ben and Ed:

Design meeting Totnes and Skype 6/7
Laura
Ben
Ed

  1. what's been done
  2. what's proposed
  3. ben has given feedback
  1. What's been done
  • changed various bits - mostly on header
  • moved elements into a global nav bar
  • main navigation home changed into an icon
  • main nav now tabs on white
  • playing with ideas about different blocks/panels shading and backgrounds, all minimal lightweight css
  • bottom - follow us icon as example -
  • font for headers - moved to arvo font - clean and light - complements style from book without being too heavy and blocky -
  • logo smaller
  • lightened line weighting and space tweaks
  • hover links will be smooth transitiony - can't see right now - make a bit more feminine
  • tried different borders round pictures - see homepage
  1. Ben Feedback

header and navigation

  • logo needs more space around it all round and needs to be a bit bigger
  • happy with house sketch moving to bottom and not having big green header and difference in height between logo and global nav bar
  • doesn't like it butting up against the global nav bar
  • doesn't like shadowing around logo
  • not keen on mixed fonts but wouldn't block
  • 'featured news story' homepage font looks smaller than the title in the pane - ought to be bigger than the title of the item in the pane
  • site navigation items - in dropdowns - don't like shadows behind nav options
  • home button - smart idea - could get used to it - not sufficiently 'home' enough - could it look like an eco-home? house with a greenhouse or something? something extracted from the house image?
  • still not sure that links are sufficiently visible - like the dotted lines underneath though
  • /blog: want to see clearer definition/delineation of what is one blog item - maybe a colour tint? (ed)
  • individual news items editing: wants to be able to double indent bullets: works in blogs but NOT in news
  1. What's proposed:
  • homepage main panel:

-- add big image
-- include tinted white strapline over picture
-- will try different panels with different styles

  • refining and improving
  • look at fonts again - but not just to make them all the same as that's Ben's preference
  • grey hatching round pics only
  • ratings stars - try a nicer star - try leaves
  • change /blog view to remove original link - different style to standard heading - tidy up - create custom styles - 'original article published by xxx on date'
  • buttons - rule: use rounded corners for buttons
  • laura to ask jim to add module which helps make different styles per blocks
  • duplicate styles for region blocks or panels panes
  • laura to tell jim to check the indented bullets fix - input formats same as blogs as across news
  • footer:

-- add social media buttons
-- make about bit darker block
-- break up the footers links
-- include more 'about' links in footer
-- try house etching in footer
-- social icon tab

  1. Ed's feedback from other meeting:
  • approve the removal of the big green banner at the top
  • happy for smaller logo size, unsure about the difference in width with global nav bar
  • really like the global nav bar with shading and text colour
  • move search into white bit, and user admin into global nav. Remove 'you are logged in as' and 'edit my details' to save space, or replace with 'Click [name] to edit your details' - this would make it to only two nav bars: global (admin and about) and top level (site specific)
  • like the tabbed top level navigation, sorry the transitions weren't working
  • like the home icon - handy to have more space
  • Ed will change navigation week commencing 11/7 as per ticket: https://tech.transitionnetwork.org/trac/ticket/279
  • really like the titles in the more 'booky' font - breaks up the sans-serif text nicely
  • not sure about the titles being brown now - looks sludgy - can we try blue as per the training proposal? will require link colour rethink?
  • really like the hatched shading for boxes
  • not keen on the green hatched boxes around the pictures
  • like the thinner lines between things
  • buttons will need to be shaded as per global nave as they look flat now
  • would like to trial a little bit of shadow under buttons/blocks
  • homepage: blocks at bottom: remove time from events, and location from inis, tidy up view - shorten standard length
  • homepage longer term (phase5?) review 'featured' boxes - with a view to TUS' 'latest' news structure showing a photo and teaser of top story
  • homepage proposal (not seen yet): have a big picture (from book pics) in main bit where pic is now, with semi-transparent text box with mission statement/editable links - like it! Some homepage pictures shared with laura for trial.
  • ingredients work to be done - now seen theme in ingredients - agreed layout
  • agreed to use different shades for different stages to align with book - across title, challenge, desc, solution and related blocks
  • ingredient print out to print only:

-- title
-- challenge
-- description teaser
-- solution
-- related blocks
-- BUY THE BOOK BLOCK - very important

  • ie NOT the full description
  • other work to be done: moving to panels changes will require design time
  • set up different panels styles with range of styles for editors to tinker with

comment:2 Changed 5 years ago by jim

Laura, I assume the Block Styles module is required? Or another? http://drupal.org/project/block_class

comment:3 Changed 5 years ago by laura

Block class mentioned above is a good one, used it on a few sites.

comment:4 Changed 5 years ago by ed

Hi - feedback on HP design - it's great - some bits here below - and pls re-check feedback and stuff proposed above -

  1. top bar too heavy - you were quite right - make lighter so it doesn't weigh the page down - grey? green? see button colours (try: find projects?)
  2. footer - social media buttons in colour?

buttons - great ben may not like the drop shadow - but let's give it a go over august

  1. links general - don't need to be underlined any more?
  2. blocks: tidy up to shorten; can remove location of initiatives
  1. /news and /blogs:
  • all the lines need to be tidied up as per ben's feedback - we need to delineate between items; discussed use of colour instead?
  • at least - try removing the thin lines within an item listing
  1. /blogs - we agreed to change view to remove 'original article' link - pls see notes in ticket

comment:5 Changed 5 years ago by jim

FYI #4 and #6 has been done in LIVE only... Can port the changes to DEV if needs be, but that's a duplication of effort I was trying to avoid. No biggie tho.

And as for #3: Jakob Nielsen would probably cry if we stopped underlining links. I would too, a little anyway. My 2p is it's always better to be clearer, especially when some users have colour blindness or other problems.

comment:6 Changed 5 years ago by ed

all good - i'm waiting for another theme file - to say 'yes' to - is that correct? pls use personal email. i'm available TODAY (thurs) only...

comment:7 Changed 5 years ago by laura

All changes done bar print.css adjustments and buy the book block.

comment:8 Changed 5 years ago by ed

  • Status changed from new to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.