Material Design Research

Material Design is something that was initiated in it’s operating system after the flat design trend took off. It was designed to add levels of depth into an otherwise completely flat enviroment. The idea is that material is a metaphor for the “unifying theory of a rationalized space and a system of motion, this is emboldened by print based design techniques that fully take advantage of typography, grids, space, scale, color and use of imagery. This means  it creates a brilliant visual hierarchy, meaning, and focus. Another element of material design that perfectly fits my brief is that by adding motion to the techniques previously mention, the user is then presented with an easy to understand UI that is visually pleasing to most users.

A lot of techniques apply to material design, and they improve the overall look of the UI. The first is the use of light and shadow;

Depths of the elements also matter;

The use of images create really powerful pages and amplify the meaning of the content;

There are even specific colours that should be used, there are multiple resources in which you can find them.

It is also important to remember there are multiple tones to remember;

Below are screenshots of the iPhone adaptation of the Google Calendar application, you can see a great example of the shadow technique being employed.

Next up is the Google Maps introduction, note here the use of the colours, the same ones found in the palette shown above.

These examples perfectly show how to mix the palette and images to create the perfect visual content

References;

https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input

https://www.materialpalette.com/

Advertisement

Good & Bad Brochures

The purpose of a brochure is to inform the reader, this can be done in a varying amount of different forms and I am going to start researching them now. From my research I have found that there are a lot of small things that all add up to make a brochure good or bad. Fonts, colour choice, layout, shapes, form and lines all make the brochure stand out from the rest so the best way to start was to research the different types of brochures, you can see these here.

Bad

One awful one that jumped out at me straight away was this one. It was way to complicated with too much going on at once, a brochure to sell the reader a sport fishing trip uses out dated styles to present its information. In an age of flat colour and simplicity, this design has 3D boat drawing complete with way too much compact text and images. This brochure has no space to breathe in, making it difficult for the reader to read it.

This design has seemingly mixed lots of design techniques into one. It has used flat colours and text message like green boxes with a slight transparency, there is a very busy logo in the top right and a somewhat disturbing white flower design floating on an image of a field.  To make the image even more complicated there is three images of the vehicles available. Something that stands out to me about this image is that it isn;t instantly obvious what the brochure is about and I think this is definitely something to be avoided if making a brochure to inform or sell.

Good

I really like the idea of the book having a matte finish but a transparent cover to protect it and give it a gloss finish. By printing on the gloss, when it lifts naturally it gives it a natural shadow on the actual design too which is really nice. I think it is brilliant how the texts and images takes up the full page by themselves. This booklet also proves that white space makes the design so much better by simplifying the design.

I really like this image as it has some very interesting ideas about layout of images. The main reason I like this brochure though is the fact that it uses a total of only three colours for contrast in the background and text areas. Transparency also plays a nice cold in the areas over images.

This design is very clever in the way it uses the there colours of the american flag to add interest to the brochure. While I like the overall design and the seemingly random shapes I do find the design to be a bit cluttered and had a bit too much going on. I feel like I would prefer something a little more stripped back.

I like this design because it is very creative in the way the images are laid out, using unusual cropping of images lead the eyes across the page very well. Some of the positioning of the images and the flat images don’t work very well therefore I will probably disregard these but it’s all good inspiration regardless.

I like how this post uses cuts and folds to create a more interesting composition. Edging away from simplicity, and creating something.

I found this piece of art work and thought it was really interesting so thought it would be worthwhile noting it and trying to find a way of relating it with anything within web destign, this means I will have to look at and research pop ups in web design and print.

References;

http://www.printaholic.com/15-awful-brochures/

https://www.behance.net/gallery/7212089/Dwell-Coastal-Cities-Revisited

http://graphicdesignjunction.com/2014/02/corporate-brochure-designs/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+GraphicDesignJunction+%28Graphic+Design+Junction%29

https://dribbble.com/shots/1491729-Webmaster-Manual/attachments/223595

http://www.thejealouscurator.com/blog/2010/08/20/im-jealous-of-abigail-reynolds/

http://www.thejealouscurator.com/blog/

Second Design Stage

The next step in doing my design was to get my initial ideas onto the computer, so here you will see quite a large jump in progress but at the same time, there are bits missing at this stage as I haven’t yet completely finished adding the content but this is the style so far.

