I’m Wearing This – App Design

Splash Screen

When developing the splash screen for the app, I utilised the logo icon design as a central image within the splash screen and applied the app icon colour gradient to its’ background. Alongside this, I placed the text ‘I’m Wearing This’ to the page and developed two separate designs with the font style Sans Serif in a variant of size and capitalisation.  The designs were developed to the iOS 10 iPhone GUI on Photoshop and it was constructed onto the white iPhone 7 smart object. I have chosen to utilise the second layout  design for the project, due to the text coming across clearly and being separated with extra padding from the logo.

Home Page

The Home page for the app consists of a large search bar which is situated at the top of the screen, a news feed of trending images of fashion represented by the consumer taken from Instagram, like buttons along with brief Instagram user profiles. Moreover, there is a navigation menu at the bottom of the screen with four individual icons. The navigation menu includes a home page icon (house), an explore  icon (magnifying glass),  a clothing search icon (hanger) and a user icon (silhouette of a person). The navigation menu is designed as a translucent blue bar which fits with the specified colour scheme and the icon images themselves were founded on thenounproject.com.

Explore Page

The Explore page incorporates two images on one corresponding line repeated vertically down the page. These images, are pulled from Instagram to the app through a variety of received and searched fashion related hash tags. When an image is tapped once, it will show the image title, relative tags, quantity of likes, like button as well as a share button. After tapping a second time, it will then take the user through to that specific image page. The search bar and navigation menu is designed and displayed as per the home page.

Clothing Search Page

The below image presents the user pathway once the user has selected (tapped) the hanger icon. The user is first presented with a screen of selection criteria which includes: categories, colours, occasions, seasons and trends. From there, once the user has tapped on a selection the selected field will blur and have a blue overlay effect on top. It will then take the user to the selected search and present the user with more selections of tags so the user can narrow their search further, this can be used through swiping to the left to reveal further tags and selected by tapping on a tag. Furthermore, the search tags will list images from Instagram which are contained within the specific search tags. Again a small user profile will be shown, a like button, the quantity of likes, a share button as well a user follow icon. Lastly, once the user has selected a particular image it will take you to the specific image page, which will display all the tags associated to that image conveying users information such as #topshop #playsuit.

hangerselection2

User Profile Page

The User Profile page will present the logged in users Instagram profile photo,  personal information taken from Instagram and a private information section which the user can fill in once in the app by clicking on edit profile at the top of the page. In edit mode the text will highlight and users will be able to edit the text and then tap the ‘done’ button to complete the edit.

userpage2

App Showcase

 

I’m Wearing This – Logo Design

In designing the logo for my app the key perception I wanted to portray was ‘I’m wearing this’ but as an image and icon. Thenounproject.com is a site which was utilised within the development as a resource for icon selection. On the site I looked at a variation of imagery including: dresses, shoes and hangers. After testing, I decided that the hanger icon worked best with the overall concept of the project and the addition of a snap like square overlaid on top of the hanger demonstrated the action of taking a photo/snapshot of a particular clothing outfit. This presents the idea of ‘I’m wearing this and here is a photo of me wearing it’, clothing presented by the consumer. Furthermore, in the design of the logo I configured the app icon to a assortment of sizes to exhibit the composition per dimension of device and each app icon was developed on Photoshop utilising the standardized icon template for Apple mobile. The icon itself, incorporates a blue gradient light to dark (top to bottom) corresponding to the specified project colour scheme.

app_logo_sizes

 

I’m Wearing This App

app_logo_iphoneapp_ios-7-10-60pt_3x

An online fashion outfit performance stage, the ‘I’m Wearing This’ app consists of an integrated Instagram API, which feeds live images to a page through selective search criteria. These clearly defined images vary across fashion brands and products bought by the customer and represented by the customer, through personally owned photography. Influential pieces which have informed the project include todayimwearing.com and Pinterest, the broader concept of todayimwearing is to be expanded to allow users to compare contrast and examine fashion much in the way that Pinterest allows users to collate content. However, while Pinterest allows the static comparison of content, ‘I’m Wearing This’ will pull categorised feeds from Instagram. Furthermore, in narrowing the user search, the considered utilisation of tags through genres (gothic, vintage) and emotions (angry, romantic, prim, demure) will be implemented.

The materials that will be used within the project that I don’t possess license to, include the hash tagged fashion Instagram images. These images are live on social media (Instagram) and my aim is to pull these images onto my site as a live feed direct from Instagram. Therefore, no ethical issues should arise, as I will be adhering to all Copyright and Protection laws.

Time Management

A Structured timeline will be adhered to throughout the project and updated on an ongoing basis for the duration of the project.

ganttchart1

Target Audience

Female gender, age groups  21-25, target profile self confident individuals, fashion led, have key interest in fashion blogs, financially secure with disposable income a frequent user of both her mobile and or laptop.

