search

LD4P / sinopia_profile_editor

LD4P fork of lcdevnet profile-edit
Other
4 stars 1 forks source link

Branding for Sinopia Profile Editor #2

Closed jermnelson closed 6 years ago

jermnelson commented 6 years ago

We need consistent branding for the Sinopia Profile Editor.

jgreben commented 6 years ago

@astridu I think the Create a new profile page should not include any default entities (e.g. Bibframe Work, Instance). It should look something like: https://ld4p-loc-profiles-dev.stanford.edu/#/profile/create (i.e only the Profile section, no default entities)

jgreben commented 6 years ago

Creating a brand new profile:

screen shot 2018-09-28 at 10 30 05 am
astridu commented 6 years ago

Got it. thank you! Should the Profile section be expanded when you come to this screen? Seems strange that it's closed. image

astridu commented 6 years ago

Also, do you have bandwidth to rebrand the elements you are re-using (like the tables/forms/buttons)? I can mock it up in the Sinopia branding, or leave it as is. Just let me know.

jgreben commented 6 years ago

Having it expanded by default would be a good idea. Otherwise it looks too empty and, yes strange. Also I think the rebranding that you are suggesting will just be some css overrides, so that will not be too much work. The existing project uses font-awesome and bootstrap, so making changes especially within those frameworks would be easy.

michelleif commented 6 years ago

Footer (see #116 for latest): Sinopia is a project of Linked Data for Production 2 (LD4P2), funded by the Andrew W. Mellon Foundation.

astridu commented 6 years ago

Will you ask Tom about the copyright, or did you want me to do that? Also, did you want to list the partner institutions participating? (just a suggestion, I noticed it on the Samvera site). thanks!

jgreben commented 6 years ago

@astridu Are you able to provide the following, as needed for the proposed designs?

10/4/18 @jgreben I made some changes below based on feedback that the PROFILE editor and BIBlIOGRAPHIC editors looked too similar. These are now the final specs for Sinopia PROFILE editor branding.

astridu commented 6 years ago

View Prototype: https://invis.io/5YNLDND63KF#/322451430_Profile_Editor_Page_2

jgreben commented 6 years ago

Fixed by #85

michelleif commented 6 years ago

Please change the colors that are used once you are editing a profile, the blue text on gold background is really hard to read for the names of the elements within the Profile, and you can barely see the little triangle at left to open those pieces, and the white text on gold background also hard to read for the Delete/Change actions at right. I know I said we want a different color scheme to differentiate the Profile Editor from the Editor, but I think it's enough that the header and the names of the profiles are in a different color scheme. The original is a lot easier to read. Attaching screenshots of both for comparison, original first.

astridu commented 6 years ago

In response to @michelleif comment above:

https://invis.io/5YNLDND63KF#/326508536_Profile_Editor_Page_2a MVP changes

  1. Change background color of subheaders to: E5C9A3

Not sure if any of these are in scope, so I've labeled these "Nice to have changes"

  1. Change 'template' to 'section' (feedback from DC meeting) and add explanatory text at the top of the page.
  2. I defined a style for text that has a tooltip to be the link color plus a dotted line underneath
  3. Use blue carat for expand/contract
  4. Shorten to [trash icon] Delete and just put the [move icon] on the far right to indicate the section is moveable.
  5. Whenever there is an '+ Add Something', it should use the same dotted line button style as the one at the bottom of the page.
  6. The tooltips coming in when you hover over the data entry field is really annoying. Could we instead move the hover to the field label?
  7. I'm confused by the Add/Delete button at the bottom.
  8. Can you add a few more spaces between the 2 links at the top of the page (Bib Editor and Help and Resources)?
michelleif commented 6 years ago

If the text is going to be blue then it's really hard to read with E5C9A3 as background. Can we just do light gray like LC or a lighter gold?

Given all the work we have to do, the other changes are out of scope; we can put them in another ticket and keep it in the backlog in case we have time later.

astridu commented 6 years ago

Here are 2 options, both accessible (AA) - light gold and light gray. LMK which you prefer.

lighter ochre #F2E9D9 image

Lighter gray image

astridu commented 6 years ago

image

michelleif commented 6 years ago

lighter gray is better. I'm tagging this as a bug so we know that it needs to get fixed. It is unreadable as is. thanks!

astridu commented 6 years ago

Lighter gray is DFDFDF