OUGD504: Module Evaluation

This module presented some interesting and unexpected challenges mainly due to studio brief one. The exchange of research completed over summer was an interesting development however the idea that it would allow students to face solely on the design of the publication instead of the content did not relate to my work as I was given little content to work from despite handing over edited photos, written up recipes and additional tips the for my partner to include within the publication. Furthermore substantial in-depth research had already been completed on my surrounding topic of healthy baking / recipes suitable for those with specific dietary requirements. However I receive a simple word document bullet pointing different beer personalities which had been copied and pasted from an article found later whilst conducting my own research into the topic in order to create content to make the publication on. Due to the lack of content received a significant amount of time was spent creating content for the publication by interviewing bar staff in order to gain a greater understanding of each personality provided by the client as little understanding could be gained from the information provided. Therefor causing limited time to be available to full develop the concept and design of the publication resulting in the final publication falling short of its full potential. Personally the hand-off process would have been beneficial if the amount of research and work done before hand had been reciprocated as I felt was at a disadvantage as my previous hard work had been discounted resulting in me starting from scratch instead of going straight into designing. Once the hand off had taken place both designers followed their own concepts based on the information provided, allowing for a more abstract interpretation to the limited information provided. Overall I feel studio brief 1 would have been more beneficial if everyone had been given a significant level of content to work from as adequate time would have been available to develop and refine the publication. Studio brief 2 was more manageable due to the advice given by Matt from Only both within crits and during his studio visits which helped develop my website more effectively as I was able to gain a professionals opinion as this was who my website was aimed at. Throughout this brief I had the opportunity to explore a new area of design which I’d had limited exposure to previously resulting in new skills being developed by working with new software such as after effects. Furthermore due to the open nature of this brief personal interpretation allowed for the production of a website based on an area of personal interest. However as design for screen was a new specialism I feel i would have benefited for induction into more revenant software such as After Effects rather than Photoshop. Overall my experience with this brief was positive despite the limitations of software which reduced why ability to produce a working prototype of the website to effectively showcase the user experience. 

Design for Screen: Evaluation

Room 136 effectively fulfils the brief to create an even and fair platform to showcase students work. The use of bold typography demands the users attention to the adjectives that represent each student, with the 'mix it up' section meaning the same students are not featured at the top of the website all the time adding to the fair and even nature of the platform. Furthermore the simple and refreshing aesthetic fits with the new approach of showcasing students personalities to industry through the use of adjectives and self portraits before professionals get to see their work is seen. Throughout the design process the approach of achieving each workflow within three steps has been adopted which has allowed for a simple and intuitive design to be created. This allows professionals to have the option to view the site quickly if they have a limited amount of time by using the refinement bar or spend longer by looking through the adjectives and choosing one that resonates with them. In relation to the adjectives themselves originally they represented characteristics of students work however following a crit with Matt for Only it was identified that professionals would prefer more personality based adjectives with this change reducing the likelihood of students repeating the same adjective.  I found this critique very helpful as it gave me a professionals opinion on the website which was overall positive, allowing for the assumption the website is appropriate to the target audience. Furthermore the use of animation within the website is successful in engaging users as during crits people have found the animation interesting and fun providing an interesting talking point within the website, which would translate into a professional environment, getting professionals interested in the website and students. When developing the website the use of Adobe XD would of provided a smoother more professional finish as a prototype could of been created, however this was not possible due to the inability to link sections on the same art-board meaning the navigational aspects of the site couldn't be showed resulting in the use of After Effects. Due to the use of After Effects some navigational tools such as the refinement bar and 'mix it up' have not been shown to there full potential due to limited knowledge of After Effects. Throughout this brief I had to draw on my limit experience with After Effects in order to animate the website as my skills only related to production of simple animations. Consequently the animation of the website could benefit from refinement if more time was available to perfect my skills. Overall I feel I've learnt a lot within this brief due to experimenting with different software and different design specialism.

Design for Screen: Animating Website

Originally Adobe XD was going to be used to produce this website as this would of allowed for an accurate representation of how the website would work due to the ability to link all aspects of the site together and produce a working prototype so users could interact with the prototype. However upon researching this software I discovered you can't link sections within on the same art-board resulting in the inability to show the navigational aspects of the site due to the use of an infinite scroll as the whole site needs to be on one art board for an infinite scroll to be possible (see figure 1-2). Additionally I discovered that you can't import a video or After Effects file into XD meaning if I were to use XD I wouldn't be able to incorporate the use of animation which is a main feature within the website. Consequently this lead to the website being produced in Illustrator and After Effects. Illustrator was used to develop wire frames and the final design flats with After Effects being used to create the animations within the site and the animation of the site itself.

