Interfacespace

Alternate Link

Wed, 30 May 2012 01:03:14 +1000

Alternate Link:

In case of my original link failing, here is a backup.

I promise it works!

Wed, 30 May 2012 00:57:02 +1000

I promise it works!

Final Mashup Link

Wed, 30 May 2012 00:47:00 +1000

Final Mashup Link:

Here is the final submission link to my corgi mashup.

Reflection:

This unit has opened my eyes to the power of APIs. Whilst my mashup is a light- hearted one, I have learnt that they are capable of very interesting things. The other student examples such as Fuel Hub are really a testament to that. I believe I have styled my page in accordance to what I set out to. It’s playful and bright aesthetic is something I think I have achieved through a pastal colour palate and rounded typefaces. This mashup utilises a Youtube developer key to help stabilise the Yahoo Pipes used. With further refinement, I believe the American Horror Corgi mashup could be of great use to the corgi-less around the world.

This.

Fri, 06 Apr 2012 18:31:41 +1000

This.

This mashup aims to aggregate the best corgi posts on the...

Wed, 04 Apr 2012 18:06:00 +1000

This mashup aims to aggregate the best corgi posts on the internet into one place. Users will click on the landing page to enter the site, from there they have a choice of four options to filter their data. Images, Video, Maps, or Twitter. Each of the different data sources will display a number of items for the user in a grid, allowing them to maximise their choice.

The style used for this site will incorporate retro typefaces, bright colours and minimilist icons. Resources and inspiration for this can be seen via this Tumblr.

Feedback:

My feedback was all positive. My classmates responded well to my idea and the layout choice of tabbed browsing. One suggestion included showing links to where users could buy the costumes featured on the site. This can easily be integrated onto the map page.

Cool Use of an API!

Sat, 31 Mar 2012 17:35:43 +1000

Cool Use of an API!

Use Case Scenario

Sat, 31 Mar 2012 16:38:11 +1000

Users will land at the splash page, faced with a gallery of cute corgis. The fetch button will allow users to enter the site.

From there, they have 5 options to view corgis in their respective media.

The image gallery displays photos in a grid, clicking one will maximise it. Uses can then “bury” it in their dogpile. A dogpile will save all their favourite posts into one location.

The about page will give background to the mashup and provide general information about the breed.

The video page will display funny or information videos about corgis and a slider will all allow users to scroll endlessly through the videos.

The twitter feed will display the top posts from twtter and the tag cloud lets users see the most popular trends regarding corgis.

Lastly, the map function will display various data on a map for users. This includes dog parks, pet supply stores, vets, groomers and trainers.

4 more quick layout ideas

Fri, 30 Mar 2012 21:52:00 +1000

4 more quick layout ideas

First 5min mockup of splash page for American Horror Corgi...

Fri, 30 Mar 2012 21:08:47 +1000

First 5min mockup of splash page for American Horror Corgi mashup.

wafflesthecorgi: He’s such an adrenaline junkie. Corgis are...

Fri, 30 Mar 2012 17:56:00 +1000

wafflesthecorgi:

He’s such an adrenaline junkie.

Corgis are the new black.

According to CNN, “Welsh corgis have taken the Internet by storm.”

Corgis are just about everywhere, so why not compile the best of the short-legged stumpy wonder all in one place. Flickr, Tumblr, Youtube, Pintrest, Reddit and Buzzfeed are just a few places corgis can be found shaking their little momos.

Not everyone that loves corgis can have a corgi. My idea proposes a haven for corgi-less lovers to congregate and enjoy all things corgis. A Twitter feed refreshing tweets about corgis, images and videos of the cutest and funniest bunny-butts, and a map to find a breeder near you.

If this idea is too narrow in its approach, I will provide broaden my horizons to all dogs and their human buddies. A mashup for dog owners, a map providing the locations of vets, pet stores, pet-friendly beaches, dog trainers, groomers, boarding kennels and shelters. Here users will use a selection of filters to narrow their search results.

I’m feeling confident that this mashup should have a vast selection of data to aggregate. Now onto the internets!

A3 Poster for Initial Analysis

Wed, 21 Mar 2012 20:13:24 +1000

A3 Poster for Initial Analysis

Bomb Girls Interactive Excellent use of HTML5! Very...

Mon, 19 Mar 2012 18:25:00 +1000

Bomb Girls Interactive

Excellent use of HTML5!

Very comprehensive and interesting use of scrolling.

Love the design and would certainly love to create something like this one day.

State of the Web

Mon, 19 Mar 2012 18:25:00 +1000

Pintrest - Online Scrapbook

Pintrest works as an online repository for users to store and organise links, images and blog posts from all over the web.

References

Pintrest.com

Times Article

Pintrest Infographic

We’re All Fans - Grammy’s Campaign

Despite being 2 years old, the website still hold relevance today. The site mashes up social media for recording artists and displays it in a visually aesthetic manner.

We’re All Fans

Hypebot Article

Rising Digital’s Critique

Universeries - Online TV Creator Reference

Utilising the best of HTML5 and Flash, this engaging site visualises a mutlitude of data within 3D space via the metaphor of the Universe.

Universeries

Dexigner Review

Premiere Review (Requires translation)

6 Features

Sat, 17 Mar 2012 10:53:00 +1000

1. Information Architecture

