-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.php
262 lines (228 loc) · 12.9 KB
/
blog.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!doctype html>
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<?php include( "scripts/time.php" ); ?>
<title>Geri Coady | Designer & Illustrator in St. John's, Newfoundland, Canada | Blog</title>
<meta charset="utf-8">
<meta name="description" content="Geri Coady is a colour-obsessed freelance designer and illustrator living and working in St. John's, Newfoundland, Canada.">
<meta name="keywords" content="illustration, web design, graphic design, branding, logo design, speaking, speaker, front end design, photography, photographer, colour, color, accessibility, st. john's, newfoundland, atlantic, canada">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if lt IE 9]>
<script src="https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js"></script>
<![endif]-->
<!--[if !lte IE 6]>
<!-->
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/print.css" media="print">
<!--<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
<![endif]-->
<script src="scripts/modernizr.js"></script>
<style>
.sel {
<?php print $small; ?>
}
@media screen and (min-width: 57em) {
.sel {
<?php print $large; ?>
}
}
</style>
<link rel="alternate" type="application/rss+xml" title="hellogeri.com RSS" href="http://hellogeri.com/rss">
</head>
<body class="blog">
<div id="page">
<header class="doc-head">
<nav role="navigation">
<a href="/" class="logo" title="Illustration, Design, and Photography in Newfoundland, Canada by Geri Coady"><h1>Illustration, Design, and Photography in Newfoundland, Canada by Geri Coady</h1></a>
<ul id="toggle-nav">
<li><a class="icon-illustration" href="illustration.php">illustration</a></li>
<li><a class="icon-design" href="design.php">design</a></li>
<li><a class="icon-photo" href="photography.php">photography</a></li>
<li><a class="icon-about" href="about.php">about me</a></li>
<li><a class="icon-blog" href="blog.php">blog</a></li>
<li><a class="icon-contact" href="contact.php">get in touch</a></li>
</ul>
</nav>
<div role="banner" class="basicheader">
</div>
</header>
<main role="main" class="clearfix">
<article class="post">
<header>
<h1>The Problem With Style Guides</h1>
<p>Posted in <a href="/blog/advertising">Advertising</a>, <a href="/blog/artanddesign">Art & Design</a>, <a href="/blog/webdesign">Web Design</a>, on <time pubdate datetime="2012-10-30T12:23:31-03:30">October 30, 2012</time></p>
</header>
<p class="excerpt-lg">Last week, my friend <a href="http://rainypixels.com">Nishant Kothary</a> <a href="https://twitter.com/rainypixels/status/260867722357911553">tweeted</a> about how he had concluded that style guides are the “most useless design deliverables in existence.” Instead of discussing it over Twitter, we each decided to blog our thoughts. </p>
<p>I’ll say right away that I believe style guides for websites are headed down the right path and are an important asset. <a href="http://www.maban.co.uk/">Anna Debenham</a> wrote a <a href="http://24ways.org/2011/front-end-style-guides">great article</a> in last year’s 24 Ways about the benefits of front-end style guides. My problems with style guides stem from the traditional “graphic standards manuals” that are either written as though they are carved in stone and ruled with an iron first, or, style guides that seem like complete afterthoughts and aren’t enforced in any way at all.</p>
<q>While it’s very important to keep the most critical elements of a brand consistent across all materials, there should be more opportunity for discussion with the brand guardians if new ideas are proposed.</q>
<p>Style guides are intended to protect the integrity of the brand when in the hands of other designers. They’re meant to make workflow faster and to reduce the number of decisions a designer has to make. While the intentions are good, most style guides that I’ve worked with have created problems, too.</p>
<h2>Stifling Creativity</h2>
<p>Working at an advertising agency, I’ve had to work with many graphic standards manuals from large companies and organizations. Most guides share common elements like rules for approved typefaces, colour palettes, and logo usage; but others have been dozens and dozens of pages in length, spelling out every detail of what’s allowed and what’s forbidden. These guides can be so strict that it can be virtually impossible to introduce a little creativity. You might not be allowed to place a logo over a photograph, even if it’s perfectly legible. You might be forced to place a logo at the bottom right-hand side of a page every time, even though it might look better in your design if it was centered on the page. Often, you’ll need to send your work back for approval, and if you don’t adhere to the rules, it’ll be rejected. While it’s very important to keep the most critical elements of a brand consistent across all materials, there should be more opportunity for discussion with the brand guardians if new ideas are proposed.</p>
<p><img src="http://hellogeri.com/images/uploads/blog/blog_ucla_styleguide.jpg" alt="UCLA Style Guide" width="675" height="561" /></p>
<p>Style guides are intended to protect the integrity of the brand when in the hands of other designers. They’re meant to make workflow faster and to reduce the number of decisions a designer has to make. While the intentions are good, most style guides that I’ve worked with have created problems, too.</p>
<h2>Being a “Brand Guardian” Isn’t Easy</h2>
<p>If you’re publishing a style guide intended for use by designers and developers on a internal team, there’s a decent chance that it will be followed. The heavily-referenced <a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks style guide</a> comes to mind, here. If you’re creating a style guide that’s going to be shared with people outside of the design department who may not even have design skills, things can quickly fall apart. One of the worst offenders I’ve seen for this are universities. </p>
<p>Here is a sample of some code. It is a fancy <code><blockquote></code>.</p>
<h2>Updates</h2>
<ol>
<li>She sat down on the grass and looked at her companions, and they sat down and looked at her, and Toto found that for the first time in his life he was too tired to chase a butterfly that flew past his head.</li>
<li>"Oh, I'm not afraid," replied the Scarecrow.</li>
</ol>
<footer class="author">
<img src="img/geri-avatar.png">
<h3>About Me</h3>
<p>I’m Geri Coady—a designer and illustrator living and working in St. John’s Newfoundland—the most easterly city in North America. I've got an eye for detail, a passion for the web, and I'm ready to work with clients worldwide. <a href="about">Want to learn more?</a></p>
</footer>
</article>
<section role="note">
<h1>7 Comments</h1>
<article class="comment" id="r1245">
<header>
<img src="http://www.gravatar.com/avatar/414baf1998458160c4cb3c37f6876eb4" alt="Jacob Halton">
<ul>
<li>Jacob Halton</li>
<li><time pubdate datetime="2012-10-30T16:07:20-03:30">Oct 30/12 at 4:07PM</time></li>
</ul>
</header>
<div class="comment-body">
<p>A well designed brand style guide maintained by a good creative director/team will hold up the brand's integrity.</p>
<p>A style guide is meant to be just that, a guide. If you use it as some kind of "bible" for the brand, it'll just get stale and boring really fast.</p>
<p>To NOT have brand guidelines is asking for non-cohesive communication material and different variations on the brand depending on what designer is working on it. Then again, even a good brand guideline in the hands of a bad designer is worthless for anything more than maybe light consistency.</p>
</div>
</article>
<article class="comment" id="r1274">
<header>
<img src="http://www.gravatar.com/avatar/482e98f1d5afb6d335ffb746e4f6ec57" alt="Ben">
<ul>
<li>Ben</li>
<li><time pubdate datetime="2012-11-07T04:27:04-03:30">Nov 7/12 at 4:27AM</time></li>
</ul>
</header>
<div class="comment-body">
<p>Thanks Geri, this is a nice round up and references quite a few sources I'm happy to know about.</p>
</div>
</article>
<article class="comment" id="r1327">
<header>
<img src="http://www.gravatar.com/avatar/11ff4245cfa2e3c160f9bc9349a9bcfc" alt="Krishna Solanki">
<ul>
<li>Krishna Solanki</li>
<li><time pubdate datetime="2012-12-05T06:48:03-03:30">Dec 5/12 at 6:48AM</time></li>
</ul>
</header>
<div class="comment-body">
<p>Good read, some interesting thoughts, and definitely agree.. a style guide is just that—a guide! </p>
</div>
</article>
</section>
<section class="comment_box">
<h1>Leave a Comment</h1>
<form role="form" id="comment_form" method="post" action="http://hellogeri.com">
<fieldset>
<ul>
<li>
<label for="comment_name">Your Name:</label>
<input id="comment_name" name="name" type="text" placeholder="Enter your name or handle here" required>
</li>
<li>
<label for="comment_website">Your Website:</label>
<input id="comment_website" name="website" type="text" placeholder="Enter your URL here">
</li>
<li>
<label for="comment_email">Your E-mail (Not Published):</label>
<input id="comment_email" name="email" type="email" placeholder="name@domain.com" required>
</li>
</ul>
</fieldset>
<fieldset>
<label for="comment_content" class="textarea">Comment</label>
<textarea id="comment_content" name="comment" rows="5" required></textarea>
</fieldset>
<fieldset>
<p>Please enter the word you see in the image below:</p>
<label><img src="http://hellogeri.com/images/captchas/1363571282.0088.jpg" width="140" height="30" style="border:0;" alt=" " /></label>
<input id="captcha" type="text" name="captcha" value="" size="20" maxlength="20">
</fieldset>
<fieldset>
<button type="submit">Add Comment</button>
</fieldset>
</form>
</section>
</main>
<section role="complementary">
<section class="availability">
<a href="#">Available For Hire</a>
<p>Accepting work from July 2013</p>
</section>
<section class="categories">
<h2>I like to talk about…</h2>
<ul>
<li><a href="/blog/advertising">Advertising</a></li>
<li><a href="/blog/artanddesign">Design</a></li>
<li><a href="/blog/illustration">Illustration</a></li>
<li><a href="/blog/life">Life</a></li>
<li><a href="/blog/photography">Photography</a></li>
<li><a href="/blog/reviews">Reviews</a></li>
<li><a href="/blog/tutorials">Tutorials</a></li>
<li><a href="/blog/webdesign">Web Design</a></li>
</ul>
<p><a href="/blog/archive">View All</a></p>
</section>
<section class="locations">
<h2>I'm speaking at…</h2>
<ul>
<li class="vancouver">
<p><a href="#">Interlink</a></p>
<p>June 5–6, 2013</p>
<p>Vancouver, BC</p>
</li>
<li class="toronto">
<p><a href="#">Future of Web Design</a></p>
<p>Oct. 8–9, 2013</p>
<p>New York, NY</p>
</li>
<li class="halifax">
<p><a href="#">HPX Digital</a></p>
<p>Oct. 23–25, 2013</p>
<p>Halifax, NS</p>
</li>
</ul>
<p><a href="/speaking">Past Events</a></p>
</section>
<section class="book">
<h2>Pocket Guide to Colour Accessibility</h2>
<a href="http://www.fivesimplesteps.com/products/colour-accessibility"><img src="img/GeriCoady-ColourAccessibility.png" alt="Pocket Guide to Colour Accessibility by Geri Coady"></a>
<p>My new book, <em>Pocket Guide to Colour Accessibility</em>, will help you create beautiful designs that are accessible to people with colour-blindness. Grab a copy over at <a href="http://www.fivesimplesteps.com/products/colour-accessibility">Five Simple Steps!</a></p>
</section>
</section>
<footer role="contentinfo">
<nav class="doc-foot">
<ul>
<li><a href="#">illustration</a></li>
<li><a href="#">design</a></li>
<li><a href="#">photography</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">get in touch</a></li>
</ul>
</nav>
<nav class="social">
<ul>
<li><a class="twitter" href="http://twitter.com/hellogeri">twitter</a></li>
<li><a class="dribbble" href="http://dribbble.com/hellogeri">dribbble</a></li>
<li><a class="flickr" href="http://www.flickr.com/photos/hellogeri">flickr</a></li>
<li><a class="lanyrd" href="http://lanyrd.com/profile/hellogeri">lanyrd</a></li>
<li><a class="rdio" href="http://www.rdio.com/people/hellogeri">rdio</a></li>
<li><a class="zerply" href="http://zerply.com/hellogeri">zerply</a></li>
</ul>
</nav>
</footer>
</div>
<script src="scripts/respond.min.js"></script>
<script src="scripts/picturefill.js"></script>
<script src="scripts/nav.js"></script>
</body>
</html>