Posts Tagged design

“This redesign is deliberately over the top.”

Cameron Moll Go to the source

Jeffrey Zeldman, in a beautifully written piece titled, “ Web Design Manifesto 2012 ”: This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful…. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer…… Read the rest here

Backgrounds, Shadows, Fonts, and the Cascade

Eric Meyer Go to the source

The fact that this: h1 {color: red;} h1 {color: green;} …results in green h1 text, but this: h1 {background: url(red-wave.gif) repeat, url(green-wave.gif) repeat;} …results in a red wavy h1 background does my head in every single time . And it’s the same with text and box shadows, too! In cases where backgrounds or shadows overlap, the first one you write “wins”, by virtue of being “in front of” the background images that are listed after it. I know that font stacks are also done in order of most-to-least preferred, but I don’t see them as being equivalent. The reason is that a font stack is a list of fallbacks—use this face unless it can’t render the glyph or doesn’t exist, in which case try the next one in the list, etc., etc. Multiple background images and multiple shadows, on the other hand, are not a series of fallbacks… Read the rest here

FF Chartwell, a Chart Font

Cameron Moll Go to the source

Earlier today Erik Spiekermann made mention of FF Chartwell , and, at least conceptually, it’s pretty fantastic. Similar to the way icon fonts replace keyboard characters with icons, FF Chartwell uses alphanumeric characters to generate beautiful charts on the fly. To my knowledge, however, this works only in software programs and can’t be embedded in web pages. Update: It can be embedded . It’s possible to embed it, but the current EULA doesn’t allow it. Demo by Yaron Schoen who says , “Besides the FOUT which was really hard (impossible?) to remove, it was glorious.” The family includes “weights” for creating bar, line, radar, pie, rose, and ring charts… Read the rest here

User Research ain’t no Magic Bullet

Andy Budd Go to the source

User research is an extremely powerful tool (or set of tools) for understanding customer needs and behaviours. As digital projects grow in size and complexity, the risk of building the wrong thing becomes an increasing danger. So it makes sense to spend a portion of your budget to ensure that you’ve done the due diligence and are investing wisely. Marketing teams have known this for years, so few company’s would dream of launching a product or service without first understanding the market and ensuring product-market fit. However for some reason this hasn’t filtered into the world of digital products… Read the rest here

Hillman

Jason Santa Maria Go to the source

Hillman Curtis, artist, designer, filmmaker, Brooklynite, bicyclist, friend, and explorer passed away last week at the young age of 51. I put off writing about him because I couldn’t find the words. Everything I would try to write felt so insignificant for such a significant man. Thankfully, as is usually the case, I found my words among friends. The folks over at Happy Cog have collected some thoughts on Hillman and invited a few of us staff alumni to share too. Below is my contribution: I followed Hillman’s work when I was first getting started in design. … Read the rest here

Fanfare for the common breakpoint

Adactio Go to the source

.net Magazine is running a series of articles on their site right now as part of their responsive week. There’s some great stuff in there: Paul is writing a series of articles—one a day—going step-by-step through the design and development of a responsive site , and Wilto has written a great summation of the state of responsive images . There’s also an interview with Ethan in which he answers some reader-submitted questions. The final question is somewhat leading: What devices (smartphones/tablets) and breakpoints do you typically develop and test with? Ethan rightly responds: Well, I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of ‘320px’, ‘480px’, ‘768px’, or whatever – the web’s so much more flexible than that, and those pixels are a snapshot of the web as we know it today… Read the rest here

Conditionally loading content

Adactio Go to the source

Bevan did a great job on the dConstruct website . I tried to help him out along the way, which mostly involved me doing a swoop’n’poop code review every now and then. I was particularly concerned about performance so I suggested base-64 encoding background images wherever possible and squeezing inline images through ImageOptim . I also spotted an opportunity to do a bit of conditional loading . Apart from the home page, just about every other page on the site features a fairly hefty image in the header …if you view it in a wide enough browser window. If you’re visiting with a narrow viewport, an image like this would just interfere with the linearised layout and be an annoying thing to scroll past. … Read the rest here

Design Is a Job, by Mike Monteiro

Jason Santa Maria Go to the source

I’m very excited for our latest release from A Book Apart available today, Mike Monteiro’s Design Is a Job . I’ve been working in design a while now and good handbooks on how to do it right are few and far between. Years ago, I read Norman Potter’s What Is a Designer , a thin yet surprisingly dense book that attempts to quantify this dear profession. There’s truth to be found there, but the language is terse. Perhaps it’s an effort to dissuade all but the most brave; if you get to the end and you still want to be a designer, you may have earned it… Read the rest here

A Typographic Refresh

SimpleBits Go to the source

A little over five years ago, Greg Storey suggested Whitney for the SimpleBits logotype that went along with a previous brand update . I’m thankful he did, because since then it’s become a favorite typeface around these parts, eventually becoming the base for the current ‘SB’ mark. Over the next few years,  Hoefler & Frere-Jones catalog became my standard go-to font choices for presentation slides. I was hooked. Over the weekend I made some subtle design tweaks here, and some not-so-subtle type refreshing. I’m honored to be beta testing H&FJ’s forthcoming webfonts offering. … Read the rest here

