All posts tagged “Aesthetic”

AIAIAI+ Ghostly International Limited Edition Headphones: Two aesthetic and audio focused companies team up to create a sleek, specially engineered headphone

AIAIAI+ Ghostly International Limited Edition Headphones

Ann Arbor, Michigan’s Ghostly International is a creative force unlike any other within the industry of, and culture surrounding music. With Matthew Dear as co-founder, it’s no surprise their artist roster is impressive to say the least. Not to mention……

Continue Reading…


Cool Hunting

Velo Collection from House Industries : A bike-centric collaboration and new typeface pose a polished yet casual aesthetic

Velo Collection from House Industries


If the collaboration between typography studio House Industries and cyclocross OG Richard Sachs was a preview of cycle-centric things to come from the Delaware-based designers, then the full…

Continue Reading…


Cool Hunting

Designing a brand identity that will maintain its aesthetic on all marketing materials

company_branding_by_tashaat

Sadly enough, there are many logo designers out there who think that a company’s logo and their brand are one-in-the-same. In reality though, a logo is just a small piece of the brand puzzle. Perhaps, this post will clear things up a bit.

So what is a logo exactly?

Simply put, a logo is merely a picture that symbolizes something—be it a person, place or thing. In most cases though, a logo design is associated with a business or corporation. These could be any sort of marking, typography, graphic, symbol, or even a flag. A good example is the iconic “Golden Arches,” everyone sees when they get a McDonald’s product. You don’t even need to see the name to know that the red and gold arches are representative of McDonalds because of its notoriety. Typically though, a logo will generally feature some type of typography that defines the name of the business.

There are some instances, however, in which a logo does not incorporate any type of picture or graphic. Instead, these logos will generally just feature an artistic rendition of the organization’s name. Think of FedEx with it’s classic block lettering in purple and orange. These technically would not be considered logos but rather wordmark or logotypes. It simply refers to the lettering or typography used to define an organization.

4407447459_2694f3aa6f_b

A logo, whether graphic-based or typography-based, is not meant to literally explain what an organization does, but rather merely serve for identification purposes only. Imagine, for example, if everyone referred to John as “a short guy who could lose some weight,” rather than his name. Would you want to be referred to in such a manner? I think not! That is why a logo is not meant to describe an organization, just identify.
Brand identity and logo are not the same!

Brand identity typically comes after a logo has been established. Once an organization has a logo they can literally put it on anything they want from letterheads and address labels to various promotional products and such. Quality Logo Products suggests, “Keeping your logo design simple or having a simpler version will help make sure there is no loss in effectiveness of your brand identity.” For the most part, a brand identity is conceptualized on tangible objects that are seen. Most organizations will stick with the basics though, which include the logo of course, but also the stationary and memos, uniforms, product packaging, marketing materials, and so on and so forth.

Large corporations will generally design their brand identity using an approved set of guidelines. These guidelines will generally dictate a number of aesthetic aspects including color patterns, font aspects, backgrounds, specific measurements and well, you get the idea; basically just a set of rules that determine how the brand identity will appear to others.

Furthermore, the brand identity is basically the larger depiction of a company; in other words, how the public views the company as a whole. A good example of a company who clearly has their brand identity down to an art is Twitter. You do not necessarily need to see a logo to identify something related to Twitter. Instead, you might see that little bird used on the logo and through their organization, or that iconic baby blue text. In a nutshell, the brand identity extends much further than just the logo itself.

The challenge many organizations face is creating a brand identity that is flexible enough to adapt to different environments. Naturally the logo will forever remain embossed into an organizations make-up, but the brand identity needs to, in essence, be interchangeable. Many factors can facilitate the need to alter an organization’s brand identity. For instance, as a business grows, it’s agenda and priorities might differ. This can be seen with old businesses designed around traditional business practices trying to evolve and adopt contemporary, sustainable practices.

What about a brand?

A brand defines a much larger entity. However, defining what a brand actually is can be quite daunting. Hundreds and hundreds of publications have been created that attempt to define the subject, but if you were to read several of them, you might find that there are mixed opinions.

