Design Stage.

By it’s pure nature, designing a project that uses Polymer is going to be demanding and restrictive. The important part to note is not only does Google specify many of the design techniques to be used, but the project is, put simply, a framework. Add into the mix the fact that I am learning how to use it at the same  and it becomes a very complicated and difficult project to attempt, let alone complete.

So with this in the back of my mind at all times, it is important I try to use the components that are available to me and don’t try to make things too complex for myself. Therefore I need to note the elements that are available to me, here are the different elements that are available to me;

THE LAYOUTS

These are layouts and animations that I am able to use in my project, it is import to understand the elements available to me too!!

Design Inspiration

Since flat design has taken over subtle animations make all the difference in making an experience different and stand out from the rest. The below show how animations in UI can change the experience entirely;

player_loop3

replace

mti5mdi2mdi2mdi1mdmwotmw

mti5mdi2mdi3mdk4otazodi2

mti5mdi2mdm2mji1ntkxmza2

mti5mdi2mdq1njiwodmymjy2

mti5mdi2mdq5mtewnty4otmw

google-material-design

As you can see the most important thing being shown here is smooth animation mixed with bright colours. They all follow the same Google Standard which means the user knows what to expect when they action any button on a site. One really vital note here is that the user understands the concept of depth within the design to allow them to understand the context of the content. You can see here a really good example of how this works;

77a55021280343-562fe88087993

It is important to note that material design can also be mixed with real images to create an even more interesting design and layout;

mti5mdi2mdq4mdm2otu4mtc4

It also works really well with the use of current web trends, an example of this is how parallax design still works really well here;

dribbble_i8

It is really good that good that Google themselves have put together the following video to show how appealing material design done properly can really be.

The use of animated icons aren’t included in material design but always seem to work quite well so I have included a few nice examples that I could consider using…

drop-loader3

browserpreview_tmp

The payment system;

c6a72ee4399a682fac7c37ddf44abff7.gif

Each artist will get their own individual pages, much like on iTunes store;

Screen Shot 2016-03-15 at 14.45.53Screen Shot 2016-03-15 at 14.43.46

References;

https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File

https://dribbble.com/shots/2267655-Ui-Parade-2-0-Ui-Style-Switch

https://dribbble.com/shots/2234148-Swipe-animation

https://dribbble.com/shots/1722183-Drop-Loader

https://dribbble.com/shots/1801398-Audio-player

https://dribbble.com/shots/1997201-One-of-9squares?list=users&offset=0

https://dribbble.com/shots/2067564-Replace

http://theultralinx.com/2015/03/25-gorgeous-material-design-interface-animations/

https://dribbble.com/shots/2072658-i8-parallax

https://www.behance.net/gallery/21280343/REDBUS-APP-Material-Design-Preview

OTHER FESTIVAL SITES – Lollapalooza

Lollapalooza is a great festival site that already uses flat design. Not only do they use flat colours but they seem top match what google use in their material design.

The home screen again has announcements about the festival;

Screen Shot 2016-03-22 at 17.28.20.png

The tickets page gives the uses colour to make the different tickets stand out the best;

Screen Shot 2016-03-22 at 17.48.43.png

The lineup page is again, just like most of the others, just a list of names, lacking any interaction at all;

Screen Shot 2016-03-22 at 17.50.37.png

There is a page about the festival and it’s history, it is basically a blog with articles on it;

Screen Shot 2016-03-22 at 17.52.42.png

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;

Screen Shot 2016-02-23 at 18.33.55.png

Depths of the elements also matter;

Screen Shot 2016-02-23 at 18.34.38.png

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

Screen Shot 2016-02-23 at 19.07.19.png

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

Screen Shot 2016-02-23 at 18.38.55.png

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

Screen Shot 2016-02-23 at 19.00.18.png

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/

Other Festival Sites – Glastonbury

Glastonbury is a very busy website, with no clear hierarchy on importance of the content. The homepage bombards you with information not related to the lineup or purchasing tickets. You can see this below;

Screen Shot 2016-02-19 at 11.28.31.png

There are other pages that show the history which makes perfect sense since it has been running since 1971 but the page itself is not well designed.

Screen Shot 2016-02-19 at 11.34.55.png

There is no option to purchase tickets. Instead of finding it on the site itself I had to search google for “Glastonbury 2016” to be directed to this page telling me I can’t purchase tickets.Screen Shot 2016-02-19 at 12.03.30

Screen Shot 2016-02-19 at 12.03.36Screen Shot 2016-02-19 at 12.03.44

The line up list is a section of the site that could be massively improved on, it simply includes an image, the same image that they would use as a poster to advertise. If you want to know anything about the artist you have to use google, this could be improved upon greatly by making an interactive version for the web.

Screen Shot 2016-02-19 at 11.34.27.png

and a copy of the image they have on the site;

poster15-a3-june-rev2

References;

http://www.glastonburyfestivals.co.uk/

The Current Coachella site

The current site, while isn’t terrible lacks a certain quality that would be associated with such a big event. The homepage that the user is immediately presented with is this;

Screen Shot 2016-02-19 at 08.54.08.png

This is a video background with an image of the lineup in the centre of the page, this is great if you only went to the site to check the lineup but slows down every other function on the site. To access the main site you must press the arrow, you are then presented with this page;

Screen Shot 2016-02-19 at 08.54.24.png

When you arrive at this page it appears to be quite a simple layout, but perhaps too simple with only iconography.  I will research what the purposes of visiting the site are and then use those as the building blocks for the site. When you click on the passes, you are offered a list of the options;

Screen Shot 2016-02-19 at 08.57.37.png

Screen Shot 2016-02-19 at 09.40.44Screen Shot 2016-02-19 at 09.40.51Screen Shot 2016-02-19 at 09.40.58Screen Shot 2016-02-19 at 09.41.07Screen Shot 2016-02-19 at 09.41.15

This could be made much simpler and easy to digest for the user.

Finally, one of the most important pages for the user is the lineup, In my opinion it is not very good doesn’t offer the user much information about the acts. Below is the screen that lists the lineup.

Screen Shot 2016-02-19 at 08.59.11.png

As you can see it isn’t very appealing and when you click on an artist you are then presented with the screen below;

Screen Shot 2016-02-19 at 08.59.18.png

 

References;

https://www.coachella.com