Showing posts with label Interface Details. Show all posts
Showing posts with label Interface Details. Show all posts

November 1, 2013

Design Feast, redesigned for the second time


Homepage zoomed in

Design Feast underwent a redesign—the last one was in 2011. With the relaunch, you’ll see significant visual differences. The previous incarnation was dense, with prominent site-wide navigation as an organized row of lists and a homepage packed with information. The new version was designed to be more image-driven and spacious.

Both versions are proudly reliant on the same typographic grid. The latest redesign could be described as a pruned version of its predecessor, but the previous version felt and looked right at the time. Since the first redesign, a compressed navigation arrived into favor, which inspired other simplifying moves affecting the appearance of other areas of the site. This is particularly true for the Shop, imbued with a more direct and open presentation. This intent to subtract was based on my gradually sharpened focus that happened to gravitate toward furthering the current features of Design Feast Series.

A desire to bring attention to different parts comprising Design Feast Series influenced the redesign—the current line-up consists of Designer’s Quest(ionnaire)Blogger’s Quest(ionnaire)Interviews, and Creative Roles. Determining and crafting new entries for each respective series is a joy.


Wireframe digitized

In one of our Basecamp exchanges, I told my web builder, Megan Coleman: Only time can inform the nature of the redesign. Letting a design settle—considering it casually at times, at other times, formally—allows us to see things not always evident during the process. Only over time can a design reveal considerations, or with a redesign, reconsiderations. It provides particular moments to look at the design without analyzing it, to make decisions about ideas that feel appropriate in their arrival.


Wireframe sketched

Designing is a restless process. Redesigning is the same. Both relish time in order to reveal one design at a time.

Explore Design Feast—my long-term project dedicated to creative culture—thankfully redesigned for the second time.

• • •

Lovingly written in Draft.

• • •

Read about Design Feast’s first redesign.

September 12, 2013

Delightful Details of the CreativeMornings.com Redesign


Courtesy of the CreativeMornings Blog

I’m motivated every time I visit the redesigned site for CreativeMornings, “a breakfast lecture series for creative people.” There are a few details that I find particularly compelling:

Colorful details

When information is being loaded, a progress bar appears. This small animated strip of colors represents each of the 57 cities—and growing—where there is a CreativeMornings chapter. It’s a festive motif that persists throughout the website. Would make for a cool Tattly.

Color is also used proactively and elegantly in place of a profile portrait. If a subscriber doesn’t post a picture, a graphic is displayed instead—everything from a morning cup of coffee to a croissant to a donut. All illustrations are simply drawn. The result is an array of playful forms matched with a playful color palette. In interface design, the empty state does not have to be void of consideration.

Typographic detail

For those with a typographic fetish for ligatures, the “Official Partners” page showcases an “ffi”. It’s a flirtatious wink, typographically speaking.

The delight of this redesign is truly in the details.

• • •

Big thanks to Tina Roth Eisenberg, a.k.a. Swissmiss, for inventing CreativeMornings, my kind of design conference.

• • •

Related: Read my coverage and view photos of the Chicago chapter of CreativeMornings. 2011 was Chicago CreativeMornings’ debut year. Download the entire collection of selected insights.

September 7, 2013

Writing Apps: Draft and Editorially

When designed well, writing apps inspire writing. I’ve been using two noteworthy writing apps since their debut during the spring of 2013: Draft by Nathan Kontny and Editorially by Mandy Brown. Both approach their own interface design in different ways that fascinate me.

Draft



There is a sense of immediacy when writing in Draft. When you open a new document, you’re provided an empty sheet, much like its physical counterpart on a table.



