From 58e73517c72a80b9ca24d5b23438445b09e0fcf0 Mon Sep 17 00:00:00 2001 From: TomPerryUX <110408224+TomPerryUX@users.noreply.github.com> Date: Mon, 12 Sep 2022 15:26:32 +0100 Subject: [PATCH] docs(PPNKD-554): update website copy guides section (#372) * docs(PPNKD-554): section copy changes * docs(PPNKD-554): contact us copy changes * docs(PPNKD-554): fix break lines for links Co-authored-by: James Spencer --- site/pages/about/contact-us.tsx | 12 +- .../design/design-overview.tsx | 142 +++++++++--------- 2 files changed, 78 insertions(+), 76 deletions(-) diff --git a/site/pages/about/contact-us.tsx b/site/pages/about/contact-us.tsx index ff88b16da7..c9ce5489ed 100644 --- a/site/pages/about/contact-us.tsx +++ b/site/pages/about/contact-us.tsx @@ -32,7 +32,7 @@ const ContactUs = ({path, ...props}: LayoutProps) => ( @@ -40,10 +40,10 @@ const ContactUs = ({path, ...props}: LayoutProps) => ( - The NewsKit team maintains{' '} + The NewsKit team maintains the{' '} #newskit {' '} @@ -64,7 +64,7 @@ const ContactUs = ({path, ...props}: LayoutProps) => ( headline="Contact NewsKit Design System" description={ <> - For any enquiries related to to Newskit, please send an email to:{' '} + For enquiries related to NewsKit, please email{' '} newskit@news.co.uk. Our team will respond as quickly as possible. @@ -73,10 +73,10 @@ const ContactUs = ({path, ...props}: LayoutProps) => ( - For any other enquiries related to NewsUK{' '} + For enquiries related to News UK{' '} click here. diff --git a/site/pages/getting-started/design/design-overview.tsx b/site/pages/getting-started/design/design-overview.tsx index 00135cf885..5b7f2e8eee 100644 --- a/site/pages/getting-started/design/design-overview.tsx +++ b/site/pages/getting-started/design/design-overview.tsx @@ -27,9 +27,9 @@ const PRINCIPLE_CARDS = [ media: () => ( ), - title: 'Design made easy', + title: 'Ease of use', description: - 'NewsKit makes it simple to design experiences that are not only aesthetically pleasing, but that are fully responsive, promote accessibility and align to the components in code. NewsKit allows designers to free up time to concentrate on the important stuff - like the end user experience!', + 'NewsKit makes it simple to design beautiful, responsive, accessible experiences that align to the components in code - so you can concentrate on your users.', stylePrefix: 'featureCard', overrides: featureCardOverrides, }, @@ -40,8 +40,7 @@ const PRINCIPLE_CARDS = [ title: 'Complete flexibility', description: ( <> - NewsKit is fully customisable, with the flexibility to apply a single - brand, or sub-brands style, with an extensive{' '} + NewsKit is fully customisable, with a powerful{' '} theming system - . Additionally the Figma components have a range of variants and layer - options to allow for further cutomisation. + that gives you the flexibility to apply a single brand or sub-brand, and + Figma components that have variants and layer options. ), stylePrefix: 'featureCard', @@ -63,7 +62,7 @@ const DesignOverview = (layoutProps: LayoutProps) => ( headTags={{ title: 'Design overview | Newskit design system', description: - 'NewsKit has everything you need to efficiently build scalable digital products, including Figma toolkits such as web UI components, theme libraries, plugins, and guidance.', + 'NewsKit has everything you need to build scalable digital products, including Figma component libraries, theme libraries, plugins and guidance.', }} layoutProps={layoutProps} pageIntroduction={{ @@ -72,7 +71,7 @@ const DesignOverview = (layoutProps: LayoutProps) => ( hero: { illustration: 'guides/design-overview/hero', }, - introduction: `NewsKit has everything you need to efficiently build scalable digital products, including Figma toolkits such as web UI components, theme libraries, plugins, and guidance.`, + introduction: `NewsKit has everything you need to build scalable digital products, including Figma component libraries, theme libraries, plugins and guidance.`, }} featureCard={{ title: 'Need help?', @@ -85,8 +84,8 @@ const DesignOverview = (layoutProps: LayoutProps) => ( ( id="whats-included" toc="What’s included?" headline="What’s included?" - description="NewsKit provides shared Figma libraries to assist the product design process, these include:" + description="NewsKit provides shared Figma libraries to help your product design process, including:" showSeparator > ( title: 'Theme library', description: ( <> - An advanced full-featured theming system containing brand - styles that can be used and synced across files, including - palettes and colours, typography, shadows and grids. + A powerful theming system containing brand styles that you + can use and sync across files, including palettes and + colours, typography, shadows and grids. +
- View theme library in Figma (internal only) + View theme library (internal only) ), @@ -132,14 +132,14 @@ const DesignOverview = (layoutProps: LayoutProps) => ( title: 'Web components library', description: ( <> - A collection of high-quality responsive components that can - be themed to align to any brand. + A collection of responsive components that you can theme to + your brand. - View Web components library in Figma (internal only) + View web components library (internal only) ), @@ -151,19 +151,19 @@ const DesignOverview = (layoutProps: LayoutProps) => ( title: 'Icon library', description: ( <> - An extensive set of categorised icons that contain both - filled and outlined styles, which can be customised or added - to as required. The icon libraries in the design system use{' '} + A set of{' '} - Material Icons + Material icons - .
+ containing both filled and outlined styles, that you can + customise or add to as required. +
- View Icon library in Figma (internal only) + View icon library (internal only) ), @@ -175,16 +175,16 @@ const DesignOverview = (layoutProps: LayoutProps) => ( title: 'Utilities library', description: ( <> - A host of utility components to aid in the speed and - consistency of design deliverables and to improve workflow, - including annotations, cursors, device mockups, - accessibility labelling, and more. + A host of utility components to improve your workflow and + make delivery fast and consistent. Includes annotations, + cursors, device mockups and accessibility labels. +
- View Utilities library in Figma (internal only) + View utilities library (internal only) ), @@ -201,7 +201,8 @@ const DesignOverview = (layoutProps: LayoutProps) => ( id="architecture" toc="Architecture" headline="NewsKit Figma library architecture" - description="Below is an example of how it is recommended to link Figma libraries to get the best out of the NewsKit Design System. This ensures that whenever the NewsKit Design System is updated, designs utilising this can automatically receive updates and enables contributing to the NewsKit Design System." + description="Receive updates, contribute to the community and get the best out of NewsKit + by linking your Figma libraries like this:" showSeparator > @@ -212,7 +213,7 @@ const DesignOverview = (layoutProps: LayoutProps) => ( id="plugins" toc="Plugins" headline="Custom Figma plugins" - description="NewsKit provides custom Figma plugins to improve the design process workflow, these include:" + description="We've developed a range of custom Figma plugins to help improve your workflow, including:" showSeparator > ( cardsLayout="horizontal" cards={[ { - title: 'Theme Swapper plugin', + title: 'Theme swapper plugin', description: ( <> - A Figma plugin that provides functionality to change themes - across UI components and elements. For example, switching - between light and dark themes, sub-themes, or different - visual fidelities. + Change themes across UI components and elements (e.g. + switching between light and dark themes, sub-themes or + different visual fidelities). - View Theme Swapper Figma plugin (internal only) + View theme swapper plugin (internal only) ), @@ -241,19 +241,17 @@ const DesignOverview = (layoutProps: LayoutProps) => ( ), }, { - title: 'Text Crop plugin', + title: 'Text crop plugin', description: ( <> - A Figma plugin that removes the whitespace around text - boxes, removing extra leading (space) above and below your - text. This ensures consistent and predictable layout - designs. + Remove unwanted whitespace around text boxes. +
- View Text Crop Figma plugin + View text crop plugin ), @@ -262,18 +260,18 @@ const DesignOverview = (layoutProps: LayoutProps) => ( ), }, { - title: 'Theme Exporter plugin', + title: 'Theme exporter plugin', description: ( <> - A Figma plugin that provides functionality to export NewsKit - design tokens in JSON format from Figma styles to use with - the NewsKit codebase. + Export NewsKit design tokens in JSON format from Figma + styles to use with the NewsKit codebase. +
- View Theme Exporter Figma plugin (internal only) + View theme exporter plugin (internal only) ), @@ -290,7 +288,8 @@ const DesignOverview = (layoutProps: LayoutProps) => ( id="templates" toc="Templates" headline="Project template files" - description="NewsKit provides template Figma files to kickstart design processes, helping to develop a consistent workflow, these include:" + description="Kickstart your design process, and develop a consistent workflow, with NewsKit's + template Figma files:" showSeparator > ( title: 'UX project template file', description: ( <> - A Figma file that provides a template structure for - UX-focused projects. This template includes personas, user - journeys, competitor analysis, and more. + A template structure for UX-focussed projects. Includes + personas, user journeys and competitor analysis. +
- View the UX project template file in Figma (internal only) + View UX project template file (internal only) ), @@ -321,15 +320,15 @@ const DesignOverview = (layoutProps: LayoutProps) => ( title: 'UI project template file', description: ( <> - A Figma file that provides a template structure for - UI-focused projects. This template includes a playground, - prototype, handoff, and more. + A template structure for UI-focussed projects. Includes a + playground, prototype and handoff. +
- View the UI project template file in Figma (internal only) + View UI project template file (internal only) ), @@ -346,7 +345,8 @@ const DesignOverview = (layoutProps: LayoutProps) => ( id="guidance" toc="Guidance" headline="Guidance" - description="NewsKit provides comprehensive documentation and guidelines covering a variety of areas for a better understanding of how to get the best out of the NewsKit design system, these include:" + description="Get the best out of NewsKit with comprehensive, easy-to-follow documentation + and guidelines, including:" showSeparator > ( cardsLayout="horizontal" cards={[ { - title: 'NewsKit Components guidance', + title: 'Components guidance', description: ( <> - Guidance for all NewsKit web components. This includes - details on the anatomy, variants, usage, and more. + Guidance for all web components. Includes details on + anatomy, variants and usage. +
- View NewsKit Components guidance{' '} + View components guidance{' '} ), @@ -373,18 +374,18 @@ const DesignOverview = (layoutProps: LayoutProps) => ( ), }, { - title: 'NewsKit Patterns guidance', + title: 'Patterns guidance', description: ( <> - Guidance for solving common user problems in a consistent, - considered way. For example, best practices for onboarding - to a product or feature. + Guidance for solving common problems (e.g. onboarding users + to a product or feature). +
- View NewsKit Patterns guidance + View patterns guidance ), @@ -393,24 +394,25 @@ const DesignOverview = (layoutProps: LayoutProps) => ( ), }, { - title: 'NewsKit Accessibility guidance', + title: 'Accessibility guidance', description: 'Guidance for designing inclusive experiences.', media: getIllustrationComponent( 'guides/design-overview/accessibility-guidance', ), }, { - title: 'NewsKit Handoff guidance', + title: 'Handoff guidance', description: ( <> Guidance on how to communicate a design to the product team for engineers to build. +
- View NewsKit Handoff guidance (internal only) + View handoff guidance (internal only) ),