Tuesday, January 3, 2017

OUGD504 - Design for Screen - Ux App screen shots

The adobe Ux software allows the designer to make a working app with live buttons. In terms of understanding a user experience and its realation to an apps design this software has been very useful in the design process. 

As I had previously used Indesign to design my initial app I had to transfer the designs into Ux. This proved a useful process, starting from scratch allowed me to strip the app down the the fundamentals and insure the designs felt more light and airy to allow the content of the exhibitions to be at the forefront. This has been achieved using more even spacing and thinner type styles. 

The first page above shows the apps the What? Where? and When? sections. This section aims to allow new users or existing users that don't have much knowledge of what it is they want to see to customise their search based on there interests. The changes from the initial app include the back button at the top left hand side of the page. This button allows navigation to the previous page throughout the app. The search bar has been design so that it can be clicked on at anytime in the app so the user can always be more specific about what they are searching for. 


The design feature of using three distinctive sections allows easy navigation throughout and ensures the user knows exsactly where they are at any time. These images above show the Home section. This section is features all the main content of the app and based on the initial search prompts allows the viewer to see exactly what they want to see in relation to where they are.

The design again has been made to be more clear and airy to allow the content to be the central communication. 
The new home section also includes a purchase tickets section  for buying tickets in app, this is a feature highlighted in my feedback as an important part of the app.



These two images show the differences in the old and new designs. The space has been utilised much more effectively and the content is clear. The search prompts are shown at top of the page to ensure the user knows what they are looking at. The Ux program allows the app to be seen actual size this allow me as the designer to see how the information can be read. The options bellow the map show the different ways of seeing what is on, a list view, multi image view and a large image view. This allows the user to decide how they browse what is on. 

 Another new feature is the Add to map, Save a Date and Buy tickets sections along side there icons. These three buttons where explained through my critique feedback as being important for the app.































The designs for the icons needed to work with and without explanation as at times in the app they will be shown like this on the left. 

























 













To ensure the communication of these icons was communicating effectively I used the website 'the noun project' and search for Add to map, add to calendar and buy tickets. This allowed me to see the most common interpretations of icons for these things. My designs then had to fit with the design style of the rest of the app and communicate the same thing as the written words.


 The Profile section of the app is very similar to the Indesign document. The Ux allowed me to make working buttons like the weekly daily and monthly views. Using different weights of typeface allows the user to subtly understand what section they are on. As well the inclusion of purchase pages the profile section includes a my tickets section with bar codes for scanning.

Once again the design has been changed to be more simple and light as well as remaining consistent to the rest of the apps design. 


These images show the Explore section, as this section will be constantly changing relative to where the user is using the app as well as the changing daily and weekly. 

When showing the app to members of my family they thought that it would be useful to show the images large almost full screen that could be swiped through to gain an better understanding of what the exhibitions have to offer. 



Throughout the app I had to include a second page for when the search button is clicked on. Every page has the same design for the search and all the links to the various sections are all working. 


This image shows the amount of pages that is needed to show the app working as well as ever page replicated with the search bar activated. 
























Linking the apps buttons is something that is vital when using Ux so the app works smoothly when tested. These three images show the connections with the three main sections Home, Explore and Profile. Throughout creating this Ux app I screen recorded the app in use to document the progress so far and ensure it all works. 

No comments:

Post a Comment