Mark Boulton

Are you serious? Unless you're David Carson, you should always design based on a grid if you want good design. Mark Boulton wrote some amazing articles about grid design long before grid frameworks were a thing http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-gr…

Thank you; that's an excellent resource! A couple of other good ones: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typog… http://webtypography.net/toc/

Fun! But a heavy emphasis on doing things by eye. Personally I prefer the results of following stricter rules extracted from print typesetting. A few examples: - I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes. - I've never heard of there being a rule for how much space goes above a paragraph (this is a funny thing about web typography, since in print you indent the paragraph so there's no additional space). But I guess I'd consider it correct from a vertical rhythm standpoint to either use the line height or half of it. - Regarding vertical space between lines, what I've heard is you want to make the spacing between lines visually appear greater than the space between words. As far as I know this is just done by eye. (I.e., so the rule is to choose a leading that makes your space between lines appear larger than the space between words.) - I think there are exact header sizes that are better than picking an arbitrary font size that seems to look big enough. The trick I use here is to take the [traditional point scale](https://markboulton.co.uk/journal/five-simple-steps-to-better-typograp… and convert it to a ratio relative to 12 point. This is a way to bake historically refined font ratios into your design. - Personally, when choosing margins I'd use a [grid system](https://practicaltypography.com/grids.html), which will give you an exact gutter…

> I wonder if we need a middle-class of open source contributor [...] I wish somebody would do the time-consuming and boring-but-valuable work of polishing these contributions into something merge-worthy... We need a valuing of non-coding contributions, and a way of welcoming them into projects. I like building community and dealing with people. I like project management, planning, and thinking about funding opportunities. I even like (but am not good at) writing documentaiton - but only if the author of the code is willing to explain _why_ they wrote the code this way rather than get me to write how it works. I haven't come across a project that is open to welcoming people who bring these skills. People do these things have got to that place through long-term involvement, or because the role fell to them. Or no one does it. A decade ago there was a drive to get designers and UX people involved in open source projects [0]. It came to little, to the detriment of the entire open source community. Writing code isn't the only skill important in a project, and if we embrace that the whole experience of using the framework, library or software improves. 0. https://markboulton.co.uk/journal/design-in-open-source/

I try to keep my subscription to an absolute minimum since I like to leave some time for reading books. After a lot of culling, I'm currently subscribed to some popular feeds: http://www.smashingmagazine.com/ (general web design / dev) http://www.alistapart.com/ (long form web design / front-end) http://dailyjs.com/ (Javascript / node.js) http://createdigitalmusic.com/ (digital music / software) http://www.creativeapplications.net/ (new-media art) And a handful of unpopular ones: http://www.ribbonfarm.com/ (absolutely my favorite blog in the world – self-describes as "refactored perception) http://www.tempobook.com/blog/ (same author as above, posts related to his last book) http://worrydream.com/feed.xml (not really a blog, but Bret Victor writes some of the best long-form articles on interaction design around – read all of them) http://www2.technologyreview.com/rss/video_rss.aspx (Tech Review videos, sparsely updated – mainly because the editor's interviews are awesome/hilarious) http://idlewords.com/ (breathtaking travel blog from the founder of Pinboard) http://www.loper-os.org/ (awesome / hilarious posts by a software heretic on the general terrible state of things in technology – keeps me in touch with Alan Kay-esque thinking) http://we-make-money-not-art.com/ (the only contemporary art blog I like from a very dedicated Italian writer) http://vagueterrain.net/ (occasionally published digital art magazine, themed topics, guest…

Mark Boulton's posts really are some of the best typography eye-openers. Especially his "Five Steps" posts[1][2] were what got me into design and made me "get" it. And it didn't take a lot of time to read through them. I recommend that people skip his book and read these two pieces instead. Bear in mind that the grid guide is more of an intro piece; you probably won't be able to create grid-based websites after reading it (I know I wasn't). Another good resource is Typography for Lawyers[3]. I'm actually very surprised (and disappointed!) that Paul didn't mention it. It's recently undergone a redesign, which has rendered all its former links broken, and it seems a little harder to navigate and browse for fun, but you must flip through the digital pages. It's probably the best typography resource for newcomers along with Boulton's 5-step guides. I also just combed through my bookmarks to see if Boulton had anything else, and a great presentation popped up[4]. It, too, is great to get you into the typographic mindset. These are really the best way to get someone into typography, and they are quick to read; no resounding THUMP from dumping seemingly insurmountable literature on your desk. Of course, once you've got the bug, it'll never leave you, and a lot of the world will look a lot worse and be more painful for it. Educate yourself at your own risk. [1]: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-bet… [2]:…

I am quite sure that is done deliberately. I can't find a good resource to point to, but this article by Mark Boulton describes why you would do that with bulleted lists. I would assume that the same applies to ordered lists: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-bet… > With the advent of desktop publishing it became suddenly very easy and cost-effective to produce bodies of text. The problem was these bodies of text work within a box. Every character in this box had to be within the box, Hanging Punctuation requires characters to be out of the box. This was a problem for the software and as a result was ignored. An important aspect of typesetting just swept under the carpet like that. It’s a great shame. And: > A ranged left body of type is pretty much destroyed, aesthetically, when punctuation isn’t hung. The eye looks for straight lines everywhere, when type is indented in this way, it destroys the flow of text.

Yeah it's not always been there, Mark Boulton helped CERN restore it to it's original URL a few years ago, http://markboulton.co.uk/journal/firstwebsite

