Off
View Post
Perth Running Group website

Perth Running Group website

We designed the logo and built the website for the Perth Urban Runners, which is a social Perth running group that is open to all levels and completely free. We meet centrally a couple times a week with a common goal of running more and exploring Perth.

Off
View Post
Perth Scrap Metal company website

Perth Scrap Metal company website

We recently designed and built the website for Kings Scrap Metal, a Perth Scrap Metal company, involved in the recycling of ferrous, non-ferrous and precious metals. Catering for businesses, trades, and the general public.

 

Off
View Post
Food-Based Web Design Tips to Make Visitors Hungry

Food-Based Web Design Tips to Make Visitors Hungry

It’s the same routine every date night: “where are we heading for dinner?” To the web we go, looking for restaurants around us that whet our appetites. And the places we always seem to hit after this dinner search are the locations with websites that just make us hungry.

Certain techniques, from color to photos to imagery, are common among the best food-based websites. These sites employ a specific strategy designed to make you hungry. Today we’ll look at how photography, colors, shapes, vivid copy and simple design are used to make mouths of website visitors water.

Tips for:

  1. Photography
  2. Color
  3. Shapes
  4. Vivid Copy
  5. Content

For the full article, go to: http://designshack.net/articles/business-articles/food-based-web-design-tips-to-make-visitors-hungry/

Off
View Post
Freelance Start-up Guide

Freelance Start-up Guide

With all the recent economic doom and gloom you may have decided to take matters into your own hands and go freelance. There are several hurdles you must overcome to be a successful freelancer, but here are some tips to get you started:

  1. Brand Yourself
  2. Make sure your website helps, and doesn’t hinder.
  3. Finding Work
  4. Legal

For the full article: http://spyrestudios.com/freelance-start-up-guide/

Off
View Post
10 Popular Trends in Modern Web Design Elements

10 Popular Trends in Modern Web Design Elements

Trends in web design can change and fade almost as quickly as they become fashionable. But so far in 2013, a handful of trends have really seemed to take web design by storm, and seem to be sticking.

Today, we’re going to examine ten trends in modern web elements and showcase some great examples of each — everything from vintage typography and circles, to vibrant colours and handy vCards. Even better for you is that all of the examples below are available for download (some free, some paid).

1. Vintage Typography

2. Realistic Effects

3. Vibrant Color

4. Ribbons

5. Flat Icons

6. Vintage Logos or Badges

7. Cards

8. Circles

9. Simple Gradients

10. Sliders

For the full article, go to: http://designshack.net/articles/inspiration/10-popular-trends-in-modern-web-design-elements/

Off
View Post
8 Fresh High-Quality Free Fonts

8 Fresh High-Quality Free Fonts

We’re always trying to find new high-quality freebies. Whether it’s PSD’s, patterns, or icons, we love finding free stuff and sharing it with you. We do the searching so you don’t have to. This saves you time and helps you focus on what’s important. So for this post, we’ve rounded up 8 new high quality fonts for you to use in your designs.

  • Dense Regular
  • PHANTOM
  • Poetsen
  • BARON
  • geogram typeface
  • Track free font
  • Look Up
  • Kelson Sans

For all the links to download, head to the original article: 8 Fresh High-Quality Free Fonts

Off
View Post
How I Earned A Lot More on Projects by Changing My Pricing Strategy

How I Earned A Lot More on Projects by Changing My Pricing Strategy

    Before co-founding FreshBooks, I ran a small design agency. I felt like I was on a treadmill, billing by the hour, and not earning as much as I thought I was worth.

    So I rethought everything.

    The result was powerful: In 2004, I only worked 19 days, and made over $200,000.

    The strategy change I’m about to talk about gave me the funds and the time to work on my startup. That startup would later become FreshBooks, which we were able to grow to over 5 million users.

    So, how did I do this?

    I wrote a book about how I did it (you can get the book for free) but essentially, I moved from billing by the hour, to billing based on the value I delivered to my customers.

    Sounds like a simple enough change, right?

    The truth is that value-based pricing did not mean slapping a bigger price tag on the services I delivered.

    It meant thinking about my design business in a whole new way, and changing the way I worked with my clients.

    Here are five ways I changed my thinking and the way I worked.