At the top you see a video as soon as you land on the page, it would automatically play as soon as you land on the page, there is simply a button there to represent it being a video. This video will include America propaganda, visuals of war related events and presidents speaking in a reasonably fasted video. It also shows the top of the next section which is about the military budget and how it’s spent. as you can see war and peace are split up into columns with their own colour scheme.

This section is still about the military budget but it shows the individual things the budget did, and could have bought. To keep my design flat I have decided to use icons that represent the appropriate items, I think this helps the simplicity and focuses the viewers attention on the actual facts themselves. There are some sizing issues that will yet need to be covered.

This section is about the economy and how it could about gaining wealth, I have introduced this section with a quote old president of the USA, George Bush which is about how every us citisen should go shopping more, the day after 9/11. I think this really works because even in this early stage, when I show peers for review, they all seem very shocked and say “did he really say that?”. I think this will create more intrigue as to the content of the section.

The footer is where the call to action happens to get the user involved with social debates.

You can see from this early stage the design is coming on nicely, it is taking form with a similar overall theme.

Apple Design Influences

How has Apple effected web design over the years, and will continue to do so.

History

Apple has always been big on white space, using it to bring attention to the images and the text, while this  is relatively simple design, it can be seen across many websites with similar design to apple’s website. It uses subtle gradients to add depth to otherwise boring content, great text and content that match, icons used across the site, a grid system to keep everything in line, user friendly navigation and use of javascript to avoid long loading times. This can be seen in Apples website along with a lot of other websites that have been influenced by their design structure.

Apples website:

in comparison to

Mac Rabbit:

Versions:

Pixelmator:

Removing Skeuomorphism

Skeuomorphism is the term given the visual style that represents physical objects. The reason for using the visual style to begin with, was that when people first started using computers, they didn’t fully understand how to use them, so designers made icons to represent the original object. This is why mail icon is a envelope, music icon contains a musical note ect. Now that computers have gone ‘mainstream’ and we all understand them much better, we can remove a lot of this unneeded clutter such as textures, reflections and shadows that allowed things to represent their physical counterparts. This was changing content to so that instead of using texture and realistic imagery to represent certain design aspects, they moved to flatter mimalist design. Here are a few examples from when apple removed skeuomorphism from their mobile operation system;

The Icons were all changed to be much simpler, vibrant and nicer to look at, with the removal of physical objects and textures. The same can be said for the design with the apps.

Examples of flat web design

http://foodpornindex.com Is a website that tracks the hashtags of certain foods, healthy and unhealthy. It then shows it in an info graph designed with flat colours.

http://www.franzsans.de Is also shows another good use of flat design to show off the design of the font so you buy it, It works particularly well and I was tempted to buy the font.

Future

I believe that circle user interfaces will be inspired by Apple’s new watch. Circles appear in our natural world, just look at the moon, wheels and fruit. They create emphasis and focus our attention, giving us a defined centre. Apple have recently re-imagined user experience for the smaller screen of the watch but could have potentially created another web trend. Heres a picture of the new operating system.

Using circles in web design isn’t really a trend that has taken off over the years but there are still a couple of websites that use them in their design. Not just using circles in the design but in the user interface will create a completely different experience, something that hasn’t been created on rectangular shaped screens. While it doesn’t take up every area of the space, it will allow for a new type of white space by naturally giving the page more room to breath.

The operating system runs on a fluid icon system where you flick the screen to navigate into areas that aren’t currently visible, a crown on the side allows the user zoom in/out to their preference. If you click on an icon, an animation zoom into the icon until it is fullscreen then transforms into the app. This could be the next step in web design, as previously spoken about in my blog, pageless designs are becoming much more popular and seem to be more logical and less crowded than current designs. Interactivity to create a more immersive experience for the user would work well with pageless designs, I have researched websites that currently use circles in their user interface to create an interactive, pageless design.