Figure 1

Figure 2

Animating the website in After Effects allows for a simple representation of how the site will work if it was to be coded. The only limitations of this software is the difficulty in showing the navigation of the site accuratly as users can't click on sections and experiences the site itself. Furthermore it is difficult to regulate the speed of movement whilst showing the website, as each section that moves has to be imported separately making it difficult to match the speed of each frame. In addition it was also hard to show smooth transitions due to lack of experience using After Effects making it difficult to show the link between clicking a specialism (see figures 3-5) and the disappearing of adjectives as well as the 'mix it up' option (see figures 6-7). This would of been possible if Adobe XD could of been used or more time was available to refine my skills using After Effects.  Furthermore it was hard to show the link between clicking the students self portrait which would lead users to their LinkedIn profile resulting in a primitive representation of this link through fading the portrait to show its been clicked on and placing the profile quickly within the animation (see figures 8-10). Despite the limitations of the software I feel a good representation of the website has been created as each aspect is clearly shown (see figure 11).

Figure 3

Figure 4

Figure 5

Figure 6 

Figure 7

Figure 8

Figure 9 

Figure 10 

Design for Screen: Final Design

Upon loading the website an introduction is shown to users introducing them to Room 136, users can then scroll down at which point the animation is shown reinforcing how students plan to make an impact on the industry (see figure 1). From this point users can scroll down to either view all adjectives (one per student) or choose to refine them by specialism at which point the students whose work doesn’t fit within the specialism will disappear (see figure 2). This allows users to look at a more refined list of adjective, once one has been chosen it becomes underlined and then the page jumps down to view the students profile at which point a self portrait and rational of the brief shown will appear followed by the students work (see figure 1). If users like the students work they can click on the self portrait at which point they will be taken via a new tab to the students LinkedIn profile (see figure 3). Once a profile has been viewed users can scroll up to see the refined adjectives again in the same order or choose to mix up the order of the refined students (see figure 4), this option is available at any point whilst viewing the adjective allowing users to mix up the order of all adjectives so the same students are not always shown at the top (see figure 5). Users can scroll up to the homepage or animation at any point due to the incorporation of an infinite scroll.

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Beer Identities: Evaluation

Overall the Drink Anyone (see figure 1-2) successfully represents each personality presented by the client due to the different use of typeface, colour and layout for each personality. Furthermore the final publication effectively represents the concept of the book as it becomes more difficult to read as you progress to reflect a night of drinking and the loss of control gained from drinking. Additionally as each page is completely different they're not read in relation to one another allowing each personality to stand out on its own. Despite the final publication being quite effective if more time was available it could be developed so that each personality had its own chapter in which its personality is progressively shown in order showcase each personality more effectively. However the final publication was limited by the lack of information provided by the client which resulted in the designer having to develop content of their own to feature within the publication, which reduced the time available to experiment and develop the publication further to more accuratly represent each personality. The main issues occurred during the production of this publication as it was difficult to bind due to the multiple interactive elements which caused issues with the spin as it tended to split/break once the interactive elements where folded into the publication. Furthermore the interactive elements where also difficult to fold into the publication to make them flush with the other pages which resulted in some pages particularly the hipster sticking out of the first publication produced. Upon reflection of these issues a second publication was printed and bound with the addition of a cm margin of the left hand side so each page could be stuck to the other using double sided tape creating a hinge for the pages to be folded on. Furthermore Tyvek paper was incorporated within the complex folded pages within the book adds durability to the publication (see figure 3), whilst still keeping the cost down due to the cheap production method and low price of the other stock used.

Figure 1

Figure 2

Figure 3

Design for Screen: Final Crit

In order to make final improvement and general feedback on Room 136 a pin up crit gave the feedback shown bellow. I also took this opportunity to make final design decisions on how best to show the refinement option, should the adjectives become underlined or disappear? 

Feedback:

• Different weights for adjective rather than disappearing when a specialism is chosen 
• Good colour scheme 
• Contrast of orange and grey works well 
• Effective typeface 
• Colour scheme works well 
• Layout is effective 
• Animation is cool and engaging 
• Words could disappear when specialism is chosen 
• Love the head explosion/use of animation 
• Typeface and simple aesthetic is refreshing 
• Really like the animation 
• Good colour scheme, simple and effective 
• Contextually relevant name
• Good animation
• How long is the screen? are all of the students on one scroll? its an infinite scroll 
• Rearranging adjectives is good idea
• When you click branding or graphic design the words should disappear

