moodboard // art direction

In this application, I hope to emphasize more on the images(photos) and also the important navigation buttons. Therefore I have planned to have a simple and plain yet interesting art direction for my application that I will be creating.

From the research that I have done, I also realised that in order to create a desktop application that is being used for a long period, the colour palette must be narrow and also try to avoid using too many complicated design elements which will distract users' attention. I noticed that most of the desktop applications are using white/grey/silver as the background colour and little colours are being used. Striking/bright colours such as blue, red, yellow and orange are used around 20% of the entire interface. Those colours are also not being used together within the interface of the application.

Below are two examples that showcase images with a plain background. Users will automatically pay their attention to the images itself.

So I have decided to use a plain background to bring out the images more. There are few examples that how my interface going to be like:

source: http://www.veryownstudio.com/Richard_Goodall_Gallery.html

http://success.livebooks.com/success-stories-small-business/gallery/rose-gallery-645.html

http://blog.simon-larbalestier.co.uk/addenda/domain-website-galleries-updated/

http://www.10yearsintype.com/#!stories

http://madeinhaus.com/project/deception-movie/

Colour

I have decided to use a color palette that contains of a dominant colour - red.
And as background I am using grey/white. so the colour palette will be:

-The light grey on the extreme left is used for background

-Black colour on the extreme right will be used for text.

-The red colour will be used as the main colour of the interface.




Design Element
There will be not much design elements in my interface as I don't want the users get distracted by other things while navigating. Therefore, the only design element that used in the interface will be the navigation buttons. And here are some examples that show the buttons are going to look like:

basically, there are gradient applied on to the buttons. Deboss and Emboss effect are also applied on to the buttons so that the buttons would not look flat and boring. There is also drop shadow being applied on the buttons that make it looks likes it is popping up. 

source: http://feedgrids.com/originals/post/freebie_modern_web_ui_set/

http://www.freebiepixels.com/resources/simple-ui-set-free-psd-2/

Overall moodboard:

Sketches

rough sketches of layout of Picshare application. 

•  photo sharing site    photos feed
•  photo details section

• initial sketches 

• details sketches 

Digital sketch with annotations:

Use Case Diagram

I have done use case diagrams for my application to show the user experience and the key features of my app.

click on the image below to view the larger version. 

or click on the link below to view the PDF file: 
https://dl.dropbox.com/u/23409639/ucd.pdf

Brief description of flow diagram:
1. user logs in to accounts (Instagram/pinterest/tumblr, or all of them)
2. user chooses photo sharing sites to view photos
3. user shares photo and chooses the destination to share the photo.
4. user go back to photos feed and view the photos
5. user chooses and collect the photo they like either from instagram, pinterest, tumblr (as long as they have logged in)
6. user add label and save the photo to their collection
7. after collecting, user can choose to go back to view photos, to share photos or continue collecting photos.

this flow diagram basically shows the user experience where they can view, share and collect photo.

Change of Idea

My previous idea was to create an application for Instagram in Desktop version. But now I have decided to add some other features and improve the whole idea and concept of the desktop application. My idea was inspired by Tumblr and Twitter where they allow users to "reblog" and "retweet" which means users can re-post what other users have uploaded in that platforms. The purpose of doing "reblog" is to share other peoples' videos, links, photos, thoughts and many others to more and more people. This process emphasizes on: Sharing. Now Internet is widely used by many people for sharing purposes such as social media: Facebook, Twitter, etc..., where users can share their status, their activities to friends or family and even friends of friends.

This inspiration leads me to rethink my idea of the application. I was wondering why Instagram does not have the re-post feature where user can re-post other peoples' photos. I was thinking the reason of not having this feature is due to the copyright problem. People could just used other pictures and claimed it as his/hers. Therefore, I have came out with a solution which is: state the name and source of the original users in the caption of the photo by not allowing people to change or edit things to it. This solution could help to solve copyright problem where people will see the original source of the photo that posted. Beside, a "re-post" icon will be displayed and located on the photo itself to show people that it is actually grabbed from other people's photo to solve copyright conflict.

The purpose of doing "re-post" picture in Instagram is to allow users to share photos that they like to their friends. For example, I saw a beautiful/meaningful picture by this particular user and I wanted to share it to my other friends(where they are not the friends of the user). The fastest way to do this is to have a re-post function where I can easily share this to other friends WITH copyright of the user.

