Muji Toaster

Muji Toaster

Muji Toaster

Muji Toaster

Muji Toaster

The great Naoto Fuka­sawa has designed a series of kitchen appli­ances for Muji, that are now avail­able in the US, and will be in the UK in the fall. The entire col­lec­tion is super min­i­mal and func­tional, but I’m in love with the toaster. Def­i­nitely going to replace my cur­rent toaster.

Muji has had a full line of kitchen appli­ances avail­able for a while in Japan, and it seems like they’re going to start bring­ing more of the prod­ucts to the US and Europe. Good news for us.

Read more about the col­lec­tion on Dezeen.

Atlas

Atlas

Atlas

Atlas

Atlas

Won­der­ful iden­tity design by Atlas for the Barcelona Design Museum. You can see more of Atlas’ excel­lent work on Face­book and Insta­gram.

Ditch the Printouts, Prototype Instead

Back in the day, I used to assem­ble my wire­frames and designs into a pre­sen­ta­tion deck, printed it all out, and then reviewed the work with my team/clients. Many design­ers still do this today, and it’s a bad habit devel­oped in the agency world where every­thing is printed out and put up on a board for review. Some folks might not print every­thing out, but they’ll still view the sta­tic screens side-by-side on a com­puter screen. This might work for designs meant for print, but it’s a lousy way of review­ing prod­uct designs meant for devices.

Here’s why.

First, it’s impor­tant to view your designs on the actual device they’re intended for. This puts your work into con­text and in its envi­ron­ment. You get a feel for the tan­gi­ble things that you don’t get with a print or sta­tic screens, for exam­ple, if a but­ton is posi­tioned in a loca­tion where you can’t eas­ily reach it with your thumb, or how scrolling with your fin­ger feels a lot dif­fer­ent than doing it with a mouse on a mon­i­tor. This kind of stuff isn’t vis­i­ble in your designs, but it affects the over­all experience.

Sec­ond, an inter­ac­tive pro­to­type gives you a bet­ter sense of how the expe­ri­ence flows from one screen to another, in both direc­tions. A proto also allows you to expe­ri­ence the tran­si­tions and inter­ac­tions by actu­ally tap­ping on stuff, and see­ing it react. Paper or sta­tic screens don’t offer this feed­back. There have been plenty of times when I’m review­ing wire­frames in Sketch, and every­thing looks and feels great, and then I dis­cover issues in the design when actu­ally view­ing it as a prototype.

Wire­frames and UI designs should be reviewed as a pro­to­type with basic inter­ac­tions, and on the device they were designed for. The time you usu­ally spend assem­bling and print­ing a deck, use it to build a pro­to­type instead. Tools like Invi­sion, Mar­vel, Atomic and Pix­ate allow you to cre­ate func­tion­ing pro­to­types in min­utes. These ser­vices also make it really easy to share your work with your team or client, so every­one can view it and add comments.

Why have a sin­gle sta­tic screen on paper, when you can have your entire user flow, with inter­ac­tions, on an iPhone. You can’t beat it.

Made In Italy

Why does the UK get all the great design exhibits? Damn it all to hell! If you’re in Lon­don this Fri­day and Sat­ur­day, you’re going to want to check this one out.

Paper com­pany Fedrigoni has part­nered with design stu­dio SEA, and Aiap to bring us Made In Italy, an exhi­bi­tion and lim­ited edi­tion book­let cel­e­brat­ing mid-century Ital­ian graphic design. Made In Italy will fea­ture work from Gian­carlo Iliprandi, Franco Grig­nani, Heinz Waibl, Mario Dagrada, Mimmo Catel­lano, and more.

The exhibit will be open from Fri­day, June 12th to Sat­ur­day, June 13th at Pro­tein: Stu­dio 2 gallery in London.

You can pur­chase tick­ets to the event from here.

Made In Italy

Made In Italy

Made In Italy

Made In Italy

Made In Italy

Made In Italy

Systematic Design

Systematic Design

I’ve always approached design in a sys­tem­atic way. Think­ing about things in basic pieces that together form other pieces.

I remem­ber assem­bling those plas­tic car mod­els when I was a kid, and always start­ing with the basic parts, that by them­selves didn’t form any­thing, but once assem­bled with other parts, they’d form a vital com­po­nent of the car.

I’d iso­late the rim, tire and bolts, and focused on them indi­vid­u­ally to form the wheels. Then I’d join the wheels with the axles, and sus­pen­sion to form the front-end. And finally, the front-end would be assem­bled to the chas­sis to com­plete the car.

I did this for every sec­tion of the model. I never tried to assem­ble the com­plete car all at once. By doing this, I could ensure that each part was pre­cisely assem­bled and func­tional, which would make for a bet­ter car model at the end.

This has been my approach to prod­uct design. Instead of design­ing a screen or page, my method is a design sys­tem con­sist­ing of Ele­ments, Com­po­nents and Tem­plates. Each a dif­fer­ent stage in the process.