Responsive questions

Adactio Go to the source

I got an email from Ben Frain recently asking if I’d answer some questions for an upcoming article in MacUser UK about responsive design. Seeing as this is a topic I could natter on about endlessly, I happily obliged. Here are my answers to his questions. There’s a good chance that much of this will get trimmed or altered for the final article so I figured I’d share my verbatim responses here. … Read the rest here

Invented Elements

Eric Meyer Go to the source

This morning I caught a pointer to TypeButter , which is a jQuery library that does “optical kerning” in an attempt to improve the appearance of type. I’m not going to get into its design utility because I’m not qualified; I only notice kerning either when it’s set insanely wide or when it crosses over into keming . I suppose I’ve been looking at web type for so many years, it looks normal to me now. (Well, almost normal, but I’m not going to get into my personal typographic idiosyncrasies now.) My reason to bring this up is that I’m very interested by how TypeButter accomplishes its kerning: it inserts kern elements with inline style attributes that bear letter-spacing values. Not span elements, kern elements. … Read the rest here

Designing in the Browser is Not the Answer

Andy Budd Go to the source

The argument for “designing in the browser” seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment? The reason is simple. The browser was intended as a delivery mechanism with HTML and CSS a means of describing content rather than defining it (a subtile distinction I know, but an important one). As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation. Instead this process is heavily abstracted through code. … Read the rest here

Remembering Ralph McQuarrie

Adactio Go to the source

Ralph McQuarrie died yesterday at the age of 82. His pre-production paintings shaped the Star Wars films …and the Star Wars films shaped me. His work adorned my bedroom wall when I was growing up—I remember this Return Of The Jedi poster in particular. His sweeping vistas populated with small figures dwarfed by their otherworldly surroundings helped to establish the Star Wars universe as something that existed beyond the confines of the films. George Lucas made the movies …but Ralph McQuarrie shaped the mythology. … Read the rest here

Finding Unicode

Eric Meyer Go to the source

A little while back, I was reading some text when I realized the hyphens didn’t look quite right. A little too wide, I thought. Not em-dash wide, but still…wide. Wide-ish? But when I copied some of the text into a BBEdit window, they looked just like the hyphens I typed into the document. … Read the rest here

Prefixed Classes in Bootstrap

Snook Go to the source

Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap . "Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system." He goes on to say… "There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system. That is to say, we have a shared idea of what “success” looks for buttons and alerts, but the execution is scoped entirely to each independent component. No questions of where common styles are used and no concern of unintended effects, making each component more durable and flexible." If you were wondering what an example implementation of SMACSS might look like? … Read the rest here

The Inverted Bike Shop

Hicksdesign Go to the source

I loved bike shops as a kid (especially the smell of them!) but we didn’t, and still don’t, have anything quite like this. 718 Cyclery is not only a great retail space, but the whole attitude to building bikes and access to the process is unique and just plain brilliant. I found myself nodding in agreement to everything Joe says. As for the bike they build in video – gorgeous! Via twinfish on twitter. … Read the rest here

Insights on Symbol Design - The Noun Project

Hicksdesign Go to the source

When I was writing The Icon Handbook, I had my list of first choices for people I wanted to work with. Chris Mills and Owen Gregory for Project Manager and Copy Editor, Gedeon Maheux from the Iconfactory for Technical Editor, and for the foreword… The Noun Project. All of which said yes! I absolutely love what The Noun Project are doing, there isn’t a comparable site for the quality of it’s curated collection of pictograms. So when I was asked to write a guest post for The Noun Project blog, I was chuffed to bits! The post I’ve written, ‘Insights on Symbol Design’ contains portions from The Icon Handbook (and as such It’s another taster for the book), but was still written more or less from scratch, looking at considerations of pictogram design in particular. Comment on this … Read the rest here

A hamster in a wheel

Hicksdesign Go to the source

Last Autumn I borrowed a friend’s Turbo Trainer, an odd looking device that allows you to use your bike indoors for training. With the nights getting longer and the weather getting worse, it seemed like a good way of retaining the fitness gains and weight loss from the summer. My first experience wasn’t that great, rather uninspiring in fact. The bike is locked into a rigid position, there was a fair bit of noise (even though this was one of the quietest ones) and it felt nothing like cycling on a road. … Read the rest here

My Notes on Writing an E-book

Snook Go to the source

So, yeah. I wrote an e-book . It has been an interesting experience and I thought I’d share a few random thoughts on how things have gone so far. Backwards When I first started down the path of writing the SMACSS e-book, I had intended it to be either an e-book or a printed book. … Read the rest here

Export Illustrator Layers and/or Artboards as PNGs and PDFs

Hicksdesign Go to the source

I’m getting a lot of ‘Are you still using Fireworks?’ questions recently, and my answer is ‘Not for almost 2 years now…’. I’ve been using Illustrator CS5 solidly ever since, but part of the transition is going from Fireworks Pages/States to Illustrators multiple artboards. Artboards are more flexible, and allow you to have see everything at once, but the built-in options for exporting artboards are limited. I use this wonderful script, which provides all the settings I could desire, from format to filenaming. Top work! Comment on this … Read the rest here