For the most part, I like to think of the logo and the brand identity as parts of a machine, with the brand being the machine. However, the machine certainly needs more than two parts to run. An organization’s brand can also include the history of the organization, the mission statement, and basically anything iconic that might be associated with the organization. It can even include client testimonials and overall customer experience as well.

For some people though, a brand is not just how an organization defines itself, but also how the general public defines it also. If we look at Walmart, most people would categorize it as “having everything under the sun,” whereas others might see it as a monopolistic corporation with nothing but profit on their mind. So in essence, a brand cannot be solely controlled by the organization it embodies as it is largely opinion-based. It doesn’t matter what an organization does, the public will create their own perceptions either on their own or based upon the actions of the organization.

798865_840651f7

The easiest way to define a brand comes in the form of two words—corporate image. This is how the company appears to everyone ranging from the average Joe, to public investors, to employees. It is the general notion that everything associated with an organization should reflect the ideology of the organization, including its values and goals. A lot of the times this can be summed up in a mission statement.

So as you can tell, there are a lot of similarities, but also a lot of differences between an organizations logo, brand identity, and brand. It all generally starts with a logo, which helps identify the company visually in a variety of applications ranging from products and packaging to business cards and websites. From there, a brand identity can be planned, prepared, and executed internally from within the company, and externally on various mediums. Finally, you have the brand itself which embodies not only the logo and brand identity, but also the overall perception of an organization. Each component is different, but all are vital to the proper maintenance of a successful organization.

The post Designing a brand identity that will maintain its aesthetic on all marketing materials appeared first on Design daily news.

Download the Designers essentials package now!


Design daily news

Scandinavian Design at Austere, Downtown Los Angeles: The new concept retail space brings Sweden’s classic aesthetic to SoCal

Scandinavian Design at Austere, Downtown Los Angeles


It was an old auto showroom sitting empty at 9th Avenue and Hill Street in downtown Los Angeles, but as soon as brand consultant Fredrik Calstrom—who originally hails from Sweden and now lives in New York—laid his eyes on it, he quickly knew…

Continue Reading…


Cool Hunting

Ilan Dei Venice: The Cruiser Collection : The furniture designer’s Porsche 356-inspired retro aesthetic sets the mood for this summer’s garden parties

Ilan Dei Venice: The Cruiser Collection


Based in Venice, California, Ilan Dei perfectly captures the region’s quintessential laid-back, communal atmosphere with his outdoor furniture. The studio’s latest line, just in time for summer, offers four new pieces inspired by Hot Rod culture…

Continue Reading…


Cool Hunting

Cool Hunting Video: Carlo Giordanetti of Swatch: We talk to the Creative Director about working with artists and balancing an extroverted aesthetic with classic Swiss precision

Cool Hunting Video: Carlo Giordanetti of Swatch


On a quiet afternoon at the Whitney Museum of American Art, we had the opportunity to meet with Swatch Creative Director, Carlo Giordanetti. While exploring the Robert Indiana exhibition, Giordanetti shared his process of collaborating with contemporary artists, and finding inspiration in…

Continue Reading…


Cool Hunting

Pattern Recognition at MoCADA: A class of young, multidisciplinary artists break the norm with a show of ideological and aesthetic patterns in contemporary abstraction

Pattern Recognition at MoCADA


Coming from a background in marketing, Dexter Wimberly isn’t afraid of a hard sell. Since moving to the art world as an independent curator, Wimberly has worked to discover and promote talent that is…

Continue Reading…


Cool Hunting

The Flat Design Aesthetic: A Discussion

A growing trend in web and UI design lately has been the use of “flat design” and it’s clearly a hot topic at the moment – full of lively discussion and plenty to learn about. I’ve always been drawn to minimalism, so flat design is an aesthetic that has inspired me, especially while working on the recent redesign of QuoteRobot, the proposal writing app I co-founded back in 2010.

In this article I’m going to talk about what flat design is, review what other designers are saying about it, and offer some tips on how to achieve it in your own designs.

What Is Flat Design?

In practical terms, flat design means designing without the usual gradients, pixel perfect shadows, and skeuomorphism that’s been rampant in recent years (more on this later) to achieve what appears to be a “flat” interface.