Brad Frost’s atomic design is very sim­i­lar to my approach, but with addi­tional stages. I def­i­nitely rec­om­mend read­ing it.

Here is how my sys­tem works.

Elements

Ele­ments are the core parts of a design. They’re the but­tons, input fields, check­boxes, radio but­tons, drop-down, icons, col­ors, type styles, grids, and so on. These are some of the stan­dard ele­ments, but each design will dic­tate its own set.

I think of ele­ments as the “seeds” of my design. They start off as a sin­gle thing, and then grow into some­thing more use­ful when com­bined with other elements.

First, I design the ele­ments indi­vid­u­ally. I really like to focus on how the ele­ment is formed, and the details asso­ci­ated with it. Then I look at how the ele­ments work together and adjust from there.

Components

A com­po­nent is set of ele­ments that are assem­bled into some­thing func­tional. They’re self-contained and usu­ally focus on doing a sin­gle task. Com­bine a header style, a para­graph style, a close icon, a color, and a but­ton to form a modal. A search form, footer, and a fil­ter selec­tion are all exam­ples of sim­ple components.

Systematic Design

Com­po­nents can also be more com­plex, like a per­sis­tent shop­ping cart. These type of com­po­nents still focus on a pri­mary task, but they also allow you to do sec­ondary tasks. For exam­ple, in a per­sis­tent shop­ping cart, its main job is to dis­play cart items and total price, but it can also allow you to delete an item, or change its quantity.

Templates

Tem­plates are where com­po­nents come together to form the inter­face and expe­ri­ence. For exam­ple, a con­tact tem­plate on a web­site will be made up of a nav­i­ga­tion, form, and footer com­po­nents. Tem­plates can rep­re­sent a sin­gle sec­tion of a web­site, and an entire user path, like a reg­is­tra­tion flow.

I cre­ate two kinds of tem­plates: UX tem­plates and UI templates.

A UX tem­plate is a wire­frame where the con­tent struc­ture and user expe­ri­ence are defined. Here I start piec­ing together the com­po­nents, mov­ing them around like puz­zle pieces, slowly form­ing the expe­ri­ence and con­tent structure.

The UI tem­plate is where I shape the lay­out and refine the visual styles, using the UX tem­plate for struc­ture. As I men­tioned above in the Ele­ments sec­tion, I start with design­ing the indi­vid­ual ele­ments. I then design the com­po­nents and full tem­plates, and refine any ele­ments that need it. For exam­ple, a but­ton might look per­fect on its own, but it ends up being too big as part of a com­po­nent or template.

Folders and Libraries

This sys­tem is also great for cre­at­ing a folder struc­ture, and build­ing pat­tern libraries.

My top level folder is always the project, usu­ally based on the plat­form, for exam­ple iOS, Android, Web. Within the project folder lives the sys­tem I’ve out­lined above:

01 Ele­ments
02 Com­po­nents
03 Templates

I assign the num­bers to keep the fold­ers in a spe­cific order.

Folders

Within each main folder I break down the cat­e­gory. So for exam­ple, inside the Ele­ments folder you’ll find fold­ers for But­tons, Col­ors, Icons, Input, Typog­ra­phy, etc. In Com­po­nents you’ll find fold­ers for Nav­i­ga­tion, Search, Footer, etc. Inside each of these fold­ers you’ll find a design file for that ele­ment or component.

The Tem­plates folder is a lit­tle dif­fer­ent. Same idea, but within a tem­plate folder I will break it down into two fold­ers: UI and UX. This keeps things more orga­nized. Some­times com­po­nents will have wire­frames asso­ci­ated with them, so the Com­po­nents folder can be divided this way as well if needed.

Files are named using the fol­low­ing convention:

platform-type-version.extension

So, for exam­ple, the first ver­sion of a web­site home­page tem­plate done in Sketch would be named web-homepage-v1.sketch.

Not only is this your fil­ing sys­tem, but it also acts as your pat­tern library. The entire sys­tem is clearly orga­nized, with every file eas­ily accessible.

If you build these files in a smart way, like using Sym­bols and Layer and Text Styles in Sketch, or Smart Objects in Pho­to­shop, you save a ton of time when mak­ing a change because you just do it in one place. Sym­bols in Sketch are a bit lim­ited in this case, since they don’t sync across files, but it’s still a good way of set­ting up your files.

This sys­tem also makes it really easy for peo­ple new or unfa­mil­iar with the project to find and nav­i­gate the files. Great for when adding new mem­bers to the team, or shar­ing files with com­pa­nies or clients.

Benefits of Systems

For me, design­ing this way just makes sense. A sys­tem­atic method pro­vides con­sis­tency for the user inter­face, user expe­ri­ence and func­tion­al­ity. It also offers great flex­i­bil­ity and effi­ciency, because by design­ing at the ele­ments level, instead of focus­ing on a sin­gle screen, you’re cre­at­ing a design that’s mod­u­lar and scalable.

This method works for me, and it might work for you. I’ve opened up the com­ments sec­tion to get a dis­cus­sion going. I would love to hear from you if you’ve imple­mented the sys­tem in your work­flow, or have any ques­tions or comments.