Controls and informational indicators appear in respective corners, creating a frame of perspective that accentuates the space at the center of attention—that writable space. The absence of visual borders of Draft’s interface connects with this passage by author Joyce Dyer:
“If we’ve felt sometimes that the page is too tight for us, it may be because our minds have outgrown it. The brain that propels the mind, after all, is deeper than the sea and wider than the sky, isn’t it? The page may be forcing compromises that the brain, in such close relationship with the mind, must rightly refuse.”
In Draft, a spare and soft surface—at first, a quiet field—invites the user to write. It is literally a blank slate, without visible instruction to guide the user, including the absence of a toolbar, which, in retrospect, I wasn’t missing. In a writing app, the empty state is the call-to-action. For some, this kind of empty state can be overwhelming—it may be met with blankness by the writer.(1) Others may find this approach inviting, more than visually, to composition.

Editorially



When you open Editorially to create a document, you’re prompted to name first what you intend to write. This echoes a tip given by Jim Coudal, of Coudal Partners, at a SXSW (2011) panel about writing:
“I tend a give a piece a headline before I even know what I’m going to write, and generally speaking, I take a headline from a book or a movie, and it may or may not have anything to do with what I’m writing. But for me, to look at the page with an actual headline that feels like a real thing. If I’m writing a newsletter for Field Notes, I might call it The Sound and The Fury, which has nothing to do with the letter, and the headline will never exist after the draft of the letter, but to look at a page that says, The Sound and The Fury seems like a real thing, and, in a way, I’ve sort of cheated myself that I’ve  actually already started.”
Starting by first naming your piece demands a pause. It could be a general description or an iteration of a potential headline. In total, it’s the essence to write toward, elaborate and make whole.

After giving your document a title—a visual anchor—you’re met by a white sheet, framed by an off-white background. Feels like a collapsed version of paper, set in a typewriter, situated within a space.



This is a midcentury set-up. It envisions an iconic scene focused on an intrepid writer exercising ink on paper. The boundaries of the sheet, in Editorially, hearken back to this era, and it’s a romantic image, evolved: a writer facing the screen in a glowing game of stares and dares(2). In Editorially, the empty state persists for the writer to empty into.

Goal of having written
“I hate writing, I love having written.”
—Dorothy Parker, Author
One of the most striking—and intimidating—characteristics of these Web-based writing apps is that they are inherently depthless, a characteristic that is more sharply sensed digitally. By way of their distinct interface design, both Draft and Editorially exhibit different approaches to influence the desire to write—to steer the act of filling the recurring void with words, which help realize depth.

No app can rule the activity of writing. The same way one can change their physical posture and surroundings (fancily called “context shifting”), one can change the use of writing apps. At times, I use Draft. Other times, Editorially. Because the intent that these apps share and advance is enabling the writer to defy the blinking cursor(3) as an immovable object.


(1) Franz Kafka, Author, believed, “A non-writing writer is a monster courting insanity.” (2) Eudora Welty, Author, from the book On Writing: “All serious daring starts from within.” (3) Speaking of cursors, the blinking speed of which in Draft is slow, while in Editorially, it’s quicker in pace.

• • •

Sources of screen snaps: DraftEditorially; Photos by me.

• • •

Big thanks to Nathan Kontny for making Draft, and to Mandy Brown and her team for making Editorially.

June 28, 2013

Interface Details: Alan Fletcher’s Terms and Sixteen Eighty Design’s Process

These are websites, at the time of their discovery, with aspects of their interface design worth noting:

Ownership

Upon visiting the website of graphic designer Alan Fletcher, before you can navigate it, a central notice of “Terms and conditions” displays:
“© Raffaella Fletcher and Fletcher Studios 2013. All rights reserved. We are the owner of all intellectual property rights, except where otherwise credited, in relation to this website, including but not limited to copyright. The contents of this website cannot be used without the prior written consent of the Fletcher family.”
Only after selecting “I agree” can I view Fletcher’s archive and shop. This upfront communication professionally broadcasts an important reminder: personally made work is personally owned and must be respected.

Process

Business commonly share and communicate their processes, especially design-related ones. It’s a part of self-promotion and intended to convey transparency. I noticed that Sixteen Eighty Design displays their process differently. Besides being short and plainly written, they call it “A PROVEN PROCESS”. Inserting that adjective makes a difference in its perception, sharpened by the all-capital letters.

• • •

