Development 5

 - Aria article 

   > background 

   > animations + interactions

- main page layout development 

- Mia article 

ARIA ARTICLE 


> Too many elements moving together 
> Spent time cutting out the messages with the background and same with pink aria images though, so should use these with additional interactive elements 
> Thought about the hover interaction used on Ell's page 
> Make pink aria pictures appear if you hover over another image or symbol? eg. finger up pixel cursor art used in aria collage experiments 
> Makes more sense to have the messages as hover elements, as the pink aria images create an important visual and if they were not present most of the time until the user interacted with them this would reduce the level of interest in the overall imagery 
> Typing message symbol can be used for hover element instead for the story 
> This way the user is following the story bit by bit, helping readability
> Also makes them feel like they're in this convo and aria is messaging them as they interact with the typing message symbol


> Typing message symbol hover interaction works well with story messages one by one 
> Idea of making a gallery of aria collage experiments for user to interact with could be made in different ways
> Liked this idea of creating a stack of images the user themselves can move around and play with, but what is the purpose? What is it communicating? 
> Could use this function for another purpose later on, makes more sense for this section to either use a like button for the user to feel like their on aria's Instagram, link to social media digital presentation, or for a simple gallery slide left and right 

> Or what if the user places the images beside a scale of hot or not? Swiping like on a dating app? 


> Peer Feedback 
> Background so large of aria's face feels like a boring iphone picture, add noise to make it more visually cohesive 




> Replaced 'moving of images around by user' with more simple 'gallery of images', as previously planned when designing aria's article 
> Rather than 2D box gallery this 3D version creates dimension and a more interesting journey towards interaction with it for the user, rather than just clicking arrows 
> It also has movement similar to swiping alike to dating apps, which is relevant to the overall aesthetic of the website 
> 'Click Here' Cursor symbol placed on images either side of main picture in view to help the user recognise the possibility for interaction 
> This wix gallery format however is created for landscape images, and so I added the function to be able to see the images full screen when you click on it
> Additional animated text encouraging user to click images also ensures they see the full designs 



> More animated elements needed and pull quotes
> Rose motif within collage experiments taken to use rose gifs as a way of reiterating sense of romance
> Pixel rose gif presenting digital/online romance, while wilting rose at the end reflecting the end of the relationship 
> Pull quotes made to be bright green and pink to be legible above the detailed background image, and as a playful impactful tone 
> 3D text even more impactful final message to user from story 


PEER FEEDBACK + USER INTERACTING TESTING 

> As with Ell's article, I had Leon go through the page to see how he with fresh eyes interacted with the page
> This showed what interactive elements were successful, in terms of the user knowing to interact and it working as intended 
> Elements which he didn't engage in meant I needed to sign post it more to encourage interaction
> This included the typing bubbles with hover to show the chunks of story in message bubbles 
> Typing bubbles don't feel interactive because they look so normal alongside the static emojis placed throughout the site page 
> They could have colour to make them feel more unique and something to interact with? 
> Or a mouse cursor to show they should click there 

Additional Ideas
> Add a name title? 

 

> Is it legible enough as distorted type and thin on such a detailed background?
> Peer Feedback says its successful 
> Could I utilise animation more as a way to present the title? 


> Sliding in of closing and distance from edges of the screen to present the 'closing of distance' 
> Consistent use of pink and green for pop of colours 
> 3D text bringing in dimension for a sense of 'romantic sexual space' 
> Overall aesthetic is very successful and relevant general direction with fun, playful and experimental collage and visuals 
> Balance between animated visuals, interactive elements and still impactful visuals 
> Still very much a visual story as well as a story presented through literal text 
> Sense of chaotic nature is presented between the interaction between the background visuals and foreground visuals, but viewer is still guided through interactivity with pixel cursor wayfinding 

Peer Feedback 
> Plays with layering and dimension 
> Digital collage in an interesting way 
> Interactive piece of collage 
> Experimental with digital and romance visual language 
> Feels personal and almost like you're in someone's phone/life 

Further Experiments For Joely Article 














We wanted each person being interviewed to have bespoke artwork which reflects them and their story. Mia is a florist and within her writing, spoke about leaving a 3-year toxic relationship and spending all of her lock-down with her girlfriends in the park and having a time of friendship romance and self-love. I really got the theme of blooming and blossoming - which was tied in completely with her profession in life. Mia talks about being in Sefton park each day which is one of Liverpool's most famous parks and is quite beautiful. I wanted the floral, sunshine and park imagery/collage to be Mia's theme - along with the continuation of digital/vintage computer error aesthetic. Given this, it was important to find a balance with using imagery that reflects mia and compliments her story - yet also incorporating the digital design style. I used lots of emojis and imagery that we see on our screens like speech bubbles and thumbnail images of how we'd view them on a laptop. At first, the collages were really organic looking - yet I felt going down the pop art route and layering colour on top of the photographs, dissolving the layers and experimenting with contrasting and negative colours which was a really successful outcome.  These more abstract looking multi-coloured outcomes provided a great background in order to layer even more legible imagery ontop - I was really pleased with these images.  














TO DO
> More Articles (design and transferring onto website) 
1 Mia
2 Joely 

Comments

Popular posts from this blog

Development 10

Identity EVALUATION