Design Doc Template

  • View
    146

  • Download
    0

Embed Size (px)

Text of Design Doc Template

  • 1

    EXAMPLE DOCUMENT

    Design documentation example for working with distributed teamsStephen Rea

  • 2

    EXAMPLE DOCUMENT

    Contents

    Page 23 - Updates

    Page 29 - (screen title)

    Page 39 - (screen title) Page 48 - (screen title) Page 55 - (screen title)

    Page 32 - (screen title)

    Page 42 - (screen title) Page 51 - (screen title) Page 58 - (screen title)

    Page 36 - (screen title)

    Page 44 - (screen title)

    Page 46 - (screen title)

    Page 53 - (screen title)

    Page 53 - (screen title)

    Page 3 - Change requestsPage 4 - NotesPage 5 - Interaction keyPage 7 - Google patterns used within this documentPage 12 - ButtonsPage 15 - Orange branded patterns used within this documentPage 17 - App logic diagramPage 20 - User journeysPage 22 - Keyscreens

  • 3

    EXAMPLE DOCUMENT

    Change requestsPage 23 - Text updates. (22.07.15)

    Page 24 - Text string additions (22.07.15)

    Page 27 - Navigation bar colour change (22.07.15)

    Page30 - User stories updated (20.07.15)

    Page 31 - Text string additions (22.07.15)

  • 4

    EXAMPLE DOCUMENT

    NotesThe guideline is based on Android XHDPI (based on Nexus 4 Android L)All assets are supplied in MDPI, HDPI and XHDPI All measurements use dp with font sizes in sp unless otherwise specified. Where applicable / shown - Orange brand overrides Google. All variants are shown within detailed screens. All pattern are in native Android unless otherwise specified with links to references.

  • 5

    EXAMPLE DOCUMENT

    Interaction key

    Note:Every company - sometimes even on a team level will have its own way of comunicating interactions. Here we ensure there can be no confusion by reitterating them at the start for reference if required.

  • 6

    EXAMPLE DOCUMENT

    Interaction Key

    a

    a

    a

    a

    1

    1

    a

    a

    b

    a

    oremLooo

    psumIppp

    olorDoo

    t ametSiti

    User interactions

    New indicators

    NEW

    NEW

    Text strings

    Colours

    Pattern ids

    Page animations/transisitons

    Miscellaneous Fonts

    Assets

    tap

    page/menu slides on from the left

    Icon Naming:

    ic_name_of_asset

    ic_name_of_assett

    Description (title/subtitle) Multiple line/single lineRoboto Regular 14sp #ffffff

    pointer to text

    #FFD200

    name of pattern if relevant

    pointer to coloured area

    pointer to pattern

    pointer to asset

    pointer to asset

    Aseet naming:

    shows which screen the element clicked or tapped goes to

    Pointer to other native elements

    XML_id_here

    pointer to text on screen

    long touch

    double tap

    flick/swipe left

    flick/swipe right

    flick/swipe up

    flick/swipe down

    drag/slide left

    drag/slide right

    drag/slide up / drag/slide down

    Pinch out with 2 fingers

    Pinch in with 2 fingers

    a

    b

  • 7

    EXAMPLE DOCUMENT

    Google patterns usedwithin this document

    Note:In order to avoid confusion it sometimes helps to make sure everyone knows which standard patterns they should be using.

    These are generally copied & pasted but even the simple act of doing that can save a lot of time in specification making later on.

  • 8

    EXAMPLE DOCUMENT

    Typography

    Roboto is to be used throughout unless otherwise specified.

    All used sizes and wights are listed below and referenced in visual spec keyscreens where used.

    GOOGLE GUIDELINE LINK:

    http://www.google.com/design/spec/style/typography.html#

    PrimaryLight theme default type color

    Default light bg: #FFFFFF

    Secondary

    Disabled

    Primary

    Secondary

    Disabled

    #000000

    #000000

    #000000

    #FFFFFF

    #FFFFFF

    #FFFFFF

    100%

    54%

    38%

    100%

    70%

    30%

    Dark theme default type color

    Default dark bg: #000000

    RobotoSubheader

    Title

    Body 1

    Body 2 / Men u

    Caption

    BUTTON

    Regular 16pt

    Medium 20pt

    Regular 14pt

    Medium 14pt

    Regular 12pt

    MEDIUM 14PT

    Headline Regular 24sp1.1a

    1.2b

    1.2c

    1.2d1.2a

    1.2f

    1.2g

    1.2h1.2e

    1.1b

    1.1c

    1.1d

    1.1e

    1.1f

    1.1g

  • 9

    EXAMPLE DOCUMENT

    Lists

    GOOGLE GUIDELINE LINK: http://www.google.com/design/spec/components/lists-controls.html

    Line item selected

    Line item unselected

    Line item selected

    2440

    40 241

    2

    3

    4

    Line item selected

    Line item unselected16 16

    8

    Line item selected

    Line item selected 56

    88

    72

    Font Colour Spacing sizing key

    1 Subheader: Roboto Regular 16pt Colour: Primary #000000 100 %

    2 Radio Button Off Colour: Primary #000000 100%

    3 Radio Button On Colour: #FF6600

    4 Background Colour: Primary #FFFFFF 100%

    Vertical keylines determine placement of

    type and icons from edges of elements.

    Vertical sizing determines the height of

    content blocks.

    Horizontal margins determine spacing .

    24

    56dp

    8dp

    16dp

    2.1 2.2

  • 10

    EXAMPLE DOCUMENT

    Branded elements

    Note:There are of course times when a companies brand will take precedence over a standard pattern. This next section deals with exactly that.

  • 11

    EXAMPLE DOCUMENT

    Branded elements

    Font C olour

    1 Button: Roboto Medium 14pt Colour: #FF6600 100 %

    2 Button: Roboto Medium 14pt: Primary #FFFFFF 100%

    Spacing sizing key

    8dpVertical keylines determine placement of type and icons from edges of elements.

    Vertical sizing determines the height of

    content blocks.

    Horizontal margins determine spacing .

    24

    Flat Raised

    NORMAL

    PRESSEDPRESSED

    NORMAL

    88

    36

    1

    Flat Raised

    NORMAL

    PRESSEDPRESSED

    NORMAL

    88

    36

    88

    36

    2

    10.1

    10.1a

    10.1c

    10.1b

    10.1d

    10.2a

    10.2c

    10.2b

    10.2d

    10.2

  • 12

    EXAMPLE DOCUMENT

    Cards

    The below cards are a derivative of the standard Google Android cards.

    Card margins: Padding from edge of screen to card: 8dp Space between cards: 8dp Cards have rounded corners. Rounded corners: 2dp GOOGLE GUIDELINE LINK: http://www.google.com/design/spec/components/cards.html

    Le Cloud d'OrangeStockez vos fichiers et consultez-les o que vous...

    INSTALL

    80

    80

    24

    24

    1

    2

    3

    Le Cloud d'Orange

    ACTION

    8

    88 8

    88

    8

    8

    88

    8

    12

    8

    Stockez vos fichiers et consultez-les o que vous...

    8

    8

    8 8

    8

    8

    8

    7.1 7.2

    Spacing sizing key

    12dp

    Touch area

    8dpVertical keylines determine placement of type and icons from edges of elements.

    Vertical sizing determines the height of

    content blocks.

    Horizontal margins determine spacing .

    24

    1

    2

    Subheader: Roboto Bold 16pt: Primary #FFFFFF 100 %

    3

    Body 1: Roboto Regular 14pt: Primary #FFFFFF 100 %

    Button: Roboto Meduim 14pt: Brand Colour #FF6600 100 %

  • 13

    EXAMPLE DOCUMENT

    App logic diagram

    Note:When mapping out an application it is always important to make sure it can be seen as a whole. In the early stages of design it can be difficult to match this against screens. So instead of struggling I create a simple logic diagram. This helps see the app as a real thing and allows for analysis of the happy paths through the app allowing for edges cas-es and fail states as well as pain points in developments to be identified early.

  • 14

    EXAMPLE DOCUMENT

    Overarching App logic diagram

  • 15

    EXAMPLE DOCUMENT

    Clean screen layout - wireframe

    updates

    OPL/ORO consent HS

    settings historyh aboutinfo

    MenuOrange selection

    highlight

  • 16

    EXAMPLE DOCUMENT

    User journeys

    Note:Once the logic for the app is agreed and screen maps have been created its time to start thinking about interaction and specific micro user journeys that define the user experience and that the user will follow when interacting with the app.

  • 17

    EXAMPLE DOCUMENT

    UJ01 - User journey for xxxxx

    installedOrange app update

    installedOrange app update

    installedOrange app open

    openinstalledOrange app

    App updates

    14:59

    installedOrange app update

    installedOrange app update

    installedOrange app open

    cancelinstalling...Orange app

    App updates

    14:59

    I choose to do this and the game opens,leaving Apps Orange open in mymultitask area ready for when I wantto use it next.

    Edge case

    I start updating the app and decide I dont want to anymore

    I press the soft back key.

    A pop up dialog box will appear asking me if I still wish to leave the app whilst I am downloading and that my download will continue in the background.

    I am given an option to leave the app or to stay in the app.

    I choose to stay in the app and the dialog box disappears and I am able to cancel the download in progress by pressing cancel.

    on install and I can see the progress ofthe installation within that screen.

    Once the install has completed I amI tap Updates and am takento the App updates screen

    I am on Orange selection screen, and decide to update an app.

    03 040201

    installedOrange app update