OUGD503 - YCN - Royal Opera House Brief

Royal Opera House

Encourage culturally engaged young people to experience ballet for the first time. The idea has to work across digital, print, out of home and social media advertising.

The deadline for submissions is March 23rd 2017.

The Problem

'While some young people might attend the ballet once a year as a special occasion, we find that in some areas our audience is not as diverse as the population as a whole, and, in particular, young people are under-represented. We want to change this and engage and inspire more young people to be part of our audience if we are to ensure the long-term survival of ballet as an art form.

To quote The Royal Ballet’s founder, ‘Somebody must always be doing something new, or life would get very dull.’ We are always doing something new on stage and we want you to help us do something new off-stage to communicate it to young people.

The people we’re talking about for the purpose of this brief are those aged between 20 and 30 who already attend plays, gigs, and exhibitions, but who don’t consider ballet. Why? Because they simply think it isn’t for them.

We’d like you to show them that ballet as an art form isn’t what they think is it – and moreover that it is for them.'

The target audience currently think that:

• Ballet is old fashioned, filled with tutus, musically dry, stuffy, formal and traditional and not relevant to contemporary life
• Ballet is for the wealthy middle England and old people, not ‘people like me’
• You have to understand the language of choreography to understand or enjoy it
• There are certain accepted opinions about ballet, and open interpretation or appreciation of it is not welcome
• Ballet is just men in tights and ladies en pointe pretending they are in a fairy-tale
• Ballet is mainly for girls

IMMEDIATE RESEARCH

In order to gain a better understanding of this audience, I asked members of the year what their conceptions of ballet are in order to distinguish if/why they do/don't attend.

• 'Expensive'

Many of the people said that the ticket prices were too high to see the ballet. In order to confirm this, I researched into the ticket prices for the Royal Ballet. Using the Royal Opera House's website, I found that ticket prices ranged from as little as £10 all the way up to £270. This huge price gap is dependant on how whether the audience would like to see Opera or Ballet. Ballet prices are consistently lower than Opera, ranging from £10 - £190. A well known and iconic ballet performance such as The Nutcracker increases the price, however depending on where the audience wants to sit dramatically changes the price:

As the image above shows, sitting in the Amphitheatre costs from as little as £6 where as if they want to sit in a prime position in the Orchestra Stalls, the tickets range from £57 - £120. In order to appeal to a younger audience and encourage them to see the ballet, increasing their knowledge on the price of cheaper tickets will give them an opportunity to get a taste of white the live art form is like without breaking the bank.

Friday Rush

From the site I noticed that the user can buy tickets using the Friday rush scheme. I researched further into this scheme in order to expand my knowledge of The Royal Opera House's ticket system.

Every Friday at 1pm 49 Friday Rush tickets are made available to buy for each of the performances in the following week, from Saturday to the following Friday. Tickets are available for almost all Royal Opera and Royal Ballet performances on the main stage in the Covent Garden site, including any sold-out performances that fall within the week on sale. The best way to buy these tickets is via the Royal Opera House website.

Since young people are always online and using mobile devices to browse the web, this would be appropriate to look at because the tickets included in Friday Rush are in general at our lower price ranges, so offer a chance to buy cheaper tickets for in-demand performances.

Building an awareness of this ticket scheme will really encourage young people to buy tickets because they can be last minute, cheap and cheerful tickets. 

• 'Posh snobs'
• 'Old white people'

A lot of the people who I questioned were put off attending ballet performances because of the preconceptions perceived about the current audience. This is a problem because it seemed people were making these assumptions even though the openly admitted to not going to see a ballet. These derogatory terms could be used in the campaign to draw a younger audiences attention so that they are open to change their opinions. In my personal experience I have witnessed the older generation sgnarling at young people coming to see theatrical performances because they think it is just for them. This controversy needs to be abolished in order for young and old people to feel comfortable. 

• 'Not compatible with every day life'
• 'Lack of appropriation'