I come from a graphic design background with training in typography. While you _can_ specify font-size in any units CSS understands, typography as a field has traditionally used PT and EM units for sizing and spacing. - for container size I use % or PX - for margins, spacing, and padding I use EM or PX - for text sizes I use PT or % Here's a short, good primer for typography on the web: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typog…

W3C has been hashing out new grid-based specs for quite some time now, because as admitted in the Grid Layout Module working draft, "As websites evolved... floats, were not necessarily well suited for application layout." http://www.w3.org/TR/css-grid-1/#background Dozens & dozens of CSS grid systems have emerged, but without retooling the internals of the browser's layout engine and adding new CSS language features, such attempts retain the flaws of CSS float & will taint content semantics. But, of course, the W3C's grid-based efforts is not without flaws, see: http://www.markboulton.co.uk/journal/rethinking-css-grids

Hanging bullets/numerals have nothing to do with markdown, they're a typographic choice and in my opinion look better than the indented style that you normally get by default. In fact, the author of the post has previously written a hugely popular series about typography that specifically mentions this choice: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typog…

Yes they do eg http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-bet…

There is nothing wrong with indenting lists negatively. In fact some say it is more correct: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-bet…

This will inform you, rather than provide a reset or framework: http://webtypography.net/ (and of course, reading The Elements of Typographic Style is worthwhile http://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style) This series of blog posts by Mark Boulton are a good read: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-bet… If you like that, maybe you should get his book: http://fivesimplesteps.com/books/practical-guide-designing-for-the-web I haven't used Baseline, but it looks like fairly good framework that has type in mind: http://baselinecss.com/

A couple that come to mind: http://subtraction.com http://cubancouncil.com http://madebyelephant.com http://jasonsantamaria.com http://markboulton.co.uk http://hicksdesign.co.uk

Align your graphic elements. http://en.wikipedia.org/wiki/Grid_(typography) http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_des…

I couldn't agree with you more. I have been working on trying to get some skills therein. I paste the notes from my personal expertise board. Graphic Design: Relationship Transition Layering Principles of Design: Repetition Opposition: Excitement and tension. Too much is bad. Particularly thick and thin lines in logos. Priority: The order of the items. Position: Use a grid. Divide in twos and connect corners diagonally. Attributes of Design: Balance: Arrangements so that elements equal each other, not overpowering each other. Can balance objects with each other or whitespace with objects. Emphasis and Contrast: too little is boring, too much irritating. Plain text with bold or underline in small quantities works. Rhythm: regular movemet, reduce line spacing or tighten words to increase speed. You can increase the line height, but too much and the eye has trouble finding the next point. The rhythm should fade out, and not end abrubtly. Position: Grid Choices http://www.troytempleman.com/2010/04/30/grids-in-graphic-design/ Rule of Thirds Golden Ratio Columns Baseline Grid http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-gr… Start with a symmetric plus, and then use 1.414 ratios to create smaller sections with margins.

This is more awesome than it first appears. They are a SaaS "Create Once, Publish Everywhere" (COPE) provider. NPR popularized the term a few years back, and the use it in their production environment. I have one client actively using the same architecture in production, and they love it. They use a Django site as the backend, and node.js-powered websites to publish the content. Some links on the topic: http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-ev… http://www.linkedin.com/groups/Do-you-COPE-Create-Once-3912082.S.11705… http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-cont… http://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-cont… http://www.markboulton.co.uk/journal/adaptive_content_management http://meetcontent.com/blog/structured-content-an-overview/ One of the uphill battles they face is the nomenclature. Most people couple their content creation tools with the publishing tools. I.e., we think of a CMS as both the editor and the content renderer. This sort of system decouples that. I think they are smart starting with a PHP library: that seems to target a broad install base, and publishing in PHP using an API is much easier than building a solid CMS in PHP.

The two main designers that started the grid-craze were Mark Boulton and Khoi Vinh. Some resources from them: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-des… http://www.subtraction.com/2004/12/31/grid-computi How to use grids? It is usually as simple as adding some css, divs and classes. At its most basic, you can use a gridpaper background or this javascript gridder: http://gridder.andreehansson.se/ that works well with the http://960.gs grid framework. Why I use grids? - maintainability and cooperation - visual consistency across browsers - less development time spent with display bugs Why I don't use grids? - Can become a bit boring/holding you back - Not all designs work with even columns (for example those based on the golden ratio) - Code bloat (you are using divs like columns and rows, in almost the same way one would layout a page with tables, also devs sometimes forget to remove the unused classes from the production CSS)

A number of comments. 1. The layout is prehistoric. It harkens to the earliest days of internet design. Lose the global auto centering and create some blocks. Do this on a sketch pad and make as many variation as you can before deciding (see: http://v3.jasonsantamaria.com/archive//2004/05/24/grey_box_method.php)… Also, if you don't want to actually make borders, ensure the blocks are small enough wrt the text to be well-defined. 2. The pallet chosen is diluted. An easy way to chose pallets is to use a program such as kuler.adobe.com and make an analogous or complementary pallet. Don't make the colors too intense and test them as much as you'd test any other part. 3. The typography runs together. Typography is becoming huge in online design and it's really hard to get right. To learn a bit, I suggest Mark Boulton's "Five Simple Steps" especially steps 4 and 5 (http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_bet… 4. Keep asking people. When you design something you never have a good idea of how effective it is. Asking people here and elsewhere is an absolute must, so this was definitely a good step. Hope those help and inspire.