Read on: http://sixrevisions.com/business/earn-more-on-projects/

Off
View Post
10 Things I Learned About Design From iPad Apps

10 Things I Learned About Design From iPad Apps

Good design is all around us. Not just in printed materials or on websites, but also in everyday items. What’s great is that you often don’t notice it — you just enjoy whatever item, tool or website you are using.

Nowhere is this more true than with mobile apps. Most of us use them every day, but do you ever stop to think how much they are shaping the way you approach design? Apps can be a great source of inspiration and also another reminder of time-tested design concepts. Here are ten of the great lessons I have learned (and re-learned) from iPad apps.

1. Focus on Simplicity

screenshot

Clean lines and simple user interfaces are common among apps. It is something we are seeing more of in other types of design as well. The branding themes from Apple itself has followed a concept of simplicity for some time, and that has translated well into its products — something app designers seem to have embraced.

Simplicity is also important because of size – too much to look at or choose from on a small screen can be overwhelming. But this also works for the time-strapped user. Keep it simple, easy to use and quick to understand and people will likely embrace your design project.

And while we are talking about basic design principles, remember to make web designs responsive. Nothing is more annoying than an app that does not turn when you rotate the screen. The same is true for a website that does not adjust for browser size.

Examples: Apple iOS, KindleNext Issue

2. Not Everything Has to be Square

screenshot

Have you ever noticed how much of the iPad (and iPhone) interface has rounded edges? If not, go take another look. The simple curvature reminds us as designers that it is OK to not always be perfectly square.

What’s great about the icon shape is that it is quite simple, a bit unexpected and un-dramatic. Effects do not need to shout at a user to be appreciated. They are often most effective when they just fall into the overall design scheme.

Examples: iBooksHundreds

3. Sleek Design Matters

screenshot

Things really do have to look polished. And complete. There are just too many choices out there, and people are not going to spend time with things that look bad or are hard to understand.

A few years ago you might have been able to get away with a hint of sloppiness or a beta release of a site with some issues, but no more. In this no-holds-barred-world, everything is critiqued, criticized and analyzed. Make sure your project is completely finished and functioning properly if it is online. And then make sure it looks amazing — people have come to expect good design.

Examples: Weather HDFanhattan

4. Think Big for Calls to Action

screenshot

Sometimes you have to scream to get your message across. Whether in print or online, calls to action, such as buttons or phone numbers need to carry some weight. Show users where to click online. Don’t make them look for it.

Provide immediate facts such as contact info, pricing or event information in online material so readers don’t give up before understanding what you want. In printed media, also consider a digital component, such as a QR code, to keep people engaged.

Examples: Pimp Your ScreenSkype

5. Engage Users/Readers

screenshot

The joy of a good app is that you keep going back to it, whether it is a game, a tool or just a daily diversion. Treat your design projects with that in mind – you want people to come back.

But how can you engage them? There are a lot of tricks out there from gamification to contests, but the best way is with a quality product. Think about your projects, what can you do to really make them great and encourage people to come back to them again and again?

Examples: Angry BirdsNike+

6. Stick to a Minimal Color Scheme

screenshot
screenshot

This has always been a goal for designers, but apps really brought it back into focus. Sticking to a minimal color scheme is of utmost importance.

What really strikes me about some of the best apps is the use of a single color and tints to create a really distinct design – Food on the Table is a great example. It creates a perfect sense of what app you are looking at from the minute it opens, which can be great for those who often tap the wrong item.

But other apps work great with just a color or two. The balance is lovely. And there is a lot to be said for keeping things like type simple — black and white never goes out of style.

Examples: Food on the TableBusiness Card Designer

7. Flat Design is OK

screenshot