Someone said that ballet isn't compatible with their everyday life as they often put other interests and responsibilities first. It is clear that people aren't perceiving ballet as an art form and in fact it touches on themes and concerns that effect our lives daily such as love, hate, anger and frustration, etc. Perhaps integrating every day life with the art form will make others realise that ballet is a relevant art form for their lives, just as much as music and reading is to them. 

• 'Respect it'

A lot of people said they respect ballet but have no intention on going to see it. Perhaps looking into the dancers dedication and appropriating it into peoples lives will make them want to see the acts. 

I was surprised by how accurate the brief's interpretation of peoples views are as nearly 100% of people I asked said the same things as YCN's brief. The group of people were all aged 20 - 22 which is inside the target audience, this will come in useful as the project progresses as I have a large range of views and opinions in one room. 

What should be communicated instead:

• Ballet can be exciting and alive and a thrill to watch - it’s everything from graceful and beautiful to violent and passionate
• Ballets may have been created for the Royal Courts of Europe many, many years ago, but new ones are being created all the time – it’s a modern and energetic art form.
• Because it deals with the big human themes – life, love, death, loss, passion, joy, anger, humour – it’s relevant to everyone, and everyone can understand it
• Ballets can draw from a wide range of influences from fashion to literature and rock/pop music to full orchestral work. There are no rules.

OUGD504 - Module Evaluation

Throughout this module I was being introduced to new techniques and processes which I found challenging to balance with producing a professional solution. This was particularly evident in Studio Brief 02 because I had never designed for screen before and user interface was a new approach to me. However, I really enjoyed the experimental freedom that design for screen provides as my knowledge progressed. The After Effects and InDesign workshops were really influential as they helped me to prepare documents for publishing in print and on screen which will be valuable skills to take forward into the industry. Having the opportunity to tackle a digital brief has broadened my practice and I will consider producing both print and digital solutions in the future. My increased knowledge on the capabilities of design for screen made me realise how important it is to stay up to date with the evolution of digital graphics.

Considering the module was emphasised the importance of production methods, I experimented with various techniques and processes which influenced my outcomes and both outcomes for Studio Brief 01 and 02 use influences from both print and digital processes. My naivety towards design for screen was limiting my practice, now I feel confident in combining both print and digital solutions in order to encourage interactive features that immerse the audience.

My time management hasn't been evidenced, however I have produced thoroughly researched and considered solutions in time with the submission which comply with the briefs mandatory requirements. Having managed my time more objectively, my concepts could have evolved on a commercial scale. Considering industry standard techniques and promotion in the future will present my work in a professional format. I feel that I have let my work down due to how I have presented it on my design boards, especially for Studio Brief 01 because my images of my final resolution wouldn't be accepted on commercial sites.

In some respects I feel like I have over researched which has caused a divide in my concept development. In the future I aim to be more objective with my research so that it informs the concept, not just the production methods. Realising this now, I can improve my research and blogging techniques to make referring back to my research more efficient.

OUGD504 - Design for Screen - Evaluation

Project Evaluation

https://www.youtube.com/watch?v=D88RNEPCqbQ

This was the first time I approached a purely screen based solution which was an exciting opportunity and being introduced to commercial and professional considerations helped me to produce a site that could be realistically coded by a skilled developer. 

At the beginning of the brief, I struggled to come up with concepts that not only solved a problem but were also relevant for society. Only’s advice of ‘don’t produce an app for the sake of creating an app’ is something that stayed with me from the talk, so I aimed to be more objective. I found considering user interfaces that I experience and use every day such as ATMs, smart phones and websites made me realise that I had the potential to produce an improved outcome. Researching into the capabilties of digital media and web developers encouraged my solution to evolve into an experiential site because I had identified successful method of organising information in engaging ways. 

Crit sessions were really helpful for informing and moulding my solution into a considered outcome because I used them as an opportunity to make informed decisions. Choosing to redesign People of Print’s user interface was inspired by my research into design studio websites because of their seamless and tight site navigation and browsing tools that made each step of the site engaging and fun to use. I saw a lot of potential with People of Print’s site due to the already high quality content and articles., however the user interface really let the site down. Being a loyal user of the site since starting the course, I have discovered many artists, projects and studios that I have used as inspiration throughout numerous briefs so far. Therefor I was able to identify appropriate solutions to the site based on my own experience and asking fellow students on their experiences. 

