Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add how to display block quotes and pull quotes #252

Closed
3 tasks done
kelliedesigner opened this issue Jul 30, 2018 · 10 comments
Closed
3 tasks done

Add how to display block quotes and pull quotes #252

kelliedesigner opened this issue Jul 30, 2018 · 10 comments

Comments

@kelliedesigner
Copy link
Contributor

@kelliedesigner kelliedesigner commented Jul 30, 2018

As a user of the Design System
I want to know how to display quotes
So that there's consistency across products

Description

Problems to solve:

  • Based on feedback from user testing, quotes and testimonials were very well received and important for users to be able to relate to the organisation and think about donating.
  • Currently, quotes are de-emphasised in hierarchy, and don't clearly stand out in relation to body text and other elements on the page.
  • Using the same visual flourishs as the call out boxes means elements with different behaviours look visually the same, which is confusing for the user. For example, quotes are static information, whereas the purpose of call out boxes is to entice users to read related information on other pages of the site.

43395266-5ea02054-93f5-11e8-86c6-420186112acc

43395279-65ae3016-93f5-11e8-8afb-f328d2a58a77

43395291-72f9b880-93f5-11e8-924f-2fe66744eeb2

Links and resources

How to emphasise and differentiate pull quotes from body text and other interactive elements:

  • Treatment of text
  • Use of visual quotemarks
  • Use of vertical line indentation
  • Colour

Acceptance Criteria

  • Add component to design system
  • Address accessibility/usability considerations
  • Works on target devices and browsers
@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Jul 30, 2018

Barnardo's 2018 Impact Report:
screen shot 2018-07-30 at 11 31 54

screen shot 2018-07-30 at 11 30 44

screen shot 2018-09-04 at 16 38 53

@kelliedesigner kelliedesigner changed the title Add how to display a quote Add how to display block quotes and pull quotes Jul 30, 2018
@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Jul 30, 2018

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Aug 1, 2018

RNLI:
screen shot 2018-08-01 at 15 33 52

screen shot 2018-08-01 at 15 34 32

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Sep 4, 2018

2017 Impact Report:
screen shot 2018-09-04 at 16 31 55

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Sep 4, 2018

2018 Brochure:
screen shot 2018-09-04 at 16 33 27

screen shot 2018-09-04 at 16 34 36

screen shot 2018-09-04 at 16 34 59

screen shot 2018-09-04 at 16 35 14

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Sep 6, 2018

Note: AttentionGrabbingQuote was removed from the scope of this ticket and added as a separate issue: #321

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Sep 12, 2018

RNIB:
screen shot 2018-09-12 at 14 51 25

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Sep 20, 2018

RNLI 2017 annual report:
screen shot 2018-09-20 at 10 34 47

screen shot 2018-09-20 at 10 36 56

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Oct 4, 2018

Movember:
screen shot 2018-10-04 at 11 19 55

@kelliedesigner
Copy link
Contributor Author

@kelliedesigner kelliedesigner commented Nov 23, 2018

screen shot 2018-11-23 at 16 51 25

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

1 participant