Read previous Interface Details: Berger & Föhr’s Ambiance, Simple Focus’ Retro, Big Bite Creative’s Whimsy

April 9, 2013

Interface Details: Berger & Föhr’s Ambiance, Simple Focus’ Retro, Big Bite Creative’s Whimsy

These are websites, at the time of their discovery, with parts of their interface design that connect with enduring qualities:

Ambiance

Berger & Föhr, a graphic design studio run by Todd Berger and Lucian Föhr in Boulder, Colorado, display their projects in a strong, photographic way. For example, their identity design for Justin Horacek, maker of handcrafted heirloom-quality furniture, is put into the client’s inspirational context: composed primarily of wood, with a textured and sanded form, and photographed by Jamie Kripke and Sam Campbell. Ambiance improves the reception of Horacek’s business communication.

Retro Style

Design firm Simple Focus, in Germantown, Tennessee, simply incorporates radio buttons of Apple’s Mac OS Aqua version (2000) as part of their website’s navigation. You don’t need to be a user-interface nerd to appreciate this touch, but if you are, it’s a pleasant recognition.

Whimsy

One of the special features, to me, of letterpress printing studio Paperwheel Press in Portola Valley, California, is their rocket—located in their website’s footer. Click it and lift-off shoots you back to the top of the web page. Thanks to Big Bite Creative in Middlesbrough, England, for bringing in an element of the fantastic—because rocket ships are—to an interface.

• • •

Read previous Interface Details: Feature Creep’s Kick-Ass Statement, Atto Partners’s Lists, Happy Cog’s Gratitude

August 8, 2012

Interface Details: Feature Creep’s Kick-Ass Statement, Atto Partners’s Lists, Happy Cog’s Gratitude

These discoveries happen to take place in each respective website’s footer: an area never to be underutilized or underestimated.



The descriptor “kick-ass” is synonymous with awesome and cool.(1) The Twitter hashtag #KickAss communicates these attributes. Kick-ass work rewards the maker, client, and customer. Presumably everyone, in any discipline, hopes to achieve kick-ass results. Toronto-based technology consulting shop Feature Creep proclaims it. It’s a scream masquerading as a whisper.



Web design and development studio Atto Partners, in Ireland, have a pristine arrangement of pertinent lists—with labels that read like a sentence.



Since hearing author and former wine video blogger Gary Vaynerchuk’s term “The Thank You Economy”, I’ve been more reminded that being powered by gratitude is an incredibly creative driver that acknowledges the cumulative impact of small positive acts. And, yes, it is also an economic driver. Based in New York City, Philadelphia, and Austin, Happy Cog, is a team that “painstakingly craft digital experiences that balance beauty and utility.” They likewise express their gratitude, typographically speaking and more so.


(1) It’s also synonymous with literally kicking someone’s ass, but the aspirational version, when it comes to doing good work, is preferred, to be painfully obvious.

March 21, 2012

Interface Details: Ohama’s Grid, plus the People behind The Nerdery and Opower

Yoko Sakao Ohama, a designer and Studiomate, has a delightful feature on her website. It reveals the baseline grid upon which information rests. A pleasant pattern displays. More importantly, the layout’s underlying structure is revealed. I’m reminded of the “Show Grid” option found on The Grid System website. Ohama’s baseline grid doesn’t align perfectly in the Firefox browser, but works in Safari. This isn’t a surprise—Apple believes in the power of the typographic grid.



A business is nothing without people, so it’s inspiring to see a company that visibly surfaces its staff. It’s obvious, but many groups choose to keep their employees opaque. The Nerdery, who describe themselves as “An Interactive Production Company”, show their people. Looks like a fun workplace. Working with nerds shouldn’t be anything but fun.



What’s more, The Nerdery displays figures about their staff—the Nerds—whose programming skills are highlighted.(1)



People is a clear theme for The Nerdery’s website, as further demonstrated in the videos of its Careers section, which take the job descriptions out of flatland. A company’s online job openings are typically presented as paragraphs and bulleted lists. By offering an insider peek into their work and setting, The Nerdery delivers an atypical way to pique a person’s interests.