Being introduced to Hover States really benefited my project because it exposed me to experimental and alternative user interfaces which were stimuating and inspiring the use. This ultimately increased my understanding of the limitations of design for screen, considering pixel quality and colour modes in order for the site to produce the desired outcome in the real world. The website also influence how I demonstrated the site by animating the mouse around the page. This has improved my After Effects skills which I intend to take forward and improve because it is a stimulating medium to promote digital content. 

My design inspiration was heavily influenced by my research into Studio Laucke Siebein and Mynameis because they were aiming to achieve a similar role and it introduced me to transparency layers and layered content. WDuring the production phase, my basic After Effects skills provided me with the ability to demonstrate the navigation and interactive features. During this process my AE skills improved, however I didn’t manage to produce a professional promotional video due to the lack of time. 

I originally proposed to make each page of the site consistent in layout, however I took an executive decision to be more experimental in order to stand out against oppostition such as It’s Nice That and the array of other design inspiration websites. Again, crit and feedback sessions gave me confidence to try new layouts which ended up making my solution more immersive.

If I had managed my time better, I woud have liked to have spent more time developing the Account page so that it is more desirable and useful. To achieve this, the page should suggest projects, provide a directory and encouraged the visitors to contribute to the site by submitting their work.  Having to research into the colour modes and limitations of print made me hesitant to start designing however after studying wireframes and sitemaps this allowed me to translate my ideas in a visual language that I could transfer onto screen. If I could improve on the solution, I would create the site so that it is responsive and works on a range of different platforms such as iPad, smart phone and TV. 

By taking advantage of the wide computer monitor screen, I was able to condense the menu so that there’s more room for the user to view the high impact images. Making the menu transparent also immerses the user in the content which is visually stimulating. Previously, this problem made viewing content frustrating as the user couldn’t see a complete image without having to zoom out or copy and paste it into a separate document. I have successfully solved this problem because the user can see full images as well as enlarge them to see more detail. This is important because the user can clearly see the tactile qualities and print finishes clearly. The smart and clean layout was inspired by Swiss design as well as Studio Lauke Siebien’s site. This is appropriate because the neutral Helvetica and white space makes reading the content easy even though text and image is layered. This was also successful because I managed to keep inside People of Print’s current brand guidelines by using the two typefaces they use - Helvetica and Georgia. I changed the pink and blue typography because,  although it was gender neutral and created a hierarchy, it made the copy hard to read, especially the pink text on white background. Therefor I kept all the text as black to increase legibility.

My website has its limitations which conclude to slow loading times due to the high pixel count for the large file images as well as the interactive features. This can also have a detrimental effect on what platforms the website can be viewed as old technology can not always display sites without JavaScript, etc. To overcome the slow loading times, the images can be translated into greyscale images until the user decides to view a project and the full high impact colour mode will be selected. By using greyscale images, the file size will be a lot smaller making the site quicker to load.

OUGD504 - Design for Print - Evaluation

During this module, I developed my understanding of editorial design through in-depth research and commercial considerations with a focus on production methods. During the design process I had to overcome conceptual, commercial and production problems which became apparent during crits, creating mock ups and appropriateness.

Due to the broad range of images, I found it challenging to create a concept that gave my publication a purpose and engaged a target audience. Reflecting on my work over the summer, I feel that I overworked the limited brief in preparation for returning to uni. This was a set back because once the entire brief was presented to me, my primary concepts weren't entirely appropriate for a commercial publication. To overcome this I presented my findings to a crit group, highlighting specific themes and concerns that I noticed once collating all of my images. I found these early crits and feedback sessions put my project back on track as I began to consider what would give my findings a commercial role. In the future I will make sure I am clear on what the brief is asking for, making sure I consider all variables before exploring one concept. 