Upon reflection of the feedback above I plan to make the adjectives disappear when a specialism is chosen as the use of lines makes the website look too crowded and takes aways from the simple aesthetic. Furthermore I plan to animate the mix up feature so that users can see how the layout of the adjectives will change when this option is chosen. Overall the feedback was generally positive as students liked the use of the adjectives and self portraits as well as the ability for professionals to identify them through specialism. 

Design for Screen: Crif Feedback

Feedback was gained on the layout of the website in order to identify any problems, as I was concerned about overwhelming the viewer due to the amount of adjectives. Upon reviewing the site it was found that the use of basic columns gave the website a rigid and boring aesthetic and failed to fully engage the viewer. Therefor it was suggested to experiment with making the text larger and altering the layout by randomising the words and looking at the rag of a piece of text. One concern when developing this section was fitting the adjectives within one page fold however due to the use of an infinite scroll this isn't necessary as the user can just scroll down allowing for experiments with the type size. Consequently this feedback has lead to experiments influenced by the rag of a body of text to create a continuous stream of adjectives (see figure 1-4) so the viewer can either scroll to discover adjectives without context or refine the list by choosing a specialism. The use of typographic interventions prevents the reader from being overwhelmed by a list of adjectives as the slash breaks up the words allowing for a distinction to be made. Consequently figure 5 was discarded as it was too overwhelming for the user as all the words where scattered. It was also suggested that a shuffle feature could be added to the website so the user can change the order the words appear in.  Figure 6 explores the contrast of large text at a light weight, personally I felt this lacked impact and wasn't visually engaging as other experiments.

Figure 2

Figure 1

Figure 3

Figure 4

Figure 6

Figure 5

Design for Screen: Adjective development

In order to test the use of adjectives within the site and address concerns raised within crits that students would repeat adjectives, I've asked those within 2nd year to describe themselves in one word:

• Friendly 
• Happy 
• Chilled 
• Daddy long legs 
• Thoughtful 
• Nonchalant  
• Stubborn/outspoken 
• Feisty
• Chatty 
• Approachable 
• Eclectic 
• Lost 
• Sound 
• Clumsy 
• Unpredictable 
• Tall 
• Goofy 
• Suave 
• Smooth 
• Trustworthy
• Active 
• Sassy 
• Teeth 
• Mango 
• Flappy
• Perfectionist
• Emotional
• Hectic 
• Opinionated
• Ditzy 

On reflection of the selection of students I asked, no adjectives repeated themselves allowing for the assumption that a different adjective representing each student will be possible. The only potential issue with this is the arrangement/placement of each on the screen as it may go beyond one page fold which could cause some confusion. However in order to make this easier when a specialism is chosen the students whose work doesn't fit within this specialism will disappear. 

Design for screen: Colour experiments

Initial Ideas:

Upon developing a colour scheme for the site I initially looked at taking influence from the doors to room 136 (see figure 1). However although this experimentation was contextually relevant I felt it made the site look too similar to UAL as I want the site to stand alone and speak for the creative community the students create for themselves whilst studying there. This lead to other colour experimentations (see figure 2) mainly focusing on bold and bright colours, however I feel research into colour theory will help refine a colour.

Figure 1

Figure 2

Colour Theory:

Red can be a very powerful and overwhelming colour at times symbolising power and passion. it can also be very versatile with bright red being very energetic and dark shades being more elegant and powerful. The use of red in the above experimentations is very energetic and engage, however may distract and clash with the images of students work that will appear on the site. 

Orange is also a bright and engaging colour symbolising change and movement. Furthermore orange tends to command attention in a more subtly manner than red which can be quite overpowering. The connotations of orange with change a movement relate closely to the concept of the site which is based on providing a stepping stone into industry for students and aiding the students progression into industry making it very appropriate for the site. Therefor I plan to experiment with the use of orange further as the shades above work well however could be edited further to be more engaging without overpowering the viewer.  

Green represents growth and new beginnings which would fit well within the site however it also has connotations with jealous and lack of experience which is the opposite impression I wan to portray within the site. Despite greens balancing and calming influence I feel its not as appropriate when compared to orange.

Blue is commonly used to represent responsibility and calmness however these associations rely heavily on the shade, with dark blues being associated with corporations and light blues giving a calming influence. Consequently I feel the association with corporations would distract from the community element trying to be portrayed within the site  

