Site Aesthetics
Closed this issue · 14 comments
I made a super quick mock-up of a home-page style for the site (https://github.com/KirstieJane/STEMMRoleModels/blob/gh-pages/SchematicDesign/homePageMockUp.pdf). Key decisions are:
- color scheme
Currently teal, orange and grey. Selected because it's relatively "gender neutral" while also being visually appealing. - font
Currently one of my favorite sans serifs--Gill Sans. - layout
Went for a minimal approach, similar to many sites (e.g. Square, ResearchGate, Tumblr.)
Feedback welcome!
Check out site/new_homepage.html and site/about.html for some first passes at this layout :)
Love it! Completely agree on all the three points you've highlighted above. Crisp and clear, and great (mom pink) color scheme 😃
Alright. I did a mockup of a profile page: https://github.com/KirstieJane/STEMMRoleModels/blob/gh-pages/SchematicDesign/profileLayoutMockUp.pdf
In putting this together, I focused on a few important elements:
- avoid the issue of 'empty profiles' we talked about in the past.
Like @KirstieJane has suggested, we'd only show profile information that's available (i.e. missing categories won't be shown).
I put the testimonial and profile info into scrolling panels within the page. So then, people with relatively sparse profiles won't look like they have less info/testimonials at first glance.
A remaining question is the best way to handle missing info in profiles. If we don't know what's missing, crowdsourcing info for profiles might be less efficient. Maybe at the bottom of the info, we put a "know more about Kirstie's X, Y, Z? Contribute to her profile" where [X, Y, Z] are the categories with missing info (e.g. expertise, contact info...)
- Matching the layout to our emphasized categories/info. What aspects of profiles do we most want to "feature"?
Since the testimonials is a feature we're excited about, I put them prominently on the side (rather than putting them at the end/bottom) of a profile.
Do we want to do something similar with, say, the 'role model keywords'? Are there other profile elements we want to highlight?
Other thoughts and feedback welcome! :)
One smaller aesthetics point. I'm currently working with the current logic for color usage:
- teal is an accent color used for emphasis
- external links are lighter teal.
- "action items" (e.g. contribute to a profile etc.) and internal links are in orange
Reasonable?
If you notice inconsistencies in those usages, let me know.
Aaaaah @neuroAmyo I think this is absolutely brilliant!! Thank you!
I'm going to tweet this issue and ask for feedback in general - but I think this looks brilliant ❤️
oh! I should also mention. Matt suggested we talk to Lego to get them to approve us using that photo as the default when people don't have a picture uploaded. I kind of ❤️ the idea.
@neuroAmyo - love it too. The Lego Foundation here in Cambridge might be able to answer the question (or at least put us in touch with the right people!) I'll try to send an email ASAP :)
master branch is no longer.
PDFs now available at https://github.com/KirstieJane/STEMMRoleModels/blob/d1c5d38844c823fa5f6cd994ed6662542ea32116/SchematicDesign/homePageMockUp.pdf
Concerning colour palette, I did some research on another project: Sabayon/sabayon-website-next#2 (comment) (check out the issues referencing that one, too. scroll down there).
Thanks for catching the (dearly departed) master branch error @Ryuno-Ki. I've updated the original comment to point to the right place! And thanks for the link to the discussion at sabayon.
Ok - so this issue needs to be documented before I can close it. Basically that just means transcribing what we've discussed into some guidelines for anyone who comes along and wants to join in
Sorry for the long delay. I agree that we should summarize things into a "style guide" for the site. I'll get to work on this as soon as I can!
Hey @neuroAmyo - have you made any progress on the style guide? Even some basic info like the RGB colors and font names would be pretty helpful I think 😃
Sorry for the glacial pace on this. I've uploaded an aesthetics guide draft (a pdf: STEMMRoleModels/documentation/STEMM Role Models Style Guide.pdf and a md file: STEMMRoleModels/documentation/StyleGuide since I wasn't sure what was easier). Let me know what you think!
This is really helpful @neuroAmyo! Thank you! 🎉