[gnome-devel-docs] add a pattern for initial application states
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] add a pattern for initial application states
- Date: Thu, 4 Aug 2016 14:59:09 +0000 (UTC)
commit d1f4f1d6953297bd1f2aff70d83e5df5a2f9b2f5
Author: Allan Day <allanpday gmail com>
Date: Thu Aug 4 15:58:37 2016 +0100
add a pattern for initial application states
hig/C/empty-placeholders.page | 4 +-
hig/C/figures/patterns/empty-placeholder.svg | 162 ++++++-----
.../figures/patterns/initial-state-placeholder.svg | 287 ++++++++++++++++++++
hig/C/initial-state-placeholders.page | 45 +++
4 files changed, 420 insertions(+), 78 deletions(-)
---
diff --git a/hig/C/empty-placeholders.page b/hig/C/empty-placeholders.page
index dc29697..e4f5335 100644
--- a/hig/C/empty-placeholders.page
+++ b/hig/C/empty-placeholders.page
@@ -17,7 +17,7 @@
<media type="image" mime="image/svg" src="figures/patterns/empty-placeholder.svg"/>
-<p>An empty placeholder is an image, accompanied by text, which fills the space in an empty list or grid.</p>
+<p>An empty placeholder is an image and text which fills the space in an empty list or grid.</p>
<section id="when-to-use">
<title>When to use</title>
@@ -26,7 +26,7 @@
<p>An empty placeholder should be displayed whenever a list or grid is empty.</p>
-<p>Empty placeholders should not be displayed when an application is being run for the first time. In these
situations empty states are often to be expected, and it is more appropriate to provide a richer, more
characterful and upbeat experience.</p>
+<p>Empty placeholders should not be displayed when an application is being run for the first time. In these
situations an empty state is too negative and <link xref="initial-state-placeholder">a richer, more
characterful and positive experience</link> is better.</p>
</section>
diff --git a/hig/C/figures/patterns/empty-placeholder.svg b/hig/C/figures/patterns/empty-placeholder.svg
index bf295af..8b59c68 100644
--- a/hig/C/figures/patterns/empty-placeholder.svg
+++ b/hig/C/figures/patterns/empty-placeholder.svg
@@ -25,14 +25,14 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
- inkscape:cx="381.17399"
- inkscape:cy="266.15071"
+ inkscape:cx="357.19379"
+ inkscape:cy="246.69235"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:showpageshadow="false"
inkscape:window-width="1920"
- inkscape:window-height="1136"
+ inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
@@ -57,7 +57,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title></dc:title>
+ <dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@@ -78,17 +78,57 @@
width="685"
id="rect8907"
style="fill:#f3f3f3;fill-opacity:1;stroke:#a7aba7;stroke-width:0.99999994;stroke-opacity:1" />
- <rect
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
- inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
- mask="none"
-
style="fill:#f3f3f3;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
- id="rect8909"
- width="685"
- height="386"
- x="127.5"
- y="609.86218" />
+ <g
+ id="g4188">
+ <rect
+ y="609.86218"
+ x="127.5"
+ height="386"
+ width="685"
+ id="rect8909"
+
style="fill:#f3f3f3;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <g
+ id="g4177">
+ <flowRoot
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
+ transform="translate(-713.12908,541.04244)"
+
style="font-style:normal;font-weight:normal;font-size:13.75px;line-height:139.99999762%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
+ id="flowRoot4693"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4695"><rect
+ style="font-size:13.75px;line-height:139.99999762%;fill:#888a85;fill-opacity:1"
+ y="321.78152"
+ x="669.63013"
+ height="138.07822"
+ width="1027.1392"
+ id="rect4697" /></flowRegion><flowPara
+ id="flowPara4699"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.75px;line-height:139.99999762%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1">Use
the <flowSpan
+ id="flowSpan4220"
+ style="font-weight:bold;font-size:13.75px">Import</flowSpan> button to add.</flowPara></flowRoot>
<flowRoot
+ xml:space="preserve"
+ id="flowRoot4709"
+
style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
+ transform="translate(-318.43135,493.53084)"
+
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><flowRegion
+ id="flowRegion4711"><rect
+ id="rect4713"
+ width="237.13916"
+ height="42.078217"
+ x="669.63013"
+ y="321.78152"
+ style="font-size:22.5px;fill:#888a85;fill-opacity:1" /></flowRegion><flowPara
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5px;line-height:200%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1"
+ id="flowPara4715">No documents found</flowPara></flowRoot> </g>
+ </g>
<g
inkscape:export-ydpi="90"
inkscape:export-xdpi="90"
@@ -144,32 +184,36 @@
id="path8931"
d="m 771.5,580.85688 0,17.0103"
style="display:inline;fill:none;stroke:#a7a7a7;stroke-width:0.99999988px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
/>
- <rect
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
- inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar-menu.png"
- ry="3"
- rx="3.0000002"
- y="573.86206"
- x="133.5"
- height="31"
- width="69"
- id="rect4208"
-
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#4a90d9;fill-opacity:1;fill-rule:nonzero;stroke:#1c5288;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
- <text
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
- inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar-menu.png"
- sodipodi:linespacing="125%"
- id="text4210"
- y="594.1991"
- x="167.59766"
-
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none"
- xml:space="preserve"><tspan
- y="594.1991"
- x="167.59766"
- id="tspan4212"
- sodipodi:role="line">Import</tspan></text>
+ <g
+ id="g4172"
+ transform="translate(2,2)">
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#4a90d9;fill-opacity:1;fill-rule:nonzero;stroke:#1c5288;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="rect4208"
+ width="69"
+ height="31"
+ x="433.5"
+ y="899.86206"
+ rx="3.0000002"
+ ry="3"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar-menu.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <text
+ xml:space="preserve"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:14px;line-height:125%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none"
+ x="467.59766"
+ y="920.1991"
+ id="text4210"
+ sodipodi:linespacing="125%"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/header-bar-menu.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><tspan
+ sodipodi:role="line"
+ id="tspan4212"
+ x="467.59766"
+ y="920.1991">Import</tspan></text>
+ </g>
<g
style="display:inline"
id="g4717"
@@ -249,39 +293,5 @@
y="-2648.6255" />
</g>
</g>
- <flowRoot
- inkscape:export-ydpi="90"
- inkscape:export-xdpi="90"
-
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
- transform="translate(-713.12908,541.04244)"
-
style="font-style:normal;font-weight:normal;font-size:13.75px;line-height:139.99999762%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
- id="flowRoot4693"
- xml:space="preserve"><flowRegion
- id="flowRegion4695"><rect
- style="font-size:13.75px;line-height:139.99999762%;fill:#888a85;fill-opacity:1"
- y="321.78152"
- x="669.63013"
- height="138.07822"
- width="1027.1392"
- id="rect4697" /></flowRegion><flowPara
- id="flowPara4699"
-
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.75px;line-height:139.99999762%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1">Use
the <flowSpan
- id="flowSpan4220"
- style="font-weight:bold;font-size:13.75px">Import</flowSpan> button to add.</flowPara></flowRoot>
<flowRoot
- xml:space="preserve"
- id="flowRoot4709"
-
style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
- transform="translate(-318.43135,493.53084)"
-
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
- inkscape:export-xdpi="90"
- inkscape:export-ydpi="90"><flowRegion
- id="flowRegion4711"><rect
- id="rect4713"
- width="237.13916"
- height="42.078217"
- x="669.63013"
- y="321.78152"
- style="font-size:22.5px;fill:#888a85;fill-opacity:1" /></flowRegion><flowPara
-
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5px;line-height:200%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1"
- id="flowPara4715">No documents found</flowPara></flowRoot> </g>
+ </g>
</svg>
diff --git a/hig/C/figures/patterns/initial-state-placeholder.svg
b/hig/C/figures/patterns/initial-state-placeholder.svg
new file mode 100644
index 0000000..b2e9102
--- /dev/null
+++ b/hig/C/figures/patterns/initial-state-placeholder.svg
@@ -0,0 +1,287 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="940"
+ height="540"
+ id="svg6276"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="initial-state-placeholder.svg">
+ <defs
+ id="defs6278" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="592.74375"
+ inkscape:cy="318.36601"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:showpageshadow="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="1016"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="true"
+ inkscape:snap-bbox="false"
+ inkscape:bbox-paths="true"
+ inkscape:bbox-nodes="true"
+ showguides="false"
+ inkscape:object-paths="true"
+ inkscape:snap-intersection-paths="true"
+ inkscape:object-nodes="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid6749"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata6281">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-512.36218)">
+ <rect
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ ry="9"
+ rx="9"
+ y="568.86218"
+ x="127.5"
+ height="106"
+ width="685"
+ id="rect8907"
+ style="fill:#f3f3f3;fill-opacity:1;stroke:#a7aba7;stroke-width:0.99999994;stroke-opacity:1" />
+ <g
+ id="g4188">
+ <rect
+ y="609.86218"
+ x="127.5"
+ height="386"
+ width="685"
+ id="rect8909"
+
style="fill:#f3f3f3;fill-opacity:1;stroke:#a7a7a7;stroke-width:0.99999994;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ mask="none"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90" />
+ <g
+ id="g4177">
+ <flowRoot
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
+ transform="translate(-713.12908,541.04244)"
+
style="font-style:normal;font-weight:normal;font-size:13.75px;line-height:139.99999762%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
+ id="flowRoot4693"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4695"><rect
+ style="font-size:13.75px;line-height:139.99999762%;fill:#888a85;fill-opacity:1"
+ y="321.78152"
+ x="669.63013"
+ height="138.07822"
+ width="1027.1392"
+ id="rect4697" /></flowRegion><flowPara
+ id="flowPara4699"
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.75px;line-height:139.99999762%;font-family:Cantarell;-inkscape-font-specification:Cantarell;text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1">Helpful
instruction.</flowPara></flowRoot> <flowRoot
+ xml:space="preserve"
+ id="flowRoot4709"
+
style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;display:inline;fill:#888a85;fill-opacity:1;stroke:none"
+ transform="translate(-318.43135,493.53084)"
+
inkscape:export-filename="/home/andreasn/SparkleShare/gnome-mockups/initial-app-states/layout-proposal.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><flowRegion
+ id="flowRegion4711"><rect
+ id="rect4713"
+ width="237.13916"
+ height="42.078217"
+ x="669.63013"
+ y="321.78152"
+ style="font-size:22.5px;fill:#888a85;fill-opacity:1" /></flowRegion><flowPara
+
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5px;line-height:200%;font-family:Cantarell;-inkscape-font-specification:'Cantarell
Bold';text-align:center;text-anchor:middle;fill:#888a85;fill-opacity:1"
+ id="flowPara4715">Welcome Message</flowPara></flowRoot> </g>
+ </g>
+ <g
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ id="g8911"
+ transform="translate(784.0016,581.36218)"
+ style="display:inline;fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g8913"
+ transform="translate(-60,-518)" />
+ <g
+ id="g8915"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8917"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8919"
+ transform="translate(-60,-518)"
+ style="fill:#888a85">
+ <g
+ style="display:inline;fill:#888a85"
+ id="g8921"
+ transform="translate(19,-242)">
+ <path
+
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale
Mono';-inkscape-font-specification:'Andale
Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#888a85;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new"
+ id="path8923"
+ d="m 45,764 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858
0.6875,0.3125 L 49,766.59375 51.3125,764.3125 C 51.578125,764.082 51.759172,764.007 52,764 l 1,0 0,1 c
0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 52.906938,770.46942 52.999992,770.7347
53,771 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 49,769.4375 46.71875,771.71875 C
46.530586,771.90694 46.26529,772 46,772 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 l
2.28125,-2.25 L 45.28125,765.75 C 45.070508,765.55537 44.97809,765.28075 45,765 l 0,-1 z"
+ inkscape:connector-curvature="0" />
+ </g>
+ </g>
+ <g
+ id="g8925"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8927"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ <g
+ id="g8929"
+ transform="translate(-60,-518)"
+ style="fill:#888a85" />
+ </g>
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/home/aday/checkout/gnome-devel-docs/hig3/C/figures/action-bars.png"
+ inkscape:connector-curvature="0"
+ id="path8931"
+ d="m 771.5,580.85688 0,17.0103"
+
style="display:inline;fill:none;stroke:#a7a7a7;stroke-width:0.99999988px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
/>
+ <g
+ style="display:inline"
+ id="g4717"
+ transform="matrix(1.7375798,0,0,1.7375798,-2435.53,5374.0206)">
+ <g
+ transform="translate(1619.999,1)"
+ id="g4719">
+ <path
+
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;enable-background:accumulate"
+ d="m 31.25078,-2692.625 a 4.0003996,4.0003996 0 0 0 -3.25,4 l 0,52 a 4.0003996,4.0003996 0 0 0
4,4 l 40,0 a 4.0003996,4.0003996 0 0 0 4,-4 l 0,-37.75 a 4.0003996,4.0003996 0 0 0 -1.125,-2.875 l
-14.25,-14.25 a 4.0003996,4.0003996 0 0 0 -2.875,-1.125 l -25.75,0 a 4.0003996,4.0003996 0 0 0 -0.3748,0
4.0003996,4.0003996 0 0 0 -0.3748,0 z m 4.75,8 20,0 0,12 12,0 0,32 -32,0 0,-44 z"
+ id="path4721"
+ inkscape:connector-curvature="0" />
+ <circle
+ r="1.2656249"
+ cy="89.734375"
+ cx="385.57812"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:none;stroke:#ffffff;stroke-width:1.18468678;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="circle4723"
+ transform="matrix(3.37642,0,0,3.37642,-1256.1462,-2973.3331)" />
+ <rect
+ y="-2664.6255"
+ x="56.000793"
+ height="4"
+ width="8"
+ id="rect4725"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+ id="rect4727"
+ width="24.000055"
+ height="4"
+ x="40.000847"
+ y="-2656.6255" />
+ <rect
+ y="-2648.6255"
+ x="40.000847"
+ height="4"
+ width="24.000055"
+ id="rect4729"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
/>
+ </g>
+ <g
+ transform="translate(879.99899,0)"
+ id="g4731">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4733"
+ d="m 771.25078,-2692.625 a 4.0003996,4.0003996 0 0 0 -3.25,4 l 0,52 a 4.0003996,4.0003996 0 0 0
4,4 l 40,0 a 4.0003996,4.0003996 0 0 0 4,-4 l 0,-37.75 a 4.0003996,4.0003996 0 0 0 -1.125,-2.875 l
-14.25,-14.25 a 4.0003996,4.0003996 0 0 0 -2.875,-1.125 l -25.75,0 a 4.0003996,4.0003996 0 0 0 -0.3748,0
4.0003996,4.0003996 0 0 0 -0.3748,0 z m 4.75,8 20,0 0,12 12,0 0,32 -32,0 0,-44 z"
+
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:Sans;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;enable-background:accumulate"
/>
+ <circle
+ r="1.2656249"
+ cy="89.734375"
+ cx="385.57812"
+ transform="matrix(3.37642,0,0,3.37642,-516.14616,-2973.3331)"
+ id="circle4735"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#daddda;stroke-width:1.18468678;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+ id="rect4737"
+ width="8"
+ height="4"
+ x="796.00079"
+ y="-2664.6255" />
+ <rect
+ y="-2656.6255"
+ x="780.00085"
+ height="4"
+ width="24.000055"
+ id="rect4739"
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
/>
+ <rect
+
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#daddda;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+ id="rect4741"
+ width="24.000055"
+ height="4"
+ x="780.00085"
+ y="-2648.6255" />
+ </g>
+ </g>
+ <rect
+
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#2e3436;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ id="rect4220"
+ width="149"
+ height="149"
+ x="395.5"
+ y="659.86218" />
+ <path
+
style="fill:none;fill-rule:evenodd;stroke:#2e3436;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 544,808.36218 -148,-148"
+ id="path4222"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <path
+ sodipodi:nodetypes="cc"
+ inkscape:connector-curvature="0"
+ id="path4224"
+ d="m 396,808.36218 148,-148"
+
style="fill:none;fill-rule:evenodd;stroke:#2e3436;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
/>
+ </g>
+</svg>
diff --git a/hig/C/initial-state-placeholders.page b/hig/C/initial-state-placeholders.page
new file mode 100644
index 0000000..c03d05f
--- /dev/null
+++ b/hig/C/initial-state-placeholders.page
@@ -0,0 +1,45 @@
+<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:uix="http://projectmallard.org/experimental/ui/";
+ type="topic"
+ id="initial-state-placeholder">
+
+ <info>
+ <link type="guide" xref="patterns#secondary"/>
+ <desc>Image and text shown when an application is initially empty</desc>
+ <credit type="author">
+ <name>Allan Day</name>
+ <email>aday gnome org</email>
+ </credit>
+ <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>
+ </info>
+
+<title>Initial state placeholders</title>
+
+<media type="image" mime="image/svg" src="figures/patterns/initial-state-placeholder.svg"/>
+
+<p>An initial state placeholder is an image and text which fills the space in an application that has never
contained any content.</p>
+
+<section id="when-to-use">
+<title>When to use</title>
+
+<p>In some cases an application might be empty until a user adds some content to it. In these scenarios, an
initial state can be used to provide a rich and inviting experience. This helps to avoid the first use of the
application being downbeat and unwelcoming.</p>
+
+<p>An initial state placeholder should only be used when an application is going to be unavoidably empty. In
many cases it is often better to pre-populate the application.</p>
+
+</section>
+
+<section id="guidelines">
+<title>Guidelines</title>
+
+<list>
+<item><p>Follow the standard layout for the size and placement of the image and labels, so that your
application is consistent with other GNOME 3 applications.</p></item>
+<item><p>The imagry used should be rich and colorful.</p></item>
+<item><p>The text that accompanies the image should be positive and upbeat. This is a moment where you can
sell your application and establish a positive identity for it. It can also be an opportunity to strike up a
relationship with the user by addressing them directly.</p></item>
+<item><p>If there are controls that allow items to be added, it can be appropriate to highlight them using a
<link xref="buttons#suggested-and-destructive">suggested style</link> while the list/grid is empty.</p></item>
+<item><p>While an application is initially empty, some controls don't serve a purpose (such as those for
browsing content, changing view, or searching). Making these controls insensitive will help to avoid the user
being disappointed, or trying features that won't work.</p></item>
+<item><p>An initial state should persevere until content is added to the application, after which it should
not be seen again. If the application becomes empty subsequently, an <link xref="empty-placeholder">empty
state can be used</link>.</p></item>
+</list>
+
+</section>
+
+</page>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