After researching colour theory I've experimented with the use of orange throughout the site. Upon receiving feedback on the initial experiments (see figure 3) it was suggested to try a grey background (see figure 4) which allowed the orange to stand out more compared to previous experiments without distracting from the students work. Personally I feel figure 5 is the most successful as it creates a contrast without overpowering the orange or the work as other experiments in figure 4 where either too dark making the text difficult to read. 

Figure 3

Figure 4

Figure 5

Design for Screen: Website Dialogue

Initial thoughts:

• designer in training 
• fair 
• inclusive 
• social 
• even platform to showcase talent 
• hidden identities not quite ready to be shown 

Ideas:

• Room 163 is a community of designers looking to showcase their work on an fair and creative platform, showcasing the creative identities of those who occupy room 136 at Leeds Arts University.

• Room 163 showcases the creative personalities, hiding the identities of those involved

• we are not quite ready to reveal ourselves to industry

• not quite ready yet but we're ready to blow your minds 

• Room 163 is a community of designers looking to showcase there work on an fair and creative platform, showcasing the creative identities of third year graphic design students at Leeds Arts University. 
• We're not in industry yet but we're ready to blow your minds. 

• We are not quite ready for industry but here we are, design babies. 

• don't do this at home could appear after the animation

Design for Screen: Animation research, Hungry Sandwich Club

In order to gain a greater understanding of the York Mediale site and the incorporation of animation, I contacted Andy and Martin the founders of Hungry Sandwich Club in order to gain an understanding for the reasoning for using animation within the site and how it was produced by asking the following questions:

What inspired the use of multiple animations within the website? 

A:
The festival covers a lot of different work and visual styles from artists working between technology and art. The tagline for the festival is 'Art meets the future'

We wanted the site to reflect this, to get across the idea of an eclectic mix of work with quick interactive animations that are always changing. We wanted people to be able to play with the brand and find things they weren't expecting. 

Do you think the use of animations within a website creates a more engaging user experience?

A:
Using animation is a great way to make websites more engaging. It can help give character to a site, to make even small interactions charming or unexpected. More and more we're seeing animation used online to tell stories, explain ideas in a simple way, or just to create something fun for visitors! 

How did you go about creating the animations within the site?

A:
The interactive experiments are all built in code, with short logo stings in between made in After Effects and Cinema 4D.

Design for Screen: Animation

In order to incorporate animation within the site to create a interesting and engaging aspect I've experimented with producing an animation featuring a simple illustration with an exploding head of confetti to show that we as students are ready to blow your mind. This required isolating the individual section that will be animated within the illustration so they could be edited in After Effects separately (see figures 1-3). This allowed the head to be animated so that it would pop open allowing for the confetti to pop out. In relation to creating the confetti, squares are drawn and then edited using pixel polly which creates an exploding effect, however the initial animation needs editing further to create more of an explosion (see figure 4). Whilst creating this animation its been particularly difficult to maximise the amount of explosion by editing the force, randomness and grid spacing (see figure 5).Whilst experimenting with different sections of the pixel polly effect I discovered lowering the grid spacing created slight smaller confetti which when used in conjunction with larger versions it creates the impression of more confetti allowing for a bigger explosion to be created (see figure 6).  Furthermore on receiving feedback from peers the movement of the hat has been edited by adding more points of movement (see figure 7) to create a smother transition and avoid the hat overlapping parts of the head such as the ear which occurred in earlier experiments (see figure 4).  

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 5

Figure 6

In order to further refine this animation for use within the website the confetti pieces have been made smaller to greater a larger explosion by reducing the grid spacing further to 2. By changing the shape to textured square different shades of confetti are created creating a more realistic explosion which is aided by increasing the speed randomness to 100% which is shown more effectively when used with a smaller grid spacing (see figure 7). Furthermore upon refining the animation I discovered the ability to change the anchor point of specific layer which allowed for the movement of the hat to me much smoother by moving the anchor point to match the point where the hat pivots from (see figure 8). 

Figure 7

Figure 8 

Design for Screen: Design Development

Upon receiving feedback it was decided the use of animation on the home page had little reasoning, leading to experiments looking at how to incorporate the about section within the home page. Initial experiment seen in figure 1 explore the use of negative space and using the information to inform the grid system. Upon receiving feedback from peers the first experimentation aligning the text with the 6 in 136 creates an even and balanced aesthetic to the website and other experiments look awkward and uneven on the homepage (see figure 1-2). Furthermore upon refining this layout so that the text within the site followed the same grid system, allowing the viewer to know where the information will appear at all times. Editing 136 so it became an outline instead of a sold number fit within the rest of the site more effectively as previous experimentation appear too bold as suggested through peer-to-peer feedback. 

