Friday, 19 April 2013

Twitter Music

Yesterday Twitter unveiled a new application which allows users to explore and discover new music and artists. The app, called #Music, is designed to give Twitter users ideas and recommendations based on the their twitter followers they have subscribed to. There is also links up with Spotify, ITunes and Rdio, which give the users an opportunity to 'tweet' about the music they're listening to and for followers to listen with them.

The design of the site is very visual, with segments broken up into each song/artist with their images and name of track. The use of black as a primary creates a stylish and slick interface, with users being drawn towards each image used. It is simple enough to find out the twitter account of an artist and to play the song preview off of ITunes, just by clicking on the image chosen.


One thing I did find was the lack of explanation of the site before I began using it. Although some may not find it essential, the purpose was not really explained. For example, I had to research into other articles to explain how to "tweet" what I was playing. I also think that it because this is a separate site to Twitter itself, it may suffer to get users logging on and using it as much as the actual social networking site.

Wednesday, 3 April 2013

10 Hottest Trends In Website Design (Creative Bloq)

http://www.creativebloq.com/web-design/trends-website-design-10121055

Hierachy of Content
Full Screen Imagery
Focus On Touch Screen
Grid Layouts
Minimal Content
Parallax Scrolling
Parallax Animation
Full Screen Marquees
Storytelling
Editorial Influence

The Handy Test

A unique test made into a website, where users can test how much they know about DIY.

I was drawn to this site as the simplicity use of block colours, typography and silhouetted images. The test is self explanatory, therefore any user can go onto the site and understand what to do exactly.



I found the small cartoons that were shown, made the site fun and exciting to play, rather than dull and uncolourful like most tests would be like. Most rollovers were great, with a simple change of colour or a slight movement notifying the user that they can click the object.



It could even be argued that this is a glorified slideshow, with some small buttons, which I feel is true. However the way the designer has engaged the user and used great colour, illustration and typography, the slide changes are not seen as old fashioned or boring. This is a great example of how a site can be produced in this way.

http://handytesten.usedtobe.no/ 

Flash VS Html

The site is a study/experiment to find out which is better, Flash or HTML, when it comes to games creation.

The interface itself is full of interaction, with a scroll - much like the Every Last Drop site - where information flys in and out of the screen when the user scrolls down the page.
The vivid design is based on the game's they have created, one in both Flash and HTML, which you are then able to play.

The interface throughout is easy on the eye, but also inspirational with small quirks that make the user enjoy the interaction.


Finally the findings and conclusion of the study are well shown, with each pro and con being weighed up on scales, which balance out accordingly. The information is also great for my knowledge, with it highlighting the differences of Flash and HTML well.


The conclusion at the end is not to take sides, but be resourceful with both, as they offer similar but also different options when using it in design.


Sunday, 17 March 2013

S4

Station Four had a much more corporate design to its interface, however this suited the business itself. Colours were used well, with bold colours being used to make titles or small graphics stand out from the mainly black and white composition.


It could be argued that navigation around the site is a bit confusing, however with the graphics used to show different pages being so cleanly designed with block colour and good rollovers, it doesn't irritate to much.





I was also drawn to the way facts and stats were shown in the site. Considering I will most likely have to show statistics in some way in my Flash Site, this was interesting and useful, giving an idea how you can make this information more visually engaging and enjoyable.



Yodabaz

A really interesting website, displaying the portfolios of an online designer. The background is a looped video, with a person in - obviously the designer himself. The video footage has a grunge feel to it too, which is a nice touch and is slightly blurred with colour.




The navigation is simple, with the home screen being the whole nav. Rollovers are tidy and the portfolio neatly designed. When clicking on the portfolio, the background movie becomes black and white, creating more vibrant colours from the work. When rolling over each piece, the rest then becomes duller, highlighting the chosen piece. Another great addition is when a piece of work is chosen, the rest of the projects fall away, which is really fun and interesting for users.


Overall, the transitions from pages are really strong, as well as the simplicity created throughout. For a designers webpage, the interface would really engaging and impress potential clients.

http://www.yodabaz.com/


Waterlife

Waterlife is a site designed to educate and inform the user about the last great supply of fresh water in the world. It is highly interactive, with great visual aesthetics and smooth transitions, as well as a load of well presented information.


Some of the pages run background videos which is somewhat unique. The home screen of water moving and changing light is very eye catching.




The user can either interact with the images to navigate their way through the site, or the thin bars at the bottom. When rolling over these bars, they ripple upwards, which is a nice visual effect rollover.