Opower, who deals with people’s use of energy, also showcases company personnel. Similar to The Nerdery’s approach, rolling over a portrait reveals a splash of colorful personality.





As an added emphasis, Opower encourages visitors to meet their team. Just showing faces gives the immediate impression of humanity.


(1) But The Nerdery’s adjacent graphic “Adults Who Could be Killed by the Total Caffeine Consumed at The Nerdery in a Week” went over my head.

November 9, 2011

Interface Details: DUMBO’s Love, Cortney Bishop’s Desk, Periodicity’s Mobile App Screens

Discovered via swissmiss, smartassdesign and Artforge “lovingly crafted” The DUMBO Improvement District(1) website. Some writers are adverse to adverbs, judging them as extraneous. But the use of an adverb is fine here, totally. They bring to life how much effort is put into a project, and express the effort’s quality. Adverbs serve this purpose wherever it’s appropriate—even in a footer, which, as this example demonstrates, is an area not to be taken for granted(2).



Typical presentations of “About”-related details are in the form of words. Interior designer Cortney Bishop’s site mostly shows, rather than just tell, what she is about. She displays tools, sketches, colors and objects that compose her work world. It’s reminiscent of Ray Eame’s desk.



In showing the array of screens for their iPhone app, Periodicity, Germany-based Gryphos GmbH presented each user interface alongside the hardware. It’s a literal approach that gives the software direct context in a refreshingly straightforward way.




(1) Means: Down Under The Manhattan Bridge Overpass.
(2) Inspired to do the same for Design Feast’s footer.

September 29, 2011

Interface Details: Roy Denim’s Philosophy, Mason Jar Music’s Icons, Apple’s Info-Graphics

A piece in the New Gentleman’s Journal, Grain & Gram, led me to discover Roy Slaper, a skateboarder turned jean maker. His studio (described mostly through beautiful photographs, no text) showcases the tools of his craft for making denim, and denim alone. This singularity of purpose is evident in his philosophy, which can be construed in one of two ways: ‘there can only be one approach (namely, high-quality brand of jeans made to fit well)’, or ‘there is one approach and it’s for me to know and you to find out (that is, to be determined)’. Either way, Slaper knows that his product is one of a kind. While other online examples about philosophy or related topics consist of paragraphs, Slaper’s Philosophy is summed up in a single sentence:



Discovered via National Public Radio’s article “Turning Abandoned Buildings Into Recording Studios” were icons, identifying the varied services of audio/visual production company and creative collective Mason Jar Music. Each icon visualizes their respective service in an effective way and possesses a welcomed vintage finish:



Apple is known for their pristine presentation of information online. Their section about their “environmental impact” shares the attention to layout with a handsome array of info-graphics, such as one showing “Reduction in Packaging”:

September 22, 2011

Design Feast Redesigned

I’m super-excited about Design Feast redesigned and relaunched. It’s taken time, over a few months, all on the side to get this real. Satisfying to see it live, with a new typographic layout and presentation:



Since 1999, the interface design of Design Feast has changed but has mostly been confined to this layout and presentation which was the working foundation for its redesign:



And it remained a read-only site until now: comments can be submitted to each of the Designer’s Quest(ionnaire) which there’ll be more to hopefully arrive.

Big thanks to my Designer-Developer-Diva Megan Coleman for transforming the wireframes (sample below) into a live site, using Expression Engine. This satisfied another need reinforced over the years: a content management system. Looking forward to using it more to refresh the site with new information about creative voices and projects as much as possible.



Big thanks too for all the visitors and subscribers of Design Feast, and thanks in advance to the new people discovering Design Feast. Here’s to providing you with a regular serving of creative culture.

Read related posts:
  • Interview about Design Feast with Adam Kallish of Trope Collaborative
  • Interview about Design Feast with Joanne Molina of The Curated Object
  • Design Feast at design:related’s “sites we like”

June 8, 2011