Allen Grinshtein of Layervault may have coined the term “flat design” originally. In an article that trended on HackerNews, he said…

Well-loved products on the web share a similar design aesthetic, with roughly the same kinds of bevels, inset shadows, and drop shadows. For designers, achieving this level of “lickable” interface is a point of pride. For us, and for a minority of UI designers out there, it feels wrong.
~ Allan Grinshtein (Layervault)

If you take a look at Layervault, it’s beautifully designed in it’s simplicity, even without the use of extra design details that we as designers often work so hard to achieve. It’s interesting to learn and look at the gradients and styles we apply as a current trend in UI design, one that is potentially changing.

Examples Of Flat Design

With the new version of Squarespace, they’ve opted for an almost completely flat interface. You can really tell the time they spent wireframing and working out the UI, it’s quite complex but still easy to navigate.

Although I haven’t used LayerVault myself, from what I’ve seen, the new flat UI looks really simple and easy to use.

Facebook has almost always embraced a flat design aesthetic – only lately introducing some slight bevels.

Facebook is the perfect example of interface trending towards flatness. Their major actions buttons still have a slight bevel, but lots and lots of the secondary actions are completely flat. And judging by the fact that they haven’t changed their interface style, it must be working.
~ Ian Storm Taylor (Segment.io)

Even though they’ve been criticised over the years for making many changes to the interface, it’s one of the most used web sites on the internet, and hey, millions of people can’t be wrong.

The latest Rdio interface is so flat and minimalist, it’s almost completely without shadows, gradients, or even colors.

I had the pleasure of making a very small contribution to Nest’s front-end code prior to their launching, and I was completely enamored with the flat aesthetic they rolled out.
The designers who embrace flat design are really passionate about it.

“…as interactive designers—we should embrace the medium with which we work, and steadily reject the skeumorphic, dropshadow-y hellhole we’ve found ourselves in.”
~ Daniel Howell (Howells)

A Backlash Against Skeumorphism

Like the minimalist movement in architecture in the 20th century was a backlash against the over ornamentation of architecture in previous centuries, the flat design aesthetic may be a backlash against the over designed, or overly ornamented web sites and interfaces that have been produced for years now. A common example is the overuse of skeuomorphism that people have been criticising Apple over lately.

Apple received a lot of criticism from designers for the unnecessary use of leather texture on their calendar app.

Wikipedia defines skeuomorphism as:

A design element of a product that imitates design elements that were functionally necessary in the original product design, but which have become ornamental in the new design.

For example, we often apply gradients and drop shadows to elements that are meant to be buttons, because buttons in the real world have these features, even though they are unnecessary in the setting of a computer user interface.

So a weather app with a picture of a glass thermometer is skeuomorphic: the glass was necessary in the original (the real-world thermometer) but becomes purely ornamental in the new design.
~ Sacha Greif

Was it really necessary to put a leather texture on the calendar app? In the same vein, is it really necessary to make our buttons with gradients and 3d edges, or do users know to click them anyway? How much ornamentation is necessary? Is any?

In real life, when a button is pushed, you can feel its give and its bounce, but on a phone or on the screen, there is a lack of that physical feedback. A physicality that your mind knows exists but in skeuomorphic reality it doesn’t. So for me at least, it becomes one of those moments where reality doesn’t meet expectations and that disappoints me.”
~ Allan Yu (svpply / eBay)

So, flat design could be a backlash against the overuse of ornamentation in interface design, in a similar way that minimalism was a backlash against the gaudy imperialist architecture of the past.

Form Follows Function, Embracing Flatness

That same 20th century minimalist movement in architecture yielded some great design quotes like “form follows function” and “less is more” that we still talk about today. Similarly, I love this quote from sculptor Michaelangelo when asked about how he created the iconic David statue.

It is easy. You just chip away the stone that doesn’t look like David.
~ Michaelangelo)

In user interface design, it’s often stripping away things that really brings an interface to life. The team at 37signals is notorious (and very successful) as a result of applying this principle to their products, like Basecamp. In the world of flat design, less really is more.

In order to achieve the flat design aesthetic, we designers must focus on what things do, rather than what they will look like. This is key, and the reason why wireframing is so important to the design process.