Spe­cial thanks to Stephen Meszaros for his input and always bril­liant insights.

StudioSmall: Margaret Howell

StudioSmall Margaret Howell

StudioSmall Margaret Howell

StudioSmall Margaret Howell

StudioSmall Margaret Howell

Stu­dioS­mall is a London-based agency that pro­duced this lovely work for fash­ion brand, Mar­garet How­ell. The work includes strat­egy, brand­ing, dig­i­tal, print, and environmental.

Bentley Intelligent Details: The Bespoke Driving Jacket

Last year, Bent­ley pro­duced a short film shot entirely on an iPhone 5s. They’ve pro­duced another Intel­li­gent Details film for their bespoke dri­ving jacket, and this one was shot entirely on an iPhone 6 and 6 Plus.

Two things fas­ci­nate me about this film.

First, it’s amaz­ing the level of qual­ity the iPhone cam­era can pro­duce. This film is beau­ti­ful. Granted, pro­fes­sional film tech­niques were used by pro film­mak­ers, but it’s incred­i­ble what can be achieved with the iPhone. The only qual­ity the footage is still lack­ing is shal­low depth of field. You do get some bokeh on the iPhone 6, but not shal­low enough to where it gives the footage that dream-like film look. Maybe one day.

They also pro­duced a behind the scenes show­ing what went into cre­at­ing the film. I love how they used an anamor­phic lens to pro­duce a wide 2.4:1 aspect ratio.

The sec­ond thing that I love about this film is the peek into the bespoke tai­lor­ing world. I love fash­ion, and to see it done at this level is won­der­ful. The film fea­tures four bespoke houses from Sav­ile Row design­ing and tai­lor­ing a bespoke dri­ving jacket for Bent­ley. My favorite designs are from Henry Poole and Gieves & Hawkes.

The Debate: The Legendary Contest of Two Giants of Graphic Design

Mona­celli Press has pub­lished the first Eng­lish trans­la­tion of an his­toric 1972 debate between Dutch graphic design­ers Wim Crouwel and Jan van Toorn, at Amsterdam’s Museum Fodor.

Held in response to an exhi­bi­tion of Van Toorn’s work at Stedelijk Museum, includ­ing stu­dent posters protest­ing the Viet­nam War — in an era of youth cul­ture and increas­ing resis­tance to author­ity, cap­i­tal­ism, and the power of media — the stakes were aes­thetic, eth­i­cal, and polit­i­cally charged.

Crouwel defended his approach of neu­tral­ity and aus­tere ratio­nal­ism, atten­tion to typog­ra­phy and works­man­ship, and pro­fes­sion­al­ism in ser­vice of the client’s mes­sage. Van Toorn argued for his use of chaos, col­lage, and pho­tographs of every­day life; that a designer’s ideas, per­son­al­ity, and polit­i­cal com­mit­ments are inte­gral to the work.

Order vs. Dis­or­der. I vaguely remem­ber read­ing about this debate, but I’ve never seen a tran­scripts of it. Def­i­nitely inter­ested in check­ing this out.

The cloth­bound book also includes a fore­word by Rick Poynor, and a gallery of work from Crouwel and Van Toorn.

And start­ing today, Design Observer will be pub­lish­ing four excerpts from the book.

Bernard Series 1227

Bernard Series 1227

Bernard Series 1227

Bernard Series 1227

Bernard Series 1227

Bernard Series 1227

I wrote about Bernard’s beau­ti­ful cycling kit a few years ago, and now they’ve released a new design with the Series 1227.

The series includes short sleeve jer­sey, bib shorts, wind vest and arm warm­ers, and are all made in Italy.

Founder and designer, Bran­don Sin­cock, explains the design:

The new kit is an evo­lu­tion of the orig­i­nal design – work­ing with sim­i­lar ele­ments, and a shared design sen­si­bil­ity, but fur­ther explor­ing lay­er­ing & the over­lap­ping of ele­ments as they wrap around the body, and tran­si­tion from front to back. As well, color and typog­ra­phy are always key ele­ments in our designs, and the way the designs play within the con­text of a rider’s unique posi­tion on the bike.

I’m a cyclist, and it’s hard to find cloth­ing that is really well designed, and func­tional. Looks like Bernard is on the right track.

The great pho­tog­ra­phy is by Jor­dan Clark Hag­gard.

Site Tweaks

Hey folks, I made some changes to the site, the biggest being the type­face. The site is now set in Lexia, a clean slab serif by Ron Car­pen­ter for Dal­ton Maag. I’m a sucker for a nice slab serif, and Lexia is easy to read.

I also applied some color, using a dark blue as the pri­mary, and I did some minor visual clean-up.

Enjoy.

Italia '76 Stamp

Italia '76 Stamp

A quick week­end post.

Blair Thom­son shared this won­der­ful stamp designed by Luciano M. Bos­chini. It’s part of the Font Sun­day at Design Museum, hosted by House of Illus­tra­tion.