My research into publication design was broad, offering a lot of inspiration for potential production techniques such as the size and binding methods. However, I found it challenging to find the most appropriate as it took me a long time to make a definitive decision on what I wanted my publication to communicate. In the future, I aim to focus more on researching into context as early as possible because my research into Bristol's culture, dialect and existing publications gave my publication more direction. I took a lot of influences from Bristol's diverse culture and forward thinking attitude which helped to inform the production of my publication, if I had done this earlier I could have focused more on the content of the publication. This knowledge helped to inform my production methods in order to reflect Bristol cities ethics and culture. Type consideration provided my solution with a juxtaposition of old and new style type for the title and body copy. This was effective decision making based on the themes and concerns I identified from my primary research.

My practical exploration has improved as I created a range of mockups which was useful for making informed design decisions based on printed media, rather than from screen. Physically manipulating the pages, sketching and note making is something that I will take forward into the next briefs as it allows me to problem solve effectively. I found the InDesign workshops really useful for preparing documents for commercial printing as I wasn't aware of these processes and as a result it allowed me to print my publication to a high standard. These skills are key for graphic design and I can transfer them into commercial printing, not just for publications. Some of the Illustrator and Photoshop skills that I have adopted will transfer really well into preparing documents for screen printing, as I now know how to separate CMYK colours and spot colours. Being introduced to spot colours was useful because it made me think about printing costs in the real world, I aim to consider using spot colours in order to make printing prices cheaper in the future.

My ability to problem solve practical issues such as printing my cover onto the greyboard encouraged me to try manual techniques and processes such as typesetting and debossing which are skills I can transfer into future projects. My understanding of print media and its limitations have given me confidence to approach professional and personal briefs which I look forward to. 

My final printed and bound publication was a success, however due to the pressure of the final print I managed to trim my pages unevenly so the creep is not consistent. Considering I have proved these skills in previous mockups, this was a frustrating and demotivating experience, however I can learn from these mistakes and move on. On reflection, I would have liked to have produced a newspaper format publication because of its tangible qualities and influence from all the free newspapers available around Bristol - Cheaper to produce and offered around Bristol for free

In the future, I aim to set my blog posts up so that they are easier to refer back to as I struggled to remember what specific research or content was in each blog post. This is reflected in my blog and outcome as it made organising and developing my content much harder than it needed to be. I didn't manage to professionally photograph my final outcome which doesn't do my publication justice on my blog/design boards, however I intend to follow this up in order to add it to my portfolio. 

OUGD504 - Design for Screen - Introductory Video

In order to encourage people to use the site as well as even pitch it to People of Print, I aim to produce a short video demonstrating the new features of the site:

Apple iPhone 6S TV AD

The narration over the top of the video is fast paced in order to keep up with the high energy and quick changes of the interface. This, along with the music, keeps the audiences attention as they are constantly stimulated by high impact shots of the phone and its famous intuitive user interface. The advert demonstrates the new interface using real subjects. This makes the advert familiar to current iPhone generation owners so that they aspire to get the new and updated version. Seeing the people interacting with the new and improved features demonstrates how simple and compatible the phone is in real life, also increasing desire. 

As my solution is a web page that will be viewed using a website, I looked into ways other websites demonstrate there user interface. To achieve this I discovered a site called Hover Stats:

Hover Stats

Hover States is an industry-leading blog showcasing the best in alternative digital design.

Here is a demonstration of how the site engages the user and introduces them to the conceptual sites in an engaging way:

The site automatically begins to play the most recently added webpage using either a curser or a circle to represent the mouse moving around the screen. In a similar way to how I have screen recorded websites for my research. The videos show how the site works by demonstrating the interactive features and links. This is more appropriate for my solution as it is a web page that will be predominantly viewed on a computer screen. Using the mouse as if it was an actual user puts the site into better context which makes the site easier to interpret for a new user. 

Using After Effects, I introduced this technique to demonstrate moving from page to page and also the interactive elements and put them all into one video:

Stage 1: Introduction

Introducing the new People of Print logo and account symbol at the start draws the audiences attention due to the high contrast colours and white space:

Stage 2: Home Page

Showing how the user can interact with the images in order to find out the project title and name so that they can click for more information.