Upon further reflection on the concept an animated figure will feature within the site which lead to further developments of where to place the man. Initially I had the idea of the animation appearing once you had hovered over the text however the viewer needs to read the text to gain context for the animation so this was deemed inappropriate, this also relates to experimentation featuring the animation alongside the text (see figure 3) . Therefore this need for context led to the addition of another page so the viewer could read the text and scroll down at which point the animation would appear (see figures 4-5). Personally I fell this aspect could be developed more so that the confetti could be included at other points within the site, for example if you click on the students linked in.

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Design for Screen: Crit with Matthew Tweddle, Only

In order to develop my site further I've gain feedback on initial ideas and wire frames (see figures 1-2) from Matt from Only who specialise in design for screen:

• Use of adjectives could become complicated if people choose the same adjective, could include further refining adjectives to help identify students.
• Could show students self portraits if more than one student has the same adjective.
• Students could pick more than one adjective which represents them so they come up under more than one adjective, use the adjectives as a navigational tool rather than a form of representation. 
• Only use adjectives to show personality, remove those that describe work as the work shown allows the work to speak for itself. 
• Thought the inclusion of animation was good, provided an interesting talking point within the site.
• Could include a way for students to edit there own profile by starting at a similar point so there would be visual consistency, within this there could be a section allowing students to go through a few steps to generate their adjective. 

Thoughts:

In order to help aid usability the only adjectives that will be featured on the site will be those describe the students personalities instead of there work, although there where concerns about repetition within the adjective in reality I feel this wouldn't occur and if so the students could revaluate there choice to avoid this situation. Furthermore although the incorporation of the ability for students to edit there own profile I fell this makes the concept of the site too complex as it was to feature a single brief per student to give professionals an idea of what there work is like. Although this feature would allow the personality of the student to show through further I feel the use of the self portrait and the adjective is enough to leave an impression on professionals as the inclusion of personalising profiles could take away from the overall visual consistency which allows the students to be shown as a creative community. Overall the use of adjectives describing the students personality solves the main issue highlighted within the crit of how to avoid repetition and keep the site simple allowing the audience to complete there tasks with a minimal workflow. 

Figure 1

Figure 2

Design for Screen: Design Experiments

Initial experiments looked at  how to prompt the viewer to scroll down by creating a grid system based on the width of 136. Looking at placing the small about section in the active zone (see figure 1) to further prompt users to scroll down or placing in on the next page (see figure 2) and relying on the instinctual need to scroll down to find information. Personally I feel the use of adhering to the page fold is more successful as the site speaks to a design literate community who are likely to scroll down instinctively.

It was suggested during feedback to have the information on the home page (see figures 3-6) so it would be the first thing viewers would see allowing the meaning of the site to be conveyed immediately. However upon reflection I feel the experimentations below are too crowded as more negative space, seen in figures 7-11 is a more successful approach. The use of negative space allows the viewer to be drawn to the 136 initially following it down the information which prompts the user to scroll down further (see figures 8-11). This combination of a more spacious layout allows the message of the site to be conveyed immediately without overwhelming the audience.

In relation to the navigation of the site the placement of room 136 on each side as seen in figures 8 and 9 allow the user to click and jump back to the home page if needed. Due to the simplicity of the site few navigational tools are needed due to the limited pages. Upon receiving feedback on the placement of this navigational aspect it was found that a single room 136 on the right hand side would be more effective as it would mimic the placement of a scroll bar. Furthermore in relation to navigational tools the use of a small refinement bar below the adjectives allows users to refine there search via a specific design discipline, which will highlight the students who fit into that category. This allows for further refinement as due to the number of students on the course the viewer may find it hard to find specific students that relate to them.   

Figure 11 depicts the most popular layout based on peer-to-peer feedback as the use of creating a grid system from the placement of the information below the 6 creates a consistant layout throughout the site allowing viewers to know where the information is going to appear each time they chose a new student. Furthermore the use of unstructured adjectives allows for greater exploration by the user, with the opportunity to refine by using the bar bellow. Many found placing the refinement options within the same grid system as the main information given created an awkward and unappealing aesthetic to the sight and found the placement below was much easier to navigate and recognise.

Figure 1

Figure 2

Figure 4

Figure 3

Figure 6

Figure 5

Figure 7

Figure 10 

Figure 8 

Figure 9 

Figure 11