Apple is often seen at the other end of the spectrum from flat design, but more and more iOS apps are employing a more flat design interface. Forget all the fancy shadows and effects; elements are just displayed on the screen. And it looks good.

This design principle falls very much in line with the theme of simplicity and is a great tool for ways to try something different with design projects.

Examples: FacebookCNN

8. Spacing, No Matter How Small, is Important

screenshot

In smaller spaces, spacing becomes more and more important. It creates a mood – from open to cramped – and can dictate readability. Moreover space is key to usability when it comes to tapping apps, if you touch too many things, it will not work properly.

Sometimes as designers – especially when dealing with limited spaces in print – we will try to cram too much information in a space. But what we really need to do is work to use that space more efficiently. Design with open, white or negative spaces to create a better feel and make readers more comfortable while processing your information.

Examples: Band of the DayThe TUXedo Builder

9. Clean Navigation Counts

screenshot

Navigation is paramount in a mobile app — it has to be fast. Apps often use only a few options to direct users – think of a this-or-that model – which can translate well to other types of projects. Too many options can be a bit overwhelming.

So how do you create clean navigation for non-web projects? Use weight to establish a clear hierarchy for the eye. Tell readers where to start, and then how to move through the creative material. Remember that bigger, bolder items will likely be the first things that will cause the eye to stop.

Examples: FlipboardDropbox

10. Every Visual is Important

screenshot

You can’t get away with a poor visual in an app – ever. Think about the sharpness of the iPad retina display or the zoomability of any object on the screen. Poor images will ruin an otherwise solid design in a minute.

We’ve all done it – snuck in a poor quality image at some point – but apps have really made me remember how bad of an idea this truly is. Every little pixel will jump off the screen. Every person looking at it will question your commitment to quality.

Poor images are poor images. Stay away from them. It is actually better to forego an image than use a bad one just to fill space.

Examples: SnapguideFantastic DinosaursPopsugar

Conclusion

What’s great about apps is they have taught designers (myself included) a whole new appreciation for great design. They’ve also made us much less tolerant of poor design.

The biggest lesson any of us can learn from them is to get back to the basics. Quit decorating and start designing. Think about the principles that make something great and go with it.

Now that we’ve got you thinking, what are some things you have taken away from apps?

Source: http://designshack.net/articles/inspiration/10-things-i-learned-about-design-from-ipad-apps/

Off
View Post
The Web Designer’s Cheat Sheet

The Web Designer’s Cheat Sheet

When working on a new site, most web designers are no stranger to all-nighters, copious amounts of coffee and even repetitive strain injury (ouch!). No surprise then that the best coders are lazy coders that are always looking for anything that makes coding quicker, less tedious and more fun.

To make your life easier, we have put together the following “cheat sheet” full of must-know time and effort saving tips for the lazy coder.

Code Editor

Before you even think about writing your first head tag, download an HTML code editor such as Sublime Text 2. With useful features such as the Quick Add Next command, allowing you to quickly jump between tags to select the one you want, it also highlights problems in your code as you write, saving you from searching for a needle in a haystack later on.

The Web Designer’s Cheat SheetImage by Elliot Jackson

DRY (Don’t Repeat Yourself)

Coined by programmers Andy Hunt and Dave Thomas in their book, The Pragmatic Programmer, DRY (sometimes called Single Source of Truth) is an important principle in web design. In theory, DRY means that you can apply document changes in just one place, saving you the time and effort of changing every file.

If you currently rely on copy and paste, do yourself a favor and start using ‘includes’, either with PHP or using a code generator such as Hammer for Mac. The ‘include’ command simply allows you to insert one PHP file into another. A basic example:

   <?php include(“filename.php”) ;?>

This ‘Russian Dolls’ technique is particularly handy if you have a header or menu file that you want to use on every page without typing out the script every time.

You can also use variables or mixins to reuse chunks of CSS, properties or selectors over and over without repeating yourself.

Use a CSS Pre-Processor