Desirable why?

Allows for the exploration of fashion through customer performance, previewing pieces of fashion that have been bought and styled by the consumer. I will modify my work to fit the target audience through style, colour design, contextualization of themes and genres in narrowing the user search.

Personal Evaluation – Project Management

In evaluating the project, the overall process of development from start to finish was organised, structured and always pre-planned. Our final outcome ‘Photo Book’ works efficiently and effectively with the incorporation of smooth interface interactions. These interactions include a varies of touch and swipe functions. Moreover, ‘Photo Book’ is seen to correspond extensively to the given brief, being designed as an element of an app and reflecting the graphics which have already been produced for the exhibition by RedBalloon.

With defining what was effective within the project, I believe that the communication infrastructure that was set up constituted to the collaboration and organisation of tasks which led to further idea development within the group. In addition, within the research and idea development stage I understand that we came up with a strong initial proposal and this derived a sufficient end product concept design. Personally, I consider that I myself was a firm team leader with the setting of individual tasks, organising group meetings and strongly within the idea generation stage. In my role, I was very much in charge of contacting the client, RedBalloon and raising group questions to the course lecturers. In addition, I myself set up the multiple contributor blog and the collaborative google drive which was used for the purposes of communication and assessment for the specific project brief. In relation to what wasn’t effective within the project, we had trouble initially in presenting our idea to the client and for them to fully understand the concept but by applying it to examples and giving graphic demonstrations this problem was resolved. Furthermore, with relation to my role I found it least effective when I wasn’t being critical in what was needed by each team member, so in tackling this problem I created a defined to do list for the blog posts which was uploaded onto the collaborative group as well as helping form an app content to do list in terms of the graphic designs.

In regards to future development opportunities, I propose to look into more customisable feature designs to expand the app further in terms of user interaction. With adding more customisable features such as different font styles it would allow the users to be creative and personalise their experiences to a greater level. Lastly, I propose to look into various different photo gallery layouts, to suggest further suitable structural designs, changing what is now a simple list design to an enhanced and structurally vivid feature.

Photo Book App Items

From the research gathered, I collated a list of 10 placeholder items for our Photo Book App. These were as follows:

1. Throwing down the Gauntlet
2. King John’s Taxes
3. Signing of the Visitors Book
4. The Magna Carta
5. Salisbury Cathedral
6. The Chapter House Frieze
7. The Prisoners of Conscience Window
8. Declaration of Human Rights
9. The Seal
10. Sword Play, Word Play

The placeholder items were chosen through the investigatory visit taken by Maria and Hayley and were collated through exploration of the research imagery. Each placeholder item is unique and corresponds to specific features within the Magna Carta Exhibition. In further production it was apparent for the placeholder items to include individual short informative summaries, in assembling this I emailed the client Seif El Rashidi and asked to be provided with descriptions for each placeholder. Continue reading Photo Book App Items

Meeting with RedBalloon

A meeting was arranged with RedBalloon regarding the style guidance as well as the communication process for the project. The communication process is in relation to us as designers and how we will be able to communicate to the client Salisbury Cathedral. In the meeting RedBalloon stated that a specific colour scheme was to be adopted throughout all app designs as well as a specific font style. This was due to the fact that other mediums have been produced for the Magna Carta exhibition and it is essential that all mediums reflect and correspond to each other. Below is the style guidance which has been given to us by RedBalloon :

Screen Shot 2015-03-11 at 16.03.401498985_714115462038286_4898698565897236910_o

As you can see there is a specific font style to be used as well as colour scheme. Moreover, with regards to the communication process of the project,  RedBalloon made it clear that there is unfortunately a slow communication process which is a key issue. For us to get feedback from the client we must go up the ladder from us as designers to the lecturers then to RedBalloon and then to Salisbury Cathedral. This is a key issue to be considered throughout the process in order to allow for effiency and to better understand the clients wants and needs.

Idea Development

My proposed app design idea for the ‘Applied Design’ live project involves the development of an app which stimulates users to want to take a selfie. The idea takes key inspiration from the interactive displays ‘Make a face’ and ‘Strike a pose’, exhibited at the Cleveland Museum of Art. Audiences are given a selection of photo imagery of paintings and or statues and are then asked to imitate the facial expressions and pose of the character portrayed in the image. The taken selfies will have the ability to be shared via social networking and or uploaded to a Magna #selfie library of content. Below are graphic representations of this proposed app design:

MagnaCartaAppMagnaCartaApp

The app design complies to the Magna Carta exhibition through its history and displays and responds to the given brief effectively. It is aimed at an audience of 13 years and above and is designed as a component of an App. The app is to respond to the design agencies style guidance and colour theme, which will be concluded at a further arranged meeting with Redballon. With relation to Continue reading Idea Development