The way in which a website is structured is dependant on the content it needs to present, the context in which it is presented and the user who will use it. It is important that a website is ordered according to its aims. For instance, a government website presenting statistics will look very different to that of a social media site. The role of an Information Architect is to effectively design websites according to incorporate usability. The planning process in order to successfully achieve this is vital to the user’s experience. Without it, a website may be confusing users or driving traffic away from their site.

http://www.guardian.co.uk/help/insideguardian/2010/feb/02/what-is-information-architecture

http://www.webmonkey.com/2010/02/information_architecture_tutorial/

http://www.usabilityfirst.com/about-usability/information-architecture/

2. HTML5 and CSS3

New tags have been added to the HTML language, that are making it easier for designers to develop and design their websites. Semantic markup now includes tags for navigation, headers and footers. New media elements allows tag support for audio and video. The new ‘canvas’ tag allows for the creation of interactive graphics, broadening the possibilities for gaming and interface elements. New CSS3 features include embedded font support, ensuring that pages look the way there were intended regardless of the user’s installed fonts. Column support now allows elements to be divided into any number of columns with ease. A multitude of visual enhancements are now at the disposal of designers and include gradients, shadows, animations and transparency.

http://html5readiness.com/

http://www.dummies.com/how-to/content/notable-changes-in-html5.html

http://html5readiness.com/

3. Social Media Integration

The rise of social media in present years now influences how websites are designed. At the very least, users should be able to share this content via their social media accounts through icons or links. Other integration includes allowing users to log into a website via their Facebook instead of having to create another web account. By allowing users this simple integration, the website benefits from ‘word of mouth’ sharing. The nature of social media means posts can quickly turn viral in a matter of days. These real-time updates show a snapshot of how users are engaging with the site at anyone time.

http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/

http://webdesignledger.com/inspiration/55-examples-of-beautifully-integrated-social-media-links-in-web-design

4. Faceted Search

This is an important feature of the web today. As users are constantly overloaded with information, allowing the ability to filter can be a godsend. Users can quickly get access to the information they need without the clutter of irrelevant material crowding valuable screen-space. This rings true especially when on a mobile device, as screen size is limited. When designing pages, faceted search functions and filters should be located on the left, as user tests have found they can be overlooked when displayed on the right of a page. They must clearly be styled to ensure users can clearly see active filters and know how to disable them.

http://www.uie.com/articles/faceted_search/

http://webusability-blog.com/faceted-search-4-design-tips/

5. Real Time Data

Real time data has many applications for the modern web. In terms of online collaboration, having partners access to see changes made in real time brings a huge advantage to our time-poor society. It also further closes the gap for international partnerships. Mashable’s Bernard Moon imagines one such situation, “being able to make real-time changes with your colleague in another city and graphic designer at your local Kinko’s to finalize a presentation and print it hours before your meeting.” Real time analytics also be beneficial in decision making processes, by utilising HTML5 to display it, users can easily and efficiently access the most accurate and relevant data.

http://mashable.com/2009/10/29/real-time-web-trends/

http://www.smashingmagazine.com/2011/04/28/real-time-data-and-a-more-personalized-web/

6. Cloud Computing

The cloud is the technology that “allows customers to store data and access software or platforms through a third party-managed network”. For designers, all the powerful software and tools will be run in a simple web browser. All their resources, can be stored safely in the cloud, to be accessed from any computer. Websites are now mostly controlled by dynamic content, where they are updated via an administrative backend or user input. Coupled with the cloud, websites could be updated via a mobile application, accessing the necessary files.

http://speckyboy.com/2010/09/14/what-the-future-of-cloud-computing-means-for-web-designers/

http://speckyboy.com/2011/10/21/how-the-cloud-is-affecting-web-designers/

Exercise in learning Yahoo! Pipes

Thu, 15 Mar 2012 22:33:00 +1000

Working Pipe

Pipe Layout

Exercise in learning Yahoo! Pipes

Braindump

Tue, 13 Mar 2012 20:42:38 +1000

As a starting point for the Week 4 Initial Analysis, the following list is an attempt to recall features of a well designed interface I enjoy from the top of my head. Using the list as a spring board, I will research those that seem to have potential.

Interactivity - Options to share/upload user generated content/social media buttons
Search bar
Mobile optimised versions - Use of multitouch sensitive control, clarity on smaller screens
Loading times - Especially in regards to mobiles.
Organised content - Easily navigated/ordered/user-centric/clear and concise
User/Audience specific - Design features and aesthetics to appeal to a certain market
Consistency - All pages should look like a family ie eBay across the world follows a style
Intuitive design
Live data - Up to date and constantly refreshing

Example Mashups

Fri, 09 Mar 2012 13:35:12 +1000

This list compiles a few interesting mashups I have found via my initial research stage.

In order to create an impressive mashup for the final assessment piece, it is important to first understand their applicant and capabilities, as well as to find those that have already been successful. This will help to ensure my mashup will be inventive and not just a copy of one that has come before.

Know Where You Live

Crime Maps

Window Shop

Daily Depiction Exercise Here I have reduced 8 daily activities...

Fri, 09 Mar 2012 12:08:51 +1000

Daily Depiction Exercise

Here I have reduced 8 daily activities into brightly coloured icons. Having spent too long designing the icons, I didn’t leave enough time to focus organising them in a fashion that dictates hierarchy or a temporal pattern. I am happy with the result regardless because I have limited experience with Photoshop.