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
kelliedesigner opened this issue Jul 30, 2018 · 10 comments

Comments

Projects
None yet
1 participant
@kelliedesigner
Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 30, 2018

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Aug 1, 2018

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

screen shot 2018-08-01 at 15 34 32

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Sep 4, 2018

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

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

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 kelliedesigner referenced this issue Sep 5, 2018

Closed

Add how to display a caption #300

1 of 1 task complete

@jeddy3 jeddy3 referenced this issue Sep 5, 2018

Merged

Add PullQuote #314

@jeddy3 jeddy3 closed this in #314 Sep 6, 2018

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Sep 6, 2018

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

@kelliedesigner kelliedesigner referenced this issue Sep 6, 2018

Closed

Add AttentionGrabbingQuote #321

0 of 1 task complete
@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

commented Sep 12, 2018

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

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

commented Oct 4, 2018

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

@kelliedesigner

This comment has been minimized.

Copy link
Contributor Author

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
You can’t perform that action at this time.