Enlarging the mouse when it clicks confirms the page interaction with the audience watching the video. 

Stage 3: Viewing a project

Demonstrates how viewing a project using a new layer can make the content more engaging and easy to refer back to the previous page. The page composition is exactly the same when viewing any project therefor I have only demonstrated this once.

Stage 4: Adding project to Library

Introduces the stamp tool in order to add projects to the personal library:

This will also introduce the ability for the user to easily follow the designer on social media. 

Stage 5: Viewing personalised Library

Interactive typography presents a familiar image of the article so that the user can recognise the project associated with the name:

Stage 6: Suggested articles

Also demonstrates adding an article to your library using the stamp tool. 

Stage 7: Categories

Stage 8: Viewing a category 

Interactive images with layered typography

Stage 9: Techniques and Processes

Stage 9: Viewing a 'Technique and Process'

Interactive image presents the title/designers name once the mouse is on the object:

Stage 10: Returning back to original page by simply clicking off the layer:

Uses an enlarged mouse to animate the interaction.

Displaying my solution using this method gives the client a better understanding of how the site map works as well as introducing the new interactive features and account. 

Placed my website into Google Chrome as from previous feedback and research I identified this as the most popular web browser:

Seeing my solution in the context of a web browser makes it look more official. I am pleased by how well the site fits on the screen size, compared to the original site:

OUGD504 - Design for Screen - Development - About/Contact

Previously identified that the current page composition needs changing because the hierarchy of the information wasn't objective.

• Swap the location details with the body copy so that the user can immediately find out about the website and what they aim to achieve
• Contact information
• Move the map down so it doesn't obtrude the scroll
• Directory

Sketched out a rough layout:

Still taking advantage of the width of the screen, I presented the information using a half drop so that I could change the size of the images depending on their importance.

I decided it would be more appropriate to produce a formal page composition as the information will be relied upon in an official context:

This solution is an improvement over the previous site because it immerses the user in print media as allowing the user to easily find information quickly due to the adjusted hierarchy of information.

Not removing any of the content, just re-organising it into a more objective solution makes this one of the most successful pages on the site. 

OUGD504 - Design for Screen - Sign In

As the current People of Print website doesn't have the account feature, I need to introduce it to a new and current audience encouraging them to create an account and take advantage of all that's on offer.

• Save projects
• Personalised News Feed
• Keep up to date with news and events