Sass (Syntactically Awesome Style Sheets) is a meta-language that you can use on top of your flat CSS to simplify and ‘clean up’ your script, making it instantly more manageable and lightweight.

Sass and Compass, an open-source CSS authoring framework, can take the headache out of responsive design by automatically creating cross-browser friendly script. They also allow you to create multiple, small files, which are more manageable than a single, behemoth file!

The Web Designer’s Cheat SheetImage by Jason Vanlue

Write for Humans

Don’t forget, you will have to deal with the code you write. Will you still understand it in 6 months’ time? Make it easy for you (or a colleague) to find, change or update things by writing with humans in mind. Keep files small and name your files and folders consistently for easy location later on.
Ultimately, however, it is the machines that need to understand your code. Save yourself the extra hassle and use Codekit (Mac) or Mixture (Mac/Windows) to convert it automatically into computer-friendly language.

Emmet

HTML software Emmet allows you to write an entire chunk of flawless HTML with just one line of code. Among its many useful features, it will automatically convert a CSS-like abbreviation into HTML, let you jump quickly between elements and allow you to “comment” a full tag with just one click.

Know Who to Ask

No matter how good your coding skills, there will always be a time when you need a little help. Rather than scrolling through endless forums searching for answers, you can count on MDN for useful tutorials and references, and Quirksmode for the most reliable cross-browser compatibility information. Add both to your Favorites now.

Go Mockingbird

Wireframing the layout of your site is an important part of the web design process – you wouldn’t build a house without first laying down good foundations, so why do the same for a website? A lightweight wireframing tool such as GoMockingbird is an easy way to ensure your ideas are pixel perfect and translate to the screen.

As every web designer will know, it can be difficult for clients to visualise how their website will look when it is finished. GoMockingbird creates professional looking wireframes that you can use to reassure even the trickiest of clients in the early stages. With a wide range of widgets, including sliders, checkboxes and social buttons, GoMockingbird gives your wireframe a level of detail that can make all the difference to client perception (and your own clarity).

