Studio Brief 3 - Digital Web Design Trends

Skeuomorphism

Skeuomorphism is the design concept of making items represented resemble their real-world counterparts. Skeuomorphism is commonly used in many design fields, including user interface (UI) and Web design, architecture, ceramics and interior design. Skeuomorphism contrasts with flat design, a simpler graphic style.

In UI and Web design, skeuomorphism attempts to create three dimensional  effects on a 2-D (flat) surface. A skeuomorphic icon on a smartphone display that represents the phone function, for example, is designed to look as much like a telephone (or handset) as is feasible, typically with shadowing, highlights and some degree of detail. A button might appear to be raised until clicked and then appears to lower as if it had been physically pressed. Non-visual skeuomorphs include the page-turning movement used to advance an eBook, the sound of a record ending at the end of a CD and the sound of a camera shutter on a digital camera.

Skeuomorph comes from the Greek skeuos (meaning container or tool), and morphê (meaning shape).
http://whatis.techtarget.com/definition/skeuomorphism

Skeuomorphism used on an iphone app to re-create the look of a remote control device. 

In music software skeuomorphism is used a lot for the vst's and plugins the programmes use to re-create the sounds of the actual analogue machines. These example above are from Reason 4, which I have used myself to experiment with a few years ago. I remember using the software and never got very far with it mainly because I didn't know how to use it properly, it's hard to function and work fluidly. However the skeuomorphic designs are created to allow people who are already familiar with the machines an easier time manipulating the programme as the designs are pretty much the same as the real thing. 

Apple made the switch from skeuomorphism to flat design with their latest update. Many other similar technology companies have also done the same things. Skeuomorphism is now seen as an ugly aesthetic, which for the most part is. Flat design has now become a trend for designers to incorporate into user interfaces. People want to be able to interact with things much easier and have their users become accustomed to the systems easier, however skeuomorphic elements such as gradients and buttons do help the user to understand what they must press/click on. Below you can see the comparison of the old news stand and the new one for the iPhone. 

Flat Design

Flat design is a simple, graphic style common in user interface (UI), software and Web design. The flat style contrasts with skeuomorphism, a design approach that seeks to bring real-world effects to the items that are represented.

A skeuomorphic icon representing a phone function, for example, is typically an image that resembles a real-world phone, complete with shadows, highlights and some degree of detail. Its flat design counterpart, on the other hand, is typically a simple graphic image, recognizable and representative but without any attempt to mimic 3-D effects.

Proponents of skeuomorphism claim that it renders objects in a way that is more visually appealing and more readily recognizable. Flat design proponents argue that device users have grown more sophisticated and no longer require that degree of replication and that its simpler designs are more honest because they are clearly not faking a 3-D (three-dimensional) effect.

 http://whatis.techtarget.com/definition/flat-design

Benefits of flat design

Flat design fits within vector design and minimalism which a lot of graphic designers are familiar with creating so flat design is fairly easy to create. Flat design is appealing and very simple, it doesn't take up too much space, the file sizes are usually small. When used in mobile user interfaces it allows for navigation to be much more clearer, making for a better user experience. The visuals are sharp and clean, it also allows a strong focus on typography too when used in flat design. 

Downsides to flat design

Flat design can actually be too simple, believe it or not, it can become hard to convey messages when restricted to flat design. Small elements of skeuomorphism can help add realism When flat design is used for more complicated user interfaces, it can cause some usability concerns as it appears to be too flat sometimes. Not all users are comfortable with flat design and might not know where to tap or click.

Responsive Design

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.  The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display.

Responsive web design allows you to have a single website that automatically fits the screen size of the device on which it is being viewed. This means that you have just one website that looks equally well on all types of devices.

Advantages of responsive

It's easier to administer a single website that works for all devices. There won't be any redirects on mobile devices with responsive as it just uses a single URL. Search Engine Optimisation is much easier as there is no need to create specific content for mobile devices. Also overall the cost is lower because your just using one website not two.

Disadvantages to responsive

The user experience on a mobile is completely different to the one on a desktop, so having a responsive website may harm the over user experience on both platforms. If you try to have both mobile and desktop users satisfied with the same user interface, then you may end up not satisfying anyone. As responsive web design is quite recent in technology, there are still outdated devices with old browsers that wont be able to load the website or could make it run very slowly.