Out of all the relatable websites that I researched (It'sNiceThat, AIGA, BOOM and Eye Magazine) not one of them have this section on their site so in order to gain inspiration, I researched into a variety of platforms to see how they encourage people to sign up/in and create an account.

I used sources that were targeting the same audience as me:

Instagram

Images of the App on the latest version of the iPhone frames the desired content in a fresh and minimalist fashion. Instagram is primarily used on mobile devices which is suggested by the narrow and condensed structure of the login panel - but the image still makes it engaging when viewing on wider screens such as a computer monitor. 

Details required:

• Email/Phone Number
• Full name
• Username 
• Password

Logging in using Facebook is becoming more popular due to how quick and easy the process is. Simply clicking the button will create account details based on your Facebook profile. For some this may seem like a breach of privacy so will use the standard logging in process. 

Behance

Extremely minimalist page focuses the audiences attention on the 'sign in' section of the page. Although it isn't aesthetically pleasing, its objectivity makes it successful as it fulfils the users desire. 

For People of Print, the user can create an account by simply using their email address and a password as more personal information such as their address isn't relevant. When the user clicks the 'log in' section of the site, this page will appear and take up the entire screen. This gives the page more authority:

If the user doesn't currently have an account and doesn't want to log in with Facebook, then they just have to click on the 'Create an account' link which has been highlighted and presented using Helvetica Bold to create contrast which will draw the audiences eye. Including the account symbol and stamp tool on the page will suggest what icons to look out for, making them recognisable when they're browsing the site. The addition of the minimal back arrow will allow the user to return back to the original site page. 

By enlarging and rotating the People of Print account symbol will start to create a brand identity which could take over from the current circle and text:

The new symbol that I have created has a lot more presence due to the bold CMYK colours and it also communicates print media. 

OUGD504 - Design for Screen - SHOP/POSTERZINE

As People of Print's 'Shop' link already has an external site, I am going to leave the shop site as it is because the interface is completely different from People of Print's official site. The shops interface is successful because of its clarity. The large amount of white space that surrounds the typography makes the links easy to establish and the high impact images draw the users attention. This is important for a web store because consumers will want to see a well developed and composed web page in order to trust it.

Here is a demonstration for getting to the 'Department Store':

Currently, to return back to People of Print's website, the back button is used. I was considering creating a link button that would take the user back to the official site, however the Department Store already has a link at the top of the menu.

The Posterzine link will also go to the Department Store, specifically the Posterzine section. The reason I didn't create a separate page like originally proposed was because the Department Store has already successfully presented the information using GIF's and interactive images:

If I had managed my time better I would have liked to made these two websites more cohesive, however that is People of Print's brand identity which I have been cautious not to break.

OUGD504 - Design for Screen - Development - Community

I am using the 'community' section of the site to showcase the events, news and interviews that People of Print feature as the current site doesn't make this easily available. This section will be used to help creatives engage with the print community.

What's On
News
Submit

As I have removed 'submit' from the current menu, I aim to make it a prominent feature on this page because the site relies on submissions and it provides exposure for creatives and studios. I aim to combine news and events together instead of making them two separate sections like It's Nice That however I aim to provide the user with the ability to filter content. To achieve this, I researched into labels.

Repeating 'Submit' draws the audiences attention - To further illustrate its importance I intend to make this interactive or animated in order to stimulate the audience:

To immerse the user in the site, I can add links to features and subheadings such as 'submit' into the home page which will add typography to the collage and allow the audience to navigate to any feature of the site through randomly places links.

The current 'What's On' section of the site:

Consistent layout with the homepage makes navigating the site transferable. In order to find key information such as dates, times and locations, the user must click on the project and scroll through the content in order to find it. This is time consuming, especially as people have short attention spans when reading a lot of text on screen. To provide a more user friendly experience and provide the user with immediate information, I intend to publish the title, date and location of the event on the news feed, giving the audience control over the content they choose look at.

Changing type styles creates contrast and hierarchy:

Simplified the type by using the most relevant information, the audience can click on the link in order to find out more. This is a more efficient method than the current site as the user can browse more objectively without wasting time. 

Layered date saves room and centring the typography makes it more official. The information needs to be clear and concise in order to catch the audiences attention and immediately inform the user. 

Final layout:

Introduced the stamp symbol to the page so that the audience can bookmark the events into their personal account. Keeping the stamp in the grid system provides a lot of white space, giving it priority and authority.

When the user moves the mouse over the image, the title and location is displayed:

When the user clicks the stamp symbol, the logo will animate so that the user registers the article has been added and draws their attention to it. This makes the new feature recognisable.

• Enlarge logo in the centre of the page
• Toggle the logo to shake

OUGD504 - Design for Screen - Techniques and Processes

This section of the site provides the user with a specific location to find and research into the techniques and processes covered. The current site has a drop down menu bar which is confusing and cluttered. I added this section to the navigation menu because it provides creatives with specific sections of the site. In order for the site to work in real life, the developer will add labels to the articles so that they appear in the correct category or technique and process.

Made a list of the techniques and processes that are currently in the categories menu:

3D Printing

Animation

Etching

Letterpress

Linocut

Lithography

Mono-print

Photography

Risograph

Screen Print

Woodcut

Workshop

Making these more accessible for the user to explore will broaden their knowledge on print media and expose them to new and specific techniques. To communicate these processes through the website, I aim to use the crop marks and off cuts behind the content.

Used a similar disjointed layout as the 'Categories' section, using subjective typesetting to communicated the characteristics of working with print media in order to gain a positive emotional response. The use of primary colours is friendly and keeps a neutral tone:

If I was to send this to a developer, I would ask for the text to straighten once it is in the centre of the web page, ultimately increasing legibility. 

Once the user chooses a technique, a new page layer will present a brief explanation of the technique, along with specific articles and projects that use this technique. I presented this in a new layout in order to engage the audience and provide them with more choice of projects. For this example, I chose Lithography:

The most viewed and visited project is the largest image and as the user scrolls down it will reveal more. Once again the grid system provides organisation which is appropriate for the user to interpret the information. 

Layering the pages:

Once the mouse hovers over the image, a large title is layered over the top which confirms the name of the article:

Although this doesn't provide the user with a lot of immediate information, simply clicking the article will reveal more and the layered page will make it quick and easy for the user to return back to the original page.

Clicking on a project will take the user to the viewing page composition which is transferrable when viewing all projects from all sections of the site, creating consistency and familiarity throughout the site.

OUGD504 - Design for Screen - CATEGORIES

Colored Man

Geoff J. Kim and Niek Dekker

An interesting concept for digital collages. Elements move on their own while you scroll to adjust the composition. Being able to see the details of the paper makes the site seem tactile even though it is hidden behind a screen. It would be beneficial if People of Print had scans of ripped paper and high quality images of the work so that the audience can see the unique texture and printing finishes through the screen. 

The interaction with the site is smooth and the simplicity of using negative space to communicate new compositions makes the user feel part of the experiential process. People of Print can benefit from these interactive features in order to immerse the target audience in print media. 

The categories section of the website provides opportunity to immerse the user in print media by taking influence from Colored Man and scanning off cuts and teared paper and placing them into the layouts. In order to achieve this, I need to solve the interface problems before adding the the user experience so that the site is objective. 

Drop Down Menu

Drop down menu bar is hard to find as it is hidden in the pop up box at the bottom of the site. This must first be activated before the 'categories' section is visible. I aim to speed this process up and make it more available for the user to browse the plethora of subjects. 

The current website hosts a categories drop down bar which is detailed however techniques and processes are mixed with disciplines which makes it hard to be objective. The categories section of the site is available so that the user can quickly and efficiently find briefs that have been labelled under specific disciplines of design, for example graphic design, illustration and fashion. 

Drop Down Menu Critique:

• Frustrating to use - They force you through hover tunnels: narrow invisible pathways that your cursor must move through with precision to keep a menu active leading to poor user experience.
• Don't transfer well onto mobile devices
• Too many options - Psychologists have discovered that having too many options actually demotivates customers.
• A well-designed, fully-functioning drop-down menu comes at a price. 

In order to avoid using the drop down menu, I sketched out potential wireframes and labelled interactions that make the user interface less frustrating.

Layout Concepts:

1-

Providing a large high impact image accompanied by large title typography will immediately inform the user on the discipline. Interacting with the image will be prompted by opaque arrows which the user can press to swipe from one discipline to the other. Depending on the selection at the top, small articles will appear below the image in relation to the discipline currently selected. The is a predominantly visual solution which will be more engaging than listed typography. 

2-

The gridded system creates consistency and balance which is easy for the user to interpret and organises the information clearly. A simple title and image will be engaging especially if the image is taken from the most recent or most popular article in that category. 

3- Digitally mocked up a more expressive and disjointed page composition that hosts cropped sections from print media such as off cuts and ripped paper. This, along with the skewed and rotated typeface, creates a natural and playful page composition that can potentially be really interactive.

I used ripped up pieces of coloured paper and also scans from off cuts, adding to communicate print through digital:

Viewing Category

Once a category is selected, a new layer will display an array of projects from that category over the top of the categories page. Presenting the projects as two columns and surrounding them with a lot of white space was inspired by my research into layout from Vignelli Canon as a lot of white space creates authority and hierarchy:

As the user interacts with the site and moves the mouse over an image, the project title is displayed across the screen:

Layering the title of the project over the content was inspired by Studio Laucke Siebien as it immerses the audience in the image based content and also presents the information as if it was a collage. 

Another reason for the layout being spread out is so that the typography can be legible when displayed over the top of the images.

I intended this page to be playful and communicate print because it is important to keep the user stimulated whilst they browse so that they don't leave the page. The high impact imagery and white space provides room for the content to breath.