Design tweaks
Update after feedback from RDB & LT:
I often think 'I wonder how Loomio would look with fewer lines?' This morning I decided to knock up a quick mockup in Photoshop to find out. I got carried away though, and two hours later this is the result:
If it's of interest, this is what I did:
General
- Change yellowy background to light grey, extend
- Reduce space between breadcrumb and top bar
- Removed icon from next to discussion title
- Aligned discussion title & context panel text with discussion icon
- Reduce space after discussion title
- Rearrange & restyle discussion context editing & info
- Make panel labels grey, increase space above them
- Lighten dividing & border lines
- Extend vertical dividing line to meet horizontal one
- Right-align top of toolbar with rest of page
- Centre content of toolbar vertically
Discussion panel
- Lightened lines between conversation log items
- Moved timestamp / likes closer to comments
- Increased space before comments
- Better alignment for voting icons
- Removed colour from names
- Lighten small text
- Centre discussion icon over avatars
- Left-align Post comment button, and right-align markdown button with comment box, move both up a little
- Removed quotation marks from position text
Decision panel
- Better alignment for voting icons
- Removed colour from names
- Bolded names
- Increased space after positions
- Reduce space between panel label and decision title
- Shrink ‘closing in’, ‘proposed by’ & ‘closed’ text to the same size as similar text in discussion panel
- Horizontally centre decision icon with respect to decision title
- Reduce space above pie
- Left-align pie, move counts closer
- Left-align previous decisions
- Remove lines around previous decisions
I thought I did that
I think we both did it
Your version doesn't seem to be in the revision history
Wow. I think I like all of the changes. The only thing I am iffy on is removing the lines between the discussion log items/comments. Perhaps the solution would be to do some kind more explicit graphical identifier to distinguish comments from other activity, e.g. a light background colour or something.
I wonder how to incorporate this kind of tweakery into the workflow/priorities. If we're going to take such a fine toothcomb to the styling, I think it would make sense to enable responsive layouts (i.e. mobile friendly) at the same time, as that will influence all the code changes, and is a priority we've already agreed on.
@richarddbartlett I imagine almost all the Photoshoppy changes I made would be pretty speedy tweaks mostly involving easy CSS changes. Going responsive feels like a whole other, harder kettle of fish to me.
Going responsive could potentially render most of the tweaks obsolete. E.g. something that is currently padding-left: 10px might get tweaked now to be padding-left: 5px, but when we go responsive it might need to be defined as margin-left: 5px.
Seems to me responsivity is the priority, also it is not hard so don't think I'm suggesting there is a huge roadblock.
ps. @kellycheesman do you have any opinions?
Big like from me. Agree we need to keep a seperation between comments as it looks like the positions are part of Nicolas's post.
Some other suggestions to build on this layout would be:
- increasing the padding down each side, so it doesn't look like an aggressive crop.
- texturing the background to add some character.
Looks great @matthewbartlett!
I think we should put these ideas in the bank, and then cash them out when we start work on reversing the chronology of the comments (happening very soon!).
Hopefully by the end of the day we'll have a rough timeline indicating when we plan to do this. But at the moment I'm thinking we'll probably get to reversing chronology within the next month (I'm feeling optimistic today).
@aaronthornton & @richarddbartlett you're probably right. I've added a new mockup with faint lines.
I just made the preview image click-to-expand fyi