Some comments off the top of my head (it looks great BTW!)
- You probably need a bit more padding around left and right of the columns (10-20px) and a little bit more top and bottom (I think you already added some padding, but it still seems a bit too clutterred in my opinion)
- I like the idea of using icons for the links to PGP keys and twitter, but I would put them below the IRC handle (and not in the upper right corner). I would also use a monochrome icon set instead of something with colors. An icon set I usually use is font-awesome: http://fontawesome.io/. I think for those two items you can probably use: http://fontawesome.io/icon/key/%C2%A0and http://fontawesome.io/icon/twitter/%C2%A0or http://fontawesome.io/icon/twitter-square/.
- How long do you expect the description text to be? If you anticipate it being quite long, maybe it’s worth trying out a single column layout to avoid the description text overflowing and creating asymetry in the boxes.
- For the placeholder image (the onion icon) I would also go for something monochrome to avoid it creating too much visual overload (see: https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Black_Ic...). Maybe even give it a give it an `opacity: 0.8` to make it even more subdle. If when trying that out it doesn’t look right and you still want to use the colored one, be sure to use the official color icon version (https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Onion_Co...) that doesn’t have the weird shading on the onion leafs and body of the onion.
Do you have the css and source of these? That would be useful to try some of these ideas out.
I am also adding to cc Elio that may have further feedback in case he missed this thread.
~ Arturo
On July 9, 2017 at 8:18:39 AM, Damian Johnson (atagar@torproject.org) wrote:
Hi all, here's some screenshots so folks can give their two cents on the styling...
* Current styling, which lists twitter and key links.
https://www.atagar.com/transfer/tmp/people_page-current.png
* Previous styling, which included job descriptions.
https://www.atagar.com/transfer/tmp/people_page-with_labels.png
* Replacing the twitter and key links with icons. This makes the page less cluttered but not sure if I like it better or not.
https://www.atagar.com/transfer/tmp/people_page-with_icons.png
Thoughts welcome. Again, I'm not a web designer so not really sure what's best.