Aesthetics Are A Matter Of Opinion

In my research for this article, I hardly found any scientific research backing up whether buttons on screen that look like buttons are actually more clickable. There’s plenty of evidence backing up contrast, color theory, and heirarchy, but I’d be willing to bet that a flat orange button is just as effective as a beveled orange button when set in an appropriate context. Here are a few opinions of other designers.

It’s no different than runway fashion– everybody starts doing the same thing; when it’s everywhere, to stand out as a designer, you have to do the exact opposite.
~ Cemre Güngör (Branch)

Saying that “skeuomorphism is bad design” would be like saying that “purple is an ugly color” or “ellipses have no place in web apps”. It simply doesn’t mean anything.”
~ Sacha Greif

Why promote a certain design aesthetic over something else without proof that what you are promoting is actually better? Is making something aesthetically more pleasing worth a potential drop in usability?
~ Geoff Stearns (formerly YouTube)

Good Design Is Good Design, Regardless of Aesthetic

So, if bevels, gradients and shadows are a matter of opinion, then what makes a good design? Whether you’re going to use a flat aesthetic or not, user interface is about the planning. I believe flat design simply makes it easier to recognize a great design, since there’s less clutter between the design and how it works.

Here are some tips for great user interface design:

Consistency
By using common UI elements and styles, you help users know what to expect, therefore making it easier to use your application.

Contrast
Clickable elements should contrast elements that aren’t clickable. This can be done with color, size, positioning, and yes, style too.

Layout
Using a grid based layout like 960gs is a great way to establish some visual guidelines to your design. The eye will naturally follow lines and ratios established by content, so understanding and using a grid is a great way to reinforce visual balance.

Hierarchy
I like to think about this as “user actions”. I could write an entire article about this, but making the most common user actions (sometimes referred to as use-cases) easily found while burying less common actions is a great way to simplify an interface and make it easier to use. As a general rule, what’s most important should be more visible than what’s less important.

My experience is that flat or “realistic” doesn’t matter. What matters is that hierarchy is evident at a quick scan and that users can find their way to the next actionable item easily.”
~ Caroline Keem (writer)

Target Audience
Some target audiences will gravitate toward different aesthetic styles. Architects, designers, and fashion conscience audiences might embrace flat design, while children, clowns, and some others might enjoy playful textures and colors.

Feedback
When clicks occur, immediate and clear feedback is necessary. Animation is a common way to provide visual feedback, for example, spinning loader images after clicking something. Also related to feedback is the need for engaging and informative help and status messages at appropriate times.

Remove Friction
In general, removing number of steps to let a user reach their goal creates a more fluid experience. Any interruptions or extra steps will decrease conversion rates.

Encourage Exploration
Once a user gets past the most basic uses of your interface, it’s good to reward their exploration with expected results when they venture further.

Wireframing
If you want to pull off an effective flat design, I can’t stress enough the importance to wireframing and planning. Figure out the common use cases, write them down, and rework your wireframes until everything makes sense. I like to do this on paper, but there are a number of great wireframing tools available as well.

Flat design certainly has it’s place in the world but it’s important to keep in mind that ultimately it’s just another aesthetic. Distressed, Glossy, Flat, Matte, Woodsy, etc, these are all just styles that lay on top of what is good information architecture and interaction design.
~ Mike Cuesta (carecloud)

Please Share, Comment, and Tweet

If you’ve enjoyed this article, been inspired by it, or disagree, I’d love for you to comment, share or tweet it. Let’s keep the discussion going. Also, if you have to write proposals, I’d love for you to check out QuoteRobot, where I’m the lead designer and cofounder.

More on Flat Design:


Speckyboy Design Magazine

Punk: An Aesthetic

A visual narrative of the art and design that spawned a cultural movement and DIY generation

Punk: An Aesthetic

Born in dungy London basements and matured in equally grimy streets, the punk counter culture of the mid 1970’s and 80’s defined an unrelenting angst felt by youth the world around. While many books have surfaced over the years to document its documenters, Punk: An Aesthetic wraps over 350…

Continue Reading…



Cool Hunting

18 Unique and Aesthetic iPhone 5 Concepts [PICS]