Skeuomorphic and Flat Design Essay Example For Students

Skeuomorphic and Flat Design Essay What is skeuomorphic design? This word, in all its obscurity, describes the way design borrows particular features from the past i. e. shutter noises that are prerecorded to remind us of analog film cameras or calendars that use lined paper or ring bindings. The official explanation for what constitutes skeuomorphic design goes something like this. â€Å"A skeuomorph is a physical ornament or design on an object copied from a form of an object when made from another material or by other techniques†. While this explanation only mentions â€Å"physical ornaments† digital design has seen the popularity of skeuomorphism rise since the introduction of the iOS inspired trends such as realistic textures and life-like control. The opposite of this is called â€Å"Flat style† to which Microsoft’s Metro UI is the most commonly used example. Flat style incorporates minimalism, lack of texture or lighting effects for flat shapes and colours. To put it in a more precise way this new trend is not always about Skeuomorphism, which implies connections to past designs but rather, more often about realism. Realism is a purely visual style that tries to imitate real world materials and textures, which can be exemplified by Apples use of leather textures in some of their own apps. Often these 2 design styles can be used in conjunction with each other: Skeuomorphic design tends to look realistic to make the connection to the real life object obvious and realistic objects tend to look skeuomorphic because the realism would look weird and out of place otherwise. So if we look at realism as a purely visual style we can see that skeuomorphism affects design on a much deeper level. Loren Brichter from Tweetie Letterpress states, Skeuomorphism is not bad at all. We need that to interact with devices in a human way. Gaudy textures are just a visual design problem I hope they tone it down. â€Å" So if this issue is â€Å"gaudy textures†, how did we end up with them? And how come designers are getting tired of them? The recent backlash against flat design can be traced to the introduction of the iPhone way back in 2007. Before the iPhone realistic user interfaces were something that we only really saw in video games. In order to immerse the players into the game world designers created their interfaces from wood, stone and metal. Diablo 2 is a prime example of this sort of design, where by stone-wrought menu screens and glass health meters supported by gothic statues are used. In a more serious context realism is still very limited, one notable exception was the introduction of glass, web 2. 0 style buttons on early versions of Mac OS X. One might say that these incarnations of â€Å"gaudy† buttons were early warning signs for Steve Job’s obsession with realism. With iOS however, apple decided to embrace realism further as the appeal of realism is something that undeniably cannot be ignored. As much as we are used to and probably slightly sick of the use of textures and page turn animations, before the introduction of the iPhone consumers had never experienced this kind of OS interface, especially not on a mobile phone. Its important not to forget that the iPhone was a completely new type of device to users and that by using realism it was a way to link the past to the future. A mediums technical restraint will always influence the art that is being produced and this is as true for mobile devices as it is for a painter creating a portrait. There are some practical factors that mean that realism works well on the iPhone; for starters, on a smartphone apps take up the entirety of the screen, unlike a desktop computer. This means that 2 apps will never be displayed side by side meaning that different design styles can be expressed without the risk of incoherence. It is important to note that the iPhone was intended to be used by a finger as opposed to a stylus, Apple designers found out this meant the touch target area couldn’t be smaller than a certain size, 44 x 44 pixels according to Apple’s Human Interface Guidelines. .uf104cc45845a50c2a85cf2f867fddb20 , .uf104cc45845a50c2a85cf2f867fddb20 .postImageUrl , .uf104cc45845a50c2a85cf2f867fddb20 .centered-text-area { min-height: 80px; position: relative; } .uf104cc45845a50c2a85cf2f867fddb20 , .uf104cc45845a50c2a85cf2f867fddb20:hover , .uf104cc45845a50c2a85cf2f867fddb20:visited , .uf104cc45845a50c2a85cf2f867fddb20:active { border:0!important; } .uf104cc45845a50c2a85cf2f867fddb20 .clearfix:after { content: ""; display: table; clear: both; } .uf104cc45845a50c2a85cf2f867fddb20 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #95A5A6; } .uf104cc45845a50c2a85cf2f867fddb20:active , .uf104cc45845a50c2a85cf2f867fddb20:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .uf104cc45845a50c2a85cf2f867fddb20 .centered-text-area { width: 100%; position: relative ; } .uf104cc45845a50c2a85cf2f867fddb20 .ctaText { border-bottom: 0 solid #fff; color: #2980B9; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .uf104cc45845a50c2a85cf2f867fddb20 .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .uf104cc45845a50c2a85cf2f867fddb20 .ctaButton { background-color: #7F8C8D!important; color: #2980B9; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://artscolumbia.org/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .uf104cc45845a50c2a85cf2f867fddb20:hover .ctaButton { background-color: #34495E!important; } .uf104cc45845a50c2a85cf2f867fddb20 .centered-text { display: table; height: 80px; padding-left : 18px; top: 0; } .uf104cc45845a50c2a85cf2f867fddb20 .uf104cc45845a50c2a85cf2f867fddb20-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .uf104cc45845a50c2a85cf2f867fddb20:after { content: ""; display: block; clear: both; } READ: The design and planning phase EssayPrevious smartphones used bunched up lists and smaller icons, which meant that attention to design details and graphic aesthetic was limited at best. Fancy design and graphical elements just didn’t have the space within the simplified interface. In terms of the iPhone, it’s larger touch targets led to changing requirements to preserve space but have optimum usage. This led to a less is more approach to interface design. So what are the issues with skeuomorphic design? As I’ve mentioned previously a lot has been said about the way skeuomorphism and realism are displayed, usually resulting in tacky looking leather or wooden UI controls. So to start, if realism is done wrong then it becomes unpleasant and â€Å"cheap†, after all buying a fake leather jacket or mock wood flooring are considered to be distasteful so the same can be said for our touch screens. There are also issues with skeuomorphic design being executed in the wrong way: just by making an object look real but not operate in the way it is meant to is known as the â€Å"uncanny value† in interface design. The best example of this is Apple’s Contacts app for the iPad, it’s interface looks identical to iBooks, yet Contacts doesn’t let the user swipe left and right to flip between pages thus rejecting the convention of how we read a book. The more pressing and subtle issue lies in the functionality of skeuomorphic interfaces regardeless of whether they appear realistic or not. Often when borrowing ideas from a previous design you are forced to work within the previous incarnations limits, even if those limitations don’t exist today. For example if we look at some modern calendar app designs they use a single page per month interface rather than using a central view to focus on that current week. This is a convention carried over from real life calendar design whereby the object is limited by the physical concept of a page. Another quite interesting example is the calculator for Apple iOS which apps a realistic calculator to simulate the physical calculators limits within a digital space and features single line screen and minimal button options. In contrast to this if we look another app that uses the same iOS called Calcbot it does a much better job at reducing those limitations by using a â€Å"history† function that actual calculators wouldn’t have. When executed in the correct way skeuomorphism and realism are able help the user make associations with the objects real life counterpart. Sometimes this association can be a bad thing, as it doesn’t allow for building upon and improving what has been done before. Flat style, like skeuomorphic is not without its own problems too. To start as a fairly new design concept it is inevitably going to be abused by designers who want to jump on the bandwagon without consideration for their design choices. In comparison to realism being taken too far and it being seen as distasteful, minimalism can compromise and objects usability if taken too far. The user has taken to relying on clues to navigate through the interface, hints from rounded corners on buttons to subtle gradients, inner shadows and floating navigation bars all help to provide us with definition. Remove these elements and we are left with a flat interface, void of any texture of realism where everything becomes slightly confusing. Buttons become banners and suddenly were unsure whether we should tap or not. As practitioners of design it is important to maintain functionality as well as clever design, so does this flat style mean that we will have to put aside our own aesthetic ideals in rue of functionality? Do our aesthetic pursuits in some way compromise the needs of the user? Sometimes repetition of a previous visual style is a means to an end. .u8bb293b82bd40b004f7780dbc4b3cbc0 , .u8bb293b82bd40b004f7780dbc4b3cbc0 .postImageUrl , .u8bb293b82bd40b004f7780dbc4b3cbc0 .centered-text-area { min-height: 80px; position: relative; } .u8bb293b82bd40b004f7780dbc4b3cbc0 , .u8bb293b82bd40b004f7780dbc4b3cbc0:hover , .u8bb293b82bd40b004f7780dbc4b3cbc0:visited , .u8bb293b82bd40b004f7780dbc4b3cbc0:active { border:0!important; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .clearfix:after { content: ""; display: table; clear: both; } .u8bb293b82bd40b004f7780dbc4b3cbc0 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #95A5A6; } .u8bb293b82bd40b004f7780dbc4b3cbc0:active , .u8bb293b82bd40b004f7780dbc4b3cbc0:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .centered-text-area { width: 100%; position: relative ; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .ctaText { border-bottom: 0 solid #fff; color: #2980B9; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .ctaButton { background-color: #7F8C8D!important; color: #2980B9; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://artscolumbia.org/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u8bb293b82bd40b004f7780dbc4b3cbc0:hover .ctaButton { background-color: #34495E!important; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .centered-text { display: table; height: 80px; padding-left : 18px; top: 0; } .u8bb293b82bd40b004f7780dbc4b3cbc0 .u8bb293b82bd40b004f7780dbc4b3cbc0-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u8bb293b82bd40b004f7780dbc4b3cbc0:after { content: ""; display: block; clear: both; } READ: The Next Millennium Of Graphic Design EssayIf the object calls for realism then the object should look and operate on a realistic level but if the aesthetic of flat design completes the design objective better then maybe it is better to move on from skeuomorphic and realism and embrace modern minimalism once again. With the release of the latest iOS 7 from Apple we have seen a dramatic change in the user interface, as it seems that apple has embraced flat minimalism over realism ending much of the hyped speculation and comparisons to the â€Å"Apple vs Microsoft† debate. So does this mean that realistic app design is a thing of the past? In my opinion I think that flat design forces you to care about typography and the layout of a page, both being areas that web design has lost out to by its print counterpart. When looking at mobile technology flat design makes it easier to focus on animations or interactions, using apps like Letterpress and Clear are more comforting on the eye. This is not to say that realism doesn’t have its place it’s just that until our tools can catch up there is nothing wrong with keeping it simple and lightweight.