Lorem Ipsum (http://www.lipsum.com/)

Let’s face it, who can be bothered to memorise lines and lines of ‘Lorem Ipsum’ dummy text? The Latin words, which are taken from Roman Philosopher Cicero’s De finibus bonorum et malorum (On the Boundaries of Goods and Evils), have been used since the 1960s (possibly earlier) as placeholder text in design. Lorem Ipsum provides ‘natural’ looking text without the distraction of actually having to read and understand it. Although most designers are well-acquainted with dummy text, the handy Lorem Ipsum generator saves you the time and effort of copy and paste, providing you with anything from a few words to multiple paragraphs and even lists, all ready to use at the touch of a button.

The Web Designer’s Cheat SheetImage by Jess Mass

Conclusion

We hope that you will find these tips useful and that they will make you even more lazy – and therefore more efficient – as a web designer. Happy coding!

Source: http://webdesignledger.com/tips/the-web-designers-cheat-sheet

Off
View Post
Authentic Design

Authentic Design

The recently popularized “flat” interface style is not merely a trend. It is the manifestation of a desire for greater authenticity in design, a desire to curb visual excess and eliminate the fake and the superfluous.

In creating new opportunities, technological progress sometimes leads to areas of excess. In the 19th century, mechanized mass production allowed for ornaments to be stamped out quickly and cheaply, leading to goods overdecorated with ornament. A similar thing occurred in recent years, when display and styling technologies enabled designers to create visually rich interfaces, leading to skeuomorphic and stylistic excesses.

In its desire for authenticity, the Modern design movement curbed the ornamental excess of the 19th century, making design fit the age of mass production. Today, we’re seeing the same desire for authenticity manifest itself in the “flat” trend, which rejects skeuomorphism and excessive visuals for simpler, cleaner, content-focused design.

The Birth Of Modern Design

In 1908, Adolf Loos, an influential Austrian architect, wrote an essay provocatively titledOrnament and Crime. The modern ornamentalist, he claimed, was either a “cultural laggard or a pathological case. He himself is forced to disown his work after three years. His productions are unbearable to cultured persons now, and will become so to others in a little while.” Even more boldly, Loos asserted, “The lower the standard of a people, the more lavish are its ornaments. To find beauty in form instead of making it depend on ornament is the goal towards which humanity is aspiring.”

What triggered such an attack on ornament? To understand the mindset of this pioneer of modern design, we must first form some idea of the state of design in the late-19th century.

The advent of the steam engine ushered in an era of mechanized mass production. As the art critic Frank Whitford writes, “Steam-driven machines could stamp, cut and fashion almost any substance faster and more regularly than the human hand. Mechanized production meant lower prices and higher profits.”

But while the method of production shifted from hand to machine, the style of goods did not. Most every product, from building and furniture to fabric and cutlery, was adorned in an opulent coat of ornament, built upon the grand spirit of the Renaissance.

An inkstand The Great Exhibition
An inkstand showcased at The Great Exhibition of 1851, a celebration of the best manufacturing from around the world. The use of ornamentation here is extreme but not atypical.

Historically, handcrafted decoration has been expensive to produce, serving as a symbol of wealth and luxury. With the advent of mechanization, imitations of those same sought-after ornaments could be stamped out cheaply and quickly. Rather than stop and think about what sort of design would be best suited for mass production, manufacturers jumped at the opportunity to copy historicized styles at low cost. The result was the flood of garish, low-quality products that Adolf Loos, along with other pioneers of modern design, railed against.

In The Decorative Art of Today, famed architect Le Corbusier bluntly asserted that trash is abundantly decorated, and that, “The luxury object is well-made, neat and clean, pure and healthy, and its bareness reveals the quality of its manufacture. It is to industry that we owe the reversal in this state of affairs: a cast-iron stove overflowing with decoration costs less than a plain one; amidst the surging leaf patterns flaws in the casting cannot be seen.”

Montgomery Schuyler, an influential critic and journalist, condemned the heavily ornamented 19th-century facades, saying, “If you were to scrape down to the face of the main wall of the buildings of these streets, you would find that you had simply removed all the architecture, and that you had left the buildings as good as ever.”

Harrods store building
Harrods’ current building in London was completed in 1905 to the design of architect Charles William Stephens. The facade is typical of Victorian architecture. (Image: Michael Greifeneder)

Louis Sullivan, the architect known as “the father of skyscrapers,” called for restraint by suggesting, “It would be greatly for our aesthetic good, if we should refrain entirely from the use of ornament for a period of years, in order that our thought might concentrate acutely upon the production of buildings well formed and comely in the nude.” Below is an image of one of Sullivan’s buildings. The ground floor is decorated, but the upper floors are surprisingly modern for a 19th-century design, especially when contrasted with Harrods’.

Sullivan's Carson Pirie Scott store building
Louis Sullivan’s Carson Pirie Scott store was originally designed in 1899 for Schlesinger & Mayer. The simplicity of the upper floors here is striking for a 19th-century building.

During the 1920s, a new movement emerged in Germany known as the untranslatable word Sachlichkeit, which has a sense of “factual,” “matter of fact,” “practical,” “objective.” The Neue Sachlichkeit movement in the field of design sought pure utility. German architect Hermann Muthesius explained how this idea of utility could be applied to style, to produce something he called Maschinenstil, or “machine style.” In his own words, we find examples of this style in “railway stations, exhibition halls, bridges, steamships, etc. Here we are faced with a severe and almost scientific Sachlichkeit, with abstinence from all outward decoration, and with shapes completely dictated by the purposes which they are meant to serve.”

Instead of attacking ornament, other pioneers of modern design focused on elevating functional form on a pedestal. In 1934, an exhibition curated by modernist architect Philip Johnson was held at New York’s Museum of Modern Art, titled Machine Art. On display were various pieces of mechanical equipment, such as airplane propellers and industrial insulators. The idea was to highlight beauty of form in objects that were purely functional. For the modern design movement, decoration was not necessary. Beauty and elegance were to emerge from the design of the content itself, not from a superficial coat of decoration.

Slutzky teapot
This teapot was designed by Naum Slutzky, goldsmith, industrial designer and master craftsman of Weimarer Bauhaus. The clean, utilitarian design has not a trace of ornament — an almost mathematical solution to the given problem.

It took much of the first half of the 20th century for the Modernist movement to prevail, but eventually traditional styles and techniques were surpassed by newer approaches. In his book Twentieth-Century Design, Jonathan Woodham notes that the Modern aesthetic was characterized by “clean, geometric forms, the use of modern materials such as chromium-plated steel and glass, and plain surfaces articulated by the abstract manipulation of light and shade. The use of color was often restrained, with an emphasis on white, off-white, grey, and black.” Modern design had shed its opulent coat of ornament and instead sought beauty in a harmonious fusion of form and function.

It would be wrong to suggest that the Modern design movement on the whole can be characterized as anti-ornamental. New styles came and went, such as the popular movements of Art Nouveau and Art Deco. Some styles, such as Futurism, pushed for an exaggerated technological aesthetic, while others, such as De Stijl, sought harmony in a limited palette of colors and shapes. But underlying the outward shifts in style was the steady movement away from needless ornament, a movement towards a cleaner, more restrained form of design whose beauty lay in the style and shape of the content itself, rather than in external decoration.

Digital Ornament

If we compare the history of modern design with our short history of software and Web design, a parallel can be seen. In the same way that mechanized mass production resulted in an overuse of ornament, so did advances in display and styling technology result in the heavy use of decoration in software interfaces and websites. Designers in the early years of the Web were especially explorative on this front, using animation and sound together with images to produce excessively rich and often garish experiences.

Early operating systems with graphical user interfaces were still fairly basic in their look and feel. Granted, real-world metaphors were used where they could be, such as for images of folders to denote file directories and buttons with bevels to let the user know they could click on them. But the overall aesthetic was fairly flat and restrained. Regardless of whether the designer wanted to deliver a richer visual experience, the low resolution of the black and white displays limited them.

Mac OS 1
Using only two colors for the first Mac OS graphical interface, Apple managed to convey depth, textures, buttons and icons that mimicked real-life objects. The appearance of the interface was constrained by technology, rather than by the designer.

As technology evolved, designers were granted greater visual freedom with their interfaces. With Windows XP, Microsoft introduced a colorful style throughout, giving it a somewhat physical appearance, with plenty of highlights, shadows and gradients.

Apple went even further with the release of Mac OS X, styling the interface with shiny plastic bubbles, brushed aluminum and lifelike icons. As time went by, the visual styling of operating systems grew in intensity. Microsoft gave Windows a shiny, transparent glass-like theme, while Apple introduced even more materials and skeuomorphic cues into its desktop and mobile systems, such as leather textures in its calendar app and realistic page-turning effects in its book reader.

Windows Vista
The Windows Vista interface featured the Aero theme, with its shiny, glass-like window chrome.

Styles that imitate real-life objects and textures are said to be “skeuomorphs” — that is, design elements based on symbols borrowed from the real world, for the sole purpose of making an interface look familiar to the user. Recently, designers have started questioning the logic of styling a notes app as a paper pad, or of adding leather and page-turning effects to a calendar app. These effects provide visual interest, but they are also relics of another time, relics that tie an interface to static real-life objects that are incompatible with the fluidity and dynamism of digital interfaces.

OS X calendar
The current version of OS X’s calendar features a stitched leather texture and torn paper edges to give the appearance of a physical calendar.

With the latest release of Windows 8, Microsoft took a brave step away from such superfluous visuals, attempting to give its operating system a wholly digital and, in its words, “authentic” look. The latest interface is built upon the principles that Microsoft developed for its earlier mobile release, presenting the user with an aesthetic that is almost wholly devoid of textures or imitations of real-life objects.

Instead, Windows 8 relies on typography, spacing and color to bring order and elegance to the digital canvas. Real-life effects and superfluous styles are discarded, and all that is left is simply the content itself. Much as Muthesius once submitted railway stations as examples of Maschinenstil, the designers at Microsoft point to examples of railway station signs as inspiration for the new Windows interface, previously known as “Metro.”

Windows 8 live tiles on the start screen
Windows 8’s start screen breaks away from the old desktop design, being composed of flat, colorful live tiles, instead of icons. The tiles are not merely a stylistic choice: They allow useful information to be displayed on the start screen in the manner of a dashboard.

The Web has seen a similar transformation over the years. Early table-based and Flash-based designs gave developers pixel-perfect control over their interfaces, and so designers did not hesitate to create visually rich containers for their content. As we began to grasp the fluidity of the new medium and to disconnect presentation from content using CSS, Web design became more restrained. Highly decorated containers could not change their width and positions easily, so designers used fewer images and relied more on simpler CSS styling to make their layouts more adaptive and easier to maintain.

The latest evolution of responsive design (which is to adapt a single page to suit various screen sizes and devices) as well as the move among designers to work directly in code from the start, skipping visual editors such as Photoshop, moves us even further towards a simpler, content-focused Web aesthetic, one that derives its beauty from typography, spacing and color rather than from a heavy use of textures and decorative images.

Most recently, Apple, the leader of skeuomorphism, has taken its first step towards digital authenticity with the latest release of its mobile operating system, iOS 7. Gone are the stitched leather textures and ripped paper edges, replaced by a minimalist, mostly flat interface, with colorful, simplified icons and semi-translucent surfaces.

Comparison between Apple's iOS 6 and iOS 7 interfaces
Apple’s iOS 7 is a radical turn away from skeuomorphism. The old design of iOS’ Calculator app is on the left, and the one for iOS 7 is on the right. The grainy texture, bevelled buttons and shiny glass are all gone, replaced by a mostly flat, functional interface.

Authentic Design

What ties the pioneering days of Modern design to the current shift in software and Web design is the desire for authenticity. This drive towards greater authenticity is what moved designers to scrape away ornament from their work over a hundred years ago, and this force is what is moving digital design today towards a cleaner, more functional aesthetic. But what exactly makes design “authentic”?

Authentic design aims to pierce through falsehood and do away with superfluousness. Authentic design is about using materials without masking them in fake textures, showcasing their strengths instead of trying to hide their weaknesses. Authentic design is about doing away with features that are included only to make a product appear familiar or desirable but that otherwise serve no purpose. Authentic design is about representing function in its most optimal form, about having a conviction in elegance through efficiency. Authentic design is about dropping the crutches of external ornament and finding beauty in pure content.

In authentic design, style is not unimportant, but it is not pursued through decoration. Rather, beauty of form depends on the content, with the style being a natural outcome of a creative solution. As Deyan Sudjic commented on the design of the iconic Anglepoise lamp, “How the lamp looks — in particular the form of its shade — was something of an afterthought. But that was part of its appeal. Its artless shape gave it a certain naive innocence that suggested authenticity, just as the early versions of the Land Rover had the kind of credibility that comes with a design based on a technically ingenious idea rather than the desire to create a seductive consumer product.”

The Anglepoise lamp
The design of the Anglepoise lamp is an ingenious solution to a real problem. But the resulting form, which is an effective solution, turns out to have its own aesthetic allure.

In digital design, authenticity means a few things, which can roughly be summarized as the following:

  • Embrace the digital look.
    We do not have to mimic textures such as metal, wood and leather on a computer display. They are not what a digital interface is made of, so pretending that it is makes no sense. This does not mean that a design should have only plain flat backgrounds colors — rather, it means we should not try to imitate or be restricted by textures from the real world.
  • Do away with skeuomorphism.
    A digital book need not imitate physical paper as one turns the page, nor does a note-taking app need to look like a physical paper pad, with a leather cover, torn edges and a handwriting-styled font. Skeuomorphism is not always bad, but it always introduces needless constraints on the interface. For example, while a paper pad is static and one dimensional, a digital interface need not be; but as long as the interface is made to imitate a paper pad, it has to bear the constraints of the physical metaphor.
  • Make the style content-centered.
    Focus on the content rather than on its styling and decoration. You might think this point is trite, but how many times have you seen an off-the-shelf theme on a website? A theme is always built on dummy content and so, by its very nature, could never be an optimal representation of the content it will eventually hold. Building themes with dummy text pushes the designer to focus on styling and decoration, rather than on content, because there is no content yet to work with. Only when you work with real content can you begin to truly transform function into form.

NOT MINIMALISM

Design whose beauty lies in function is not the same thing as minimalism minimalist style. With the former, the designer seeks to remove the superfluous, to make the product easier to understand, to make it perform better and to make the most of its medium. The latter seeks to create a minimalist aesthetic, to give the object an aura of simplicity and cleanliness. One is a fundamental principle of design, the other a stylistic choice.

Flat UI
The Flat UI theme kit, by Designmodo, is an outward representation of the underlying shift towards authentic design. But as a style, “flat” is a choice, not a necessity.

It would be a mistake to rigidly apply a minimalist design aesthetic to an interface as a style in the hope of making the interface simpler and more digitally “authentic.” For example, ruthlessly eliminating visuals such as shadows, colors and varied background styles would not necessarily make an interface easier to use. In some cases, it would achieve the opposite by undermining hierarchy and focus, which were established by those very shadows and background colors.

Outlook 2013
Outlook 2013’s interface was updated to fit Windows 8’s modern theme. But with the interface being flattened, all of the content and menus were merged onto a single white plane, becoming more cluttered as a result.

In The Laws of Simplicity John Maeda posits, “The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove.” The final warning is important. Removing things often leads to simplicity merely because the user has fewer items to process. But removing visual cues that help the user mentally process the interface — such as graphical elements that group items, that differentiate buttons and labels and that make things stand out — could do exactly the opposite by giving the user more work to do. So, rather than guide the design by style, guide it by principle.

WHY AUTHENTIC DESIGN MATTERS

The Rise app is a perfect example of digitally authentic design. The alarm clock is a problem that has already been solved, but Simplebots decided to tackle the concept from scratch, rethinking the interface in the context of a purely digital canvas.

Rise app
In the Rise app, the user sets the time with an innovative full-screen slider, with the background color changing to reflect the color of the sky.

Rise’s interface features a full-screen slider, with a background color that changes to reflect the color of the sky at the time you’ve set. It shows no attempt to mimic a physical clock or a physical slider or real-life textures. Instead, the designers have fully embraced the touch canvas of the mobile phone, creating an experience that is designed from the ground up to make the most of its medium. The innovative design not only makes for a great user experience, but elevates the app above others in the marketplace.

An interface like Rise’s is only possible when you tackle a design problem wholly within the context of the digital canvas, rather than by translating solutions from the real world. The digital screen allows for abstract forms, animation, bright colors and uniform shades. It need not be limited to a subdued palette or static representation, nor must it be bound to skeuomorphic forms. By figuring out how best to represent content using the pixel grid, we can arrive at better, simpler solutions, innovative interfaces that feel at home on the screen, designs that provide a better user experience and that stand out from the crowd.

The recently popularized “flat” design style may be a trend, but it is also the manifestation of a desire for greater authenticity in design, a desire to curb superfluous decoration and to focus on the content itself. Technological progress sometimes leads to excess, as mechanized mass production did in the 19th century when ornament became overused, and as display and styling technologies did during the early years of Web and software design. But ornamental excess was curbed over time by the pioneers of Modernism, who sought beauty in function, and today’s excesses in software will in time be curbed by an underlying desire for authenticity in design.

Source: http://www.smashingmagazine.com/2013/07/16/authentic-design/