Transitions are great, with the images spreading once clicked on and other pages using creative ways to remove the information on the screen and show new information.

http://waterlife.nfb.ca/#/

Saturday, 16 March 2013

Western Themed Websites

My initial ideas for an Interactive Map that shows the levels of gun crime in each US state has gone down a Western Theme for the visuals. I do not want to be too stereotypical of cowboys and gun's etc, however I felt it necessary to check out some websites with iconography and designs of the same type.

Team Fannypack
Although this may be very Western themed, I like the visuals of having a vintage, retro newspaper as the basis of the site. The background is dark wood, and using wood in my visuals has been an idea of mine, with this showing it can work. The typography is perhaps a bit too varied and obvious in my opinion, however the site is a great idea of how to use the theme to create an interesiting site.




Cascade Brewery
A much cleaner take on a vintage look with a hint of western within. Again the edges and background use a dark wood texture and I liked the organisation of the images with rollovers. Because I am doing a rollover map, organisation of each rollover button will be necessary and an appropriate  clean, understandable rollover will need to be created for each. The typography is perhaps a bit to plain and thin for my liking, as I have visions of a thicker font - such as Rockwell.



Hillcrest Gun Shop
I have had an idea of creating a gun shop like background to go with this western theme, and despite its very crude nature, this website uses some visuals I'd like to use and obviously improve. The worn wood as a background and perhaps bullet holes relates a range and more importantly American gun shops. I am also looking into find visuals for having rifles hung on the back of the wall, as in a shop.



An idea of a background image








Jubes

A refreshing take on interactivity and navigation, Jubes provides a fun way to find out information about the sweet product. With a playful character in the centre of the screen, the user picks up the small cubes - which are essentially the sweets being advertised - and place them in the characters mouth. Each cube is a different part of the navigation, and as the character chews on the sweets we a directed to the chosen information.







 The sound effects are playful and the ability to change the background colour also interesting. This is not a serious site, however I was just interested in the uniqueness of the interface - as many others would be. As an advertising quirk for the product I feel it is great, and certainly needed a mention in my research into different interfaces for my projects.






Despite the small size of the actual site, I find it different from conventional sites - therefore another quirk of the design that is fun. The background around it is not just plain white, but a grid, which makes it not as boring.

http://www.juicycubes.com/main.htm

The Bullitt Agency

The Bullitt Agency is a website of a DJ agency, allowing users to browse the top international DJ's they have to offer. Users can find out recent news, about nearby events, book DJ's or check out their blogs. I found this site highly interactive and well built, with the black and white design having continuity throughout.

I enjoyed the mix of mouse interaction and keyboard interaction. You were able to scroll using the arrow keys through a parallax, and then scroll up and down to see the different stories on that part of the navigation. When on the artists page, the site was set up as a large page, with the user being able to explore artists by moving the mouse around the page. All of the images were neat and cleanly organised, with rollovers being a simple coloured box coming up at the bottom of the image.

I think what was really noticeable from this site was the clean and fresh look of the site as a whole. The interaction was sometimes confusing, however the neat look of the site was really appealing - especially to the target audience in my opinion. I think I will take this idea of creating a site that is not harsh or crude, but is somewhat corporate but fun at the same time.




This will be essential for the brief, as it states the interface should be clear and educational for older, more mature users.




http://thebullittagency.com/

Wednesday, 13 March 2013

Interactive Maps

http://www.theatlantic.com/misc/global-report-card/

This site is an idea of what I wanted to create for my project. Obviously this a simplified version, however the concept is still the same. The map of the US is split into its states, and the user can interact and click on the state they want to find facts about. The rollovers are just changes in colour, with the state name highlighted. This is something to build on and improve for my Flash site - especially the visual aesthetics.

There is a button to give users help on how to use the map, possibly something I could look into.





Slavery Footprint

The site is putting across a serious message, in a somewhat playful manner. It is engaging, as it needs the user to read all text about what is actually happening in the world.




As you scroll, small bits of information are put onto the screen by hands - perhaps to show that other people are doing things for you. Other bits have imagery related to the information or a pulled onto screen in another playful way. 


The end of the site - when you reach the bottom - you are asked to take a survey. It is obvious most people would, as they have just scrolled through and read some perhaps shocking information, and would want to do as much as they can to help.





There is also great little slides of how this charity came about and how we have the power to change this - all accompanied by cartoon animations and pictures.