OUGD504
This brief ‘Design for Screen’ is extremely open it is up to us as the designer to identify a problem and create an effective, researched and developed solution to this problem. Design for screen in this format is something totally new to my practice and initially really exciting to see what kind of work to possibly produce. Galleries and Museums branding, layout design and culture is an area that lies within my interests in graphics exploring this will hopefully make this project as engaging as possible.
Samuel Harpin
Design for Screen
Studio Brief 02
Like any brief in graphic design it all starts with a problem. My problem was something that had been bugging me for a while and this brief gave me an excellent opportunity to explore it. The problem is with the lack of opportunities for new and existing art lovers to see what kind of galleries and museums are on offer around them as well as what they have going on. Things like google maps really doesn’t cut it there are no real options and the content is limited, and where do independent galleries fit within this? The arts is supposedly for the people but it seems to be inaccessible and uninviting. My proposed idea is an app that shows what is on in a specific area, how to get there, reviews from previous visitors, photos linked from Instagram and so on. The overarching theme is to make these galleries and museums more accessible, I personally have found especially with a mega-city like London the choice is not shown effectively and I have at times missed shows I want to see just because I have not been aware.
OUGD504 Google, when simply searching top galleries in London this drop down menu comes up. In terms of the collection all are regarded as some of the ‘best’ but the only information we are presented with is the name, location (London) and a photograph of the building. This for a newcomer to London or the arts is not enough information.
When asking my peers how they might go about finding what is on in the art world, a popular suggestion is Time Out.This website & app is one of the most popular systems for finding what is on in a specific city. The first thing to point out is that it is very unrefined and gives a very large overview, for art specifically the user must go through a series of clicks and scrolling to find what they are looking for. When the think they have found what they are looking for I found that most of the galleries or museums and the typical and most popular examples, these it seems have paid for more publicity on the site. There is no availability to look at any independent or smaller galleries. The section bellow of What to do in London - today, this week, this weekend, this month is again pretty limited and shows more of an overview based again on the most popular searches. This theme of using days, weeks and months is something that can be done to heighten the use of user experience. Tate In terms of a search tool, the Tate website’s user interface was easy to navigate and the design fit the target audience. When loading up the Tate website we are shown at the top three options
Studio Brief 02
Samuel Harpin
Using London as an example this image shows what options there are when typing in 'London' in the search followed by 'Galleries'. The options are very limited, showing the results relating to the keyword 'gallery'. The locations of each gallery is clear but information on what's on, what kind of art these kind of things. This is in essence my problem, Google Maps doesn't offer what I am looking for and nothing else really does.
net connection, this is a design feature that really sets apart this app from other Mapping devices.
City Mapper is an app for navigating a city, this is an example of good user interface, though it takes a few minutes to adjust to the app is easy to use and works with a lot of content. The first page the user is presented with, shown on the left. There are five initial options just below the map, Saved, Bus, Bike, Tube and Rail. This much like the Tate websites narrows the search right away to best identify the needs of the user. Under the ‘Get Me Somewhere’ section the user is able to type a location an address, or a placename and the app will show suggested routes for this location. A useful aspect of the City Mapper app is that the map can be used and will move even without inter-
Design for Screen
The app features this easy to use and well designed timetable showing what is on when. A calendar or timetable is vital to my app so seeing what has worked well is useful. The images have been displayed in threes this is rule of third is apparent in loads of visual communication. The thirds displays the images at a good enough size to seen but is not too overpowering.
OUGD504 Apple being one of the leading brands the world for user interface, experience and all round design ideas these guidelines found on the apple website offer a mass of really useful information in terms of what to do and what not to do, these guidelines are for developers and designers to create apps for the apps store that fit inline with the rest of the Apple products. Three themes are highlighted that try to differentiate IOS from other platforms. These themes could be considered to ensures the Art Map competes with the other apps out there. Clarity (focus on functionality motivates the design, interface elements subtly highlight important content and convey interactivity)
Depth (Distinct visual layers and hierarchy, discoverability heighten delight, transitions provide a sense of depth as you navigate through content) Wire-framing - At this point it after researching into my problem, analysing what must be included and beginning to look at the hierarchy of information. These three prompts seemed an effective way of finding out what the user is really searching for and stream lining the information that is on show. Using the wire framing techniques that Erik Spiekermann suggested printing out the moblie phones and drawing directly onto them to gain an understanding of size and scale. This image of my site map informed my initial wireframes. Using three different sections allows the user to know exactly where they are in the app, as well as where to find the information they need. These three images represent ‘Explore, Home and Profile. These three sections become the basis for the rest of the design, this way of breaking up information is a design technique seen in many app designs like Instagram and Snapchat. Vertical swipes are often the way to navigate across these three sections. The three images above show other screen that will be needed for the home section including, further detail on a exhibition, an option to see whats on via
Design for Screen
These images show the use of calendar, this was highlighted in my feedback as an important part of the profile, the users want to be able to see adjust and personalise there calendar related to their own interests and galleries. These wireframes are a useful starting point for this project and will need to be developed and built on through the design process.
Studio Brief 02
Samuel Harpin
Deference (Fluid motion, help users understand content while never competing with it, minimal use of gradients and drops shadows keep the interface light and airy, while ensuring that content is paramount)
the map view. These loose sketches will inform my further designing. Creating wire-framing has allowed me to see how the scale of certain information will effect the overall communication of the apps content.
OUGD504 This talk from Erik Spiekermann on designing for screen, his ways of working and what he might consider to be good practice for digital design. The first project that Spiekermann runs through is the redesign of the Redbull Music app. This image is of the app before the redesign, the style, layout, icons all resemble a standard apple app. Spiekermann explains that using typography an app can be completely branded. As small screen sizes means logos must be show small this branding through typography insures the user that they know what they are looking at. Alongside this type the use of a red colour for type keeps this constant branding throughout, using singular colours insure consistency throughout the imagery. Spiekermann also explained these typefaces translate across every range of platform.
Samuel Harpin
Here they have taken a simple illustration from the first drawings and taken the idea into more developed drawings, it is great to see the process of app design explained. These small drawings are then taken forward into a more finalised design. The choice of green Spiekermann explains is because green apps are not as common and that reds and blues are normally favoured. This page also shows the consideration of the sizes of the app and insuring that the communication is the same across a range of sizes and pixels. This shows the final app icon on show. and how it stands out from the rest on screen. Within the app they have designed another custom typeface that is loosely based on the typewriter font, Spiekermann explains that the younger generation seems to identify with the typewriter font but would have no idea where it comes from. This typeface shows the content in a social media context just through type. Spiekermann explained that when it comes to drawing out wire-framing that printing out paper phones allows really quick wire-framing drawings at real scale without having to draw a phone each time. Spiekermann is a real spokesperson of good practice concerning clarity, hierarchy of information and typeface appropriation in terms of design on screen.
Design for Screen
Studio Brief 02
Typography as branding is something that I had never really considered. This method allow an app to be a really small file size that can be opened on any device. This project is for an app called ScreenFeeder bringing all social media imput together into a singular place, Spiekermann explains that they were given almost total creative freedom with the project and even the name of the app they came up with.
OUGD504 Type on Screen, Ellen Lupton. This book offers a very comprehensive guide to type and design on screen, as it is published in 2014 the content is fairly up to date and totally appropriate to this project of design for screen. The book outlines the fundamental processes and ideas of working on screen and what to avoid. Overall this book has become a bible for this project and every page give more and more information on this process. Designing on screen is fundamental within contemporary graphic design and vital to understand and master these processes. Museo Slab, this typeface seems to score high on the rating chart and is a friendly but clear typeface, the ‘Museo’ name relates interestingly to my project and could possibly be a possible display and heading typeface for my Art Map. The fact it is designed as a screen font means its clarity is translatable across a range of platforms and formats. Even though it is early stages this typeface is a real candidate for use in this brief. Fonts on Screen
Wireframes - a way of understanding and planning content. Icons and Logotypes
Design for Screen
Studio Brief 02
Samuel Harpin
Text on Screen
OUGD504 Site-maps can be used to plan navigation through apps and websites, these two images above show my ideas in a site map so far. Breaking down the initial questions to What? Where? and When? allow the app to gain the information it and the user needs right away this then dictates the rest of the app. The main three screens, HOME, EXPLORE and PROFILE splits the information into clear and different sections. Displaying these three sections as icons that remain all the time at the top or bottom of the app will allow constant navigation. After these three options the information is in lists to show the other content that is fundamental to the app. Creating a more refined site map may prove useful further through this project to ensure the communication and navigation is clear.
Samuel Harpin
Studio Brief 02
Design for Screen
OUGD504
Samuel Harpin
Studio Brief 02
Design for Screen
OUGD504
Samuel Harpin
Studio Brief 02
Design for Screen