Apart from this, my idea of creating the application is to allow users to have plenty photo sources where they can view and share it to any platform they want. Therefore, I have decided to use a few photo sharing sites /app in my application (prototype purpose) which are Pinterest, Tumblr and Instagram. The idea was also inspired by Tweetdeck which I have posted earlier on where it can manage users' different accounts at the same time.

Desktop application Interface design Example

I have found a several desktop applications interface design. Those are the examples of sovereign posture (one of the desktop application categories) 

Caldera Interface Design

iTune's Interface Design

Skype Interface Design

Paint Interface Design

I have also found that the layout of these interfaces are similar which most of the navigation bar/buttons is on the left side of the window. 

Beside, the navigation bar also appeared on the top of the window in the interface design. These interfaces achieve balance as the right/middle side of the window used up most of the space and it is the content of the application where user is navigating it with a long time of period. 

iTunes, Skype and Paint interface appeared to be simple and clean as well as visually eye pleasing. It does not complicate the users while navigating the application and also there aren't much distraction in the interface design. The interfaces use icons and the color palette is kind of narrow which fits what the book has mentioned. 

Decision Making

Key concept: Viewing, Sharing and Collecting
This concept is inspired by a music player, it is a desktop application where users are free to search for music and download it to the application. Users can also play the music they have downloaded using the desktop app even without internet connection (once they are completely downloaded). The music that have downloaded will be stored and users are allowed to customise their playlist. 

Idea: Create an application (desktop) that able to manage few photo sharing accounts such as Instagram, Pinterest and Tumblr at one time and allows users to view and share photos.

Key features:

• re-post other users' photos from any photo sharing sites. 
• collect (save) favourite photos from any photo sharing sites. 

Function of the app: 

Users are able to log in to different photo sharing sites to view their photos feed using the application at one time. They will also able to view photos from the popular page and share photos to their own account. Users are also allowed to comment and like the particular photo they like by using the application once they logged in as the data from the photo sharing sites will then synced to the application itself. The application will also receive latest update by the other users in real time. 

Users are allowed to re-share the photo they like by selecting the platform. They can either choose to re-share to the same site or share to other photo sharing sites that they have logged in earlier. Users will then allowed to adjust the size of the photo according to their preference and add a caption to it. 

Besides, users are also allowed to collect the picture they like from the photos feed or popular page of the photo sharing site. They will then required to key in label for that photo. The photo that collected is stored in a collection folder where it contains different sub folders which named by the labels that they have entered earlier. Pictures will be grouped according to the labels they have entered so that they can easily find it. 

Specifications:

The desktop application will be 1100 x 690 pixel and it is compatible with windows users only (due to the limitation of time). 

The interface that is created will be only emphasize on the user experience which is:

- able to view photos once log in 

- able to share photos to other sites/ or same site

- able to collect photos to their collection

Name of the application:
The name of the app will be - Picshare
As "Picshare" sounds like the homophonic of "Picture"
Pic - stands for picture
Share - represents photo sharing 

and the 'C' within the "pic" stands for collection.

Basically, the meaning of the title is: picture collecting and sharing. 

Research on photo sharing

From a survey done by AYTM, shows that 31% of people said they don't share personal photos online and 44% said they do share but not often while 22% of them say they share photos fairly often and 3% said they share photos online everyday. After calculation, this shows that total of 69% of people actually do share photos. 

Of those respondents who share photo online, 22% of them said most of the photo they share are taken with cell phones, while 39% of them said they sometimes share using cellphones but sometimes not, and 40% said they never share cell phone photos. After calculation, there is more or less total of 75% of people actually don't share photos using cellphones. This shows that people actually share photos from other sources more than using a cellphone to take picture and upload. They probably share it when they browse through certain web pages or from other people's posts.

There are also 72.5% of the respondents said that they do not have any photo sharing app on their phones (or other mobile devices) such as Instagram. This also shows that they do share photos, but not using an application through mobile as most of them do not own any.

Beside, regardless whether or not they share photos online, there are 64% of them said they do enjoy when other people share photos online. This shows people are likely to see what other people have posted and they enjoy viewing them especially photos that are eye-attractive and that's also the reason why many people enjoy using Tumblr as it allows users to view and share the picture they want.


source: http://aytm.com/blog/daily-survey-results/instagram-survey/