The below images are the developments of the tour pages which are the main focus of the web app, before designing begun on these pages I referenced back to wireframes and made a few minor changes to make the tour pages flow with archive page style. A stripped back style is required to present the content in bitesize form but remain engaging and this achieved through imagery and user interface navigation.
Above is the opening page of the tour, this is where the user will be able to see all thats on at the Baltic during the visit. Again the white circles are used to maximise space, the images will be on a quick rotation to allow the user to see the name of the specific exhibition. I used 30px uppercase Din for the name of the artist and 15px lowercase Helvetica Neue for the exhibition title, I applied a 50% opacity box over the image to allow user to be more focused on the text and not the image. From this page the user can select an image or text to allow them to enter the next page which is catered around the specific exhibition.
The design of the page to the left is beneficial to the user because it provides an insight into the exhibition before the user decides to take a digital tour, the information provided is the location of the exhibition as well as a more condensed version of the exhibition description unlike the vinyl lettering you'd expect to see on the wall of the Baltic. A summary of the exhibition is set in Din to quickly inform, then the user has the option of starting the tour to the bottom left hand side. Having a large gap between the type at the top and the icon is to make it clear for the user. The type is situated inside a shadow box to help distinguish content but it also aesthetically looks nice with a low opacity image which sits above. The page to the right is the first page of the page and in this case for the 'Monica Bonvicini' exhibition, the first page gives a background of the artist so the visitor learns a little bit of context of her work. The social media icon is introduced on this page so the user can tweet, post and share what they are up to with friends via Instagram, Facebook and Twitter. This is beneficial for the Baltic because firstly it promotes the web app and will open the door for more people to know about the Baltic via social media.
The scroll navigational bar is introduced so the tour can flow at the users pace, I designed the navigational bar so it remains simple and easy to understand. Using only blue and grey from the colour palette I constructed the bar from three shapes, the circle informs the user of how far they are progressing through the tour, for user experience the user has to swipe / scroll the circle along to move through pages.
As the tour progresses the content becomes catered around the exhibition itself and less the artist, videos are involved to break the content up and its helps introduce audio in the Baltic. The play icon indicates that the box is a video with the timing being below, stating the time of the video. Images that will be used in the tour, will aim to isolate the artwork and aim to show it a different way, as seen to the right I have placed a piece of art from the exhibition. These pages remain basic, not aiming to distract the user from the actual exhibition itself, the colours are subtly used along with placement of imagery. If the layout was crowded it would deter the user to engage with the web app I believe.
Again simple layout of type is used in both pages here, the first to the left talks about the work in context and the right is a quote from an interview from the artist which is available through the tour. The simple and clear interface design is key to ensure the user experience is quick and efficient. The simple colour palette, typography and icons help create a user interface that is easy to use which is evident on the pages above. I aimed to make each page individual too, with the designs being consistent yet each having a discrete characteristic.
Above is where you can see the the social media option in full swing, I designed a different drop down menu to the home one for the social media button. This one is simply a box with the social media icons on show with type, the user selects which social media they'd like to use then the option to connect to Instagram in this case pops up. Instagram would then open up within the web app, with all content relating to the exhibition on show. To the right I have shown what the user may decide to use the social media icon for, to post an image of the artwork.
No comments:
Post a Comment