A particularly interesting website I came across was (http://www.circle-ent.com) complete with animations and flat colours this website screams simplicity. Circle is a “idea lab”, a company that works on web experiences for ‘fun and brands’, it targets its market perfectly by showing off their digital skill with a fun, friendly user interface. This website seems to have already mastered Apple’s technique of simplicity through white space, the use of flat colours.

Another great example of a user experience that uses circles was (http://vlog.it) which uses a lot of slick animation from arriving to the site, to the introduction of the wheel of vlogs. It was “named as finalist for the 15th SXSW Interactive Awards in the Motion Graphics category” and “won the Awwwards Site of the Day”. Not quite as simple as the previous, it still uses flat colours and white space. Shadows from one circle to the next give the wheel a sense of depth, which makes the century circle stand out even more. It is perfect for its audience, people who want to watch video blogs the site which on a single visit contains about 40 links to videos which all open within the same window with an animation, will show recycle a total of 396 videos. It means users don’t have to leave the page, they click on all videos until they have watched them all then just refresh for another set. It takes for a great user experience, takes on great design concepts.

A website that doesn’t use circles as its user interface, but just adds to the simplicity of the pageless design is this one created for the iPhone game “Hundreds” (http://playhundreds.com). It uses white space really well to give focus to the content of the page, and again uses flat colours. There are clutters of different sized circles together and animations create an experience that attracts the user to pay more attention. As you scroll down the page, you follow a grey circle which is shown above and below other images which creates depth within the page.

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://versionsapp.com

http://webdesign.tutsplus.com/articles/how-apple-has-influenced-web-design-over-the-years–webdesign-2553

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://webdesign.tutsplus.com/articles/flat-design-ios-7-skeuomorphism-and-all-that–webdesign-14335

http://www.apple.com

http://versionsapp.com

http://www.pixelmator.com

http://macrabbit.com

http://mashable.com/2013/06/12/ios-7-apps-comparison/

http://wpmedia.business.financialpost.com/2014/09/apple-watch-features-apps.jpg?w=620

http://www.digitalartsonline.co.uk/news/mobile-creativity/see-how-app-designs-have-changed-in-move-from-ios-6-ios-7/

http://gizmodo.com/skeuomorphism-will-never-go-away-and-thats-a-good-thin-1642089313

http://designshack.net/articles/graphics/designing-with-circles-tips-and-advice/

http://i-remember.fr/en

http://www.theprz.com/

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://www.awwwards.com/best-websites/franz-sans-powerful-pleasant-1

http://www.theprz.com/

http://activetheory.net/#!/work/food-porn-index

http://www.franzsans.de/

http://foodpornindex.com/#!/berry

http://wp.iosfans.com/wp-content/uploads/2012/11/Apple-Logo-Banner.jpeg

Website Analysis 1 – thenutone.com

I am very impressed by the nutone.com, it is very simple, yet extremely professional. The company’s services range from web design and print to branding and illustration. Given they are a design company, the biggest aim of the site would be to show of the skills they have available. Their site takes advantage of negative space like I have previously spoken about (https://akbrodie.wordpress.com/2014/09/22/rosa-bonheur-the-lion-at-home/). Broken down into four simple sections.

Home

The homepage is simple, it has the company name twice, a couple of simple graphics, links to other parts of the site, and the social bar. The greeting is simple and is dominated by negative space. Salmon is used to colour the background, and I thought this was unusual so I researched the connotations of the colour, I realised that it may not have been picked for simple design aspects but also the meaning behind the colour. I found (http://www.mysticfamiliar.com/library/l_auras_colour_meanings.htm) with the meaning “people who have found their true vocation and love it” which would indicate that this company is not only good at what they do but they also love it  too!

Works

The works section is an interactive part of the site, when you hover over a box it names the company and tells you what work they did for that company. The page links and the social bar has moved to the sides to get of of the way of the content, allowing your focus to be on the centre of the page, which is where the client work, the most important content lies.

Something incredibly simple but effective I found while looking at this site is that all the colours run into each other, check out the pink running into the grey and also the grey running into the about section here. It gives the website a certain type of flow that you can’t really find many places on the web.

About

As found here (http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0071161) it has been proved by a study based in the US that dyslexic people find it easier to read shorter lines rather than longer texts. This is the first time we have seen text as a whole on this website, and it keeps it short and snappy, more presentable with a shorter width and makes it look there is a nice simple block of text to read.

A quirky side to the site is the statement “Let us Lorem, your Ipsum” leading to the contact section of the site. While Lorem Ipsum is “simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s” (http://www.lipsum.com) thenutune have tried to create a somewhat innuendo sounding phrase from it. In the creative world, which the company would be making a product for, it makes them look like they have a sense of humour, and adds quirkiness to their site.

Contact

Again the contact section of the page is very simple. containing contrasting colours that leave the site looking far from bland. I feel that the fact that the site is simply one one page, it allows the user to experience without clutter or unnecessary content. The negative space on the webpage is key to making this site a brilliant experience for the user.