Interface Details: Noah Scalin, Rita Rita, The Economist and more

The layout of black rectangles found on artist Noah Scalin’s website is reminiscent of paintings by Sol Lewitt, particularly his Wall Drawing 792. Mousing over each shape reveals underlying information. While initially arresting, it also invites curiosity—which is the underlying intent.



Discovered via Audree Lapierre: Two sides—one part Studio, one part Boutique—form the creative business Rita Rita. They are shown in an intuitive way, similar to two overlapping sheets of paper.



Discovered via Swissmiss: Photographer Russ Morris’ “Forever” take on the footer aims for longevity, enough said.



As a companion to its “Most commented” list, The Economist magazine visualized commented topics as interactive mind maps. The size of each key word correlates to popularity. It’s a variation of a tag cloud. Mouse over any key word to display the published comments for that selected topic. It steers attention to articles through reader feedback, siphoned through a bubble diagram.



Though the boundaries are unknown, dragging (the motion, not the emotion, though it could feel like both) your way through the limited-edition bags of Otaat does take work. Answering the question “What do these bags look like?” drives users to go along with the “click and drag” as opposed to the mainstream point-and-click convention. Such gall, especially applied to eCommerce, is appreciated.

February 28, 2011

Interface Details: Sussner Design Company to Indie Labs

Discovered via blog Grain Edit: Minnesota-based Sussner Design Company’s welcomed innovation on the ubiquitous “About Us” label. Scoring bonus points for losing the preposition, “THIS IS US” is bold and brief.



Artist John Baldessari’s “Biography” navigation behaves like a mind map. It’s heady yet appropriate, considering that his pioneering work is in conceptual art.



Another discovery from the Grain Edit blog is Scotty Reifsnyder—a maker who demonstrates “mid-century design and illustration sensibilities.” He lives and works in Lancaster, Pennsylvania. His online shop makes this place known, and acknowledges those who make it special. It’s always refreshing to see individuals state their sense of place, simply, visibly, proudly.



It’s no surprise to see 37signals’s UI designer, programmer and product manager Ryan Singer keep his site writing narrowed to a sparse but substantive minimum. He shares about those who have made an intellectual impact on his thinking and doing. The inclusion of the “Key idea” was particularly helpful to me. It summarizes the one enduring principle that keeps influencing Singer’s approach. He manages to articulate this in one sentence, without sounding over-clever.



Speaking of clever, Indie Labs’ combination of “No” and “Openings” may appear to violate the cutesy clause, but it’s witty. Plus it matches the cunning attitude of the rest of the writing, from the makers of simple eCommerce platform Big Cartel.

November 3, 2010

Interface Details: Quipsologies, Square, Bertelli Bici, Fine Design Group

Self-expression—attitude, career, and “brand”—is a challenge through online typography, layout and writing. The following individuals and groups revealed their online selves in ways I found interesting with details which were unexpected, and sometimes blatant, in a no-frills straightforward way.

Quipsologies is the “daily stream” of found creative bits (“Quips”) within the “graphic design enterprise” known as UnderConsideration. The site was redesigned in the fall of 2010. In addition to the new typographic grid, colors—particularly the “Background Color Codes”—and the clear step-by-step form to submit Quips, a detail that grabbed my attention was the use of “chronicling”, versus curating, evident in the site’s one-line description:



Instead of using the typical Twitter button, the digital payment service and device known as Square states their Twitter handle, plain and simple, in their website navigation:



New York-based Francesco Bertelli, a designer and producer of custom bicycles, as well as a graphic designer and photographer, takes a different approach to his “About” section. He poses two contrasting lists which both speak as a concise, unified and unapologetic statement about his taste, which you’re either aligned to or not, when it comes to appreciating his bike style:



Instead of using the usual cue to “Sign up” for their newsletter, San Francisco-based design and communication firm Fine Design Group encourages people to “Befriend”:



I’m on the fence when creative license is taken to rename one’s profession. But on the promotional website for his book “A Practical Guide to Designing with Data”, Brian Suda calls himself an “informatician”: